Pengenalan Dasar HTML dan Fungsinya

Pengenalan Dasar HTML dan Fungsinya HTML bertanggung jawab mengatur tampilan halaman website. Meskipun mengandung beragam “kode” (tanda/mark/tag), tetapi HTML tidak bisa disebut bahasa pemrograman. Mengapa?

Bahasa pemrograman umumnya memiliki struktur tertentu, seperti logika If, pengulangan, variabel, debugger, dan penulisan syntax yang benar-benar cermat. Struktur tersebut tidak ditemukan dalam HTML. Jika Anda belajar bahasa pemrograman PHP, apabila di dalam penulisan kode terdapat kekurangan satu karakter, misalnya tanda kutip, seluruh program tidak bisa berjalan. Di dunia HTML, kesalahan penulisan kode tidak akan menghasilkan pesan kesalahan. Maksimal, kesalahan kode hanya akan membuat tampilan website yang Anda buat tampak tidak seperti yang diharapkan.

Sebutan lazim untuk HTML adalah bahasa markup (markup language) seperti yang ada di dalam singkatan HTML itu sendiri. Itu artinya, HTML adalah bahasa struktur untuk menandai bagian-bagian dari sebuah halaman.

Struktur Dasar HTML

HTML setidaknya memiliki struktur dasar yang terdiri dari:

  • Tag DTD atau DOCTYPE
  • Tag HTML
  • Tag HEAD
  • Tag Body
Struktur di atas merupakan struktur HTML paling dasar lihat script berikut yang sudah saya tulis di bab sebelumnya 

Tag DTD atau DOCTYPE

Tag paling awal dari struktur dokumen HTML adalah DTD atau biasa disebut DOCTYPE. DTD sendiri adalah singkatan dari Document Type Declaration yang berfungsi untuk memberi tahu browser bahwa dokumen yang akan ditampilkan adalah dokumen berjenis HTML.

DTD memiliki berbagai versi cara penulisannya yang umumnya tergantung dari versi HTML yang Anda gunakan. Pada contoh di atas, cara penulisan DTD mengikuti DTD versi HTML. Sebelum HTML5. DTD justru ditulis dari teks yang cukup panjang dan njlimet. Sebagai contoh, lihat DTD untuk xHTML 1.0 berikut ini:

Dalam beberapa kasus, DTD bisa diabaikan. Jika kita tidak menulis DTD atau DOCTYPE di awal struktur HTML, browser akan tetap memproses dan menampilkan halaman website kita seperti biasa. Namun sebenarnya, browser menampilkan halaman HTML tersebut pada mode khusus yang disebut Quirk Mode. Itu artinya, browser menampilkan halaman web tidak sama persis seperti yang kita inginkan karena dianggap halaman tersebut kemungkinan besar merupakan halaman web yang obsolete (usang).

Tag HTML

Setelah menulis tag DTD atau DOCTYPE, tag berikutnya yang harus Anda buat adalah tag <html>. Tag ini merupakan tag pembuka dari seluruh halaman web yang akan dibuat. Selanjutnya, semua kode HTML yang membentuk desain sebuah halaman website harus berada di dalam tag <html> ini.


Tag <html> harus ditulis berpasangan, dimulai dengan <html> dan diakhiri dengan </html>, sementara kode-kode HTML lainnya ada di antara tag pembuka dan penutup tersebut.

Tag HEAD

Tag yang ditulis dengan bentuk <head> ini berfungsi secara teknis. Bagian atau elemen yang ditulis pada tag <head> umumnya berbentuk keterangan teknis, seperti definisi dan judul halaman, kode kode CSS, JavaScript, deskripsi halaman, dan kode-kode lainnya yang tidak terlihat sebagai salah satu desain di dalam sebuah halaman.

Judul halaman website ditulis menggunakan tag <title> sesudah Anda menulis tag <head>. Title ini biasanya ditampilkan pada bagian paling atas jendela browser atau di bagian Tab (pada Google Chrome).

Title akan ditampilkan di jendela tab pada browser

Tag <body>

Tag <body> digunakan untuk meletakkan semu! elemen yang akan terlihat di dalam halaman website pada saat halaman itu diakses oleh browser sama seperti dokumen biasa yang mengandung beberapa elemen, seperti paragraf, tabel, link, gambar, dan sebagainya, kemunculan elemen itu ditulis. diantara tag <body> dan </body> konsentrasi seorang web designer tertuju pada elemen diantara tag <body> dan </body>

Memahami Tag

Ketika bekerja menggunakan HTML. pertama-tama kita membutuhkan metode agar web browser tahu apa fungsi sebuah teks sehingga teks itu, oleh browser, ditampilkan sebagai sebuah paragraf, ordered list, tabel atau sebagai link. nah, dalam HTML tanda-tanda ini dikenal dengan istilah tag. 

Sebagian besar tag dl dalam dunia HTML ditulis berpasangan yang kemudian disebut tag pembuka dan tag penutup. Di antara tag pembuka dan penutup bisa Anda letakkan teks untuk membuat paragraf, memanggil gambar, membuat list, dan sebagainya. Teks di antara tag pembuka dan penutup itu sering disebut dengan istilah elemen, Penulisan tag sendiri ditandai dengan dua kurung siku “<” dan “>”

Berikut merupakan contoh format dasar penulisan tag HTML:
Sebagai Contoh, Perhatikan sepotong kode HTML berikut : 


Pada contoh di atas. tag <p> merupakan tag pembuka untuk membuat paragraf baru, sedangkan </p> adalah tag penutup paragraf. Perbedaan tag penutup dengan tag pembuka terletak dari tanda garis miring (/)

Contoh lainnya adalah sebagai berikut : 


Hasil Kode HTML di atas. diterjemahkan oleh browser menjadi : 

Tampilan HTML dalam jendela browser

Tag <i> pada kode HTML diatas berfungsi untuk memberi tanda bagi browser untuk menampilkan teks dalam bentuk miring (Italic) dan tag <b> untuk menebalkan tulisan <bold>

Tidak Semua Tag Berpasangan 

Apakah semua tag HTML berpasangan? tidak. sebab terdapat pengecualian beberapa tag yang tidak harus ditulis berpasangan, seperti <br> untuk break (membuat baris baru) atau <hr> untuk membuat garis horizontal/horizontal line. 

Tag ini dikenal dengan self closing tag ata void tag. untuk menulis tag seperti ini bisa, ditulis dengan <br> biasa maupun <br/>

Case Sensitive

HTML tidak case-sensitive sehingga dalam praktiknya, penulisan tag <p> dianggap sama dengan <p>. namun demikian, varian HTML, lain yang bernama xHTML, memwajibkan penulisan menggunakan huruf kecil untuk semua tag. 

Elemen Dalam HTML

Elemen adalah teks di antara tag pembuka dan tag penutup. termasuk tag itu sendiri dan atribut tag tersebut. sebagai contoh perhatikan kode HTML berikut : 


Pada Contoh di atas “<p> Ayo kita belajar HTML, </p> merupakan elemen dari, p selain teks biasa yang akan muncul di jendela browser, elemen juga bisa berbentuk tag lain. Contohnya sebagai berikut :
 

Dari Contoh di atas “<p> ayo kita belajar <b>HTML</b> atau <i> Hypertext Markup Language</i></p>” merupakan elemen p 

Mengenal Atribut 

Atribut adalah informasi tambahan dalam sebuah tag informasi ini bisa bermacam-macam dan setiap tag tidak selalu memiliki atribut yang sama. isi informasi tersebut bisa berupa instruksi untuk warna teks, ukuran, perataan paragraf, dan seterusnya. 

Setiap atribut memiliki pasangan nama dan nilai (value) , dan ditulis dengan name=”value”. Value sendiri harus ditulis dengan diapit tanda kutip. Contoh kode HTML yang melibatkan atribut adalah sebagai berikut : 


Pada potongan kode HTML, diatas , align=”center” adalah atribut di mana align merupakan nama dari atribut. dan “center” adalah value atau nilai dari atribut tersebut. Tag di atas berfungsi untuk membuat agar teks rata-tengah

Sebenarnya Tidak semua tag membutuhkan atribut, tapi anda akan sering melihat sebuah tag dengan atribut. terutama atribut id dan class. apabila bekerja dengan CSS maupun Javascript.