Kemarin, saya menjelaskan sedikit tentang HTML CSS mengenai cara penempatan atau penerapannya dalam elemen HTML. Sekarang saya akan menjelaskan sedikit tentang beberapa elemen HTML yaitu Block dan List.
HTML Block dan Inline
Setiap elemen pasti memiliki elemen yang nilai tampilannya berbeda tergantung pada jenis elemen itu sendiri. Maka blok ini sebagai wadah untuk mengatur berbagai nilai tampilan default sesuai dengan jenis elemen itu.
Sebuah elemen blok-tingkat, selalu dimulai dari baris baru dan selalu mengambil lebar penuh .
Contoh elemen blok-tingkat :
- <Div>
- <h1> - <h6>
- <P>
- <Form>
<!DOCTYPE html>
<html>
<body>
<div style="background-color:black;color:white;padding:20px;">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
</div>
</body>
</html>
jadi, <div> menunjukan gaya dari content yang dicangkup olehnya. <div>mencangkup luasan untuk background, jadi <div> akan mengatur tampilan dan style dari luasan yang diampunya tersebut.
Elemen inline tidak dimulai pada baris baru dan hanya membutuhkan sebanyak lebar yang diperlukan.
Contoh elemen inline:
- <Span>
- <a>
- <Img>
<span>
Hampir sama dengan <div> namun <span> menampung text. <span> hanya memerlukan bentang yang lebih sedikit, karena sesuai dengan kebutuhan saja.
<html>
<body>
<h1>My <span style="color:red">Important</span> Heading</h1>
</body>
</html>
Dalam pembuatan sebuah dokumen, list (daftar) merupakan sebuah hal yang tidak dapat dihindari. Daftar mengenai berbagai hal selalu dapat ditemukan dalam penulisan dokumen.
Terdapat tiga daftar utama yang dapat dibuat dengan HTML, yaitu:
- Unordered List (Daftar Tidak Terurut), seperti namanya, memungkinkan kita untuk membuat daftar dari hal-hal yang tidak memiliki urutan tertentu.
- Ordered List (Daftar Terurut), kembali lagi, sesuai namanya, memberikan kita fasilitas untuk membuat daftar hal-hal yang harus diurutkan dengan benar.
- Definition List (Daftar Definisi), digunakan untuk membuat daftar definisi dari istilah-istilah yang ada dalam dokumen, digunakan terutama untuk glosarium dan indeks.
1. Unodered List (Daftar Tidak Terurut)
kita bisa membuat daftar yang tidak memiliki urutan tertentu. Artinya urutan suatu list tidak harus bergantung pada urutan abjad atau angka atau yang lainnya.
Example:
<!DOCTYPE html>
<html>
<body>
<h2>An unordered HTML list</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
Membuat daftar dengan urutan yang sesuai bergantung pada abjad, angka atau yang lainnya.
Example:
<!DOCTYPE html>
<html>
<body>
<h2>An ordered HTML list</h2>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
3. Definition List
Fasilitas ini mendukung mendeskripsi dari setiap istilah dari daftar. <dl> tag mendefinisikan daftar deskripsi, yang <dt> mendefinisikan istilah (nama), dan <dd> tag menjelaskan setiap istilah.
<!DOCTYPE html>
<html>
<body>
<h2>A Description List</h2>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
</body>
</html>
Referensi :
http://www.w3schools.com/html/html_lists.asp
https://bertzzie.com/knowledge/desain-web-dasar/List.html
0 komentar:
Posting Komentar