Apa itu HTML?
Di bawah ini diberikan poin-poin singkat mengenai HTML:
HTML adalah singkatan dari Hyper Text markup Language, yaitu:
- File HTML adalah file teks yang berisikan kumpulan-kumpulan tag markup,
- Tag markup ini akan memberitahukan browser bagaimana untuk menampilkan halaman suatu web,
- File HTML harus memiliki ekstensi antara htm atau html,
- File HTML dapat dibuat menggunakan text editor, yang paling sederhana dengan memakai Notepad.
Dikutip dari Wikipedia,
"Pada tahun 1980, IBM memikirkan pembuatan suatu dokumen yang akan mengenali setiap elemen dari dokumen dengan suatu tanda tertentu. IBM kemudian mengembangkan suatu jenis bahasa yang menggabungkan teks dengan perintah-perintah pemformatan dokumen. Bahasa ini dinamakan Markup Language, sebuah bahasa yang menggunakan tanda-tanda sebagai basisnya. Pertama-tama IBM menamakan sistemnya ini sebagai Generalized Markup Language atau GML.
Tahun 1986, ISO menyatakan bahwa IBM memiliki suatu konsep tentang dokumen yang sangat baik, dan kemudian mengeluarkan suatu publikasi (ISO 8879) yang menyatakan markup language sebagai standar untuk pembuatan dokumen-dokumen. ISO membuat bahasa ini dari GML milik IBM, tetapi memberinya nama lain, yaitu SGML (Standard Generalized Markup Language). ISO dalam publikasinya meyakini bahwa SGML akan sangat berguna untuk pemrosesan informasi teks dan sistem-sistem perkantoran. Tetapi di luar perkiraan ISO, SGML dan terutama subset dari SGML, yaitu HTML juga berguna untuk menjelajahi internet. Khususnya bagi mereka yang menggunakan World Wide Web. Versi terakhir dari HTML saat ini adalah HTML5."
Sejarah dari standar HTML:
- HTML 2.0—(RFC 1866) disetujui sebagai standar pada 22 September 1995,
- HTML 3.2—14 Januari 1996,
- HTML 4.0—18 Desember 1997,
- HTML 4.01 (minor fixes)—24 Desember 1999,
- ISO/IEC 15445:2000 ("ISO HTML", berdasar pada HTML 4.01 Strict)—15 Mei 2000.
- HTML 5 (stabil) rekomendasi W3C—28 Oktober 2014
Pada pembelajaran di blog ini, kita akan selalu belajar membuat halaman HTML dengan menggunakan Notepad.
Simak secara bertahap alurnya untuk lebih mengerti secara mendalam mengenai apa itu html dan setiap kegunaan tags markupnya.
Namun sebelumnya, ternyata masih banyak yang bingung tentang perbedaan dalam HTML dan Adobe Dreamweaver.
Begini ceritanya, pada dasarnya semua halaman web yang Anda lihat pasti tersusun atas kode-kode HTML. Silahkan buka web apapun lalu klik kanan pada halaman itu, lalu buka sumber kode HTML-nya dengan view page source.
Sebagai contoh coba buka http://www.google.com menggunakan browser Firefox. Kemudian view page source.
Sesuaikan interface dengan memilih "Wrap Long Lines", dengan begitu kode HTML akan lebih mudah dibaca seperti pada gambar di bawah...
Di situ akan terlihat halaman penuh kode struktur seperti ini:
<html>
<head>
<title> </ title>
</ head>
<body>
</ body>
</ html>
<head>
<title> </ title>
</ head>
<body>
</ body>
</ html>
Untuk lebih jelasnya, coba perhatikan gambar di bawah ini, akan terlihat jelas tag-tag HTML seperti <html>, <head>, dan <body>
Sekarang sudah terlihat secara nyata bahwa halaman web semuanya dibuat dengan menggunakan bahasa HTML. Lalu kembali ke pertanyaan tadi, apa bedanya dengan Dreamweaver? Ada di mana Dreamweaver tadi?
Nah, Adobe Dreamweaver itu adalah suatu software aplikasi, secara sederhana dapat diartikan kalau dreamweaver itu merupakan alat/tools untuk membantu kita dalam menulis kode HTML secara visual, tidak perlu repot-repot menggunakan tag-tag kode html lagi, cukup mengetik seperti pada Microsoft Word. Nantinya dreamweaver lah yang secara otomatis menerjemahkannya ke dalam bahasa HTML, semua tools lengkap ada di dalamnya, tinggal klik saja langsung jadi. Mudah bukan? Tapi sekali-sekali kita coba untuk tidak mencari jalan yang mudah, kalau bisa mengerti menggunakan tag-tag html secara manual kan lebih keren tuh, kan jadi ada deh bahan cerita, terus ada juga yang bisa dipamerin ke cewek-cewek hehehe....
Oke oke kita lanjut lagi, sekarang kita coba mulai dari pengenalan konten HTML dengan review singkat kode-kodenya.
Coba buat kode html apa saja yang terbersit di benak kamu....
Kalau ga ada yang terbersit ini aku kasih contoh, copas boleh, lebih bagus lagi kalau diketik ulang, supaya bisa tertanam di dalam benak kamu...
<html>
<head>
<title>Surat Cinta</title>
</head>
<body>
<h1>Aku sangat mencintaimu</h1>
<p>Tolong mengertilah keadaanku</p>
</body>
</html>
Bisa copas/ketikkan kode-kode html di atas ke notepad misalnya dengan nama "belajar1.html" (Ganti Save As Type menjadi All Files, dan encodenya diubah menjadi UTF-8). Kalau ada yang pengen tau kenapa pakai utf-8, nanti baca lagi ini di Wikipedia biar ga lari jauh kemana-mana ini pembelajaran kita.
Lihat lagi gambar di bawah biar makin mantap.
Nah sekarang coba buka file yang sudah dibuat tadi "belajar1.html", buka pakai firefox, kalau belum default, klik kanan foldernya dan pilih open with klik firefox. Maka pasti akan muncul seperti ini di firefoxnya.
Cocokkan kembali dengan yang tadi sudah dicopas/diketik di notepad, yang ada di antara tanda buka kurung tutup kurung bersudut (kalau dalam bahasa inggris, tanda itu namanya angel brackets). Bagaimana sudah sesuai semua kan isinya?
1. <title>Surat Cinta</title>,
2. <h1>Aku sangat mencintaimu</h1>
3. <p>Tolong mengertilah keadaanku</p>
Oke kalau sudah sesuai semua.
Jadi, kesimpulan yang bisa diambil dari hasil yang ditampilkan firefox dan apa yang diketik di notepad adalah setiap tag markup tadi telah membuat kumpulan bahasa pemrograman, bahasa yang dimengerti oleh firefox kemudian diterjemahkan ke dalam bentuk tampilan visual. Supaya lebih paham, ayo dicoba sendiri dengan mengetikkan ulang
"surat cinta
aku sangat mencintaimu,
tolong mengertilah keadaanku"
tetapi tanpa menggunakan tag markup. Simpan kembali tetap dengan format yang sudah kita buat tadi. Lalu buka lagi firefoxnya....
Bagaimana? Ada perbedaan kan? Terlihat jelas kan perbedaannya....?
Kita buat suatu perumpamaan, misalnya ada percakapan dua orang, satu orang bule dan satu lagi orang indonesia yang mana si bule itu cuma mengerti bahasa inggris begitu pula orang indonesianya cuma mengerti berbahasa indonesia. Keduanya memang saling mendengarkan satu sama lain, seandainya pun si bule disuruh mengulangi apa yang diucapkan si orang indonesia pasti bisa, begitu juga sebaliknya. Tetapi apa mereka mengerti apa yang mereka ucapkan itu? Kalau kita kutip dari peribahasa, mereka berdua bisa diibaratkan tong kosong nyaring bunyinya, ngomong ini itu tetapi tidak mengerti apa yang diomongkan hehe.....
Sama halnya percakapan antara notepad dan firefox tadi, firefox bisa mengulangi apa yang diketikan oleh notepad, tetapi tidak mengerti bagaimana isi text tersebut harus ditampilkan.
Nah, tags markup tadilah yang harus masuk ke dalam percakapan notepad dan firefox, sebagai translatornya. Seperti penjelasan di paling awal tadi di point nomor 2, "tag markup memberitahukan browser bagaimana untuk menampilkan halaman web".
Yak sudah selesai, begitulah pemahaman secara sederhana kegunaan dari bahasa pemrograman html.
Sekarang kita sudah sedikit mengenal yang namanya html, mulai dari sejarah, pengertian dasar, dan kegunaannya.
Kemudian yang jadi pertanyaan, dilihat dari tag-tag markup yang telah ditampilkan di firefox tadi sudah tahu kan apa masing-masing fungsi dari tag-tag tersebut?
Kalau sudah, silahkan disimpan dalam hati dan sanubari masing-masing... itulah modal awal kita untuk pembelajaran lebih lanjut berikutnya...
Atau ada yang belum tahu, terus mau dijelaskan lagi???
Ooopp tenang-tenang sabar dulu, nanti di pembelajaran berikutnya akan kita bahas kembali dengan tambahan materi-materi lain yang akan jauh lebih menyenangkan. Semua akan kita kupas lebih mendalam dan hati-hati.
Tunggu pos selanjutnya ya.....