Dasar-Dasar HTML
BAB I. HTML
HTML adalah singkatan dari Hypertext Markup Language, sebuah “bahasa” yang mengatur lay-out, tampilan ataupun proses sebuah halaman web yang akan ditampilkan oleh program browser seperti Microsoft Internet Explorer, Netscape Navigator, Opera, Lynx ataupun Konqueror yang berjalan di atas Linux.
Halaman-halaman, ataupun teks-teks yang sudah diformat dengan HTML akan diterjemahkan oleh browser lalu ditampilkan sesuai keinginan pembuatnya.
HTML tidak bisa dikatakan bahasa pemrograman, sebab HTML tidak memiliki ciri-ciri bahasa pemrograman seperti adanya kemampuan logika, perhitungan, fungsi dan sebagainya.
Bila anda pernah bekerja dengan WordStar, maka anda akan mengerti konsep HTML, sebab HTML menggunakan tag yaitu pasangan perintah yang mengapit teks ataupun informasi sehingga dapat ditampilkan oleh browser dengan tampilan yang baik.
Tag
Dalam HTML, hampir seluruh perintah dituliskan secara berpasangan, yaitu perintah pembuka dan perintah penutup yang disebut sebagai tag.
Sebagai contoh:
Perintah pembuka
dan diakhiri perintah penutup , akan memberikan efek tebal atau bold dalam tulisan.
Prakteknya:
alislam akan menghasilkan kata alislam dengan jenis huruf tebal.
Properti
Perlu diketahui pula bahwa semua perintah HTML mempunyai properti yang berbeda-beda.
Properti adalah perintah tambahan yang langsung ditambahkan dalam perintah utama yang punya efek khusus terhadap perintah tersebut. Properti bersifat opsional, boleh ada dan boleh tidak, namun ada beberapa properti yang harus ada agar suatu perintah dapat diterjemahkan dengan baik oleh browser.
Perintah utama dan properti dipisahkan dengan sebuah spasi sehingga browser apapun bisa mengenali mana perintah utama dan mana yang properti. Bila spasi tersebut tidak disertakan, maka perintah tadi dianggap tidak sah sehingga akan diabaikan oleh browser atau bahkan hanya dianggap teks biasa.
Struktur Halaman HTML
Bila mengacu kepada aturan baku pembuatan halaman HTML, maka setidaknya sebuah halaman HTML terdiri dari dua bagian, yaitu HEAD dan BODY, berikut adalah anatomi baku sebuah halaman HTML.
(di sini anda bisa menuliskan perintah HTML yang lain)
(di sini anda bisa menuliskan perintah HTML yang lain)
Jika anda perhatikan, maka sebuah halaman HTML terdiri dari perintah , dan . Meskipun dalam praktiknya, anda bisa saja tidak menyebutkan 3 perintah dasar ini dan langsung membuat halaman HTML sesuka anda.
Sekedar informasi, anatomi dengan menyertakan 3 perintah di atas dimaksudkan bila anda ingin membuat sebuah halaman HTML yang profesional, interaktif, dinamis, otomatis dan bisa diakses oleh Search Engine.
BAB II. HEAD
Bagian HEAD dalam sebuah halaman HTML mempunyai banyak fungsi, di antaranya untuk mendefinisikan pembuat halaman tersebut, menentukan Keywords atau kata kunci yang memudahkan Search Engine dalam pencarian informasi, meletakkan script atau program kecil yang harus disisipkan pada halaman HTML anda, atau anda sekedar ingin halaman HTML anda meng-update sendiri tanpa harus menekan tombol Refresh misalnya dan masih banyak lagi.
Properti untuk perintah
Beberapa properti untuk pengaturan adalah sebagai berikut:
dir=“” : Menentukan orientasi arah penulisan, apakah LTR (Left to Right) seperti dalam bahasa Inggris, Indonesia ataupun latin, ataukah RTL (Right to Left) seperti dalam bahasa Arab, Ibrani dan Jepang.
lang=”" : Menentukan bahasa yang digunakan, seperti “EN-US” untuk menyatakan English-United States atau “AR-SA” untuk menyatakan Arabic-Saudi Arabia. Untuk bahasa-bahasa yang lain, silahkan merujuk HTML Manual.
Perintah-perintah di dalam
Beberapa perintah yang sebaiknya hanya diletakkan di bagian HEAD adalah sebagai berikut:
: Membuat Judul halaman web yang akan ditampilkan pada baris judul pada program browser.
: Meletakkan javascript, jscript, vbscript.
Meta Tagging
Meta Tagging adalah istilah untuk tag-tag spesial yang hanya ditulis pada bagian HEAD. Aturan penulisannya adalah sebagai berikut:
Function adalah fungsi yang dipanggil untuk dijalankan pada browser tersebut. Beberapa fungsi yang sering dipakai adalah; fungsi Refresh otomatis, penentuan Keywords, Description, Author dan lain sebagainya.
Command adalah perintah yang akan dijalankan oleh browser berdasar fungsi yang ditentukan. Berikut beberapa contoh penggunaan meta tag.
Untuk Autorefresh setelah 7 detik dan langsung mengarah ke alamat http://www.web.com/
Untuk menentukan Keywords yang dijadikan acuan oleh Search Engine seperti Google agar lebih terarah dalam pencarian data. Pada contoh ini digunakan kata Islam, Allah dan Muhammad untuk membatasi pencarian.
Mendeskripsikan isi situs secara global, seperti dicontohkan di sini yaitu: “Situs ISLAMI”, yang nantinya akan dikenali oleh Search Engine dalam pencariannya.
BAB III. BODY
Bagian BODY dalam sebuah halaman HTML merupakan tempat perintah-perintah yang berhubungan dengan tampilan dan lay-out sebuah halaman HTML. Anda bisa memberi efek tebal, membuat Paragraf, mengatur ukuran font, membuat tabel, membuat formulir, menyisipkan gambar, membuat link dan masih banyak lagi.
Properti untuk perintah
Beberapa properti untuk pengaturan adalah sebagai berikut:
background=”" : Menentukan gambar background halaman, dalam hal ini berbentuk image file, untuk menentukan gambar background, isikan alamat file gambar yang diinginkan dengan format “http://alamatfile/folder/namafile.jpg” atau “C:\alamatfile\folder\namafile.jpg” atau bisa digunakan alamat non-absolut seperti “../foldergambar/namafile.jpg”. Format alamat file tergantung sistem yang digunakan, apakah berbasis Windows yang menggunakan Slash sebagai pemisah folder atau UNIX like Systems yang menggunakan Backslash sebagai pemisah folder. Kemudian format gambar yang bisa ditampilkan adalah jpg, gif dan png.
bgcolor=”" : Menentukan warna latar tabel, dengan format heksadesimal #000000 hingga #ffffff. Warna putih misalnya, diwakili oleh #ffffff, hitam oleh #000000, biru oleh #0000ff, merah oleh #ff0000. Untuk warna-warna yang lain anda bisa bereksperimen dengan mengkombinasikan 6 angka heksadesimal untuk membuat warna yang anda inginkan.
bottommargin=”" : Menentukan batas tepi di bawah halaman menggunakan satuan piksel.
dir=”" : Menentukan orientasi arah penulisan, apakah LTR (Left to Right) ataukah RTL (Right to Left).
lang=”" : Menentukan bahasa yang digunakan.
leftmargin=”" : Menentukan batas tepi di kiri halaman menggunakan satuan piksel.
onload=”" : Menjalankan script yang didefinisikan pada bagian HEAD dan meletakkannya di memori komputer ketika halaman HTML dijalankan.
onunload=”" : Menghentikan dan menghapus script yang didefinisikan pada bagian HEAD dari memori komputer ketika berpindah halaman.
rightmargin=”" : Menentukan batas tepi di kanan halaman menggunakan satuan piksel.
topmargin=”" : Menentukan batas tepi di atas halaman menggunakan satuan piksel.
BAB IV. Perintah-perintah pada bagian BODY
Sebagian besar perintah-perintah HTML harus ditulis pada bagian BODY, karena bagian ini memang dikhususkan untuk pengaturan perwajahan sebuah situs.
Pada bab ini akan dibahas satu persatu perintah-perintah tersebut sesuai dengan kategorinya.
Perintah untuk pengaturan tulisan
Mengatur tulisan dalam HTML tidaklah sulit, sebab perintahnya mudah dimengerti dan diterapkan. Berikut adalah beberapa perintah yang sering digunakan dalam pengaturan tulisan.
: Meletakkan tulisan atau kalimat di tengah halaman.
: Membuat tulisan tebal/bold.
: Membuat tulisan miring/italic.
: Membuat tulisan bergaris bawah/underline.
: Membuat tulisan dengan ukuran huruf nomor 1 (terbesar).
: Membuat tulisan dengan ukuran huruf nomor 2.
: Membuat tulisan dengan ukuran huruf nomor 3.
: Membuat tulisan dengan ukuran huruf nomor 4 (dan seterusnya sampai nomor 7).
: Berpindah baris tanpa berpindah paragraf dan tanpa memberi jarak spasi antar dua baris.
: Membuat paragraf baru dengan jarak satu spasi dari paragraf sebelumnya.
: Membuat garis vertikal.
Membuat daftar (list) dengan nomor urut
Membuat daftar atau list juga merupakan hal yang mudah. Dalam HTML, daftar/list dibagi menjadi dua, yaitu Ordered list (Daftar bernomor urut) dan Unordered List (Daftar tanpa nomor urut).
Berikut adalah perintah HTML untuk membuat Ordered List.
: Mengawali sebuah daftar.
- : Membuat baris/paragraf daftar.
: Mengakhiri sebuah daftar.
Contoh:
Untuk membuat daftar seperti di bawah ini,
Daftar menu
1. Soto Ayam
2. Gule Kambing
3. Sate
4. Nasi Rawon
Maka perintahnya adalah sebagai berikut:
Daftar menu (judul daftar)
(perintah pembuka awal daftar)
- Soto Ayam (baris isi daftar)
- Gule Kambing (baris isi daftar)
- Sate (baris isi daftar)
- Nasi Rawon (baris isi daftar)
(perintah penutup)
Kita dapat pula membuat daftar bertingkat seperti contoh di bawah ini,
Daftar menu
1. Soto
1. Soto Ayam
2. Soto Daging
2. Sate
1. Sate Ayam
2. Sate Kambing
Maka perintah HTML-nya adalah sebagai berikut,
Daftar menu (judul daftar)
(perintah pembuka awal daftar tingkat 1)
- Soto (baris daftar tingkat 1)
(perintah pembuka awal daftar tingkat 2)
- Soto Ayam (baris daftar tingkat 2)
- Soto Daging (baris daftar tingkat 2)
(perintah penutup tingkat 2)
- Sate (baris daftar tingkat 1)
(perintah pembuka awal daftar tingkat 2)
- Sate Ayam (baris daftar tingkat 2)
- Sate Kambing (baris daftar tingkat 2)
(perintah penutup tingkat 2)
(perintah penutup tingkat 1)
Perintah untuk membuat daftar berurut ini mempunyai beberapa jenis penomoran. Untuk membuatnya, isilah properti bawaan perintah
sesuai keinginan.
Berikut properti yang berlaku untuk perintah :
type=”1” : Daftar dengan nomor urut angka.
type=”A” : Daftar dengan nomor urut Huruf Kapital.
type=”a” : Daftar dengan nomor urut Huruf Kecil.
type=”I” : Daftar dengan nomor urut Angka Romawi Besar.
type=”i” : Daftar dengan nomor urut Angka Romawi Kecil.
Contoh:
akan menghasilkan sebuah daftar dengan nomor urut angka.
Membuat daftar (list) tanpa nomor urut
Perintahnya hampir mirip dengan yang bernomor urut, yaitu seperti di bawah ini.
: Mengawali sebuah daftar tanpa nomor urut.
- : Membuat baris/paragraf daftar.
: Mengakhiri sebuah daftar tanpa nomor urut.
Contoh:
Untuk membuat daftar seperti di bawah ini,
Daftar menu
Soto Ayam
Gule Kambing
Sate
Nasi Rawon
Maka perintahnya adalah sebagai berikut:
Daftar menu (judul daftar)
(perintah pembuka awal daftar)
- Soto Ayam (baris daftar)
- Gule Kambing (baris daftar)
- Sate (baris daftar)
- Nasi Rawon (baris daftar)
(perintah penutup)
Perintah untuk membuat daftar tak berurut ini mempunyai beberapa jenis simbol penandaan. Untuk membuatnya, isilah properti bawaan perintah sesuai keinginan.
Berikut properti yang berlaku untuk perintah :
type=”circle” : Daftar dengan tanda lingkaran kosong.
type=”square” : Daftar dengan tanda segi empat.
type=”disc” : Daftar dengan tanda lingkaran solid.
Contoh:
akan menghasilkan sebuah daftar dengan simbol penanda berbentuk lingkaran kosong.
LATIHAN
Sebagai latihan, buatlah sebuah halaman HTML yang akan ditampilkan oleh browser persis seperti yang tercetak di bawah ini.
WARUNG TEGAL
Pengantar
Banyak sekali kita jumpai di Jakarta, warung makan yang sering dikenal sebagai warteg, yaitu warung makan yang didirikan oleh orang-orang yang kebanyakan berasal dari daerah Tegal dan Purwokerto.
Apa Yang Tersedia
Beberapa menu yang tersedia di warteg adalah:
Makanan
Minuman
Contohnya:
1. Soto Babat
2. Nasi Ayam
3. Nasi Kari, yang terdiri dari:
1. Kari Ayam
2. Kari Daging
a. Daging Sapi
b. Daging Kerbau
Ternyata memang enak makan di warteg, murah meriah dan sesuai dengan selera.
Menampilkan file gambar
Untuk menampilkan file gambar anda dapat menggunakan perintah di bawah ini:
![]()
: Memulai peletakan file gambar dalam halaman HTML.
Namun perintah di atas tidak akan menghasilkan apa-apa sampai kita menentukan properti yang tepat.
Properti yang berlaku untuk perintah ![]()
adalah:
src=”" : Menentukan alamat file gambar yang ingin ditampilkan, adapun format gambar yang bisa ditampilkan adalah jpg, gif dan png.
alt=”" : Komentar dari gambar sebagai antisipasi apabila gambar tersebut ternyata tidak bisa ditampilkan.
border=”" : Border dari gambar yang ditampilkan yang dinyatakan dalam satuan piksel.
width=”" : Lebar gambar yang ditampilkan yang dinyatakan dalam satuan piksel.
height=”" : Tinggi gambar yang ditampilkan yang dinyatakan dalam satuan piksel.
Contoh:
Untuk menampilkan sebuah file gambar di My Document gunakan perintah berikut:
Untuk menampilkan sebuah file gambar di UNIX system gunakan perintah berikut:
Untuk menampilkan sebuah file gambar di internet gunakan perintah berikut:
Membuat Link
Salah satu kemampuan HTML adalah mampu berpindah ke halaman yang lain melalui link. Ketika kursor atau mouse pointer berada di atas sebuah link, maka gambar panah yang biasa terlihat akan berubah menjadi sebuah gambar tangan yang sedang menunjuk, dan bila dilakukan klik, maka halaman akan berpindah ke alamat yang didefinisikan dalam link tersebut.
Perintah untuk membuat link adalah sebagai berikut:
: Teks/Gambar yang diapit perintah ini akan menjadi link
Sedangkan properti-nya adalah:
href=”" : Menunjukkan alamat file HTML yang ditunjuk, bisa juga diganti dengan file-file non-HTML yang akan dieksekusi bila memang file tersebut executable, bila tidak maka file tersebut akan didownload ke dalam komputer pemakai. Link bisa juga untuk mengarahkan email ke alamat email tertentu.
Contoh:
Untuk berpindah ke halaman HTML lain, maka perintahnya adalah:
Buka File.html
Agar pemakai bisa mendownload suatu file, maka perintahnya adalah:
Download File.Zip
Mengarahkan pengguna untuk menulis email ke alamat tertentu sehingga bila terjadi klik pada link, maka link otomatis akan membuka program pengirim email seperti Outlook Express atau Eudora, maka perintahnya adalah:
Kirim Email
Membuat tabel dengan HTML
Terkadang dalam membuat situs internet, kita membutuhkan tabel-tabel untuk memberikan informasi kepada pengunjung ataupun sekedar untuk mengatur lay-out situs kita agar terlihat chic dan rapi.
Konsep tabel dalam HTML sedikit mempunyai perbedaan dengan yang kita kenal dalam dunia wordprocessing ataupun datasheet yang serba instan.
Dalam HTML baris tabel dikenal sebagai table row, sedangkan tiap sel-nya disebut table data. Tiap table row mengandung satu table data atau lebih, sementara istilah baru yang perlu dikenal adalah row spanning dan column spanning, yaitu menggabungkan satu kolom atau satu sel dalam satu baris dengan kolom/sel yang ada di bawahnya atau yang ada di sampingnya.
Perintah dasar membuat tabel
Berikut perintah dasar pembuatan tabel:
: Memulai membuat tabel.
: Membuat table row atau sebuah baris dalam tabel.
: Membuat table data atau sebuah sel dalam tabel.
Contoh:
Untuk membuat tabel dengan dua baris dan dua kolom/sel per barisnya, maka perintahnya adalah sebagai berikut:
(memulai sebuah tabel)
(memulai baris pertama)
| (memulai kolom/sel pertama dari baris pertama)
| (memulai kolom/sel kedua dari baris pertama)
(mengakhiri baris pertama)
(memulai baris kedua)
| (memulai kolom/sel pertama dari baris kedua)
| (memulai kolom/sel kedua dari baris kedua)
(mengakhiri baris kedua)
(mengakhiri sebuah tabel)
Perintah lanjutan dalam membuat tabel
Bila perintah-perintah dasar di atas dijalankan di sebuah browser maka anda tidak akan melihat apa-apa kecuali beberapa kotak yang sangat kecil sekali dan nyaris seperti beberapa titik di layar. Untuk membuat tabel yang kita buat terlihat maka harus diatur properti-nya agar sesuai dengan yang kita inginkan, misalnya kita bisa mengatur berapa lebar maksimum dari tabel tersebut, berapa tinggi tiap baris, berapa lebar tiap sel-nya, berapa lebar border-nya, berapa jarak antar sel-nya, warnanya, background-nya dan lain sebagainya.
Contoh:
Untuk membuat tabel dengan lebar 650 piksel misalnya, maka perintah yang diperlukan adalah:
(di baris ini anda bisa letakkan perintah pembuatan baris, kolom dan sebagainya).
Jelaslah sudah, untuk membuat tabel dengan lebar 650 piksel, kita cukup menambahkan properti width=”650″.
Properti dasar untuk perintah
align=”" : Menentukan perataan tabel, apakah center, left atau right.
background=”" : Menentukan background tabel, dalam hal ini berbentuk image file. Isikan alamat file gambar yang diinginkan sebagai background (format jpg, gif dan png).
bgcolor=”" : Menentukan warna latar belakang tabel, dengan format heksadesimal #000000 hingga #ffffff.
border=”" : Menentukan lebar garis tepi sebuah tabel yang dinyatakan dalam satuan piksel. Semakin besar piksel yang dimasukkan, semakin lebar garis tepi tabel tersebut.
bordercolor=”" : Menentukan warna border dari tabel, yang dinyatakan dengan format heksadesimal #000000 hingga #ffffff.
cellpadding=”" : Menentukan jarak teks/gambar dalam sebuah sel dengan tepi sel tersebut yang dinyatakan dalam satuan piksel.
cellspacing=”" : Menentukan jarak antar sel yang dinyatakan dalam satuan piksel.
dir=”" : Menentukan orientasi arah penulisan, apakah LTR (Left to Right) ataukah RTL (Right to Left).
lang=”" : Menentukan bahasa yang digunakan dalam tabel.
height=”" : Menentukan tinggi tabel yang dinyatakan dalam satuan piksel.
width=”" : Menentukan lebar tabel yang dinyatakan dalam satuan piksel.
Properti dasar untuk perintah
align=”" : Menentukan perataan table row, apakah center, left, right atau justify.
bgcolor=”" : Menentukan warna latar dari table row, yang dinyatakan dengan format heksadesimal #000000 hingga #ffffff.
bordercolor=”" : Menentukan warna border dari table row, yang dinyatakan dengan format heksadesimal #000000 hingga #ffffff.
dir=”" : Menentukan orientasi arah penulisan, apakah LTR (Left to Right) ataukah RTL (Right to Left).
lang=”" : Menentukan bahasa yang digunakan dalam table row.
valign=”" : Menentukan vertical align, yaitu perataan secara vertikal dari tiap obyek yang ada dalam table row tersebut. Opsinya adalah: bottom, middle, top dan baseline.
Properti dasar untuk perintah
align=”" : Menentukan perataan table data, apakah center, left, right atau justify.
background=”" : Menentukan background dari table data, dalam hal ini berbentuk image file, untuk menentukannya isikan alamat file gambar yang diinginkan (format jpg, gif atau png).
bgcolor=”" : Menentukan warna latar belakang dari table data, yang dinyatakan dengan format heksadesimal #000000 hingga #ffffff.
bordercolor=”" : Menentukan warna border dari table data, yang dinyatakan dengan format heksadesimal #000000 hingga #ffffff.
colspan=”" : Menggabungkan satu atau beberapa sel sekaligus yang berada dalam satu baris, dinyatakan dengan angka desimal yang menunjukkan berapa banyak sel yang akan digabungkan secara horisontal.
rowspan=”" : Menggabungkan satu atau beberapa sel sekaligus yang berada pada baris-baris yang berbeda namun berada pada satu kolom, dinyatakan dengan angka desimal yang menunjukkan berapa banyak sel yang akan digabungkan secara vertikal.
dir=”" : Menentukan orientasi arah penulisan, apakah LTR (Left to Right) ataukah RTL (Right to Left).
lang=”" : Menentukan bahasa yang digunakan dalam table data.
valign=”" : Menentukan vertical align, yaitu perataan secara vertikal dari tiap obyek yang ada dalam table data tersebut. Opsinya adalah: bottom, middle, top dan baseline.
height=”" : Menentukan tinggi sel yang dinyatakan dalam satuan piksel.
width=”" : Menentukan lebar sel yang dinyatakan dalam satuan piksel.
