Belajar HTML chapter 4 (List, Blok, Layout)

Assalamualaikum wr.wb
kali ini saya akan menjelaskan beberapa Kode html untuk membuat list, blok, dan layout.
HTML-List
Tag HTML List
TagDeskripsi
<ol>Mendefinisikan ordered list
<ul>Mendefinisikan daftar unordered
<li>Mendefinisikan item daftar
<dl>Mendefinisikan sebuah daftar definisi
<dt>Mendefinisikan item dalam daftar definisi
<dd>Mendefinisikan deskripsi dari item dalam daftar definisi
Contoh unordered list :
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
browser akan menampilkannya :
  • Coffee
  • Milk
Contoh ordered list :
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
Browser akan menampilkannya:
  1. Coffee
  2. Milk
Contoh definition list :
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
Tampilan pada browser :
Coffee
– black hot drink
Milk
– white cold drink

TAG HTML LIST

TAGDESKRIPSI
<ol>untuk ordered list
<ul>untuk unordered list
<li>untuk item list
<dl>untuk definition list
<dt>untuk item dari definition list
<dd>untuk sebuah item dalam definion list
HTML BLOCK
html <div> dan <span>
Elemen html dapan dikelompokkan bersama menggunakan <div> dan <span>, kebanyakan elemen html didefinisikan sebagai elemen block level dan elemen inline.Elemen block level umumnya diawali dan diakhiri dengan adanya baris baru, Contohnya :<p>,<h1>,<table>,<ul>.
Sedangkan elemen inline tidak ada garis baru, contohnya : <b>,<td>,<a>,<img>.
Elemen html <div>
<div> termasuk elemen block level yang digunakan untuk menampung kumpulan elemen lain.elemen ini digunakan untuk membuat layout yang menggantikan <table> sebagai cara lama untuk membuat layout, sekarang <table> tidak digunakan lagi untuk membuat layout dan hanya digunakan untuk menampilkan tabular data saja.
Elemen html <span>
elemen <span> merupakan sebuah elemen inline yang digunakan sebagai penampung untuk teks.
HTML LAYOUT
html layout – menggunakan elemen <div>
hasilnya adalah :

html layout – dengan menggunakan <table>
membuat layout dengan menggunakan<table> sudah tidak dibenarkan karena <table> sekarang hanya ditujukan untuk menampilkan sebuah tabular data.
contoh:
hasilnya adalah :
TAG HTML LAYOUT
TAG
DESKRIPSI
<table>
mendeskripsikan sebuah tabel
<div>
mendeskripsikan bagian dalam dokumen
sekian untuk materi kali ini, semoga bermanfaat !!!
Wassalamualaikum wr wb
Sumber :w3schools.com

Komentar

Postingan populer dari blog ini

Penilaian (Definisi, Prinsip dan Tujuan)

Penilaian Portofolio (Definisi, Karakteristik, Kelebihan dan Kekurangan)