1 Sekilas Mengenai HTML Halaman di website-website yang sering anda lihat di internet pada umumnya dibuat dengan menggunakan bahasa HTML. Tidak sepert...
Halaman di website-website yang sering anda lihat di internet pada umumnya dibuat dengan menggunakan bahasa HTML. Tidak seperti bahasa lainnya, untuk membuat halaman HTML, kita tidak memerlukan program khusus. Cukup dengan bermodalkan program Notepad dari Windows atau word editor lainnya, kita dapat membuat sebuah halaman HTML. Ya benar, HTML hanya menggunakan karakter-karakter latin biasa, sama seperti yang kita gunakan sehari-hari. Karakter-karakter tersebut nantinya akan diterjemahkan oleh browser (Internet Explorer dan lainnya) menjadi sebuah objek tertentu. Struktur HTML Pada HTML ada yang disebut dengan sebuah tag. Tag adalah sebuah perintah yang diapit oleh tanda kurung siku. Tag penutup adalah tag yang menentukan batas akhir tag pertama. Mirip dengan tag yang pertama, hanya saja didalamnya ditambahkan tanda garis miring ( / ). Sebuah tag pada umumnya harus ditutup dengan tag penutup yang sejenis, tapi ada juga yang tidak harus ditutup. Contoh :
Sebuah tag harus ditutup dengan Sebuah tag tidak perlu ditutup dengan
Sekarang kita akan melihat struktur yang esensial (harus digunakan) dalam sebuah halaman HTML. Ada 3 bagian utama dalam struktur HTML : 1. Tag HTML 2. Tag Head dan Title 3. Tag Body Struktur bakuya adalah sebagai berikut : Judul Halaman Isi Halaman Kini bukalah sebuah program text editor, misalnya Notepad. Biasanya terletak di Start > Programs > Accessories. Sekarang berdasarkan struktur yang ada di atas, buatlah sebuah halaman HTML seperti di bawah ini :
Hello World! Hello World! Setelah itu pilih File > Save dan pada saat anda diminta menuliskan nama filenya, tambahkan ekstensi htm atau html setelah nama filenya. Misalkan kita save menjadi belajar.html. Jangan lupa, kalau anda tidak menambahkan .html dibelakangnya, maka browser tidak akan mengenali halaman HTML melainkan hanya menampilkan apa yang anda ketik, yaitu sebagai teks biasa. Setelah disave, bukalah browser anda, misalkan Internet Explorer. Pilih File > Open dan carilah file belajar.html ditempat anda menyimpannya tadi. Lalu pilih OK. Hasilnya kirakira akan terlihat seperti gambar di bawah ini :
Selamat, kini anda sudah tahu struktur dasar dari sebuah halaman HTML. ! Tag HTML memerintahkan browser untuk mengenali halaman ini sebagai suatu halaman HTML ! Tag Head adalah tempat dimana kita menempatkan script ataupun judul halaman HTML ! Tag Title adalah tempat dimana kita menempatkan judul halaman kita yang nantinya akan muncul di bagian atas browser (lihat gambar) ! Tag Body adalah tempat dimana kita menempatkan isi dari suatu halaman (teks, gambar, tabel, dll.) Anda dapat mencoba mengganti-ganti atau sekedar menambahkan isi dari halaman tadi dan lihatlah dimana perbedaannya.
Menggunakan Tag-Tag HTML Umum Sekarang kita coba menambahkan sedikit bumbu-bumbu ke dalam dokumen belajar.html tadi. Bukalah file tadi dengan menggunakan Notepad, ATAU pada browser yang sudah membuka file belajar.html tadi, pilihlah View > Source. Sekarang kita akan menambahkan beberapa tag baru ke dalamnya, yaitu : • , untuk membuat bentuk judul ; dimana x bernilai 1-6 • , untuk membuat garis horizontal • , untuk melanjutkan ke baris di bawah baris sebelumnya • , untuk mendefinisikan jenis font yang akan digunakan •
Membuat hyperlink ke website http://www.duniapax.org pada teks “website kami” dimana target=”_blank” menyatakan bahwa apabila link tsb di klik, maka browser akan membuka window baru. •
Memanggil gambar logopax1.gif untuk ditampilkan di browser. File gambar harus berada dalam folder/directory yang sama dengan file belajar.html. Untuk penggunaan yang tidak berada dalam folder yang sama akan dibahas nanti.
!! Gunakan tag
dan dengan efektif. Kalau kita ingin membuat suatu elemen di bawah baris yang sedang dikerjakan, kita akan memakai tag , sedangkan kalau kita mau menggunakan paragraf baru atau ingin melompat 1 baris, gunakan tag
.
Bullet/Numbering Sekarang kita akan menggunakan tag
dan
yang dapat kita gunakan untuk membuat bullet/numbering. 1. Tag
berfungsi untuk membuat kepala bullet/number. 2. Tag
berfungsi untuk membuat bullet/number dalam ruang lingkup
Contoh :
Tambahkan teks berikut pada file belajar.html
Hari dalam Seminggu
Senin
Selasa
Janji kencan
Rabu
Hasilnya akan tampak seperti bawah ini Hari dalam Seminggu 1. Senin 2. Selasa i.Janji kencan 3. Rabu Perhatikan tag
yg terdapat pada hari Selasa. Di sini ia memberitahukan kepada browser untuk menuliskan “
Janji kencan” sebagai bagian dari hari Selasa yang didefinisikan dalam “
Selasa”
Tag
dan dapat diikuti “type” yg menunjukkan jenis bullet/item yang akan digunakan. Seperti pada contoh di atas, kita memakai :
,berarti kita akan memulai penomoran mulai dari 1,2,3, dst..
,berarti kita akan memulai penomoran mulai dari A,B,C,dst.
,berarti kita akan memulai penomoran mulai dari a,b,c, dst.
,berarti kita akan memulai penomoran mulai dari i, ii, iii, dst. Kalau kita tidak mendefiniskan type nya, maka otomatis akan dibuat lingkaran kecil (bullet) pada tiap komponen
. Tag
harus ditutup dengan
sedangkan
tidak perlu ditutup dengan
Tabel Nah, sekarang kita akan belajar menggunakan tabel. Pembuatan tabel dapat dilakukan dengan menggunakan tag
,
dan
. Tabel banyak digunakan untuk membuat layout atau membantu penempatan komponenkomponen yang terdapat dalam suatu halaman HTML. Katakan saja kita ingin membuat halaman HTML seperti di bawah ini : Halo Halo Selamat datang di homepage saya Semoga anda menyukainya.
Kita tidak dapat membuat nya tanpa menggunakan tabel. Oleh karena itu kita memerlukan tabel untuk membantu merapikan tampilan halaman kita. Pembuatan tabel dimulai dengan perintah
dan ditutup dengan
. Sedangkan untuk membuat baris dan kolomnya kita menggunakan
dan
. Pemakaian
dan
juga harus ditutup dengan
dan Buatlah sebuah halaman HTML baru menggunakan Notepad seperti di bawah ini Tabel
Baris 1, kolom 1
Baris 1, kolom 2
Baris 2, kolom 1
Baris 2, kolom 2
Baris 3, kolom 1
Baris 3, kolom 2
Kemudian Save menjadi belajar2.html, dan coba buka dengan browser. Hasilnya akan menjadi halaman dengan warna latar hitam dan warna teks putih. Tabelnya juga terlihat dimana pada kedua kolom baris kedua, warna latarnya akan berwarna biru muda. Mari kita bahas tentang halaman tersebut : 1. Bagian ini menunjukkan bahwa warna latar (bgcolor) akan dibuat berwarna hitam (#FFFFFF adalah kode heksa untuk warna hitam, bisa juga memakai ‘black’) dan warna teks untuk seluruh halaman dibuat berwarna putih (#FFFFFF = warna putih). 2.
Bagian ini adalah dimana kita memulai membuat tabel. Komponen ‘width=”90%”’ menunjukkan bahwa lebar tabel yang akan kita buat adalah maksimum 90 persen dari lebar browser yang sedang kita gunakan. Bila jendela browser dikecilkan, maka tabel dan komponen di dalamnya (teks) akan otomatis menyesuaikan. 3. Tag
Bagian ini adalah hal yang harus pertama kali kita gunakan. Tag
berfungsi membuat baris baru dalam tabel. Kita harus membuat baris terlebih dahulu sebelum membuat kolom :
…
4. Tag
<- terlebih dahulu dibuat <- dibuat setelah
Bagian ini untuk membuat kolom dalam satu baris. Satu lingkup
…
menyatakan 1 buah kolom. Jadi kalau kita buat dua buah lingkup
akan ada 2 kolom dan bila 3 lingkup akan ada 3 buah kolom, dan seterusnya. !! Sama seperti tag , maka tag
,
, dan
sama-sama bisa menggunakan atribut ‘bgcolor=#xxxxxx’ untuk membuat warna latarnya menjadi berbeda. Lihat contoh di atas, yaitu penggunaan ‘bgcolor’ pada
Bagaimana kalau kita ingin mengatur perataan elemen pada tabel? Gampang. Kita cukup menambahkan atribut ‘align= ‘ dalam tag
,
dan
untuk membuat perataan sesuai yang diinginkan. Contohnya :
, berarti tabel (bukan isinya) akan dibuat rata tengah
, berarti pada baris tersebut seluruh isinya akan rata kiri, termasuk isi pada kolom-kolom yang terdapat pada baris tersebut.
, berarti pada kolom tersebut seluruh isinya akan rata kanan. Tabel secara default menggunakan border/garis pinggir. Kita dapat mengatur tebal garis pinggir tersebut melalui atribut ‘border= ’ Contoh :
, berarti garis pinggir tabel dibuat setebal 2 pixel
, berarti tabel tidak memakai garis pinggir. Hal ini banyak digunakan dalam tabel yang berfungsi untuk membantu merapikan halaman.
