Mastering Kode HTML.pdf
HTML
Edisi Kedua
Rio Ast am al
© Copyright 2005- 2006 www.rahasia- webm ast er.com © Copyright 2005- 2006 www.rahasia- webm ast er.com
Ka t a Pe n ga n t a r
Pert am a- t am a t ak lupa say a panj at kan puj i syukur kehadirat Allah Tuhan Yang Maha Pengasih. Karena hanya dengan ridhoNyalah saya dapat m eny elesaik an e- book ini. Dan t ak lupa saya sam paikan t erim a k asih kepada sem ua pengaj ar saya yang t elah berj asa m em buat say a m em iliki kem am puan seper t i ini.
Tuj uan pem buat an e- book ini sebenarnya adalah unt uk m em bant u anda y ang t elah m em beli e- book “ Menj adi Webm ast er dalam 30 Hari” . Karena pada e- book t ersebut penj elasan t ent ang k ode 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 y ang bersifat WYSI WYG ( What You See I s What You Get ) sepert i Front Page at au Dream Weav er.
Penulis sadar bahw a m asih banyak kekurangan y ang 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 eningk at kan SDM
I ndonesia khususnya dalam bidang TI .
Su r a ba ya , Ju ni 2 0 0 5
Pe nulis
iii
H a k Cipt a M a st e r in g Kode H TM L
E- book " Mast ering Kode HTML" m erupak an 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 eny ebarluaskan, m enggandak an 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 k elom pok yang m enj ual e- book ini, saya m ohon kepada anda unt uk m elaporkan hal t ersebut kepada saya. Ak an 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 n gi U nda n g- u n da n g
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- w ebm ast er.com / m kht m l/
Te n t 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 y ang 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 k an dalam e- book ini m erupakan Hak Cipt a dari m asing- m asing v endor pem buat ny a.
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. Macr om edia, Macrom edia Dream Weaver m erupakan m erek dagang dari Macrom edia I nc.
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 say a, sehingga pem buat an e- book Mast ering Kode HTML ini dapat t er wuj ud.
********************
vi
Pe n da h u lu a n
Un t u k sia pa bu k u in i?
Buk u ini dit uj ukan bagi anda yang belum m engenal sam a sekali kode HTML at au sudah m enget ahui HTML secar a garis besar dan ingin m enam bah k em 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 y ang dim ak sudkan 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 erluk an:
Text Edit or ( Not epad, vi, em acs, dsb) Web Browser ( I nternet Explorer, Opera, FireFox, dsb)
Hany a dengan berm odalkan dua soft w are bawaan Window s it u saj a anda sudah dapat m em buat w ebsit e. Nam un Not epad m em iliki kekurangan yait u t idak m em iliki synt ax highlight ing ( pew arnaan 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 sy nt 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 endow nload “ PHP DESI GNER 2006” di alam at : ht t p: / / ww w .m psoft w are.dk/
N B: Jika anda m enggunak an not epad sebagai edit or. Past ikan ket ika hendak m enyim pan file pilihan Sa ve As Ty pe - nya adalah All Files. Hal ini unt uk m enghindari t ersim panny a script kit a sebagai file t ex t biasa.
Or ga n isa si Bu k u
Ebook ini disusun t ahap dem i t ahap sesuai dengan t ingkat kesulit anny a. 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 n a 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 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
dihasilkan berupa file HTML. Cont oh program HTML edit or yang bersifat WYSI WYG adalah Microsoft Front Page, Macrom edia Dream w eaver dan Adobe GoLive.
Kit a asum sikan anda sebagai orang awam y ang 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 ek nik 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 ik a m enggunakan program WYSI WYG.
Ba ga im a n a M e n ggu n a k a n E- book I n i?
Dalam m enggunakan ebook in, buat lah sebuah folder di dr iv e 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.
**********
Bab 1 - Mengenal HTML Lebih Jauh
Ba b
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 diharapk an 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 y ang t elah dij elaskan sebelum ny a bahw a HTML( Hyper Text Markup Language) adalah sim bol- sim bol at au t ag- t ag y ang dit uliskan dalam sebuah file yang dim ak sudkan unt uk m enam pilkan halam an pada web browser. Tag- t ag HTML selalu diaw ali dengan < x> dan diak hir i 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 ak an 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 eny im pannya dengan ekst ensi * .ht m l m aka anda m em buat file yang berform at HTML.
M e n ggu n a k a n Ta g pa da H TM L
Beberapa cont oh penggunaan t ag HTML,
Con t 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 ir ing
< u> I ni t ulisan bergaris bawah< / u>
I ni t ulisan bergar is 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 ny a, sepert i t ag < font > , < t able> , < input > dan sebagainya. Pada t ag font ia m em iliki beberapa at r ibut diant aranya at r ibut : 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 berw arna 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 untuk m enent ukan j enis huruf. At ribut size digunakan untuk m enent ukan ukuran huruf.
Bab 1 - Mengenal HTML Lebih Jauh
Jika anda lihat bahwa at ribut color berada pada awal, lalu y ang 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 Desk ripsi
< ht m l> < / ht m l> Baris paling at as dari set iap file HTML
< / head> < t it le>
< head>
I nform asi um um dari sebuah halam an web
< / t it le> background bgcolor bgsound font
Judul halam an. Terdapat pada head
< body> link alink
< / body> vlink
Set t ingan at ribut unt uk seluruh dokum en.
t opm argin left m argin m arginheight m arginwidt h
M odifik a si Te k s
Tag Deskripsi Cont oh < b> < / b> Teks t ebal Te k s t e ba l < i> < / i> Teks m iring Teks m iring < u> < / u> Teks garis bawah Teks garis bawah < pre> < / pre> Preform at t ed t eks Cont oh t eks
Header 1
< h1> < / h1> 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
Sub script
< sup> < / sup> Superscript
Super script
Fon t
Bab 1 - Mengenal HTML Lebih Jauh
Tag At ribut Desk ripsi
color < font > size
< / font > nam e
Mengubah gaya suat u huruf.
Link s
Tag At ribut Deskripsi href t arget st yle
< a> < / a> Mem buat link ke dokum en at au sit us lainnya. class
nam e id
Ga m ba r
Tag At ribut Deskripsi
sr c alt nam e
< im g> Menam pilkan sebuah gam bar
border height w idt h
For m a t t in g
Tag Desk ripsi Cont oh
Digunakan unt uk < block quot e> m engat ur t ext dan
Sam ple of t ext in a block quot e form at < / block quot e>
gam bar dalam suat u t ag Or dered List ( digunakan
I t em 1
< ol> < / ol>
dengan < li> )
Unordered List
• I tem 1
< ul> < / ul>
( digunak an dengan < li> )
< li> Elem en List < dd> < / dd> Definit ion List Sam ple t ext < dt > Definit ion Term Sam ple t ext < dd> Definit ion Descript ion Sam ple t ext Sam ple
< p> < / p> Paragraf
t ext
< br> Gant i baris
Sam ple
t ext
< hr> Garis horizont al < cent er>
Menengahkan elem en
Sam ple
< / cent er>
Bab 1 - Mengenal HTML Lebih Jauh
Ta be l
Tag At ribut Desk ripsi
border cellpadding cellspacing w idt h height nam e
< t able> < / t able> Mengat ur sem ua elem en 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 w idt h bgcolor background < t d> < / t d> align
Mem buat kolom
valign t it le colspan rowspan
height w idt h bgcolor background < t h> < / t h> align
Header ( kepala t abel) . Ot om at is ke t engah dan t ebal. valign t it le colspan rowspan height w idt h
< t body> align Form at yang berlaku bagi cell yang diapit t ag. < / t body > valign
bgcolor background height w idt h align
< colgroup> valign
< / colgroup> bgcolor
Form at yang berlaku bagi kolom
background colspan
Bab 1 - Mengenal HTML Lebih Jauh
For m
Tag At ribut Desk ripsi
< form > < / form >
m et hod act ion
Mengat ur elem en dari form
nam e
t ext password hidden radio
< input t ype= > Variasi dari t ipe elem en form
checkbox
subm it im age reset nam e value
t ext Sample tex
w idt h m axlengt h
nam e value
password ***********
w idt h m axlengt h nam e
hidden Digunakan unt uk m em buat variable hidden.
value
r adio value
nam e
Radio 1
Radio 2
nam e
checkbox value
Check 1
checked Check 2 subm it value Tombol
sr c height w idt h
im age alt nam e
border r eset value Reset
< select > nam e Mem buat com bo- box. Digunakan bersam a dengan opt ion < / select >
size select ed < opt ion> nam e
Option 1
value nam e
<font face="Arial, Helvetica,
< t ext area> sans-serif">Text row s
< / t ext area> cols
area box. Text is typed betw ee
w rap
the tags</font>
w rap off
no w rap
Bab 1 - Mengenal HTML Lebih Jauh
virt ual
word wrap, sent as one line phy sical w ord w rap, sent w it 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?.
BERI KU TN YA
Pada bab selanj ut ny a k it a ak an m em bahas lebih det ail t ent ang penerapan propert y dari t ag yang sering kit a gunakan.
**********
Bab 2 - Menggunakan Atribut dari Tag
Ba b
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 driv e C: \ yang bernam a HTML j ik a 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 ik ian 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 att 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 ny a t elah anda pelaj ar i m acam - m acam at ribut dari t ag yang t erdapat pada HTML. Sekarang saat nya k it a m ener apkan at ribut t ersebut dalam sebuah file. Unt uk lebih m em udahkan anda dalam m em aham i k it a langsung saj a pada cont oh.
• Pertam a j alankan software “ 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 y ang 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 k et ik 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 <p></p> merupakan default atau bentuk baku tag <p></p> dimana teks atau paragraf akan berformat rata kiri. Jika anda tidak memberi atribut <i>align</i> pada tag <p> maka browser akan menganggap rata kiri.</ p >
Bab 2 - Menggunakan Atribut dari Tag
</ body > </ html >
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 Ty pe adalah HTML Docum ent . Unt uk m enj alankan anda cukup t ekan t om bol F5 m ak a ak an 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 alank an
Nam un dalam hal ini saya t idak m enggunakan browser built ini pada PHP DESI GNER 2006. Melainkan brow ser ekst ernal sepert i I nt ernet Ex plorer 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. Hasilny a ak an t erlihat sepert i gam bar 2.1.
Bab 2 - Menggunakan Atribut dari Tag
B. Ta g < fon t > …< / font >
Fungsi t ag < font > adalah unt uk m em anipulasi baik j enis, ukuran, dan w arna 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.
< 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 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
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 r ibut 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 k olom .Tag < t able> adalah t ag y ang 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, sekar ang buat lah file bar u seper t i biasa klik File – N e w – H TM L/ X H TM L. Ket ik kode dibaw ah ini. Jangan t egang sant ai saj a....! .
< html > < head > < title >Atribut dari tag tabel</ title > </ head >
Bab 2 - Menggunakan Atribut dari Tag
< 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 -->
Bab 2 - Menggunakan Atribut dari Tag
</ table > </ tr > </ table >
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 y ang m em proses v ariabel t ersebut . Tag- t ag y ang biasa digunak an 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 baw ah ini.
<form action="coba.php" method="post"> ...................................... ISI ...................................... </form>
Bab 2 - Menggunakan Atribut dari Tag
Sepert i dik at ak an 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 < in pu t >
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 apak ah it u t ext box, password box, checkbox , r adio but t on dan sebagainya.
Daripada banyak bert eori lebih baik k it a prakt ek saj a. Sepert i biasa buat file baru dan ket ik k ode 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">
Bab 2 - Menggunakan Atribut dari Tag
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 >
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 y ang 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 k erj 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!
< 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 >
Bab 2 - Menggunakan Atribut dari Tag
</ body > </ html >
Sim pan dengan nam a t ag_form _select .ht m l lalu j alank an pada brow ser. 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, w akt unya m elem ask an t angan. Ket ik kode dibaw ah 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 <a> dan </a> 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 >
Bab 2 - Menggunakan Atribut dari Tag
< 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 >
Sim pan dengan nam a t ag_a.ht m l lalu j alankan m ak a 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 y ang t erpent ing yait u
ba ck gr oun d dan bgcolor . At ribut back ground digunakan unt uk m em buat sebuah gam bar m enj adi lat ar dari halam an. Sedangkan bgcolor digunakan unt uk m enset w arna dari lat ar halam an w ebsit e. Kali ini yang akan dibahas hanyalah t ag bgcolor karena t ag background nilainya sam a dengan t ag im age yang ak an dibahas kem udian.
Gam bar 2.7 Out put file t ag_body .ht m l
Saat nya m elem ask an t angan kem bali. Ket ik 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">
Bab 2 - Menggunakan Atribut dari Tag
< 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 >
Sim pan dengan nam a t ag_body.ht m l dan buka dengan browser m ak a akan t am pak sepert i gam bar 2.7.
I . Ta g < im g>
Suat u w ebsit e yang bagus past i m em iliki gam bar di dalam nya. Dan suat u w akt u anda t ent u ingin m enam bahk an 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 ilik i beberapa at ribut yait u
‐ src : letak file gam bar yang akan ditam pilkan ‐ border: tebal bingkai gam bar ‐ height: m enentukan tinggi image/ gam bar ‐ w idth: m enentukan lebar im age/ gam bar
Nilai dari at ribut sr c j ika let ak file gam bar berada pada direkt ori y ang 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= ”su b_ folde r / n a m a _ file .j pg”. Lalu bagaim ana j ika let ak nya 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 ../ ../ ( ar t inya pindah dua folder ke at as) . Cont ohnya sr c= ”../ na m a _ folde r / n a 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.
< 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">
Bab 2 - Menggunakan Atribut dari Tag
</ body > </ html >
Lalu sim pan dengan nam a t ag_im g.ht m l dan j alankan. Maka out put - nya akan t erlihat sepert i gam bar 2.8.
Gam bar 2.8 Out put file t ag_im g.ht m l
J. Ta g < ol> ...< / ol> , < u l> ...< / u l> da n < li> ...< / li>
Kali ini k it a ak an 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 w ebsit e.
Ah..., capek t eori lebih baik langsung prakt ek saj a OK. Ket ik 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 >
Bab 2 - Menggunakan Atribut dari Tag
</ 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 >
Set elah selesai sim pan dengan nam a t ag_ol_ul_li.ht m l lalu j alankan pada browser. Mak a 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
21
Bab 2 - Menggunakan Atribut dari Tag
K. At r ibu t u n ive 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 ddin g 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.
‐ nam e: atribut ini untuk m em beri nam a pada tag yang digunakan(sangat penting dalam
t ag yang m em erlukan input dari user. ‐ class: atribut ini digunakan khususnya jika anda m enggunakan CSS(akan dibahas pada
bab khusus) . ‐ title: atribut ini m enampilkan keterangan yang telah ditentukan oleh pem buat(istilahnya
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) .
22
BERI KU TN YA
Pada bab selanj ut nya kit a akan coba m em buat w ebsit e pribadi( personal hom e page) . Yang dasar- dasar nya sudah anda kuasai pada bab 2 ini.
*********
Bab 3 - Membuat Personal Homepage
Ba b
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.
‐ Buatlah sebuah folder di direktori C: \ HTML ‐ Beri nam a folder tersebut Bab 3 ‐ Buat sebuah folder di direktori C: \ HTML\ Bab 3 yang baru kita buat ‐ Beri nam a folder tersebut 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
Website yang akan anda buat adalah websit e pribadi yang berisi t ent ang profil dat a David Jok o 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 websitenya
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 proy ek kit a kali ini dapat anda lihat pada gam bar 3.0.
LAN GKAH - LAN GKAH PEM BU ATAN
Sepert i y ang 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.
Bab 3 - Membuat Personal Homepage
Gam bar 3.0: Sket sa proyek
1 . H a la m a n Ut a m a [ in de x .h t m l]
Baik lah 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 k it a m enget ik kode- kode y ang enak ini.
< html > < head > < title >David Joko Website</ title > </ head >
< body bgcolor ="#D7E7F3">
< table border ="1" style=" border -collapse: collapse" width ="100%" cellpadding ="8" bordercolor ="black"> < tr >
< td width ="20%"> <!-- ini tabel foto -->
< table border ="1" style=" border -collapse: collapse" width ="100%"
cellpadding ="8" bordercolor ="black"> < tr > < td align ="center">< img border ="1" height="100 " width ="100" src =""></ td > </ tr > </ table > < p ></ p > <!-- untuk memberi jarak --> <!-- ini tabel menu -->
< table border ="1" style=" border -collapse: collapse" width ="100%"
cellpadding ="8" bordercolor ="black"> < tr > < td >Ini nanti untuk link </ td > </ tr > </ table >
</ td >
<!-- ini untuk kolom 2 tabel utama --> < td valign ="top">< p align ="center">< b >SELAMAT DATANG</ b ></ p ></ td > </ tr > </ table >
</ body >
Bab 3 - Membuat Personal Homepage
</ html >
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 w ebsit 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 elask an pada bab selanj ut ny a.
Buk a file t ersebeut dengan I nt ernet Ex plorer, hasilny a akan t erlihat sepert i gam bar 3.1.
Gam bar 3.1: Desain aw al 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 y a fot o anda sendiri, j ika t idak punya sem barang fot o j uga t idak apa- apa)
I n ga t se su sa ik a n isi sr c= ”” se su a i de n ga n n a m a file a nda .
Sekarang saat ny a m engupdat e isi w ebsit e dengan yang sebenarnya. Unt uk it u buk alah file index.ht m l dan rubahlah k ode yang diberi w a r n a k u n in g diat as sehingga m enj adi sepert i
berikut . Jangan lupa ubah at ribut border pada set iap t abel m enj adi “0 ”
< html > < head > < title >David Joko Website</ title > </ head >
< body bgcolor ="#D7E7F3"> < font face ="verdana">
< table border ="0" style=" border -collapse: collapse" width ="100%" cellpadding ="8" bordercolor ="black">
Bab 3 - Membuat Personal Homepage
< tr > < td width ="20%"> <!-- ini tabel foto -->
< table border ="0" style=" border -collapse: collapse" width ="100%"
cellpadding ="8" bordercolor ="black"> < tr > < td align ="center">< img border ="1" height="100" width ="150" src ="gambar/fotoku.jpg"></ td > </ tr > </ table > < p >< hr ></ p > <!-- untuk memberi jarak --> <!-- ini tabel menu -->
< table border ="0" style=" border -collapse: collapse" width ="100%"
cellpadding ="8" bordercolor ="black"> < tr > < td >< font size ="2"> < ul >
< li >< a href ="profil. html ">Profil</ a ></ li > < li >< a href ="kegiatan. html ">Kegiatan</ a ></ li > < li >< a href ="foto. html ">Foto-foto</ a ></ li > < li >< a href ="puisi. html ">Puisi Teman</ a ></ li >
< li >< a href ="mailto: davidjoko@yahoo.com">Email saya</ a ></ li > </ ul > </ td >
</ tr > </ table >
</ td >
<!-- ini untuk kolom 2 tabel utama --> < td valign ="top"> < p align ="center">< font size ="4">< b >SELAMAT DATANG DI WEBSITE DAVID JOKO</ b ></ font ></ p >
< p >< font size ="2">Saya ucapkan terima kasih atas kunjungan anda ke website saya. Pada website ini anda dapat melihat profil data diri saya dan kegiatan- kegiatan 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.</ font ></ p >
< p >< b >Aku dan Tuhanku</ b ></ p >
< p >< font size ="2"> < i >Ketika aku memandang langit< br > aku bertanya pada pada diriku< br > aku...< br > < br > siapakah aku sebenarnya?< br > darimanakah aku berasal?< br > jauhkah aku dari Tuhanku?< br > aku....< br > < br > Tuhan...< br > betapa kuasanya engkau< br > menciptakan langit dan bumi< br > untuk menghidupi orang-orang< br > seperti aku< br > < br > aku...< br > apakah aku sudah mengabdi kepadamu?< br >
Bab 3 - Membuat Personal Homepage
rasanya hanya aku dan Engkau yang tahu< br > </ i ></ font ></ p >
</ td > </ tr > </ table >
</ body > </ html >
Set elah selesai m engedit sim panlah file t ersebut . Jalank an file t ersebut lewat I E Hasilny a 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.h t 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.
< html > < head > < title >Profil David Joko</ title > </ head >
< body bgcolor ="#D7E7F3"> < font face ="verdana">
< p align ="center">
Bab 3 - Membuat Personal Homepage
< table border ="0" cellpadding ="8" bordercolor ="black"> < tr >
< td colspan ="2" align ="center">< b >DATA PRIBADI</ b >< hr ></ td >
</ tr > < tr >
< td align ="right">< font size ="2">< b >Nama: </ b ></ td >
< td >< font size ="2">David Joko</ td > </ tr > < td align ="right">< font size ="2">< b >Tempat/Taggal lahir: </ b ></ td > < td >< font size ="2">Surabaya, 10 Nopember 1978</ td > </ tr >
< td align ="right">< font size ="2">< b >Agama: </ b ></ td >
< td >< font size ="2">Islam</ td > </ tr > < tr >
< td align ="right">< font size ="2">< b >Gol. Darah: </ b ></ td > < td >< font size ="2">O</ b ></ td >
</ tr > < tr >
< td align ="right">< font size ="2">< b >Pekerjaan: </ b ></ td >
< td >< font size ="2">Swasta</ td > </ tr > < tr >
< td align ="right">< font size ="2">< b >Hobi: </ b ></ td >
< td >< font size ="2">Traveling, Mancing</ td > </ tr > < tr >
< td colspan ="2" align ="center">< a href ="index. html ">Kembali ke halaman utama</ a ></ td > </ tr > </ table >
</ font > </ body > </ html >
Sim pan file diat as dengan nam a profil.ht m l. Lalu j alankan pada brow ser, hasilnya ak an 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 ak a isi colspan= ” 2” j ika kolom nya 4 m ak a isiny a 4 j uga.
Bab 3 - Membuat Personal Homepage
Gam bar 3.3: File profil.ht m l saat dij alank an.
3 . H a la m a n Ke gia t a n [ k e gia t a n.h t m l]
Wih..., t idak t erasa m at eri kit a sudah j auh rupany a. Bagaim ana, m enyenangkan bukan berm ain dengan kode langsung daripada program WYSI WYG. Sek arang kit a akan m em buat file kegiat an.ht m l yang berisi t ent ang kegiat an- kegiat an yang dilakukan David Jok o.
Desain kegit an.ht m l t erdiri dari 2 kolom dan 2 baris unt uk set iap kegiat an. Kolom 1 berisi gam bar dan kolom 2 berisi ket erangan.
Unt uk it u copylah sebuah file gam bar k e direkt ori C: \ HTML\ gam bar. Gam bar ini yang akan m enam pilkan/ m ewakili kegiat an yang kit a lakukan. Silahkan m odifik asi kode dibaw ah ini sesuka anda. Karena saya yak in anda sekarang sudah paham dasar pem buat an w ebsit e.
Buat file baru klik File - N e w - H TM L/ XH TM L lalu ket ik kode di bawah ini.
< html > < head > < title >Kegiatan David Joko</ title > </ head >
< body bgcolor ="#D7E7F3"> < font face ="verdana">
< p align ="center">< font size ="4">< b >Kegiatan David Joko</ b >< hr ></ p >
<center> < table border ="1" style=" border -collapse: collapse" cellpadding ="8" bordercolor ="black" width ="80%">
Bab 3 - Membuat Personal Homepage
< tr > < td >< img src ="gambar/pantai.jpg" width ="231" height="149"></ td > < td bgcolor ="white">< font size ="2">< p >< b >Kegiatan Akhir Tahun Bersama Teman</ b ></ p >Pada akhir tahun 2005 nanti saya dan teman-teman mempunyai acara tahun baruan di Bali. Rencananya kami dibali mulai tanggal 29 Desember sampai 2 Januari.</ font ></ td >
</ tr > < tr >
< td align ="center" colspan ="2">< a href ="index. html ">Kembali ke halaman utama</ a ></ td >
</ tr > </ table > </center>
</ font > </ body > </ html >
Sim panlah kode diat as dengan nam a kegiat an.ht m l. Lalu buka m elalui I E hasilnya ak an nam pak sepert i gam bar 3.4.
Gam bar 3.4: File kegiat an.ht m l saat dij alank an.
4 . H a la m a n Fot o [ fot o.h t m l]
Bab 3 - Membuat Personal Homepage
Pada halam an ini nant inya akan kit a t am pilk an fot o- fot o yang ada m aupun yang belum ada pada websit e david j oko. Desain halam an t eridiri dari 2 kolom dan 2 baris unt uk set iap 2 buah gam bar.
Unt uk segera m elihat hasilnya buat lah file baru pada PHP DESI GNER 2006 klik m enu File - N e w -
H TM L/ X H TM L. Dan ket ik k ode di baw ah ini.
< html > < head > < title >Foto-Foto</ title > </ head >
< body bgcolor ="#D7E7F3"> < font face ="verdana">
< p align =" center ">< font size ="4">< b >Foto-foto koleksi David
Joko</ b ></ font >< hr ></ p >
< center > < table border ="1" style=" border -collapse: collapse" width ="80%" cellpadding ="8" bordercolor ="black" bgcolor ="white"> < tr >
< td align =" center ">< img src ="gambar/fotoku.jpg" height="149" width ="231"></ td > < td align =" center ">< img src ="gambar/pantai.jpg" height="149" width ="231"></ td >
</ tr > < tr >
< td align =" center ">< font size ="2">David Joko</ font ></ td > < td align =" center ">< font size ="2">Pantai</ font ></ td >
</ table > < p ></ p >
< table border ="1" style=" border -collapse: collapse" width ="80%" cellpadding ="8" bordercolor ="black" bgcolor ="white"> < tr >
< td align =" center ">< img src ="gambar/kantor.jpg" height="149" width ="231"></ td > < td align =" center ">< img src ="gambar/bromo.jpg" height="149" width ="231"></ td >
</ tr > < tr >
< td align =" center ">< font size ="2">Kantor</ font ></ td > < td align =" center ">< font size ="2">Bromo</ font ></ td >
</ table >
< p >< a href ="index. html ">Kembali ke halaman utama</ a ></ p >
</ center >
</ font > </ body > </ html >
Sim pan k ode diat as dengan nam a fot o.ht m l, lalu j alankan hasilny a akan t erlihat sepert i gam bar
5 . H a la m a n Pu isi [ pu isi.h t m ]
Puisi? Suat u bent uk ungkapan ekspresi bat in secara abst rak. I t ulah yang ingin dit am pilkan oleh
D a vid Jok o pada websit eny a. Puisi yang ada pada halam an t ersebut t idak hanya puisi David Joko t et api j uga puisi para pengunj ung yang m ereka kirim k an k epada David Joko unt uk dit am pilkan pada w ebsit enya.
Bab 3 - Membuat Personal Homepage
Desain halam annya set iap puisi m em iliki 2 baris dan 1 kolom . Baris 1 digunakan unt uk puisi it u sendiri dan baris 2 unt uk penulisnya.
Buat file baru dan ket ik kode di bawah ini.
< html > < head > < title >Puisi Teman-teman</ title > </ head >
< body bgcolor ="#D7E7F3"> < font face ="verdana">
< p align =" center ">< font size ="4">< b >Puisi-Puisi Hati</ b >< hr ></ font ></ p >
< center > < table border ="1" style=" border -collapse: collapse" bgcolor ="white" bordercolor ="black" width ="60%" cellpadding ="8"> < tr >
< td >
< p >< font size ="2">< b >SEBUAH PUISI UNTUK SAHABATKU</ b ></ p >
< i >Matamu bagaikan kilatan pedang yang tajam< br > Menghujam tepat di hati lawanmu< br > Tutu katamu membuat suasana jadi tentram< br > < br > Mengapa sekarang kau terdiam< br >
Tanpa candamu hari-ahriku kelabu< br > Dukamu bagai tangisan alam< br > Bawakan sebuah kesedihan yang dalam </ font > </ td >
</ tr > < tr >
< td align ="right">< font size ="2">Oleh: Istiqamah</ font ></ td >
</ tr > </ table >
< p ></ p >
< table border ="1" style=" border -collapse: collapse" bgcolor ="white" bordercolor ="black" width ="60%" cellpadding ="8"> < tr >
< td >
< p >< font size ="2">< b >SERIBU TANYA</ b ></ p >