Belajar HTML Dasar : Mengenal Tag, Elemen dan Atribut

HTML sekali lagi saya katakan bukan bahasa pemprograman, namun bahasa struktur yang fungsinya untuk menandai bagian-bagian dari sebuah halaman. Karena merupakan bahasa struktur, itu berarti HTML memiliki pola dan susunan yang baku. Susunan ini disebut sebagai Tag, Elemen dan Atribut.

Secara umum, struktur dasar HTML berbentuk seperti ini :

Dari struktur yang terdapat diatas, kita bisa mengenal Tag, Elemen dan Atribut. Dokumen HTML disimpan dalam format teks reguler dan mengandung tag-tag yang memerintahkan web browser untuk mengeksekusi perintah-perintah yang dispesifikasikan. Agar lebih mudah memahami, penjabarannya akan kita bagi dalam beberapa bagian.

Mengenal Tag HTML

Tag Adalah teks khusus (markup) berupa dua karakter "<" dan ">" (tanpa tanda kutip) yang merupakan cara untuk memberitahu web browser bagaimana suatu text ditampilkan. Hampir semua tag dalam HTML ditulis secara berpasangan (beberapa berupa tag tunggal), tag pembuka dan tag penutup, dimana objek yang dikenai perintah tag berada di antara tag pembuka dan tag penutup.

Sebagai contoh pada script diatas, <body> adalah tag dengan nama body.
Karena ditulis secara berpasangan, maka tag <body> pembuka harus memiliki penutup. Penulisan tag penutup ditambahkan karakter "/" setelah karakter "<", sebagai contoh <body> ini adalah tag pembuka isi dokumen HTML, dan </body> ini adalah tag penutup isi dokumen HTML.

Mengenal Elemen HTML

Elemen adalah isi dari tag yang berada diantara tag pembuka dan tag penutup. Element terdiri atas tiga bagian, yaitu tag pembuka, isi, dan tag penutup. Sebagai contoh untuk menampilkan judul dokumen HTML pada web browser digunakan element title.

Merujuk pada contoh script diatas, maka <title> ini adalah tag pembuka judul dokumen HTML. Kata-kata Judul Dokumen HTML merupakan isi judul dokumen HTML dan </title> adalah tag penutup judul dokumen HTML. Penulisan lengkapnya seperti ini <title>Judul Dokumen HTML</title>

Harus diingat, saat menulis elemen HTML jangan sampai saling tumpang tindih. Misal :

Jangan sampai ditulis :

Lihat barisan elemen <p> yang pertama, pasangan akhirnya adalah <b>. Jika pola yang Anda gunakan seperti itu, maka yakin dan percaya, script yang Anda buat sampai kiamat tidak akan berfungsi.

Mengenal Atribut HTML

Atribut adalah informasi tambahan yang diberikan kepada tag. Informasi ini bisa berupa instruksi untuk warna dari text, besar huruf dari text, dan lain-lain. Setiap atribut juga memiliki pasangan nama dan nilai (value), dan ditulis dengan name=”value”. Value diapit tanda kutip, boleh tanda kutip satu (‘) atau dua (“).

Penulisan harus berada diantara tag pembuka dan penutup, Sebagai contoh, untuk membuat warna teks menjadi kuning dan latarbelakang halaman web menjadi hitam, penulisannya adalah <body bgcolor="black" text="yellow">

Latihan

Agar lebih mudah dipahami, kita akan membuat contoh script HTML dasar. Seperti yang saya katakan pada postingan belajar HTML sebelumnya, web browser dalam hal ini diperlukan, begitu pula dengan aplikasi editor. Kali ini saya menggunakan Google Chrome sebagai browser dan Notepad ++ sebagai aplikasi editor.

Pertama-tama buka Notepad ++ Anda dan tuliskan scrip berikut

<html>

<head>

<title>Judul berkas HTML</title>

</head>

<body>

Isi Berkas (Belajar HTML bareng Mas Bayu ~)

</body>

</html>

Tampilannya di Notepad ++

Setelah itu simpan file dengan format .html
Kemudian buka file yang disimpan ke web browser.

Maka tampilannya akan seperti gambar berikut. Judulnya "Judul Berkas HTML", isinya " Isi Berkas (Belajar HTML bareng Mas Bayu~)" dan latar belakang tulisan berwarna hitam, serta tulisannya berbarna kuning.

Gimana, belajar HTML mudah bukan!. Semoga penjelasan diatas, bisa lebih mudah dipahami. Kita akan melanjutkan pembahasan pada postingan selanjutnya. Soal Tag, Elemen dan Atribut masih memiliki banyak varian, kita akan mengenalnya nanti. Belajarnya harus setahap demi setahap.