SECTION 2

Teknik Meng-Konstruksi Lists

A. Objective

B. Requirement

1. Text Editor

Sublime Text 3, Notepad ++, Intype, Adobe Dreamweaver, dll

2. Web Server

Apache yang sudah disediakan oleh Xampp

3. Web Browser

Google Chrome, Mozilla Firefox, Internet Explorer, dll

C. Materi

Sebagai contoh, misalkan diinginkan untuk membuat sebuah lists disebuah halaman website

tentang hobi seorang mahasiswa, misalkan mahasiswa A mempunyai hobi antara lain yaitu

- Membaca

- Olahraga

- Mendengarkan Musik

- Bermain Games

Maka untuk menampilkan lists hobi tersebut pada sebuah sebuah halaman website ada 2

pendekatan yang bisa. Dibawah ini akan disampaikan 2 buah teknik yang bisa kita lakukan dan

akan dijelaskan teknik mana yang direkomendasikan dalam mengkontruksi lists

1. Menggunakan tag line break atau

2. Menggunakan tag Unordered List dan List Item atau

D. Langkah Langkah Praktikum dalam menggunakan tag

1. Konstruksi Dokumen HTML 5 seperti di bawah ini

Section 2

Hobiku :

- Membaca

- Olahraga

- Mendengarkan Musik

- Bermain Games

2. Lihat Hasilnya melalui Web Browser

Terlihat bahwa lists hobi ditampilkan secara mendatar. Mungkin saja, tampilan seperti ini

bukanlah tampilan yang diinginkan. Misalkan diinginkan lists hobi dapat ditamplikan

dengan format per baris, maka diperlukan sebuah penyesuaian dengan menggunakan tag

line break atau

3. Tambahkan Tag Line Break disetiap baris hobi

Section 2

Hobiku :

- Membaca

- Olahraga

- Mendengarkan Musik

- Bermain Games

4. Lihat Hasilnya melalui Web Browser

5. Kesimpulan

Seperti yang dapat disaksikan bahwa teknik seperti yang telah dipraktekkan diatas

mengandung beberapa kelemahan karena diharuskan untuk menambahkan tag

disetiap baris list, dan hal ini bukanlah teknik yang direkomendasikan dalam

menkonstruksi Lists.

HTML5 telah menyediakan tag khusus yang dapat digunakan dalam mengkontruksi Lists,

yaitu menggunakan Unordered/Ordered List dan List Item

6. Extend

E. Langkah langkah praktikum dalam menggunakan tag Unordered/Ordered List dan List Item

1. Konstruksi Dokumen HTML5 seperti dibawah ini Menggunakan Tag

Section 2

Hobiku :

Membaca

Olahraga

Mendengarkan Music

Bermain Games

2. Tampilkan Hasilnya Melalui Web Browser

3. Ubahlah tag menjadi untuk mengetahu perbedaannnya

Section 2

Hobiku :

Membaca

Olahraga

Mendengarkan Music

Bermain Games

4. Tampilkan Hasilnya Melalui Web Browser

Terlihat bahwa tag menghasilkan sebuah tampilan list tanpa urutan penomoran

sedangkan tag memberikan tampilan urutan list dengan penomoran

5. Styling pada tag Unordered List

1) Merubah Jenis Bullet

ul {

list-style: square;

}

Keterangan : mengganti jenis bullet dengan tampilan kotak

ul {

list-style: none;

}

Keterangan : Menghilangkan Bullet

2) Mengghilangkan padding

ul {

list-style: none;

padding-left: 0px;

}

3) Mengganti Bullet dengan gambar

ul {

list-style: none;

padding-left: 0px;

}

ul li{

background: url('../images/checkSmall.png') no-repeat;

padding-left: 45px;

height: 37px;

padding-top: 10px;

}

4) Extend

6. Extend

F. Styling Pada Tag Ordered List

ol{

list-style-type: lower-roman;

}

Keterangan :

list-style-type , memiliki beberpa kombinasi seperti : lower-roman, lower-alpha, lower-latin,

upper-roman, upper-alpha, upper-latin, dll

G. Extend