cloud-hosting-terbaik-indonesia

Belajar HTML Dasar Part 6: Cara Membuat Struktur Dasar HTML

Posted on

Di panduan belajar HTML basic sebelumnya kita telah mempelajari Pengertian Tag, Elemen, dan Atribut pada HTML. Pada panduan kali ini saya akan membahas mengenai cara membuat struktur dasar halaman HTML.


Struktur Basic HTML

Setiap halaman HTML setidaknya mempunyai struktur basic yang terdiri dari : Tag DTD atau DOCTYPE, tag html, tag head, dan tag body. Inilah yang adalah sebuah struktur sangat basic dari HTML, walaupun HTML tak hanya berisi struktur tersebut.

Agar lebih gampang memahaminya, silahkan buka text editor (Notepad++), lalu ketikkan kode berikut ini:

Contoh struktur basic HTML:

Save selaku halaman.html dan jalankan file dengan cara double klik file tersebut, atau klik kanan –> Open With –> Firefox. Kita akan membahas tag-tag yang ditulis tersebut di panduan kali ini.


Pengertian DTD atau DOCTYPE

Tag sangat awal dari contoh HTML diatas yaitu DTD atau DOCTYPE. DTD yaitu singkatan dari Document Type Declaration. Yang berfungsi bagi memberi tahu kepada web browser bahwa dokumen yang akan diproses yaitu HTML.

DTD mempunyai banyak versi tergantung kepada versi HTML yang digunakan. Di contoh diatas, saya menggunakan DTD versi HTML 5. Sebelum HTML 5, DTD terdiri dari text panjang yang hampir mustahil dihafal. Contohnya, DTD bagi xHTML 1.0 yaitu:

Bila kita tak menuliskan DTD, browser akan tetap menampilkan dan memproses halaman web kita seperti tak terjadi apa-apa. Namun browser hakekatnya menjalankan halaman HTML tersebut di mode khusus yang disebut quirk mode.

Di quirk mode, web browser menerjemahkan halaman web (terutama kode CSS) sedikit berbeda dari seharusnya. Ini karena web browser menganggap bahwa ketika DTD tak ditemuka, halaman tersebut kemungkinan besar adalah sebuah halaman web usang. Agar halaman ‘usang’ ini tetap tampil bagus, web browser perlu menggunakan aturan-aturan yang berbeda, yakni: quirk mode.

Cara bagi mengetahui apakah web browser berjalan di quirk mode atau standard mode lebih gampang bila menggunakan web browser Mozilla Firefox. Di Firefox, klik kanan di halaman web, lalu pilih Page Informasi. Di bagian Render Mode akan terlihat apakah quirk mode, atau standard mode.

Penjelasan lebih jauh mengenai doctype atau DTD akan kita bahas pada panduan HTML5: Pengertian dan cara penulisan doctype pada HTML5.


Tag <html>

Setelah DTD, tag berikutnya yaitu tag <html>.

Ini yaitu tag pembuka dari keseluruhan halaman web. Segala kode HTML mesti berada di pada tag ini. Tag html dimulai dengan <html> dan diakhiri dengan </html>


Tag <head>

Unsur di tag <head> umumnya akan berisi berjenis-jenis definisi halaman, seperti kode CSS, JavaScript, dan kode-kode lainnya yang tak tampil di browser.

Tag <title> pada contoh kita sebelumnya digunakan bagi menampilkan title dari sebuah halaman web. Title ini biasanya ditampilkan di bagian sangat atas web browser. Contohnya di tampilan halaman.html, ‘Title dari Websiteku’ akan ditampilkan di tab browser.


Tag <body>

Tag <body> akan berisi seluruh faktor yang akan tampil pada halaman web, seperti paragraf, tabel, link, gambar, dll. Tag body ini ditutup dengan </body>. Beberapa besar waktu kita pada menyusun web akan dihabiskan di pada tag <body> ini.

Perhatikan bahwa setiap tag akan diakhiri dengan penutup tag. Termasuk <html> yang adalah sebuah tag sangat awal dari sebuah halaman web.


Stuktur HTML yang kita bahas disini yaitu struktur yang betul-betul sederhana. Sebuah halaman web dapat mempunyai ratusan bahkan ribuan baris, yang ditulis dengan berjenis-jenis tag HTML. Tag pertama-tama yang akan kita bahas pada t
utorial berikutnya yaitu tag <p> yang digunakan bagi membuat paragraf di dalam HTML.


eBook HTML Uncover Duniailkom

Kamu serius ingin menguasai HTML? Duniailkom telah menyusun eBook HTML Uncover. eBook ini membahas HTML dengan lebih detail dan lebih komplit hingga fitur terbaru HTML5. Penjelasan lebih lanjut dapat ke: eBook HTML Uncover Duniailkom.


Sumber https://www.duniailkom.com/