DASAR DASAR - DASAR DASAR
WEB PROGRAMMING
BAB I
HTML dan World Wide Web
1.1 Cara Kerja WWW
Ketika kita mengunjungi sebuah situs katakanlah, google.com, ada sebuah proses “dibalik layar”
yang tidak anda ketahui. Proses tersebut cukup kompleks namun, jika digambarkan dalam sebuah
diagram sederhana kurang lebih akan seperti berikut:
Secara kronologis urutan proses pada diagram diatas adalah:
1. User membuka alamat website pada browser
2. Browser mengirim HTTPRequest
ke server
3. Server merespon HTTPRequest
dari browser
4. Server mengirim HTTPResponse
ke browser
5. Browser menampilkan halaman website kepada user
1.2 HTML
HTML/XHTML merupakan format tampilan yang digunakan untuk menampilkan halaman website.
HTML terdiri dari simbolsimbol
tertentu yang sering disebut dengan tag. Sebuah halaman website
yang valid selalu diapit tag <html></html>. File HTML umumnya memiliki akhiran *.htm atau
*.html.
Tagtag
pada HTML selalu diawali dengan <x>...</x>, dimana x tag HTML seperti <strong>, <p>,
<div>, dan lainlain.
Dibawah ini adalah tabel beberapa tag HTML yang sering digunakan.
Tag HTML Keterangan
1. <html></html> Tag untuk mengapit halaman HTML
2. <head></head> Tag yang berisi informasi umum dari halaman
3. <title></title> Judul Halaman *
4. <body></body> Akan ditampilkan di browser
5. <style></style> Untuk CSS *
6. <strong></strong> Untuk menebalkan teks
7. <div></div> Untuk membuat layer
8. <a></a> Untuk membuat hyperlink
9. <p></p> Untuk membuat paragraf
10. <hn></hn> Untuk membuat header **
11. <span></span> Untuk inline style (manipulasi teks)
Penerapan Teori HTML
1. Buka editor anda (gedit(Linux), Notepad++(Windows), dsb))
2. Ketik kode berikut:
1. <html>
2. <head>
3. <title>Website Pertamaku</title>
4. </head>
5. <body>
6. <h1>Hello F**king World!!</h1>
7. </body>
8. </html>
1.3 Manipulasi Font
Untuk memanipulasi font kita akan menggunakan inline style/CSS (akan dibahas dibagian
berikutnya). Kita tidak akan menggunakan tag <font> karena tag ini sudah “kuno” alias deprecated.
W3C sebagai pengembang HTML sudah tidak menyarankan untuk menggunakan tag font lagi.
Sebagai gantinya digunakan tag <span> dan inline style. Inline style adalah attribut style yang
diberikan pada sebuah tag HTML. Contoh, untuk membuat tampilan teks tebal gunakan cara
berikut:
<span style=”fontweight:
bold”>Aku adalah teks tebal</span>
Output:
Aku adalah teks tebal
Pada contoh diatas kita memberikan attribut style, yang berisi “fontweight:
bold”. Maksudnya
adalah kita akan mengaplikasikan style bold pada teks yang diapit oleh tag <span></span>.
Pemberian style tidak hanya terbatas pada satu bagian saja. anda dapat memberikan beberapa style
sekaligus dengan memberi tanda pemisah berupa “;” untuk setiap style.
<span style=”fontweight:
bold;textdecoration:
underline;fontstyle:
italic”>Aku
adalah teks tebal, bergaris bawah dan miring</span>
Output
Aku adalah teks tebal, bergaris bawah, dan miring
Pada contoh diatas kita menerapkan tiga style pada tag span. Dapat dilihat kalau setiap style
dipisahkan oleh titik koma. Intinya kita dapat memberikan banyak style sekaligus pada suatu tag.
Penerapan Teori Manipulasi Teks
1. Buka gedit/Notepad++
2. Ketik kode HTML berikut ini
1. <html>
2. <head>
3. <title>Manipulasi Teks</title>
4. </head>
5. <body>
6. <h1 style="color:red;textdecoration:
underline">PENGUMUMAN!</h1>
7. <span style="color:#FF0000">
8. Barang siapa yang menemukan dompet saya, akan saya beri
9. <span style="fontweight:
bold;fontstyle:
italic">ISTRI, MOBIL, RUMAH dan
10. Segala SERTIFIKAT TANAH SAYA</span> DIJAMIN!!!.</span>
11.</body>
12.</html>
3. Simpan dengan nama manipulasiteks.
html
4. Buka dengan browser anda
5. Hasilnya akan seperti gambar 1.2
1.4 Hyperlink
Anda tentu sering melngklik gambar atau tulisan yang mengarah ke halaman lain atau website
lainnya. Yang anda klik itu adalah hyperlink atau lebih dikenal dengan istilah link saja. Untuk
membuat link kita dapat menggunakan tag <a></a>. Dua attribut yang paling sering digunakan
pada tag <a> adalah href dan target.
href digunakan untuk menentukan lokasi tujuan dari link. Dapat berupa relatif URL atau absolut
URL.
target digunakan untuk menentukan apakah halaman akan dibuka pada jendela/window baru atau
tidak. Defaultnya adalah self dimana link tidak dibuka pada window baru. Jika ingin membuka pada
window baru gunakan nilai _blank.
Untuk lebih memahami cara kerja link, kita akan membuat dua file yaitu profilku.html dan daftarsitus.
html.
1. Buka gedit/Notepad++
2. Ketik kode berikut:
1. <html>
2. <head>
3. <title>Profil JSL</title>
4. </head>
5. <body>
6. <h2>ProfilKu</h2>
7. <ul>
8. <li><strong>Nama Lengkap:</strong> John Septian Lennon<li>
9. <li><strong>Tempat/Tgl. Lahir: </strong>Lipermboh, 14 September 1940</li>
10. <li><strong>Pekerjaan:</strong> Rocker Jalanan<li>
11. <li><strong>Wafat: </strong> Tewas tertembak oleh penggemar di depan
12. kandang sapi pada 1980</li>
13. </ul>
14. <p>Ingin lihat daftar situs favorit saya? <a href="daftarsitus.
html">
15. klik disini</a>.</p>
16.</body>
17.</html>
3. Simpan dengan nama profilku.html
4. Buat file baru lagi, kemudian ketik kode berikut:
1. <html>
2. <head>
3. <title>Daftar situs favorit JSL</title>
4. </head>
5. <body>
6. <h2>Daftar Situs favoritku</h2>
7. <ol>
8. <li><a target="_blank" href="http://www.google.com/">Om Google</a></li>
9. <li><a target="_blank" href="http://www.milw0rm.com">
10. Cacing Underground</a></li>
11. </ol>
12. <p><a href="profilku.html">Lihat profil lengkap</a></p>
13.</body>
14.</html>
5. Simpan dilokasi yang sama dengan profilku.html dan beri nama daftarsitus.
html
6. Buka file profilku.html dengan browser anda
1.5 Membuat Tabel
Untuk membuat tabel kita dapat menggunakan tag <table></table>. Dalam beberapa tahun terakhir,
penggunaan tabel sebagai layout website sudah tidak relevan lagi, dan digantikan oleh tag DIV. 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 Keterangan
<tr></tr> Digunakan untuk membuat baris baru
<th></th>* Digunakan untuk membuat header tabel
<td></td>* Digunakan untuk membuat kolom
* Tag tersebut selalu berada didalam tag <tr>...</tr>
Seperti halnya tag lain yang digunakan untuk presentasi teks, seperti <span>, anda dapat
menggunakan attribut style untuk memformat tampilan tampilan tabel. Berikut ini adalah contoh
pembuatan tabel menggunakan HTML.
1. Buka teks editor (gedit/Notepad++)
2. Ketik kode berikut:
1. <html>
2. <head>
3. <title>TABEL IPS/IPK</title>
4. </head>
5. <body>
6. <h2>Tabel IP Sampai semester 4:</h2>
7. <table style="width:600px;" border="1">
8. <tr style="backgroundcolor:#
cfcfcf">
9. <th>SEMESTER</th>
10. <th>IPS</th>
11. </tr>
12. <tr>
13. <td>SEMESTER 1</td><td style="textalign:
right">4.0</td>
14. </tr>
15. <tr>
16. <td>SEMESTER 2</td><td style="textalign:
right">4.0</td>
17. </tr>
18. <tr>
19. <td>SEMESTER 3</td><td style="textalign:
right">4.0</td>
20. </tr>
21. <tr>
22. <td>SEMESTER 4</td><td style="textalign:
right">4.0</td>
23. </tr>
24. <tr style="textalign:
right;backgroundcolor:#
FFCB68;fontweight:
bold">
25. <td style="textalign:
center;">NILAI IPK >>></td>
26. <td style="textalign:
inherit;">4.0</td>
27. </tr>
28. </table>
29.</body>
30.</html>
3. Simpan denan nama tabel.html
4. Buka dengan browser anda.
1.6 HTML Form
HTML Form sering digunakan untuk meminta inputan dari user yang kemudian diproses oleh
server side scripting seperti PHP, JSP, dan sebagainya. Form HTML diapit oleh tag <form></form>.
Dua attribut yang paling sering digunakan dalam penggunaan form adalah:
–
Action: Nilai dari attribut ini menunjukkan lokasi dari file pemroses dari form. Dapat berupa
relatif URI, contoh “folderX/file.php” atau absolut URI, contoh “http://contoh.com/file.php”.
–
Method: Nilai dari attribut menentukan metode data yang dikirimkan ke file pemroses, apakah
melalui metode “GET” atau “POST”.
Contoh penggunaan tag form sebagai berikut:
<form action=”file.php” method=”POST”>
...
</form>
Tag form tidak banyak berguna tanpa adanya tag input lain. Tag form berfungsi hanya sebagai
wrapper yang mengelompokkan data yang akan dikirim. Tag yang digunakan bersama tag form
adalah tag <input>.
1.6.1 Macammacam
input
Untuk menampilkan textbox, checkbox, radio button, dan lainnya hanya diperlukan tag <input>.
Yang membedakan output dari masing masing
tampilan adalah nilai dari attribut type.
