HTML singkatan dari HyperText Markup Language yang merupakan bahasa markup untuk web. Meskipun telah banyak editor HTML "instant" atau WYSIWYG (What You See Is What You Get) seperti : Dreamweaver dan Frontpage untuk membuat halaman-halaman web dengan mudah. Mengapa mesti belajar menggunakan HTML?
Ada berbagai alasan mengapa mesti belajar menggunakan HTML untuk membuat halaman web, alasan-alasannya antara lain :
- HTML adalah dasar pembuatan halaman web, jika kita menguasainya maka tidak sukar untuk mempelajari dan menggunakan editor HTML "instant".
- Tidak tergantung kepada editor HTML "instant", sebab jika kita menguasai HTML maka kita bisa membuat halaman web dengan editor teks sederhana seperti Notepad.
- Kita dapat membaca alur desain web sekaligus memperbaiki kesalahan penulisan tag HTML, jika ada.
- Agar semua kemampuan browser dapat dieksploitasi sebab editor HTML "instant" biasanya memiliki keterbatasan.
Belajar HTML itu tidak sulit sebab HTML berbeda dengan bahasa pemrograman. Bahasa HTML adalah bahasa yang tidak memerlukan kemampuan logika dan algoritma pemrograman yang rumit dan terstruktur seperti Pascal misalnya. Jadi, jika anda menguasai HTML, anda tidak akan disebut sebagai seorang programmer tapi Web Designer atau Web Master!
Cara Membuat Dokumen HTML
Dokumen HTML adalah file teks murni yang dapat dibuat dengan editor teks apapun, termasuk editor teks sederhana seperti Notepad. Dokumen ini dikenal sebagai web page jika disimpan dan pemberian nama filenya diakhiri (berekstensi) .html atau .htm. Dokumen HTML adalah dokumen yang disajikan dalam browser web karena umumnya dokumen ini berisi informasi atau interface aplikasi di dalam internet.
Untuk membuat dan menyimpan file HTML menggunakan Notepad, caranya adalah save file teks pada Notepad kemudian pada bagian Save as type pilih All Files kemudian pada bagian File name tambahkan tulisan .html atau .htm di belakang nama file aslinya. Perhatikan gambar berikut, misalnya kita akan menyimpan sebuah file HTML dengan nama coba.html
Elemen HTML
Dokumen HTML disusun oleh elemen-elemen atau komponen dasar HTML. Untuk menandai berbagai elemen dalam suatu dokumen HTML, digunakan tag. Tag adalah kode yang digunakan untuk me-mark-up (memoles) teks ASCII. Setiap tag memiliki fungsi sendiri dan selalu diawali dengan tanda '<' diakhiri dengan tanda '>'. Pada umumnya sebuah tag mempunyai pasangan penutup, gunanya agar teks ASCII yang dipoles dapat diketahui batas-batasnya. Tag penutup selalu diawali dengan tanda ''. Format penulisannya adalah sebagai berikut :
<Tag pembuka>Teks ASCII</Tag penutup>
Contoh :
<B>Belajar membuat homepage dengan HTML</B>
oleh browser akan ditampilkan :
Belajar membuat homepage dengan HTML
Belajar <B>membuat <I>Homepage</I> dengan HTML</B>
oleh browser akan ditampilkan :
Belajar membuat Homepage dengan HTML
Namun ada beberapa tag yang tidak mengharuskan mempunyai pasangan tag penutup, seperti : <P> - paragraph, <BR> - Line Break, <HR> - Garis Horisontal, <LI> - List Item atau <INPUT> . Tag-tag seperti ini tidak dapat menimpa tag yang lain atau tidak bersifat override.
Tag-tag HTML bisa ditulis dengan huruf besar atau huruf kecil (non case sensitif). Namun link-link dan nama-nama referensinya bersifat case sensitif, terutama untuk file-file yang disimpan pada server berbasis UNIX atau LINUX. Jadi, untuk penulisan link atau nama referensi sebaiknya ditulis dengan huruf kecil. Misalnya :
<A HREF="referensi.html">
Format Dasar File HTML
Secara umum dokumen web dibagi menjadi dua bagian (section), yaitu bagian head dan bagian body. Sehingga setiap dokumen web harus mempunyai pola seperti berikut :
<html>
<head>
----- informasi tentang dokumen web -----
</head>
<body>
-- informasi yang ditampilkan dalam browser web ---
</body>
</html>
Penjelasan :
Setiap dokumen web harus diawali dengan tag <HTML> dan diakhiri tag </HTML> yang berarti dokumen yang diketik adalah dokumen HTML atau web. Ruang diantara tag <HEAD> dan </HEAD> berisi informasi umum atau informasi meta, informasi tentang sesuatu. Misalnya, informasi tentang editor yang digunakan, pembuat web, judul halaman web, kata kunci dan lain-lain. Informasi atau elemen di dalam head tidak ditampilkan dalam window browser. Hanya ada beberapa tag yang legal di dalam bagian head, antara lain :
- <TITLE>, untuk mendefinisikan title atau judul dokumen.
- <BASE>, untuk mendefinisikan referensi default kepada resource eksternal.
- <LINK>, untuk mendefinisikan relasi antara dua dokumen yang terhubung.
- <META>, untuk mendefinisikan informasi meta.
Ruang antara tag <BODY> dan </BODY> berisi materi utama homepage yang akan ditampilkan dalam window browser, seperti : paragraph, grafik, link, tabel, dan sebagainya.
Tag-tag Dasar HTML
Dokumen HTML secara mendasar akan terdiri atas teks informasi. Teks informasi disusun dengan tag-tag dan diatur dalam bagian (section) yang sesuai fungsinya. Berikut ini adalah tag-tag dasar HTML :
- HTML
Tag dasar yang digunakan untuk mendefinisikan bahwa dokumen yang diketik adalah dokumen HTML. Tag ini harus diketik diawal dokumen HTML. - Head
Untuk menulis keterangan tentang dokumen web yang akan ditampilkan. - Title
Tag ini ada didalam bagian Head dan digunakan untuk memberi judul window browser yang menampilkan dokumen web - Body
Adalah bagian atau section dari dokumen web dimana semua isi dokumen yang akan ditampilkan harus ditulis pada bagian ini. - Paragraf
Untuk menampilkan satu pokok pikiran digunakan tag <P>, tag ini tidak harus diakhiri tag penutup </P>
Membuat Homepage
Pastikan anda memiliki program teks editor seperti Notepad. Lalu ketiklah listing program berikut ini (ketik sama persis!) :
<HTML>
<HEAD>
<TITLE>Mencoba membuat Homepage</TITLE>
</head>
<body>
<!Program HTML pertama saya ->
<P>Ini adalah Homepage yang pertama kali saya buat.
Ternyata cukup gampang! </P>
</body>
</html>
Simpan program diatas dengan nama Coba.HTML, jangan lupa pilih All files untuk pilihan save as type
Setelah disimpan, aktifkan windows explorer dan cari file coba.html. Jika menemukannya, klik ganda file tersebut supaya muncul pada web browser. Perhatikan gambar berikut :
Dari tampilan web yang ada, cobalah tekan tombol kanan mouse (klik kanan), kemudian pilih view source atau pilih menu View - Source untuk menampilkan kembali source file teks yang terdapat pada notepad.
Selanjutnya, perhatikan baik-baik tampilan web coba.html, ternyata ada penekanan tombol yang tidak mempengaruhi tampilan web ini. Penekanan tombol Enter, Tab dan spasi tidak mempengaruhi tampilan web. Agar penekanan tombol-tombol itu mempengaruhi tampilan web, maka kita menggunakan tag <PRE> dan tag penutup </PRE>. Tag ini adalah tag Preformated Text, yang memerintahkan browser untuk menampilkan teks sama seperti yang diketikkan dalam dokumen HTML.
Sedangkan teks yang diapit tag <!- dan -> tidak ditampilkan browser sebab tag <!- dan -> adalah tag komentar, untuk memberi catatan atau komentar pada dokumen HTML saja.
Tips-tips Dalam Membuat Homepage
Ada beberapa hal yang sebaiknya tidak dilakukan dalam mebuat homepage, antara lain sebagai berikut :
- Menuliskan web pages yang informasinya tergantung pada halaman sebelumnya atau sesudahnya dalam struktur.
- Sering menggunakan penekanan kata atau format teks seperti cetak tebal, bergaris bawah, miring, kombinasi, dan link teks yang tidak perlu.
- Menggunakan kata spesifik atau khusus untuk browser seperti click here, use the back button, cancel, dll.
- Menggunakan gambar penunjuk yang cukup banyak hanya untuk keindahan saja. Jika hal ini dilakukan akses akan menjadi lama sebab memerlukan banak memori.
- Menggunakan heading tag untuk melakukan penekanan kata.
- Melakukan link ke suatu halaman yang sama berulang-ulang.
- Pemisahan topik dilakukan tanpa adanya hubungan topik antar halaman.
Sebaiknya hal-hal berikut ini perlu diperhatikan agar homepage tampil menarik, efisien dan aksesnya cepat tanpa kendala yang berarti :
- Dokumen web atau teks informasi disajikan dengan singkat dan jelas sesuai sasaran.
- Teks informasi diorganisasi sedemikian rupa sehingga memudahkan pembaca melihat informasi yang penting.
- Layout atau tata letak tampilan dibuat sesederhana mungkin dan menarik serta konsisten untuk setiap halamannya.
- Teks informasi tidak tergantung pada informasi yang ada pada halaman sesudah atau sebelumnya.
- Ketersediaan tampilan alternatif gambar dan teks.
- Buat organisasi grup untuk informasi yang sejenis.
- Linking dibuat berdasarkan sebab akibat yang baik dengan informasi yang sejenis.
- Buatlah blok tanda atau link untuk informasi selanjutnya (contact information) di bawahnya pada setiap halaman.
- Untuk dokumen yang linear sebaiknya dibuatkan versi non hypertext dan untuk dokumen tunggal buatlah tampilannya sendiri.
Referensi :
- Desain Web ©Lab Komp SMA Kr Petra 2 Surabaya.
