Assalamu’alaikum Wr. Wb.
Saya Muhammad Ali Husein, selamat datang di tutorial HTML5, pada tutorial ini kita akan membahas mengenai struktur HTML.
Salah satu konsep paling penting dalam memehami perancangan isi web adalah struktur terkumpul/bersarang dari dokumen HTML. Seringkali elemen bersarang satu sama lain. Kita akan sering memulai dengan struktur HTML dulu kemudian memulai memberikan style menggunakan CSS.
Sebagai contoh, mari kita lihat elemen dasar berikut:
<html>
<body>
</body>
</html>
Pada contoh di atas, elemen <body> dikumpulkan dalam elemen <html>. Dengan kata lain, <body> ditempatkan antara tag pembuka <html> dan tag penutup </html>. Jadi, tag yang bersarang atau terkumpul adalah semua yang ditempatkan antara tag pembuka dan penutup. Dua elemen ini, <body> dan <html>, membentuk struktur seluruh halaman web, ketika sebuah browser membuka dokumen HTML, browser membaca struktur tersebut.
Isi di dalam tag body terlihat pada halaman seperti terlihat pada browser web.
<html>
<body>
Nobody knows who invented smoothies, but the world wouldn't be
the same without them!
</body>
</html>
Pada dokumen HTML, beberapa isi ditampilkan kepada viewer di browsernya masing-masing, namun ada juga kode pada halaman yang tersembunyi dari viewer, namun berguna untuk browser, search engine, atau developer site. Contoh kode tersembunyi ini termasuk skrip yang menambah interaktivitas, kode untuk membantu search engine mengkategori dokumen, dan style yang mendefinisikan penampakan halaman. Kode ini seringkali ditemukan dalam elemen <head>, dan elemen <head> bersarang di dalam tag <html>.
<html>
<head>
</head>
<body>
Nobody knows who invented smoothies, but the world wouldn't be
the same without them!
</body>
</html>
Pada contoh di atas, belum ada isi dalam elemen <head>. Perhatikan bahwa elemen <head> disarangkan pada <html>, namun tidak bersarang dalam <body>. Elemen <head> membuka dan menutup sebelum elemen <body>.
Elemen <body> berisi teks, namun masih terdapat kekurangan, sehingga anda maupun mesin pencari tidak dapat menentukan mana heading, list, quotation, atau jenis isi lainnya. Untuk menetapkan teks sebagai paragraf, maka digunakan tag <p>:
<html>
<head>
</head>
<body>
<p>Nobody knows who invented smoothies, but the world wouldn't be
the same without them!</p>
</body>
</html>
Sekarang elemen paragraf disarangkan di <body>. Sekian tutorial mengenai Struktur HTML, kita ketemu lagi pada tutorial selanjutnya mengenai menempatkan image (gambar) pada HTML.
Wassalamu’alaikum Wr. Wb.
0 comments:
Posting Komentar