Mengenal dan Memahami Struktur Dasar HTML

Hallo sobat Blog Pintasku, sebelumnya saya membuat artikel tentang Mengenal Apa itu Tag, Atribut, dan Elemen pada HTML, nahh untuk sekarang masih berhubungan dengan Tutorial Dasar HTML, tapi untuk kali ini saya akan memberikan Tutorial untuk Mengenal dan Memahai Struktur Dasar HTML.


Bagi sobat yang belum paham mengenai HTML silahkan sobat baca pada artikel saya sebelumnya mengenai HTML dibawah ini.
Oke sekarang langsung masuk ke topik utama, silahkan sobat baca dibawah ini.

Cara Membuat Struktur Dasar Halaman HTML

Pada umumnya untuk membuat struktur dasar dari HTML itu adalah Tag DTD atau DOCTYPE, tag html, tag head, dan tag body, semua tag tersebut adalah tag paling dasar atau lebih tepatnya tag yang sering ditemukan pada setiap dokumen HTML, walaupun pada umumnya tidak hanya Tag itu saja untuk struktur dasar HTML.

Supaya lebih gampang silahkan sobat untuk membuka text editor atau software web desain sobat, mau itu notepad ++. CoffeeCup Free HTML Editor , PageBreeze dll. Lalu ketikan kode dibawah ini.
<!DOCTYPE html>
  <html>
  <head>
    <title>Untuk Judul Website</title>
  </head>
<body>
   <p>Ini Hanyalah Contoh saja dari Blog Pintasku</p>
</body>
</html>
Sekarang save dengan ekstensi .html , misalnya halamanku.html dan jalankan dokumen tersebut menggunakan web browser sobat dan lihat hasilnya seperti gambar dibawah ini.


Nahh sekarang kita akan membahas satu persatu tag yang ada pada contoh kode di atas, dan yang ada pada contoh di atas adalah sebagai berikut :
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <Title>
  5. <body>
  6. <p>

1. <!DOCTYPE html> atau DTD

DOCTYPE atau lebih dikenal dengan DTD merupakan singkatan dari Document Type Declaration, dimana fungsi dari DTD adalah untuk memberitahukan atau memberikan informasi kepada web browser bahwa dokumen yang akan di proses itu adalah dokumen HTML. Perlu diketahui oleh sobat DTD itu memiliki banyak versi tergantung pada versi HTML yang digunakan. Untuk contoh di atas kita menggunakan DTD versi HTML5.

Bagaimana kalau kita lupa tidak memasukan Tag DTD pada sebuah dokumen HTML ? Jika kita lupa tidak memasukan Tag pada dokumen HTML itu tidak akan berpengaruh terhadap tag lain atau bisa membuat error, dan web browser juga akan membaca dokumen HTML kita itu seperti biasa, akan tetapi jika kita tidak memasukan Tag DTD pada dokumen HTML, Web browser akan menjalankan dokumen kita pada mode khusus, yaitu mode quirk mode. Pada Quirk mode browser akan menganggap dokumen kita itu sudah jadul karena browser menerjemahkan Dokumen HTML atau web page (Halaman Web) berbeda dari biasanya.

2. Tag <HTML>

Tag HTML adalah Tag dari kesulurah semua tag pada Halaman Web atau dokumen kalau secara sederhananya yaitu pembungkus dari kesuluruhan Tag yang ada pada Halaman Web atau dokumen. Tag pembuka ditulis dengan kode.
<HTML>
Sedangkan Tag Penutup seperti dibawah ini.
</HTML>

3. Tag <Head> dan Tag <Title>

Tag <Head> biasanya oleh sebagian orang orang sering digunakan untuk menyimpan CSS, Javascript, Meta, dan kode kode lainnya yang tidak akan muncul di browser.

Tag <Title> adalah Tag untuk Judul sebuah halaman, biasanya untuk membuat Judul biasanya menggunakan Tag H1. H2 H3 H4 H5 H6. Tetapi pada contoh di atas saya menggunakan Tag Title saja, dan lihatlah Hasil pada browser disana pada bagian atas browser sobat ada isi atau elemen dari Tag Title

4. Tag <body>

Tag <Body> tag ini biasanya berisikan isi dari sebuah halaman web atau isi dari dokumen HTML, baik itu berupa paragraf, gambar, link, tabel, dan lain lain. Nahh untuk sobat yang suka ngedesain halaman blogger, atau halaman web, Tag yang biasanya kita edit atau modifikasi itu terletak di dalam Tag <Body>.

Catatan : Semua tag yang ada pada contoh kecuali tag <!DOCTYPE html> atau DTD adalah Tag yang berpasangan, sedangkan Tag <!DOCTYPE html> atau DTD adalah tag Tunggal jadi kita harus bisa mengetahui Setiap Tag yang ada, Untuk membedakan antara Tag Tunggal dan Tag Berpasang dilihat dari elemen, tag berpasang selalu ada elemen sedangkan Tag Tunggal tidak.
Sekian Pembahasan dari saya mengenai Mengenal dan Memahami Struktur Dasar HTML semoga tutorial ini bisa bermanfaat untuk semuanya. Terimakasih telah membaca

No comments:

Post a Comment