Dasar Pemograman Web

rio astamal
DASAR- DASAR WEB PROGRAMMING

Versi 0.1-pre alpha UNCENSORED VERSION
Lisensidibawah: CreativeCommons AttributionShareAlike3.0
http://creativecommons.org
Madewith
DASAR- DASAR WEB PROGRAMMING

Versi 0.1-pre alpha
Copyright 2008
rio astamal (c0kr3x@gmail.com)
Lisensidibawah: CreativeCommons AttributionShareAlike3.0
http://creativecommons.org
HTMLdanWordWideWeb
1.1CaraKerjaWWW
Ketikakitamengunjungisebuahsituskatakanlah,google.com,adasebuahprosesdibaliklayar yangtidakandaketahui.Prosestersebutcukupkompleksnamun,jikadigambarkandalamsebuah diagramsederhanakuranglebihakansepertiberikut: REQUEST Browser User INTERNET RESPONSE Server
BABI
Gambar1.1:CarakerjaWWW Secarakronologisurutanprosespadadiagramdiatasadalah: 1. 2. 3. 4. 5. Usermembukaalamatwebsitepadabrowser BrowsermengirimHTTPRequestkeserver ServermeresponHTTPRequestdaribrowser ServermengirimHTTPResponsekebrowser Browsermenampilkanhalamanwebsitekepadauser
1.2HTML
HTML/XHTMLmerupakanformattampilanyangdigunakanuntukmenampilkanhalamanwebsite. HTMLterdiridarisimbolsimboltertentuyangseringdisebutdengantag.Sebuahhalamanwebsite yangvalidselaludiapittag<html></html>.FileHTMLumumnyamemilikiakhiran*.htmatau *.html. TagtagpadaHTMLselaludiawalidengan<x>...</x>,dimanaxtagHTMLseperti<strong>,<p>, <div>,danlainlain.DibawahiniadalahtabelbeberapatagHTMLyangseringdigunakan. TagHTML <html></html> <head></head> <title></title> <body></body> <style></style> <strong></strong> <div></div> <a></a> Keterangan TaguntukmengapithalamanHTML Tagyangberisiinformasiumumdarihalaman JudulHalaman* Akanditampilkandibrowser UntukCSS* Untukmenebalkanteks Untukmembuatlayer Untukmembuathyperlink
<p></p> <hn></hn> <span></span>
Untukmembuatparagraf Untukmembuatheader** Untukinlinestyle(manipulasiteks)
<!> Komentar *Tagtersebutharusberadadidalamtag<head>...</head> **ndapatberupaangkadari15,contoh<h1>...</h1> PENERAPANTEORIHTML 1. Bukaeditoranda(gedit(Linux),Notepad++(Windows),dsb)) 2. Ketikkodeberikut:

1. 2. 3. 4. 5. 6. 7. 8. <html> <head> <title>WebsitePertamaku</title> </head> <body> <h1>HelloF**kingWorld!!</h1> </body> </html>
3. Simpanpadadengannamahelloworld.html 4. Bukabrowseranda(Firefox,IE,dsb)danbukafileyangbarusajaandabuat. 5. Hasilnyaakansepertigambar1.1
Gambar1.1:helloworld.html
1.3ManipulasiFont
Untukmemanipulasifontkitaakanmenggunakaninlinestyle/CSS(akandibahasdibagian berikutnya).Kitatidakakanmenggunakantag<font>karenataginisudahkunoaliasdeprecated. W3CsebagaipengembangHTMLsudahtidakmenyarankanuntukmenggunakantagfontlagi. Sebagaigantinyadigunakantag<span>daninlinestyle.Inlinestyleadalahattributstyleyang diberikanpadasebuahtagHTML.Contoh,untukmembuattampilantekstebalgunakancara berikut:
<spanstyle=fontweight:bold>Akuadalahtekstebal</span>
Output: Akuadalahtekstebal Padacontohdiataskitamemberikanattributstyle,yangberisifontweight:bold.Maksudnya adalahkitaakanmengaplikasikanstyleboldpadateksyangdiapitolehtag<span></span>. Pemberianstyletidakhanyaterbataspadasatubagiansaja.andadapatmemberikanbeberapastyle sekaligusdenganmemberitandapemisahberupa;untuksetiapstyle.

<spanstyle=fontweight:bold;textdecoration:underline;fontstyle:italic>Aku adalahtekstebal,bergarisbawahdanmiring</span>
Output Akuadalahtekstebal,bergarisbawah,danmiring Padacontohdiataskitamenerapkantigastylepadatagspan.Dapatdilihatkalausetiapstyle dipisahkanolehtitikkoma.Intinyakitadapatmemberikanbanyakstylesekaliguspadasuatutag. Attributstyletidakterbataspadatagspansaja,hampirsemuatagyangdigunakan untukpresentasiteksdapatkitasisipitagstyle. PENERAPANTEORIMANIPULASITEKS 1. Bukagedit/Notepad++ 2. KetikkodeHTMLberikutini

1. <html> 2. <head> 3. <title>ManipulasiTeks</title> 4. </head> 5. <body> 6. <h1style="color:red;textdecoration:underline">PENGUMUMAN!</h1> 7. <spanstyle="color:#FF0000"> 8. Barangsiapayangmenemukandompetsaya,akansayaberi 9. <spanstyle="fontweight:bold;fontstyle:italic">ISTRI,MOBIL,RUMAHdan 10. SegalaSERTIFIKATTANAHSAYA</span>DIJAMIN!!!.</span> 11.</body> 12.</html>
3. Simpandengannamamanipulasiteks.html 4. Bukadenganbrowseranda 5. Hasilnyaakansepertigambar1.2
Gambar1.2
1.4Hyperlink
Andatentuseringmelngklikgambaratautulisanyangmengarahkehalamanlainatauwebsite lainnya.Yangandaklikituadalahhyperlinkataulebihdikenaldenganistilahlinksaja.Untuk membuatlinkkitadapatmenggunakantag<a></a>.Duaattributyangpalingseringdigunakan padatag<a>adalahhrefdantarget. hrefdigunakanuntukmenentukanlokasitujuandarilink.DapatberuparelatifURLatauabsolut URL. targetdigunakanuntukmenentukanapakahhalamanakandibukapadajendela/windowbaruatau tidak.Defaultnyaadalahselfdimanalinktidakdibukapadawindowbaru.Jikainginmembukapada windowbarugunakannilai_blank. Untuklebihmemahamicarakerjalink,kitaakanmembuatduafileyaituprofilku.htmldandaftar situs.html. 1. Bukagedit/Notepad++ 2. Ketikkodeberikut:
1. <html> 2. <head> 3. <title>ProfilJSL</title> 4. </head> 5. <body> 6. <h2>ProfilKu</h2> 7. <ul> 8. <li><strong>NamaLengkap:</strong>JohnSeptianLennon<li> 9. <li><strong>Tempat/Tgl.Lahir:</strong>Lipermboh,14September1940</li> 10. <li><strong>Pekerjaan:</strong>RockerJalanan<li> 11. <li><strong>Wafat:</strong>Tewastertembakolehpenggemardidepan 12. kandangsapipada1980</li> 13. </ul> 14. <p>Inginlihatdaftarsitusfavoritsaya?<ahref="daftarsitus.html"> 15. klikdisini</a>.</p> 16.</body> 17.</html>
3. Simpandengannamaprofilku.html
4. Buatfilebarulagi,kemudianketikkodeberikut:
1. <html> 2. <head> 3. <title>DaftarsitusfavoritJSL</title> 4. </head> 5. <body> 6. <h2>DaftarSitusfavoritku</h2> 7. <ol> 8. <li><atarget="_blank"href="http://www.google.com/">OmGoogle</a></li> 9. <li><atarget="_blank"href="http://www.milw0rm.com"> 10. CacingUnderground</a></li> 11. </ol> 12. <p><ahref="profilku.html">Lihatprofillengkap</a></p> 13.</body> 14.</html>
5. Simpandilokasiyangsamadenganprofilku.htmldanberinamadaftarsitus.html 6. Bukafileprofilku.htmldenganbrowseranda,dancobakliklinkyangadauntukmemahami carakerjanya
Gambar1.3
1.5MembuatTabel
Untukmembuattabelkitadapatmenggunakantag<table></table>.Dalambeberapatahunterakhir, penggunaantabelsebagailayoutwebsitesudahtidakrelevanlagi,dandigantikanolehtagDIV.Saat inipenggunaantabeldikhususkanhanyauntukmenampilkandatasecaratabularsajatidakuntuk designhalaman. Beberapatagyangseringdigunakansaatmembuattabeladalah: Tag <tr></tr> <th></th>* Keterangan Digunakanuntukmembuatbarisbaru Digunakanuntukmembuatheadertabel
<td></td>* Digunakanuntukmembuatkolom *Tagtersebutselaluberadadidalamtag<tr>...</tr> Sepertihalnyataglainyangdigunakanuntukpresentasiteks,seperti<span>,andadapat menggunakanattributstyleuntukmemformattampilantampilantabel.Berikutiniadalahcontoh
pembuatantabelmenggunakanHTML. 1. Bukatekseditor(gedit/Notepad++) 2. Ketikkodeberikut:

1. <html> 2. <head> 3. <title>TABELIPS/IPK</title> 4. </head> 5. <body> 6. <h2>TabelIPSampaisemester4:</h2> 7. <tablestyle="width:600px;"border="1"> 8. <trstyle="backgroundcolor:#cfcfcf"> 9. <th>SEMESTER</th> 10. <th>IPS</th> 11. </tr> 12. <tr> 13. <td>SEMESTER1</td><tdstyle="textalign:right">4.0</td> 14. </tr> 15. <tr> 16. <td>SEMESTER2</td><tdstyle="textalign:right">4.0</td> 17. </tr> 18. <tr> 19. <td>SEMESTER3</td><tdstyle="textalign:right">4.0</td> 20. </tr> 21. <tr> 22. <td>SEMESTER4</td><tdstyle="textalign:right">4.0</td> 23. </tr> 24. <trstyle="textalign:right;backgroundcolor:#FFCB68;fontweight:bold"> 25. <tdstyle="textalign:center;">NILAIIPK>>></td> 26. <tdstyle="textalign:inherit;">4.0</td> 27. </tr> 28. </table> 29.</body> 30.</html>
3. Simpandenannamatabel.html 4. Bukadenganbrowseranda,hasilnyaakannampaksepertigambar1.4
Gambar1.4
>merupakanspecialcharacteruntuktanda>.DalamHTMLspecialcharacter diawalitandaampersand&dandiakhiri;.Contohlainadalah<untuk<, ©untuk
1.6HTMLForm
HTMLFormseringdigunakanuntukmemintainputandariuseryangkemudiandiprosesoleh serversidescriptingsepertiPHP,JSP,dansebagainya.FormHTMLdiapitolehtag<form></form>. Duaattributyangpalingseringdigunakandalampenggunaanformadalah:

Action:Nilaidariattributinimenunjukkanlokasidarifilepemrosesdariform.Dapatberupa relatifURI,contohfolderX/file.phpatauabsolutURI,contohhttp://contoh.com/file.php. Method:Nilaidariattributmenentukanmetodedatayangdikirimkankefilepemroses,apakah melaluimetodeGETatauPOST.
Contohpenggunaantagformsebagaiberikut:
<formaction=file.phpmethod=POST> ... </form>
Tagformtidakbanyakbergunatanpaadanyataginputlain.Tagformberfungsihanyasebagai wrapperyangmengelompokkandatayangakandikirim.Tagyangdigunakanbersamatagform adalahtag<input>. 1.6.1Macammacaminput Untukmenampilkantextbox,checkbox,radiobutton,danlainnyahanyadiperlukantag<input>. Yangmembedakanoutputdarimasingmasingtampilanadalahnilaidariattributtype.Contoh berikutmerupakanpenggunaantaginputuntukmenampilkantextbox:

<inputtype=textsize=16maxlength=16>
Berikutinidaftarnilaiyangdapatdigunakanpadaattributtype: Nilaitype Keterangan text password file checkbox radio submit button reset Untukmenampilkantextbox Untukmenampilkanpasswordfield Untukmenampilkanprosesuploadfile(miripsepertitextboxnamun dengantombolBrowse) Untukmenampilkantombolcheckbox(lebihdarisatupilihan) Untukmenampilkantombolradio/option(hanyasatupilihan) Tomboluntukmensubmitform(defaultbuttonuntuksubmit) samadengansubmithanyasajabukandefaultbutton Untukmembersihkantampilkanform
hidden
Inputtidakditampilkandibrowser.
Selaintag<input>masihadataglainyangbiasadigunakandalamformyaitutag<select>dan <textarea>. PENERARANTEORIHTMLFORM 1. Bukagedit/Notedpad++ 2. Ketikkodeberikut:

1. <html> 2. <head> 3. <title>Registrasi</title> 4. </head> 5. <body> 6. <h2>FormRegistrasi</h2> 7. <formaction=""method="POST"> 8. <label>Nama:</label> 9. <inputtype="text"size="30"name="nama"><br> 10. <label>Username:</label> 11. <inputtype="text"size="16"name="uname"maxlength="16"><br> 12. <label>Password:</label> 13. <inputtype="password"size="16"name="pass"maxlength="16"><br> 14. <label>JenisKelamin:</label> 15. <inputtype="radio"name="jk"value="pria"checked><span>Pria</span> 16. <inputtype="radio"name="jk"value="wanita"><span>Wanita</span> 17. <br> 18. <label>Hoby:</label><br> 19. <inputtype="checkbox"name="hob"value="spkbola"><span>SepakBola</span> 20. <inputtype="checkbox"name="hob"value="game"><span>Game</span> 21. <inputtype="checkbox"name="hob"value="tidur"><span>Tidur</span><br> 22. <label>Deskripsikandirianda:<label><br> 23. <textareastyle="height:100px;width:400px"name="desc"></textarea> 24. <hr><br> 25. <label>Darimanaandamendengarkami?</label><br> 26. <selectname="dengar"> 27. <optionvalue="kuburan">Daridalamkubur</option> 28. <optionvalue="google">Google</option> 29. <optionvalue="mimpi">Mimpi</option> 30. </select><br> 31. <inputtype="submit"value="DAFTAR"> 32. <inputtype="reset"value="RESET"> 33. </form> 34.</body> 35.</html>
3. Simpandengannamaform.html 4. Bukadenganbrowserfiletersebut. Hasilnyamemangtidakbegitubaguskarenakitatidakmelakukanstylingpadaform.
Gambar1.6
Dalamkasusrealworldnilaiyangadapadaattributnamedanvaluelahyangakandikirimkefile pemroses.
1.7MenampilkanGambar
UntukmenampilkangambarpadahalamanHTMLdapatdigunakantag<img>.Beberapaattribut yangseringdigunakanadalahsrc,height,danwidth.Attributsrcdigunakanuntukmenentukan alamatdarigambaryangakanditampilkan,dapatberuparelatifURIatauabsolutURI.Attribut heightdigunakanuntukmenentukantinggi,sedangkanwidthuntukmenentukanlebar. Secaradefaultnilaiyangadapadaheightdanwidthadalahdalampixel,kecualiandamenambahkan tanda%.Makalebaratautinggidiukurmenggunakanpersen.Jikaandatidakmenyertakan attributheightdanwidth,makagambartersebutakanditampilkansesuaidenganukuranaslinya. Untuklebihmemahaminyaikutilangkahberikut: 1. 2. 3. 4.
1. 2. 3. 4. 5. 6. 7.
Siapkanduabuahgambardalamfolderyangsamadenganfilehtml Dalamcontohinisayamenggunakan(1)stikom.jpgdan(2)joinrevolution.jpg Bukagedit/Notepad++ Ketikkodeberikut:
<html> <head> <title>JoinTheRevolution</title> </head> <body> <imgsrc="stikom.jpg"align="left"> <strongstyle="color:red">SHOULD</strong>
8. <imgsrc="joinrevolution.jpg"align="center"> 9. </body> 10.</html>
5. Simpandengannamagambar.html
Gambar1.7
1.8XHTMLdanDOCTYPE
ApakahXHTMLitu?apakahiaberbedadenganHTML?SebenarnyaXHTMLadalahHTMLhanya sajaXHTMLmengikutiformatXMLsebagaistandarpenulisannya.Jadisetiaptagharusmemiliki penutup. Andatentupernahmengetiktagtagtanpapenutupseperti<br>,<img>,dan<input>pada pembahasansebelumnya.PadaXHTMLsemuatagharusmemilikipenutup,jikatidakmaka halamanyangandabuattidaksesuaidenganstandaryangtelahditentukandandianggaptidakvalid/ compliantdenganstandarW3C. BerikutiniadalahbeberapacontohpenulisanyangvaliddiHTMLtapitidakdiXHTML. SALAH
<strong><span>HelloWorld</strong></ span> <inputtype=radiochecked> <br> <imgborder=1> <inputtype=buttonvalue=GO>>>> <STRONG>Hello</strong>
BENAR
<strong><span>Hello World</span></strong> <inputtype=radiochecked=checked/> <br/>atau<br></br> <imgborder=1/> <inputtype=button value=GO>>>/> <strong>Hello</strong>
Mungkinandabertanya,lalubagaimanasayamemberitahubrowserbahwahalamansayaadalah XHTML?SemuaituterletakpadaDOCTYPEhalamananda.DOCTYPEadalahpententutipe
documentyanginginandagunakanapakahHTML4.01,XHTML1.0Transitional,XHTML1.0 Strictdanlainnya. DOCTYPEjugaseringdisebutDTD(DocumentTypeDefinition).Berikutiniadalahcontoh penggunakantipedokumenHTML4.01,

<!DOCTYPEHTMLPUBLIC"//W3C/DTDHTML4.01//EN""http://www.w3c.org/TR/html4/ strict.dtd">
JikaandatidakmenyebutkanDTDyangandagunakanasumsidarisatubrowserdenganbrowser yanglainmungkinberbedabeda.JadijikamemangandainginmenggunakanHTMLmurnibukan XHTMLgunakanlahDTD4.01.DeklarasiDOCTYPEharusdiletakkanpalingawalsebelumtag <html>. UntukXHTMLbeberapaDTDyangseringdigunakanadalah 1.<!DOCTYPEhtmlPUBLIC"//W3C//DTDXHTML1.0Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd"> 2.<!DOCTYPEhtmlPUBLIC"//W3C//DTDXHTML1.0Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> 3.<!DOCTYPEhtmlPUBLIC"//W3C//DTDXHTML1.0Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1frameset.dtd">
PerbedaanTransitionaldanStrictterdapatpadatoleransikesalahan.Padatransitionaljikamasihada kesalahanstandarpenulisanmasihdiberikantoleransi,sedangkanStricttidakmemberikantoleransi samasekali.ContohhalamanXHTMLyangvalidadalahsebagaiberikut:

<?xmlversion="1.0"encoding="UTF8"?> <!DOCTYPEhtmlPUBLIC"//W3C//DTDXHTML1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <htmlxmlns="http://www.w3.org/TR/xhtml1"> <head> <title>Everydocumentmusthaveatitle</title> </head> <body> <span>HelloWorld</span> </body> </html>
DalampembahasanselanjutnyakitaakanselalumenggunakanXHTMLbukanlagiHTML. DeklarasiversiXMLpadaawalhalamantidakharusditulisnamunsangat dianjurkanuntukditulis.Attributxmlnsharusditulisuntukmenentukan namespaceyangdigunakan.
1.9CSS(CascadingStyleSheets)
CSSmerupakansuatuteknologiyangdigunakanuntukmempermudahpembuatansebuahwebsite. DenganCSSkitadapatdengancepatmengaplikasikansuatustylepadatagtertentu.Bahkankita dapatmeletakkanCSSpadasuatufilesehinggadapatdigunakanolehbanyakhalamansekaligus. ItumerupakansalahsatukelebihanCSS.CSSdiapitolehtag<style></style>danberadadiantara
tag<head></head>.KelebihanlainnyaadalahandadapatmenyisipkankomentarpadaCSS,halini cukuppentingjikajumlahCSSandasangatbanyak.KomentarpadaCSSdiapitolehkarakter/* */. Padapembahasanpembahasansebelumnyakitaseringmenggunakanattributstyleuntuk memformattampilanatauseringdisebutinlinestyle.Apayangadapadaattributstyletersebut sebenarnyaadalahCSSyangvalid,hanyasajaletaknyadidalamtag. HampirsemuatagdapatdimanipulasimenggunakanCSSseperti<body>,<span>,<div>,<table>, <p>,danmasihbanyaklagi.BerikutiniadalahcontohsederhanapenggunaanCSSpadatagbody.

body{fontface:Verdana;fontsize:11px}
Padacontohdiataskitamemformatsemuateksyangadapadatagbodymenjadiberjenishuruf Verdanadenganukuran11pixel.Tagbodypadacontohdisebutselectorsedangkanattributstyle didalamnyadisebutdeclaration.Declarationditandaidenganadanyakurungkurawal{...}. PENERAPANTEORICSS 1. Bukagedit/Notepad++ 2. Ketikkodeberikut:

1. <?xmlversion="1.0"encoding="UTF8"?> 2. <!DOCTYPEhtmlPUBLIC"//W3C//DTDXHTML1.0Transitional//EN" 3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> 4. <htmlxmlns="http://www.w3.org/TR/xhtml1"> 5. <head> 6. <title>CSSCascadingStyleSheets</title> 7. <styletype="text/css"> 8. body{fontfamily:Verdana,Serif;fontsize:11px} 9. div{ 10. border:2pxsolid#cccccc; 11. padding:4px 12. } 13. h2{ 14. textdecoration:underline; 15. fontstyle:italic; 16. fontsize:18px 17. } 18. </style> 19.</head> 20.<body> 21. <div> 22. <h2>IniadalahcontohsederhanapenggunaanCSS</h2> 23. </div> 24.</body> 25.</html>
3. Simpandengannamacss.html 4. Lalujalankanpadabrowser,hasilnyaakanterlihatsepertigambar1.8
Gambar1.8:ContohpenggunaanCSS DapatandalihatbahwatagyangkitadeklarasikanpadaCSSsecaraotomatisstyletagtersebut mengikutiaturanCSSyangkitabuat.Dengandemikiankitadapatdenganmudahmemodifikasi banyakelemensekaligushanyadarisebuahbarisCSS. 1.9.1CSSClassdanID Jikaandacukupkreatif,sayaharapmemangdemikian:)makaandamungkinberfikirkalau penggunaancarasepertipembahasansebelumnyatidaksepenuhnyabaik.Mengapa?Bayangkanjika padabeberapabagianpadahalaman,andatidakinginmengaplikasikanstyletersebut.Laluapayang andalakukan?Merubahnyasecaramanuallewatinlinestyle?Itumemangdapatdilakukantapitidak efisien. CarayangpalingefektifdanefisienadalahdenganmenggunakanclassdalamCSS.Dengan menggunakanclasskitadapatmenentukanletakbagianyangharuskitaaplikasikansuatustyle. Penggunakanclassdiawalidengantandatitik..Lihatcontohberikut:
.tebalmiring{fontweight:bold;fontstyle:italic} div.error{color:red;fontweight:bold}
Barispertamamerupakangeneralclasskarenasemuatagdapatmenggunakannya.Sedangkanpada bariskeduaadalahregularclasskarenaclasstersebuthanyaberlakupadatagdivsaja.Untuk mengaplikasikanstyleyangadapadaclasskitaharusmemasukkannamaclasstersebutpadaattribut class. Caralainadalahdenganmenggunakannilaidariattributidpadasetiaptag.Nilaidariattributid antaratagyangsatudengantagyanglaintidakbolehadayangsama.Tandayangdigunakanbukan titikmelainkantandapagar#.

#main{border:1pxsolid#000000} div#header{padding:4px}
OK,marikitabuatsebuahfileuntuklebihmemahaminya. 1. Bukagedit/Notepad++ 2. Ketikkodeberikut:

1. <?xmlversion="1.0"encoding="UTF8"?> 2. <!DOCTYPEhtmlPUBLIC"//W3C//DTDXHTML1.0Transitional//EN" 3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
4. <htmlxmlns="http://www.w3.org/TR/xhtml1"> 5. <head> 6. <title>CSSClass&ID</title> 7. <styletype="text/css"> 8. body{fontfamily:Verdana,Serif;fontsize:11px} 9. #main{ 10. border:1pxsolid#cccccc; 11. padding:4px 12. } 13. div.box{ 14. border:1pxsolidorange; 15. backgroundcolor:#FFF8B9; 16. padding:6px3px; 17. color:#c60000; 18. width:200px 19. } 20. .greenforce{ 21. fontweight:bold; 22. color:green 23. } 24. </style> 25.</head> 26.<body> 27. <divid="main"> 28. <divclass="box"> 29. I'mtheWalRUS...!!<br/>GOOGOOG'JOOB!!! 30. </div> 31. <spanclass="greenforce">Classgreenforcepadatagspan</span> 32. <pclass="greenforce">Classgreenforcepadatagp</p> 33. </div> 34.</body> 35.</html>
3. Simpandengannamacssclass.html 4. Hasilnyaakantampaksepertigambar1.9jikaandajalankanpadabrowser
Gambar1.9 1.9.2HyperlinkPseudoclass Jikaandapernahmengunjungisuatuwebsitedanandamenggerakkanmouseandakearahsebuah linklalulinktersebutberubahwarnadanmenjadibergarisbawahatausebaliknya.Apayanganda lihattersebutadalahhasildarihyperlinkpseudoclassnyaCSS. Sepertiyangsudahdibawassebelumnyauntukmembuatlinkkitamenggunakantag<a></a>.Oleh
karenaitutaginiliahyangakankitamanipulasi.Formatpenulisanhyperlinkpseudoclassadalah a:nama_aksi,dimananama_aksidapatberupa:

link:Tampilanlinkketikatidakdipiliholehuser(biasanyatidakperluditulis) visited:Tampilanlinksetelahdiklik active:Tampilanketikalinkdiklik hover:Tampilanketikamousemelewatilink(lebihseringdigunakandaripadaactive)
Penasaran?langsungsajabuatfileuntukmencobanya. 1. Bukagedit/Notepad++ 2. Ketikkodeberikut:

1. <?xmlversion="1.0"encoding="UTF8"?> 2. <!DOCTYPEhtmlPUBLIC"//W3C//DTDXHTML1.0Transitional//EN" 3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> 4. <htmlxmlns="http://www.w3.org/TR/xhtml1"> 5. <head> 6. <title>HyperlinkPseudoclass</title> 7. <styletype="text/css"> 8. body{fontfamily:Verdana,Serif;fontsize:14px} 9. a:link{ 10. color:green; 11. textdecoration:underline 12. } 13. a:visited{ 14. color:green; 15. textdecoration:underline 16. } 17. a:active{ 18. fontweight:bold; 19. textdecoration:none; 20. color:#c60000 21. } 22. a:hover{ 23. fontstyle:italic; 24. fontweight:bold; 25. color:#c60000; 26. textdecoration:none 27. } 28. </style> 29.</head> 30.<body> 31. <div> 32. <ahref="#">Link1</a><br/> 33. <ahref="#">Link2</a><br/> 34. <ahref="#">Link3</a> 35. </div> 36.</body> 37.</html>
3. Simpandengannamapseudoclass.html 4. Bukabrowserandalalubukafiletersebut
Gambar:1.10 1.9.3ExternalCSS Sampaisaatiniandasudahtahubagaimanamudahnyamemodifikasistyledenganmenggunakan CSS.AgardalampembuatanwebsitekitalebihefisienmakasebaiknyakitameletakkanfileCSS kitapadasuatufiletersendiri.Sehinggakitadapatmeloadnyapadahalamanyangmembutuhkan styeyangadapadafileCSStersebut. FileCSSyangakankitaloadtidakharusberadasatukomputerdenganfileHTMLkita.FileCSS tersebutdapatberadapadawebsitelain,inidimungkinkankarenakitadapatmenggunakanURL padasaatpemanggilanfile. AdaduametodeuntukmemanggilfileCSS,yangpertamaadalahdenganmenggunakantag<link> danyangkeduaadalahmenggunakanstatement@importdidalamCSS.Carayanglebihsering digunakanadalahmenggunakantag<link>.Tidakadayanglebihjelasdaripadalearningbydoing, karenaitulangsungsajakitapraktikkan. 1. Bukagedit/Notepad++ 2. Ketikkodeberikut:
1. body{fontfamily:Verdana,Serif;fontsize:14px} 2. #main{ 3. border:1pxsolid#cccccc; 4. padding:4px 5. } 6. div.error{ 7. border:1pxsolid#c60000; 8. borderleft:5pxsolid#c60000; 9. color:#c60000; 10. fontsize:14px; 11. padding:4px6px; 12. fontweight:bold; 13. width:350px; 14.}
3. Simpandengannamamy.css 4. Buatfilebarulagi,kemudianketikkodeberikut:
1. 2. 3. 4. 5. 6. <?xmlversion="1.0"encoding="UTF8"?> <!DOCTYPEhtmlPUBLIC"//W3C//DTDXHTML1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <htmlxmlns="http://www.w3.org/TR/xhtml1"> <head> <title>ExternalStylesheet</title>
7. <linkrel="stylesheet"type="text/css"href="my.css"/> 8. </head> 9. <body> 10. <divid="main"> 11. <h2>ExternalStylesheet/CSS</h2> 12. <divclass="error"> 13. WARNING!,memoryotakandasudah90%penuhsilahkankosongkanpikiran 14. pikirankotoryangtidakdiperlukan...!!! 15. </div> 16. </div> 17.</body> 18.</html>
5. Simpandengannamaexternalcss.html 6. Jalankanpadabrowser,hasilnyaakanterlihatsepertigambar1.11
Gambar1.11
1.10MembuatLayoutdenganDIV
Sepertiyangsudahdisinggungpadapembahasantentangtabel,kalaupembuatandesignwebsite yangmenggunakantabeldapatdikatakansudahtidakrelevanlagi.Sebagaipenggantidaritabel adalahtagdiv.Tagdivmemangdikhususkanuntukmembagihalamankedalambeberapasegmen. Jikakitagabungkandenganpenggunakanattributiddanclass,makadivdapatkitagunakanuntuk layoutsebuahhalaman. Secarakasarsetiaphalamanyangbaikpastimemilikibeberapabagaian,misalnyahalaman tersebutterdiridariheader,kemudianbeberapakolomuntukcontentutama,dansebagainya.Semua ituterserahpadadesignernya. Padacontohkasusyangakankitabuatnantinya,kitaakanmembuatsebuahlayouthalamanyang terdiridari: 1. 2. 3. 4. 5. Headerutamahalaman 2Kolom 1untukcontentutama 1untukberitaataulainnya lebarhalamantidaklebihdari800px(untukberjagajaga,karenamasihbanyakuseryang resolusimonitornya800x600) 6. Footerhalaman
Designhalamanyangakandibuattidakmelibatkanpenggunaangambar,karenaprioritaskitadisini hanyalahbagaimanacaramengaturtataletakkomponenmenggunakantagdiv.OK,langsungsaja tanpabanyakmendriblebola,lhokok? 1. Bukagedit/Notepad++ 2. Ketikkodeberikut:

1. *{padding:0;margin:0} 2. body{ 3. fontfamily:Verdana,Arial,Serif; 4. fontsize:11px; 5. color:#333; 6. background:#fafafa; 7. } 8. /*pembatasutama*/ 9. #container{ 10. margin:6pxauto; 11. textalign:left; 12. clear:both; 13. background:#fff; 14. border:2pxsolid#666; 15. width:778px; 16. padding:0; 17.} 18.#header{ 19. clear:both; 20. margin:2px; 21. background:#FFEA8C; 22. border:1pxsolidorange; 23. height:95px; 24.} 25.#headerh1{ 26. fontsize:2em; 27. fontfamily:Arial; 28. color:#c60000; 29. margin:14px6px4px8px; 30.} 31.#menu{ 32. clear:both; 33. padding:0;margin:0025px2px; 34.} 35.#menuul{ 36. float:left; 37. border:none; 38. liststyle:none; 39. font:bold14pxArial; 40.} 41.#menuulli{ 42. display:inline; 43.} 44.#menuullia{ 45. paddingright:16px; 46. borderbottom:4pxsolidorange; 47.} 48.#menuullia:hover{ 49. borderbottom:4pxsolid#c60000; 50.} 51.#menuullia.aktif{
52. borderbottom:4pxsolid#c60000; 53.} 54.#footer{ 55. position:relative; 56. clear:both; 57. height:40px; 58. border:none; 59. background:#cfcfcf; 60. color:#fff; 61. width:100%; 62. textalign:center; 63.} 64.#footerspan{ 65. top:10px; 66. position:absolute; 67.} 68.#content{ 69. margin:2px2px8px2px; 70. float:left; 71. width:485px; 72. border:1pxsolid#ccc; 73. padding:6px10px; 74.} 75.#contenth1{ 76. borderbottom:2pxdashed#ccc; 77. marginbottom:16px; 78.} 79.#side{ 80. border:1pxsolid#ccc; 81. float:right; 82. margin:2px; 83. width:250px; 84. padding:2px; 85.} 86.#sideh1{ 87. borderbottom:1pxsolid#fafafa; 88.} 89.#sideh2{ 90. background:#cfcfcf; 91. padding:3px; 92. color:#333; 93. textalign:center; 94.} 95.#sidep{ 96. border:1pxsolid#ccc; 97. padding:4px; 98.} 99.a{textdecoration:none;color:#666} 100.a:visited{color:#666}
5. Simpandengannamalayout.css 6. Buatfilebaru,lanjutkandenganmengetikkodeberikut:
1. 2. 3. 4. 5. 6. <?xmlversion="1.0"encoding="UTF8"?> <!DOCTYPEhtmlPUBLIC"//W3C//DTDXHTML1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <htmlxmlns="http://www.w3.org/TR/xhtml1"> <head> <title>LayoutMenggunakanDIV</title>
7. <linkrel="stylesheet"type="text/css"href="layout.css"/> 8. </head> 9. <body> 10. <divid="container"> 11. <divid="header"> 12. <h1>R.I.PJohn</h1> 13. </div> 14. <divid="menu"> 15. <ul> 16. <li><aclass="aktif"href="#">Home</a></li> 17. <li><ahref="#">Books</a></li> 18. <li><ahref="#">Search</a></li> 19. <li><ahref="#">About</a></li> 20. <li><ahref="#">ContactUs</a></li> 21. </ul> 22. </div> 23. <divid="content"> 24. <h1>WorkingClassHero</h1> 25. <p>Assoonasyou'reborntheymakeyoufeelsmall<br/> 26.Bygivingyounotimeinsteadofitall<br/> 27.Tillthepainissobigyoufeelnothingatall<br/> 28.Aworkingclassheroissomethingtobe<br/> 29.<br/> 30.Theyhurtyouathomeandtheyhityouatschool<br/> 31.Theyhatedyourcleveranddespisedafool<br/> 32.Tillyou'resofuckingcrazyyoucan'tfollowtheirrules<br/> 33.Aworkingclassheroissomethingtobe<br/> 34.<br/> 35.Whenthey'vetorturedandscaredyoufortwentyhardyears<br/> 36.Thentheyexpectyoutopickacareer<br/> 37.Whenyoucan'treallyfunctionyou'resofulloffear<br/> 38.Aworkingclassheroissomethingtobe<br/> 39.<br/> 40.KeepyoudopedwithreligionandsexandTV<br/> 41.Andyouthinkyou'resocleverandclasslessandfree<br/> 42.Butyou'restillfuckingpeasantsasfarasIcansee<br/> 43.Aworkingclassheroissomethingtobe<br/> 44.Aworkingclassheroissomethingtobe<br/> 45.<br/> 46.There'sroomatthetoptheyaretellingyoustill<br/> 47.Butfirstyoumustlearnhowtosmileasyoukill<br/> 48.Ifyouwanttobelikeallthefolksonthehill<br/> 49.<br/> 50.Ifyouwanttobeaherowelljustfollowme</p> 51. </div> 52. <divid="side"> 53. <h2>IMAGINE...</h2> 54. <p>Imaginethere'snoheaven 55.It'seasyifyoutry 56.Nohellbelowus 57.Aboveusonlysky 58.Imagineallthepeople 59.Livingfortoday... 60.Imaginethere'snocountries 61.Itisn'thardtodo 62.Nothingtokillordiefor 63.Andnoreligiontoo 64.Imagineallthepeople 65.Livinglifeinpeace... 66.YoumaysayI'madreamer 67.ButI'mnottheonlyone
68.Ihopesomedayyou'lljoinus 69.Andtheworldwillbeasone 70.Imaginenopossessions 71.Iwonderifyoucan 72.Noneedforgreedorhunger 73.Abrotherhoodofman 74.Imagineallthepeople 75.Sharingalltheworld... 76.YoumaysayI'madreamer 77.ButI'mnottheonlyone 78.Ihopesomedayyou'lljoinus 79.Andtheworldwillliveasone...</p> 80. </div> 81. <divid="footer"> 82. <span>19401980</span> 83. </div> 84. </div> 85.</body> 86.</html>
Gambar1.12
1.11Javascript
Javascriptadalahsebuahbahasapemrogramanyangkhususdirancanguntukwebsite.Javascript hanyaberjalandisisiklien,artinyapenggunaanjavascripthanyaterbataspadawebbrowseranda saja,iatidakbisamelakukanmanipulasidatapadasisiserver.Saatinijavascriptmerupakansalah satuelementterpentingdariteknologiwebterkini.AJAXadalahsalahsatucontohpenggunakan javascriptyangsaatinibanyakdigunakanolehwebsiteWeb2.0. Namunpadabukuinisayahanyamembahasjavascriptsepintassaja,untuktahulebihjauhtentang javascriptandadapatmencarilewatgoogleatautunggubukusayaberikutnyahehehe... 1.11.1MenggunakanJavascript Secarasederhanasebuahscriptjavascriptdiapitolehtag<script></script>,namununtuklebih memperjelaspenggunaanjavascriptbiasanyaditambahkanattributlanguageatautype,contoh sepertiberikut:
<scriptlanguage=javascript> //javascriptkodedisini... </script> atau <scripttype=text/javascript> //javascriptkodedisini... </script>
Kenapademikian?KarenajikaandapenggunabrowserIEmakaiamemilikisatubahasalagiselain javascriptyaituvbscript.Namunpadakenyataannyahampirtidakadasitusyangmenggunakan vbscript,jadisecaradefaultpunjikaandahanyamenggunakantag<script></script>makaIEakan menganggapscripttersebutadalahjavascript. Tag<script>dapatandaletakkanpadalevelglobalyaitupadatag<head></head>atausecaralokal dimanapundalamtag<body></body>.OKlangsungsajakitacobascriptwongjowoini. 1. Bukagedit/Notepad++ 2. Ketikkodeberikut:

1. <?xmlversion="1.0"encoding="UTF8"?> 2. <!DOCTYPEhtmlPUBLIC"//W3C//DTDXHTML1.0Transitional//EN" 3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> 4. <htmlxmlns="http://www.w3.org/TR/xhtml1"> 5. <head> 6. <title>MenggunakanJavascript</title> 7. <scriptlanguage="javascript"> 8. varnama=prompt("Masukkannama:","namaanda"); 9. vartanya=confirm(nama+",apakahandalakilaki?"); 10. if(tanya==true){ 11. alert("Halo"+nama+"kamuadalahlakilaki!"); 12. }else{ 13. alert("Halooo"+nama+"...kamucewekya...?ataujanganjangan...?"); 14. } 15. </script> 16.</head>
17.<body> 18.</body>
19.</html> 3. Simpandengannamajavascript.html 4. Jalankanpadabrowseruntukmelihathasilnya.
Gambar1.13:Javascriptprompt Padacontohdiataskitameletakkanjavascriptpadalevelglobaldenganmeletakkannyapadatag <head></head>.prompt,confirm,danalertadalahfungsifungsibuiltinjavascriptyangdapatkita gunakanuntukberinteraksidenganuser. JikaandafamiliardenganbahasasepertiJava,C++,C,atauanakcucunyamakaandatidakakan terlaluberlamalamamenyesuaikandiridengansyntaxjavascript.Halitukarenasyntaxjavascript sangatmiripdenganketigabahasayangtelahdisebutkandiatas.Untukmendeklarasikanvariabel padajavascriptkitadapatmenggunakankeywordvar. Javascriptversiterbarusudahmendukungpenggunaantipedatadalam pendeklarasianvariabelsepertiint,string,dll.Namununtukmenjagakompatibilitas sebaiknyatetapgunakankeywordvar.
RingkasanBabI
PadababinikitatelahmempelajaridasardasarpenggunaanHTML,bagaimanamengunakantag tagnya,memanipulasiteksdenganCSSdanmendesainlayoutsederhanamenggunakanCSSdan DIV.HalyangperludiingatadalahkitaakanmenggunakanstandarXHTMLjadisetiaptagpasti memilikipenutup.OlehkarenaituuntukpembahasanselanjutnyaDOCTYPEyangakankitapakai adalahXHTMLTransitional.

Dasar Pemograman Web

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Dasar Pemograman Web

Uploaded by

Copyright:

Available Formats

rio astamal

DASAR- DASAR WEB PROGRAMMING

Lisensidibawah: CreativeCommons AttributionShareAlike3.0

DASAR- DASAR WEB PROGRAMMING

rio astamal (c0kr3x@gmail.com)

Lisensidibawah: CreativeCommons AttributionShareAlike3.0

Gambar1.1:CarakerjaWWW Secarakronologisurutanprosespadadiagramdiatasadalah: 1. 2. 3. 4. 5. Usermembukaalamatwebsitepadabrowser BrowsermengirimHTTPRequestkeserver ServermeresponHTTPRequestdaribrowser ServermengirimHTTPResponsekebrowser Browsermenampilkanhalamanwebsitekepadauser

<p></p> <hn></hn> <span></span>

Untukmembuatparagraf Untukmembuatheader** Untukinlinestyle(manipulasiteks)

<!> Komentar *Tagtersebutharusberadadidalamtag<head>...</head> **ndapatberupaangkadari15,contoh<h1>...</h1> PENERAPANTEORIHTML 1. Bukaeditoranda(gedit(Linux),Notepad++(Windows),dsb)) 2. Ketikkodeberikut:

3. Simpanpadadengannamahelloworld.html 4. Bukabrowseranda(Firefox,IE,dsb)danbukafileyangbarusajaandabuat. 5. Hasilnyaakansepertigambar1.1

3. Simpandengannamamanipulasiteks.html 4. Bukadenganbrowseranda 5. Hasilnyaakansepertigambar1.2

5. Simpandilokasiyangsamadenganprofilku.htmldanberinamadaftarsitus.html 6. Bukafileprofilku.htmldenganbrowseranda,dancobakliklinkyangadauntukmemahami carakerjanya

<td></td>* Digunakanuntukmembuatkolom *Tagtersebutselaluberadadidalamtag<tr>...</tr> Sepertihalnyataglainyangdigunakanuntukpresentasiteks,seperti<span>,andadapat menggunakanattributstyleuntukmemformattampilantampilantabel.Berikutiniadalahcontoh

pembuatantabelmenggunakanHTML. 1. Bukatekseditor(gedit/Notepad++) 2. Ketikkodeberikut:

&gt;merupakanspecialcharacteruntuktanda>.DalamHTMLspecialcharacter diawalitandaampersand&dandiakhiri;.Contohlainadalah&lt;untuk<, &copy;untuk

Action:Nilaidariattributinimenunjukkanlokasidarifilepemrosesdariform.Dapatberupa relatifURI,contohfolderX/file.phpatauabsolutURI,contohhttp://contoh.com/file.php. Method:Nilaidariattributmenentukanmetodedatayangdikirimkankefilepemroses,apakah melaluimetodeGETatauPOST.

Selaintag<input>masihadataglainyangbiasadigunakandalamformyaitutag<select>dan <textarea>. PENERARANTEORIHTMLFORM 1. Bukagedit/Notedpad++ 2. Ketikkodeberikut:

3. Simpandengannamaform.html 4. Bukadenganbrowserfiletersebut. Hasilnyamemangtidakbegitubaguskarenakitatidakmelakukanstylingpadaform.

Siapkanduabuahgambardalamfolderyangsamadenganfilehtml Dalamcontohinisayamenggunakan(1)stikom.jpgdan(2)joinrevolution.jpg Bukagedit/Notepad++ Ketikkodeberikut:

<html> <head> <title>JoinTheRevolution</title> </head> <body> <imgsrc="stikom.jpg"align="left"> <strongstyle="color:red">SHOULD</strong>

8. <imgsrc="joinrevolution.jpg"align="center"> 9. </body> 10.</html>

documentyanginginandagunakanapakahHTML4.01,XHTML1.0Transitional,XHTML1.0 Strictdanlainnya. DOCTYPEjugaseringdisebutDTD(DocumentTypeDefinition).Berikutiniadalahcontoh penggunakantipedokumenHTML4.01,

PerbedaanTransitionaldanStrictterdapatpadatoleransikesalahan.Padatransitionaljikamasihada kesalahanstandarpenulisanmasihdiberikantoleransi,sedangkanStricttidakmemberikantoleransi samasekali.ContohhalamanXHTMLyangvalidadalahsebagaiberikut:

DalampembahasanselanjutnyakitaakanselalumenggunakanXHTMLbukanlagiHTML. DeklarasiversiXMLpadaawalhalamantidakharusditulisnamunsangat dianjurkanuntukditulis.Attributxmlnsharusditulisuntukmenentukan namespaceyangdigunakan.

OK,marikitabuatsebuahfileuntuklebihmemahaminya. 1. Bukagedit/Notepad++ 2. Ketikkodeberikut:

link:Tampilanlinkketikatidakdipiliholehuser(biasanyatidakperluditulis) visited:Tampilanlinksetelahdiklik active:Tampilanketikalinkdiklik hover:Tampilanketikamousemelewatilink(lebihseringdigunakandaripadaactive)

Penasaran?langsungsajabuatfileuntukmencobanya. 1. Bukagedit/Notepad++ 2. Ketikkodeberikut:

Designhalamanyangakandibuattidakmelibatkanpenggunaangambar,karenaprioritaskitadisini hanyalahbagaimanacaramengaturtataletakkomponenmenggunakantagdiv.OK,langsungsaja tanpabanyakmendriblebola,lhokok? 1. Bukagedit/Notepad++ 2. Ketikkodeberikut:

19.</html> 3. Simpandengannamajavascript.html 4. Jalankanpadabrowseruntukmelihathasilnya.

You might also like

>merupakanspecialcharacteruntuktanda>.DalamHTMLspecialcharacter diawalitandaampersand&dandiakhiri;.Contohlainadalah<untuk<, ©untuk