Mengenal HTML Untuk Pemula

Secara harafiah, HTML adalah (Hypertext Markup Language). Lantas, apa itu arti dari tiap-tiap kata yang membentuk singkatan HTML itu? Berikut penjelasan singkatnya :

• Hypertext adalah sebuah teks yang apabila diklik akan membawa Anda pergi dari satu dokumen ke dokumen lainnya. Dalam prakteknya, Hypertext berwujud sebuah link yang bisa mengantar Anda ke dunia internet yang luas.
• Markup adalah Tag (semacam kode) yang mengatur layout dan tampilan-tampilan visual yang kita lihat di sebuah website, termasuk font, warna teks, gambar, dan lain sebagainya.
• Language yang merupakan penunjuk bahwa HTML adalah semacam script pemrograman

Dengan kata lain, HTML adalah script pemrograman yang mengatur bagaimana kita menyajikan informasi di dunia internet dan bagaimana informasi itu membawa kita melompat dari satu tempat ke tempat lainnya.

1. Mengenal Tag

Apa itu tag? Dalam dunia HTML, Tag adalah teks yang ditulis di antara tanda < dan >. Tag ini menentukan bagaimana teks akan tampak di jendela browser, bagaimana tabel akan dibuat, gambar apa yang akan disajikan, dan banyak lagi.

Catatan:

Apa itu browser? Jika kita menggunakan Internet Explorer, Firefox, Safari, Opera, dan sebagainya atau juga biasa disebut sebagai software yang digunakan untuk menjelajah dunia internet. Maka kita sedang menggunakan browser.

Sebagai contoh, kita ingin menulis teks seperti ini di layar browser:

CUCI GUDANG Seminggu lagi

Kata "CUCI GUDANG pada teks di atas dibuat lebih tebal  dibandingkan teks-teks lainnya. Kalau anda mengetik teks itu menggunakan MS Word, maka anda akan menekan tombol Bold yang memang telah disediakan. Namun dalam dunia HTML, Anda tidak akan menemukan tombol Bold, Italic, dan sebagainya. Oleh karena itu, teks yang akan diberi efek tebal harus di beri tag. Tag untuk memberi bold adalah tag <b> sedangkan untuk mematikan huruf tebal itu untuk teks-teks berikutnya, buat lagi tag </b>.
Jadi dalam format HTML, teks tersebut harus ditulis seperti ini:

<b>CUCI GUDANG</b> Seminggu lagi

Pada contoh di atas, kita menggunakan two-sided tag yang terdiri dari tag pembuka dan tag penutup. Tag penutup, berada di sebelah kanan selalu ditandai dengan kehadiran "/". Misalkan saja </b>. Dalam prakteknya, two-sided tag selalu diawali dengan tag pembuka dan tag penutup.

Catatan:

Apakah semnua tag HTML berbentuk two-sided tag? Belum tentu. Beberapa tag HTML tidak dilengkapi dengan tag penutup. Misalnya saja, tag <img> yang berfungsi untuk menghadirkan gambar ke dalam website. 

2. Mengennal Singkat HTML 5
Sama seperti sebuah software, HTML memiliki beberapa versi. Versi terakhir yang diperkenalkan adalah HTML 5. Walaupun belum semua browser mampu menginterpretasikan tag-tag dalam HTML 5 secara utuh, namun perlahan tapi pasti versi terbaru dari Hypertext Markup Language ini akan mendominasi desain website.
HTML 5 memiliki kapabilitas baru dibandingkan versi sebelumnya, HTML 4. Misalnya saja, HTML 5 memiliki tag baru bernama <audio> dan <video> yang secara khusus berfungsi untuk menggunakan HTML 4, cara untuk memasang video dan audio ke dalam website adalah dengan memanfaatkan tag <embed> yang sebenarnya berfungsi sangat luas.

Namun walaupun memiliki kapabilitas baru, tidak semua tag yang ada itu murni milik HTML 5.  Banyak di antara tag yang tersedia di buku ini berasal dari HTML 4. Dengan demikian, penggunaan HTML 4 mungkin akan merasa bahwa pembahasan ini terlalu dasar karena membahas pula tag-tag versi lama. Namin, tanpa tag versi lama, rasanya kita akan sulit memahami bagaimana HTML 5 bekerja terutama bagi orang yang benar-benar ingin belajar HTML dari awal.

3. Aplikasi untuk Menulis Script HTML
Kalau anda ingin membuat aplikasi, bisa jadi anda menulis script pemrograman menggunakan Visual Basic, Delphi, dan lain sebagainya. Masalahnya, tidak ada HTML Editor canggih seperti Dreamweaver, namun saran kami, gunakanlah editor paling sederhana, gampang ditemui, dan murah meriah karena pasti sudah adai di MS Windows. Apa itu? Jawabannya : Notepad.

4. Aplikasi untuk Menguji Coba HTML 5
HTML 5, sama seperti pendahulunya, bukankah bahasa pemrograman. Jadi untuk menguji coba HTML 5, Anda hanya membutuhkan satu lagi aplikasi yang pasti sudah ada di setiap komputer, yaitu browser Anda sendiri. Kalau Anda sudah memiliki IE, Firefox, Google Chrome, atau lainnya, maka anda sudah memiliki aplikasi yang cukup untuk uji coba HTML 5. Disarankan, Anda selalu mengupdate browser anda, karena HTML 5 masih belum digunakan secara luas. Oleh karena itu, browser versi lama pun seringkali tak mampu menampilkan tag-tag HTML 5 secara tepat dan akurat.

5. Script HTML Pertama Anda
Sebelum menjelajah jauh ke dalam tag-tag HTML, terutama HTML 5, ada baiknya apabila kita belajar membuat script pertama yang sangat sederhana. Sebelum benar-benar masuk ke dalam bahasan inti tentang HTML 5, ada baiknya Anda menguasai tool-nya terlebih dahulu.

Seperti yang sudah dibahas sebelumnya, HTML tidak menuntuk tool super canggih. Cukup dengan Notepad dan browser anda sudah dapat mempelajari HTML.
Berikut langkah-langkah untuk membuat script HTML pertama Anda:
1. Buka Notepad anda. Pastinya anda sudah mengetahui dimana tempat notepad kan...
2. Ketikan Script berikut

<!DOCTYPE HTML>

<html>
<head>
<title>HTML Pertamaku</title>
</head> 

<body>
<h1>Selamat Datang Dunia HTML!<h1>
<p>Akhirnya saya bisa belajar HTML.</p>
</body> 

</html>

3. Simpanlah script tersebut dengan ekstension" .html ". Misalnya simpan dengan nama welcome.html.

Catatan:

 Secara default, Notepad akan menyimpan teks yang anda buat, entah teks script HTML ataupun lainnya, dalam format .TXT. Tentu saja, format seperti ini tidak akan dikenali oleh browser sebagai format HTML sehingga apabila diuji coba tidak akan menghasilkan output yang memuaskan. Oleh karena itu, saat menyimpan file, jangan lupa meninggalkan ekstensi .htm atau .html di belakang nama file. Lalu, tulislah nama file yang anda inginkan di dalam tanda kutip ganda. Misalnya: "welcome.html". Jangan lupa untuk menyisipkan tanda kutip. Jika tidak, Notepad tetap akan berusaha memasukkan ekstensi .TXT

Anda sudah membuat script HTML yang paling sederhana dan yang paling pertama. Walaupun script di atas bukanlah wujud dari HTML 5, namun tanpa struktur dokumen seperti yang Anda tulis di atas, browser tidak akan mungkin bisa mengenali HTML dengan baik.

5.1 Menguji Coba Script HTML
Langkah berikutnya setelah anda menyusun script HTML adalah menguji coba script tersebut. Sangat sederhana untuk melihatnya.
1. Cari dimana file anda simpan.
2. Buka dengan browser anda masing-masing.