Home » Kuliah IT » Pemrograman » Inilah Struktur HTML Dasar dan Penjelasannya

Inilah Struktur HTML Dasar dan Penjelasannya

by Elang Hendy Subrata
by Elang Hendy Subrata

Dasar-dasar HTML umumnya selalu ada di dalam file HTML ketika akan membuat sebuah website. Tanpa menggunakan HTML, maka tidak akan tercipta sebauh website yang diinginkan. Jika kita analogikan dengan manusia, maka HTML adalah badannya website.

Dalam pembuatan sebuah website, perlu adanya sebuah struktur dasar HTML. Struktur inilah yang nantinya menjadi fondasi dasar terbentuknya sebuah website. Untuk mengetahui seperti apa struktur HTML dasar, berikut ulasannya.

Penulisan struktur HTML

Untuk menulis beberapa kode maupun penulisan struktur HTML, Anda harus menggunakan aplikasi khusus. Salah satu aplikasi yang dapat digunakan adalah Niotepad++. Aplikasi ini bisa Anda unduh di situs resminya atau Anda bisa mencarinya di Google. Setelah berhasil mengunduh dan menginstal aplikasi notepad, berikutnya Anda buka aplikasi notepad lalu tulis struktur HTML seperti di bawah ini.

<!DOCTYPE html>
 <html>
             <head> 
                         <title> Cara Buat Struktur HTML</title>
             </head>
             <body>
                         Silakan belajar Struktur sebuah HTML
             </body>
 </html> 

Setelah Anda menulis struktur HTML tersebut, maka langkah berikutnya Anda simpan file tersebut dengan cara klik icon Save (seperti gambar disket) pada toolbar. Kemudian, pada bagian “Save as Type”. Pilihlah jenis “Hyper Text Markup Language(*.html)”. Lalu, berilah nama sesuai dengan keinginan.

Masih pada Notepad++, langkah selanjutnya adalah coba lihat di browser mengenai struktur HTML yang telah Anda buat sebelumnya. caranya sendiri pada bagian toolbar, klik “Run” lalu pilih “Launch in (nama Browser)”. Maksud dari proses ini adalah Anda dapat melihat struktur yang Anda buat melalui web browser terbaik yang Anda gunakan. Jika Anda menggunakan Google Chrome, maka yang akan keluar adalah “Launch in Chrome”. Begitu juga jika Anda membukannya di Firefox, maka kalimat yang keluar adalah “launch in Firefox”. Jika berhasil, maka akan keluar tampilan HTML yang sederhana.

Penjelasan Struktur HTML

  • <!DOCTYPE>

Pada bagian pertama, kita menulis DOCTYPE lebih dulu. Pada dasarnya, Doctype atau biasa disingkat menjadi DTD merupakan sebuah singkatan dari Document Type Declaration. Fungsi dari penulisan DTD ini adalah untuk memberikan informasi pada bagian web browser mengenai jenis dokumen yang nantinya akan diproses pada bagian HTML.

DTD sendiri memiliki banyak versi dan itu sangat tergantung dengan HTML yang digunakan. Misalkan saja kita tidak menulis DTD ini pada awal HTML, maka hal yang terjadi adalah browser tetap menampilkan hasil web yang kita buat. Akan tetapi, sebenarnya browser hanya menampilkan halaman yang kita buat dengan mode Quirk Mode.

Meskipun terlihat biasa saja jika kita melihatnya secara sekilas, akan tetapi jika melihatnya dari sisi web browser, halaman tersebut dianggap halaman yang tidak layak. Hal ini akan sangat berpengaruh pada saat website kita telah dipublikasikan pada khalayak umum.

  • <html>

Bagian berikutnya adalah bagian HTML ini. tag pembuka ini harus menggunakan kode HTML seperti yang sudah dibuat sebelumnya. hal tersebut disebabkan tag HTML merupakan wadah yang nantinya akan diisi oleh berbagai macam isi yang kita sebut dengan CSS. Pada bagian ujungnya, kita bisa melihat penulisan </html>. Hal tersebut dimaksudkan sebagai penutup HTML dan wajib ditulis.

Apabila Anda sampai lupa menulis tag penutup ini, maka web browser akan menganggap Anda belum menyelesaikan fondasi HTML yang telah dibuat. Dengan menuliskan kode tersebut, maka bisa dikatakan semua isi di dalam HTML sudah terkunci dengan baik. Pada bagian inilah kita baru memasukan berbagai macam isi yang sesuai dengan keinginan kita.

  • <head>

Pada bagain tag <head>, kita dapat menuliskan judul dan berbagai macam kode-kode yang tidak tampil pada browser. Kode-kode yang dapat ditulis pada bagian <head> ini adalah CSS dan juga JavaScript. Hal tersebut membuat kita dapat melakukan kreasi pada bagian head ini.

  • <title>

Sesuai dengan namanya, title atau jika diterjemahkan adalah judul merupakan sebuah kode yang berisi tentang informasi yang terdapat pada website tersebut. Biasanya kita dapat menggunakan kode ini sebagai judul website atau penjelasan singkat mengenai website yang kita buat. Oleh sebab itu, pada bagian “title”, kita bebas mengisinya dengan nama yang relevan dengan website yang dibuat.

  • <body>

Struktur HTML yang terakhir adalah “Body”. Pada bagian ini, kita dapat memasukan beberapa unsur elemen yang nantinya akan muncul pada tampilan website. Kita dapat mengisinya dengan gambar, tautan, tulisan, dan berbagai macam isi website lainnya. Sama halnya dengan bagian HTML, kita harus menutupnya dengan penulisan </body> untuk mengunci isi yang terdapat di dalam body website.

Itulah struktur HTML dasar dan pengertiannya yang bisa membuat Ada sedikit memahami mengenai HTML. Jika Anda ingin lebih memahaminya lagi, Anda bisa pelajari tag pada HTML, fungsi a pada HTML,  perintah dasar HTML, dan berbagai macam informasi HTML lainnya di berbagai sumber. Semoga artikel ini dapat memberikan manfaat untuk pembaca semua.

You may also like