Materi | Catatan Kuliah mastering kode html
i
Mastering Kode
HTML
Edisi Kedua
Rio Ast am al
© Copyright 2005- 2006 www.rahasia- webm ast er.com
ii
Ka t a Pe nga nt a r
Pert am a- t am a t ak lupa saya panj at kan puj i syukur kehadirat Allah Tuhan Yang Maha Pengasih.
Karena hanya dengan ridhoNyalah saya dapat m enyelesaikan e- book ini. Dan t ak lupa saya
sam paikan t erim a kasih kepada sem ua pengaj ar saya yang t elah berj asa m em buat saya
m em iliki kem am puan sepert i ini.
Tuj uan pem buat an e- book ini sebenarnya adalah unt uk m em bant u anda yang t elah m em beli ebook “ Menj adi Webm ast er dalam 30 Hari” . Karena pada e- book t ersebut penj elasan t ent ang
kode HTML relat if singkat dan hanya fokus pada PHP. Sehingga e- book ini dibuat unt uk
m em ant apkan penget ahuan anda t ent ang kode HTML.
Dalam e- book “ Mast ering Kode HTML” ini anda akan diaj arkan penget ahuan dasar hingga
t ingkat m enengah bagaim ana m em buat sebuah websit e dengan cepat . Dalam e- book ini anda
t idak diaj arkan unt uk m enggunakan soft ware HTML Edit or yang bersifat WYSI WYG ( What You
See I s What You Get ) sepert i Front Page at au Dream Weaver.
Penulis sadar bahwa m asih banyak kekurangan yang t erdapat pada e- book ini. Unt uk it u
penulis m engharapkan saran dan krit ik dari pem baca.
Mudah- m udahan dengan hadirnya e- book ini dapat m em aj ukan dan m eningkat kan SDM
I ndonesia khususnya dalam bidang TI .
Sur a ba ya , Juni 2 0 0 5
Pe nulis
Temukan rahasia menjadi webmaster dalam 30 hari hanya di http://www.rahasia-webmaster.com/
iii
H a k Cipt a M a st e r in g Kode H TM L
E- book " Mast ering Kode HTML" m erupakan hasil kerj a keras penulis. Dilarang keras unt uk
m engubah, m enj ual sebagian at au seluruh isi dari e- book ini unt uk kepent ingan kom ersial
t anpa seij in penulis.
Lisensi e- book ini adalah Gr a t is. Anda dapat m enyebarluaskan, m enggandakan e- book ini
secara bebas a sa lk a n anda t idak m engubah isi dan hak cipt a e- book ini.
Jika anda m enem ukan orang at au kelom pok yang m enj ual e- book ini, saya m ohon kepada anda
unt uk m elaporkan hal t ersebut kepada saya. Akan ada bonus spesial unt uk anda dari saya at as
inform asi yang anda berikan.
Laporkan inform asi t ersebut ke adm in@rahasia- webm ast er.com .
H a k Cipt a D ilindu ngi Unda ng- u nda ng
Ala m a t D ow n loa d M a t e r i E- book
Sem ua source code dari m at eri yang dibahas dalam e- book ini dapat anda download di alam at :
ht t p: / / m at eri.rahasia- webm ast er.com / m kht m l/
Te nt a n g M a t e r i
Sem ua script dalam e- book ini t elah dit es dan bekerj a. Nam un, m ungkin dalam penyalinan
script t ersebut ke e- book ini ada suat u kesalahan sehingga m enyebabkan script t ersebut t idak
bisa j alan.
Jadi j ika ada script pada e- book ini yang t idak bisa j alan at au t erdapat error. Saya m ohon
kesediaan anda unt uk m elaporkan hal t ersebut kepada saya.
Anda dapat m engirim nya ke bug@rahasia- webm ast er.com
Terim a Kasih.
Edisi
Edisi Pert am a: 01 Maret 2006
M e r e k D a ga n g
Sem ua m erek dagang yang disebut kan dalam e- book ini m erupakan Hak Cipt a dari m asingm asing vendor pem buat nya.
Microsoft , Microsoft Word, Microsoft Front page m erupakan m erek dagang dari Microsoft Corp.
Adobe, Adobe GoLive m erupakan m erek dagang dari Adobe I nc.
Macrom edia, Macrom edia Dream Weaver m erupakan m erek dagang dari Macrom edia I nc.
Temukan rahasia menjadi webmaster dalam 30 hari hanya di http://www.rahasia-webmaster.com/
iv
Uca pa n Te r im a Ka sih
Saya ucapkan banyak t erim a kasih kepada sem ua pihak yang t elah m endukung saya, sehingga
pem buat an e- book Mast ering Kode HTML ini dapat t erwuj ud.
********************
Temukan rahasia menjadi webmaster dalam 30 hari hanya di http://www.rahasia-webmaster.com/
v
D a ft a r I si
Kat a Pengant ar............................................................................................... ............
Daft ar I si...................................................................................................................
Pendahuluan.................................................................................................. ............
iii
v
vi
Ba b 1 – M e nge na l H TM L Le bih Ja uh
Pengert ian HTML............................................................................................. ...........
Menggunakan Tag pada HTML........................................................................... ...........
Daft ar Tag pada HTML.................................................................................................
1
1
1
2
Ba b 2 – M e nggu na k a n At r ibut da r i Ta g
Cont oh- cont oh penggunaan t ag dan at ribut nya..............................................................
Tag < p> < / p> .......................................................................................... ..........
Tag < font > < / font > .............................................................................................
Tag < t able> < / t able> ..........................................................................................
Tag < form > < / form > ...........................................................................................
Tag < select > < / select > dan < opt ion> ....................................................................
Tag < a> < / a> .....................................................................................................
Tag < body> < / body> ................................................................................ ..........
Tag < im g> .........................................................................................................
Tag < ul> < / ul> ,< ol> < / ol> , dan < li> < / li> ..............................................................
At ribut Universal.................................................................................................
7
7
8
10
11
13
15
16
17
18
19
21
Ba b 3 – M e m bua t W e bsit e Pr iba di ( Pe r sona l H om e Pa ge )
23
Ba b 4 – M e ng- Uploa d File k e Se r ve r
36
Pengert ian Upload...................................................................................................... 36
Menyewa Web Host ing................................................................................................ 36
Langkah- langkah Mengupload..................................................................................... 37
Ba b 5 – Ca sca din g St yle She e t ( CSS)
42
Pengert ian CSS.......................................................................................................... 42
Mengaplikasikan CSS....................................................................................... .......... 42
Ba b 6 – M e nde sa in W e bsit e Kom e r sil
57
Tam pilan Websit e............................................................................................ .......... 57
Kesesuaian I si Websit e dengan Tam pilan............................................................ .......... 57
Kem udahan Navigasi.................................................................................................. 58
Manfaat yang Diperoleh.............................................................................................. 58
Ba b 7 – Ja va scr ipt
68
Pengert ian Javascript ....................................................................................... .......... 68
Aplikasi Javascript ...................................................................................................... 69
I nput Box........................................................................................................... 69
Pop- up Window................................................................................................... 72
Dilarang Klik Kanan.............................................................................................. 73
Menam pilkan Hari dan Tanggal.............................................................................. 75
Pe nut up
76
**********
Temukan rahasia menjadi webmaster dalam 30 hari hanya di http://www.rahasia-webmaster.com/
vi
Pe n da h u lu a n
Un t u k sia pa buk u ini?
Buku ini dit uj ukan bagi anda yang belum m engenal sam a sekali kode HTML at au sudah
m enget ahui HTML secara garis besar dan ingin m enam bah kem am puan.
Apa it u H TM L?
HTML( Hyper Text Markup Language) adalah sekum pulan sim bol- sim bol at au t ag- t ag yang
dit uliskan dalam sebuah file yang dim aksudkan unt uk m enam pilkan halam an pada web
browser. Tag- t ag t adi m em berit ahu browser bagaim ana m enam pilkan halam an w eb dengan
lengkap kepada pengguna.
Tag- t ag HTML selalu diawali dengan < x> dan diakhiri dengan < / x> dim ana x t ag HTML sepert i
b, i, u dan sebagainya.
Apa Sa j a Ya n g D ibu t u h k a n ?
Unt uk m em pelaj ari ebook ini anda hanya m em erlukan:
Text Edit or ( Not epad, vi, em acs, dsb)
Web Brow ser ( I nt ernet Explorer, Opera, FireFox, dsb)
Hanya dengan berm odalkan dua soft w are bawaan Windows it u saj a anda sudah dapat m em buat
websit e. Nam un Not epad m em iliki kekurangan yait u t idak m em iliki synt ax highlight ing
( pewarnaan kode) sehingga relat if cukup m enyulit kan.
Unt uk it u saya m erekom endasikan pada anda unt uk m enggunakan “ PHP DESI GNER 2006” .
Kelebihan soft ware ini adalah ia m em iliki banyak m acam synt ax highlight ing m ulai dari HTML,
PHP, JAVA dan m asih banyak lagi. Nam un yang t erpent ing dari soft ware ini sifat nya FREE alias
GRATI S.
Anda dapat m endownload “ PHP DESI GNER 2006” di alam at :
ht t p: / / www.m psoft ware.dk/
N B: Jika anda m enggunakan not epad sebagai edit or. Past ikan ket ika hendak m enyim pan
file pilihan Sa ve As Type - nya adalah All Files. Hal ini unt uk m enghindari t ersim pannya
script kit a sebagai file t ext biasa.
Or ga n isa si Bu k u
Ebook ini disusun t ahap dem i t ahap sesuai dengan t ingkat kesulit annya. Mulai dari bab 2 anda
akan diaj arkan m em buat websit e sederhana hingga bab t erakhir m em buat websit e yang
berbobot . Jadi j angan m elew at kan 1 bab pun agar anda m engert i t ent ang apa yang dibahas.
M e n ga pa Tida k M e n ggu na k a n Pr ogr a m W YSI W YG?
Program HTML edit or WYSI WG ( What You See I s What You Get ) adalah program HTML edit or
yang m enyediakan int erface sepert i program pada Microsoft Word. Nam un out put yang
Temukan rahasia menjadi webmaster dalam 30 hari hanya di http://www.rahasia-webmaster.com/
vii
dihasilkan berupa file HTML. Cont oh program HTML edit or yang bersifat WYSI WYG adalah
Microsoft Front Page, Macrom edia Dream weaver dan Adobe GoLive.
Kit a asum sikan anda sebagai orang awam yang belum m engenal sam a sekali HTML. Jika anda
m enggunakan program sem acam ini dan hanya drag n drop saj a t anpa m engert i kodenya m aka
sam a saj a anda t idak m enguasai t eknik pem rogram an web secara nyat a.
I ni akan m em persulit anda j ika nant i anda m em pelaj ari bahasa w eb progrom m ing sepert i Java
at au PHP. Oleh karena it u, dalam m at eri yang kit a bahas dalam ebook ini m enggunakan “ PHP
Designer 2006” yang sifat nya hanya synt ax highlight ing. Nam un set elah m em baca e- book ini
dan m enguasai HTML anda t ent u sudah m engert i dan t idak bingung ket ika m enggunakan
program WYSI WYG.
Ba ga im a n a M e n ggu na k a n E- book I n i?
Dalam m enggunakan ebook in, buat lah sebuah folder di drive C: \ m isalnya HTML. Pada folder
HTML buat lah sub- sub folder sesuai dengan j um lah bab dalam ebook ini.
Misalnya Bab 1, Bab 2 dan set erusnya. Sim panlah file yang berhubungan dengan bab t ersebut
di folder Bab yang sedang anda kerj akan.
**********
Temukan rahasia menjadi webmaster dalam 30 hari hanya di http://www.rahasia-webmaster.com/
1
Bab 1 - Mengenal HTML Lebih Jauh
Ba b
1
M e n ge n a l H TM L Le bih Ja u h
Set elah m em baca m at eri pada bab 1 ini anda diharapkan dapat m engert i t ent ang:
Pengert ian HTML
Menggunakan t ag pada HTML
Menget ahui daft ar t ag pada HTML
Pe n ge r t ia n H TM L
Sepert i yang t elah dij elaskan sebelum nya bahwa HTML( Hyper Text Markup Language) adalah
sim bol- sim bol at au t ag- t ag yang dit uliskan dalam sebuah file yang dim aksudkan unt uk
m enam pilkan halam an pada web browser. Tag- t ag HTML selalu diaw ali dengan < x> dan diakhiri
dengan < / x> dim ana x t ag HTML sepert i b, i, u dan sebagainya. Nam un ada j uga t ag yang
t idak diakhiri dengan t anda < / x> sepert i t ag < br> , < input > dan lainnya.
Sebuah halam an websit e akan diapit oleh t ag < ht m l> ……< / ht m l> . File- file HTML selalu
berakhiran dengan ekst ensi * .ht m at au * .ht m l. Jadi j ika anda m enget ik sebuah naskah dan
m enyim pannya dengan ekst ensi * .ht m l m aka anda m em buat file yang berform at HTML.
M e nggu na k a n Ta g pa da H TM L
Beberapa cont oh penggunaan t ag HTML,
Cont oh
H a sil
< b> I ni t ulisan t ebal< / b>
I ni t u lisa n t e ba l
< i> I ni t ulisan m iring< / i>
I ni t ulisan m iring
< u> I ni t ulisan bergaris bawah< / u>
I ni t ulisan bergaris bawah
I ni baris 1< br> I ni baris 2
I ni baris 1
I ni baris 2
I ni garis horizont al < hr>
I ni garis horizont al
Ada beberapa t ag yang m em ilki at ribut didalam nya, sepert i t ag < font > , < t able> , < input > dan
sebagainya. Pada t ag font ia m em iliki beberapa at ribut diant aranya at ribut : color, size, face.
Unt uk lebih m em aham i at ribut lihat lah cont oh berikut ini.
< font color= ” red” face= ” Arial” size= ” 12” > I ni Font Arial berwarna m erah dan berukuran 12
pt < / font >
hasil Î Ini Font Arial berwarna merah dan berukuran 12 pt
At ribut color digunakan unt uk m enent ukan warna t ulisan.
At ribut face digunakan unt uk m enent ukan j enis huruf.
At ribut size digunakan unt uk m enent ukan ukuran huruf.
Temukan rahasia menjadi webmaster dalam 30 hari hanya di http://www.rahasia-webmaster.com/
2
Bab 1 - Mengenal HTML Lebih Jauh
Jika anda lihat bahwa at ribut color berada pada awal, lalu yang kedua adalah face dan yang
t erakhir adalah size. Anda t ida k pe r lu m em perdulikan urut an at ribut t ersebut karena browser
hanya m em baca isi dari properi bukan urut an at ribut nya.
D a ft a r Ta g pa da H TM L
Berikut ini adalah t abel t ag- t ag HTML dan fungsinya:
Ta g Ut a m a
Tag
At ribut
< ht m l>
< / ht m l>
< head>
< / head>
< t it le>
< / t it le>
background
bgcolor
bgsound
font
link
< body>
alink
< / body>
vlink
t opm argin
left m argin
m arginheight
m arginwidt h
Deskripsi
Baris paling at as dari set iap file HTML
I nform asi um um dari sebuah halam an web
Judul halam an. Terdapat pada head
Set t ingan at ribut unt uk seluruh dokum en.
M odifik a si Te k s
Tag
< b> < / b>
< i> < / i>
< u> < / u>
< pre> < / pre>
Deskripsi
Teks t ebal
Teks m iring
Teks garis bawah
Preform at t ed t eks
Cont oh
Te k s t e ba l
Teks m iring
Teks garis bawah
Cont oh t eks
< h1> < / h1>
Header 1
Header 1
< h2> < / h2>
Header 2
Header 2
< h3> < / h3>
Header 3
Header 3
< h4> < / h4>
< h5> < / h5>
< h6> < / h6>
< sub> < / sub>
Header 4
Header 5
Header 6
Subscript
Header 4
< sup> < / sup>
Superscript
Header 5
Header 6
Subscript
Super
script
Font
Temukan rahasia menjadi webmaster dalam 30 hari hanya di http://www.rahasia-webmaster.com/
3
Bab 1 - Mengenal HTML Lebih Jauh
Tag
< font >
< / font >
At ribut
color
size
nam e
Deskripsi
Mengubah gaya suat u huruf.
Link s
Tag
At ribut Deskripsi
href
t arget
st yle
Mem buat link ke dokum en at au sit us lainnya.
< a> < / a>
class
nam e
id
Ga m ba r
Tag
< im g>
At ribut
src
alt
nam e
border
height
widt h
Deskripsi
Menam pilkan sebuah gam bar
For m a t t in g
Tag
Deskripsi
Cont oh
Digunakan unt uk
< blockquot e>
Sam ple of t ext in a block quot e form at
m engat ur t ext dan
< / blockquot e>
gam bar dalam suat u t ag
Ordered List ( digunakan
dengan < li> )
1. I t em 1
•
< li>
< dd> < / dd>
< dt >
< dd>
Unordered List
( digunakan dengan
< li> )
Elem en List
Definit ion List
Definit ion Term
Definit ion Descript ion
< p> < / p>
Paragraf
< br>
Gant i baris
< hr>
< cent er>
< / cent er>
Garis horizont al
< ol> < / ol>
< ul> < / ul>
Menengahkan elem en
I t em 1
Sam ple t ext
Sam ple t ext
Sam ple t ext
Sam ple
t ext
Sam ple
t ext
Sam ple
Temukan rahasia menjadi webmaster dalam 30 hari hanya di http://www.rahasia-webmaster.com/
Bab 1 - Mengenal HTML Lebih Jauh
Ta be l
Tag
At ribut
Deskripsi
border
cellpadding
cellspacing
widt h
height
nam e
Mengat ur sem ua elem en t able
< t able> < / t able>
id
t it le
bgcolor
background
align
valign
height
bgcolor
background
< t r> < / t r>
Mem buat baris baru
align
valign
t it le
height
widt h
bgcolor
background
< t d> < / t d>
Mem buat kolom
align
valign
t it le
colspan
rowspan
height
widt h
bgcolor
background
< t h> < / t h>
Header( kepala t abel) . Ot om at is ke t engah dan t ebal.
align
valign
t it le
colspan
rowspan
height
widt h
< t body>
align
Form at yang berlaku bagi cell yang diapit t ag.
< / t body>
valign
bgcolor
background
height
widt h
align
< colgroup>
Form at yang berlaku bagi kolom
valign
< / colgroup>
bgcolor
background
colspan
Temukan rahasia menjadi webmaster dalam 30 hari hanya di http://www.rahasia-webmaster.com/
4
5
Bab 1 - Mengenal HTML Lebih Jauh
For m
Tag
< form >
< / form >
At ribut
Deskripsi
m et hod
act ion
nam e
Mengat ur elem en dari form
t ext
password
hidden
radio
< input t ype= >
Variasi dari t ipe elem en form
checkbox
subm it
im age
reset
nam e
value
Sample tex
t ext
widt h
m axlengt h
nam e
value
***********
password
widt h
m axlengt h
nam e
Digunakan unt uk m em buat variable hidden.
hidden
value
radio
nam e
value
checkbox
nam e
value
checked
subm it
value
im age
src
height
widt h
alt
nam e
border
reset
value
< select >
< / select >
nam e
size
select ed
nam e
value
< opt ion>
< t ext area>
< / t ext area>
nam e
row s
cols
wrap
w rap
off
Radio 1
Radio 2
Check 1
Check 2
Tombol
Reset
Mem buat com bo- box. Digunakan bersam a dengan opt ion
Option 1
Text
area box. Text is typed betw ee
the tags
no wrap
Temukan rahasia menjadi webmaster dalam 30 hari hanya di http://www.rahasia-webmaster.com/
6
Bab 1 - Mengenal HTML Lebih Jauh
virt ual
physical
word wrap, sent as one line
word wrap, sent wit h breaks
Anda t idak perlu m enghafal sem ua t ag t ersebut , nant i m alah kepala anda m alah pecah! . Cukup
hafalkan yang pent ing- pent ing saj a sepert i < t able> < form > < input > < ul> . Tidak hafal pun t idak
apa- apa kan kit a bisa m elihat daft ar kalau lupa, yang pent ing kit a paham , BETUL?.
Temukan rahasia menjadi webmaster dalam 30 hari hanya di http://www.rahasia-webmaster.com/
7
BERI KUTN YA
Pada bab selanj ut nya kit a akan m em bahas lebih det ail t ent ang penerapan propert y dari t ag
yang sering kit a gunakan.
**********
Temukan rahasia menjadi webmaster dalam 30 hari hanya di http://www.rahasia-webmaster.com/
Bab 2 - Menggunakan Atribut dari Tag
Ba b
8
2
M e n ggu n a k a n At r ibu t da r i Ta g
Sebelum m em ulai sekedar m engingat kan apakah anda sudah m em buat folder di drive C: \ yang
bernam a HTML j ika t idak, buat lah sekarang. Lalu buat lah folder yang bernam a bab 1, bab2 dan
set erusnya. Jika anda prakt ik pada bab 2 m aka sim panlah file anda pada folder bab 2.
Dem ikian unt uk set erusnya.
Pada bab 2 ini m at eri yang diharapkan dapat anda kuasai ant ara lain:
Menggunakan berbagai at t ribut dari t ag diant aranya:
Tag p, font , t able, form , input , select , opt ion, a, body, im g, ul, ol, li dan at t ribut
universal
Con t oh - con t oh pe n ggu n a a n t a g da n a t r ibu t n y a
Pada bab sebelum nya t elah anda pelaj ari m acam - m acam at ribut dari t ag yang t erdapat pada
HTML. Sekarang saat nya kit a m enerapkan at ribut t ersebut dalam sebuah file. Unt uk lebih
m em udahkan anda dalam m em aham i kit a langsung saj a pada cont oh.
•
•
Pert am a j alankan soft ware “ PHP DESI GNER 2006”
Klik m enu File – New – HTML/ XHTML
Maka akan nam pak sebuah ruang kerj a m irip dengan dengan Microsoft Word. Unt uk cont oh
yang pert am a ini kit a akan m enggunakan at ribut dari t ag < p> …< / p> .
A. Ta g < p> …< / p>
Tag < p> digunakan unt uk m em buat paragraf dalam sebuah halam an web. Kit a sem ua t ahu
kalau paragraph ada yang bert ipe rat a kiri, t engah, kanan dan j ust ify. Unt uk lebih m em perj elas
ket ik kode di bawah ini.
Atribut Tag
Teks ini berada di kiri
Teks ini berada di tengah
Teks ini berada di kanan
Paragraph ini bertipe justify. Dimana semua teks akan dibuat
lurus sama dengan batas tepi halaman. Oh ya, tag <p></p> merupakan
default atau bentuk baku tag <p></p> dimana teks atau paragraf akan
berformat rata kiri. Jika anda tidak memberi atribut align pada tag
<p> maka browser akan menganggap rata kiri.
Temukan rahasia menjadi webmaster dalam 30 hari hanya di http://www.rahasia-webmaster.com/
Bab 2 - Menggunakan Atribut dari Tag
9
Set elah selesai sim pan file t ersebut dengan m engklik m enu File – Sa ve . Akan m uncul kot ak
dialog Save, arahkan ke drive C: \ lalu HTML( j ika anda m em buat folder lain silahkan sim pan di
folder anda t ersebut ) lalu Bab 2. Pada isian File N a m e isikan t ag_p.ht m l dan past ikan Sa ve a s
Type adalah HTML Docum ent . Unt uk m enj alankan anda cukup t ekan t om bol F5 m aka akan
m uncul out put dari kode anda.
Gam bar 2.0 file t ag_p.ht m l saat desain t im e.
Gam bar 2.1 file t ag_p.ht m l saat dij alankan
Nam un dalam hal ini saya t idak m enggunakan browser built ini pada PHP DESI GNER 2006.
Melainkan browser ekst ernal sepert i I nt ernet Explorer at au FireFox. Buka I E at au FireFox klik
File – Open, arahkan dim ana anda m enyim pan file t ag_p.ht m l t adi. Hasilnya akan t erlihat
sepert i gam bar 2.1.
Temukan rahasia menjadi webmaster dalam 30 hari hanya di http://www.rahasia-webmaster.com/
10
Bab 2 - Menggunakan Atribut dari Tag
B. Ta g < font > …< / font >
Fungsi t ag < font > adalah unt uk m em anipulasi baik j enis, ukuran, dan warna huruf. Pada bab 1
t elah kit a singgung penggunaan at ribut font .
Nam un kit a akan lebih bereksperim en dengan at ribut ini.
Sepert i biasa klik File – N e w – H TM L/ X H TM L.
Ket ik kode di bawah ini.
Atribut dari Tag Font
ENTER
Ini Font Arial
Ini Font Arial dan miring
Ini Font Verdana berukuran 12 pt
berwarna biru sekaligus tebal
Ini Font Tahoma berwarna
merah, tebal dan berada di tengah
Ini Font Arial berwarna Merah,
Sedangkan ini adalah font Verdana
berwarna biru
Nb: Tanda Ent er pada kode diat as t idak berpengaruh pada t am pilan/ out put pada browser. Ent er
digunakan agar kode m udah dibaca.
Gam bar 2.2 Out put file t ag_font .ht m l
Temukan rahasia menjadi webmaster dalam 30 hari hanya di http://www.rahasia-webmaster.com/
11
Bab 2 - Menggunakan Atribut dari Tag
Set elah selesai sim pan dengan nam a t ag_font .ht m l sim pan pada folder bab 2 sam a dengan
t ag_p.ht m l. Out put dari kode di at as dapat anda lihat pada gam bar 2.2.
C. Ta g < t a ble > ...< / t a ble >
Tag < t able> adalah salah sat u t ag yang m em iliki at ribut t erbanyak. Lihat t abel daft ar t ag pada
bab 1 unt uk m elihat daft ar at ribut nya. Dalam t ag < t able> j uga t erdapat 2 t ag yang pent ing
yang pent ing yait u t ag < t r> < / t r> unt uk m em buat baris dan t ag < t d> < / t d> unt uk m em buat
kolom .Tag < t able> adalah t ag yang pent ing dalam pendesainan sebuah t am pilan sit us. Jadi
anda harus cukup m enguasai t ag ini.
Gam bar 2.3. Out put file t ag_t abel.ht m l
OK, sekarang buat lah file baru sepert i biasa klik File – N e w – H TM L/ X H TM L. Ket ik kode
dibawah ini. Jangan t egang sant ai saj a....! .
Atribut dari tag tabel
Temukan rahasia menjadi webmaster dalam 30 hari hanya di http://www.rahasia-webmaster.com/
Bab 2 - Menggunakan Atribut dari Tag
Membuat Tabel
Ini kolom 1 pada baris 1
Ini kolom 2 pada baris 1
Ini kolom 1 pada baris 2
Ini kolom 2 pada baris 2
Contoh 2: Membuat Tabel
Ini kolom 1 pada baris 1
Ini kolom 2 pada baris 1
Ini kolom 1 pada baris
2
Ini kolom 2 pada baris 2
Tabel sebagai bingkai dari paragraf
Tabel memiliki peranan sangat penting dalam tampilan sebuah situs web.
Tanpa tabel desainer akan mengalamai kesulitan dalam mendesain sebuah halaman
web.
Kalau anda perhatikan website yan memiliki tampilan yang tersusun rapi.
Sebenarnya itu adalah tabel hanya saja atribut border="0" sehingga tabel seakan tidak
ada(transparan).
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
Nama Barang
Harga Barang
MonitorRp. 500.000,-
CDRWRp. 245.000,0
Temukan rahasia menjadi webmaster dalam 30 hari hanya di http://www.rahasia-webmaster.com/
12
Bab 2 - Menggunakan Atribut dari Tag
13
Set elah it u sim pan dengan nam a t ag_t abel.ht m l sert a t et ap sim pan di folder bab 2. Gam bar 2.3
m enunj ukkan out put dari kode diat as.
Gam bar 2.4. Out put file t ag_form _input .ht m l
D . Ta g < for m > ...< / for m >
Tag < form > berguna unt uk m engirim kan( m em - post ) variabel yang bersisi dat a ke file t uj uan
yang m em proses variabel t ersebut . Tag- t ag yang biasa digunakan bersam a t ag form adalah t ag
< input > dan < t ext area> .
At ribut form yang banyak digunakan adalah m et hod dan act ion. At ribut m et hod m enent ukan
j enis pengirim an dat a bisa berupa “ POST” at au “ GET” . Sedangkan act ion adalah file t uj uan yang
akan m em proses dat a yang ada diant ara t ag < form > ...< / form > .
Unt uk lebih j elasnya lihat lah cuplikan script di bawah ini.
......................................
ISI
......................................
Temukan rahasia menjadi webmaster dalam 30 hari hanya di http://www.rahasia-webmaster.com/
Bab 2 - Menggunakan Atribut dari Tag
14
Sepert i dikat akan sebelum nya t ag form t idak dapat digunakan sendirian. I a harus m em punyai
dat a didalam nya unt uk it ulah digunakan t ag- t ag lain. Tag yang sering digunakan adalah.
E. Ta g < input >
Tag < input > m em iliki at ribut t ype yang fungsinya sangat vit al dalam out put t am pilan. I si dari
at ribut t ype dapat m enent ukan j enis t am pilan apakah it u t ext box, password box, checkbox,
radio but t on dan sebagainya.
Daripada banyak bert eori lebih baik kit a prakt ek saj a. Sepert i biasa buat file baru dan ket ik
kode di bawah ini.
Atribut tag Form dan Input
Tag input dengan atribut type="text"
Ini textbox dengan nama teks_ku ukuran 16 chr dan maksimal karakrer
yang dapat ditampung 20 chr(character).
Tag input dengan atribut type="password"
nama
radio_ku isi/value isi_1
Radio 2 --> nama
radio_ku isi/value isi_2
Jika nama radio tidak sama maka tidak dianggap satu pilihan. Untuk
membuktikannya silahkan ganti salah satu nama dari radio diatas untuk mengetahui
perbedannya.
Tag input dengan atribut type="checkbox"
Checkbox 1 --> nama
checkbox_ku_1 isi/value isi_1
Checkbox 2 --> nama
checkbox_ku_2 isi/value isi_2
Tag input dengan atribut type="submit"
Tombol ini berguna untuk mem-post(mengirimkan variabel dan isi variabel yang ada
pada form ke file tujuan (action="file_tujuan"))
Tag input dengan atribut type="reset"
Tombol ini berguna untuk membersihkan seluruh tulisan yang ada pada seluruh isian
form. Coba isikan semua textbox dan radio lalu tekan tombol ini.
Tag input dengan atribut type="hidden"
Temukan rahasia menjadi webmaster dalam 30 hari hanya di http://www.rahasia-webmaster.com/
Bab 2 - Menggunakan Atribut dari Tag
Tipe ini berguna jika si webmaster menginkan variabel yang sifatnya sudah
didefinisikan. Dan tidak menampilkan output apapun.
Tag input dengan propeti type="image"
Image memiliki fungsi yang sama dengan type submit
Sim pan dengan nam a t ag_form _input .ht m l dan j alankan. Hasilnya akan sepert i yang t erlihat
pada gam bar 2.4.
F. Ta g < se le ct > ...< / se le ct > da n < opt ion >
Mengapa kit a langsung m em bahas 2 t ag?. Pert anyaan yang bagus dan j awabannya sam a
dengan dengan pem bahasan diat as. Tag select t idak bisa berdiri sendiri dan harus
m enggandeng t ag opt ion unt uk dapat m enam pilkan out put . Dan cara kerj anya ham pir sam a
dengan t ag radio hanya saj a t ag select lebih singkat .
Gam bar 2.5: Out put file t ag_form _select .ht m l
Sekarang m ari kem bali berm ain kode. Buat file baru dan ket ik bahasa planet dibawah ini!
Propeti tag Select dan Option
Penggunaan select dan dan option
Daftar kategori silahkan pilih kategori
Kategori:
Kategori 1
Kategori 2
Kategori 3
Temukan rahasia menjadi webmaster dalam 30 hari hanya di http://www.rahasia-webmaster.com/
15
16
Bab 2 - Menggunakan Atribut dari Tag
Sim pan dengan nam a t ag_form _select .ht m l lalu j alankan pada browser. I ngat agar Sa ve a s
t ype nya adalah HTML Docum ent .
G. Ta g < a > ...< / a >
Anda t ent u sering surfing di int ernet dan m engklik suat u t ulisan at au gam bar yang m enuj u
halam an websit e lainnya. Tulisan at au gam bar it u adalah link. Ya, link adalah t ulisan at au
gam bar yang m eruj uk/ m em buka halam an suat u websit e. Segala t ulisan at au t ag lainnya yang
diapit t anda < a> dan < / a> akan dianggap link oleh brow ser.
Gam bar 2.6 Out put file t ag_a.ht m l
Nah, wakt unya m elem askan t angan. Ket ik kode dibaw ah ini.
Atribut dari tag A
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 <a> dan </a> akan dianggap link oleh browser. Atribut yang
sangat penting dalam tag a adalah atribut href. Isi dari atribut ini
adalah alamat website yang dituju.
Temukan rahasia menjadi webmaster dalam 30 hari hanya di http://www.rahasia-webmaster.com/
17
Bab 2 - Menggunakan Atribut dari Tag
Contoh link ke alamat Google
Ini link ke google.com
Link juga mempunyai atribut target 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.
Contoh link dengan atribut target="_blank"
Bagaimana Menjadi
Webmaster dalam 30 Hari
Untuk atribut target lainnya silahkan bereksperimen sendiri. Karena Thomas
Alfa Eddison pun melakukan ribuan percobaan sebelum akhirnya ia dapat menemukan
bohlam.
Sim pan dengan nam a t ag_a.ht m l lalu j alankan m aka hasilnya akan sepert i gam bar 2.6.
H . Ta g < body> ...< / body>
Sepert i nam anya body art inya t ubuh. Maka at ribut yang diset pada t ag body akan berpengaruh
pada seluruh t ubuh/ body dokum en. Pada t ag body t erdapat beberapa at ribut nam un ada dua
yang t erpent ing yait u ba ck gr oun d dan bgcolor . At ribut background digunakan unt uk
m em buat sebuah gam bar m enj adi lat ar dari halam an. Sedangkan bgcolor digunakan unt uk
m enset warna dari lat ar halam an websit e. Kali ini yang akan dibahas hanyalah t ag bgcolor
karena t ag background nilainya sam a dengan t ag im age yang akan dibahas kem udian.
Gam bar 2.7 Out put file t ag_body.ht m l
Saat nya m elem askan t angan kem bali. Ket ik kode di bawah ini.
Atribut dari Tag Image
Temukan rahasia menjadi webmaster dalam 30 hari hanya di http://www.rahasia-webmaster.com/
Bab 2 - Menggunakan Atribut dari Tag
18
Ini body dengan bgcolor="#000000" atau samadengan "black" dan font
color diset ="#ffffff" atau samadengan "white".
Di dalam html anda dapat menggunakan perpaduan warna antara angka dan huruf
seperti "#cgcgcg" akan menghasilkan warna abu-abu.
Sim pan dengan nam a t ag_body.ht m l dan buka dengan browser m aka akan t am pak sepert i
gam bar 2.7.
I . Ta g < im g>
Suat u websit e yang bagus past i m em iliki gam bar di dalam nya. Dan suat u wakt u
anda t ent u ingin m enam bahkan gam bar didalam websit e anda. Unt uk m enam pilkan gam bar
pada halam an dapat digunakan t ag < im g> . Form at file yang dapat didukung oleh t ag im g
berm acam - m acam m ulai BMP, JPG, GI F, TGA dan lain- lain.Tag im g m em iliki beberapa at ribut
yait u
‐
‐
‐
‐
sr c : let ak file gam bar yang akan dit am pilkan
bor de r : t ebal bingkai gam bar
he ight : m enent ukan t inggi im age/ gam bar
w idt h: m enent ukan lebar im age/ gam bar
Nilai dari at ribut sr c j ika let ak file gam bar berada pada direkt ori yang sam a dengan direkt ori file
ht m l anda. Maka cukup t uliskan nam a filenya saj a, cont ohnya sr c= ”n a m a _ file .j pg”. Dan j ika
let ak filenya berada pada sub folder/ direkt ori m aka nilainya adalah
sr c= ”sub_ folde r / n a m a _ file .j pg”. Lalu bagaim ana j ika let aknya pada folder/ direkt ori diat as
file ht m l saya?. Caranya ham pir sam a hanya saj a dit am bahkan t anda ../ ( t it ik dua dan slash) .
Yang art inya pindah sat u folder keat as, j ika let aknya di dua folder diat as file ht m l saya. Sam a
t inggal m enam bah ../ ../ ( art inya pindah dua folder ke at as) . Cont ohnya
sr c= ”../ na m a _ folde r / na m a _ file .j pg”.
Unt uk cont oh kali ini m asuklah ke direkt ori/ folder HTML yang t elah anda buat sebelum nya.
Buat lah sat u buah folder dalam direkt ori HTML t ersebut . Dan berilah nam a folder it u ga m ba r .
Lalu copykan sat u gam bar apa saj a kedalam folder ga m ba r t ersebut .
Lalu ket iklah kode berikut ini. I ngat gant i nilai dari sr c sesusai dengan nam a file gam bar anda.
Atribut dari Tag img
Tag img hanya dengan atribut src
Tag img dengan border="1"
...< / ol> , < ul> ...< / ul> da n < li> ...< / li>
Kali ini kit a akan m em bahas 3 t ag sekaligus. Karena m asing- m asing t ag t idak dapat dipisahkan.
Tag < ol> dan < ul> keduanya m em but uhkan t ag < li> agar dapat m enam pilkan out put . Tag- t ag
ini berguna unt uk m enyusun suat u daft ar yang ingin anda t onj olkan pada pengunj ung websit e.
Ah..., capek t eori lebih baik langsung prakt ek saj a OK. Ket ik kode dibawah ini.
Atribut dari tag ol, ul dan li
Penggunaan tag ol dengan li
Ini nomor 1
Ini nomor 2
Ini nomor 3
Temukan rahasia menjadi webmaster dalam 30 hari hanya di http://www.rahasia-webmaster.com/
Bab 2 - Menggunakan Atribut dari Tag
Penggunaan
Ini bullet
Ini bullet
Ini bullet
tag ul dengan li
1
2
3
Gabungan tag ol, ul dan li
Ini bullet 1
Ini nomor 1
Ini nomor 2
Ini bullet 2
Ini nomor 1
Ini nomor 2
Set elah selesai sim pan dengan nam a t ag_ol_ul_li.ht m l lalu j alankan pada browser. Maka
hasilnya sepert i yang dapat anda lihat pada gam bar 2.9.
Gam bar 2.9. Out put file t ag_ol_ul_li.ht m l
Temukan rahasia menjadi webmaster dalam 30 hari hanya di http://www.rahasia-webmaster.com/
20
Bab 2 - Menggunakan Atribut dari Tag
21
K. At r ibut u nive r sa l
Yang dim aksud at ribut universal dalam hal ini adalah suat u at ribut yang past i t erdapat pada t ag
apapun. Kit a sem ua t ahu t idak sem ua at ribut dapat dim asukkan dalam t ag t ert ent u. Cont ohnya
at ribut ce llpa dding m ilik t ag < t able> t idak dapat digunakan oleh t ag < p> .
Berikut ini adalah daft ar beberapa at ribut universal yang pent ing.
‐
‐
‐
na m e : at ribut ini unt uk m em beri nam a pada t ag yang digunakan( sangat pent ing dalam
t ag yang m em erlukan input dari user.
cla ss: at ribut ini digunakan khususnya j ika anda m enggunakan CSS( akan dibahas pada
bab khusus) .
t it le : at ribut ini m enam pilkan ket erangan yang t elah dit ent ukan oleh pem buat ( ist ilahnya
t oolt ips pada windows. Gerakkan m ouse anda pada j am kom put er akan m uncul t ulisan,
it ulah t oolt ips) .
Temukan rahasia menjadi webmaster dalam 30 hari hanya di http://www.rahasia-webmaster.com/
22
BERI KUTN YA
Pada bab selanj ut nya kit a akan coba m em buat websit e pribadi( personal hom e 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/
Bab 3 - Membuat Personal Homepage
Ba b
23
3
M e m bu a t W e bsit e Pr iba di
( Pe r son a l H om e pa ge )
Kebanyakan orang j ika baru m engenal HTML m aka ia akan m em buat websit e t ent ang profil
dirinya sendiri. Hal ini dikarenakan ia t idak t ahu apa yang harus ia publikasikan. Kali ini kit a
akan m encoba m em buat sebuah personal hom epage sederhana.
PERSI APAN
Sebelum m elakukan pendesainan lakukan beberapa hal berikut ini.
‐
‐
‐
‐
Buat lah sebuah folder di direkt ori C: \ HTML
Beri nam a folder t ersebut Ba b 3
Buat sebuah folder di direkt ori C: \ HTML\ Bab 3 yang baru kit a buat
Beri nam a folder t ersebut gam bar
Sem ua file HTML yang berhubungan dengan bab 3 akan kit a sim pan pada folder Bab 3. Begit u
pula dengan gam bar- gam bar yang berhubungan dengan bab 3 akan kit a sim pan di direkt ori
C: \ HTML\ Bab 3\ gam bar.
SKETSA PROYEK
Websit e yang akan anda buat adalah websit e pribadi yang berisi t ent ang profil dat a
David Joko
David Joko ingin pada websit e t ersebut t erdapat fot o dirinya, keluarga at au rum ah
rum ahnya.
David Joko ingin profil dat anya t erlet ak pada halam an berbeda
David Joko ingin t erdapat link- link di websit enya
Ket ika m endesain websit e biasakan unt uk m em buat sket sa kasarnya t erlebih dahulu. I ni
berguna agar pekerj aan kit a m enj adi lebih t erfokus. Tidak m asalah j ika nant inya anda
m elakukan perubahan pada t ahap akhir yang pent ing sket sanya sudah ada.
Unt uk m em buat sket sa desain anda bisa m enggam bar di sehelai kert as at au pada program
pengolah gam bar pada kom put er. Yang nam anya sket sa t idak harus bagus yang pent ing
gam baran um um nya saj a. Cont oh sket sa unt uk proyek kit a kali ini dapat anda lihat pada
gam bar 3.0.
LAN GKAH - LAN GKAH PEM BUATAN
Sepert i yang dapat anda lihat pada gam bar sket sa proyek, pada websit e t ersebut m em iliki 1
t abel ut am a dan 2 t abel anak yait u t abel fot o dan t abel m enu. Tabel ut am a t erdiri dari 2 kolom
dan 1 baris. Sedangkan pada t abel fot o dan m enu m asing- m asing m em iliki 1 kolom dan 1 baris.
Temukan rahasia menjadi webmaster dalam 30 hari hanya di http://www.rahasia-webmaster.com/
24
Bab 3 - Membuat Personal Homepage
Gam bar 3.0: Sket sa proyek
1 . H a la m a n Ut a m a [ inde x .ht m l]
Baiklah m ari kit a m ulai bekerj a. Pert am a j alankan PH P D ESI GN ER 2 0 0 6 klik m enu File - N e w H TM L/ X H TM L. Sepert i biasa m ari kit a m enget ik kode- kode yang enak ini.
David Joko Website
Ini nanti untuk link
SELAMAT DATANG
Temukan rahasia menjadi webmaster dalam 30 hari hanya di http://www.rahasia-webmaster.com/
Bab 3 - Membuat Personal Homepage
25
Set elah selesai sim pan kode diat as dengan nam a index.ht m l dan let akkan di folder bab3. Perlu
diket ahui file ut am a unt uk sebuah websit e m em iliki nam a index.ht m l. Server pert am a kali akan
m encari file bernam a index.ht m l. Jika ia t idak m enem ukan m aka server akan m enam pilkan
pesan error. Unt uk ket erangan lebih lanj ut nant i akan dij elaskan pada bab selanj ut nya.
Buka file t ersebeut dengan I nt ernet Explorer, hasilnya akan t erlihat sepert i gam bar 3.1.
Gam bar 3.1: Desain awal index.ht m l saat dij alankan.
File gam bar ini yang akan kit a gunakan unt uk m enam pilkan fot o. ( Kalau bisa ya fot o anda
sendiri, j ika t idak punya sem barang fot o j uga t idak apa- apa)
I nga t se su sa ik a n isi sr c= ”” se sua i de nga n n a m a file a nda .
Sekarang saat nya m engupdat e isi w ebsit e dengan yang sebenarnya. Unt uk it u bukalah file
index.ht m l dan rubahlah kode yang diberi w a r na k u ning diat as sehingga m enj adi sepert i
berikut . Jangan lupa ubah at ribut border pada set iap t abel m enj adi “0 ”
David Joko Website
Temukan rahasia menjadi webmaster dalam 30 hari hanya di http://www.rahasia-webmaster.com/
Bab 3 - Membuat Personal Homepage
Profil
Kegiatan
Foto-foto
Puisi Teman
Email saya
SELAMAT DATANG DI WEBSITE DAVID
JOKO
Saya ucapkan terima kasih atas kunjungan anda ke website
saya. Pada website ini anda dapat melihat profil data diri saya dan kegiatankegiatan yang saya lakukan. Di bawah ini adalah puisi yang saya buat beberapa
waktu lalu. Inspirasi puisi ini datang ketika saya termenung sendirian dan
memandang langit nan luas.
Aku dan Tuhanku
Ketika aku memandang langit
aku bertanya pada pada diriku
aku...
siapakah aku sebenarnya?
darimanakah aku berasal?
jauhkah aku dari Tuhanku?
aku....
Tuhan...
betapa kuasanya engkau
menciptakan langit dan bumi
untuk menghidupi orang-orang
seperti aku
aku...
apakah aku sudah mengabdi kepadamu?
Temukan rahasia menjadi webmaster dalam 30 hari hanya di http://www.rahasia-webmaster.com/
26
27
Bab 3 - Membuat Personal Homepage
rasanya hanya aku dan Engkau yang tahu
Set elah selesai m engedit sim panlah file t ersebut . Jalankan file t ersebut lewat I E
Hasilnya dapat anda lihat pada gam bar 3.2.
Gam bar 3.2: Out put file index.ht m l
2 . H a la m a n Pr ofil [ pr ofil.ht m l]
Selanj ut nya kit a akan m em buat file profil.ht m l yang akan m enam pilkan daft ar riw ayat hidup
david j oko. File profil.ht m l t erdiri dari 1 t abel dan m em iliki 2 kolom dan banyak baris.
Jalankan PHP DESI GNER 2006 Klik File - N e w - H TM L/ X H TM L. Ket ik kode dibawah ini.
Profil David Joko
Temukan rahasia menjadi webmaster dalam 30 hari hanya di http://www.rahasia-webmaster.com/
Bab 3 - Membuat Personal Homepage
28
DATA PRIBADI
Nama:
David Joko
Tempat/Taggal lahir:
Surabaya, 10 Nopember 1978
Agama:
Islam
Gol. Darah:
O
Pekerjaan:
Swasta
Hobi:
Traveling, Mancing
Kembali ke halaman
utama
Sim pan file diat as dengan nam a profil.ht m l. Lalu j alankan pada browser, hasilnya akan
nam apak sepert i gam bar 3.3.
Pada kode diat as t erdapat at ribut colspa n= ”2 ” pada t ag < t d> . I ni dikarenakan kit a ingin
m enj adikan 2 kolom m enj adi 1 kolom unt uk j udul D ATA PRI BAD I . Karena j um lah kolom nya 2
m aka isi colspan= ” 2” j ika kolom nya 4 m aka isinya 4 j uga.
Temukan rahasia menjadi webmaster dalam 30 hari hanya di http://www.rahasia-webmaster.com/
Bab 3 - Membuat Personal Homepage
29
Gam bar 3.3: File profil.ht m l saat dij alankan.
3 . H a la m a n Ke gia t a n [ k e gia t a n.ht m l]
Wih..., t idak t erasa m at eri kit a sudah j auh rupany
Mastering Kode
HTML
Edisi Kedua
Rio Ast am al
© Copyright 2005- 2006 www.rahasia- webm ast er.com
ii
Ka t a Pe nga nt a r
Pert am a- t am a t ak lupa saya panj at kan puj i syukur kehadirat Allah Tuhan Yang Maha Pengasih.
Karena hanya dengan ridhoNyalah saya dapat m enyelesaikan e- book ini. Dan t ak lupa saya
sam paikan t erim a kasih kepada sem ua pengaj ar saya yang t elah berj asa m em buat saya
m em iliki kem am puan sepert i ini.
Tuj uan pem buat an e- book ini sebenarnya adalah unt uk m em bant u anda yang t elah m em beli ebook “ Menj adi Webm ast er dalam 30 Hari” . Karena pada e- book t ersebut penj elasan t ent ang
kode HTML relat if singkat dan hanya fokus pada PHP. Sehingga e- book ini dibuat unt uk
m em ant apkan penget ahuan anda t ent ang kode HTML.
Dalam e- book “ Mast ering Kode HTML” ini anda akan diaj arkan penget ahuan dasar hingga
t ingkat m enengah bagaim ana m em buat sebuah websit e dengan cepat . Dalam e- book ini anda
t idak diaj arkan unt uk m enggunakan soft ware HTML Edit or yang bersifat WYSI WYG ( What You
See I s What You Get ) sepert i Front Page at au Dream Weaver.
Penulis sadar bahwa m asih banyak kekurangan yang t erdapat pada e- book ini. Unt uk it u
penulis m engharapkan saran dan krit ik dari pem baca.
Mudah- m udahan dengan hadirnya e- book ini dapat m em aj ukan dan m eningkat kan SDM
I ndonesia khususnya dalam bidang TI .
Sur a ba ya , Juni 2 0 0 5
Pe nulis
Temukan rahasia menjadi webmaster dalam 30 hari hanya di http://www.rahasia-webmaster.com/
iii
H a k Cipt a M a st e r in g Kode H TM L
E- book " Mast ering Kode HTML" m erupakan hasil kerj a keras penulis. Dilarang keras unt uk
m engubah, m enj ual sebagian at au seluruh isi dari e- book ini unt uk kepent ingan kom ersial
t anpa seij in penulis.
Lisensi e- book ini adalah Gr a t is. Anda dapat m enyebarluaskan, m enggandakan e- book ini
secara bebas a sa lk a n anda t idak m engubah isi dan hak cipt a e- book ini.
Jika anda m enem ukan orang at au kelom pok yang m enj ual e- book ini, saya m ohon kepada anda
unt uk m elaporkan hal t ersebut kepada saya. Akan ada bonus spesial unt uk anda dari saya at as
inform asi yang anda berikan.
Laporkan inform asi t ersebut ke adm in@rahasia- webm ast er.com .
H a k Cipt a D ilindu ngi Unda ng- u nda ng
Ala m a t D ow n loa d M a t e r i E- book
Sem ua source code dari m at eri yang dibahas dalam e- book ini dapat anda download di alam at :
ht t p: / / m at eri.rahasia- webm ast er.com / m kht m l/
Te nt a n g M a t e r i
Sem ua script dalam e- book ini t elah dit es dan bekerj a. Nam un, m ungkin dalam penyalinan
script t ersebut ke e- book ini ada suat u kesalahan sehingga m enyebabkan script t ersebut t idak
bisa j alan.
Jadi j ika ada script pada e- book ini yang t idak bisa j alan at au t erdapat error. Saya m ohon
kesediaan anda unt uk m elaporkan hal t ersebut kepada saya.
Anda dapat m engirim nya ke bug@rahasia- webm ast er.com
Terim a Kasih.
Edisi
Edisi Pert am a: 01 Maret 2006
M e r e k D a ga n g
Sem ua m erek dagang yang disebut kan dalam e- book ini m erupakan Hak Cipt a dari m asingm asing vendor pem buat nya.
Microsoft , Microsoft Word, Microsoft Front page m erupakan m erek dagang dari Microsoft Corp.
Adobe, Adobe GoLive m erupakan m erek dagang dari Adobe I nc.
Macrom edia, Macrom edia Dream Weaver m erupakan m erek dagang dari Macrom edia I nc.
Temukan rahasia menjadi webmaster dalam 30 hari hanya di http://www.rahasia-webmaster.com/
iv
Uca pa n Te r im a Ka sih
Saya ucapkan banyak t erim a kasih kepada sem ua pihak yang t elah m endukung saya, sehingga
pem buat an e- book Mast ering Kode HTML ini dapat t erwuj ud.
********************
Temukan rahasia menjadi webmaster dalam 30 hari hanya di http://www.rahasia-webmaster.com/
v
D a ft a r I si
Kat a Pengant ar............................................................................................... ............
Daft ar I si...................................................................................................................
Pendahuluan.................................................................................................. ............
iii
v
vi
Ba b 1 – M e nge na l H TM L Le bih Ja uh
Pengert ian HTML............................................................................................. ...........
Menggunakan Tag pada HTML........................................................................... ...........
Daft ar Tag pada HTML.................................................................................................
1
1
1
2
Ba b 2 – M e nggu na k a n At r ibut da r i Ta g
Cont oh- cont oh penggunaan t ag dan at ribut nya..............................................................
Tag < p> < / p> .......................................................................................... ..........
Tag < font > < / font > .............................................................................................
Tag < t able> < / t able> ..........................................................................................
Tag < form > < / form > ...........................................................................................
Tag < select > < / select > dan < opt ion> ....................................................................
Tag < a> < / a> .....................................................................................................
Tag < body> < / body> ................................................................................ ..........
Tag < im g> .........................................................................................................
Tag < ul> < / ul> ,< ol> < / ol> , dan < li> < / li> ..............................................................
At ribut Universal.................................................................................................
7
7
8
10
11
13
15
16
17
18
19
21
Ba b 3 – M e m bua t W e bsit e Pr iba di ( Pe r sona l H om e Pa ge )
23
Ba b 4 – M e ng- Uploa d File k e Se r ve r
36
Pengert ian Upload...................................................................................................... 36
Menyewa Web Host ing................................................................................................ 36
Langkah- langkah Mengupload..................................................................................... 37
Ba b 5 – Ca sca din g St yle She e t ( CSS)
42
Pengert ian CSS.......................................................................................................... 42
Mengaplikasikan CSS....................................................................................... .......... 42
Ba b 6 – M e nde sa in W e bsit e Kom e r sil
57
Tam pilan Websit e............................................................................................ .......... 57
Kesesuaian I si Websit e dengan Tam pilan............................................................ .......... 57
Kem udahan Navigasi.................................................................................................. 58
Manfaat yang Diperoleh.............................................................................................. 58
Ba b 7 – Ja va scr ipt
68
Pengert ian Javascript ....................................................................................... .......... 68
Aplikasi Javascript ...................................................................................................... 69
I nput Box........................................................................................................... 69
Pop- up Window................................................................................................... 72
Dilarang Klik Kanan.............................................................................................. 73
Menam pilkan Hari dan Tanggal.............................................................................. 75
Pe nut up
76
**********
Temukan rahasia menjadi webmaster dalam 30 hari hanya di http://www.rahasia-webmaster.com/
vi
Pe n da h u lu a n
Un t u k sia pa buk u ini?
Buku ini dit uj ukan bagi anda yang belum m engenal sam a sekali kode HTML at au sudah
m enget ahui HTML secara garis besar dan ingin m enam bah kem am puan.
Apa it u H TM L?
HTML( Hyper Text Markup Language) adalah sekum pulan sim bol- sim bol at au t ag- t ag yang
dit uliskan dalam sebuah file yang dim aksudkan unt uk m enam pilkan halam an pada web
browser. Tag- t ag t adi m em berit ahu browser bagaim ana m enam pilkan halam an w eb dengan
lengkap kepada pengguna.
Tag- t ag HTML selalu diawali dengan < x> dan diakhiri dengan < / x> dim ana x t ag HTML sepert i
b, i, u dan sebagainya.
Apa Sa j a Ya n g D ibu t u h k a n ?
Unt uk m em pelaj ari ebook ini anda hanya m em erlukan:
Text Edit or ( Not epad, vi, em acs, dsb)
Web Brow ser ( I nt ernet Explorer, Opera, FireFox, dsb)
Hanya dengan berm odalkan dua soft w are bawaan Windows it u saj a anda sudah dapat m em buat
websit e. Nam un Not epad m em iliki kekurangan yait u t idak m em iliki synt ax highlight ing
( pewarnaan kode) sehingga relat if cukup m enyulit kan.
Unt uk it u saya m erekom endasikan pada anda unt uk m enggunakan “ PHP DESI GNER 2006” .
Kelebihan soft ware ini adalah ia m em iliki banyak m acam synt ax highlight ing m ulai dari HTML,
PHP, JAVA dan m asih banyak lagi. Nam un yang t erpent ing dari soft ware ini sifat nya FREE alias
GRATI S.
Anda dapat m endownload “ PHP DESI GNER 2006” di alam at :
ht t p: / / www.m psoft ware.dk/
N B: Jika anda m enggunakan not epad sebagai edit or. Past ikan ket ika hendak m enyim pan
file pilihan Sa ve As Type - nya adalah All Files. Hal ini unt uk m enghindari t ersim pannya
script kit a sebagai file t ext biasa.
Or ga n isa si Bu k u
Ebook ini disusun t ahap dem i t ahap sesuai dengan t ingkat kesulit annya. Mulai dari bab 2 anda
akan diaj arkan m em buat websit e sederhana hingga bab t erakhir m em buat websit e yang
berbobot . Jadi j angan m elew at kan 1 bab pun agar anda m engert i t ent ang apa yang dibahas.
M e n ga pa Tida k M e n ggu na k a n Pr ogr a m W YSI W YG?
Program HTML edit or WYSI WG ( What You See I s What You Get ) adalah program HTML edit or
yang m enyediakan int erface sepert i program pada Microsoft Word. Nam un out put yang
Temukan rahasia menjadi webmaster dalam 30 hari hanya di http://www.rahasia-webmaster.com/
vii
dihasilkan berupa file HTML. Cont oh program HTML edit or yang bersifat WYSI WYG adalah
Microsoft Front Page, Macrom edia Dream weaver dan Adobe GoLive.
Kit a asum sikan anda sebagai orang awam yang belum m engenal sam a sekali HTML. Jika anda
m enggunakan program sem acam ini dan hanya drag n drop saj a t anpa m engert i kodenya m aka
sam a saj a anda t idak m enguasai t eknik pem rogram an web secara nyat a.
I ni akan m em persulit anda j ika nant i anda m em pelaj ari bahasa w eb progrom m ing sepert i Java
at au PHP. Oleh karena it u, dalam m at eri yang kit a bahas dalam ebook ini m enggunakan “ PHP
Designer 2006” yang sifat nya hanya synt ax highlight ing. Nam un set elah m em baca e- book ini
dan m enguasai HTML anda t ent u sudah m engert i dan t idak bingung ket ika m enggunakan
program WYSI WYG.
Ba ga im a n a M e n ggu na k a n E- book I n i?
Dalam m enggunakan ebook in, buat lah sebuah folder di drive C: \ m isalnya HTML. Pada folder
HTML buat lah sub- sub folder sesuai dengan j um lah bab dalam ebook ini.
Misalnya Bab 1, Bab 2 dan set erusnya. Sim panlah file yang berhubungan dengan bab t ersebut
di folder Bab yang sedang anda kerj akan.
**********
Temukan rahasia menjadi webmaster dalam 30 hari hanya di http://www.rahasia-webmaster.com/
1
Bab 1 - Mengenal HTML Lebih Jauh
Ba b
1
M e n ge n a l H TM L Le bih Ja u h
Set elah m em baca m at eri pada bab 1 ini anda diharapkan dapat m engert i t ent ang:
Pengert ian HTML
Menggunakan t ag pada HTML
Menget ahui daft ar t ag pada HTML
Pe n ge r t ia n H TM L
Sepert i yang t elah dij elaskan sebelum nya bahwa HTML( Hyper Text Markup Language) adalah
sim bol- sim bol at au t ag- t ag yang dit uliskan dalam sebuah file yang dim aksudkan unt uk
m enam pilkan halam an pada web browser. Tag- t ag HTML selalu diaw ali dengan < x> dan diakhiri
dengan < / x> dim ana x t ag HTML sepert i b, i, u dan sebagainya. Nam un ada j uga t ag yang
t idak diakhiri dengan t anda < / x> sepert i t ag < br> , < input > dan lainnya.
Sebuah halam an websit e akan diapit oleh t ag < ht m l> ……< / ht m l> . File- file HTML selalu
berakhiran dengan ekst ensi * .ht m at au * .ht m l. Jadi j ika anda m enget ik sebuah naskah dan
m enyim pannya dengan ekst ensi * .ht m l m aka anda m em buat file yang berform at HTML.
M e nggu na k a n Ta g pa da H TM L
Beberapa cont oh penggunaan t ag HTML,
Cont oh
H a sil
< b> I ni t ulisan t ebal< / b>
I ni t u lisa n t e ba l
< i> I ni t ulisan m iring< / i>
I ni t ulisan m iring
< u> I ni t ulisan bergaris bawah< / u>
I ni t ulisan bergaris bawah
I ni baris 1< br> I ni baris 2
I ni baris 1
I ni baris 2
I ni garis horizont al < hr>
I ni garis horizont al
Ada beberapa t ag yang m em ilki at ribut didalam nya, sepert i t ag < font > , < t able> , < input > dan
sebagainya. Pada t ag font ia m em iliki beberapa at ribut diant aranya at ribut : color, size, face.
Unt uk lebih m em aham i at ribut lihat lah cont oh berikut ini.
< font color= ” red” face= ” Arial” size= ” 12” > I ni Font Arial berwarna m erah dan berukuran 12
pt < / font >
hasil Î Ini Font Arial berwarna merah dan berukuran 12 pt
At ribut color digunakan unt uk m enent ukan warna t ulisan.
At ribut face digunakan unt uk m enent ukan j enis huruf.
At ribut size digunakan unt uk m enent ukan ukuran huruf.
Temukan rahasia menjadi webmaster dalam 30 hari hanya di http://www.rahasia-webmaster.com/
2
Bab 1 - Mengenal HTML Lebih Jauh
Jika anda lihat bahwa at ribut color berada pada awal, lalu yang kedua adalah face dan yang
t erakhir adalah size. Anda t ida k pe r lu m em perdulikan urut an at ribut t ersebut karena browser
hanya m em baca isi dari properi bukan urut an at ribut nya.
D a ft a r Ta g pa da H TM L
Berikut ini adalah t abel t ag- t ag HTML dan fungsinya:
Ta g Ut a m a
Tag
At ribut
< ht m l>
< / ht m l>
< head>
< / head>
< t it le>
< / t it le>
background
bgcolor
bgsound
font
link
< body>
alink
< / body>
vlink
t opm argin
left m argin
m arginheight
m arginwidt h
Deskripsi
Baris paling at as dari set iap file HTML
I nform asi um um dari sebuah halam an web
Judul halam an. Terdapat pada head
Set t ingan at ribut unt uk seluruh dokum en.
M odifik a si Te k s
Tag
< b> < / b>
< i> < / i>
< u> < / u>
< pre> < / pre>
Deskripsi
Teks t ebal
Teks m iring
Teks garis bawah
Preform at t ed t eks
Cont oh
Te k s t e ba l
Teks m iring
Teks garis bawah
Cont oh t eks
< h1> < / h1>
Header 1
Header 1
< h2> < / h2>
Header 2
Header 2
< h3> < / h3>
Header 3
Header 3
< h4> < / h4>
< h5> < / h5>
< h6> < / h6>
< sub> < / sub>
Header 4
Header 5
Header 6
Subscript
Header 4
< sup> < / sup>
Superscript
Header 5
Header 6
Subscript
Super
script
Font
Temukan rahasia menjadi webmaster dalam 30 hari hanya di http://www.rahasia-webmaster.com/
3
Bab 1 - Mengenal HTML Lebih Jauh
Tag
< font >
< / font >
At ribut
color
size
nam e
Deskripsi
Mengubah gaya suat u huruf.
Link s
Tag
At ribut Deskripsi
href
t arget
st yle
Mem buat link ke dokum en at au sit us lainnya.
< a> < / a>
class
nam e
id
Ga m ba r
Tag
< im g>
At ribut
src
alt
nam e
border
height
widt h
Deskripsi
Menam pilkan sebuah gam bar
For m a t t in g
Tag
Deskripsi
Cont oh
Digunakan unt uk
< blockquot e>
Sam ple of t ext in a block quot e form at
m engat ur t ext dan
< / blockquot e>
gam bar dalam suat u t ag
Ordered List ( digunakan
dengan < li> )
1. I t em 1
•
< li>
< dd> < / dd>
< dt >
< dd>
Unordered List
( digunakan dengan
< li> )
Elem en List
Definit ion List
Definit ion Term
Definit ion Descript ion
< p> < / p>
Paragraf
< br>
Gant i baris
< hr>
< cent er>
< / cent er>
Garis horizont al
< ol> < / ol>
< ul> < / ul>
Menengahkan elem en
I t em 1
Sam ple t ext
Sam ple t ext
Sam ple t ext
Sam ple
t ext
Sam ple
t ext
Sam ple
Temukan rahasia menjadi webmaster dalam 30 hari hanya di http://www.rahasia-webmaster.com/
Bab 1 - Mengenal HTML Lebih Jauh
Ta be l
Tag
At ribut
Deskripsi
border
cellpadding
cellspacing
widt h
height
nam e
Mengat ur sem ua elem en t able
< t able> < / t able>
id
t it le
bgcolor
background
align
valign
height
bgcolor
background
< t r> < / t r>
Mem buat baris baru
align
valign
t it le
height
widt h
bgcolor
background
< t d> < / t d>
Mem buat kolom
align
valign
t it le
colspan
rowspan
height
widt h
bgcolor
background
< t h> < / t h>
Header( kepala t abel) . Ot om at is ke t engah dan t ebal.
align
valign
t it le
colspan
rowspan
height
widt h
< t body>
align
Form at yang berlaku bagi cell yang diapit t ag.
< / t body>
valign
bgcolor
background
height
widt h
align
< colgroup>
Form at yang berlaku bagi kolom
valign
< / colgroup>
bgcolor
background
colspan
Temukan rahasia menjadi webmaster dalam 30 hari hanya di http://www.rahasia-webmaster.com/
4
5
Bab 1 - Mengenal HTML Lebih Jauh
For m
Tag
< form >
< / form >
At ribut
Deskripsi
m et hod
act ion
nam e
Mengat ur elem en dari form
t ext
password
hidden
radio
< input t ype= >
Variasi dari t ipe elem en form
checkbox
subm it
im age
reset
nam e
value
Sample tex
t ext
widt h
m axlengt h
nam e
value
***********
password
widt h
m axlengt h
nam e
Digunakan unt uk m em buat variable hidden.
hidden
value
radio
nam e
value
checkbox
nam e
value
checked
subm it
value
im age
src
height
widt h
alt
nam e
border
reset
value
< select >
< / select >
nam e
size
select ed
nam e
value
< opt ion>
< t ext area>
< / t ext area>
nam e
row s
cols
wrap
w rap
off
Radio 1
Radio 2
Check 1
Check 2
Tombol
Reset
Mem buat com bo- box. Digunakan bersam a dengan opt ion
Option 1
Text
area box. Text is typed betw ee
the tags
no wrap
Temukan rahasia menjadi webmaster dalam 30 hari hanya di http://www.rahasia-webmaster.com/
6
Bab 1 - Mengenal HTML Lebih Jauh
virt ual
physical
word wrap, sent as one line
word wrap, sent wit h breaks
Anda t idak perlu m enghafal sem ua t ag t ersebut , nant i m alah kepala anda m alah pecah! . Cukup
hafalkan yang pent ing- pent ing saj a sepert i < t able> < form > < input > < ul> . Tidak hafal pun t idak
apa- apa kan kit a bisa m elihat daft ar kalau lupa, yang pent ing kit a paham , BETUL?.
Temukan rahasia menjadi webmaster dalam 30 hari hanya di http://www.rahasia-webmaster.com/
7
BERI KUTN YA
Pada bab selanj ut nya kit a akan m em bahas lebih det ail t ent ang penerapan propert y dari t ag
yang sering kit a gunakan.
**********
Temukan rahasia menjadi webmaster dalam 30 hari hanya di http://www.rahasia-webmaster.com/
Bab 2 - Menggunakan Atribut dari Tag
Ba b
8
2
M e n ggu n a k a n At r ibu t da r i Ta g
Sebelum m em ulai sekedar m engingat kan apakah anda sudah m em buat folder di drive C: \ yang
bernam a HTML j ika t idak, buat lah sekarang. Lalu buat lah folder yang bernam a bab 1, bab2 dan
set erusnya. Jika anda prakt ik pada bab 2 m aka sim panlah file anda pada folder bab 2.
Dem ikian unt uk set erusnya.
Pada bab 2 ini m at eri yang diharapkan dapat anda kuasai ant ara lain:
Menggunakan berbagai at t ribut dari t ag diant aranya:
Tag p, font , t able, form , input , select , opt ion, a, body, im g, ul, ol, li dan at t ribut
universal
Con t oh - con t oh pe n ggu n a a n t a g da n a t r ibu t n y a
Pada bab sebelum nya t elah anda pelaj ari m acam - m acam at ribut dari t ag yang t erdapat pada
HTML. Sekarang saat nya kit a m enerapkan at ribut t ersebut dalam sebuah file. Unt uk lebih
m em udahkan anda dalam m em aham i kit a langsung saj a pada cont oh.
•
•
Pert am a j alankan soft ware “ PHP DESI GNER 2006”
Klik m enu File – New – HTML/ XHTML
Maka akan nam pak sebuah ruang kerj a m irip dengan dengan Microsoft Word. Unt uk cont oh
yang pert am a ini kit a akan m enggunakan at ribut dari t ag < p> …< / p> .
A. Ta g < p> …< / p>
Tag < p> digunakan unt uk m em buat paragraf dalam sebuah halam an web. Kit a sem ua t ahu
kalau paragraph ada yang bert ipe rat a kiri, t engah, kanan dan j ust ify. Unt uk lebih m em perj elas
ket ik kode di bawah ini.
Atribut Tag
Teks ini berada di kiri
Teks ini berada di tengah
Teks ini berada di kanan
Paragraph ini bertipe justify. Dimana semua teks akan dibuat
lurus sama dengan batas tepi halaman. Oh ya, tag <p></p> merupakan
default atau bentuk baku tag <p></p> dimana teks atau paragraf akan
berformat rata kiri. Jika anda tidak memberi atribut align pada tag
<p> maka browser akan menganggap rata kiri.
Temukan rahasia menjadi webmaster dalam 30 hari hanya di http://www.rahasia-webmaster.com/
Bab 2 - Menggunakan Atribut dari Tag
9
Set elah selesai sim pan file t ersebut dengan m engklik m enu File – Sa ve . Akan m uncul kot ak
dialog Save, arahkan ke drive C: \ lalu HTML( j ika anda m em buat folder lain silahkan sim pan di
folder anda t ersebut ) lalu Bab 2. Pada isian File N a m e isikan t ag_p.ht m l dan past ikan Sa ve a s
Type adalah HTML Docum ent . Unt uk m enj alankan anda cukup t ekan t om bol F5 m aka akan
m uncul out put dari kode anda.
Gam bar 2.0 file t ag_p.ht m l saat desain t im e.
Gam bar 2.1 file t ag_p.ht m l saat dij alankan
Nam un dalam hal ini saya t idak m enggunakan browser built ini pada PHP DESI GNER 2006.
Melainkan browser ekst ernal sepert i I nt ernet Explorer at au FireFox. Buka I E at au FireFox klik
File – Open, arahkan dim ana anda m enyim pan file t ag_p.ht m l t adi. Hasilnya akan t erlihat
sepert i gam bar 2.1.
Temukan rahasia menjadi webmaster dalam 30 hari hanya di http://www.rahasia-webmaster.com/
10
Bab 2 - Menggunakan Atribut dari Tag
B. Ta g < font > …< / font >
Fungsi t ag < font > adalah unt uk m em anipulasi baik j enis, ukuran, dan warna huruf. Pada bab 1
t elah kit a singgung penggunaan at ribut font .
Nam un kit a akan lebih bereksperim en dengan at ribut ini.
Sepert i biasa klik File – N e w – H TM L/ X H TM L.
Ket ik kode di bawah ini.
Atribut dari Tag Font
ENTER
Ini Font Arial
Ini Font Arial dan miring
Ini Font Verdana berukuran 12 pt
berwarna biru sekaligus tebal
Ini Font Tahoma berwarna
merah, tebal dan berada di tengah
Ini Font Arial berwarna Merah,
Sedangkan ini adalah font Verdana
berwarna biru
Nb: Tanda Ent er pada kode diat as t idak berpengaruh pada t am pilan/ out put pada browser. Ent er
digunakan agar kode m udah dibaca.
Gam bar 2.2 Out put file t ag_font .ht m l
Temukan rahasia menjadi webmaster dalam 30 hari hanya di http://www.rahasia-webmaster.com/
11
Bab 2 - Menggunakan Atribut dari Tag
Set elah selesai sim pan dengan nam a t ag_font .ht m l sim pan pada folder bab 2 sam a dengan
t ag_p.ht m l. Out put dari kode di at as dapat anda lihat pada gam bar 2.2.
C. Ta g < t a ble > ...< / t a ble >
Tag < t able> adalah salah sat u t ag yang m em iliki at ribut t erbanyak. Lihat t abel daft ar t ag pada
bab 1 unt uk m elihat daft ar at ribut nya. Dalam t ag < t able> j uga t erdapat 2 t ag yang pent ing
yang pent ing yait u t ag < t r> < / t r> unt uk m em buat baris dan t ag < t d> < / t d> unt uk m em buat
kolom .Tag < t able> adalah t ag yang pent ing dalam pendesainan sebuah t am pilan sit us. Jadi
anda harus cukup m enguasai t ag ini.
Gam bar 2.3. Out put file t ag_t abel.ht m l
OK, sekarang buat lah file baru sepert i biasa klik File – N e w – H TM L/ X H TM L. Ket ik kode
dibawah ini. Jangan t egang sant ai saj a....! .
Atribut dari tag tabel
Temukan rahasia menjadi webmaster dalam 30 hari hanya di http://www.rahasia-webmaster.com/
Bab 2 - Menggunakan Atribut dari Tag
Membuat Tabel
Ini kolom 1 pada baris 1
Ini kolom 2 pada baris 1
Ini kolom 1 pada baris 2
Ini kolom 2 pada baris 2
Contoh 2: Membuat Tabel
Ini kolom 1 pada baris 1
Ini kolom 2 pada baris 1
Ini kolom 1 pada baris
2
Ini kolom 2 pada baris 2
Tabel sebagai bingkai dari paragraf
Tabel memiliki peranan sangat penting dalam tampilan sebuah situs web.
Tanpa tabel desainer akan mengalamai kesulitan dalam mendesain sebuah halaman
web.
Kalau anda perhatikan website yan memiliki tampilan yang tersusun rapi.
Sebenarnya itu adalah tabel hanya saja atribut border="0" sehingga tabel seakan tidak
ada(transparan).
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
Nama Barang
Harga Barang
MonitorRp. 500.000,-
CDRWRp. 245.000,0
Temukan rahasia menjadi webmaster dalam 30 hari hanya di http://www.rahasia-webmaster.com/
12
Bab 2 - Menggunakan Atribut dari Tag
13
Set elah it u sim pan dengan nam a t ag_t abel.ht m l sert a t et ap sim pan di folder bab 2. Gam bar 2.3
m enunj ukkan out put dari kode diat as.
Gam bar 2.4. Out put file t ag_form _input .ht m l
D . Ta g < for m > ...< / for m >
Tag < form > berguna unt uk m engirim kan( m em - post ) variabel yang bersisi dat a ke file t uj uan
yang m em proses variabel t ersebut . Tag- t ag yang biasa digunakan bersam a t ag form adalah t ag
< input > dan < t ext area> .
At ribut form yang banyak digunakan adalah m et hod dan act ion. At ribut m et hod m enent ukan
j enis pengirim an dat a bisa berupa “ POST” at au “ GET” . Sedangkan act ion adalah file t uj uan yang
akan m em proses dat a yang ada diant ara t ag < form > ...< / form > .
Unt uk lebih j elasnya lihat lah cuplikan script di bawah ini.
......................................
ISI
......................................
Temukan rahasia menjadi webmaster dalam 30 hari hanya di http://www.rahasia-webmaster.com/
Bab 2 - Menggunakan Atribut dari Tag
14
Sepert i dikat akan sebelum nya t ag form t idak dapat digunakan sendirian. I a harus m em punyai
dat a didalam nya unt uk it ulah digunakan t ag- t ag lain. Tag yang sering digunakan adalah.
E. Ta g < input >
Tag < input > m em iliki at ribut t ype yang fungsinya sangat vit al dalam out put t am pilan. I si dari
at ribut t ype dapat m enent ukan j enis t am pilan apakah it u t ext box, password box, checkbox,
radio but t on dan sebagainya.
Daripada banyak bert eori lebih baik kit a prakt ek saj a. Sepert i biasa buat file baru dan ket ik
kode di bawah ini.
Atribut tag Form dan Input
Tag input dengan atribut type="text"
Ini textbox dengan nama teks_ku ukuran 16 chr dan maksimal karakrer
yang dapat ditampung 20 chr(character).
Tag input dengan atribut type="password"
nama
radio_ku isi/value isi_1
Radio 2 --> nama
radio_ku isi/value isi_2
Jika nama radio tidak sama maka tidak dianggap satu pilihan. Untuk
membuktikannya silahkan ganti salah satu nama dari radio diatas untuk mengetahui
perbedannya.
Tag input dengan atribut type="checkbox"
Checkbox 1 --> nama
checkbox_ku_1 isi/value isi_1
Checkbox 2 --> nama
checkbox_ku_2 isi/value isi_2
Tag input dengan atribut type="submit"
Tombol ini berguna untuk mem-post(mengirimkan variabel dan isi variabel yang ada
pada form ke file tujuan (action="file_tujuan"))
Tag input dengan atribut type="reset"
Tombol ini berguna untuk membersihkan seluruh tulisan yang ada pada seluruh isian
form. Coba isikan semua textbox dan radio lalu tekan tombol ini.
Tag input dengan atribut type="hidden"
Temukan rahasia menjadi webmaster dalam 30 hari hanya di http://www.rahasia-webmaster.com/
Bab 2 - Menggunakan Atribut dari Tag
Tipe ini berguna jika si webmaster menginkan variabel yang sifatnya sudah
didefinisikan. Dan tidak menampilkan output apapun.
Tag input dengan propeti type="image"
Image memiliki fungsi yang sama dengan type submit
Sim pan dengan nam a t ag_form _input .ht m l dan j alankan. Hasilnya akan sepert i yang t erlihat
pada gam bar 2.4.
F. Ta g < se le ct > ...< / se le ct > da n < opt ion >
Mengapa kit a langsung m em bahas 2 t ag?. Pert anyaan yang bagus dan j awabannya sam a
dengan dengan pem bahasan diat as. Tag select t idak bisa berdiri sendiri dan harus
m enggandeng t ag opt ion unt uk dapat m enam pilkan out put . Dan cara kerj anya ham pir sam a
dengan t ag radio hanya saj a t ag select lebih singkat .
Gam bar 2.5: Out put file t ag_form _select .ht m l
Sekarang m ari kem bali berm ain kode. Buat file baru dan ket ik bahasa planet dibawah ini!
Propeti tag Select dan Option
Penggunaan select dan dan option
Daftar kategori silahkan pilih kategori
Kategori:
Kategori 1
Kategori 2
Kategori 3
Temukan rahasia menjadi webmaster dalam 30 hari hanya di http://www.rahasia-webmaster.com/
15
16
Bab 2 - Menggunakan Atribut dari Tag
Sim pan dengan nam a t ag_form _select .ht m l lalu j alankan pada browser. I ngat agar Sa ve a s
t ype nya adalah HTML Docum ent .
G. Ta g < a > ...< / a >
Anda t ent u sering surfing di int ernet dan m engklik suat u t ulisan at au gam bar yang m enuj u
halam an websit e lainnya. Tulisan at au gam bar it u adalah link. Ya, link adalah t ulisan at au
gam bar yang m eruj uk/ m em buka halam an suat u websit e. Segala t ulisan at au t ag lainnya yang
diapit t anda < a> dan < / a> akan dianggap link oleh brow ser.
Gam bar 2.6 Out put file t ag_a.ht m l
Nah, wakt unya m elem askan t angan. Ket ik kode dibaw ah ini.
Atribut dari tag A
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 <a> dan </a> akan dianggap link oleh browser. Atribut yang
sangat penting dalam tag a adalah atribut href. Isi dari atribut ini
adalah alamat website yang dituju.
Temukan rahasia menjadi webmaster dalam 30 hari hanya di http://www.rahasia-webmaster.com/
17
Bab 2 - Menggunakan Atribut dari Tag
Contoh link ke alamat Google
Ini link ke google.com
Link juga mempunyai atribut target 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.
Contoh link dengan atribut target="_blank"
Bagaimana Menjadi
Webmaster dalam 30 Hari
Untuk atribut target lainnya silahkan bereksperimen sendiri. Karena Thomas
Alfa Eddison pun melakukan ribuan percobaan sebelum akhirnya ia dapat menemukan
bohlam.
Sim pan dengan nam a t ag_a.ht m l lalu j alankan m aka hasilnya akan sepert i gam bar 2.6.
H . Ta g < body> ...< / body>
Sepert i nam anya body art inya t ubuh. Maka at ribut yang diset pada t ag body akan berpengaruh
pada seluruh t ubuh/ body dokum en. Pada t ag body t erdapat beberapa at ribut nam un ada dua
yang t erpent ing yait u ba ck gr oun d dan bgcolor . At ribut background digunakan unt uk
m em buat sebuah gam bar m enj adi lat ar dari halam an. Sedangkan bgcolor digunakan unt uk
m enset warna dari lat ar halam an websit e. Kali ini yang akan dibahas hanyalah t ag bgcolor
karena t ag background nilainya sam a dengan t ag im age yang akan dibahas kem udian.
Gam bar 2.7 Out put file t ag_body.ht m l
Saat nya m elem askan t angan kem bali. Ket ik kode di bawah ini.
Atribut dari Tag Image
Temukan rahasia menjadi webmaster dalam 30 hari hanya di http://www.rahasia-webmaster.com/
Bab 2 - Menggunakan Atribut dari Tag
18
Ini body dengan bgcolor="#000000" atau samadengan "black" dan font
color diset ="#ffffff" atau samadengan "white".
Di dalam html anda dapat menggunakan perpaduan warna antara angka dan huruf
seperti "#cgcgcg" akan menghasilkan warna abu-abu.
Sim pan dengan nam a t ag_body.ht m l dan buka dengan browser m aka akan t am pak sepert i
gam bar 2.7.
I . Ta g < im g>
Suat u websit e yang bagus past i m em iliki gam bar di dalam nya. Dan suat u wakt u
anda t ent u ingin m enam bahkan gam bar didalam websit e anda. Unt uk m enam pilkan gam bar
pada halam an dapat digunakan t ag < im g> . Form at file yang dapat didukung oleh t ag im g
berm acam - m acam m ulai BMP, JPG, GI F, TGA dan lain- lain.Tag im g m em iliki beberapa at ribut
yait u
‐
‐
‐
‐
sr c : let ak file gam bar yang akan dit am pilkan
bor de r : t ebal bingkai gam bar
he ight : m enent ukan t inggi im age/ gam bar
w idt h: m enent ukan lebar im age/ gam bar
Nilai dari at ribut sr c j ika let ak file gam bar berada pada direkt ori yang sam a dengan direkt ori file
ht m l anda. Maka cukup t uliskan nam a filenya saj a, cont ohnya sr c= ”n a m a _ file .j pg”. Dan j ika
let ak filenya berada pada sub folder/ direkt ori m aka nilainya adalah
sr c= ”sub_ folde r / n a m a _ file .j pg”. Lalu bagaim ana j ika let aknya pada folder/ direkt ori diat as
file ht m l saya?. Caranya ham pir sam a hanya saj a dit am bahkan t anda ../ ( t it ik dua dan slash) .
Yang art inya pindah sat u folder keat as, j ika let aknya di dua folder diat as file ht m l saya. Sam a
t inggal m enam bah ../ ../ ( art inya pindah dua folder ke at as) . Cont ohnya
sr c= ”../ na m a _ folde r / na m a _ file .j pg”.
Unt uk cont oh kali ini m asuklah ke direkt ori/ folder HTML yang t elah anda buat sebelum nya.
Buat lah sat u buah folder dalam direkt ori HTML t ersebut . Dan berilah nam a folder it u ga m ba r .
Lalu copykan sat u gam bar apa saj a kedalam folder ga m ba r t ersebut .
Lalu ket iklah kode berikut ini. I ngat gant i nilai dari sr c sesusai dengan nam a file gam bar anda.
Atribut dari Tag img
Tag img hanya dengan atribut src
Tag img dengan border="1"
...< / ol> , < ul> ...< / ul> da n < li> ...< / li>
Kali ini kit a akan m em bahas 3 t ag sekaligus. Karena m asing- m asing t ag t idak dapat dipisahkan.
Tag < ol> dan < ul> keduanya m em but uhkan t ag < li> agar dapat m enam pilkan out put . Tag- t ag
ini berguna unt uk m enyusun suat u daft ar yang ingin anda t onj olkan pada pengunj ung websit e.
Ah..., capek t eori lebih baik langsung prakt ek saj a OK. Ket ik kode dibawah ini.
Atribut dari tag ol, ul dan li
Penggunaan tag ol dengan li
Ini nomor 1
Ini nomor 2
Ini nomor 3
Temukan rahasia menjadi webmaster dalam 30 hari hanya di http://www.rahasia-webmaster.com/
Bab 2 - Menggunakan Atribut dari Tag
Penggunaan
Ini bullet
Ini bullet
Ini bullet
tag ul dengan li
1
2
3
Gabungan tag ol, ul dan li
Ini bullet 1
Ini nomor 1
Ini nomor 2
Ini bullet 2
Ini nomor 1
Ini nomor 2
Set elah selesai sim pan dengan nam a t ag_ol_ul_li.ht m l lalu j alankan pada browser. Maka
hasilnya sepert i yang dapat anda lihat pada gam bar 2.9.
Gam bar 2.9. Out put file t ag_ol_ul_li.ht m l
Temukan rahasia menjadi webmaster dalam 30 hari hanya di http://www.rahasia-webmaster.com/
20
Bab 2 - Menggunakan Atribut dari Tag
21
K. At r ibut u nive r sa l
Yang dim aksud at ribut universal dalam hal ini adalah suat u at ribut yang past i t erdapat pada t ag
apapun. Kit a sem ua t ahu t idak sem ua at ribut dapat dim asukkan dalam t ag t ert ent u. Cont ohnya
at ribut ce llpa dding m ilik t ag < t able> t idak dapat digunakan oleh t ag < p> .
Berikut ini adalah daft ar beberapa at ribut universal yang pent ing.
‐
‐
‐
na m e : at ribut ini unt uk m em beri nam a pada t ag yang digunakan( sangat pent ing dalam
t ag yang m em erlukan input dari user.
cla ss: at ribut ini digunakan khususnya j ika anda m enggunakan CSS( akan dibahas pada
bab khusus) .
t it le : at ribut ini m enam pilkan ket erangan yang t elah dit ent ukan oleh pem buat ( ist ilahnya
t oolt ips pada windows. Gerakkan m ouse anda pada j am kom put er akan m uncul t ulisan,
it ulah t oolt ips) .
Temukan rahasia menjadi webmaster dalam 30 hari hanya di http://www.rahasia-webmaster.com/
22
BERI KUTN YA
Pada bab selanj ut nya kit a akan coba m em buat websit e pribadi( personal hom e 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/
Bab 3 - Membuat Personal Homepage
Ba b
23
3
M e m bu a t W e bsit e Pr iba di
( Pe r son a l H om e pa ge )
Kebanyakan orang j ika baru m engenal HTML m aka ia akan m em buat websit e t ent ang profil
dirinya sendiri. Hal ini dikarenakan ia t idak t ahu apa yang harus ia publikasikan. Kali ini kit a
akan m encoba m em buat sebuah personal hom epage sederhana.
PERSI APAN
Sebelum m elakukan pendesainan lakukan beberapa hal berikut ini.
‐
‐
‐
‐
Buat lah sebuah folder di direkt ori C: \ HTML
Beri nam a folder t ersebut Ba b 3
Buat sebuah folder di direkt ori C: \ HTML\ Bab 3 yang baru kit a buat
Beri nam a folder t ersebut gam bar
Sem ua file HTML yang berhubungan dengan bab 3 akan kit a sim pan pada folder Bab 3. Begit u
pula dengan gam bar- gam bar yang berhubungan dengan bab 3 akan kit a sim pan di direkt ori
C: \ HTML\ Bab 3\ gam bar.
SKETSA PROYEK
Websit e yang akan anda buat adalah websit e pribadi yang berisi t ent ang profil dat a
David Joko
David Joko ingin pada websit e t ersebut t erdapat fot o dirinya, keluarga at au rum ah
rum ahnya.
David Joko ingin profil dat anya t erlet ak pada halam an berbeda
David Joko ingin t erdapat link- link di websit enya
Ket ika m endesain websit e biasakan unt uk m em buat sket sa kasarnya t erlebih dahulu. I ni
berguna agar pekerj aan kit a m enj adi lebih t erfokus. Tidak m asalah j ika nant inya anda
m elakukan perubahan pada t ahap akhir yang pent ing sket sanya sudah ada.
Unt uk m em buat sket sa desain anda bisa m enggam bar di sehelai kert as at au pada program
pengolah gam bar pada kom put er. Yang nam anya sket sa t idak harus bagus yang pent ing
gam baran um um nya saj a. Cont oh sket sa unt uk proyek kit a kali ini dapat anda lihat pada
gam bar 3.0.
LAN GKAH - LAN GKAH PEM BUATAN
Sepert i yang dapat anda lihat pada gam bar sket sa proyek, pada websit e t ersebut m em iliki 1
t abel ut am a dan 2 t abel anak yait u t abel fot o dan t abel m enu. Tabel ut am a t erdiri dari 2 kolom
dan 1 baris. Sedangkan pada t abel fot o dan m enu m asing- m asing m em iliki 1 kolom dan 1 baris.
Temukan rahasia menjadi webmaster dalam 30 hari hanya di http://www.rahasia-webmaster.com/
24
Bab 3 - Membuat Personal Homepage
Gam bar 3.0: Sket sa proyek
1 . H a la m a n Ut a m a [ inde x .ht m l]
Baiklah m ari kit a m ulai bekerj a. Pert am a j alankan PH P D ESI GN ER 2 0 0 6 klik m enu File - N e w H TM L/ X H TM L. Sepert i biasa m ari kit a m enget ik kode- kode yang enak ini.
David Joko Website
Ini nanti untuk link
SELAMAT DATANG
Temukan rahasia menjadi webmaster dalam 30 hari hanya di http://www.rahasia-webmaster.com/
Bab 3 - Membuat Personal Homepage
25
Set elah selesai sim pan kode diat as dengan nam a index.ht m l dan let akkan di folder bab3. Perlu
diket ahui file ut am a unt uk sebuah websit e m em iliki nam a index.ht m l. Server pert am a kali akan
m encari file bernam a index.ht m l. Jika ia t idak m enem ukan m aka server akan m enam pilkan
pesan error. Unt uk ket erangan lebih lanj ut nant i akan dij elaskan pada bab selanj ut nya.
Buka file t ersebeut dengan I nt ernet Explorer, hasilnya akan t erlihat sepert i gam bar 3.1.
Gam bar 3.1: Desain awal index.ht m l saat dij alankan.
File gam bar ini yang akan kit a gunakan unt uk m enam pilkan fot o. ( Kalau bisa ya fot o anda
sendiri, j ika t idak punya sem barang fot o j uga t idak apa- apa)
I nga t se su sa ik a n isi sr c= ”” se sua i de nga n n a m a file a nda .
Sekarang saat nya m engupdat e isi w ebsit e dengan yang sebenarnya. Unt uk it u bukalah file
index.ht m l dan rubahlah kode yang diberi w a r na k u ning diat as sehingga m enj adi sepert i
berikut . Jangan lupa ubah at ribut border pada set iap t abel m enj adi “0 ”
David Joko Website
Temukan rahasia menjadi webmaster dalam 30 hari hanya di http://www.rahasia-webmaster.com/
Bab 3 - Membuat Personal Homepage
Profil
Kegiatan
Foto-foto
Puisi Teman
Email saya
SELAMAT DATANG DI WEBSITE DAVID
JOKO
Saya ucapkan terima kasih atas kunjungan anda ke website
saya. Pada website ini anda dapat melihat profil data diri saya dan kegiatankegiatan yang saya lakukan. Di bawah ini adalah puisi yang saya buat beberapa
waktu lalu. Inspirasi puisi ini datang ketika saya termenung sendirian dan
memandang langit nan luas.
Aku dan Tuhanku
Ketika aku memandang langit
aku bertanya pada pada diriku
aku...
siapakah aku sebenarnya?
darimanakah aku berasal?
jauhkah aku dari Tuhanku?
aku....
Tuhan...
betapa kuasanya engkau
menciptakan langit dan bumi
untuk menghidupi orang-orang
seperti aku
aku...
apakah aku sudah mengabdi kepadamu?
Temukan rahasia menjadi webmaster dalam 30 hari hanya di http://www.rahasia-webmaster.com/
26
27
Bab 3 - Membuat Personal Homepage
rasanya hanya aku dan Engkau yang tahu
Set elah selesai m engedit sim panlah file t ersebut . Jalankan file t ersebut lewat I E
Hasilnya dapat anda lihat pada gam bar 3.2.
Gam bar 3.2: Out put file index.ht m l
2 . H a la m a n Pr ofil [ pr ofil.ht m l]
Selanj ut nya kit a akan m em buat file profil.ht m l yang akan m enam pilkan daft ar riw ayat hidup
david j oko. File profil.ht m l t erdiri dari 1 t abel dan m em iliki 2 kolom dan banyak baris.
Jalankan PHP DESI GNER 2006 Klik File - N e w - H TM L/ X H TM L. Ket ik kode dibawah ini.
Profil David Joko
Temukan rahasia menjadi webmaster dalam 30 hari hanya di http://www.rahasia-webmaster.com/
Bab 3 - Membuat Personal Homepage
28
DATA PRIBADI
Nama:
David Joko
Tempat/Taggal lahir:
Surabaya, 10 Nopember 1978
Agama:
Islam
Gol. Darah:
O
Pekerjaan:
Swasta
Hobi:
Traveling, Mancing
Kembali ke halaman
utama
Sim pan file diat as dengan nam a profil.ht m l. Lalu j alankan pada browser, hasilnya akan
nam apak sepert i gam bar 3.3.
Pada kode diat as t erdapat at ribut colspa n= ”2 ” pada t ag < t d> . I ni dikarenakan kit a ingin
m enj adikan 2 kolom m enj adi 1 kolom unt uk j udul D ATA PRI BAD I . Karena j um lah kolom nya 2
m aka isi colspan= ” 2” j ika kolom nya 4 m aka isinya 4 j uga.
Temukan rahasia menjadi webmaster dalam 30 hari hanya di http://www.rahasia-webmaster.com/
Bab 3 - Membuat Personal Homepage
29
Gam bar 3.3: File profil.ht m l saat dij alankan.
3 . H a la m a n Ke gia t a n [ k e gia t a n.ht m l]
Wih..., t idak t erasa m at eri kit a sudah j auh rupany