Assalamu'alaikum wr.wb.
Pada kesempatan kali ini kita akan belajar tentang bagian-bagian dari html yang lebih baru yaitu list, blok and line element serta class. Langsung masuk ke materi pembahasan saja ya teman-teman.
A. Pembahasan materi
- List
- HTML Blok and Inline element
- HTML Class
B. Alat dan Bahan
- Software Sublime Text
- Laptop OS linux
- Browser
C. Tahap Pelaksanaan
1. LIST
Merupakan sebuah daftar baik menggunakan angka, simbol ataupun huruf.
Macam-macam List beserta penjelasan dan bentuk dasar.
a. Urordered
Biasa menggunakan sintaks <ul></ul> dan <li></li> yang berada ditengah yang menunjukkan dimulainya daftar.
<ul>
<li>statement</li>
</ul>
* Jenis-jenis type dalam Urordered :
- disc : daftar penanda untuk peluru (default).
- circle : mengatur item daftar penanda ke lingkaran.
- square : mengatur item daftar penanda untuk persegi.
- none : tidak akan ditandai.
* Penerapan dalam Sublime Text :
- Buka Sublime Text
- Sintaks pembuatan type Disc seperti dibawah ini.
- Dari coding diatas akan menghasilkan seperti dibawah ini.
- Begitu pula dengan type yang lain, hanya mengganti dibagian styles.
- Sintaks type Square seperti dibawah ini.
- Dari coding diatas akan menghasilkan seperti dibawah ini.
b. Ordered
Biasa menggunakan sintaks <ol></ol> dan <li></li> yang berada di tengah.
<ol>
<li>statement</li>
</ol>
* Jenis-jenis type dalam Ordered :
- type="1" : daftar barang akan diberi nomor dengan angka (default).
- type="A" : daftar barang akan diberi nomor dengan huruf besar.
- type="a" : daftar barang akan diberi nomor dengan huruf kecil.
- type="I" : daftar barang akan diberi nomor dengan angka romawi huruf besar.
- type="i" : daftar barang akan diberi nomor dengan angka romawi huruf kecil.
* Penerapan dalam Sublime Text :
- Buka Sublime Text.
- Sintaks type="1" seperti dibawah ini.
- Hasil sintaks diatas akan menghasilkan seperti dibawah ini.
- Jika kita menggunakan atribut type di dalam <ol> akan menghasilkan seperti dibawah ini. Dibawah ini menggunaka type="A".
- Hasilnya akan seperti dibawah ini.
c. Deskripsi HTML
Daftar istilah dengan deskripsi setiap istilah. Biasanya menggunakan sintaks <dl></dl> yang menandakan dafar deskripsi, sintaks <dt></dt> dan <dd></dd> mendefinisikan istilah (nama).
<dl>
<dt>statement</dt>
<dd>statement</dd>
</dl>
* Penerapan sintaks deskripsi seperti dibawah ini.
- Masukkan coding dibawah ini ke sublime text
- Hasilnya akan seperti ini.
d. List Bersarang
merupakan list yang dapat bersarang (daftar dalam daftar).
* Penerapan coding list bersarang
- Masukkan coding dibawah ini ke sublime text.
- Dan hasilnya akan seperti dibawah ini.
e. List Horizontal
Digunakan untuk membuat menu. Dan biasanya menggunakan CSS untuk memperindah tampilan.
* Penerapan coding List horizontal
- Buka Sublime Text dan masukkan coding seperti dibawah ini.
- Akan menghasilkan seperti dibawah ini.
B. HTML Blok and Inline element
Element HTML memiliki nilai tampilan default tergantung jenis elementnya. Sedangkan Inline adalah salah satu tampilan nilai default untuk banyak unsur.
- Elemen blok-tingkat : dimulai pada baris baru dan mengambil lebar penuh yang tersedia.
- Contoh elemen blok bertingkat :
* <div>
* <H1>-<H6>
* <P>
* <form>
- Contoh elemen blok bertingkat :
* <div>
* <H1>-<H6>
* <P>
* <form>
- Inline element : tidak dimulai pada baris baru dan hanya membutuhkan banyak lebar yang diperlukan.
-> Contoh elemen inline:
* <span>
* <a>
* <img>
- Penerapan coding dari <div> dan <span>
- Buka sublime text
- Masukkan coding dibawah ini untuk div.
- Hasil dari coding diatas seperti dibawah ini.
- Masukkan coding dibawah ini untuk span.
- Hasilnya coding yang dimasukkan akan seperti dibawah ini.
C. HTML Class
HTML Kelas atribut : memungkinkan untuk menentukan gaya yang sama untuk elemen dengan nama kelas yang sama.
- Penerapan coding dari class HTML div dan span
- Buka Sublime Text.
- Masukkan coding dibawah ini untuk class div.
- Hasilnya akan seperti dibawah ini.
- Masukkan coding dibawah ini untuk class span.
- Hasilnya akan seperti dibawah ini.
D. Kesimpulan
Dari sharing yang saya sampaikan diatas dapat disimpulkan bahwa banyak macam list yang dapat kita gunakan untuk membuat daftar dan membuat rapi tampilan yang akan kita buat dalam suatu program. Dan perbedaan antara span dan div dalam sebuah HTML. Div digunakan sebagai wadah untuk element HTML lain. Span digunakan sebagai wadah untuk beberapa teks.
E. Referensi
- http://www.w3schools.com/html/html_blocks.asp
- https://id.wikipedia.org/wiki/HTML
Sekian dan Terimakasih.
SMK Bisa!!
Wasalamu'alaikum wr.wb.
0 komentar:
Posting Komentar