Tutorial HTML untuk Pemula: Membuat Struktur Dasar HTML



Halo gan. Di postingan sebelumnya kita sudah membahas tag, elemen, dan atribut pada HTML. Kali ini kita akan bahas struktur dasar pada HTML dan cara membuatnya.

tutorial html untuk pemula

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:

tutorial html untuk pemula

Kita bedah tagnya satu persatu dari struktur kode di atas.

Tag DTD

tutorial html untuk pemula

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?

Kalo ente mau lihat tag DTD yang lebih banyak lagi, bisa lihat di sini.

Tag <html>

tutorial html untuk pemula

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>

tutorial html untuk pemula

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.

tutorial html untuk pemula

Tag <body>

tutorial html untuk pemula

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.



0 Komentar untuk "Tutorial HTML untuk Pemula: Membuat Struktur Dasar HTML"