Scribd Logo
Unggah

Selamat datang di Scribd!

  • Bab 6

    Diunggah oleh

    Muhammad Riski Anugrah
    8 tayangan6 halaman

    Judul Asli

    BAB 6 (1)

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini

    Hak Cipta:

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

    Bab 6

    Diunggah oleh

    Muhammad Riski Anugrah

    Hak Cipta:

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

    BAB 6

    LIST HTML

    CAPAIAN PEMBELAJARAN (Learning Out Come)


    1. Capaian Pembelajaran Umum : Mahasiswa mampu memahami tentang List dalam HTML
    2. Capaian Pembelajaran Khusus : Mahasiswa mampu memahami dan mempraktekkan
    tentang List dalam HTML

    6.1. Definisi dan Fungsi List


    Daftar/list adalah merupakan kumpulan teks yang disusun sedemikian rupa sehingga
    item-item yang ada memiliki nomor urut atau bisa juga berupa tanda-tanda khusus/symbol.
    List Tag pada HTML memiliki 4 varian yaitu:

    1. Ordered List
    2.Unordered List
    3. Nested List
    4. Definition List

    6.2. Ordered List

    Untuk membuat list terurut nomor (ordered list), kita gunakan tag pembuka <ol> dan
    penutup </ol> , sedangkan untuk mendata setiap itemnya menggunakan tag <li> sebagai
    pembuka dan </li> sebagai penutup. ol kependekan dari Ordered List, li kependekan dari List
    item.

    Bentuk Umum:
    <ol [atribut]>
    <li>...item daftar...<li>
    <li>...item daftar...<li>
    <li>...item daftar...<li>
    </ol
    Contoh :
    <html>
    <head>
    <tittle> ordered list </tittle>
    </head>
    <body>
    <p>Daftar Hari: </p>
    <ol>
    <li>Senin </li>
    <li>Selasa</li>
    <li>Rabu</li>
    <li>Kamis</li>
    <li>Jum’at</li>
    <li>Sabtu</li>
    <li>Minggu</li>
    </ol>
    <p>Daftar Kuliah: </p>
    <ol>
    <li>Web Design </li>
    <li>Pemrograman Web</li>
    <li>Database</li>
    </ol>
    <body>
    </html>

    Atribut type pada tag <ol>:


    I Angka ditampilkan dengan angka romawi huruf besar

    i Angka ditampilkan dengan angka romawi huruf kecil

    A Angka ditampilkan dengan abjad huruf besar


    a Angka ditampilkan dengan abjad huruf kecil

    1.3. Unordered List


    Unordered List berfungsi untuk membuat daftar list dimana tiap bagian tidak akan
    diberi penomoran, tag diawali dengan <ul> dan diakhiri dengan </ul>. Untuk tiap bagian
    diawali dengan <li> dan diakhiri dengan <./li>. Tag <ul> secara default akan menggunakan
    lingkaran / dengan attribute Type = Circle.

    Bentuk Umum:

    <ul [atribut]>

    <li>...item daftar...</li>

    <li>...item daftar...<li>
    <li>...item daftar...<li>
    </ul>

    Contoh:
    <html>
    <head>
    <title>Unordered List</title>
    </head>
    <body>
    <p>Daftar Hari:</p>
    <ul>
    <li>Senin</li>
    <li>Selasa</li>
    <li>rabu</li>
    <li>Kamis</li>
    <li>Jumat</li>
    <li>Sabtu</li>
    <li>Minggu</li>
    </ul>
    </body>
    </html>

    6.4. Nested List


    List item dapat digunakan secara bersarang, maksudnya di dalam list ada list item
    lagi.

    Contoh:
    <html>
    <head>
    <title>Nested List</title>
    </head>
    <body>
    <ol>
    <li>Buah</li>
    <ul type=”circle”>
    <li>Semangka</li>
    <li>Jambu</li>
    </ul>
    <li>Bunga</li>
    <ul type=”Disc”>
    <li>Melati</li>
    <li>Anggrek</li>
    </ul>
    <li>Kendaraan </li>
    <ul type=”square”>
    <li>Mobil</li>
    <li>Sepeda Motor</li>
    </ul>
    </ol>
    </body>
    </html>

    6.5. Definition List


    Definition List terdiri diapit oleh tag <DL>...</DL> tag menentukan definition term
    serta <DD> tag menentukan definition itu

    Bentuk Umum:

    <DL>

    <DT>Label

    <DD>Keterangan</DD>

    </DT>

    <DT>Label

    <DD>Keterangan</DD>

    </DL>

    Contoh:

    <html>

    <head>

    <title>Definition List</title>

    </head>

    <body>

    <h3>Contoh Definition List</h3>

    <dl>

    <dt>Web Design</dt>

    <dd>Belajar HTML-Macromedia Dreamweaver</dd>

    <dt>Pemrograman Web</dt>

    <dd>Belajar PHP MySQL</dd>

    </dl>
    </body>

    </html>

    6.6. Soal Latihan


    Buatlah sebuah web dengan menggunakan :
    1. Ordered List
    2. Unordered List
    1. Nested List
    2. Definition List

    Anda mungkin juga menyukai