Belajar membuat list pada html

belajar membuat list html

List adalah salah satu elemen HTML yang berguna untuk menampilkan data secara berurutan. Biasanya <li> ditampilkan bersamaan tag <ul> yang kepanjangan dari Unordered atau <ol> yang kepanjangan dari Ordered. List sendiri ditampilkan secara default dengan bola hitam.

Unordered list

Unordered adalah salah satu elemen HTML kegunaanya membuat daftar yang tidak berurutan. Biasanya ditandai dengan bola hitam secara defaultnya. Cara membuat unordered menggunakan <ul> dan <li>.

Contoh:

<!DOCTYPE html>
<html>
    <head>
        <title>Judul post</title>
    </head>
    <body>

    <ul>
        <li>Html</li>
        <li>Css</li>
        <li>Javascript</li>
        <li>Php</li>
    </ul>

    </body>
</html>

Hasilnya:

  • Html
  • Css
  • Javascript
  • Php

Memilih gaya penandaan unordered

ValueKegunaanya
discMenampilkan gaya bola hitam ( default )
circleMenampilkan gaya bola putih
squareMenampilkan gaya kotak
noneMenghapus gaya

Contoh menggunakan disc ( Default ):

<!DOCTYPE html>
<html>
    <head>
        <title>Judul post</title>
    </head>
    <body>

    <ul style="list-style-type: disc">
        <li>Html</li>
        <li>Css</li>
        <li>Javascript</li>
        <li>Php</li>
    </ul>

    </body>
</html>

Hasil menggunakan disc ( Default ):

  • Html
  • Css
  • Javascript
  • Php

Contoh menggunakan circle:

<!DOCTYPE html>
<html>
    <head>
        <title>Judul post</title>
    </head>
    <body>

    <ul style="list-style-type: circle">
        <li>Html</li>
        <li>Css</li>
        <li>Javascript</li>
        <li>Php</li>
    </ul>

    </body>
</html>

Hasil menggunakan circle:

  • Html
  • Css
  • Javascript
  • Php

Contoh menggunakan square:

<!DOCTYPE html>
<html>
    <head>
        <title>Judul post</title>
    </head>
    <body>

    <ul style="list-style-type: square">
        <li>Html</li>
        <li>Css</li>
        <li>Javascript</li>
        <li>Php</li>
    </ul>

    </body>
</html>

Hasil menggunakan square:

  • Html
  • Css
  • Javascript
  • Php

Contoh menggunakan none:

<!DOCTYPE html>
<html>
    <head>
        <title>Judul post</title>
    </head>
    <body>

    <ul style="list-style-type: circle">
        <li>Html</li>
        <li>Css</li>
        <li>Javascript</li>
        <li>Php</li>
    </ul>

    </body>
</html>

Hasil menggunakan none:

  • Html
  • Css
  • Javascript
  • Php

Ordered list

Ordered adalah salah satu elemen HTML kegunaanya membuat daftar yang berurutan. Biasanya ditandai dengan angka secara default. Cara membuat Ordered menggunakan <ol> dan <li>.

Contoh:

<!DOCTYPE html>
<html>
    <head>
        <title>Judul post</title>
    </head>
    <body>

    <ol>
        <li>Html</li>
        <li>Css</li>
        <li>Javascript</li>
        <li>Php</li>
    </ol>

    </body>
</html>

Hasilnya:

  1. Html
  2. Css
  3. Javascript
  4. Php

Memilih gaya penandaan ordered

ValueKegunaanya
type=”1″Menampilkan gaya dengan angka ( default )
type=”A”Menampilkan gaya dengan huruf besar
type=”a”Menampilkan gaya dengan huruf kecil
type=”I”Menampilkan gaya dengan huruf romawi besar
type=”i”Menampilkan gaya dengan huruf romawi kecil

Contoh menggunakan type 1 ( default ):

<!DOCTYPE html>
<html>
    <head>
        <title>Judul post</title>
    </head>
    <body>

    <ol type="1">
        <li>Html</li>
        <li>Css</li>
        <li>Javascript</li>
        <li>Php</li>
    </ol>

  </body>
</html>

Hasil menggunakan type 1 ( Default ):

  1. Html
  2. Css
  3. Javascript
  4. Php

Contoh menggunakan type A:

<!DOCTYPE html>
<html>
    <head>
        <title>Judul post</title>
    </head>
    <body>

    <ol type="A">
        <li>Html</li>
        <li>Css</li>
        <li>Javascript</li>
        <li>Php</li>
    </ol>

  </body>
</html>

Hasil menggunakan type A:

  1. Html
  2. Css
  3. Javascript
  4. Php

Contoh menggunakan type a:

<!DOCTYPE html>
<html>
    <head>
        <title>Judul post</title>
    </head>
    <body>

    <ol type="a">
        <li>Html</li>
        <li>Css</li>
        <li>Javascript</li>
        <li>Php</li>
    </ol>

  </body>
</html>

Hasil menggunakan type a:

  1. Html
  2. Css
  3. Javascript
  4. Php

Contoh menggunakan type I:

<!DOCTYPE html>
<html>
    <head>
        <title>Judul post</title>
    </head>
    <body>

    <ol type="I">
        <li>Html</li>
        <li>Css</li>
        <li>Javascript</li>
        <li>Php</li>
    </ol>

  </body>
</html>

Hasil menggunakan type I:

  1. Html
  2. Css
  3. Javascript
  4. Php

Contoh menggunakan type i:

<!DOCTYPE html>
<html>
    <head>
        <title>Judul post</title>
    </head>
    <body>

    <ol type="i">
        <li>Html</li>
        <li>Css</li>
        <li>Javascript</li>
        <li>Php</li>
    </ol>

  </body>
</html>

Hasil menggunakan type i:

  1. Html
  2. Css
  3. Javascript
  4. Php

List bersarang

<!DOCTYPE html>
<html>
    <head>
        <title>Judul post</title>
    </head>
    <body>

    <ul>
        <li>Html</li>
        <li>Css
            <ul>
                <li>Bootstrap</li>
                <li>Materialize</li>
                <li>Bulma</li>
            </ul>
        </li>
        <li>Javascript</li>
        <li>Php</li>
    </ul>

  </body>
</html>

Hasilnya:

  • Html
  • Css
    • Bootstrap
    • Materialize
    • Bulma
  • Javascript
  • Php

Description List

Anda bisa membuat list HTML untuk deskripsi.

Contoh:

<!DOCTYPE html>
<html>
    <head>
        <title>Judul post</title>
    </head>
    <body>

    <dl>
    <dt>Html</dt>
    <dd>Html kepanjangan dari Hypertext Markup Language.</dd>

    <dt>Css</dt>
    <dd>Html kepanjangan dari Cascading Style Sheet.</dd>
    </dl>

  </body>
</html>

Hasilnya:

Html
Html kepanjangan dari Hypertext Markup Language.
Css
Html kepanjangan dari Cascading Style Sheet.

Elemen <dl> mendefinisikan sebuah Deskripsi List yang didalamnya terdapat Elemen <dt> dan <dd>.
Elemen <dt> mendefinisikan sebuah Data Term atau Data Title
Elemen <dd> mendefinisikan sebuah Data Deskripsi

ElemenKegunaanya
<ul>Mendefinisikan unordered untuk list
<ol>Mendefinisikan ordered untuk list
<li>Mendefinisikan sebuah list item
<dl>Mendefinisikan deskripsi list
<dt>Mendefinisikan sebuah data title atau data term
<dd>Mendefinisikan sebuah data deskripsi

Leave a Reply

Your email address will not be published. Required fields are marked *