Training Pembuatan Web - Basic HTML
Diunggah oleh
intan_p3Training Pembuatan Web - Basic HTML
Diunggah oleh
intan_p3TRAINING PEMBUATAN WEB DASAR HTML
BUKU PANDUAN BASIC HTML
Selamat datang di halaman Basic HTML. Rubrik ini
ditujukan kepada Anda yang masih awam soal desain
web, dan ingin mulai belajar dengan mengenal dasar-
dasar HTML.
Agar proses belajar Anda bisa lebih terarah dan
sistematis, mohon ikuti tips dan panduan berikut ini
sebelum mulai belajar.
TIPS DAN PANDUAN
• Untuk mempermudah pemahanan Anda dalam
pelajaran HTML, sebaiknya anda mengetik semua
tag dengan progran Notepad (Pada Windows 98,
program ini bisa ditemukan di Start >> Programs
>> Accessories >> Notepad).
• Semua tag HTML yang ditampilkan di pelajaran ini,
hendaknya Anda ketik ulang. Mengetik ulang
memang merepotkan, namun ini akan lebih
memudahkan Anda dalam memahami materi
pelajaran tersebut.
• Setelah selesai mengetik tag-tag HTML tersebut di
Notepad, simpanlah file tersebut dengan prosedur
seperti ini:
o Klik menu File >> Save As (bukan File >>
Save).
o Pada isian "Save as type", pilih "All Files
(*.*)".
o Ketikkan nama file, misalnya index.html
(Ingat! ekstension .html [atau .htm juga
boleh] harus dicantumkan. Jika tidak, file
1
TRAINING PEMBUATAN WEB DASAR HTML
tersebut akan dianggap sebagai file teks biasa Bingung? Jangan khawatir. Akan saya jelaskan satu-
[text only], bukan file HTML). persatu.
o Klik Save. Tag HTML selalu dimulai dengan <html> dan diakhiri
• Tag-tag HTML yang ditampilkan di materi pelajaran dengan </html>. Pokoknya di dalam HTML itu selalu ada
ini sengaja diberi FONT khusus. Ini hanya bertujuan tag pembuka <....> dan tag penutup </....> Memang ada
untuk memudahkan pemahaman Anda. Jadi ketika beberapa tag yang tidak memerlukan tag penutup, tapi
mengetik ulang tag-tag tersebut di Notepad, Anda itu akan dibicarakan belakangan.
tidak perlu menyamakan FONT nya. Lagipula di Setelah tag <html> ada tag <head> Ini adalah kepala
Notepad, Anda tidak bisa membuat tulisan dengan dari halaman web yang biasanya berisi informasi-
warna selain hitam :). informasi atau catatan-catatan penting seputar halaman
Oke, selamat belajar! Mari kita mulai dengan web yang didesain tersebut. Sebagaimana tag <html>, tag
Pelajaran #01, yaitu Dasar-dasar Tag HTML. <head> ini pun diakhiri dengan </head>
Di antara tag <head> dan </head> terdapat tag
Dasar-dasar Tag HTML <title> dan </title>. Ini berfungsi untuk memberikan
judul bagi halaman web tersebut.
Mungkin anda sudah sering mendengar istilah HTML. Di Perlu diingat, judul tidak sama dengan nama
sini saya tidak akan berpanjang-panjang menerangkan file. Contoh nama file adalah index.html, feedback.php,
secara teori mengenai HTML. Teori-teorinya dapat anda welcome.shtml, dan sebagainya. Sedangkan judul (title)
baca di buku-buku yang banyak dijual di toko buku. sebuah halaman web adalah tulisan tertentu yang biasa
Saya akan langsung menjelaskan tentang tag-tag dasar Anda temukan di pojok kiri atas browser Anda. Coba Anda
HTML. Ini adalah tag-tag dasar HTML tersebut: buka internet explore dan lihat ke pojok kiri atas window
maka akan ada tulisan about:blank - Microsoft Internet
<html> Explore. Anda akan melihat tulisan about:blank Nah,
<head> itulah judul atau title dari halaman ini. Cara membuatnya
<title> adalah sebagai berikut:
</title> <title>nama title </title>
</head> Tag selanjutnya adalah <body> dan </body>. Ini
<body> adalah tag yang berisi semua data yang akan ditampilkan
</body>
di halaman web nantinya. Jadi apapun yang anda buat
</html>
dan ciptakan di sebuah halaman web, harus diletakkan di
antara tag <body> dan </body>. Memang ada juga
(spasi yang sama menunjukkan pasangan tag)
unsur-unsur yang tidak diletakkan di tag <body>
misalnya di tag <head> atau di bawah </html>. Tapi ini
2
TRAINING PEMBUATAN WEB DASAR HTML
sudah termasuk "pelajaran tingkat lanjut", jadi belum membuat awal paragraf tersebut agak menjorok ke
saatnya dibahas sekarang :). dalam.
Untuk latihan, silahkan Anda ketik tag berikut ini di Pada file HTML, pergantian paragraf sungguh
Notepad, lalu disimpan dengan nama file berbeda. Sebagai contoh, ketika mengetik tulisan di html,
"pelajaran1.html". kita hanya menekan <Enter> satu kali antara satu
paragraf dengan paragraf berikutnya. Tapi seperti yang
<html> terlihat, ada "jarak satu spasi" bukan? Nah, inilah format
<head> paragraf dalam file HTML!
<title>Pelajaran HTML Bagian 1</title> Sedangkan jika Anda tidak menghendaki adanya
<head> "jarak spasi" tersebut, maka Anda harus membuat
<body> pergantian baris (bukan pergantian paragraf).
Halo, ini adalah halaman web pertama saya. Jika Anda membuat halaman web dengan
</body>
Macromedia Dreamweaver atau Microsoft Frontpage,
</html>
pergantian paragraf dilakukan dengan menekan tombol
<Enter>. Sedangkan pergantian baris dilakukan dengan
Setelah disaving, buka file "pelajaran1.html"
menekan tombol <Enter> bersamaan dengan tombol
tersebut dengan browser (seperti Internet Explorer atau
<Shift>.
Netscape Navigator), lalu lihat bagaimana hasilnya.
Karena ini adalah pelajaran dasar-dasar HTML,
maka saya akan menjelaskan tentang tag-tag HTML yang
Pergantian Baris dan Paragraf diperlukan untuk membuat pergantian baris dan
pergantian paragraf.
Tag untuk pergantian baris: <br>
Hm, kenapa masalah "sepele" seperti "baris" dan
Tag untuk pergantian paragraf: <p>
"paragraf" perlu dibahas secara khusus? Apa
Pada Pelajaran #01 sudah disebutkan bahwa tidak
istimewanya?
semua tag pembuka <...> harus diakhiri dengan tag
Jawabannya adalah: Struktur content dalam file
penutup </...>. Nah, tag <b> dan <p> inilah dua di
HTML berbeda dengan struktur content dalam file-file
antara contohnya. Anda tidak perlu mengakhirinya
jenis lain. Kita misalkan saja di Microsoft Word. Jika kita
dengan </br> atau </p>.
menekan tombol <Enter>, maka kita akan masuk ke
Namun dalam kasus-kasus tertentu, tag <p> perlu
paragraf berikutnya. Antara paragraf yang satu dengan
diakhiri dengan </p>. Ini misalnya jika di dalam tag <p>
paragraf berikutnya tidak ada "jarak spasi" sama sekali.
kita memasukkan unsur-unsur lain seperti perataan teks
Untuk menandai perbedaan paragraf, biasanya kita
(alignment) dan sebagainya. Masalah alignment ini akan
3
TRAINING PEMBUATAN WEB DASAR HTML
dibahas dalam pelajaran berikutnya. Tapi untuk sekadar
contoh, bolehlah disimak tag berikut ini: Image & Alignment
<p align="center">bla... bla.. bla....</p> Sekarang kita akan membuat halaman web yang
lebih menarik, karena kita akan menempatkan
Nah, dalam tag di atas, di dalam tag <p> ada unsur gambar/foto/image tertentu di dalam halaman web kita,
alignment "center" (kalimat tersebut dibuat rata tengah), dan mengatur perataan teks (alignment).
sehingga tag <p> harus diakhiri dengan tag </p>
Untuk lebih jelasnya, coba Anda langsung saja IMAGE
mempraktekkan contoh tag HTML di bawah ini. Ketik di
Notepad, lalu disimpan dengan nama file Foto-foto atau image atau grafik (selanjutnya
"pelajaran2.html". disebut "image" saja) yang digunakan dalam dunia desain
grafis banyak sekali macamnya. Namun khusus untuk
<html> halaman web standar, image yang dapat diletakkan
<head> hanyalah yang berformat JPEG (berekstension .jpg) dan
<title>Pelajaran HTML Bagian 2</title> GIF (berekstension .gif). Memang ada format file lain
<head> yang bisa ditampilkan di halaman web, seperti file-file
<body> flash, namun lagi-lagi ini adalah "pelajaran tingkat lanjut"
Ini adalah paragraf pertama.
dan tidak akan dibahas di sini :)
<p>
Untuk menampilkan image di halaman web, kita hanya
Ini adalah paragraf kedua
membutuhkan sebuah tag sedernana seperti ini:
<br>
Ini masih paragraf kedua, namun ini adalah baris kedua
<img src="alamat_path_image_tersebut">
dari paragraf kedua.
<p>
Ini adalah paragraf ketiga. (Hati-hati ketika mengetik src, karena banyak orang yang
<br> salah mengetiknya menjadi scr)
Ini adalah baris kedua dari paragraf ketiga. Sebagai contoh, di situs saya terdapat sebuah
</body> image dengan alamat URL
</html> http://geocities.com/ferdiant2/foto.jpg Jika Anda hendak
menampilkan image ini di situs Anda, tag-nya adalah
sebagai berikut:
<img src=" http://geocities.com/ferdiant2/foto.jpg ">
4
TRAINING PEMBUATAN WEB DASAR HTML
Gampang, bukan? Tapi jangan puas dulu, karena Boder="0" artinya, image tersebut tidak membutuhkan
tag di atas hanyalah tag dasar atau yang paling standar. border. "logo situsku" merupakan teks yang akan tampil
Padahal ada beberapa elemen yang biasa menyertai tag di browser jika mouse diarahkan ke atas image tersebut.
image, yaitu:
• width, yaitu lebar image tersebut. ALIGNMENT / PERATAAN TEKS
• height, yaitu tinggi image tersebut.
• border, yaitu besarnya garis yang dipakai untuk
membingkai image tersebut. Istilah rata kiri, rata kanan, rata tengah, dan rata
• alt, yaitu teks yang akan muncul di browser jika kiri-kanan, tentu sudah tidak asing bagi Anda. Ini
mouse kita arahkan ke image tersebut. merupakan alignment (perataan teks), dan berlaku juga
Sebagai contoh, berikut adalah tag yang lengkap di halaman web. Namun bedanya, halaman web tidak
karena di dalamnya terdapat elemen-elemen di atas: mengenal rata kiri-kanan, sehingga yang bisa digunakan
hanya rata kiri, rata kanan, dan rata tengah.
<img src="http://geocities.com/ferdiant2/foto.jpg" widht="400" Alignment di halaman web - sebenarnya - bukanlah
height="100" border="0" alt="logo situsku"> merupakan tag. Ia hanya sebagai elemen yang
diikutsertakan pada tag tertentu. Sebagai contoh, di sini
Image foto.jpg yang saya tampilkan di sini, berukuran saya membuat tag <p> yang di dalamnya terkandung
widht=400 dan height=100. Jika Anda tidak perlu elemen perataan teks. Seperti sudah Anda baca di
merubah ukuran ini, sebenarnya unsur width dan height Pelajaran 2 (tentang Pergantian Baris dan Paragraf), tag
tidak perlu ditampilkan. Tapi jika Anda hendak mengubah <p> yang diberi elemen lain harus disertai dengan tag
ukurannya, maka kedua elemen ini wajib disertakan. penutup </p>.
Jangan lupa menuliskan ukuran yang Anda inginkan pada Berikut adalah contoh tag alignment yang digabung
tag-nya, seperti ini (contoh): dengan tag <p>:
<img src="http://geocities.com/ferdiant2/foto.jpg" widht="200" <p align="center">Ini adalah teks yang rata tengah</p>
height="50" border="0" alt="logo situsku"> <p align="left">Ini adalah teks yang rata kiri</p>
<p align="right">Ini adalah teks yang rata kanan</p>
Kalau ukuran image tidak perlu diubah, tag di atas bisa
dipersingkat menjadi:
<img src="http://www.jonru.com/images/guest.gif" border="0",
alt="logo situsku"> (tanpa unsur widht dan height)
5
TRAINING PEMBUATAN WEB DASAR HTML
LATIHAN Georgia. Maka orang tersebut tidak akan bisa melihat
"kecantikan" halaman web Anda, sebagaimana yang Anda
saksikan dari komputer Anda.
Sebagai latihan, silahkan anda ketik tag berikut ini Karena keterbatasan seperti inilah, halaman-
di notepad, lalu saving dengan nama file halaman web biasanya hanya diisi dengan jenis-jenis font
"pelajaran3.html". standar, yang diperkirakan ada di setiap komputer. Dua
jenis font yang paling sering dipakai adalah Arial dan
<html> Verdana.
<head> Namun bagaimana jika ada komputer yang di
<title>Pelajaran Dasar HTML Bagian 3</title> dalamnya tidak terdapat font Arial dan Verdana? Untuk
</head> mengatasinya, para desainer web yang baik biasanya
<body> membuat sekitar tiga atau empat font alternatif. Jika font
<img src="http://www.jonru.com/images/guest.gif" border="0" pertama tidak ada di komputer tersebut, maka yang
alt="logo situsku">
dipakai adalah font alternatif kedua. Demikian
<p align="center">Ini adalah teks yang rata tengah</p>
seterusnya.
<p align="left">Ini adalah teks yang rata kiri</p>
Berikut adalah tag yang cukup lengkap untuk
<p align="right">Ini adalah teks yang rata kanan</p>
mengatur jenis huruf:
</body>
<font face="jenis huruf" size="ukuran huruf" color="warna
</html>
huruf">bla... bla... bla...</font>
(Ingat, tag penutup harus ada)
Fonts (Huruf) & Warna Sebagai contoh, berikut adalah sebuah tag untuk font:
<font face="verdana, arial, helvetica, sans-serif" size="2"
Fonts (Huruf)
color="blue">Ini adalah huruf dengan ukuran 2 dan warna
Masalah font dalam desain web merupakan salah
biru</font>
satu faktor yang dilematis. Kalau Anda me-layout
Mari kita bahas unsur-unsur tersebut satu-persatu:
halaman media cetak seperti majalah, maka Anda
• face="verdana, arial, helvetica, sans-serif". Bagian
cenderung bebas menggunakan font apa saja.
ini mengandung arti, bahwa diharapkan font yang
Tapi pada halaman web, masalahnya berbeda. Anda
tampil di browser adalah verdana. Jika verdana
misalnya sudah membuat jenis huruf yang bagus-bagus
tidak ada, yang akan tampil adalah arial. Jika arial
untuk tulisan-tulisan di halaman web Anda, seperti
tidak ada juga, maka penggantinya adalah
Futura, Freehand, Georgia, dan sebagainya. Kemudian
helvetica. Jika helvetica pun tidak ada,
halaman web Anda itu diakses oleh orang lain, dan di
penggantinya adalah sans-serif. Jika sans-serif pun
komputernya tidak tersedia font Futura, Freehand, dan
6
TRAINING PEMBUATAN WEB DASAR HTML
tidak ada? Hm... sepertinya komputer ini perlu Untuk huruf tebal: <b>.......</b>
diinstal ulang! :-) Untuk huruf miring: <i>.......</i>
• size="2". Pada halaman web, ukuran font biasanya Untuk huruf bergaris bawah: <u>.......</u>
dibuat berdasarkan "rangking". Berikut adalah Berikut adalah contohnya:
"rangking" tersebut: <b>Ini huruf tebal</b>
size="1" = 8 pt <i>Ini huruf miring</i>
size="2" = 10 pt <u>Ini huruf bergaris bawah</u>
size="3" = 12 pt Mau digabung? Boleh! Seperti ini contohnya:
size="4" = 14 pt <b><i>Ini huruf tebal sekaligus miring</i></b>
size="5" = 18pt Coba diperhatikan: Jika Anda menggabungkan dua atau
Jadi, kini Anda tahu bahwa maksud dari size="2" lebih tag, maka pembuatan tag-nya harus sistematis.
adalah, font tersebut berukuran 10 pt. Kalau bahasa "preman"nya, tag-tag tersebut harus saling
• Color="blue". Artinya, warna huruf tersebut adalah mengapit. Tag yang muncul paling depan, tag
biru. Selain dengan nama/istilah, pemberian warna penutupnya harus muncul paling belakang. Jika ada tag
bisa juga dilakukan dengan memberikan kode-kode yang muncul di depan pada urutan kedua, maka di
warna RGB. Sebagai contoh, warna latar halaman belakang pun ia harus muncul pada urutan kedua dari
web ini adalah #000080. Saya kira Anda tidak perlu belakang. Demikian seterusnya. Karena itu, tag di atas
terlalu pusing dengan kode warna ini, karena Anda tidak boleh dibuat seperti ini:
bisa mempelajarinya dengan mudah dengan cara <b><i>Ini huruf tebal sekaligus miring</b></i> (INI CONTOH
"mengutak-atik" berbagai kombinasi warna pada PENULISAN TAG YANG SALAH)
beberapa program desain grafis seperti Photoshop Tapi kalau seperti ini, boleh:
dan Macromedia Freefand, atau program desain <i><b>Ini huruf tebal sekaligus miring</b></i>
web seperti Macromedia DreamWeaver dan Tag font style juga bisa diletakkan di antara tag font.
Microsoft Frontpage. Seperti ini:
<font face="verdana" size="2"><b>Ini adalah huruf verdana
Fonts (Style) ukuran 10 pt dan dicetak tebal</b></font>
Ukuran huruf juga dapat dibuat dengan
menggunakan tag <h1>, <h2> dan seterusnya. Semakin
Elemen yang tak kalah penting untuk font adalah
besar angka yang terdapat setelah "h", maka ukuran
font style, seperti bold (huruf tebal), talic (huruf miring),
hurufnya semakin kecil (berbanding terbalik). Sebagai
dan underline (bergaris bawah). Huruf bergaris bawah
contoh:
(underline) tidak terlalu umum digunakan pada halaman
<h1>Ini adalah tulisan</h1>
web, tapi tak apalah jika ditampilkan juga tag-nya di sini.
<h2>tulisan ini lebih kecil dari yang di atas</h2>
Berikut adalah tag yang diperlukan untuk font style:
7
TRAINING PEMBUATAN WEB DASAR HTML
<h3>tulisan ini lebih kecil lagi</h3> Sebagai latihan, silahkan anda ketik tag berikut ini
di notepad, lalu saving dengan nama file
Warna
"pelajaran4.html".
Di atas saya sudah menyinggung sedikit soal warna. <html>
Intinya, Anda bisa membuat warna dengan <head>
mencantumkan nama warna tersebut pada tag yang <title>Pelajaran Dasar HTML Bagian 4</title>
tersedia, seperti </head>
<font color="blue">Ini huruf berwarna biru</font> <body bgcolor="#DDDDFF">
Anda juga dapat menggunakan kode-kode warna Coba lihat warna latar belakang halaman ini. Silahkan cocokkan
tertentu yang terdiri dari gabungan warna RGB, dan dengan kode warnanya.
diawali dengan tanda #. Sebagai contoh: #000000 adalah <p>
<font face="Arial" size="2" color="#FF0000">Ini adalah tulisan
warna hitam, #FFFFFF adalah putih, #0000FF = biru, dan
dengan huruf Arial, ukuran 2 dan warna huruf merah.</font>
#FF0000 = merah.
<br>
Perlu diketahui, yang bisa diberi warna bukan cuma
<font face="Verdana" size="2" color="#0000FF"><b>Ini adalah
huruf/font. Masih banyak unsur di dalam halaman web
tulisan dengan huruf Verdana, ukuran 2, warna huruf biru, dan
yang bisa diberi warna. Salah satu contohnya adalah dicetak tebal</b></font>
warna latar belakang halaman web. Situs saya ini <br><i>Ini adalah contoh huruf miring</i>
misalnya, memiliki warna latar belakang (background) <br><u>Ini adalah huruf yang diberi garis bawah</u>
biru cerah dengan kode warna #000080. <p>
Untuk membuat warna background halaman web, <h1>Huruf besar</h1><br>
maka kode warna itu harus diletakkan pada tag <body>. <h2>Lebih kecil</h2><br>
Berikut adalah contohnya: <h3>lebih kecil lagi</h3><br>
<body bgcolor="#FFFFFF">.........</body> <h4>jauh lebih kecil lagi</h4><br>
Ini akan menghasilkan warna background putih <h5>ini lebih kecil lagi</h5><br>
<body bgcolor="#000080">.........</body> <h6>yang ini masih bisa dibaca gak ya? kecil banget!</h6>
Ini akan menghasilkan warna background yang sama </body>
dengan warna background halaman web yang sedang </html>
Anda baca ini.
Nah, selamat mencoba!
Latihan
Seputar Link (1)
8
TRAINING PEMBUATAN WEB DASAR HTML
Link adalah teks atau gambar (image) tertentu di (http://www.jonru.com/images/guest.gif), dan image ini
dokumen HTML, yang bila diklik akan membawa kita ke diberi link menuju Yahoo!. Begini tag-nya: (coba Anda
dokumen lainnya, atau ke bagian tertentu pada dokumen pelajari sendiri bagaimana proses "perkawinan" kedua tag
yang sama. Ada beberapa pembahasan yang cukup tersebut)
penting mengenai link, dan akan dibahas satu-persatu. <a href="http://www.yahoo.com/"><img
Karena banyaknya pembahasan yang tersedia, maka saya src="http://www.jonru.com/images/guest.gif"></a>
membagi materi ini menjadi dua halaman. Tentu saja, seperti Anda pelajari dalam Materi 03, Anda
bisa menambahkan elemen-elemen tambahan pada tag
Link Secara Umum image. Misalnya seperti ini:
Sebagai permulaan, kita akan bicara dulu mengenai <a href="http://www.yahoo.com/"><img
link yang berupa alamat URL atau alamat situs yang biasa src="http://www.jonru.com/images/guest.gif"
kita temukan pada halaman web. width="200" height="50" border="0", alt="Ini dia
Berikut adalah tag yang paling umum untuk situsnya Yahoo!"></a>
membuat link: Catatan: Jika Anda membuat image yang mengandung
<a href="alamat_URL">teks atau image yang di-link</a> link, elemen border="0" sangat diperlukan. Karena jika
Teks atau image yang diapit oleh tag <a> dan </a> elemen ini tidak dicantumkan, maka image tersebut akan
tersebut bisa berupa teks atau image apa saja, terserah memiliki border yang mungkin mengganggu penampilan
Anda. Tapi Anda juga harus memikirkan bahwa teks yang image tersebut di browser. Tapi jika Anda memang
tertulis atau gambar yang tercantum di situ haruslah ada menyukai kehadiran border tersebut, ini tentu lain
hubungannya dengan link tersebut. ceritanya :)
Sebagai contoh, berikut adalah tag untuk membuat link
menuju situs www.yahoo.com: Relative Path VS Absolute Path
<a href="http://www.yahoo.com/">Ini adalah link Ini adalah bagian yang cukup penting dalam pembahasan
menuju Yahoo!</a> mengenai link. Untuk lebih jelasnya, coba Anda simak
Boleh-boleh saja Anda merubah teks-nya, asalkan masih kembali tag untuk membuat link berikut ini:
ada hubungannya dengan link-nya (Yahoo!), agar orang <a href="http://www.abc.com/index.shtml">ABC</a>
yang membacanya tidak bingung. URL atau path http://www.abc.com/index.shtml
Sekarang, bagaimana membuat image yang memiliki merupakan path yang lengkap. Path itu akan selalu
link? Caranya gampang saja: Misalnya pada link untuk seperti itu, di manapun ia ditempatkan. Nah, inilah yang
Yahoo! di atas, Anda cukup mengganti teks "Ini adalah disebut sebagai absolute path.
link menuju Yahoo!" dengan tag image. Sementara relative path adalah alamat path yang
Sebagai contoh, mari kita gunakan saja sebuah image dinamis. Ia akan menjadi alamat URL yang berbeda-beda,
yang terdapat pada situs saya tergantung di mana Anda meletakkan tag-nya.
9
TRAINING PEMBUATAN WEB DASAR HTML
Anda bingung? Jangan khawatir. Saya sudah
menyediakan sebuah gambar yang berisi bagan sebuah <a href="../../index.html">Index</a>
situs. Klik DI SINI untuk melihatnya, karena saya akan 3. Anda kini bekerja pada file artikel.html
membuat penjelasan berdasarkan gambar tersebut (C:\situsku\portofolio\artikel.html), lalu Anda
(gambar akan terbuka dengan window baru yang kecil. hendak membuat link menuju index.html. Maka
Jadi jangan khawatir jika halaman ini akan tertimpa). tag-nya adalah:
Pada gambar tersebut terlihat sebuah struktur situs, di
mana file-filenya disimpan di root direktory yang <a href="../index.html">Index</a>
beralamat di C:\situsku. Di root direktory ini terdapat dua 4. Anda bekerja lagi pada file index.html, dan ingin
file, yaitu index.html, dan profilku.html. Selain itu membuat link menuju file profilku.html. Kedua file
terdapat tiga subdirektori (\portofolio, \images, dan ini berada di folder/direktori yang sama. Maka tag-
\artikelku) yang masing-masing berisi sejumlah file pula. nya adalah:
Adapun subfolder \artikelku, ia memiliki dua subfolder
lagi, yaitu \fiksi dan \nonfiksi. <a href="profilku.html">Profilku</a>
Sekarang, mari kita meneruskan materi ini dengan 5. Contoh terakhir, Anda bekerja pada file
pemberian contoh kasus (agar memudahkan desainweb.html
pemahaman). (C:\situsku\portofolio\desainweb.html), dan ingin
1. Anda sedang bekerja di file index.html membuat link menuju image fotoku.jpg
(C:\situsku\index.html). Di file ini Anda membuat (C:\situsku\images\fotoku.jpg). Tag-nya adalah:
tag-link yang menuju ke file desainweb.html
(C:\situsku\portofolio\desainweb.html). Maka tag- <a href="../images/fotoku.jpg">Fotoku</a>
nya adalah: Tag-tag yang ditampilkan pada kelima contoh di atas
merupakan relative path. Alamat path yang tercantum
<a href="portofolio/desainweb.html">Desain pada tag-tag itu bisa berubah menjadi alamat URL yang
Web</a> berbeda-beda jika ditaruh di alamat situs yang berbeda-
beda pula.
Perhatikanlah: Kata "Desain Web" bisa diganti Misalnya, untuk contoh nomor 1 di atas: Jika Anda meng-
dengan pilihan Anda. Perhatikan juga, tanda \ upload file index.html ke situs www.situs-pribadiku.com,
diubah menjadi /. maka path portofolio/desainweb.html akan berubah
2. Sekarang Anda bekerja di file nonfiksi-01.html menjadi alamat URL http://www.situs-
(C:\situsku\artikelku\nonfiksi\nonfiksi-02.html), dan pribadiku.com/portofolio/desainweb.html.
ingin membuat link menuju file index.html Lantas jika file index.html itu di-upload ke
(C:\situsku\index.html). Maka tag-nya adalah: www.situsmu.com/tentangmu/, maka path
10
TRAINING PEMBUATAN WEB DASAR HTML
portofolio/desainweb.html akan berubah pula menjadi biasa, kita bisa mengganti teks dengan kata atau kalimat
URL apa saja, bahkan gambar/image pun bisa. Yang penting
http://www.situsmu.com/tentangmu/portofolio/desainweb masih ada hubungannya dengan link tersebut.
.html. Berikut adalah sebuah contoh e-mail link:
Oh ya, Anda mungkin bertanya, apa guna tanda ../ pada <a href="mailto:[email protected]">Kirim e-mail
path-path di atas? Ya, tanda ../ itu berfungsi untuk ke Webmaster Yahoo!</a>
menyesuaikan link dengan lokasi folder dari file yang di- Dan inilah hasilnya (silahkan diklik): Kirim e-mail ke
link. Hm... bingung? Saya akan memberikan satu contoh Webmaster Yahoo!
saja sebagai gambaran. Seterusnya silahkan Anda Jika kata Kirim e-mail ke Webmaster Yahoo! di atas diklik,
"bayangkan" sendiri ya? Hehehehe..... maka akan terbuka sebuah window e-mail baru, dan
Untuk contoh nomor 2 di atas, file nonfiksi-02.html alamat e-mail [email protected] tercantum di isian
berada dua subfolder di bawah file index.html. Jadi jika To: secara otomatis.
pada file nonfiksi-02.html hendak dibuat link menuju file Anda juga bisa membuat agar isian Subject: pun terisi
index.html, maka pada path-nya harus dibuat "kode otomatis. Caranya, Anda tinggal menambahkan tag
penyesuaian" agar path tersebut bisa secara tepat masuk tertentu setelah alamat emailnya, yaitu:
ke folder yang berisi file index.html. Satu kali tanda ../ ?subject=teks
berarti link tersebut mundur satu subfolder. Dua kali ../ Contoh:
berarti mundur dua subfolder. Begitu seterusnya. <a href="mailto:[email protected]?subject=A
question about Yahoo!">Kirim e-mail ke Webmaster
E-mail Link Yahoo!</a>
Berikut kita akan mempelajari salah satu jenis link Berikut adalah hasilnya (silahkan diklik): Kirim e-mail ke
lainnya, yaitu e-mail link. Ini adalah jenis link, yang jika Webmaster Yahoo!
diklik akan membuka sebuah window "New Massage" dari NOTE:
email client kita. Hm, jika Anda bingung dengan "definisi" • Jangan sekali-kali membuat e-mail link seperti ini,
ini, saya akan membuat penjelasan yang lebih gamblang: karena dijamin salah:
E-mail link adalah link yang berisi alamat e-mail, bukan <a href="http://[email protected]">text</a>
alamat dokumen HTML tertentu. • E-mail link yang diklik akan terbuka pada window
Cara membuat e-mail link pun sangat gampang. Ini dia program e-mail client default di komputer Anda,
tag-nya: bukan di browser. Contoh e-mail client adalah
<a href="mailto:alamat_email">teks</a> Outlook Express, Eudora, Netscape Messenger, dan
Perhatikan, bahwa unsur mailto:alamat_email merupakan sebagainya. Karena e-mail client berbeda dengan
bagian penting yang membedakan antara email link browser, maka otomatis link itu akan terbuka pada
dengan jenis link yang kita bahas di atas. Dan seperti
11
TRAINING PEMBUATAN WEB DASAR HTML
window baru. Jadi kita tidak perlu membuat link diklik, maka browser akan membawa kita ke "bagian
target seperti _blank dan sebagainya. tertentu" tersebut.
Seputar Link (2) Untuk mendapat gambaran yang jelas, silahkan klik DI
SINI untuk masuk ke bagian lain di halaman ini yang
Baca panduan materi ini. Klik DI SINI! telah diberi bookmark.
Bookmark atau Anchor Ada dua tag (yang berpasangan) yang diperlukan dalam
Pada materi sebelumnya, kita sudah membahas soal link, membuat bookmark, yaitu:
dan semuanya bicara tentang link yang terhubung ke Pertama, tag untuk link, yaitu:
dokumen lain. Padahal link juga bisa berfungsi untuk <a href="#nama_bookmark">......</a>
menghubungkan bagian-bagian tertentu pada dokumen Kedua, tag untuk bookmark-nya sendiri, yaitu:
yang sama. <a name="nama_bookmark">............</a>
Sebetulnya, saya agak bingung untuk menamai link Perhatikan bahwa:
seperti ini, karena setiap program HTML editor • Untuk tag-link, harus diawali dengan tanda #,
menggunakan istilah yang berbeda-beda. sedangkan untuk tag-bookmark, tidak perlu.
Microsoft Frontpage menamainya dengan Bookmark. Tapi • Anda boleh memberikan nama_bookmark apa saja,
istilah ini juga dipakai oleh browser Netscape Navigator sesuai keinginan Anda.
untuk menggantikan istilah Favorites pada Internet Berikut adalah sebuah contoh dalam pembuatan
Explorer. Sementara Macromedia Dreamweaver bookmark (silahkan diikuti langkah-langkahnya):
menamainya Anchor. 1. Buatlah sebuah halaman web. Pada bagian atas
Baiklah, sepertinya saya lebih tertarik menggunakan halaman tersebut, ketiklah tulisan Buku Tamu, lalu
istilah Bookmark. Jadi untuk selanjutnya kita diberi tag-link seperti ini:
menggunakan istilah ini saja, ya? <a href="#01">Buku Tamu</a>
Dalam kehidupan sehari-hari, kita sebenarnya sudah 2. Pada bagian tengah halaman tersebut, buatlah tag
akrab dengan bookmark ini. Misalnya ketika kita <p> sebanyak mungkin, misalnya 100 buah. Ini
membaca sebuah buku, dan kita berhenti pada halaman berguna untuk memudahkan Anda dalam mengetes
73, maka kita melipat bagian ujung halaman ini. link dan bookmark tersebut. Pada tag <p> yang ke
Gunanya, untuk menandakan bahwa kita sudah membaca 100 misalnya, ketiklah tulisan Ini dia buku
sampai halaman 73. Nah, "lipatan bagian ujung buku" ini tamunya, lalu tulisan ini diberi tag-bookmark seperti
merupakan salah satu contoh bookmark. ini:
Pada desain web, bookmark merupakan bagian tertentu <a name="01">Ini dia buku tamunya</a>
di sebuah dokumen (bisa berupa teks, image atau yang Setelah itu, buat lagi tag <p> sebanyak mungkin di
lainnya) yang diberi tanda tertentu. Lalu jika sebuah link bawahnya, misalnya 100 buah. Anda akan tahu
12
TRAINING PEMBUATAN WEB DASAR HTML
fungsi tag <p> yang banyak ini setelah _top
mempraktekkannya. Ini adalah link target di mana link yang diklik akan
3. Nah, Anda telah selesai membuat sepasang tag- terbuka dengan cara "menimpa" halaman web
bookmark. Sekarang, simpanlah file tersebut sebelumnya.
sebagai file HTML, lalu akses melalui browser Anda, Tag untuk membuat target _top adalah:
seperti Internet Explorer. Coba klik link pada tulisan <a href="alamat_URL" target="_top">....</a>
Buku Tamu. Maka Anda akan langsung dibawa ke _top merupakan link target default, sehingga tanpa ditulis
bagian yang berisi tulisan Ini dia buku tamunya. pun, browser akan langsung membuka halaman web yang
Nah, gampang, bukan? Perlu dicatat bahwa untuk contoh kita tuju dengan link target _top. Jadi kalau kita ingin
tag di atas, nama bookmark-nya adalah 01. Anda bisa membuat link target _top, sebaiknya tidak usah ditulis
memakai nama-nama lain, sesuai selera Anda. Yang aja. Tulis saja dengan cara biasa seperti ini:
penting, nama tersebut harus satu kata, tidak boleh ada <a href="alamat_URL">....</a>
spasinya. _blank
TIP: Pada bagian akhir halaman web Anda, Anda bisa Ini adalah link target di mana halaman URL yang kita klik
membuat link, yang jika diklik akan membawa Anda ke akan terbuka di sebuah window yang baru, atau tidak
bagian paling atas dari dokumen tersebut. (Sebagai menimpa halaman web sebelumnya.
contoh, coba Anda klik link TOP yang terletak di bagian Tag untuk membuat link target _blank adalah:
paling bawah halaman ini). Untuk membuat link seperti <a href="alamat_URL" target="_blank">....</a>
itu, Anda cukup membuat tag seperti ini: <a Untuk lebih jelasnya tentang perbedaan antara link _top
href="#">TOP</a> (tanpa nama), dan Anda tidak perlu dan _blank, coba Anda klik DI SINI untuk membuka
membuat tag-bookmark sebagai pasangannya. sebuah halaman yang berisi contoh tentang link target
tersebut (link ini akan membuka di halaman yang baru,
Link Target tidak akan menimpa halaman ini). Coba Anda klik kedua
Kalau kita mengklik suatu link tertentu di halaman web, link tersebut, dan Anda akan melihat perbedaan antara
biasanya URL yang kita klik itu akan terbuka dengan cara cara terbukanya kedua link tersebut.
menimpa halaman sebelumnya. Atau ada juga URL yang TIP:
terbuka di window yang baru, sehingga halaman web • Anda ingin membuat sebuah halaman web memiliki
sebelumnya tidak "tertimpa". Nah, cara membuka URL link target _blank secara default? Artinya, setiap
inilah yang disebut sebagai link target. kali Anda membuat link, otomatis link tersebut
Ada beberapa jenis link target, tapi kali ini kita akan memiliki target _blank. Hal ini bisa dilakukan
membahas dua saja. Kenapa? Karena yang sisanya dengan membuat tag <base target="_blank"> pada
berhubungan dengan frame, yang belum dibahas dalam tag <head>. Berikut adalah contoh
materi ini. penempatannya:
13
TRAINING PEMBUATAN WEB DASAR HTML
<p>
<html> Kunjungilah <a
<head> href="http://www.jonru.com/">Homepage Pribadi
<title>Judul Halaman</title> Jonru</a> jika anda tak ingin ketinggalan jaman.
<base target="_blank"> <p>
</head> Berikut ini adalah contoh link menggunakan image:
<body> <p>
bla... bla... bla.... <a href="http://www.yahoo.com/"><img
</body> src="http://www.jonru.com/images/guest.gif"
</html> width="200" height="50" border="0", alt="Ini dia
situsnya Yahoo!"></a>
Nah, dengan cara di atas, semua link yang Anda <p>
buat di halaman web tersebut, secara otomatis Berikut adalah contoh link yang terbuka dengan window
akan terbuka dengan window baru. baru:
• Dalam mendesain web, Anda saya persilahkan <p>
untuk mempertimbangkan saran saya ini: Untuk Kunjungilah <a href="http://www.jonru.com/"
link yang terhubung ke dokumen lain di dalam target="_blank">Homepage Pribadi Jonru</a> jika anda
website Anda, gunakan relative path dan target link tak ingin ketinggalan jaman.
_top (tentu saja, karena _top ini sudah default, <p>Berikut adalah contoh e-mail link:
tidak perlu ditulis). Sedangkan untuk link yang <p>
terhubung ke situs lain (disebut link eksternal), <a href="mailto:[email protected]">Emailnya Joko</a>
gunakan absolute path, dan buat target link-nya <p>
_blank. Berikut adalah e-mail link yang ada subject-nya:
<p>
Latihan <a href="mailto:[email protected]?subject=Halo Joko,
Seperti biasa, coba salin tag berikut ini di Notepad, lalu apa kabarnya nih?">Emailnya Joko</a>
simpan dengan nama file "pelajaran5.html". </body>
<html> </html>
<head> Membuat Daftar atau Urutan Tertentu
<title>Pelajaran Dasar HTML Bagian 5</title>
</head> Baca panduan materi ini. Klik DI SINI!
<body bgcolor="#FFFFFF"> Anda tentu sering membaca format tulisan seperti ini:
Berikut ini adalah contoh link menggunakan teks: Pak Ahmad memiliki tiga anak, yaitu:
14
TRAINING PEMBUATAN WEB DASAR HTML
1. Ali <p>Pak Ahmad memiliki tiga orang anak, yaitu:</p>
2. Andi <ol>
3. Agus <li> Ali
Atau: <li> Andi
Bahan-bahan bangunan adalah: <li> Agus
• semen </ol>
• batu bata Pada contoh di atas, Anda dapat melihat bahwa:
• pasir • Tag <li> diapit oleh tag <ol>....</ol>.
• dan sebagainya • Tag <li> tidak ditutup oleh </li>. Hal ini disebabkan
Jika menggunakan Microsoft Word, membuat daftar bahwa tag <li> tidak wajib diakhiri dengan </li>.
urutan seperti itu mudah sekali. Tapi bagaimana cara Anda bisa memakainya, tapi tidak dipakai pun tidak
membuatnya untuk dokumen HTML? Jawabannya dapat apa-apa.
Anda temukan pada tulisan ini. • Tag <li> berfungsi untuk memunculkan angka
Seperti Anda lihat di atas, secara umum daftar urutan urutan 1, 2, 3 dan seterusnya. Tanpa adanya tag
pada dokumen HTML terbagi atas dua jenis, yaitu (1) <li>, maka angka 1, 2, 3 dan seterusnya tidak akan
daftar urutan angka, dan (2) daftar urutan bullet alias terlihat di browser Anda.
daftar urutan yang terdiri atas karakter huruf tertentu. Dari contoh di atas, Anda pun bisa dengan mudah
Untuk daftar urutan angka, tag HTML yang digunakan membuat tag untuk daftar urutan bullet. Berikut adalah
adalah: <ol> dan diakhiri dengan </ol>. Sedangkan contohnya:
daftar urutan bullet, tag HTML yang digunakan adalah: <p>Bahan-bahan bangunan adalah:</p>
<ul> dan diakhiri dengan </ul>. <ul>
Setiap kali muncul tag <ol> pada dokumen HTML, maka <li> semen
browser akan membuat urutan angka 1,2,3 dan <li> batu bata
seterusnya pada bagian-bagian yang berada di antara <li> pasir
<ol> dan </ol> tersebut. Demikian pula yang terjadi <li> dan sebagainya
pada tag <ul>....</ul>, browser akan membuat urutan </ul>
dengan karakter tertentu di depannya. Secara umum, hanya demikianlah "rumus" untuk
Tapi perlu diketahui, tag <ol> dan <ul> ini tidak bisa membuat daftar urutan dengan bahasa HTML. Jika
berdiri sendiri. Mereka harus didampingi oleh tag <li> misalnya Anda hendak membuat daftar urutan yang
yang bertugas untuk menampilkan nomor-nomor urutan bertingkat-tingkat, membuatnya pun cukup gampang.
tersebut. Berikut adalah contohnya:
Jika Anda bingung, mungkin lebih baik jika kita langsung Anda hendak membuat daftar seperti ini:
menuju contoh saja. Silahkan simak yang berikut ini: Pak Wandi memiliki tiga anak, yaitu:
15
TRAINING PEMBUATAN WEB DASAR HTML
1. Agus, telah berkeluarga dan memiliki dua anak: pasangan-pasangan tag yang ditulis dengan warna yang
o Wati berbeda-beda itu (untuk memudahkan Anda
o Rudi mengenalinya), diharapkan Anda kini makin memahami
2. Hendra, telah berkeluarga juga, dan memiliki tiga tentang salah satu aturan dalam pembuatan tag HTML
anak, yaitu: yang harus bersifat "saling mengapit" seperti yang pernah
o Joko saya uraikan dalam materi sebelumnya.
o Bambang
o Susi Latihan
3. Sinta, belum berkeluarga alias masih single. Ada Sebagai latihan, coba Anda ketik ulang tag berikut ini di
yang berminat? Notepad, lalu disimpan dengan nama file
Berikut adalah tag HTML untuk menampilkan daftar "pelajaran6.html".
urutan seperti di atas: <html>
<p>Pak Wandi memiliki tiga anak, yaitu:</p> <head>
<ol> <title>Pelajaran Dasar HTML Bagian 5</title>
<li> Agus, telah berkeluarga dan memiliki dua anak: </head>
<ul> <body>
<li> Wati <p>Gejala-gejala influensa adalah:</p>
<li> Rudi <ul><li> kepala pusing
</ul> <li> bersin-bersin
<li>Hendra, telah berkeluarga juga, dan memiliki tiga <li> demam
anak, yaitu: <li> masuk angin</ul>
<ul> <p>Struktur buku ini terdiri dari:
<li> Joko <ol>
<li> Bambang <li> Bab I
<li> Susi <ul>
</ul> <li> Pengenalan
<li> Sinta, belum berkeluarga alias masih <i>single</i>. <li> Landasan Teori
Ada yang berminat? </ul>
</ol> <li> Bab II
Coba Anda perhatikan, pada contoh di atas terdapat satu <ul>
tag <ol>....</ol> yang mengapit tiga sub-tag <li>. Dua <li> Pembahasan Inti
tag <li> yang pertama (Agus dan Hendra) masing-masing <li> Analisis dan Permasalahan
mengapit sub-tag <li> yang berbeda-beda pula. Dari <li> Pemecahan Masalah
16
TRAINING PEMBUATAN WEB DASAR HTML
</ul> file fotoku.jpg itu otomatis langsung menjadi bagian dari
<li> Bab III file naskahku.doc.
<ul> Ini berbeda dengan file HTML. Jika Anda memasukkan file
<li> Penutup fotoku.jpg ke file index.html, maka file fotoku.jpg itu
<li> Saran-saran tidak menjadi bagian dari file index.html. Ia hanya
</ul> "terhubung" ke file index.html tersebut.
</ol> Ketika nanti Anda mengakses file index.html dengan
<p>Demikianlah akhir dari materi ini.</p> browser seperti Internet Explorer, maka si browser akan
</body> "memanggil" semua file atau data yang terhubung ke file
</html> index.html ini. Nah, jika ternyata file "fotoku.jpg" tidak
Tip: Image tidak Tampil, Link Tidak Bisa Diklik. ditemukan, maka proses pemanggilan akan gagal.
Kenapa? Akibatnya, file fotoku.jpg tidak bisa tampil di file
index.html.
Menurut pengalaman saya, ada satu masalah yang Selain itu, ada sejumlah "aturan dasar" yang harus Anda
seringkali dihadapi oleh para desainer web pemula: patuhi di dalam mendesain halaman web. Berikut adalah
Mereka sudah membuat desain dengan baik. Tapi ketika aturan-aturan tersebut:
di-upload ke internet, terjadi error. Image atau gambar- 1. Website yang Anda bangun harus disimpan dalam
gambar tidak bisa tampil, dan semua (atau beberapa link folder khusus. Misalnya: C:\situsku (ini bisa disebut
tidak bisa diklik). Begitu link tersebut diklik, muncul sebagai root folder atau folder utama). Jika Anda
pesan error "page not found". Di mana letak membangun halaman web dengan Macromedia
kesalahannya? Dreamweaver, Anda bisa membangun sebuah "situs
Si desainer merasa bahwa ia telah membuat alamat URL virtual" di harddisk komputer Anda dengan
dengan benar. Ketika dites di komputer (yang belum mengklik menu Site >> Define Sites. Sedangkan di
terkoneksi ke internet), link tersebut bisa diklik. Semua Microsoft Frontpage, Site ini diberi nama Web Folder
gambar/image juga bisa tampil. Kenapa setelah di-upload dan bisa dibuat dengan mengklik menu File >> New
ke internet, semuanya jadi kacau? >> Web.
Untuk menjelaskan masalah ini, terlebih dahulu saya 2. Jika Anda membutuhkan folder-folder baru, maka
perlu membahas tentang salah satu sifat file HTML yang folder-folder ini pun harus diletakkan sebagai
berbeda dengan jenis-jenis file lain. cabang dari root folder (C:\situsku), alias subfolder.
Image atau gambar-gambar yang tampil di file HTML, Jadi jika misalnya Anda membutuhkan folder yang
secara teknis berbeda dengan image pada file-file jenis berisi semua portofolio Anda, maka Anda bisa
lain, misalnya Microsoft Word. Jika Anda memasukkan memasukkannya ke folder \portofolioku (Anda bisa
foto (misalnya file fotoku.jpg) ke file naskahku.doc, maka
17
TRAINING PEMBUATAN WEB DASAR HTML
memakai nama lain), dan alamat URL-nya adalah penjelasan tentang relative path di Materi 05).
C:\situsku\portofolioku.
3. Semua file yang terhubung dengan situs Anda Catatan:
tersebut, harus disimpan di web folder Anda
(misalnya di C:\situsku), atau di subfolder- (1) Jika anda mengakses internet dari komputer
subfoldernya (misalnya di C:\situsku\portofolioku, Anda, URL seperti <a
C:\situsku\images, C:\situsku\galeri-foto, dan href="file:///C:/situsku/portofolio/artikel.html"</a>
sebagainya). mungkin masih bisa diklik (karena file
4. Jangan sekali-kali Anda mengambil file dari folder C:\situsku\portofolio\artikel.html tersebut masih
lain, misalnya dari folder C:\, C:\data-kantor, C:\My berada di komputer Anda). Tapi jika situs Anda
Documents, dan sebagainya (hm, nama-nama diakses melalui komputer lain, URL ini tidak akan
folder ini hanya contoh). Jika Anda membutuhkan bisa diakses. Kenapa? Karena URL tersebut adalah
file-file tertentu yang terletak di folder-folder lain, absolute path. Dan tentu saja di komputer lain file
Anda harus memindahkannya atau meng-copynya artikel.html di folder C:\situsku\portofolio tersebut
ke Web-Folder situs Anda. Misalnya dipindah/dicopy tidak tersedia.
ke C:\situsku\portofolioku.
5. Setelah selesai mendesain, upload SEMUA (Ingat, (2) Ketika mengakses file HTML tertentu (yang
semua!) file dan folder yang terletak di folder situs masih berada di komputer Anda) dengan browser,
Anda. Tapi jika di folder situs Anda tersebut Anda mungkin masih melihat URL seperti
terdapat file-file khusus (misalnya catatan tentang file:///C:/situsku/portofolio/artikel.html di status
desain Anda) yang tidak memiliki link ke file bar. Padahal Anda telah menulis tag dengan cara
apapun, maka file ini tidak perlu di-upload. yang benar, misalnya <a
6. Jangan sekali-kali di situs Anda ada tag yang isinya href="situsku/portofolio/artikel.html">teks</a>.
- misalnya - seperti ini: <a Jangan khawatir! Alamat URL itu akan berubah jika
href="file:///C:/situsku/portofolio/artikel.html"</a> nanti file tersebut sudah Anda upload ke internet.
. Path seperti itu adalah termasuk kategori absolute 7. Dalam membuat tag-link, gunakan relative path
path dan biasanya muncul jika Anda mendesain web untuk link-link yang menuju halaman-halaman lain
dengan selain HTML editor (misalnya program yang masih berada di situs Anda. Ini akan berguna
Macromedia Dreamweaver atau Microsoft jika suatu saat situs Anda pindah alamat, maka
Frontpage) dan path itu biasanya terbentuk dengan Anda tidak perlu mengubah tag-link satu-persatu.
sendirinya. Untuk mengatasinya, Anda cukup Sementara absolute path digunakan untuk link yang
mengubahnya menjadi relative path seperti ini: <a menuju situs-situs lain, atau dokumen di situs-situs
href="situsku/portofolio/artikel.html"</a>. (Baca lain.
18
TRAINING PEMBUATAN WEB DASAR HTML
Kesimpulan
Dengan mengikuti "7 aturan" di atas, Insya Allah Anda
tidak akan menemukan lagi masalah seperti di atas
(image tidak muncul dan link tidak bisa diklik). Sekarang
Anda pun mungkin sudah paham, bahwa ada beberapa
kemungkinan yang menyebabkan terjadinya error di atas:
1. Anda membuat link yang terhubung ke folder selain
folder situs Anda (seperti poin 6 di atas).
2. Anda membuat link yang terhubung ke file lain yang
masih berada di folder situs Anda, misalnya file
fotoku.jpg yang terletak di C:\situsku\images. Tapi
Anda tidak meng-upload file fotoku.jpg - atau folder
\images ke internet (Anda melanggar aturan nomor
5 di atas, hehehehe......).
3. Ini sebuah contoh: Anda telah meng-upload file
fotoku.jpg dan folder \images, tapi salah letak. Jika
folder \images di komputer Anda terletak di
C:\situsku\images, maka setelah di-upload ke
server situs Anda, folder \images ini harus
diletakkan di root_folder\images (nama root_folder
ini hanyalah istilah. Nama sebenarnya bisa berbeda-
beda di setiap server). Jangan sampai diletakkan
sejajar dengan root_folder, atau di lokasi lain
seperti root_folder\portofolio\images, dan
sebagainya.
4. Kemungkinan-kemungkinan lain. Tapi ketiga poin di
atas adalah kemungkinan yang paling umum.
Nah, semoga mulai sekarang, anda tidak mengalami lagi
masalah "image tidak muncul" atau "link tidak bisa
diklik".
19
TRAINING PEMBUATAN WEB DASAR HTML
Tips & Panduan
• Untuk mempermudah pemahanan Anda dalam pelajaran
HTML, sebaiknya anda mengetik semua tag dengan
progran Notepad (Pada Windows 98, program ini bisa
ditemukan di Start >> Programs >> Accessories >>
Notepad).
• Semua tag HTML yang ditampilkan di pelajaran ini,
hendaknya Anda ketik ulang, jangan di-copy & paste.
Mengetik ulang memang merepotkan, namun ini akan
lebih memudahkan Anda dalam memahami materi
pelajaran tersebut.
• Setelah selesai mengetik tag-tag HTML tersebut di
Notepad, simpanlah file tersebut dengan prosedur
seperti ini:
o Klik menu File >> Save As (bukan File >> Save).
o Pada isian "Save as type", pilih "All Files (*.*)".
o Ketikkan nama file, misalnya index.html (Ingat!
ekstension .html [atau .htm juga boleh] harus
dicantumkan. Jika tidak, file tersebut akan
dianggap sebagai file teks biasa [text only], bukan
file HTML).
o Klik Save.
• Tag-tag HTML yang ditampilkan di materi pelajaran ini
sengaja diberi warna khusus. Ini hanya bertujuan untuk
memudahkan pemahaman Anda. Jadi ketika mengetik
ulang tag-tag tersebut di Notepad, Anda tidak perlu
menyamakan warnanya Lagipula di Notepad Anda
20
Anda mungkin juga menyukai
- MODUL BELAJAR Muatan Lokal (Web Design)Belum ada peringkatMODUL BELAJAR Muatan Lokal (Web Design)8 halaman
- Teknik Pencurian Data Dan Cara Mengatasinya100% (1)Teknik Pencurian Data Dan Cara Mengatasinya2 halaman
- Tahapan Perjalanan Manusia Menuju Hari Kebangkitan Di AkhiratBelum ada peringkatTahapan Perjalanan Manusia Menuju Hari Kebangkitan Di Akhirat5 halaman
- HTML (Hypertext Markup Language) Merupakan Bahasa Pemrograman Web Yang Digunakan Untuk Membuat Halaman SitusBelum ada peringkatHTML (Hypertext Markup Language) Merupakan Bahasa Pemrograman Web Yang Digunakan Untuk Membuat Halaman Situs4 halaman
- 13 Cara Buka WEB Yang Di Blok - 13 Way To Open A Blocked WEBBelum ada peringkat13 Cara Buka WEB Yang Di Blok - 13 Way To Open A Blocked WEB3 halaman
- Belajar HTML Lengkap Dengan Script HTML Dan Materi HTMLBelum ada peringkatBelajar HTML Lengkap Dengan Script HTML Dan Materi HTML2 halaman
