SMKN RPL Kelas/Lembaran : X/Labsheet 1
Jurusan : Rekayasa Perangkat Lunak Mata Pelajaran : Pemrograman WEB
Waktu : 2 x 45 Menit Topik : Format Teks Halaman Web
Kode : 2017.RPL2 Pembimbing : Rizki Hardian Sakti, [Link]
A. TUJUAN PRAKTIKUM
1. Setelah kegiatan praktikum ini, siswa dapat membuat list minimal format text pada
halaman web.
2. Setelah kegiatan praktikum ini, siswa dapat membuat list kombinasi format text pada
halaman web.
B. ALAT DAN BAHAN
1. Personal Komputer / Laptop
2. Aplikasi Browser
3. Aplikasi Web editor (notepad++)
C. TEORI SINGKAT
1. Pembuatan List Minimal
Ada 3 jenis list dalam dokumen html yaitu:
a. Daftar Berurutan (Ordered List)
Daftar yang berurutan biasanya ditandai dengan penggunaan penomoran
tertentu. Penomoran ini bias menggunakan angka (1, 2, 3,…) maupun karakter
alphabet tertentu (a, b, c,… atau i, ii, iii,…). Daftar yang berurutan umumnya
dipakai untuk item-item yang saling berhubungan satu sama lain, atau untuk
menuliskan langkah-langkah atau prosedur dari kegiatan tertentu yang tidak
dapat dilakukan secara acak.
1
SMKN RPL Tingkat/Kelas : X RPL
Jurusan : Rekayasa Perangkat Lunak Mata Pelajaran : Pemrograman WEB
Waktu : 2 x 45 Menit Topik : Format Teks Halaman Web
Kode : 2017.RPL2 Pembimbing : Rizki Hardian Sakti, [Link]
Contoh daftar yang berurutan adalah pada cara membuat dokumen
HTML,misalnya:
Untuk membuat suatu daftar yang berurutan dalam dokumen HTML,
digunakan tag <ol> (ordered list), yang berpasangan dengan tag </ol>. Tag
<ol> digunakan untuk memulai suatu daftar berurutan tertentu,
sedangkan </ol> berfungsi untuk menandakan bahwa daftar tersebut sudah
berakhir.
Masing-masing item di dalam daftar harus dibuat menggunakan tag <li> (list
item, yang kemudian perlu ditutup dengan tag </li>.
Contoh penulisan adalah sebagai berikut :
2
SMKN RPL Tingkat/Kelas : X RPL
Jurusan : Rekayasa Perangkat Lunak Mata Pelajaran : Pemrograman WEB
Waktu : 2 x 45 Menit Topik : Format Teks Halaman Web
Kode : 2017.RPL2 Pembimbing : Rizki Hardian Sakti, [Link]
Adapun atribut untuk tag <ol> adalah “type” yang menunjukan jenis
penomorannnya. Secara standart, tipenya adalah menggunakan
penomoran 1, 2,3, 4 dst.
Selain tipe default, tipe lain yang dapat digunakan untuk keperluan penomoran
dalam suatu list adalah:
b. Daftar Tidak Berurutan (Unordered List)
Daftar yang tidak berurutan adalah daftar yang item-itemnya dapat diubah
posisinya secara acak. Daftar seperti ni tidak menggunakan penomoran seperti
di atas, melainkan hanya dengan menggunakan tanda atau symbol tertentu,
misalnya gambar kotak atau bulat (bullet).
3
Contoh:
SMKN RPL Tingkat/Kelas : X RPL
Jurusan : Rekayasa Perangkat Lunak Mata Pelajaran : Pemrograman WEB
Waktu : 2 x 45 Menit Topik : Format Teks Halaman Web
Kode : 2017.RPL2 Pembimbing : Rizki Hardian Sakti, [Link]
Pada contoh di atas, kita dapat mengubah/mengacak secara bebas urutan dari
masing-masing item yang ada. Hal ini disebabkan karena setiap item yang ada
tidak memiliki keterkaitan satu sama lain dengan item lainnya, berbeda
dengan suatu urutan langkah tertentu yang harus ditulis secara berurutan.
Untuk membuat suatu daftar yang tidak berurutan dalam dokumen HTML,
digunakan tag <ul> (unordered list), yang berpasangan dengan tag </ul>. Tag
<ul> digunakan untuk memulai suatu daftar berurutan tertentu, sedangkan
</ul> berfungsi untuk menandakan bahwa daftar tersebut sudah berakhir.
Masing-masing item di dalam daftar harus dibuat menggunakan tag <li> (list
item, yang kemudian perlu ditutup dengan tag </li>.
Contoh penulisan adalah sebagai berikut :
4
Adapun atribut untuk tag <ul> adalah “type” yang menunjukan jenis tanda
untuk setiap item berupa tanda bulatan untuk defaultnya.
SMKN RPL Tingkat/Kelas : X RPL
Jurusan : Rekayasa Perangkat Lunak Mata Pelajaran : Pemrograman WEB
Waktu : 2 x 45 Menit Topik : Format Teks Halaman Web
Kode : 2017.RPL2 Pembimbing : Rizki Hardian Sakti, [Link]
Selain tipe default, tipe lain yang dapat digunakan untuk keperluan unordered
list adalah :
c. List tanpa bullet <dl>
Untuk membuat list tanpa mengunakan bullet / symbol caranya sama persis
dengan pembuatan list dengan tag ol / ul, hanya saja tag <ul> diganti dengan
<dl> lalu tag <li> diganti dengan <dd>.
2. Pembuatan List Kombinasi
Perhatikan daftar berikut ini :
5
SMKN RPL Tingkat/Kelas : X RPL
Jurusan : Rekayasa Perangkat Lunak Mata Pelajaran : Pemrograman WEB
Waktu : 2 x 45 Menit Topik : Format Teks Halaman Web
Kode : 2017.RPL2 Pembimbing : Rizki Hardian Sakti, [Link]
Dapat dilihat bahwa daftar di atas adalah gabungan daftar berurutan dan daftar tidak
berurutan.
Untuk membuat daftar diatas pada dokumen HTML maka cukup menggabungkan
<ol> dangan <ul>.
Perhatikan penggabungan <ol> dengan <ul> berikut ini :
6
Ketika kita menggabungkan tag tidak berurutan <ul> tipe bullet dengan tag tidak
berurutan <ul> pada daftar berikutnya, maka daftar yang kedua oleh browser akan
ditampilkan secara otomatis menjadi daftar bullet. Tidak demikian dengan daftar
berurutan <ol>, maka agar tipenya sama dengan daftar berurutan sebelumnya, kita
harus memberikan atribut tipe yang sama dengan daftar berurutan sebelumnya.
SMKN RPL Tingkat/Kelas : X RPL
Jurusan : Rekayasa Perangkat Lunak Mata Pelajaran : Pemrograman WEB
Waktu : 2 x 45 Menit Topik : Format Teks Halaman Web
Kode : 2017.RPL2 Pembimbing : Rizki Hardian Sakti, [Link]
Contoh :
7
Memulai dengan nomor tertentu
Untuk membuat daftar bernomor dengan urutan yang tidak dimulai dengan 1
(nomor/huruf awal), maka kita harus mendefinisikan dengan atribut “start” pada
elemen tag <ol>.
SMKN RPL Tingkat/Kelas : X RPL
Jurusan : Rekayasa Perangkat Lunak Mata Pelajaran : Pemrograman WEB
Waktu : 2 x 45 Menit Topik : Format Teks Halaman Web
Kode : 2017.RPL2 Pembimbing : Rizki Hardian Sakti, [Link]
Misalnya contoh berikut :
8
Maka urutan daftar yang ditampilkan akan dimulai dengan 17, selanjutnya 18 dan 19.
Demikian juga apabila :
Maka urutan daftar yang ditampilkan akan dimulai dengan Q, selanjutnya R, dan S.
Penggunaan daftar bernomor yang tidak dimulai dengan nomor awal, biasanya
diperlukan apabila daftar yang kita buat sudah diselingi beberapa paragraph, sehingga
ketika dibuat daftar bernomor, secara default akan dimulai dari awal, padahal
harusnya melanjutkan nomor sebelumnya. Maka digunakanlah atribut “start=” tersebut.
SMKN RPL Tingkat/Kelas : X RPL
Jurusan : Rekayasa Perangkat Lunak Mata Pelajaran : Pemrograman WEB
Waktu : 2 x 45 Menit Topik : Format Teks Halaman Web
Kode : 2017.RPL2 Pembimbing : Rizki Hardian Sakti, [Link]
D. LANGKAH KERJA
9
1. Buatlah folder di Drive D:, dengan identitas folder (nama anda_no absen). Misal :
Rizki_09
2. Buatlah subfolder dengan nama “praktikum_1” di dalam folder yang sudah dibuat
sebelumnya.
3. Jalankan aplikasi text editor dengan cara Klik 2x icon aplikasi notepad ++ di Dekstop
komputer anda
SMKN RPL Tingkat/Kelas : X RPL
Jurusan : Rekayasa Perangkat Lunak Mata Pelajaran : Pemrograman WEB
Waktu : 2 x 45 Menit Topik : Format Teks Halaman Web
Kode : 2017.RPL2 Pembimbing : Rizki Hardian Sakti, [Link]
10
4. Isikan kode HTML (Ordered List “<ol>”) ke dalam Text Editor seperti dibawah
ini.
5. Simpan file dengan [Link]
SMKN RPL Tingkat/Kelas : X RPL
Jurusan : Rekayasa Perangkat Lunak Mata Pelajaran : Pemrograman WEB
Waktu : 2 x 45 Menit Topik : Format Teks Halaman Web
Kode : 2017.RPL2 Pembimbing : Rizki Hardian Sakti, [Link]
11
6. Jalankan file HTML menggunakan aplikasi Web browser untuk menampilkan
hasilnya seperti dibawah ini
7. Amati dan simpulkan hasil langkah kerja 6
8. Ulangi langkah kerja 4 – 7 untuk Unordered List <ul> dengan listing program sebagai
berikut.
SMKN RPL Tingkat/Kelas : X RPL
Jurusan : Rekayasa Perangkat Lunak Mata Pelajaran : Pemrograman WEB
Waktu : 2 x 45 Menit Topik : Format Teks Halaman Web
Kode : 2017.RPL2 Pembimbing : Rizki Hardian Sakti, [Link]
12
9. Ulangi langkah kerja 4 – 7 untuk List tanpa bullet <dl> dengan listing program
sebagai berikut.
SMKN RPL Tingkat/Kelas : X RPL
Jurusan : Rekayasa Perangkat Lunak Mata Pelajaran : Pemrograman WEB
13
Waktu : 2 x 45 Menit Topik : Format Teks Halaman Web
Kode : 2017.RPL2 Pembimbing : Rizki Hardian Sakti, [Link]
10. Ulangi langkah kerja 4 – 7 untuk List Kombinasi dengan listing program sebagai
berikut.
E. KESIMPULAN
1. List adalah bagian teks di dalam dokumen yang berisi daftar item dari suatu kelompok
atau grup tertentu.
2. Ada 3 jenis list minimal dalam dokumen html seperti : Ordered List, Unordered List,
dan List tanpa Bullet
3. List kombinasi adalah kombinasi daftar berurutan dengan tidak berurutan sekaligus.
Untuk membuat daftar/list kombinasi yaitu menggabungkan atau mengkombinasikan
14
tag <ol> dengan <ul>. Daftar berurutan tidak selalu diawali dengan nomor satu, tetapi
dapat diawali dengan nomor tertentu, yaitu dengan memberi atribut start=” ”
15