Basic html

1,426 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,426
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
60
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Basic html

  1. 1. TRAINING 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: Oleh: o Klik menu File >> Save As (bukan File >> Save). ROBI FERDIANTO o Pada isian "Save as type", pilih "All Files (*.*)". o Ketikkan nama file, misalnya index.html WORKSHOP TEKNIK ELEKTRO (Ingat! ekstension .html [atau .htm juga UNIVERSITAS BRAWIJAYA MALANG boleh] harus dicantumkan. Jika tidak, file 2003 1
  2. 2. 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>, tagPelajaran #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 namasini 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 biasaSaya akan langsung menjelaskan tentang tag-tag dasar Anda temukan di pojok kiri atas browser Anda. Coba AndaHTML. 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
  3. 3. TRAINING PEMBUATAN WEB DASAR HTMLsudah termasuk "pelajaran tingkat lanjut", jadi belum membuat awal paragraf tersebut agak menjorok kesaatnya dibahas sekarang :). dalam. Untuk latihan, silahkan Anda ketik tag berikut ini di Pada file HTML, pergantian paragraf sungguhNotepad, 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 tomboltersebut 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 tidakistimewanya? semua tag pembuka <...> harus diakhiri dengan tag Jawabannya adalah: Struktur content dalam file penutup </...>. Nah, tag <b> dan <p> inilah dua diHTML berbeda dengan struktur content dalam file-file antara contohnya. Anda tidak perlu mengakhirinyajenis 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> perluparagraf 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 teksUntuk menandai perbedaan paragraf, biasanya kita (alignment) dan sebagainya. Masalah alignment ini akan 3
  4. 4. TRAINING PEMBUATAN WEB DASAR HTMLdibahas dalam pelajaran berikutnya. Tapi untuk sekadarcontoh, 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 menempatkanNah, 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 IMAGEmempraktekkan contoh tag HTML di bawah ini. Ketik diNotepad, 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 dari paragraf kedua. <img src="alamat_path_image_tersebut"> <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
  5. 5. TRAINING PEMBUATAN WEB DASAR HTML Gampang, bukan? Tapi jangan puas dulu, karena Boder="0" artinya, image tersebut tidak membutuhkantag di atas hanyalah tag dasar atau yang paling standar. border. "logo situsku" merupakan teks yang akan tampilPadahal 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 tidakkarena 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 - bukanlahheight="100" border="0" alt="logo situsku"> merupakan tag. Ia hanya sebagai elemen yang diikutsertakan pada tag tertentu. Sebagai contoh, di siniImage foto.jpg yang saya tampilkan di sini, berukuran saya membuat tag <p> yang di dalamnya terkandungwidht=400 dan height=100. Jika Anda tidak perlu elemen perataan teks. Seperti sudah Anda baca dimerubah ukuran ini, sebenarnya unsur width dan height Pelajaran 2 (tentang Pergantian Baris dan Paragraf), tagtidak perlu ditampilkan. Tapi jika Anda hendak mengubah <p> yang diberi elemen lain harus disertai dengan tagukurannya, maka kedua elemen ini wajib disertakan. penutup </p>.Jangan lupa menuliskan ukuran yang Anda inginkan pada Berikut adalah contoh tag alignment yang digabungtag-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 bisadipersingkat menjadi:<img src="http://www.jonru.com/images/guest.gif" border="0",alt="logo situsku"> (tanpa unsur widht dan height) 5
  6. 6. 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 yangalt="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></body> mengatur jenis huruf:</html> <font face="jenis huruf" size="ukuran huruf" color="warna 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". Bagiancenderung 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 verdanamisalnya sudah membuat jenis huruf yang bagus-bagus tidak ada, yang akan tampil adalah arial. Jika arialuntuk tulisan-tulisan di halaman web Anda, seperti tidak ada juga, maka penggantinya adalahFutura, 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 punkomputernya tidak tersedia font Futura, Freehand, dan 6
  7. 7. 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 Elemen yang tak kalah penting untuk font adalah menggunakan tag <h1>, <h2> dan seterusnya. Semakinfont style, seperti bold (huruf tebal), talic (huruf miring), besar angka yang terdapat setelah "h", maka ukurandan underline (bergaris bawah). Huruf bergaris bawah hurufnya semakin kecil (berbanding terbalik). Sebagai(underline) tidak terlalu umum digunakan pada halaman contoh: <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
  8. 8. 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 cocokkantertentu yang terdiri dari gabungan warna RGB, dan dengan kode warnanya.diawali dengan tanda #. Sebagai contoh: #000000 adalah <p>warna hitam, #FFFFFF adalah putih, #0000FF = biru, dan <font face="Arial" size="2" color="#FF0000">Ini adalah tulisan 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 adalahhuruf/font. Masih banyak unsur di dalam halaman web tulisan dengan huruf Verdana, ukuran 2, warna huruf biru, danyang 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
  9. 9. TRAINING PEMBUATAN WEB DASAR HTML Link adalah teks atau gambar (image) tertentu di (http://www.jonru.com/images/guest.gif), dan image inidokumen HTML, yang bila diklik akan membawa kita ke diberi link menuju Yahoo!. Begini tag-nya: (coba Andadokumen lainnya, atau ke bagian tertentu pada dokumen pelajari sendiri bagaimana proses "perkawinan" kedua tagyang sama. Ada beberapa pembahasan yang cukup tersebut)penting mengenai link, dan akan dibahas satu-persatu. <a href="http://www.yahoo.com/"><imgKarena 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 tagLink Secara Umum image. Misalnya seperti ini: Sebagai permulaan, kita akan bicara dulu mengenai <a href="http://www.yahoo.com/"><imglink 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 jikaTeks atau image yang diapit oleh tag <a> dan </a> elemen ini tidak dicantumkan, maka image tersebut akantersebut bisa berupa teks atau image apa saja, terserah memiliki border yang mungkin mengganggu penampilanAnda. Tapi Anda juga harus memikirkan bahwa teks yang image tersebut di browser. Tapi jika Anda memangtertulis atau gambar yang tercantum di situ haruslah ada menyukai kehadiran border tersebut, ini tentu lainhubungannya dengan link tersebut. ceritanya :)Sebagai contoh, berikut adalah tag untuk membuat linkmenuju 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 pembahasanmenuju Yahoo!</a> mengenai link. Untuk lebih jelasnya, coba Anda simakBoleh-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.shtmlSekarang, bagaimana membuat image yang memiliki merupakan path yang lengkap. Path itu akan selalulink? Caranya gampang saja: Misalnya pada link untuk seperti itu, di manapun ia ditempatkan. Nah, inilah yangYahoo! di atas, Anda cukup mengganti teks "Ini adalah disebut sebagai absolute path.link menuju Yahoo!" dengan tag image. Sementara relative path adalah alamat path yangSebagai 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
  10. 10. TRAINING PEMBUATAN WEB DASAR HTMLAnda bingung? Jangan khawatir. Saya sudahmenyediakan 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.htmlmembuat penjelasan berdasarkan gambar tersebut (C:situskuportofolioartikel.html), lalu Anda(gambar akan terbuka dengan window baru yang kecil. hendak membuat link menuju index.html. MakaJadi jangan khawatir jika halaman ini akan tertimpa). tag-nya adalah:Pada gambar tersebut terlihat sebuah struktur situs, dimana 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 inginfile, yaitu index.html, dan profilku.html. Selain itu membuat link menuju file profilku.html. Kedua fileterdapat 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 subfolderlagi, yaitu fiksi dan nonfiksi. <a href="profilku.html">Profilku</a>Sekarang, mari kita meneruskan materi ini dengan 5. Contoh terakhir, Anda bekerja pada filepemberian contoh kasus (agar memudahkan desainweb.htmlpemahaman). (C:situskuportofoliodesainweb.html), dan ingin 1. Anda sedang bekerja di file index.html membuat link menuju image fotoku.jpg (C:situskuindex.html). Di file ini Anda membuat (C:situskuimagesfotoku.jpg). Tag-nya adalah: tag-link yang menuju ke file desainweb.html (C:situskuportofoliodesainweb.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:situskuartikelkunonfiksinonfiksi-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:situskuindex.html). Maka tag-nya adalah: www.situsmu.com/tentangmu/, maka path 10
  11. 11. TRAINING PEMBUATAN WEB DASAR HTMLportofolio/desainweb.html akan berubah pula menjadi biasa, kita bisa mengganti teks dengan kata atau kalimatURL apa saja, bahkan gambar/image pun bisa. Yang pentinghttp://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:webmaster@yahoo.com">Kirim e-mailpath-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 kelink. 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, danUntuk contoh nomor 2 di atas, file nonfiksi-02.html alamat e-mail webmaster@yahoo.com tercantum di isianberada 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 terisiindex.html, maka pada path-nya harus dibuat "kode otomatis. Caranya, Anda tinggal menambahkan tagpenyesuaian" agar path tersebut bisa secara tepat masuk tertentu setelah alamat emailnya, yaitu:ke folder yang berisi file index.html. Satu kali tanda ../ ?subject=teksberarti link tersebut mundur satu subfolder. Dua kali ../ Contoh:berarti mundur dua subfolder. Begitu seterusnya. <a href="mailto:webmaster@yahoo.com?subject=A question about Yahoo!">Kirim e-mail ke WebmasterE-mail Link Yahoo!</a>Berikut kita akan mempelajari salah satu jenis link Berikut adalah hasilnya (silahkan diklik): Kirim e-mail kelainnya, 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://webmaster@yahoo.com">text</a>alamat dokumen HTML tertentu. • E-mail link yang diklik akan terbuka pada windowCara 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, danPerhatikan, bahwa unsur mailto:alamat_email merupakan sebagainya. Karena e-mail client berbeda denganbagian penting yang membedakan antara email link browser, maka otomatis link itu akan terbuka padadengan jenis link yang kita bahas di atas. Dan seperti 11
  12. 12. 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 yangBaca panduan materi ini. Klik DI SINI! telah diberi bookmark.Bookmark atau Anchor Ada dua tag (yang berpasangan) yang diperlukan dalamPada 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 pembuatanExplorer. Sementara Macromedia Dreamweaver bookmark (silahkan diikuti langkah-langkahnya):menamainya Anchor. 1. Buatlah sebuah halaman web. Pada bagian atasBaiklah, sepertinya saya lebih tertarik menggunakan halaman tersebut, ketiklah tulisan Buku Tamu, laluistilah 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 tagakrab dengan bookmark ini. Misalnya ketika kita <p> sebanyak mungkin, misalnya 100 buah. Inimembaca sebuah buku, dan kita berhenti pada halaman berguna untuk memudahkan Anda dalam mengetes73, maka kita melipat bagian ujung halaman ini. link dan bookmark tersebut. Pada tag <p> yang keGunanya, untuk menandakan bahwa kita sudah membaca 100 misalnya, ketiklah tulisan Ini dia bukusampai halaman 73. Nah, "lipatan bagian ujung buku" ini tamunya, lalu tulisan ini diberi tag-bookmark sepertimerupakan 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 dilainnya) yang diberi tanda tertentu. Lalu jika sebuah link bawahnya, misalnya 100 buah. Anda akan tahu 12
  13. 13. 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 yangNah, gampang, bukan? Perlu dicatat bahwa untuk contoh kita tuju dengan link target _top. Jadi kalau kita ingintag di atas, nama bookmark-nya adalah 01. Anda bisa membuat link target _top, sebaiknya tidak usah ditulismemakai 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. _blankTIP: Pada bagian akhir halaman web Anda, Anda bisa Ini adalah link target di mana halaman URL yang kita klikmembuat link, yang jika diklik akan membawa Anda ke akan terbuka di sebuah window yang baru, atau tidakbagian 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 _tophref="#">TOP</a> (tanpa nama), dan Anda tidak perlu dan _blank, coba Anda klik DI SINI untuk membukamembuat 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 keduaKalau kita mengklik suatu link tertentu di halaman web, link tersebut, dan Anda akan melihat perbedaan antarabiasanya 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 memilikisebelumnya tidak "tertimpa". Nah, cara membuka URL link target _blank secara default? Artinya, setiapinilah yang disebut sebagai link target. kali Anda membuat link, otomatis link tersebutAda beberapa jenis link target, tapi kali ini kita akan memiliki target _blank. Hal ini bisa dilakukanmembahas dua saja. Kenapa? Karena yang sisanya dengan membuat tag <base target="_blank"> padaberhubungan dengan frame, yang belum dibahas dalam tag <head>. Berikut adalah contohmateri ini. penempatannya: 13
  14. 14. 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:joko@yahoo.com">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:joko@yahoo.com?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
  15. 15. TRAINING PEMBUATAN WEB DASAR HTML 1. Ali <p>Pak Ahmad memiliki tiga orang anak, yaitu:</p> 2. Andi <ol> 3. Agus <li> AliAtau: <li> AndiBahan-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 disebabkanJika 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 tidakmembuatnya untuk dokumen HTML? Jawabannya dapat apa-apa.Anda temukan pada tulisan ini. • Tag <li> berfungsi untuk memunculkan angkaSeperti Anda lihat di atas, secara umum daftar urutan urutan 1, 2, 3 dan seterusnya. Tanpa adanya tagpada dokumen HTML terbagi atas dua jenis, yaitu (1) <li>, maka angka 1, 2, 3 dan seterusnya tidak akandaftar 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 mudahUntuk daftar urutan angka, tag HTML yang digunakan membuat tag untuk daftar urutan bullet. Berikut adalahadalah: <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> semenbrowser akan membuat urutan angka 1,2,3 dan <li> batu bataseterusnya pada bagian-bagian yang berada di antara <li> pasir<ol> dan </ol> tersebut. Demikian pula yang terjadi <li> dan sebagainyapada tag <ul>....</ul>, browser akan membuat urutan </ul>dengan karakter tertentu di depannya. Secara umum, hanya demikianlah "rumus" untukTapi perlu diketahui, tag <ol> dan <ul> ini tidak bisa membuat daftar urutan dengan bahasa HTML. Jikaberdiri sendiri. Mereka harus didampingi oleh tag <li> misalnya Anda hendak membuat daftar urutan yangyang 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
  16. 16. 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 fileBerikut 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> demamanak, 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 TeoriAda yang berminat? </ul></ol> <li> Bab IICoba Anda perhatikan, pada contoh di atas terdapat satu <ul>tag <ol>....</ol> yang mengapit tiga sub-tag <li>. Dua <li> Pembahasan Intitag <li> yang pertama (Agus dan Hendra) masing-masing <li> Analisis dan Permasalahanmengapit sub-tag <li> yang berbeda-beda pula. Dari <li> Pemecahan Masalah 16
  17. 17. 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" tidakTip: 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 Andaseringkali dihadapi oleh para desainer web pemula: patuhi di dalam mendesain halaman web. Berikut adalahMereka 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 dalamgambar tidak bisa tampil, dan semua (atau beberapa link folder khusus. Misalnya: C:situsku (ini bisa disebuttidak bisa diklik). Begitu link tersebut diklik, muncul sebagai root folder atau folder utama). Jika Andapesan error "page not found". Di mana letak membangun halaman web dengan Macromediakesalahannya? Dreamweaver, Anda bisa membangun sebuah "situsSi desainer merasa bahwa ia telah membuat alamat URL virtual" di harddisk komputer Anda dengandengan benar. Ketika dites di komputer (yang belum mengklik menu Site >> Define Sites. Sedangkan diterkoneksi ke internet), link tersebut bisa diklik. Semua Microsoft Frontpage, Site ini diberi nama Web Foldergambar/image juga bisa tampil. Kenapa setelah di-upload dan bisa dibuat dengan mengklik menu File >> Newke internet, semuanya jadi kacau? >> Web.Untuk menjelaskan masalah ini, terlebih dahulu saya 2. Jika Anda membutuhkan folder-folder baru, makaperlu membahas tentang salah satu sifat file HTML yang folder-folder ini pun harus diletakkan sebagaiberbeda 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 yangsecara teknis berbeda dengan image pada file-file jenis berisi semua portofolio Anda, maka Anda bisalain, misalnya Microsoft Word. Jika Anda memasukkan memasukkannya ke folder portofolioku (Anda bisafoto (misalnya file fotoku.jpg) ke file naskahku.doc, maka 17
  18. 18. TRAINING PEMBUATAN WEB DASAR HTML memakai nama lain), dan alamat URL-nya adalah penjelasan tentang relative path di Materi 05). C:situskuportofolioku. 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:situskuportofolioku, Anda, URL seperti <a C:situskuimages, C:situskugaleri-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:situskuportofolioartikel.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:situskuportofolio tersebut ke Web-Folder situs Anda. Misalnya dipindah/dicopy tidak tersedia. ke C:situskuportofolioku. 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
  19. 19. TRAINING PEMBUATAN WEB DASAR HTMLKesimpulanDengan mengikuti "7 aturan" di atas, Insya Allah Andatidak akan menemukan lagi masalah seperti di atas(image tidak muncul dan link tidak bisa diklik). SekarangAnda pun mungkin sudah paham, bahwa ada beberapakemungkinan 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:situskuimages. 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:situskuimages, maka setelah di-upload ke server situs Anda, folder images ini harus diletakkan di root_folderimages (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_folderportofolioimages, dan sebagainya. 4. Kemungkinan-kemungkinan lain. Tapi ketiga poin di atas adalah kemungkinan yang paling umum.Nah, semoga mulai sekarang, anda tidak mengalami lagimasalah "image tidak muncul" atau "link tidak bisadiklik". 19
  20. 20. 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

×