MENGENAL
PEMROGRAMAN HTML
Saat ini sudah hadir banyak software yang memungkinkan Anda
membuat halaman web tanpa mengenal HTML. Namun, walaupun
Anda menggunakan software instan tersebut, sebenarnya bahasa
pemrograman html tetap perlu Anda ketahui karena biasanya
software instan tersebut tetap memerlukan editing kode html secara
manual karena keterbatasan yang dimilikinya.
HTML adalah singkatan dari hypertext markup language. Bahasa ini
terdiri atas tag dan aturan-aturan yang memungkinkan Anda membuat
dokumen hypertext. Halaman web adalah dokumen hypertext.
Jika Anda melihat halaman-halaman web di internet, mungkin Anda
akan berpikir bahwa untuk membuat halaman web dengan tampilan
seperti itu memerlukan software pengolah kata atau software lain
yang canggih dan khusus. Padahal halaman web yang paling dasar
dapat dibuat hanya dengan menggunakan software editor teks saja.
Bahkan editor teks sederhana seperti Notepad di Windows dapat
dipakai untuk membuat webpage. Namun, Notepad juga belum
optimal untuk editing karena tak memiliki fasilitas syntax highlight.
Sehingga disarankan, Anda menggunakan atau menginstal software
editing khusus untuk HTML. Di Windows Anda dapat memakai
Notepad++ sementara di Linux Anda dapat memakai Bluefish.
Bluefish juga terdapat untuk versi Windows dengan menggunakan
emulator.
Menyiapkan Editor Teks
Memang menggunakan editor teks standar untuk koding HTML
sangat memungkinkan. Namun, kalau ada editor teks yang fiturnya
sangat banyak dan cocok untuk pemrograman, serta gratis lagi!,
ngapain pilih yang standar. Software yang akan dipakai untuk editor
teks ini adalah Notepad++, sebuah software editor teks dengan
banyak fitur, seperti:
• Syntax Highlighting.
• Kode-kode dengan satu tag pembuka dan penutup dapat
dilipat.
• Mendukung multidokumen, sehingga sekali membuka Anda
dapat mengedit lebih dari satu dokumen.
• Ada fasilitas Search dan Replace untuk mencari dan mengganti
kode.
• Ada Zoom in dan Zoom out.
• Mendukung drag and drop.
• Bookmark.
• Bisa menggunakan makro.
Editor teks Notepad++ tersedia dalam berbagai versi, yaitu versi
installer dan versi portabel. Versi portabel memiliki keunggulan yaitu
bisa dijalankan dari usb flash disk tanpa harus menginstal.
Notepad++ dapat diambil dari portableapps.com atau dari bonus CD
buku ini. Setelah itu harus diinstal dengan cara seperti berikut:
1. Klik 2x pada file installer.
2. Saat muncul Please select a language. Pilih bahasa yang digunakan
untuk instalasi.
3. Ada jendela yang menampilkan wisaya/wizard untuk melakukan
instalasi secara portabel. Klik Lanjut saja di jendela pertama.
4. Jendela kedua memungkinkan Anda memilih lokasi instalasi.
Karena aplikasi notepad++ ini adalah versi portabel, Anda bisa
meletakkan file ini di sembarang tempat, termasuk di peranti
portabel seperit flash disk atau kartu mmc/sdcard. Klik Install.
5. Maka file-file dari notepad++ akan diekstrak dan diletakkan ke
folder yang barusan ditentukan. Saat proses instalasi berlangsung,
terlihat tampilan seperti berikut ini.
6. Setelah instalasi selesai, klik Selesai saat muncul jendela
Menutup Instalasi Program Notepad++ Portable.
7. Untuk menyimpan dokumen teks di notepad++ menjadi dokumen
HTML adalah dengan mengklik CTRL+S kemudian memilih
save as type sebagai Hypertext markup language file.
8. Baru setelah itu nama file dimasukkan di Filename. Klik Save.
Dasar HTML
Langkah pertama untuk belajar HTML guna membuat webpage
adalah menentukan editor teks yang digunakan untuk mengetikkan
kode HTML. Dan itu sudah Anda lakukan sebelumnya, di mana
penulis mencontohkan dengan Notepad++.
Sekarang Anda akan belajar dasar-dasar HTML dan akan langsung
belajar sambil praktek. Ini adalah dasar-dasarnya, di bagian belakang
bab ini akan dijelaskan lebih detail tentang tag-tag tertentu.
Apa Itu Tag HTML
Sebenarnya bahasa HTML untuk membuat halaman web sangat
mudah untuk dipelajari. Untuk membuat halaman HTML, Anda cuma
perlu mengetikkan teks, kemudian memasukkan tag-tag khusus di
mana tag ini akan memengaruhi tampilan teks yang ada di antaranya.
Jadi secara garis besar, format untuk menuliskan tag HTML adalah:
<TAG>Teks yang akan dipengaruhi oleh tag</TAG>
Dari format di atas, Anda dapat melihat bahwa semua tag HTML ada
2 jenis, yaitu tag pembuka dan tag penutup. Perbedaan tag pembuka
dan tag penutup adalah adanya penambahan karakter “/” di tag
penutup sebelah nama tag tersebut.
Misalnya untuk tag <title> akan ditutup oleh tag </title>. Jadi, seperti
Anda perhatikan, HTML memformat teks dengan cara mengapit teks
tersebut dengan awalan tag pembuka dan akhiran tag penutup.
HTML sebenarnya cuma terdiri atas tag-tag seperti ini. Jadi, apa
yang harus Anda lakukan sebagai webmaster adalah dengan
mengutak-atik tag ini dan menerapkannya pada tempat yang seharusnya
agar Anda mendapatkan tampilan hasil akhir halaman web
sesuai dengan keinginan Anda.
Mendefinisikan Struktur Halaman
Dari sekian banyak tag yang ada. Tag-tag yang wajib ada di setiap
webpage adalah tag yang mendefinisikan struktur halaman. Tag ini
wajib hukumnya ada di setiap halaman web. Untuk mendefinisikan
struktur dokumen HTML, bagian awal dari semua kode harus diawali
dengan kode <html> dan kemudian ditutup dengan kode </html>.
Jadi, semua kode di antara tag ini-lah yang dianggap sebagai
dokumen HTML. Formatnya seperti berikut:
<html>
Semua kode di sini, akan dianggap dokumen HTML
</html>
Di dalam tag <html> tersebut yang merupakan dokumen HTML juga
masih dibagi menjadi 2 tag lagi. Tag pertama adalah <head> dan
fungsinya sebagai tempat untuk memperkenalkan halaman HTML
tersebut. Jadi, sekarang dokumen HTML Anda menjadi seperti berikut:
<html>
<head>
Ini informasi mengenai halaman web
</head>
</html>
Setelah head, bagian kedua adalah <body>. Di bagian inilah, Anda
akan meletakkan teks dan berbagai hiasan serta file multimedia di
halaman web. Tag <body> ini diletakkan di bawah penutup tag
<head>.
<html>
<head>
Ini head
</head>
<body>
Semua teks body diisikan di sini
</body>
</html>
Mudah bukan, struktur halaman HTML memang sangat simple.
Bahkan Anda yang baru belajar sekalipun akan langsung mudah
mempraktekkannya. Anda akan memelajarinya di subbab lain di bab
ini. Subbab sekarang masih pendahuluan saja.
Menambahkan Title
Title adalah judul halaman web. Judul ini berbeda dengan nama file
HTML yang nanti dihasilkan. Karena nama file akan Anda buat saat
menyimpan dokumen menggunakan editor teks, sementara title
akan diisikan di dalam tag di kode HTML-nya.
Untuk mendefinisikan title di dokumen HTML, tag yang dipakai
adalah tag <title>. Misalnya untuk membuat judul “Belajar HTML
yuuk!” maka Anda tinggal membuat kode berikut:
<title> Belajar HTML yuuk!</title>
Nah, tag <title> ini harus diletakkan di dalam tag <head> sehingga
misalnya Anda akan membuat halaman kosong namun dengan judul
di atas, maka tampilannya terlihat seperti berikut:
<html>
<head>
<title> Belajar HTML yuuk! </title>
</head>
<body>
</body>
</html>
Karena di tag <body> masih kosong, maka halaman ini tidak akan
terlihat di browser. Yang terlihat hanya teks di tag saja. Berikut ini
tampilannya jika Anda sudah menyimpan dokumen ke dalam format
HTML.
Menambahkan Teks ke Body
Setelah title dari webpage dibuat, barulah Anda dapat memasukkan
konten dari halaman web. Konten ini diletakkan di antara tag <body>
dan
</body>.
<html>
<head>
<title> Belajar HTML yuuk! </title>
</head>
<body>
Teks ini adalah isi dari halaman web.
Dengan menggunakan tag body, semua apa yang Anda ingin tampilkan
akan terlihat di browser.
</body>
</html>
Dari gambar di samping, terlihat bahwa tampilan teks terus disambung
walaupun di kodenya Anda sudah memisahkan teks menggunakan
Enter (baris baru). Untuk membuat paragraf, Anda bisa menggunakan
tag <p>.
<html>
<head>
<title> Belajar HTML yuuk! </title>
</head>
<body>
<p>Teks ini adalah isi dari halaman web. </p>
<p>Dengan menggunakan tag body, semua apa yang Anda ingin
tampilkan akan terlihat di browser. </p>
</body>
</html>
Menggunakan Heading
Heading adalah bagian dari halaman yang memungkinkan dipakai
untuk outline. Heading yang digunakan antara heading 1 sampai
heading 6. Heading dibuat menggunakan tag <h1> sampai <h6>.
Berikut ini contoh penggunaan heading. Walaupun sebenarnya Anda
bisa membuat layout yang baik tanpa memakai heading, namun
heading ini nanti juga penting ditinjau dari SEO (search engine
optimization). Contoh kode pembuatan halaman untuk heading
adalah:
<html>
<head>
<title>Heading, outline untuk halaman web</TITLE>
</head>
<body>
<h1>1. Mengenal Komputer</h1>
Komputer adalah komponen yang sangat penting peranannya
<h2>1.1 Komponen Komputer</h2>
Ada banyak komponen komputer
<h3>1.1.1 Penyimpan Data</h3>
Ada banyak komponen bisa dikategorikan sebagai storage device.
<h4>1.1.1.1 Hard Drive</h4>
Hard Drive adalah komponen utama penyimpan data yang memakai
platter
</body>
</html>
Membuat Link
Sebagai seorang netter, tentu Anda tahu bahwa halaman web
umumnya selalu memiliki link. Link ini berguna untuk menuju ke
tempat lainnya di belantara WWW. Apa sebenarnya kode untuk
membuat link itu?
Kode untuk membuat link ternyata amat mudah. Anda tinggal
menggunakan kode <a> untuk membuat link. Tapi penggunaan tag
ini lebih kompleks daripada pembuatan tag lainnya karena Anda
harus menentukan url yang akan dituju. Berikut ini format pembuatan
link:
<a href="alamat url">Teks tertentu</a>
URL di sini digunakan, misalnya:
http://www.yahoo.com
atau
http://www.detiknews.com/read/2009/10/06/093844/1216011/10/jual-
1-tokek-bisa-beli-honda-jazz-nabung-ratusan-juta/
Berikut ini contoh kode simpel untuk memperkenalkan Anda untuk
membuat link. Nantinya, Anda akan belajar lebih detail di subbab
berikutnya:
<html>
<head>
<title>Contoh pembuatan link</title>
</head>
<body>
Gile, harga tokek meroket. Lihat aja sumber di <a
HREF="http://www.detiknews.com/read/2009/10/06/093844/1216011/10
/jual-1-tokek-bisa-beli-honda-jazz-nabung-ratusan-juta">
Detiknews ini</a>.
</body>
</html>
Menambahkan Gambar
Mayoritas halaman web selalu memiliki gambar di dalamnya.
Dengan gambar, halaman bisa terlihat berwarna dan tampilannya
lebih bagus. Jika tidak ada gambar, halaman bisa terlihat membosankan.
Untuk menambahkan gambar, kode HTML pun mendukungnya.
Pemasukan gambar diakomodasi oleh tag <img>. Berikut ini format
standar untuk tag <IMG> untuk memasukkan gambar:
<img src="lokasi_gambar"/>
Misalnya Anda ingin memasukkan gambar dengan nama file
“gambar.jpg” dengan lokasi ada di satu folder dari lokasi tempat file
.html Anda berada. Maka Anda tinggal memasukkan kode:
<img src="gambar.jpg"/>
Contohnya adalah kode berikut:
<html>
<head>
<title>Contoh Pemasukan Gambar</title>
</head>
<body>
<h1>Gambar Kepulauan indonesia</h1>
<img src="gambar.jpg"/>
</body>
</html>
Menambahkan Komentar
Komentar di HTML cukup mudah dibuat, yaitu tinggal memberikan
pembuka <!-- dan penutup -->. Sangat simpel bukan. Teks-teks yang
ada di dalam komentar ini tidak akan ditampilkan di halaman
browser.
Memformat Konten
Untuk memformat konten, ada beberapa tag yang perlu Anda
pahami. Tag-tag ini terus berkembang seiring dengan perkembangan
teknologi browser yang memungkinkan berbagai format baru diperkenalkan
untuk mendapatkan hasil tampilan dan efek yang lebih
banyak.
Mengatur Style Teks
Pertama kita akan belajar mengenai bagaimana membuat style dari
text yang memungkinkan Anda membuat efek tebal, garis miring,
garis bawah, monospace, dan coret. Efek-efek ini hampir semuanya
diakomodasi oleh semua browser modern.
1. Untuk membuat efek tebal, digunakan tag <b> yang merupakan
singkatan dari bold.
2. Untuk membuat efek garis miring, digunakan tag <i> yang
merupakan singkatan dari italic.
3. Untuk membuat garis bawah, digunakan tag <u> yang merupakan
singkatan dari underline.
4. Untuk membuat efek monospace, digunakan tag <tt> yang
merupakan singkatan dari typewriter text.
5. Untuk membuat efek coret, digunakan tag <strike>, artinya
coret.
Sebenarnya ada beberapa efek style lain dari pemrograman HTML,
namun apakah style tersebut dikenali atau tidak, akan tergantung
pada browser-nya. Namun browser modern umumnya mendukung 5
efek dasar di atas.
<html>
<head>
<title>Pemformatan Style Teks</title>
</head>
<body>
<h1> Puisiku</h1>
<p>
<b>walau aku tak pergi </b>
</p>
<p>
<i>tapi jiwaku yang kembali</i>
</p>
<p>
<u>ku tak pulang bukan keinginan</u>
</p>
<p>
<tt>tapi keterbatasan dan kelemahan</tt>
</p>
<p>
<strike>adakalanya kenyataan berbeda dengan keinginan</strike>
</p>
diambil dari:puisicintaku.wordpress.com
</body>
</html>
Apabila dilihat di browser, terlihat tampilan seperti berikut ini.
Untuk mengombinasikan format-format teks di atas, Anda tinggal
meletakkan tag-tag tersebut pada teks yang diinginkan. Misalnya
untuk membuat format garis miring, tebal dan coret secara bersamaan,
Anda dapat menggunakan format berikut:
<b><i><strike>Tulisan ini mengalami multi format
</strike></i></b>
Selain 5 format dasar di atas, ada juga beberapa format tambahan
yang masing-masing fungsinya berbeda. Yang pertama adalah <pre>
di mana fungsinya untuk menghandel pemformatan seperti spasi,
tab, dan enter di mana sebelumnya tidak diakomodasi oleh browser.
Berikut ini contoh ilustrasi penggunaan tag <pre> yang merupakan
singkatan dari preformatting.
<html>
<head>
<title>Pemformatan Style Teks Preformatting</title>
</head>
<body>
<h1>Contoh sebelum Pre</h1>
Ini baris pertama
Ini baris kedua
</body>
</html>
Di gambar di atas, walaupun di source code, tulisan “Ini baris
pertama” berbeda baris dengan “Ini baris kedua”. Namun di browser,
terlihat kedua baris tersebut digabung. Itu karena tidak ada pemformatan
<pre>.
Jika diberi <pre>, tampilan akan seperti tampilan aslinya di kode
sumbernya. Jadi, jika ada tab atau enter, akan diterapkan. Berikut ini
kode jika di bagian body terlihat diberi kode <pre>.
<html>
<head>
<title>Pemformatan Style Teks Preformatting</title>
</head>
<body>
<h1>Contoh sebelum Pre</h1>
<pre>
Ini baris pertama
Ini baris kedua
</pre>
</body>
</html>
Setelah menggunakan pre, tampilan pemformatan akan menjadi
sesuai dengan di source code-nya. Hanya saja, terlihat bentuk tulisan
menjadi seperti tulisan monospace.
Berpindah Baris
Untuk membuat tampilan pindah baris, Anda bisa menggunakan
break. Tag break ini membuat hasil style teks masih bagus, tidak
seperti <pre> yang membuat tulisan seperti monospace.
Tag untuk memindahkan teks ke baris berikutnya adalah tag <br/>.
Tulisan br adalah singkatan dari break atau yang dimaksud adalah
line break. Apa perbedaan break dengan tag <p> untuk pembuatan
paragraf?
Jawabnya adalah paragraf akan selalu memiliki jarak dengan paragraf
di bawahnya. Adapun pemindahan baris dengan break tidak
memberikan jarak dengan bawahnya. Jadi dengan break, tulisan
teks masih akan dianggap satu paragraf.
Berikut ini contoh sebelum adanya break dan hanya menggunakan
paragraf.
<html>
<head>
<title>Sebelum digunakan Break</title>
</head>
<body>
<h1>Sebelum Break</h1>
<p>
Suatu waktu di suatu masa
tersebutlah kisah seorang dara
</p>
<p>
Dara elok berparas rembulan
disayang dimanja oleh Sang Raja
</p>
<p>
Dara cantik sudah remaja
42
tibalah waktu mencari pendamping
</p>
</body>
</html>
Adapun berikut ini merupakan kode setelah di dalam paragraf diberi
tag <br/> untuk memisahkan baris. Dari tampilan baru ini, Anda juga
akan dapat melihat perbedaan antara tag <p> dan tag <br>.
<html>
<head>
<title>Setelah digunakan Break</title>
</head>
<body>
<h1>Setelah Break</h1>
<p>
Suatu waktu di suatu masa
<br/>
tersebutlah kisah seorang dara
</p>
<p>
Dara elok berparas rembulan
<br/>
disayang dimanja oleh Sang Raja
</p>
<p>
Dara cantik sudah remaja
<br/>
tibalah waktu mencari pendamping
</p>
</body>
</html>
Memasukkan Garis Horizontal
Garis horizontal adalah garis yang membujur secara horizontal di
halaman web. Ini dapat dimasukkan menggunakan tag <hr/> di kode
Anda. HR ini adalah singkatan dari horizontal ruler. Garis horizontal
ini adalah salah satu teknik yang bisa dipakai untuk memisahkan
atau mempartisi konten halaman web Anda.
Langsung saja, berikut ini contoh kode untuk memasukkan garis
horizontal:
<html>
<head>
<title>Horizontal Line</title>
</head>
<body>
<h1>Puisi dengan HR</h1>
<hr/>
hidup ini sesungguhnya mudah dan sederhana jika anda tidak
banyak tuntutan.
karena sesungguhnya hidup ini penuh dengan kebahagiaan
jika anda tak dikuasai oleh ilusi,ambisi dan keakuan
<hr/>
</body>
</html>
Jika dibuka di browser, tampilannya terlihat seperti berikut. Ada
bagian horizontal ruler di atas dan bawah teks.
Membuat Aneka Macam List
Sering kali di sebuah website, diperlukan pembuatan daftar atau list.
Daftar ini ada berbagai macam variasinya di pemrograman HTML.
Yaitu ordered list, unordered list dan definition list.
Untuk membuat daftar berurutan, Anda perlu 2 kode:
• Semua list dibuka dengan tag <ol> dan ditutup dengan tag
</ol>. Tag OL ini adalah singkatan dari ordered list.
• Tiap item dari list yang ada dibuka dengan tag <li> dan
ditutup dengan tag </li>. LI ini adalah singkatan dari list item.
Setelah list bernomor sebelumnya, Anda dapat juga bisa membuat
jenis yang kedua, yaitu list bullet. Yaitu berjenis unorderd list. Nama
bullet ini disebabkan browser menampilkan ikon bulat-bulat di sebelah
kiri tiap list item yang dimasukkan. Kodenya hampir mirip
dengan ordered list, di mana:
• Semua list dibuka dengan tag <ul> dan ditutup dengan tag
</ul>. Tag UL ini adalah singkatan dari unordered list.
• Tiap item dari list dibuka dengan tag <li> dan ditutup dengan
tag </li>.
Berikut ini kode yang mengandung tipe ordered list dan unordered
list:
<head>
<title>Unordered dan Orderd List</title>
</head>
<body>
<h1>Daftar Komponen PC</h1>
<ul>
<li>Case</li>
<li>Mother Board </li>
<li>CPU (Central Processing Unit) </li>
<li>RAM (Random Access Memory)</li>
<li>Hard Disk Drive</li>
<li>Video Display Adapter</li>
<li>Monitor </li>
<li>Input Device</li>
<li>Printer</li>
</ul>
<h1> Cara merakit PC</h1>
<ol>
<li>Pasang Prosesor ke Motherboard</li>
<li>Pasang Memory ke Motherboard</li>
<li>Pasang Motherboard ke Casing</li>
<li>Pasang Powersupply dan Kabelnya</li>
<li>Pasang kabel controller depan</li>
<li>Pasang hard drive dan drive optik</li>
<li>Oke, selesai</li>
</ol>
</body>
</html>
Tipe list ketiga adalah definition list. Tipe ini fungsinya memformat
teks dalam bentuk seperti kamus, sehingga Anda dapat menuliskan
kata dan mendefinisikan artinya. Jadi tipe ini memiliki 2 bagian, yaitu
istilah dan arti istilah tersebut. Namun tag-nya ada tiga, yaitu:
• Kata yang akan dijelaskan menggunakan tag <dt> yang merupakan
singkatan dari definition term.
• Kata penjelasannya menggunakan tag <dd> yang artinya
definition description.
• Semua tag ini diawali oleh tag <dl> yang merupakan singkatan
dari definition list.
Contoh kode HTML yang menampilkan definition list ini adalah:
<head>
<title>Definition List</title>
</head>
<body>
<h1> Definisi Komponen PC</h1>
<dl>
<dt>Case </dt>
<dd>Tempat untuk menyimpan semua komponen komputer</dd>
<dt>Mother Board</dt>
<dd>Tempat untuk menancapkan semua komponen dan
perkabelan</dd>
<dt>CPU (Central Processing Unit)</dt>
<dd> Otaknya komputer</dd>
<dt>RAM (Random Access Memory) </dt>
<dd>Tempat penyimpanan data sementara</dd>
<dt>Hard Disk Drive</dt>
<dd>Tempat penyimpanan data permanen</dd>
<dt>Video Display Adapter </dt>
<dd>Tempat me-render gambar</dd>
<dt>Monitor</dt>
<dd>Tempat menampilkan gambar</dd>
<dt>Input Device</dt>
<dd>Tempat memasukkan masukan ke komputer</dd>
</dl>
</body>
</html>
List-list di atas dapat juga dikombinasikan. Caranya sama seperti
ketika meng-combo-kan style pada teks. Jadi, Anda hanya perlu
memainkan peletakan tag di dalam tag list lainnya.
<dl>
<dt>Komponen-komponen komputer yang penting:</dt>
<dd>
List-nya adalah seperti berikut:
<ul>
<li>Monitor</li>
<li>Sistem operasi</li>
<li>CPU</li>
</ul>
</dd>
</dl>
Jika dilihat di browser, tampilan unordered list akan ada di dalam
bagian definition description. Karena tag <ul> ada di dalam tag <dd>.
Membuat Link Lanjutan
Di sub-subbab 2.2.6, Anda sudah belajar membuat link. Sebenarnya
pemformatan link ada beberapa varisai. Pertama adalah tipe link
internal. Ini merupakan tipe link di mana halaman yang mengandung
link dan halaman yang dituju terletak pada satu domain dan letaknya
bisa direlatifkan.
Misalnya Anda punya 2 halaman:
http://www.domain-anda.co.cc/index.html
dan Anda ingin membuat link dari halaman index.html di atas untuk
menuju ke:
http://www.domain-anda.co.cc/bukutamu.html
Dari URL-nya, kedua halaman tersebut terletak di satu folder. Ini
memungkinkan Anda membuat email dengan menentukan alamat
relatif dari halaman kedua melalui halaman pertama. Halaman kedua
bukutamu.html tersebut dapat dispesifikasikan lokasinya dengan
menggunakan nama file-nya saja, karena lokasinya satu folder. Jadi,
Anda bisa menggunakan kode berikut:
Ayo isi buku tamu di <a href="bukutamu.html">Buku tamu gw</A>
Jenis lain adalah link internal. Untuk membuat link internal, Anda
harus membuat dahulu anchor di dalam website Anda. Tempat yang
di-anchor ini nanti dapat diacu dengan link. Jadi, anchor fungsinya
adalah “menandai tempat” sehingga bisa diacu oleh link.
Misalnya Anda ingin memberi nama di bagian tertentu di webpage
dengan nama “iklan”. Maka Anda membuat nama anchor seperti
berikut:
<a name="iklan">Kotak iklan</a>
Maka link ke kotak iklan tersebut dapat dibuat dari halaman yang
sama (misalnya dalam bentuk daftar isi halaman tersebut), dengan
menggunakan kode HTML seperti berikut:
<a href="#iklan">Kotak Iklan</a>
Jika link itu dibuat dari halaman lain, Anda bisa menggunakan kode
HTML seperti berikut:
<a href="http://www.domainanda.
co.cc/file_tertentu.htm#iklan">Lihat kotak iklannya di
sini</a>
Membuat Link Email
Sering kali Anda perlu untuk membuat link yang memungkinkan
user dapat langsung mengklik untuk mengirimkan email ke account
email Anda. Ini bisa juga langsung diakomodasi oleh HTML. Namun
hati-hati, teknik ini juga bisa mendorong robot dari spammer untuk
menuju ke website Anda. Karena itu jangan gunakan kecuali jika
terpaksa.
Untuk membuat link langsung ke email, format kode yang dapat
Anda gunakan adalah seperti berikut:
<a href="mailto:alamatemail@provider.com">Klik untuk kirim email
ke saya</A>
Implementasinya tinggal Anda mengklik link tersebut, maka terbuka
software mail client Anda, seperti Outlook atau Thunderbird dan
kemudian Anda bisa mengirim email.
Menggunakan Gambar di Halaman
Di sub-subbab 2.2.7 sebelumnya, Anda sudah mengetahui bahwa
memasukkan gambar dapat diakomodasi dengan kode berikut:
<img src="nama_file_gambar">
Kode src di atas adalah singkatan dari source, sekarang kita akan
belajar beberapa utak-atik sederhana tentang gambar di halaman
web
Mengatur Alignment Teks dan Gambar
Dalam prakteknya, gambar sering kali disandingkan dengan teks.
Untuk itu Anda perlu mengatur bagaimana alignment teks terhadap
gambar. Caranya dengan menambahkan tag <align> di dalam tag
<img>. Format kodenya seperti berikut:
<img src="nama_file_gambar" align=top|middle|bottom>
Maksud tulisan top|middle|bottom adalah Anda bisa menentukan
apakah alignment akan top (atas), middle (tengah) atau bottom
(bawah). Langsung saja, berikut ini contoh alignment teks. Beserta
tampilannya jika dilihat di browser.
<html>
<head>
<title>Aligning Text dan Gambar</title>
</head>
<body>
<h1> Contoh Alignment Teks dan Gambar </h1>
<p>
<img src="makanan.jpg" align=top />Makanan yang enak sekali.
</p>
<P>
<img src="makanan.jpg" align=middle />Makanan tuna
mentah.</p>
<p>
<img src="makanan.jpg" align=bottom />Dimasak model
sushi.</p>
</body>
</html>
Memberikan Teks Alternatif
Di awal-awal kemunculan bahasa HTML, tidak semua browser mampu
menampilkan gambar. Karena itu bahasa HTML mengakomodasi
teks alternatif yang memungkinkan browser yang tidak dapat menampilkan
gambar tersebut untuk menampilkan teks.
Sekarang walaupun hampir semua browser mampu menampilkan
gambar, namun teks alternatif ini juga masih tetap berguna. Karena
diperlukan dalam kampanye SEO (search engine optimization). Alt
ini biasanya diisi dengan kata-kata kunci berkaitan dengan gambar
yang ditampilkan.
Formatnya seperti berikut:
<img src="rumah.jpg" alt="gambar rumah idamanku, rumah,
properti">
Jika di browser dibuka, maka tulisan alternatif ini terlihat di kotak
gambar bila seandainya gambar gagal dibuka. Dan jika pointer
mouse sedang berada di atas (hover) pada gambar.
Membuat Link Gambar
Gambar memang multifungsi. Tidak cuma sebagai media untuk
mempercantik dan menghias halaman serta menambah ilustrasi di
halaman. Namun juga bisa dipakai untuk membuat link. Link yang
berupa gambar akan lebih menarik pengunjung. Terutama jika
gambarnya menarik dan senada dengan informasi yang akan
ditampilkan pada gambar.
Tekniknya sebenarnya simpel. Hanya merupakan gabungan dari tag
<a> dan di tengahnya ada tag <img> untuk menampilkan gambar.
Jadinya gambar menjadi link. Formatnya seperti berikut:
<a href="url_dari_link"><img src="file_gambar"></a>
Contohnya kode berikut:
<html>
<head>
<title>link dengan gambar</title>
</head>
<body>
<h1> klik pada gambar untuk menuju halaman lain </h1>
<a href="http://detikfood.com"><img src="makanan.jpg" />
</a>
</body>
</html>
Membuat Tabel
Tabel adalah komponen yang cukup penting di halaman web. Selain
untuk membuat tabel untuk menampilkan data, tabel di sini juga
penting untuk me-layout halaman. Misalnya saat menampilkan form
untuk menerima input dari pengguna.
Jadi, fungsinya yang secara langsung memang tidak terlalu penting
(seperti membuat tabel dalam arti eksplisit), tapi karena tabel mampu
digunakan untuk membuat tampilan form menjadi teratur, maka
tabel ini akan sering sekali ditemui dalam membuat halaman web.
Untuk membuat tabel, tag pembungkusnya adalah tag <table>. Di
tabel, ada 2 istilah yang perlu diperhatikan, yaitu row (artinya baris)
yang dibuat dengan tag <tr>. Dan tiap baris ini akan terdiri atas selsel
data/table data yang dibuat dengan tag <td>.
Dan sel-sel di tabel ini kemudian dapat diisikan dengan berbagai
macam data, seperti teks, gambar, list, paragraf, form, ruler, bahkan
bisa dimasuki lagi tabel di dalamnya. Untuk form, Anda akan belajar
di bagian PHP di bab selanjutnya karena penggunaan form ini paling
banyak untuk pemrograman server-side.
Berikut ini contoh kode untuk membuat tabel di HTML:
<html>
<head>
<title>tabel di html</title>
</head>
<body>
<h1> tabel, bagian penting dari kode html </h1>
<table border="1">
<tr>
<td>baris 1, kolom 1</td>
<td>baris 1, kolom 2</td>
<td>baris 1, kolom 3</td>
</tr>
<tr>
<td>baris 2, kolom 1</td>
<td>baris 2, kolom 2</td>
<td>baris 2, kolom 3</td>
</tr>
<tr>
<td>baris 3, kolom 1</td>
<td>baris 3, kolom 2</td>
<td>baris 3, kolom 3</td>
</tr>
</table>
</body>
</html>
Saat membuat tabel di atas, Anda menggunakan atribut border.
Atribut tersebut merupakan atribut yang digunakan untuk menentukan
lebar batas dari tabel. Jadi, jika tabel hanya digunakan untuk
membantu me-layout peletakan gambar, teks, atau form, maka
border tidak digunakan dan tabel hanya dibuka dengan <table> saja.
Anda juga bisa memakai heading untuk tiap bagian atas dari tabel
menggunakan tag <th> di dalam baris atau tag <tr> yang pertama.
Format untuk membuat heading di tabel adalah seperti ini:
<tr>
<th>Heading pertama</th>
<th>Heading di kolom kedua</th>
<th>Heading di kolom ketiga, dst</th>
</tr>
sekian tutor ini semoga bermanfaat
