HTML: Angel Way

Sekarang kita akan terjun langsung menulis HTML yaitu memasang header yang telah dibuat kemarin ke browser agar bisa dilihat lewat Internet Explorer. Angel Way, bukanlah Cara Malaikat, tapi Cara yang Angel (Bahasa Jawa, artinya Cara yang Susah) 😛 .

Oke, siapkan project khusus untuk membuat satu website. Disarankan setiap satu website memiliki satu folder sendiri sehingga memudahkan manajemen filenya. Namai folder tersebut dengan nama yang jelas. Misalnya, aku menamainya dengan nama: Menjelang Senja, karena website yang akan aku buat bertemakan senja dengan segala pernak-perniknya. Kemudian, sebaiknya gambar-gambar dimasukkan ke dalam subfolder tersendiri. Alasannya sama, untuk memudahkan manajemen file. Aku buat subfolder tersebut dengan nama images. Sehingga dengan demikian aku akan memiliki susunan folder seperti di bawah ini:

Aku akan menyebut folder menjelang senja sebagai root folder. Di folder inilah aku memasukkan segala file yang berhubungan dengan project website Menjelang Senja. Kemudian, taruh header image yang telah kita buat di bab yang lalu pada subfolder images. Dan persiapan pun selesai.

Karena ini adalah Angel Way, maka tak diperlukan software apapun kecuali teks editor seperti Notepad ([start]-[run]-ketik notepad-[enter]). Kemudian simpan file baru ini di root folder (menjelang senja) dan namai dengan ekstensi .htm atau .html. Misalnya, index.html.

Oke, siapkan diri untuk mengetik bahasa planet HTML. Kita tulis dulu headernya seperti di bawah ini:

Baris 1 dan 2 adalah document type yang memberitahu browser jenis spesifikasi HTML yang digunakan. Di sini dipakai XHTML Transitional, tipe yang menurutku paling sesuai dengan keadaan zaman saat ini. Baris ke-3 adalah tag < html > dengan atribut xml namespace yang mengikuti aturan spesifikasi XHTML dari konsorsium W3C.

Baris 3 hingga 6 adalah header file HTML. Baris 4 adalah tag meta data yang berisi segala hal mengenai informasi file, misalnya tipe isi (content type), software pembuat, nama penulis, dsb. Di sini cukup satu informasi saja, yaitu Content-Type dengan isi text/html yang memberitahu browser bahwa isi file ini adalah HTML, bukan gambar GIF, ataupun gambar JPEG.

Baris 5 adalah judul dari halaman kita. Dia akan tampil di window bar, paling pojok kiri atas (OS Windows). Sampai sini, kita telah selesai menuliskan file HTML kosong. File HTML yang baik paling tidak harus memenuhi elemen-elemen di atas.

Memasukkan Header.

Sekarang aku akan memasukkan gambar header di halaman ini. File gambar ini aku taruh di subfolder images dengan nama header.jpg. Kodenya aku sisipkan di antara tag < body > dan < /body > seperti di bawah ini:

Baris 11 dan pasangannya, baris 14, adalah tag < center > yang digunakan untuk membuat segala hal yang berada di dalam tag ini di-rata-tengah-kan oleh browser. Lalu baris 12 dan 13 adalah tag untuk memasukkan gambar tersebut. Yap, tag < img >. Tag ini tidak memiliki pasangan tag penutup, sehingga di akhir tag img ini diberi penutup / >. Atribut src adalah lokasi dari file gambar, relatif terhadap posisi file HTML. Alt adalah alternatif text yang jika gambar gagal diload oleh browser, maka teks ini yang akan ditampilkan. Width dan Height adalah ukuran panjang dan lebar dari gambar dalam ukuran piksel.

Sederhana bukan? dan inilah hasilnya (klik untuk memperbesar):

Segini dulu, jadi kesimpulannya, tag HTML yang telah kita pelajari hari ini adalah:
– !DOCTYPE
– html
– head
– meta
– title
– body
– center

Ada yang mau membantu membuatkan glosary-nya? Daftar yang berisi definisi masing-masing tag di atas, tentu saja dalam bahasa Indonesia. Referensi tag bisa diambil dari situs w3schools.com. Next, agar lebih nyaman, kita akan membuat Angel Way ini dalam cara yang lebih mudah, dengan software NVu. Sekalian kampanye FOSS  B-) .

Yang telah kita pelajari sebelum ini:
1. Di Balik Selubung Web
2. Ide dan Konsep Layout

Published
Categorized as Desain Web

By Galih Satriaji

Bookaholic, Workaholic. Chubby. That's me!

9 comments

  1. hahaha… saya ketipu.. melihat posting di atasnya yg bergaya poetic, saya kira Angel Way di sini juga rada2 model gitu… tyg a – ngel … 😀

    wah.. sipp mas.. semangat berbagi ilmunya…

  2. Angel Way, sampai sekarang aku masih suka pake ini dibanding pake editor WYSIWYG kaya` Dreamweaver. Btw tag meta http-equiv tu nanti jadi header HTTP response gak sih? Itu rekomendasi W3C juga?

  3. baru sempet mampir… *ibaratnya murid, gw membolos saat guru nerangin pelajaran 😀

    tapi jadi ngerti banget nih kalo diteranginnya model gini. dari dulu gw bertanya2 soalnya, bahasa aneh di 3 baris pertama itu apaa maksudnya. skrg paham deh.

    thanx ya lih.. semoga pahalanya ngalir terus.. ngasi ilmu ke orang banyak.. aminn 🙂

Leave a Reply to helgeduelbek Cancel reply

Your email address will not be published. Required fields are marked *