Saturday, February 16, 2019

Struktur Dasar HTML

 

Belajar Struktur Dasar HTML.

Setelah kita belajar mengenal Tag, Elemen, dan Atribut pada HTML, materi belajar berikutnya adalah mempelajari Struktur Dasar HTML.

Struktur Dasar HTML

Saat ini sebuah dokumen HTML terdiri dari tag DTD(Document Type Declaration) atau lebih dikenal dengan tag DOCTYPE, tag head, tag body, dan tentunya tag html. Mungkin ada pertanyaan "bagaimana dengan tag-tag lainnya seperti tag <p> atau pun tag <a>". Jika timbul pertanyaan seperti diatas, jawabannya itu karena diatas hanyalah contoh paling sederhana dari struktur HTML. 

Masih banyak tag-tag yang terdapat dari satu dokumen HTML pada suatu website, untuk mengetahuinya, silahkan gunakan kombinasi Ctrl + U untuk mengetahui rupa dari struktur HTML sebenarnya.

Untuk lebih memudahkan memahami struktur dasar ini, buka notepad kalian dan ketikkan kode dibawah.
[code hl="1, 4, 7"] <html> <head> <title>Title dari Websiteku</title> </head> <body> <p>Selamat Pagi Dunia, Hello World!</p> </body> </html> [/code]
Setelah selesai, save kode diatas sebagai halaman.html lalu jalankan file tersebut dengan klik 2 kali, atau dengan klik kanan lalu Open With -> Chrome



Setelah mengerti tentang mengerti struktur dasar HTML, yang selanjutnya kita akan membahas satu persatu-satu dari tag yang kita gunakan diatas.


Pengertian DTD atau DOCTYPE

Yang pertama kita bahas kali ini adalah tag DTD atau yang lebih dikenal dengan DOCTYPE. DTD adalah akronim dari kata Document Type Declaration. Yan mana berfungsi untuk memberitahukan kepada web browser bahwa yang kita gunakan ini adalah dokumen HTML.

Penggunaan tag <!DOCTYPE> dikenal setalah HTML5 ada, jadi sebelumnya penggunaan tag <!DOCTYPE> DTD menggunakan sebuah deklarasi yang sangat panjang, bahkan termasuk susah untuk dihafalkan. Contohnya seperti DTD pada xHTML 1.0, pada versi ini DTD yang digunakan sangatlah panjang, bahkan sangat susah untuk dihafal. Berikut ini adalah kodenya,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Sebuah file HTML itu tetap dapat berjalan dengan normal walaupun tanpa dengan DTD. Namun sebenarnya web browser anda menjalankan file HTML tersebut dengan mode quick, sayangnya untuk mengetahui ini kita harus menggunakan Mozilla. Jika sudah menggunakan Mozilla, silahkan buka file HTML anda yang menggunakan DTD dan tidak menggunakan DTD, lalu klik kanan pada halaman web yang tampil tersebut lalu Lihat Informasi Halaman, selanjutnya akan muncul jendela pop up baru yang berisikan informasi tentang halaman yang dimuat.




Saat halaman yang dimuat mengandung DTD, render yang akan dijalankan dalam Mode pemenuhan standar, namun jika halaman yang diload tidak mengandung DTD, web browser akan merender halaman tersebut dengan Mode quirk. 

Tag <html>

Struktur dasar HTML selanjutnya adalah tag HTML. Tag ini berfungsi sebagai wadah dari semua kode/tag pada halaman website. Dalam penulisannya tag HTML dimulai dengan <html> dan diakhiri </html>.

Tag <head>

Tag selanjutnya adalah <head>, tag head ini biasanya berfungsi untuk menempatkan kode CSS atau Javascript yang digunakan untuk memanipulasi halaman suatu website. Selain itu, tag head juga berisi dengan informasi yang diperlukan seperti title dan lain-lain. 

Tag title berfungsi untuk menentukan title dari website kita, contohnya seperti yang ada pada kode HTML diatas.

sama halnya dengan yang lainnya, tang title dan tag head memiliki tag penutup.

Tag <body>

Dan yang terakhir adalah tag <body>, fungsinya adalah untuk wadah dari segala tag yang ingin ditampilkan pada halaman website seperti form, paragraf, gambar dan masih banyak lainnya. tag ini diakhiri dengan </body>.Dalam membuat website, kita akan lebih banyak menghabiskan waktu diantara tag body ini.

Yang perlu perhatian adalah saat kita menggunakan tag <html>, jangan melupakan tag penutup (</html>). Ini sering dilupakan karena letak tag-nya yang berjauhan satu sama lain.
Contoh diatas adalah struktur HTML yang paling sederhana, pada halaman website yang sesungguhnnya bisa terdiri dari ratusan baris bahkan ribuan. Jadi pemahaman ini hanya untuk pondasi dari pembelajaran HTML. Selanjutnya yang akan kita pelajari adalah tag-tag HTML, untuk yang pertama kita akan membahas tag <p>.

No comments:
Write comments