Scribd
Unggah
2 tayangan

Pemrograman Web 2 P

kita winnnn oke!

Diunggah oleh

farizkhocan
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
2 tayangan

Pemrograman Web 2 P

kita winnnn oke!

Diunggah oleh

farizkhocan
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 23

i

Mastering Kode
HTML

Edisi Kedua

Rio Astamal

© Copyright 2005-2006 www.rahasia-webmaster.com


Bab 1 - Mengenal HTML Lebih Jauh 1

Bab 1
Mengenal HTML Lebih Jauh
Setelah membaca materi pada bab 1 ini anda diharapkan dapat mengerti tentang:

ƒ Pengertian HTML
ƒ Menggunakan tag pada HTML
ƒ Mengetahui daftar tag pada HTML

Pengertian HTML

Seperti yang telah dijelaskan sebelumnya bahwa HTML(Hyper Text Markup Language) adalah
simbol-simbol atau tag-tag yang dituliskan dalam sebuah file yang dimaksudkan untuk
menampilkan halaman pada web browser. Tag-tag HTML selalu diawali dengan <x> dan diakhiri
dengan </x> dimana x tag HTML seperti b, i, u dan sebagainya. Namun ada juga tag yang
tidak diakhiri dengan tanda </x> seperti tag <br>, <input> dan lainnya.

Sebuah halaman website akan diapit oleh tag <html>……</html>. File-file HTML selalu
berakhiran dengan ekstensi *.htm atau *.html. Jadi jika anda mengetik sebuah naskah dan
menyimpannya dengan ekstensi *.html maka anda membuat file yang berformat HTML.

Menggunakan Tag pada HTML

Beberapa contoh penggunaan tag HTML,


Contoh Hasil
<b>Ini tulisan tebal</b> Ini tulisan tebal
<i>Ini tulisan miring</i> Ini tulisan miring
<u>Ini tulisan bergaris bawah</u> Ini tulisan bergaris bawah
Ini baris 1<br>Ini baris 2 Ini baris 1
Ini baris 2
Ini garis horizontal <hr> Ini garis horizontal
Ada beberapa tag yang memilki atribut didalamnya, seperti tag <font>, <table>, <input> dan
sebagainya. Pada tag font ia memiliki beberapa atribut diantaranya atribut: color, size, face.
Untuk lebih memahami atribut lihatlah contoh berikut ini.

<font color=”red” face=”Arial” size=”12”>Ini Font Arial berwarna merah dan berukuran 12
pt</font>

hasil Î Ini Font Arial berwarna merah dan berukuran 12 pt

ƒ Atribut color digunakan untuk menentukan warna tulisan.


ƒ Atribut face digunakan untuk menentukan jenis huruf.
ƒ Atribut size digunakan untuk menentukan ukuran huruf.

Temukan rahasia menjadi webmaster dalam 30 hari hanya di http://www.rahasia-webmaster.com/


Bab 1 - Mengenal HTML Lebih Jauh 2

Jika anda lihat bahwa atribut color berada pada awal, lalu yang kedua adalah face dan yang
terakhir adalah size. Anda tidak perlu memperdulikan urutan atribut tersebut karena browser
hanya membaca isi dari properi bukan urutan atributnya.

Daftar Tag pada HTML

Berikut ini adalah tabel tag-tag HTML dan fungsinya:

Tag Utama

Tag Atribut Deskripsi


<html>
Baris paling atas dari setiap file HTML
</html>
<head>
Informasi umum dari sebuah halaman web
</head>
<title>
Judul halaman. Terdapat pada head
</title>
background
bgcolor
bgsound
font
link
<body>
alink Settingan atribut untuk seluruh dokumen.
</body>
vlink
topmargin
leftmargin
marginheight
marginwidth

Modifikasi Teks

Tag Deskripsi Contoh


<b> </b> Teks tebal Teks tebal
<i> </i> Teks miring Teks miring
<u> </u> Teks garis bawah Teks garis bawah
<pre> </pre> Preformatted teks Contoh teks

<h1> </h1> Header 1 Header 1


<h2> </h2> Header 2 Header 2
<h3> </h3> Header 3 Header 3
<h4> </h4> Header 4 Header 4
<h5> </h5> Header 5 Header 5
<h6> </h6> Header 6 Header 6

<sub> </sub> Subscript Subscript


Super
<sup> </sup> Superscript script

Font

Temukan rahasia menjadi webmaster dalam 30 hari hanya di http://www.rahasia-webmaster.com/


Bab 1 - Mengenal HTML Lebih Jauh 3

Tag Atribut Deskripsi


color
<font>
size Mengubah gaya suatu huruf.
</font>
name

Links

Tag Atribut Deskripsi


href
target
style
<a> </a> Membuat link ke dokumen atau situs lainnya.
class
name
id

Gambar

Tag Atribut Deskripsi


src
alt
name
<img> Menampilkan sebuah gambar
border
height
width

Formatting

Tag Deskripsi Contoh


Digunakan untuk
<blockquote>
mengatur text dan Sample of text in a block quote format
</blockquote>
gambar dalam suatu tag
Ordered List (digunakan 1. Item 1
<ol> </ol>
dengan <li>)
Unordered List
• Item 1
<ul> </ul> (digunakan dengan
<li>)
<li> Elemen List
<dd> </dd> Definition List Sample text
<dt> Definition Term Sample text
<dd> Definition Description Sample text
Sample
<p> </p> Paragraf
text
Sample
<br> Ganti baris
text
<hr> Garis horizontal
<center>
Menengahkan elemen Sample
</center>

Temukan rahasia menjadi webmaster dalam 30 hari hanya di http://www.rahasia-webmaster.com/


Bab 1 - Mengenal HTML Lebih Jauh 4

Tabel

Tag Atribut Deskripsi


border
cellpadding
cellspacing
width
height
name
<table> </table> Mengatur semua elemen table
id
title
bgcolor
background
align
valign
height
bgcolor
background
<tr> </tr> Membuat baris baru
align
valign
title
height
width
bgcolor
background
<td> </td> align Membuat kolom
valign
title
colspan
rowspan
height
width
bgcolor
background
<th> </th> align Header(kepala tabel). Otomatis ke tengah dan tebal.
valign
title
colspan
rowspan
height
width
<tbody> align
Format yang berlaku bagi cell yang diapit tag.
</tbody> valign
bgcolor
background
height
width
align
<colgroup>
valign Format yang berlaku bagi kolom
</colgroup>
bgcolor
background
colspan

Temukan rahasia menjadi webmaster dalam 30 hari hanya di http://www.rahasia-webmaster.com/


Bab 1 - Mengenal HTML Lebih Jauh 5

Form

Tag Atribut Deskripsi


<form>
</form> method
action Mengatur elemen dari form
name

text
password
hidden
radio
<input type=> Variasi dari tipe elemen form
checkbox
submit
image
reset
name
value
text Sample tex
width
maxlength
name
value
password ***********
width
maxlength
name
hidden Digunakan untuk membuat variable hidden.
value

name Radio 1
radio
value
Radio 2
name
Check 1
checkbox value
checked Check 2
submit value Tombol

src
height
width
image
alt
name
border
reset value Reset

<select> name
Membuat combo-box. Digunakan bersama dengan option
</select> size
selected
<option> name Option 1
value
<font face="Arial, Helvetica,
name
sans-serif">Text
<textarea> rows area box. Text is typed betw ee
</textarea> cols the tags</font>
wrap
wrap off no wrap

Temukan rahasia menjadi webmaster dalam 30 hari hanya di http://www.rahasia-webmaster.com/


Bab 1 - Mengenal HTML Lebih Jauh 6

virtual word wrap, sent as one line


physical word wrap, sent with breaks

Anda tidak perlu menghafal semua tag tersebut, nanti malah kepala anda malah pecah!. Cukup
hafalkan yang penting-penting saja seperti <table><form><input><ul>. Tidak hafal pun tidak
apa-apa kan kita bisa melihat daftar kalau lupa, yang penting kita paham, BETUL?.

Temukan rahasia menjadi webmaster dalam 30 hari hanya di http://www.rahasia-webmaster.com/


7

BERIKUTNYA
Pada bab selanjutnya kita akan membahas lebih detail tentang penerapan property dari tag
yang sering kita gunakan.

**********

Temukan rahasia menjadi webmaster dalam 30 hari hanya di http://www.rahasia-webmaster.com/


Bab 2 - Menggunakan Atribut dari Tag 8

Bab 2
Menggunakan Atribut dari Tag

Sebelum memulai sekedar mengingatkan apakah anda sudah membuat folder di drive C:\ yang
bernama HTML jika tidak, buatlah sekarang. Lalu buatlah folder yang bernama bab 1, bab2 dan
seterusnya. Jika anda praktik pada bab 2 maka simpanlah file anda pada folder bab 2.
Demikian untuk seterusnya.

Pada bab 2 ini materi yang diharapkan dapat anda kuasai antara lain:
ƒ Menggunakan berbagai attribut dari tag diantaranya:
ƒ Tag p, font, table, form, input, select, option, a, body, img, ul, ol, li dan attribut
universal

Contoh-contoh penggunaan tag dan atributnya

Pada bab sebelumnya telah anda pelajari macam-macam atribut dari tag yang terdapat pada
HTML. Sekarang saatnya kita menerapkan atribut tersebut dalam sebuah file. Untuk lebih
memudahkan anda dalam memahami kita langsung saja pada contoh.

• Pertama jalankan software “PHP DESIGNER 2006”


• Klik menu File – New – HTML/XHTML

Maka akan nampak sebuah ruang kerja mirip dengan dengan Microsoft Word. Untuk contoh
yang pertama ini kita akan menggunakan atribut dari tag <p>…</p>.

A. Tag <p>…</p>

Tag <p> digunakan untuk membuat paragraf dalam sebuah halaman web. Kita semua tahu
kalau paragraph ada yang bertipe rata kiri, tengah, kanan dan justify. Untuk lebih memperjelas
ketik kode di bawah ini.

<html>
<head>
<title>Atribut Tag <P></title>
</head>
<body>

<p align="left"><b>Teks ini berada di kiri</p>


<p align="center">Teks ini berada di tengah</p>
<p align="right">Teks ini berada di kanan</b></p>

<p align="justify">Paragraph ini bertipe justify. Dimana semua teks akan dibuat
lurus sama dengan batas tepi halaman. Oh ya, tag &lt;p&gt;&lt;/p&gt; merupakan
default atau bentuk baku tag &lt;p&gt;&lt;/p&gt; dimana teks atau paragraf akan
berformat rata kiri. Jika anda tidak memberi atribut <i>align</i> pada tag
&lt;p&gt; maka browser akan menganggap rata kiri.</p>

Temukan rahasia menjadi webmaster dalam 30 hari hanya di http://www.rahasia-webmaster.com/


Bab 2 - Menggunakan Atribut dari Tag 9

</body>
</html>

Setelah selesai simpan file tersebut dengan mengklik menu File – Save. Akan muncul kotak
dialog Save, arahkan ke drive C:\ lalu HTML(jika anda membuat folder lain silahkan simpan di
folder anda tersebut) lalu Bab 2. Pada isian File Name isikan tag_p.html dan pastikan Save as
Type adalah HTML Document. Untuk menjalankan anda cukup tekan tombol F5 maka akan
muncul output dari kode anda.

Gambar 2.0 file tag_p.html saat desain time.

Gambar 2.1 file tag_p.html saat dijalankan

Namun dalam hal ini saya tidak menggunakan browser built ini pada PHP DESIGNER 2006.
Melainkan browser eksternal seperti Internet Explorer atau FireFox. Buka IE atau FireFox klik
File – Open, arahkan dimana anda menyimpan file tag_p.html tadi. Hasilnya akan terlihat
seperti gambar 2.1.

Temukan rahasia menjadi webmaster dalam 30 hari hanya di http://www.rahasia-webmaster.com/


Bab 2 - Menggunakan Atribut dari Tag 10

B. Tag <font>…</font>

Fungsi tag <font> adalah untuk memanipulasi baik jenis, ukuran, dan warna huruf. Pada bab 1
telah kita singgung penggunaan atribut font.
Namun kita akan lebih bereksperimen dengan atribut ini.

Seperti biasa klik File – New – HTML/XHTML.

Ketik kode di bawah ini.

<html>
<head>
<title>Atribut dari Tag Font</tile>
</head>
<body>
ENTER
<p><font face="Arial">Ini Font Arial</font></p>

<p><font face="Arial"><i>Ini Font Arial dan miring</i></font></p>

<p><font face="verdana" size="4" color="blue"><b>Ini Font Verdana berukuran 12 pt


berwarna biru sekaligus tebal</b></font>

<p align="center"><font face="Tahoma" color="red"><b>Ini Font Tahoma berwarna


merah, tebal dan berada di tengah</b></font><p>

<p align="center"><font face="Arial" color="red">Ini Font Arial berwarna Merah,


</font><font face="Verdana" color="blue">Sedangkan ini adalah font Verdana
berwarna biru</font></p>

</body>
</html>

Nb: Tanda Enter pada kode diatas tidak berpengaruh pada tampilan/output pada browser. Enter
digunakan agar kode mudah dibaca.

Gambar 2.2 Output file tag_font.html

Temukan rahasia menjadi webmaster dalam 30 hari hanya di http://www.rahasia-webmaster.com/


Bab 2 - Menggunakan Atribut dari Tag 11

Setelah selesai simpan dengan nama tag_font.html simpan pada folder bab 2 sama dengan
tag_p.html. Output dari kode di atas dapat anda lihat pada gambar 2.2.

C. Tag <table>...</table>

Tag <table> adalah salah satu tag yang memiliki atribut terbanyak. Lihat tabel daftar tag pada
bab 1 untuk melihat daftar atributnya. Dalam tag <table> juga terdapat 2 tag yang penting
yang penting yaitu tag <tr></tr> untuk membuat baris dan tag <td></td> untuk membuat
kolom.Tag <table> adalah tag yang penting dalam pendesainan sebuah tampilan situs. Jadi
anda harus cukup menguasai tag ini.

Gambar 2.3. Output file tag_tabel.html

OK, sekarang buatlah file baru seperti biasa klik File – New – HTML/XHTML. Ketik kode
dibawah ini. Jangan tegang santai saja....!.

<html>
<head>
<title>Atribut dari tag tabel</title>
</head>

Temukan rahasia menjadi webmaster dalam 30 hari hanya di http://www.rahasia-webmaster.com/


Bab 2 - Menggunakan Atribut dari Tag 12

<body>
<p><b>Membuat Tabel</b></p>
<table border="1" bordercolor="black" bgcolor="white" cellpadding="8"
cellspacing="0" width="100%">
<tr> <!-- <tr> artinya membuat sebuah baris -->
<td>Ini kolom 1 pada baris 1</td> <!-- <td> = membuat sebuah kolom. -->
<td>Ini kolom 2 pada baris 1</td> <!-- </td> mengakhiri sebuah kolom -->
</tr> <!-- mengakhiri sebuah baris -->
<tr>
<td>Ini kolom 1 pada baris 2</td>
<td>Ini kolom 2 pada baris 2</td>
</tr>
</table>

<p><b>Contoh 2: Membuat Tabel</b></p>


<table border="1" bordercolor="black" bgcolor="white" cellpadding="8"
cellspacing="0" width="100%">
<tr bgcolor="yellow">
<td align="center">Ini kolom 1 pada baris 1</td>
<td align="right">Ini kolom 2 pada baris 1</td>
</tr>
<tr>
<td align="center" bgcolor="red"><font color="white">Ini kolom 1 pada baris
2</font></td>
<td align="right">Ini kolom 2 pada baris 2</td>
</tr>
</table>

<p><b><font color="blue">Tabel sebagai bingkai dari paragraf</font></b></p>


<table border="1" style="border-collapse: collapse" cellpadding="8"
bgcolor="white" width="100%" bordercolor="black">
<tr>
<td><p>Tabel memiliki peranan sangat penting dalam tampilan sebuah situs web.
Tanpa tabel desainer akan mengalamai kesulitan dalam mendesain sebuah halaman
web.</p>
<p>Kalau anda perhatikan website yan memiliki tampilan yang tersusun rapi.
Sebenarnya itu adalah tabel hanya saja atribut <font
color="red"><b>border="0"</b></font> sehingga tabel seakan tidak
ada(transparan).</p>
<p>Situs rahasia-webmaster.com banyak menggunakan tabel sebagai bingkai
paragraf. Perlu diingat tag-tag pada html dapat mengandung unsur yang sama.
Contohnya di dalam sebuah tabel terdapat tabel lagi. Di bawah ini adalah tabel
yang berada di dalam tabel utama</p>
<p align="center">
<!-- tag <table> untuk tabel anak -->
<table border="1" style="border-collapse: collapse" bgcolor="white"
bordercolor="black" cellpadding="8" width="80%">
<tr bgcolor="yellow">
<td><b>Nama Barang</b></td>
<td><b>Harga Barang</b></td>
</tr>
<tr>
<td>Monitor</td><td>Rp. 500.000,-</td>
</tr>
<tr>
<td>CDRW</td><td>Rp. 245.000,0</td>
</tr>
<!-- </table ini untuk menutup tabel anak -->

Temukan rahasia menjadi webmaster dalam 30 hari hanya di http://www.rahasia-webmaster.com/


Bab 2 - Menggunakan Atribut dari Tag 13

</table>
</tr>
</table>

Setelah itu simpan dengan nama tag_tabel.html serta tetap simpan di folder bab 2. Gambar 2.3
menunjukkan output dari kode diatas.

Gambar 2.4. Output file tag_form_input.html

D. Tag <form>...</form>

Tag <form> berguna untuk mengirimkan(mem-post) variabel yang bersisi data ke file tujuan
yang memproses variabel tersebut. Tag-tag yang biasa digunakan bersama tag form adalah tag
<input> dan <textarea>.

Atribut form yang banyak digunakan adalah method dan action. Atribut method menentukan
jenis pengiriman data bisa berupa “POST” atau “GET”. Sedangkan action adalah file tujuan yang
akan memproses data yang ada diantara tag <form>...</form>.

Untuk lebih jelasnya lihatlah cuplikan script di bawah ini.

<form action="coba.php" method="post">


......................................
ISI
......................................
</form>

Temukan rahasia menjadi webmaster dalam 30 hari hanya di http://www.rahasia-webmaster.com/


Bab 2 - Menggunakan Atribut dari Tag 14

Seperti dikatakan sebelumnya tag form tidak dapat digunakan sendirian. Ia harus mempunyai
data didalamnya untuk itulah digunakan tag-tag lain. Tag yang sering digunakan adalah.

E. Tag <input>

Tag <input> memiliki atribut type yang fungsinya sangat vital dalam output tampilan. Isi dari
atribut type dapat menentukan jenis tampilan apakah itu textbox, password box, checkbox,
radio button dan sebagainya.

Daripada banyak berteori lebih baik kita praktek saja. Seperti biasa buat file baru dan ketik
kode di bawah ini.

<html>
<head>
<title>Atribut tag Form dan Input</title>
</head>
<body><font face="verdana" size="2">

<form action="coba.php" method="post">

<p><b>Tag input dengan atribut type="text"</b><br>


<input type="text" name="teks_ku" size="16" maxlength="20"><br>
Ini textbox dengan nama <i>teks_ku</i> ukuran <i>16 chr</i> dan maksimal karakrer
yang dapat ditampung <i>20 chr(character)</i>.</p>

<p><b>Tag input dengan atribut type="password"</b><br>


<input type="password" name="password_ku" size="16" maxlength="20"<br>
Ini passwordbox dengan nama <i>password_ku</i> ukuran <i>16 chr</i> dan maksimal
karakrer yang dapat ditampung <i>20 chr(character)</i>.</p>

<p><b>Tag input dengan atribut type="radio"</b><br>


<input type="radio" name="radio_ku" value="isi_1">Radio 1 --> nama
<i>radio_ku</i> isi/value <i>isi_1</i><br>
<input type="radio" name="radio_ku" value="isi_2">Radio 2 --> nama
<i>radio_ku</i> isi/value <i>isi_2</i><br>
<b>Jika nama radio tidak sama maka tidak dianggap satu pilihan. Untuk
membuktikannya silahkan ganti salah satu nama dari radio diatas untuk mengetahui
perbedannya.</b></p>

<p><b>Tag input dengan atribut type="checkbox"</b><br>


<input type="checkbox" name="checkbox_ku_1" value="isi_1">Checkbox 1 --> nama
<i>checkbox_ku_1</i> isi/value <i>isi_1</i><br>
<input type="checkbox" name="checkbox_ku_2" value="isi_2">Checkbox 2 --> nama
<i>checkbox_ku_2</i> isi/value <i>isi_2</i><p>

<p><b>Tag input dengan atribut type="submit"</b><br>


<input type="submit" value="Tombol Submit"><br>
Tombol ini berguna untuk mem-post(mengirimkan variabel dan isi variabel yang ada
pada form ke file tujuan (action="file_tujuan"))</p>

<p><b>Tag input dengan atribut type="reset"</b><br>


<input type="reset" value="Bersihkan"><br>
Tombol ini berguna untuk membersihkan seluruh tulisan yang ada pada seluruh isian
form. Coba isikan semua textbox dan radio lalu tekan tombol ini.</p>

<p><b>Tag input dengan atribut type="hidden"</b><br>


<input type="hidden" value="data_ku" name="data">

Temukan rahasia menjadi webmaster dalam 30 hari hanya di http://www.rahasia-webmaster.com/


Bab 2 - Menggunakan Atribut dari Tag 15

Tipe ini berguna jika si webmaster menginkan variabel yang sifatnya sudah
didefinisikan. Dan tidak menampilkan output apapun.</p>

<p><b>Tag input dengan propeti type="image"</b><br>


<input type="image" src="letak_file_gambar_anda" height="98" width="98"><br>
Image memiliki fungsi yang sama dengan type submit</p>

</form></font>
</body>
</html>

Simpan dengan nama tag_form_input.html dan jalankan. Hasilnya akan seperti yang terlihat
pada gambar 2.4.

F. Tag <select>...</select> dan <option>

Mengapa kita langsung membahas 2 tag?. Pertanyaan yang bagus dan jawabannya sama
dengan dengan pembahasan diatas. Tag select tidak bisa berdiri sendiri dan harus
menggandeng tag option untuk dapat menampilkan output. Dan cara kerjanya hampir sama
dengan tag radio hanya saja tag select lebih singkat.

Gambar 2.5: Output file tag_form_select.html

Sekarang mari kembali bermain kode. Buat file baru dan ketik bahasa planet dibawah ini!

<html>
<head>
<title>Propeti tag Select dan Option</title>
</head>
<body>

<p><b>Penggunaan select dan dan option</b></p>


<p>Daftar kategori silahkan pilih kategori</p>

<form action="coba.php" method="post">


Kategori: <select name="Pilihan">
<option value="Kategori 1">Kategori 1
<option value="Kategori 2">Kategori 2
<option value="Kategori 3">Kategori 3
</select>
<p><input type="submit" value="KIRIM"></p>
</form>

Temukan rahasia menjadi webmaster dalam 30 hari hanya di http://www.rahasia-webmaster.com/


Bab 2 - Menggunakan Atribut dari Tag 16

</body>
</html>

Simpan dengan nama tag_form_select.html lalu jalankan pada browser. Ingat agar Save as
type nya adalah HTML Document.

G. Tag <a>...</a>

Anda tentu sering surfing di internet dan mengklik suatu tulisan atau gambar yang menuju
halaman website lainnya. Tulisan atau gambar itu adalah link. Ya, link adalah tulisan atau
gambar yang merujuk/membuka halaman suatu website. Segala tulisan atau tag lainnya yang
diapit tanda <a> dan </a> akan dianggap link oleh browser.

Gambar 2.6 Output file tag_a.html

Nah, waktunya melemaskan tangan. Ketik kode dibawah ini.

<html>
<head>
<title>Atribut dari tag A</title>
</head>
<body>

<p>Tag a digunakan untuk menuju/membuka link alamat suatu website. Link merupakan
tulisan yang merujuk suatu alamat website. Semua tulisan ataupun tag yang berada
dalam tag &lt;a&gt; dan &lt;/a&gt; akan dianggap link oleh browser. Atribut yang
sangat penting dalam tag a adalah atribut <i>href</i>. Isi dari atribut ini
adalah alamat website yang dituju.</p>

Temukan rahasia menjadi webmaster dalam 30 hari hanya di http://www.rahasia-webmaster.com/


Bab 2 - Menggunakan Atribut dari Tag 17

<p>Contoh link ke alamat Google</p>


<a href="http://www.google.com">Ini link ke google.com</a>

<p>Link juga mempunyai atribut <i>target</i> yang fungsinya berhubungan dengan


window. Isi dari atribut target dapat berupa "_blank", "_self", "_parent",
"_top". Atribut "_blank" akan membuka alamat website pada window yang baru. Isi
atribut default dari target adalah "_self" dimana alamat website akan dibuka pada
window yang sama.

<p>Contoh link dengan atribut target="_blank"</p>


<a target="_blank" href="http://www.rahasia-webmaster.com">Bagaimana Menjadi
Webmaster dalam 30 Hari</a>

<p>Untuk atribut target lainnya silahkan bereksperimen sendiri. Karena Thomas


Alfa Eddison pun melakukan ribuan percobaan sebelum akhirnya ia dapat menemukan
bohlam.</p>

</body>
</html>

Simpan dengan nama tag_a.html lalu jalankan maka hasilnya akan seperti gambar 2.6.

H. Tag <body>...</body>

Seperti namanya body artinya tubuh. Maka atribut yang diset pada tag body akan berpengaruh
pada seluruh tubuh/body dokumen. Pada tag body terdapat beberapa atribut namun ada dua
yang terpenting yaitu background dan bgcolor. Atribut background digunakan untuk
membuat sebuah gambar menjadi latar dari halaman. Sedangkan bgcolor digunakan untuk
menset warna dari latar halaman website. Kali ini yang akan dibahas hanyalah tag bgcolor
karena tag background nilainya sama dengan tag image yang akan dibahas kemudian.

Gambar 2.7 Output file tag_body.html

Saatnya melemaskan tangan kembali. Ketik kode di bawah ini.

<html>
<head>
<title>Atribut dari Tag Image</title>
</head>
<body bgcolor="#000000" link="http://www.google.com">

<font color="#ffffff" face="verdana">

Temukan rahasia menjadi webmaster dalam 30 hari hanya di http://www.rahasia-webmaster.com/


Bab 2 - Menggunakan Atribut dari Tag 18

<p><b>Ini body dengan bgcolor="#000000" atau samadengan "black"</b><br> dan font


color diset ="#ffffff" atau samadengan "white".</p>

<p>Di dalam html anda dapat menggunakan perpaduan warna antara angka dan huruf
seperti "#cgcgcg" akan menghasilkan warna abu-abu.</p>

</body>
</html>

Simpan dengan nama tag_body.html dan buka dengan browser maka akan tampak seperti
gambar 2.7.

I. Tag <img>

Suatu website yang bagus pasti memiliki gambar di dalamnya. Dan suatu waktu
anda tentu ingin menambahkan gambar didalam website anda. Untuk menampilkan gambar
pada halaman dapat digunakan tag <img>. Format file yang dapat didukung oleh tag img
bermacam-macam mulai BMP, JPG, GIF, TGA dan lain-lain.Tag img memiliki beberapa atribut
yaitu

‐ src : letak file gambar yang akan ditampilkan


‐ border: tebal bingkai gambar
‐ height: menentukan tinggi image/gambar
‐ width: menentukan lebar image/gambar

Nilai dari atribut src jika letak file gambar berada pada direktori yang sama dengan direktori file
html anda. Maka cukup tuliskan nama filenya saja, contohnya src=”nama_file.jpg”. Dan jika
letak filenya berada pada sub folder/direktori maka nilainya adalah
src=”sub_folder/nama_file.jpg”. Lalu bagaimana jika letaknya pada folder/direktori diatas
file html saya?. Caranya hampir sama hanya saja ditambahkan tanda ../(titik dua dan slash).
Yang artinya pindah satu folder keatas, jika letaknya di dua folder diatas file html saya. Sama
tinggal menambah ../../ (artinya pindah dua folder ke atas). Contohnya
src=”../nama_folder/nama_file.jpg”.

Untuk contoh kali ini masuklah ke direktori/folder HTML yang telah anda buat sebelumnya.
Buatlah satu buah folder dalam direktori HTML tersebut. Dan berilah nama folder itu gambar.
Lalu copykan satu gambar apa saja kedalam folder gambar tersebut.

Lalu ketiklah kode berikut ini. Ingat ganti nilai dari src sesusai dengan nama file gambar anda.

<html>
<head>
<head>
<title>Atribut dari Tag img</title>
</head>
<body>

<p><b>Tag img hanya dengan atribut <i>src</i></b></p>


<img src="../gambar/e-book.jpg">

<p><b>Tag img dengan border="1"</b></p>


<img src="../gambar/e-book.jpg" border="1"</b><p>

<p><b>Tag img dengan height dan width</b></p>


<img src="../gambar/e-book.jpg" border="1" height="300" width="200">

Temukan rahasia menjadi webmaster dalam 30 hari hanya di http://www.rahasia-webmaster.com/


Bab 2 - Menggunakan Atribut dari Tag 19

</body>
</html>

Lalu simpan dengan nama tag_img.html dan jalankan. Maka output-nya akan terlihat seperti
gambar 2.8.

Gambar 2.8 Output file tag_img.html

J. Tag <ol>...</ol>, <ul>...</ul> dan <li>...</li>

Kali ini kita akan membahas 3 tag sekaligus. Karena masing-masing tag tidak dapat dipisahkan.
Tag <ol> dan <ul> keduanya membutuhkan tag <li> agar dapat menampilkan output. Tag-tag
ini berguna untuk menyusun suatu daftar yang ingin anda tonjolkan pada pengunjung website.

Ah..., capek teori lebih baik langsung praktek saja OK. Ketik kode dibawah ini.

<html>
<head>
<title>Atribut dari tag ol, ul dan li</title>
</head>
<body>

<p><b>Penggunaan tag ol dengan li</b></p>


<ol>
<li>Ini nomor 1</li>
<li>Ini nomor 2</li>
<li>Ini nomor 3</li>

Temukan rahasia menjadi webmaster dalam 30 hari hanya di http://www.rahasia-webmaster.com/


Bab 2 - Menggunakan Atribut dari Tag 20

</ol>

<p><b>Penggunaan tag ul dengan li</b></p>


<ul>
<li>Ini bullet 1</li>
<li>Ini bullet 2</li>
<li>Ini bullet 3</li>
</ul>

<p><b>Gabungan tag ol, ul dan li</b></p>


<ul>
<li>Ini bullet 1</li>
<ol>
<li>Ini nomor 1</li>
<li>Ini nomor 2</li>
</ol>
<li>Ini bullet 2</li>
<ol>
<li>Ini nomor 1</li>
<li>Ini nomor 2</li>
</ol>
</ul>
</body>
</html>

Setelah selesai simpan dengan nama tag_ol_ul_li.html lalu jalankan pada browser. Maka
hasilnya seperti yang dapat anda lihat pada gambar 2.9.

Gambar 2.9. Output file tag_ol_ul_li.html

Temukan rahasia menjadi webmaster dalam 30 hari hanya di http://www.rahasia-webmaster.com/


Bab 2 - Menggunakan Atribut dari Tag 21

K. Atribut universal

Yang dimaksud atribut universal dalam hal ini adalah suatu atribut yang pasti terdapat pada tag
apapun. Kita semua tahu tidak semua atribut dapat dimasukkan dalam tag tertentu. Contohnya
atribut cellpadding milik tag <table> tidak dapat digunakan oleh tag <p>.

Berikut ini adalah daftar beberapa atribut universal yang penting.

‐ name: atribut ini untuk memberi nama pada tag yang digunakan(sangat penting dalam
tag yang memerlukan input dari user.
‐ class: atribut ini digunakan khususnya jika anda menggunakan CSS(akan dibahas pada
bab khusus).
‐ title: atribut ini menampilkan keterangan yang telah ditentukan oleh pembuat(istilahnya
tooltips pada windows. Gerakkan mouse anda pada jam komputer akan muncul tulisan,
itulah tooltips).

Temukan rahasia menjadi webmaster dalam 30 hari hanya di http://www.rahasia-webmaster.com/


22

BERIKUTNYA
Pada bab selanjutnya kita akan coba membuat website pribadi(personal home page). Yang
dasar-dasarnya sudah anda kuasai pada bab 2 ini.

*********

Temukan rahasia menjadi webmaster dalam 30 hari hanya di http://www.rahasia-webmaster.com/

Anda mungkin juga menyukai