P. 1
Dasar Pemograman Web

Dasar Pemograman Web

|Views: 44|Likes:
Published by SAFREN

More info:

Published by: SAFREN on May 24, 2012
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as PDF, TXT or read online from Scribd
See more
See less

05/24/2012

pdf

text

original

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

4. 2.. ada sebuah proses “dibalik layar”  yang tidak anda ketahui. Tag­tag pada HTML selalu diawali dengan <x>. 3.html.  <div>.1 Cara Kerja WWW Ketika kita mengunjungi sebuah situs katakanlah. 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.  HTML terdiri dari simbol­simbol tertentu yang sering disebut dengan tag. 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 . dan lain­lain. Proses tersebut cukup kompleks namun. Sebuah halaman website  yang valid selalu diapit tag <html></html>. Dibawah ini adalah tabel beberapa tag HTML yang sering digunakan. 5..1: Cara kerja WWW Secara kronologis urutan proses pada diagram diatas adalah: 1.2 HTML HTML/XHTML merupakan format tampilan yang digunakan untuk menampilkan halaman website. dimana x tag HTML seperti <strong>.HTML dan Word Wide Web  1.htm atau  *. jika digambarkan dalam sebuah  diagram sederhana kurang lebih akan seperti berikut: REQUEST Browser User INTERNET RESPONSE Server BAB I Gambar 1. <p>. google.com. File HTML umumnya memiliki akhiran *.</x>.

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

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

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

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

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

Method: Nilai dari attribut menentukan metode data yang dikirimkan ke file pemroses.php” atau absolut URI. Tag form berfungsi hanya sebagai  wrapper yang mengelompokkan data yang akan dikirim. Form HTML diapit oleh tag <form></form>.1 Macam­macam input Untuk menampilkan textbox. dan sebagainya. Contoh lain adalah &lt. Dapat berupa  relatif URI. Tag yang digunakan bersama tag form  adalah tag <input>.php”. </form> Tag form tidak banyak berguna tanpa adanya tag input lain.6 HTML Form HTML Form sering digunakan untuk meminta inputan dari user yang kemudian diproses oleh  server side scripting seperti PHP. Contoh penggunaan tag form sebagai berikut: <form action=”file.”. JSP. 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 .. contoh “http://contoh.  Dua attribut yang paling sering digunakan dalam penggunaan form adalah: – – Action: Nilai dari attribut ini menunjukkan lokasi dari file pemroses dari form. untuk “<”. checkbox. merupakan special character untuk tanda “>”. contoh “folderX/file. 1.&gt. apakah  melalui metode “GET” atau “POST”. Dalam HTML special character  diawali tanda ampersand “&” dan diakhiri “.  &copy.php” method=”POST”> .6. radio button. untuk “©” 1.  Yang membedakan output dari masing­masing tampilan adalah nilai dari attribut type. dan lainnya hanya diperlukan tag <input>.com/file..

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

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

8. </body> 10. <img>. Berikut ini adalah beberapa contoh penulisan yang valid di HTML tapi tidak di XHTML. lalu bagaimana saya memberitahu browser bahwa halaman saya adalah  XHTML? Semua itu terletak pada DOCTYPE halaman anda. dan <input> pada  pembahasan sebelumnya. Pada XHTML semua tag harus memiliki penutup. DOCTYPE adalah pententu tipe  .jpg" align="center"> 9.html Gambar 1.&gt.</html> 5. Anda tentu pernah mengetik tag­tag tanpa penutup seperti <br>.&gt. <img src="join­revolution. Jadi setiap tag harus memiliki  penutup. 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.7 1.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. jika tidak maka  halaman yang anda buat tidak sesuai dengan standar yang telah ditentukan dan dianggap tidak valid/ compliant dengan standar W3C. Simpan dengan nama gambar.

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

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

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

Simpan dengan nama css­class.</body>  35. body { font­family: Verdana.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. border: 1px solid orange.box { 14.. . I'm the WalRUS. 16. <div class="box"> 29. <style type="text/css"> 8.9. div. 22. width: 200px 19.html 4. Hasilnya akan tampak seperti gambar 1.org/TR/xhtml1">  5. padding: 4px 12. <p class="green­force">Class green­force pada tag p</p> 33.</head>  26. color: #c60000.9 1. Serif. Apa yang anda  lihat tersebut adalah hasil dari hyperlink pseudoclass­nya CSS. 17.</html> 3. 15. color: green 23.green­force { 21. 11. }  24.!!<br />GOO GOO G'JOOB!!! 30. <div id="main"> 28.w3. </div> 34. font­size: 11px } 9. <head>  6. #main { 10. </style>     25. border: 1px solid #cccccc. background­color: #FFF8B9. </div> 31. Oleh  . } 13..4. ID</title>  7. font­weight: bold. <html xmlns="http://www.<body>  27. padding: 6px 3px. <span class="green­force">Class green­force pada tag span</span> 32. Seperti yang sudah dibawas sebelumnya untuk membuat link kita menggunakan tag <a></a>. <title>CSS Class &amp. } 20. 18.9 jika anda jalankan pada browser Gambar 1.

<a href="#">Link 3</a> 35. <a href="#">Link 2</a><br /> 34. <head>  6. Format penulisan hyperlink pseudoclass adalah  a:nama_aksi. a:hover { 23. color: green. <style type="text/css"> 8. font­size: 14px } 9. text­decoration: none. </div> 36.  15. a:active { 18. } 13. 25. color: green. 1. font­style: italic. 19.w3. text­decoration: underline  12. "http://www.  11.w3.0 Transitional//EN"  3.</head>  30.karena itu tag iniliah yang akan kita manipulasi.</html> 3. text­decoration: none 27. font­weight: bold. <?xml version="1. 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.dtd">  4. Buka gedit / Notepad++ 2.</body>  37.html 4.<body>  31. <a href="#">Link 1</a><br /> 33. Simpan dengan nama pseudoclass. }       17. Buka browser anda lalu buka file tersebut . }       28. text­decoration: underline  16. <div> 32.org/TR/xhtml1/DTD/xhtml1­transitional.org/TR/xhtml1">  5. <title>Hyperlink Pseudoclass</title>  7. a:visited {  14. font­weight: bold.0" encoding="UTF­8" ?>  2. a:link {  10. } 22. 20. Serif. Ketik kode berikut: 1. color: #c60000. 26. </style> 29. <!DOCTYPE html PUBLIC "­//W3C//DTD XHTML 1. <html xmlns="http://www. color: #c60000 21. body { font­family: Verdana. 24.

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

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

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

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

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

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

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

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

.

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

You're Reading a Free Preview

Download
scribd
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->