rio astamal

DASAR- DASAR WEB PROGRAMMING
Versi 0.1-pre alpha UNCENSORED VERSION

Lisensi dibawah:  Creative Commons  Attribution­Share Alike 3.0 

http://creativecommons.org

Made with

DASAR- DASAR WEB PROGRAMMING
Versi 0.1-pre alpha

©Copyright 2008

rio astamal (c0kr3x@gmail.com)

Lisensi dibawah:  Creative Commons  Attribution­Share Alike 3.0 

http://creativecommons.org

2.  <div>. jika digambarkan dalam sebuah  diagram sederhana kurang lebih akan seperti berikut: REQUEST Browser User INTERNET RESPONSE Server BAB I Gambar 1. google.com. Proses tersebut cukup kompleks namun. Tag­tag pada HTML selalu diawali dengan <x>.htm atau  *. <p>. dimana x tag HTML seperti <strong>. Dibawah ini adalah tabel beberapa tag HTML yang sering digunakan. 3. 5.1: Cara kerja WWW Secara kronologis urutan proses pada diagram diatas adalah: 1. 4. Sebuah halaman website  yang valid selalu diapit tag <html></html>. User membuka alamat website pada browser Browser mengirim HTTP­Request ke server Server merespon HTTP­Request dari browser Server mengirim HTTP­Response ke browser Browser menampilkan halaman website kepada user 1.1 Cara Kerja WWW Ketika kita mengunjungi sebuah situs katakanlah. dan lain­lain.  HTML terdiri dari simbol­simbol tertentu yang sering disebut dengan tag..html.HTML dan Word Wide Web  1.2 HTML HTML/XHTML merupakan format tampilan yang digunakan untuk menampilkan halaman website..</x>. ada sebuah proses “dibalik layar”  yang tidak anda ketahui. Tag HTML <html></html> <head></head> <title></title> <body></body> <style></style> <strong></strong> <div></div> <a></a> Keterangan Tag untuk mengapit halaman HTML Tag yang berisi informasi umum dari halaman Judul Halaman * Akan ditampilkan di browser Untuk CSS * Untuk menebalkan teks Untuk membuat layer Untuk membuat hyperlink . File HTML umumnya memiliki akhiran *.

Hasilnya akan seperti gambar 1.1: hello­world. 8. Buka editor anda (gedit(Linux).. IE.. Buka browser anda(Firefox. dsb) dan buka file yang baru saja anda buat.3 Manipulasi Font Untuk memanipulasi font kita akan menggunakan inline style/CSS (akan dibahas dibagian  berikutnya). <html> <head> <title>Website Pertamaku</title> </head> <body> <h1>Hello F**king World!!</h1> </body> </html> 3. Contoh. Ketik kode berikut: 1.html 4. Notepad++(Windows). Simpan pada dengan nama hello­world. 2. untuk membuat tampilan teks tebal gunakan cara  berikut: .. 4. Sebagai gantinya digunakan  tag <span> dan inline style. 7.</head> ** n dapat berupa angka dari 1 – 5. 5.  W3C sebagai pengembang HTML sudah tidak menyarankan untuk menggunakan tag font lagi.1 Gambar 1.<p></p> <hn></hn> <span></span> Untuk membuat paragraf Untuk membuat header ** Untuk inline style (manipulasi teks) <!­­ ­­> Komentar * Tag tersebut harus berada didalam tag <head>. dsb)) 2.. Inline style adalah attribut style  yang  diberikan pada sebuah tag HTML.</h1> PENERAPAN TEORI HTML 1.html 1. 6. 3. 5. contoh <h1>. Kita tidak akan menggunakan tag <font> karena tag ini sudah “kuno” alias deprecated.

Buka dengan browser anda 5. Ketik kode HTML berikut ini 1. akan saya beri  9. <head> 3. Segala SERTIFIKAT TANAH SAYA</span> DIJAMIN!!!. Buka gedit/Notepad++ 2.  Pemberian style tidak hanya terbatas pada satu bagian saja. anda dapat memberikan beberapa style  sekaligus dengan memberi tanda pemisah berupa “. bergaris bawah dan miring</span> Output Aku adalah teks tebal.” untuk setiap style.2 . <body> 6. dan miring Pada contoh diatas kita menerapkan tiga style pada tag span. Intinya kita dapat memberikan banyak style sekaligus pada suatu tag. hampir semua tag yang digunakan  untuk presentasi teks dapat kita sisipi tag style. Dapat dilihat kalau setiap style  dipisahkan oleh titik koma.</span> 11.font­style:italic”>Aku  adalah teks tebal. bergaris bawah. MOBIL. yang berisi “font­weight:bold”. Maksudnya  adalah kita akan mengaplikasikan style bold pada teks yang diapit oleh tag <span></span>. Hasilnya akan seperti gambar 1. Attribut style tidak terbatas pada tag span saja. <html> 2.text­decoration:underline">PENGUMUMAN!</h1> 7. <span style="font­weight:bold. <title>Manipulasi Teks</title> 4.<span style=”font­weight:bold”>Aku adalah teks tebal</span> Output: Aku adalah teks tebal Pada contoh diatas kita memberikan attribut style. <h1 style="color:red.font­style:italic">ISTRI. Barang siapa yang menemukan dompet saya. <span style=”font­weight:bold. <span style="color:#FF0000"> 8. </head> 5. Simpan dengan nama manipulasi­teks.</html> 3. PENERAPAN TEORI MANIPULASI TEKS 1. RUMAH dan  10.html 4.</body> 12.text­decoration:underline.

kandang sapi pada 1980</li> 13. Defaultnya adalah self dimana link tidak dibuka pada window baru. Untuk lebih memahami cara kerja link. </ul> 14. Simpan dengan nama profilku. <p>Ingin lihat daftar situs favorit saya? <a href="daftar­situs.html .</p> 16. </head> 5. Ketik kode berikut: 1. Jika ingin membuka pada  window baru gunakan nilai _blank.html dan daftar­ situs.Gambar 1.4 Hyperlink Anda tentu sering melngklik gambar atau tulisan yang mengarah ke halaman lain atau website  lainnya. <li><strong>Wafat: </strong> Tewas tertembak oleh penggemar di depan  12. <head> 3.html.2 1. <li><strong>Pekerjaan:</strong> Rocker Jalanan<li> 11. <h2>ProfilKu</h2> 7. <ul> 8. Lahir: </strong>Lipermboh. 1. Untuk  membuat link kita dapat menggunakan tag <a></a>. Yang anda klik itu adalah hyperlink atau lebih dikenal dengan istilah link saja. Buka gedit/Notepad++ 2. kita akan membuat dua file yaitu profilku. Dapat berupa relatif URL atau absolut  URL. <body> 6. <li><strong>Tempat/Tgl. <title>Profil JSL</title> 4. klik disini</a>.html"> 15. target digunakan untuk menentukan apakah halaman akan dibuka pada jendela/window baru atau  tidak.</html> 3.  Dua attribut yang paling sering digunakan  pada tag <a> adalah href dan target. 14 September 1940</li> 10.</body> 17. <html> 2. href digunakan untuk menentukan lokasi tujuan dari link. <li><strong>Nama Lengkap:</strong> John Septian Lennon<li> 9.

 Saat  ini penggunaan tabel dikhususkan hanya untuk menampilkan data secara tabular saja tidak untuk  design halaman. Beberapa tag yang sering digunakan saat membuat tabel adalah: Tag <tr></tr> <th></th>* Keterangan Digunakan untuk membuat baris baru Digunakan untuk membuat header tabel <td></td>* Digunakan untuk membuat kolom * Tag tersebut selalu berada didalam tag <tr>.4.milw0rm. anda dapat  menggunakan attribut style untuk memformat tampilan tampilan tabel.  penggunaan tabel sebagai layout website sudah tidak relevan lagi. Simpan dilokasi yang sama dengan profilku.. kemudian ketik kode berikut: 1. <ol> 8.html 6. Cacing Underground</a></li> 11. dan coba klik link yang ada untuk memahami  cara kerjanya Gambar 1. <head> 3. Berikut ini adalah contoh  . <li><a target="_blank" href="http://www. seperti <span>. dan digantikan oleh tag DIV.html dan beri nama daftar­situs.</tr> Seperti halnya tag lain yang digunakan untuk presentasi teks. <h2>Daftar Situs favoritku</h2> 7.google.com/">Om Google</a></li> 9. <body> 6. Buka file profilku. <html> 2. Dalam beberapa tahun terakhir.html">Lihat profil lengkap</a></p> 13. </head> 5. </ol> 12.5 Membuat Tabel Untuk membuat tabel kita dapat menggunakan tag <table></table>. <li><a target="_blank" href="http://www. Buat file baru lagi.html dengan browser anda.</body> 14. <p><a href="profilku.com"> 10..</html> 5.3 1. <title>Daftar situs favorit JSL</title> 4.

<title>TABEL IPS/IPK</title> 4. </tr> 24. <tr> 13.0</td> 27.4 . </table> 29. <tr style="text­align:right. <td>SEMESTER 1</td><td style="text­align:right">4. </tr> 21. <td style="text­align:inherit." border="1"> 8. <tr> 22. <td>SEMESTER 2</td><td style="text­align:right">4. Ketik kode berikut: 1.0</td> 14. <tr> 19. hasilnya akan nampak seperti gambar 1.4 Gambar 1. <th>IPS</th> 11.">4. 1.</td> 26. <table style="width:600px. <tr style="background­color:#cfcfcf"> 9.font­weight:bold"> 25. </tr> 15. </tr> 12. <html> 2. <td style="text­align:center.&gt. <tr> 16. </head> 5. </tr> 28. </tr> 18.0</td> 17. <td>SEMESTER 3</td><td style="text­align:right">4. <head> 3. Buka dengan browser anda.0</td> 20.</html> 3. <body> 6.0</td> 23. <td>SEMESTER 4</td><td style="text­align:right">4. Buka teks editor (gedit/Notepad++) 2.</body> 30. Simpan denan nama tabel. <h2>Tabel IP Sampai semester 4:</h2> 7. <th>SEMESTER</th> 10.background­color:#FFCB68.&gt.">NILAI IPK &gt.pembuatan tabel menggunakan HTML.html 4.

 Dalam HTML special character  diawali tanda ampersand “&” dan diakhiri “. checkbox. contoh “http://contoh. untuk “<”. dan lainnya hanya diperlukan tag <input>.php” atau absolut URI.php”. Contoh lain adalah &lt. Contoh  berikut merupakan penggunaan tag input untuk menampilkan textbox: <input type=”text” size=”16” maxlength=”16”> Berikut ini daftar nilai yang dapat digunakan pada attribut type: Nilai type Keterangan text password file checkbox radio submit button reset Untuk menampilkan textbox Untuk menampilkan password field Untuk menampilkan proses upload file (mirip seperti textbox namun  dengan tombol Browse) Untuk menampilkan tombol checkbox (lebih dari satu pilihan) Untuk menampilkan tombol radio/option (hanya satu pilihan) Tombol untuk men­submit form (default button untuk submit) sama dengan submit hanya saja bukan default button Untuk membersihkan tampilkan form .&gt.”. Tag form berfungsi hanya sebagai  wrapper yang mengelompokkan data yang akan dikirim. Tag yang digunakan bersama tag form  adalah tag <input>.com/file.php” method=”POST”> .  &copy. 1.1 Macam­macam input Untuk menampilkan textbox. Dapat berupa  relatif URI. </form> Tag form tidak banyak berguna tanpa adanya tag input lain. dan sebagainya.  Dua attribut yang paling sering digunakan dalam penggunaan form adalah: – – Action: Nilai dari attribut ini menunjukkan lokasi dari file pemroses dari form. Method: Nilai dari attribut menentukan metode data yang dikirimkan ke file pemroses. Contoh penggunaan tag form sebagai berikut: <form action=”file. radio button. merupakan special character untuk tanda “>”.6 HTML Form HTML Form sering digunakan untuk meminta inputan dari user yang kemudian diproses oleh  server side scripting seperti PHP.. apakah  melalui metode “GET” atau “POST”. JSP.  Yang membedakan output dari masing­masing tampilan adalah nilai dari attribut type. untuk “©” 1. Form HTML diapit oleh tag <form></form>.. contoh “folderX/file.6.

</body> 35. </select><br> 31.</html> 3. <label>Password: </label> 13. <label>Nama: </label> 9. Simpan dengan nama form. <label>Deskripsikan diri anda: <label><br> 23. <input type="checkbox" name="hob" value="tidur"><span> Tidur</span><br> 22. <option value="mimpi">Mimpi</option> 30. Buka dengan browser file tersebut. </form> 34. Selain tag <input> masih ada tag lain yang biasa digunakan dalam form yaitu tag <select> dan  <textarea>. <br> 18. Buka gedit / Notedpad++ 2. <label>Jenis Kelamin: </label> 15. </head> 5. <input type="text" size="30" name="nama"><br> 10. <html> 2. <h2>Form Registrasi</h2> 7.html 4. <label>Darimana anda mendengar kami?</label><br> 26. <input type="radio" name="jk" value="wanita"><span> Wanita</span> 17. <input type="radio" name="jk" value="pria" checked><span> Pria</span> 16. <option value="google">Google</option> 29. Hasilnya memang tidak begitu bagus karena kita tidak melakukan styling pada form. <input type="reset" value="RESET"> 33. <textarea style="height:100px. <label>Hoby: </label><br> 19. <title>Registrasi</title> 4. <select name="dengar"> 27. . <head> 3. <body> 6.width:400px" name="desc"></textarea> 24. <option value="kuburan">Dari dalam kubur</option> 28.hidden Input tidak ditampilkan dibrowser. <hr><br> 25. PENERARAN TEORI HTML FORM 1. <input type="password" size="16" name="pass" maxlength="16"><br> 14. <input type="text" size="16" name="uname" maxlength="16"><br> 12. <input type="checkbox" name="hob" value="game"><span> Game</span> 21. <input type="submit" value="DAFTAR">  32. <form action="" method="POST"> 8. Ketik kode berikut: 1. <input type="checkbox" name="hob" value="spkbola"><span> Sepak Bola</span> 20. <label>Username: </label> 11.

 kecuali anda menambahkan  tanda “%”. sedangkan width untuk menentukan lebar.7 Menampilkan Gambar Untuk menampilkan gambar pada halaman HTML dapat digunakan tag <img>. dapat berupa relatif URI atau absolut URI. 4.  Untuk lebih memahaminya ikuti langkah berikut: 1. 5.jpg dan (2)join­revolution. Attribut src digunakan untuk menentukan  alamat dari gambar yang akan ditampilkan. 4. Beberapa attribut  yang sering digunakan adalah src.Gambar 1. 1. 6. Secara default nilai yang ada pada height dan width adalah dalam pixel. Maka lebar atau tinggi diukur menggunakan persen. 3. 3. Siapkan dua buah gambar dalam folder yang sama dengan file html Dalam contoh ini saya menggunakan (1)stikom. 7. dan width. 1. 2. Jika anda tidak menyertakan  attribut height dan width. Attribut  height digunakan untuk menentukan tinggi. 2.jpg" align="left"> <strong style="color:red">SHOULD</strong> .6 Dalam kasus real world nilai yang ada pada attribut name dan value­lah yang akan dikirim ke file  pemroses. maka gambar tersebut akan ditampilkan sesuai dengan ukuran aslinya. height.jpg Buka gedit/Notepad++ Ketik kode berikut: <html> <head> <title>Join The Revolution</title> </head> <body> <img src="stikom.

&gt.&gt. Jadi setiap tag harus memiliki  penutup.jpg" align="center"> 9. <img>. Simpan dengan nama gambar.8. Pada XHTML semua tag harus memiliki penutup. </body> 10.</html> 5. Berikut ini adalah beberapa contoh penulisan yang valid di HTML tapi tidak di XHTML.html Gambar 1.7 1. Anda tentu pernah mengetik tag­tag tanpa penutup seperti <br>. jika tidak maka  halaman yang anda buat tidak sesuai dengan standar yang telah ditentukan dan dianggap tidak valid/ compliant dengan standar W3C.8 XHTML dan DOCTYPE Apakah XHTML itu? apakah ia berbeda dengan HTML? Sebenarnya XHTML adalah HTML hanya  saja XHTML mengikuti format XML sebagai standar penulisannya.” /> <strong>Hello</strong> Mungkin anda bertanya. SALAH <strong><span>Hello World</strong></ span> <input type=”radio” checked> <br> <img border=1> <input type=”button” value=”GO >>>”> <STRONG>Hello</strong> BENAR <strong><span>Hello  World</span></strong> <input type=”radio” checked=”checked” /> <br /> atau <br></br> <img border=”1” /> <input type=”button”  value=”GO &gt. dan <input> pada  pembahasan sebelumnya. <img src="join­revolution. DOCTYPE adalah pententu tipe  . lalu bagaimana saya memberitahu browser bahwa halaman saya adalah  XHTML? Semua itu terletak pada DOCTYPE halaman anda.

 Contoh halaman XHTML yang valid adalah sebagai berikut: <?xml version="1.dtd"> 3.9 CSS (Cascading Style Sheets) CSS merupakan suatu teknologi yang digunakan untuk mempermudah pembuatan sebuah website. Deklarasi versi XML pada awal halaman tidak harus ditulis namun sangat  dianjurkan untuk ditulis. Pada transitional jika masih ada  kesalahan standar penulisan masih diberikan toleransi.dtd">  2.0 Strict//EN"    "http://www.org/TR/html4/ strict.w3. Untuk XHTML beberapa DTD yang sering digunakan adalah 1. Jadi jika memang anda ingin menggunakan HTML murni bukan  XHTML gunakanlah DTD 4.0  Strict dan lainnya.0" encoding="UTF­8"?>  <!DOCTYPE html PUBLIC "­//W3C//DTD XHTML 1. CSS diapit oleh tag <style></style> dan berada diantara  . XHTML 1. DOCTYPE juga sering disebut DTD (Document Type Definition). Berikut ini adalah contoh  penggunakan tipe dokumen HTML 4.w3.dtd">  Jika anda tidak menyebutkan DTD yang anda gunakan asumsi dari satu browser dengan browser  yang lain mungkin berbeda­beda.0 Transitional//EN"    "http://www.w3.w3c.0 Frameset//EN"    "http://www.01.01.org/TR/xhtml1">    <head>      <title>Every document must have a title</title>    </head>    <body>  <span>Hello World</span>   </body>  </html> Dalam pembahasan selanjutnya kita akan selalu menggunakan XHTML bukan lagi HTML.01//EN"   "http://www. <!DOCTYPE html PUBLIC "­//W3C//DTD XHTML 1. 1. <!DOCTYPE html PUBLIC "­//W3C//DTD XHTML 1.org/TR/xhtml1/DTD/xhtml1­transitional.dtd"> Perbedaan Transitional dan Strict terdapat pada toleransi kesalahan.  Itu merupakan salah satu kelebihan CSS. Deklarasi DOCTYPE harus diletakkan paling awal sebelum tag  <html>.0 Transitional. sedangkan Strict tidak memberikan toleransi  sama sekali.01. XHTML 1.w3.org/TR/xhtml1/DTD/xhtml1­transitional.  Dengan CSS kita dapat dengan cepat mengaplikasikan suatu style pada tag tertentu.org/TR/xhtml1/DTD/xhtml1­strict.document yang ingin anda gunakan apakah HTML 4.0 Transitional//EN"  "http://www.dtd">  <html xmlns="http://www. Bahkan kita  dapat  meletakkan CSS pada suatu file sehingga dapat digunakan oleh banyak halaman sekaligus. Attribut “xmlns” harus ditulis untuk menentukan  namespace yang digunakan. <!DOCTYPE html PUBLIC "­//W3C//DTD XHTML 1.org/TR/xhtml1/DTD/xhtml1­frameset.w3.  <!DOCTYPE HTML PUBLIC "­//W3C/DTD HTML 4.

<style type="text/css"> 8.  15. 16..  <p>. <span>. hanya saja letaknya didalam tag. font­size: 18px 17. <head>  6.</head>  20. body { font­family: Verdana.</html> 3. hasilnya akan terlihat seperti gambar 1. font­size: 11px } Pada contoh diatas kita memformat semua teks yang ada pada tag body menjadi berjenis huruf  Verdana dengan ukuran 11 pixel. padding: 4px 12. dan masih banyak lagi. <html xmlns="http://www. div { 10.org/TR/xhtml1/DTD/xhtml1­transitional.w3. Apa yang ada pada attribut style tersebut  sebenarnya adalah CSS yang valid.0 Transitional//EN"  3.w3. Buka gedit / Notepad++ 2. Berikut ini adalah contoh sederhana penggunaan CSS pada tag body. <title>CSS ­ Cascading Style Sheets</title>  7. <div> 22. 11. PENERAPAN TEORI CSS 1. body {font­face: Verdana. font­style: italic. Komentar pada CSS diapit oleh karakter /*  */. text­decoration: underline. <!DOCTYPE html PUBLIC "­//W3C//DTD XHTML 1. Tag body pada contoh disebut selector sedangkan attribut style  didalamnya disebut declaration. } 13.</body>  25. Kelebihan lainnya adalah anda dapat menyisipkan komentar pada CSS.8 . <div>. </div> 24. Hampir semua tag dapat dimanipulasi menggunakan CSS seperti <body>. "http://www.<body>  21.}.org/TR/xhtml1">  5. Simpan dengan nama css. Ketik kode berikut: 1. hal ini  cukup penting jika jumlah CSS anda sangat banyak. Declaration ditandai dengan adanya kurung kurawal {.0" encoding="UTF­8" ?>  2.tag <head></head>. <h2>Ini adalah contoh sederhana penggunaan CSS</h2> 23. Lalu jalankan pada browser. <?xml version="1. } 18.html 4. </style> 19. font­size: 11px } 9. Serif..dtd">  4. border: 2px solid #cccccc. Pada pembahasan­pembahasan sebelumnya kita sering menggunakan attribut style untuk  memformat tampilan atau sering disebut inline style. h2 {  14. <table>.

1. font­weight: bold } Baris pertama merupakan general class karena semua tag dapat menggunakannya. Buka gedit / Notepad++ 2.tebal­miring { font­weight: bold.error { color: red.9. Lihat contoh berikut: . Lalu apa yang  anda lakukan? Merubahnya secara manual lewat inline style? Itu memang dapat dilakukan tapi tidak  efisien. Nilai dari attribut id  antara tag yang satu dengan tag yang lain tidak boleh ada yang sama. "http://www.Gambar 1.org/TR/xhtml1/DTD/xhtml1­transitional.”. #main { border: 1px solid #000000 } div#header { padding: 4px } OK. 1. Sedangkan pada  baris kedua adalah regular class karena class tersebut hanya berlaku pada tag div saja. <?xml version="1.  Penggunakan class diawali dengan tanda titik “. <!DOCTYPE html PUBLIC "­//W3C//DTD XHTML 1. Ketik kode berikut: 1. Cara yang paling efektif dan efisien adalah dengan menggunakan class dalam CSS. mari kita buat sebuah file untuk lebih memahaminya. anda tidak ingin mengaplikasikan style tersebut.1 CSS Class dan ID Jika anda cukup kreatif.dtd">  . Mengapa? Bayangkan jika  pada beberapa bagian pada halaman. Tanda yang digunakan bukan  titik melainkan tanda pagar “#”. Dengan demikian kita dapat dengan mudah memodifikasi  banyak elemen sekaligus hanya dari sebuah baris CSS. font­style: italic } div.0 Transitional//EN"  3. Dengan  menggunakan class kita dapat menentukan letak bagian yang harus kita aplikasikan suatu style. saya harap memang demikian :) maka anda mungkin berfikir kalau  penggunaan cara seperti pembahasan sebelumnya tidak sepenuhnya baik.w3. Cara lain adalah dengan menggunakan nilai dari attribut id pada setiap tag. Untuk  mengaplikasikan style yang ada pada class kita harus memasukkan nama class tersebut pada attribut  class.0" encoding="UTF­8" ?>  2.8: Contoh penggunaan CSS Dapat anda lihat bahwa tag yang kita deklarasikan pada CSS secara otomatis style tag tersebut  mengikuti aturan CSS yang kita buat.

. 11.9 1. <title>CSS Class &amp. font­weight: bold. padding: 6px 3px. <div id="main"> 28.green­force { 21. border: 1px solid orange. 22. <span class="green­force">Class green­force pada tag span</span> 32.9 jika anda jalankan pada browser Gambar 1. I'm the WalRUS. border: 1px solid #cccccc. 15. . Hasilnya akan tampak seperti gambar 1.box { 14. </style>     25. 17. color: #c60000. </div> 31.</body>  35.2 Hyperlink Pseudoclass Jika anda pernah mengunjungi suatu website dan anda menggerakkan mouse anda ke arah sebuah  link lalu link tersebut berubah warna dan menjadi bergaris bawah atau sebaliknya. font­size: 11px } 9. <head>  6.</html> 3. padding: 4px 12.html 4. </div> 34.org/TR/xhtml1">  5. Oleh  . 18. #main { 10. ID</title>  7.</head>  26. color: green 23. <p class="green­force">Class green­force pada tag p</p> 33. } 13. }  24.<body>  27.9.w3. div. background­color: #FFF8B9.!!<br />GOO GOO G'JOOB!!! 30. Seperti yang sudah dibawas sebelumnya untuk membuat link kita menggunakan tag <a></a>. <html xmlns="http://www. <style type="text/css"> 8.4. <div class="box"> 29. body { font­family: Verdana. Serif. width: 200px 19. } 20. 16. Apa yang anda  lihat tersebut adalah hasil dari hyperlink pseudoclass­nya CSS. Simpan dengan nama css­class..

Ketik kode berikut: 1. text­decoration: none. 26. 1. a:link {  10. } 22.w3.html 4. 25.0 Transitional//EN"  3. Serif.</head>  30. <div> 32.</body>  37.<body>  31. 24. <!DOCTYPE html PUBLIC "­//W3C//DTD XHTML 1. font­weight: bold.dtd">  4. </div> 36. Buka gedit / Notepad++ 2. color: #c60000 21. font­style: italic. <style type="text/css"> 8. font­weight: bold. text­decoration: none 27. a:visited {  14. color: #c60000.org/TR/xhtml1">  5. <a href="#">Link 3</a> 35. Buka browser anda lalu buka file tersebut . <a href="#">Link 2</a><br /> 34.  11.org/TR/xhtml1/DTD/xhtml1­transitional. } 13. a:active { 18.karena itu tag iniliah yang akan kita manipulasi.0" encoding="UTF­8" ?>  2. Format penulisan hyperlink pseudoclass adalah  a:nama_aksi. <a href="#">Link 1</a><br /> 33. <head>  6. 20. <title>Hyperlink Pseudoclass</title>  7.  15. a:hover { 23. <?xml version="1. font­size: 14px } 9. "http://www. <html xmlns="http://www. }       17. text­decoration: underline  12. 19. Simpan dengan nama pseudoclass.w3. body { font­family: Verdana.</html> 3. text­decoration: underline  16. dimana nama_aksi dapat berupa: • • • • link: Tampilan link ketika tidak dipilih oleh user (biasanya tidak perlu ditulis) visited: Tampilan link setelah diklik active:Tampilan ketika link diklik hover: Tampilan ketika mouse melewati link (lebih sering digunakan daripada active) Penasaran? langsung saja buat file untuk mencobanya. </style> 29. }       28. color: green. color: green.

File CSS yang akan kita load tidak harus berada satu komputer dengan file HTML kita. Sehingga kita dapat meload­nya pada halaman yang membutuhkan  stye yang ada pada file CSS tersebut. 9. div.org/TR/xhtml1">  <head>  <title>External Stylesheet</title>  . 12. 1. 10. Ada dua metode untuk memanggil file CSS. } 6.0 Transitional//EN"  "http://www.9. Agar dalam pembuatan website kita lebih efisien maka sebaiknya kita meletakkan file CSS  kita pada suatu file tersendiri.w3. body { font­family: Verdana. #main { 3. 4. padding: 4px 5. 14. 13.w3. font­size: 14px. 5.0" encoding="UTF­8" ?>  <!DOCTYPE html PUBLIC "­//W3C//DTD XHTML 1.dtd">  <html xmlns="http://www. File CSS  tersebut dapat berada pada website lain.  karena itu langsung saja kita praktikkan.} 3. Ketik kode berikut: 1.3 External CSS Sampai saat ini anda sudah tahu bagaimana mudahnya memodifikasi style dengan menggunakan  CSS. 11.10 1. Serif.Gambar: 1. width: 350px.org/TR/xhtml1/DTD/xhtml1­transitional. <?xml version="1.error { 7.css 4. border: 1px solid #c60000. Buka gedit / Notepad++ 2. 6. ini dimungkinkan karena kita dapat menggunakan URL  pada saat pemanggilan file. padding: 4px 6px. font­size: 14px } 2. Tidak ada yang lebih jelas daripada learning by doing. 4. 2. 8. font­weight: bold. color: #c60000. yang pertama adalah dengan menggunakan tag <link>  dan yang kedua adalah menggunakan statement @import didalam CSS. 3. border: 1px solid #cccccc. Buat file baru lagi. border­left: 5px solid #c60000. Cara yang lebih sering  digunakan adalah menggunakan tag <link>. kemudian ketik kode berikut: 1. Simpan dengan nama my.

css" /> 8. kemudian beberapa kolom untuk content utama. Simpan dengan nama external­css. pikiran kotor yang tidak diperlukan. WARNING!. Secara kasar setiap halaman yang “baik” pasti memiliki beberapa bagaian.!!! 15. 2. <h2>External Stylesheet/CSS</h2> 12. karena masih banyak user yang  resolusi monitornya 800x600) 6. Semua  itu terserah pada designernya. <div class="error"> 13.</html> 5.html 6.7. <div id="main"> 11. hasilnya akan terlihat seperti gambar 1. dan sebagainya. <body>  10. </div> 17. Footer halaman . memory otak anda sudah 90% penuh silahkan kosongkan pikiran­ 14.11 1. </div> 16. Jalankan pada browser. <link rel="stylesheet" type="text/css" href="my. </head>  9. misalnya halaman  tersebut terdiri dari header. 3.</body>  18.  Jika kita gabungkan dengan penggunakan attribut id dan class..11 Gambar 1. Tag div memang dikhususkan untuk membagi halaman kedalam beberapa segmen. maka div dapat kita gunakan untuk  layout sebuah halaman.10 Membuat Layout dengan DIV Seperti yang sudah disinggung pada pembahasan tentang tabel. Pada contoh kasus yang akan kita buat nantinya.. Header utama halaman 2 Kolom 1 untuk content utama 1 untuk berita atau lainnya lebar halaman tidak lebih dari 800px (untuk berjaga­jaga. 4. kita akan membuat sebuah layout halaman yang  terdiri dari: 1. kalau pembuatan design website  yang menggunakan tabel dapat dikatakan sudah tidak relevan lagi. 5. Sebagai pengganti dari tabel  adalah tag div.

} 18. list­style: none. height: 95px. 13.} 48. 16. 28. background: #FFEA8C. langsung saja  tanpa banyak “mendrible bola”. background: #fff. border­bottom: 4px solid #c60000. 43. margin: 6px auto.} 31. 34. OK.} 51. padding:0. #container { 10. 12. 17. font: bold 14px Arial. body {  3. 38. 46. text­align: left.  4. 20. padding­right: 16px. clear: both. } 8. 27. karena prioritas kita disini  hanyalah bagaimana cara mengatur tata letak komponen menggunakan tag div. 29. clear: both. 39. 5.#menu ul li a.Design halaman yang akan dibuat tidak melibatkan penggunaan gambar. 24. 47.          30. lho kok? 1.#header { 19. font­family: Arial. * { padding: 0. Ketik kode berikut: 1. display: inline. font­size: 11px. Buka gedit / Notepad++ 2.#menu ul li { 42. border: 1px solid orange. Arial.#menu { 32. 40. 22. font­size: 2em. /* pembatas utama */ 9. 23. color: #333. 7. width:778px. 6.} 35. margin: 0 0 25px 2px.#menu ul li a:hover {       49. float:left. 33. clear:both. margin: 2px. color: #c60000. margin: 14px 6px 4px 8px. Serif. border: none. margin: 0 } 2. 14. font­family: Verdana. 11. 37. padding: 0. background: #fafafa.aktif { .} 41.#menu ul li a { 45. 21. border:2px solid #666.#menu ul { 36. border­bottom: 4px solid orange. 50. 15.} 25.} 44.#header h1 { 26.

 color: #666} 100. 78.w3.css 6. 71. 62. width: 100%. 4.#side h1 { 87. border­bottom: 2px dashed #ccc. top: 10px. height: 40px.#side { 80. Simpan dengan nama layout. 74. padding: 6px 10px. 61. padding: 4px. color: #fff. text­align: center.a { text­decoration:none. 97.#footer span { 65. border­bottom: 1px solid #fafafa. 84.#content h1 { 76. color: #333.#footer { 55. border­bottom: 4px solid #c60000. border: none. 72. border: 1px solid #ccc. margin: 2px.} 75. border: 1px solid #ccc. text­align: center. 81. 5. 92. 85. 82. float: right. 98. margin: 2px 2px 8px 2px. 6. padding: 2px. width: 485px.org/TR/xhtml1/DTD/xhtml1­transitional.a:visited { color: #666 } 5.#side h2 { 90.} 79.52. 94. 88.w3. 56.} 54. lanjutkan dengan mengetik kode berikut: 1. 66. 58.} 68. clear:both. 53. 83. 59. 2. 73. 3.} 95. 91.#side p { 96. background: #cfcfcf.0" encoding="UTF­8" ?>  <!DOCTYPE html PUBLIC "­//W3C//DTD XHTML 1. 67.} 99. 77.org/TR/xhtml1">  <head>  <title>Layout Menggunakan DIV</title>  .} 86. position: relative. <?xml version="1. position: absolute.} 89. border: 1px solid #ccc.dtd">  <html xmlns="http://www. padding: 3px. width: 250px. Buat file baru.0 Transitional//EN"  "http://www. 93.#content { 69. 57.          63. background: #cfcfcf. float: left.} 64. 60. margin­bottom: 16px. 70.

I.. 60.P John</h1> 13. <li><a href="#">Contact Us</a></li> 21.css" /> 8.7.<br /> 35.<br /> 50.But I'm not the only one .It's easy if you try 56.No hell below us 57.. 66. <h1>R.They hurt you at home and they hit you at school<br /> 31.And no religion too 64. <link rel="stylesheet" type="text/css" href="layout.A working class hero is something to be<br /> 44.<br /> 40. <ul> 16. <div id="content"> 24.Imagine all the people 59. <h2>IMAGINE. <div id="container"> 11. <li><a href="#">Books</a></li> 18.But you're still fucking peasants as far as I can see<br /> 43. <div id="header"> 12.</h2> 54. <body>  10. <li><a href="#">About</a></li> 20. <p>As soon as you're born they make you feel small<br /> 26.By giving you no time instead of it all<br /> 27.If you want to be like all the folks on the hill<br /> 49.Imagine all the people 65..If you want to be a hero well just follow me </p> 51.Imagine there's no countries 61. </div> 23.But first you must learn how to smile as you kill<br /> 48.A working class hero is something to be<br /> 45.Above us only sky 58. </head>  9.And you think you're so clever and classless and free<br /> 42.Keep you doped with religion and sex and TV<br /> 41. </div> 52..Living life in peace.<br /> 30.A working class hero is something to be<br /> 29. <p>Imagine there's no heaven 55.There's room at the top they are telling you still<br /> 47. <h1>Working Class Hero</h1> 25.Till the pain is so big you feel nothing at all<br /> 28.It isn't hard to do 62. <li><a href="#">Search</a></li> 19. <div id="side"> 53.You may say I'm a dreamer 67.<br /> 46.They hated your clever and despised a fool<br /> 32. </div> 14. <div id="menu"> 15.When they've tortured and scared you for twenty hard years<br /> 36.Then they expect you to pick a career<br /> 37.Living for today.A working class hero is something to be<br /> 34.Till you're so fucking crazy you can't follow their rules<br /> 33. </ul> 22..Nothing to kill or die for 63.When you can't really function you're so full of fear<br /> 38. <li><a class="aktif" href="#">Home</a></li> 17.A working class hero is something to be<br /> 39..

76.. </div> 85.</body>  86.. <div id="footer"> 82.A brotherhood of man 74.. </div> 84.Sharing all the world.</p> 80.But I'm not the only one 78.And the world will be as one 70.12 ..And the world will live as one.Imagine no possessions 71.</html> Gambar 1.I hope someday you'll join us 79. </div> 81.You may say I'm a dreamer 77. <span>1940 ­ 1980</span> 83.68.No need for greed or hunger 73.I wonder if you can 72.Imagine all the people 75.I hope someday you'll join us 69.

<!DOCTYPE html PUBLIC "­//W3C//DTD XHTML 1. <?xml version="1.0 Transitional//EN"  3.. Ketik kode berikut: 1. } 15.11 Javascript Javascript adalah sebuah bahasa pemrograman yang khusus dirancang untuk website. 14.dtd">  4. alert("Halooo "+nama+". "nama anda"). artinya penggunaan javascript hanya terbatas pada web­browser anda  saja. OK langsung saja kita coba “script é wong jowo” ini. <html xmlns="http://www..org/TR/xhtml1">  5. Javascript  hanya berjalan disisi klien. Saat ini javascript merupakan salah  satu element terpenting dari teknologi web terkini. kamu cewek ya. var tanya = confirm(nama+".1 Menggunakan Javascript Secara sederhana sebuah script javascript diapit oleh tag <script></script>. } else { 13.? atau jangan­jangan.. </script> 16. if (tanya == true) { 11.11..0. "http://www. <script language="javascript"> 8. 12.. var nama = prompt("Masukkan nama: ".w3. jadi secara default pun jika anda hanya menggunakan tag <script></script> maka IE akan  menganggap script tersebut adalah javascript. alert("Halo "+nama+" kamu adalah laki­laki!"). untuk tahu lebih jauh tentang  javascript anda dapat mencari lewat google atau tunggu buku saya berikutnya hehehe. contoh  seperti berikut: <script language=”javascript”>   // javascript kode disini. Buka gedit / Notepad++ 2. 1. <head>  6. </script> Kenapa demikian? Karena jika anda pengguna browser IE maka ia memiliki satu bahasa lagi selain  javascript yaitu vbscript. 9.. Tag <script> dapat anda letakkan pada level global yaitu pada tag <head></head> atau secara lokal  dimana pun dalam tag <body></body>.. Namun pada kenyataannya hampir tidak ada situs yang menggunakan  vbscript. </script> atau <script type=”text/javascript”>   // javascript kode disini.0" encoding="UTF­8" ?>  2.?").. namun untuk lebih  memperjelas penggunaan javascript biasanya ditambahkan attribut language atau type. ia tidak bisa melakukan manipulasi data pada sisi server.org/TR/xhtml1/DTD/xhtml1­transitional.</head>  . apakah anda laki­laki?"). 1.. AJAX adalah salah satu contoh penggunakan  javascript yang saat ini banyak digunakan oleh website Web 2.w3. <title>Menggunakan Javascript</title>  7.. Namun pada buku ini saya hanya membahas javascript sepintas saja.. 10.1..

</html> 3. atau anak cucunya maka anda tidak akan  terlalu berlama­lama  menyesuaikan diri dengan syntax javascript. Gambar 1. Jika anda familiar dengan bahasa seperti Java. string. dan alert adalah fungsi­fungsi built in javascript yang dapat kita  gunakan untuk berinteraksi dengan user.17.13: Javascript prompt Pada contoh diatas kita meletakkan javascript pada level global dengan meletakkannya pada tag  <head></head>. dll. Namun untuk menjaga kompatibilitas  sebaiknya tetap gunakan keyword var. confirm. . Hal itu karena syntax javascript  sangat mirip dengan ketiga bahasa yang telah disebutkan diatas. Simpan dengan nama javascript. C.<body> 18.html 4. Javascript versi terbaru sudah mendukung penggunaan tipe data dalam  pendeklarasian variabel seperti int.</body> 19. C++. prompt. Untuk mendeklarasikan variabel  pada javascript kita dapat menggunakan keyword var. Jalankan pada browser untuk melihat hasilnya.

.

 Hal yang perlu diingat adalah kita akan menggunakan standar XHTML jadi setiap tag pasti  memiliki penutup. bagaimana mengunakan tag­ tagnya.Ringkasan Bab I Pada bab ini kita telah mempelajari dasar­dasar penggunaan HTML. Oleh karena itu untuk pembahasan selanjutnya DOCTYPE yang akan kita pakai  adalah XHTML Transitional. memanipulasi teks dengan CSS dan mendesain layout sederhana menggunakan CSS dan  DIV. .

Sign up to vote on this title
UsefulNot useful