Cara Membuat Struktur Dasar HTML

Di postingan sebelumnya kita sudah membahas tag, elemen, dan atribut pada HTML. Kali ini kita akan bahas struktur dasar HTML. Simak pembahasan AneIqbal selengkapnya berikut ini.

Contoh Struktur Dasar HTML

Setiap 1 file HTML terdiri dari tag DTD, tag <html>, tag <head>, dan tag <body>. Ini yang menjadi struktur paling dasar dari sebuah file HTML.

Seperti ini kode struktur dasarnya:

<!DOCTYPE html>
<html>
  <head>
     <title>Struktur dasar file HTML</title>
  </head>
  <body>
    <p>Halo.. ini struktur paling dasar file HTML..</p>
  </body>
</html>

Di web browser akan menampilkan:

struktur html
Tampilan dari coding struktur dasar HTML

Kita bedah tagnya satu persatu dari struktur kode di atas.

Tag DTD

langkah-langkah membuat struktur dasar html
tag DTD

Tag DTD adalah singkatan dari Document Type Declaration. Tagnya ada pada baris paling atas kode HTML.

Tag DTD akan memberitahu kepada browser bahwa dokumen tersebut adalah dokumen HTML beserta versi HTML-nya.

Pada kode HTML di atas, kita menggunakan tag DTD: <!DOCTYPE html>. Ini adalah tag DTD untuk HTML5.

DTD punya banyak versi tergantung versi HTML yang digunakan. Keduanya harus disesuaikan agar web browser dapat memproses dokumen HTML dan menampilkannya dengan baik.

Di HTML5, tag yang digunakan sangat sederhana, mudah dihapal. Pada versi HTML sebelumnya, tag DTD cukup panjang sehingga sulit dihapal.

Contohnya, tag DTD HTML versi 4.01:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Bandingkan dengan tag DTD untuk HTML5:

<!DOCTYPE html>

Jauh lebih sederhana kan?

Tag <html>

buatlah struktur dasar html
tag HTML

Setelah tag DTD, ada tag <html>.

Tag <html> adalah tag pembuka dari sebuah file HTML. Semua kode HTML harus berada di dalam tag ini.

Lalu ditutup dengan tag penutup </html>.

Tag <head>

tag head
tag head

Di dalam tag <head> biasanya berisi berbagai kode HTML yang tidak ditampilkan di web browser.

..selain itu, kode CSS dan Javascript yang diperlukan untuk suatu halaman web juga dimasukkan di dalam tag ini.

Jadi, dapat dikatakan tag <head> berisi berbagai definisi suatu halaman web.

Contoh kode HTML di atas, kita mengetikkan <title>Struktur dasar file HTML</title>. Tag <title> merupakan salah satu kode HTML yang terletak di dalam tag <head>.

..fungsi dari tag <title> adalah untuk memberikan judul dari suatu halaman web. Judul ini muncul pada tab browser.

langkah langkah membuat struktur dasar html
tag title untuk judul halaman

Tag <body>

tag body
tag body

Semua objek seperti paragraf, gambar, video, link, list, dan sebagainya yang akan tampil di web browser, elemen objeknya akan dituliskan di dalam tag <body>.

..di dalam tag inilah kita akan banyak mengoprek-oprek halaman web.

Tag <body> ditutup dengan tag </body>.

Sampai sini, selesai pembahasan kita tentang struktur dasar HTML. Sederhana kan? Struktur di atas selalu ada di setiap file HTML.

Selanjutnya, kita akan membahas cara membuat paragraf di HTML.

Share yuk, ke:

Leave a Comment