Dasar
Pemrograman Web
1.1 Cara Kerja WWW
Ketika kita mengunjungi sebuah situs katakanlah, google.com, ada sebuah proses “dibalik layar”
yang tidak anda ketahui.
Secara kronologis urutan proses 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.
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>
3.
Simpan pada dengan nama helloworld.html
4.
Buka browser anda(Firefox, IE, dsb) dan buka file yang baru saja anda buat.
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 daftar
situs.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, dan coba klik link yang ada untuk memahami
cara kerjanya
