HTML (HyperText Markup Language) merupakan suatu tata cara penulisan untuk membangun web. Namun jangan dikira HTML adalah bahasa pemrograman. Karena struktur koding dalam HTML hanyalah terbatas untuk web statis.
Tapi kok, pelajaran HTML masuk kategori programming di beberapa perguruan tinggi?. Itu karena HTML adalah dasar untuk selanjutnya belajar ke bahasa pemrograman web (mungkin begitu anggapannya). Jadi untuk membuat suatu web menjadi dinamis, dimana terjadi interaksi antar pengunjung dan halaman web tersebut, maka barulah disisipkan bahasa pemrograman seperti PHP, ASP, JavaScript, Visual Basic Script, dll.
Tapi kok, pelajaran HTML masuk kategori programming di beberapa perguruan tinggi?. Itu karena HTML adalah dasar untuk selanjutnya belajar ke bahasa pemrograman web (mungkin begitu anggapannya). Jadi untuk membuat suatu web menjadi dinamis, dimana terjadi interaksi antar pengunjung dan halaman web tersebut, maka barulah disisipkan bahasa pemrograman seperti PHP, ASP, JavaScript, Visual Basic Script, dll.
A. Sekilas Tentang HTML
Informasi yang setiap hari kita buka dari internet adalah dalam bentuk dokumen yang disebut Web Page. Web Page tersebut bisa mengandung link ke dokumen lain dari satu komputer atau ke komputer lain di internet. Hubungan atau link antar dokumen istilahnya adalah Internal Link. Sedangkan hubungan ke dokumen lain di salah satu komputer dalam internet disebut External Link. Tentu pembaca sudah paham jika suatu dokumen web tidak hanya bisa di-link dengan dokumen lainnya, tetapi juga bisa dengan image, audio, video, dll. Dalam dokumen yang mengandung link biasanya ditandai dengan warna atau garis bawah.
Informasi yang setiap hari kita buka dari internet adalah dalam bentuk dokumen yang disebut Web Page. Web Page tersebut bisa mengandung link ke dokumen lain dari satu komputer atau ke komputer lain di internet. Hubungan atau link antar dokumen istilahnya adalah Internal Link. Sedangkan hubungan ke dokumen lain di salah satu komputer dalam internet disebut External Link. Tentu pembaca sudah paham jika suatu dokumen web tidak hanya bisa di-link dengan dokumen lainnya, tetapi juga bisa dengan image, audio, video, dll. Dalam dokumen yang mengandung link biasanya ditandai dengan warna atau garis bawah.
Konsep referensi dan link di antara alamat web dalam internet inilah yang mendasari keseluruhan teknologi World Wide Web (WWW) dan konsep ini dikenal dengan nama Hypertext. Dokumen yang mendukung hypertext itu adalah dokumen HTML (Hypertext Markup Language).
File jenis ini biasanya berakhiran .HTML atau .HTM saja. Dokumen HTML mengandung atribut atau istilahnya "tag" untuk mengaktifkan suatu instruksi. Untuk membuat dokumen HTML tidaklah perlu program macam-macam. Bisa dengan notepad bawaan Windows, notepad++ atau Dreamweaver (Baca Artikel: Download Macromedia Dreamweaver MX2004). Namun jika anda baru berniat belajar dari dasar, sebaiknya berlatih manual dengan notepad. Karena semakin banyak mengetik, pasti akan terbiasa juga dengan segala macam tag HTML ini tokh.
Yah, karena seperti belajar pemrograman pada umumnya, kita hanya harus menghapal suatu syntak akan menghasilkan output apa. Untuk memunculkan program Notepad di Windows, anda cukup ketikkan saja notepad di Start Menu pencarian.
B. Mulai Membuat Dokumen HTML
Sebelumnya, anda harus sudah tahu dulu cara formatting TAG untuk setiap bagiannya. HTML mengenal 2 jenis tag. Yaitu tag pembuka yang diakhiri tag penutup dan tag pembuka saja tanpa ada tag penutup. Tag pembuka dilambangkan dengan kurung buka "<" dilanjutkan dengan nama tag, lalu kurung tutup ">". Sedangkan tag penutup ditambah tanda "/" setelah kurung buka. Contoh:
Pada contoh di atas, untuk menyimpannya menjadi dokumen html, di notepad pilih menu File > Save. Pada bagian file name, isikan dengan nama misal latih1.html. Ingat, yang penting ekstensinya harus .html atau .htm. Lalu pada kolom Save as type, pilih All files.
Ohya, biasakan selalu menggunakan tag <html> dulu di awal baris dan tag penutup </html> di akhir dokumen. Ini sebagai penanda bahwa file tersebut adalah file html.
Yah, karena seperti belajar pemrograman pada umumnya, kita hanya harus menghapal suatu syntak akan menghasilkan output apa. Untuk memunculkan program Notepad di Windows, anda cukup ketikkan saja notepad di Start Menu pencarian.
B. Mulai Membuat Dokumen HTML
Sebelumnya, anda harus sudah tahu dulu cara formatting TAG untuk setiap bagiannya. HTML mengenal 2 jenis tag. Yaitu tag pembuka yang diakhiri tag penutup dan tag pembuka saja tanpa ada tag penutup. Tag pembuka dilambangkan dengan kurung buka "<" dilanjutkan dengan nama tag, lalu kurung tutup ">". Sedangkan tag penutup ditambah tanda "/" setelah kurung buka. Contoh:
 |
| Cara menulis tag html |
Ohya, biasakan selalu menggunakan tag <html> dulu di awal baris dan tag penutup </html> di akhir dokumen. Ini sebagai penanda bahwa file tersebut adalah file html.
 |
| Cara menyimpan dokumen web html. |
Nah, jika dokumen html tersebut dibuka dengan web browser seperti Google Chrome atau Firefox, maka yang tampil hanya kalimat "Latihan nulis html", sedangkan tag html tidak akan ditampilkan.
C. Tiga Unsur Penting HTML: Head, Title, Body.
Dokumen HTML secara umum terbagi menjadi dua bagian, yaitu HEAD dan BODY. Head berisi judul dari dokumen yang kita buat dan akan ditampilkan di bagian atas layar browser. Head ini harus diikuti dengan tag <title> karena jika tidak, maka tidak akan berdampak apa-apa walaupun dokumen tersebut sudah mengandung tag HEAD. Ketikkan contoh berikut dengan notepad. (Lebih baik ketik ulang saja deh daripada copy paste biar hapal...percayalah).
C. Tiga Unsur Penting HTML: Head, Title, Body.
Dokumen HTML secara umum terbagi menjadi dua bagian, yaitu HEAD dan BODY. Head berisi judul dari dokumen yang kita buat dan akan ditampilkan di bagian atas layar browser. Head ini harus diikuti dengan tag <title> karena jika tidak, maka tidak akan berdampak apa-apa walaupun dokumen tersebut sudah mengandung tag HEAD. Ketikkan contoh berikut dengan notepad. (Lebih baik ketik ulang saja deh daripada copy paste biar hapal...percayalah).
<html>
<head>
<title>
Belajar Dasar HTML Memang Asyik
</title>
</head>
</html>
Di sini saya menyimpan di partisi C dengan nama d.html. Saat saya double click, maka otomatis terbuka dengan web browser default saya (Chrome). Nah, title-nya jelas terbaca pada bagian yang dilingkari merah.
Sedangkan pada tag body, bisa dikatakan sebagai penampung dari isi atau konten dokumen html yang akan ditampilkan. Contoh:
<html>
<head>
<title>
Catatan Pelajaran HTML
</title>
</head>
<body>
Baru belajar pengertian dan tag umum dulu
</body>
</html>
Sebenarnya sih, tag body ini tidak mutlak harus ada. Karena apapun setelah tag penutup head akan dianggap isi dari body. Tapi daripada tidak ditulis, lebih baik sempurnakan saja kan...Ok, sampai sekian dulu perkenalan dasarnya. Biar saya pikirkan lagi materi selanjutnya yang akan diposting. Terima kasih dan semoga dapat bermanfaat.
<head>
<title>
Belajar Dasar HTML Memang Asyik
</title>
</head>
</html>
Di sini saya menyimpan di partisi C dengan nama d.html. Saat saya double click, maka otomatis terbuka dengan web browser default saya (Chrome). Nah, title-nya jelas terbaca pada bagian yang dilingkari merah.
 |
| Hasil penulisan head dan title |
<html>
<head>
<title>
Catatan Pelajaran HTML
</title>
</head>
<body>
Baru belajar pengertian dan tag umum dulu
</body>
</html>
 |
| Hasil penulisan body |
Inget zaman sekolah dulu
BalasHapus