Scribd Logo
Unggah

Selamat datang di Scribd!

  • 03 List HTML

    Diunggah oleh

    I Kadek Hendra Librata
    8 tayangan13 halaman
    Dokumen tersebut membahas tentang penggunaan tag-tag list pada HTML untuk membuat daftar terurut (ordered list), tak terurut (unordered list), dan deskriptif (description list). Tag-tag tersebut digunakan untuk menyusun informasi secara terstruktur menggunakan nomor, simbol, atau istilah dan definisi.

    Deskripsi Asli:

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    DOCX, PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini
    Dokumen tersebut membahas tentang penggunaan tag-tag list pada HTML untuk membuat daftar terurut (ordered list), tak terurut (unordered list), dan deskriptif (description list). Tag-tag tersebut digunakan untuk menyusun informasi secara terstruktur menggunakan nomor, simbol, atau istilah dan definisi.

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai DOCX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    8 tayangan13 halaman

    03 List HTML

    Diunggah oleh

    I Kadek Hendra Librata
    Dokumen tersebut membahas tentang penggunaan tag-tag list pada HTML untuk membuat daftar terurut (ordered list), tak terurut (unordered list), dan deskriptif (description list). Tag-tag tersebut digunakan untuk menyusun informasi secara terstruktur menggunakan nomor, simbol, atau istilah dan definisi.

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai DOCX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 13

    MEMBUAT LIST DI HTML

    Perhatian kode html berikut.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>Membuat Ordered List</title>
    </head>
    <body>
        <h1>Kriteria HP yang aku mau:</h1>
        <p>- RAM 12Gb</p>
        <p>- Kamera 108Mp</p>
        <p>- Snapdragon 888</p>
    </body>
    </html>

    Jika kode itu dijalankan, akan menghasilkan seperti ini


    Elemen List di HTML

    HTML sudah menyediakan elemen untuk membuat list. Ada tiga macam
    jenis list yang bisa dibuat di HTML:

    1. Ordered List adalah list yang terurut;


    2. Unordered List adalah list yang tak terurut;
    3. dan Description List adalah list yang berisi definisi.

    1. Ordered List di HTML

    Ordered list dibuat dengan tag <ol>. Lalu di dalamnya diisi


    dengan item-item yang akan dimasukkan ke dalam list. Item dibuat
    dengan tag <li> (list item).
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>Membuat Ordered List</title>
    </head>
    <body>
        <h1> Kriteria HP yang aku mau:</h1>
        <ol>
            <li>Ram 12Gb</li>
            <li>Kamera 108Mp</li>
            <li>Snapdragon 888</li>
        </ol>
    </body>
    </html>

    List diatas diurutkan berdasarkan angka dari 1, 2, 3, dan


    seterusnya. Untuk mengganti menggunakan bentuk lain, bisa
    menggunakan atribut type pada tag ol dan berikut ini nilai yang bisa
    diberikan:

    1. a untuk alfabet a, b, c, dan seterusnya;


    2. A untuk alfabet A, B, C, dan seterusnya;
    3. i untuk angka romwari i, ii, iii, dan seterusnya;
    4. I untuk angka romwari I, II, III, dan seterusnya

    <!DOCTYPE html>
    <html>
    <head>
        <title>Ordered List dengan Atribut Type</title>
    </head>
    <body>
        <h3>List dengan type alfabet</h3>
        <ol type='a'>
            <li>Ram 12Gb</li>
            <li>Kamera 108Mp</li>
            <li>Snapdragon 888</li>
        </ol>
    </body>
    </html>
    Buatlah kode HTML yang menampilkan hasil sebagai berikut
    <!DOCTYPE html>
    <html>
    <head>
        <title>Ordered List dengan Atribut Type</title>
    </head>
    <body>
        <h3>List dengan type alfabet</h3>
        <ol type='a'>
            <li>RAM 12Gb</li>
            <li>Kamera 108Mp</li>
            <li>Snapdragon 888</li>
        </ol>
        <h3>List dengan type alfabet kapital (huruf besar)</h3>
        <ol type='A'>
            <li>RAM 12Gb</li>
            <li>Kamera 108Mp</li>
            <li>Snapdragon 888</li>
        </ol>
        <h3>List dengan type romawi</h3>
        <ol type='i'>
            <li>RAM 12Gb</li>
            <li>Kamera 108Mp</li>
            <li>Snapdragon 888</li>
        </ol>
        <h3>List dengan type romawi kapital</h3>
        <ol type='I'>
            <li>RAM 12Gb</li>
            <li>Kamera 108Mp</li>
            <li>Snapdragon 888</li>
        </ol>
    </body>
    </html>
    2. Unordered List di HTML

    Unordered list adalah list yang tak terurut yang menggunakan


    simbol-simbol pada item-nya. Unordered list dibuat dengan tag <ul> dan
    untuk item-nya dibuat juga dengan tag <li>.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>Membuat Unordered List</title>
    </head>
    <body>
        <h1>Aplikasi pada microsoft office:</h1>
        <ul>
            <li>Ms. Word</li>
            <li>Ms. Excel</li>
            <li>Ms. Access</li>
            <li>Ms. Power Point</li>
            <li>Ms. Outlook</li>
        </ul>
    </body>
    </html>
    Kode di atas akan menghasilkan tampilan sebagai berikut.

    Secara default simbol yang digunakan oleh unordered list adalah lingkaran
    kecil (disc). Kita juga bisa menggantinya dengan atribut type. Berikut ini
    nilai yang bisa diberikan untuk atribut type:

    1. square untuk simbol persegi;


    2. disc (default) untuk simbol lingkaran disc;
    3. none tidak memakai simbol;

    Buatlah kode HTML untuk menampilkan halaman sebagai berikut.


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>Membuat Unordered List</title>
    </head>
    <body>
        <h1>Aplikasi pada microsoft office:</h1>
        <ul type="none">
            <li>Ms. Word</li>
            <li>Ms. Excel</li>
            <li>Ms. Access</li>
            <li>Ms. Power Point</li>
            <li>Ms. Outlook</li>
        </ul>
        <h1>Menu Ribbon pada Ms. Word:</h1>
        <ul type="square">
            <li>Home</li>
            <li>Insert</li>
            <li>Page Layout</li>
            <li>Mailings</li>
            <li>View</li>
        </ul>
    </body>
    </html>

    3. Description List di HTML

    Description List adalah list yang berisi deksripsi atau penjelasan dari
    sesuatu. Ada tiga tag yang digunakan untuk membuat description list:

    1. <dl> (description list) tag untuk memulai description list;


    2. <dt> (description term) tag untuk membuat kata yang akan
    dideskripsikan;
    3. <dd> (description description) tag untuk membuat penjelasan dari
    kata.
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Membuat Description List</title>
    </head>
    <body>
        <body>
            <h1>Aplikasi pada microsoft office:</h1>
            <dl>
                <dt>Ms. Word</dt>
                <dd>Ms. Word adalah aplikasi untuk mengolah kata</dd>
                <dt>Ms. Excel</dt>
                <dd>Ms. Excel adalah aplikasi untuk mengolah angka</dd>
                <dt>Ms. Power Point</dt>
                <dd>Ms. Power Point adalah aplikasi untuk mengolah presentasi</dd>
            </dl>
        </body>
    </body>
    </html>
    Buatlah kode HTML yang menampilkan hasil sebagai berikut
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Nested List</title>
    </head>
    <body>
        <body>
            <h1>Membuat List di Dalam List</h1><hr />
            <h2><mark>Aplikasi</mark> pada laptopku:</h2>
            <ol>
                <li>
                    <b>Microsoft Office</b>
                    <ul type="square">
                        <li><u>Ms. Word</u></li>
                        <li><u>Ms. Excel</u></li>
                        <li><u>Ms. Power Point</u></li>
                    </ul>
                </li>
                <li>
                    <b>Aplikasi Browser</b>
                    <ul type="circle">
                        <li><i>UC Browser</i></li>
                        <li><i>Safari</i></li>
                        <li><i>Google Chrome</i></li>
                    </ul>
                </li>
                <li>
                    <b>Adobe Photoshop</b>
                </li>
            </ol>
        </body>
    </body>
    </html>

    Anda mungkin juga menyukai