Gambar : mekanisme pembangkitan web secara dinamis

(1)

PENGENALAN WEB

World Wide Web (www) atau web didistribusikan melalui pendekatan hypertext, yang memungkinkan suatu teks pendek menjadi acuan untuk membuka dokumen yang lain.

Pada awalnya aplikasi web dibangun hanya dengan menggunakan bahasa yang disebut HTML (HyperText Markup Language) dan protokol yang digunakan dinamakan HTTP. Pada perkembangan berikutnya, sejumlah script dan objek dikembangkan untuk memperluas kemampuan HTML.

Macam Aplikasi Web  Web statis

Dibentuk dengan menggunakan HTML saja. Kekurangan aplikasi seperti ini terletak pada keharusan untuk memelihara program secara terus-menerus untuk mengikuti setiap perubahan yang terjadi.

 Web Dinamis

Perubahan informasi dalam halaman – halaman web dapat ditangani dengan perubahan data, bukan melalui perubahan program. Implementasinya web dikoneksikan dengan database.

Gambar : Arsitektur aplikasi web

Web server : server yang melayani permintaan klien terhadap halaman web. Apache merupakan contoh perangkat lunak web server

Middleware : perangkat lunak yang bekerjasama dengan web server dan berfungsi

(2)

Browser atau web browser : perangkat lunak di sisi klien yang digunakan untuk mengakses informasi web. Internet Explorer, Mozilla merupakan contoh browser.

Mekanisme ketika seseorang pemakai meminta halaman web yang ditulis dengan menggunakan HTML

Gambar : mekanisme kerja permintaan dokumen HTML

Prinsip kerja pengaksesan dokumen Web yang berbasis HTML adalah seperti berikut. 1. Browser meminta sebuah halaman ke suatu situs Web melalui protokol HTTP. 2. Permintaan diterima oleh Web server.

3. Web server segera mengirimkan dokumen HTML yang diminta ke klien.

4. Browser pada klien segera menampilkan dokumen yang diterima berdasarkan kode-kode pemformat yang terdapat pada dokumen HTML.

Mekanisme pembentukan halaman yang bersifat dinamis, yang menggunakan PHP

(3)

(4)

PENGENALAN HTML

HTML merupakan singkatan dari HyperText Markup Language, yaitu bahasa pemrograman untuk membangun aplikasi web. Untuk membangun sebuah web dan mengakses halaman web tersebut diperlukan hal-hal berikut :

 Editor, untuk menuliskan kode-kode HTML (seperti notepad)

 Web Server, sebagai server untuk melayani permintaan klien (seperti Apache, IIS, Xitami)

 Web browser, untuk mengakses halaman web Tag yang ada dalam HTML antara lain

<HTML> …

</HTML>

Bagian yang terdapat dalam tag HTML terdiri dari:

 Kepala  Bagian kepala dalam dokumen HTML ditandai dengan tag berikut :

<HEAD> …

</HEAD>

Bagian kepala ini digunakan untuk membuat judul halaman web dengan menggunakan tag berikut :

<TITLE> …

</TITLE>

 Badan  Bagian badan dalam dokumen HTML ditandai dengan tag berikut :

<BODY> …

</BODY>

Bagian badan akan berisikan content yang akan ditampilkan dalam halaman web.

Contoh :

(5)

</HEAD> <BODY>

MARI BELAJAR HTML…YAKINLAH BAHWA INI MUDAH

</BODY> </HTML>

Simpan kode tersebut dengan ekstensi .html

Hasilnya: ini merupakan title

Ini merupakan body

Aturan dalam menuliskan Tag-tag HTML yaitu :

 Tag ditulis dengan format diawali tanda < dan diakhiri tanda >, seperti <HTML>

 Tidak boleh ada spasi setelah tanda <. Contoh : <TITLE> tidak boleh dituliskan dengan < TITLE>

Jika tetap menggunakan spasi, tidak akan ada peringatan error, tetapi akan ditampilkan sebagai text biasa.

 Tag boleh ditulis dengan huruf kecil, huruf capital, ataupun kombinasi keduanya. (misalnya : <HTml>, <HTML>, <html>)

Atribut : beberapa tag mengandung atribut didalamnya Contoh : < FONT COLOR = ” RED ” >

(6)

PENGGUNAAN KOMENTAR

Adalah bagian kode HTML yang tidak akan ditampilkan pada browser. Sebuah komentar diawali dengan <! - - dan diakhiri dengan - - >

Contoh :

<!-- Berkas: komentar.htm

Materi pengenalan Web dengan HTML --> <HTML>

<HEAD>

<TITLE>Komentar</TITLE> </HEAD>

<BODY>

Selamat Belajar HTML

</BODY> </HTML> Hasilnya:



_{Contoh untuk tag <p>….</p>}

Berguna untuk membuat paragraph, pada prinsipnya, efek tag <p> serupa dengan kalau anda

(7)

<TITLE>contoh tag p</TITLE> </HEAD>

Matahari yg sedang terbit. Usia muda, Masih baru dan membangkitkan semangat Menyinari dunia ini, Dengan sinar merah mudanya yg lembut, Hanya memperhatikan warna-warna yg di kenal. Menari pada air yg tenang

</p> <p>

Aku kembali ke perasaan, Yang tak pernah sesungguhnya kutinggalkan, Hanya seperti matahari yg tetap, Ia terbit lagi, Luasnya lengan-lengan mencakup sebuah hari yg baru. Hanya tempat dimana mimpi itu mungkin Di dalam ingatanku sendiri.

</p> </BODY> </HTML>

Hasilnya:

Karena tag <p>, maka tampilan menjadi seperti paragraf(turun 1 baris)



Contoh untuk tag <br>

Fungsi tag <br> adalah untuk membuat baris baru atau berpindah baris.

(8)

<BODY>

TUHAN itu bijaksna, <br> Dia sangat kreatif <br> memberikan teman bagiku<br> tanpa LABEL HARGA.<br>

karna jika Dia tidak melakukanya<br> aku tidak akan mampu membayar<br> untuk mendapatkan teman SEMAHAL KAMU. </BODY>

</HTML>

Hasilnya:

turun 1 baris karena tag <br> Contoh paragraf dan penggunaan <br />

<html>

<body>

<p>Ini adalah<br />paragraf<br />dengan br</p>

</body>

</html>

(9)



Contoh untuk tag judul

Html menyediakan 6 buah tag yang digunakan untuk mengatur ukuran teks yang dijadikan sebagai judul dalam badan dokumen.tag2 judul ini berupa :

- <h1>……</h1>

<h1>My First Heading</h1> <p>My first paragraph.</p> </body>

<h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> <h4>This is heading 4</h4> <h5>This is heading 5</h5> <h6>This is heading 6</h6> </body>

(10)

Hasilnya:

Catatan: Tag <h1> , <h2>, <h3>, <h4>, <h5>, <h6>, di HTML bisa tidak ditutup

Sebagaimana telah dijelaskan di depan, kebanyakan tag memiliki atribut. Begitu halnya tag judul seperti <H1>. Salah satu atribut yang bisa digunakan adalah ALIGN, yang berfungsi untuk mengatur penempatan teks di dalam baris. Salah satu nilai yang dapat diberikan ke ALIGN adalah center, yang berarti judul ditempatkan ditengah-tengah layar pada baris yang bersangkutan.

Selain center, nilai lain yang dapat diisikan ke ALIGN yaitu LEFT, RIGHT, dan JUSTIFY.

- LEFT merupakan nilai bawaan untuk align, yang mengatur teks rata kiri terhadap halaman

- RIGHT mengatur teks rata kanan terhadap halaman

- JUSTIFY mengatur teks rata kiri dan rata kanan, efeknya terlihat untuk teks yang sangat panjang

(11)



Contoh membuat garis horizontal

Untuk mempercantik tampilan, seringkali pembuat dokumen web menambahkan garis horisontal. Garis ini sebenarnya dapat dibuat dengan mudah, yakni dengan

menyertakan tag <HR>.

Contoh:

<html>

<body>

<p>Mari belajar tag 'hr'</p>

<hr>

<p>ini paragraf pertama</p>

<hr>

<p>ini paragraf kedua</p>

<hr>

<p>ini paragraf ketiga</p>

</body>

</html>

Hasilnya:

Catatan: Tag <hr> di XHTML harus ditulis dengan <hr />

Tag <p> di HTML boleh tidak ditutup

(12)

atribut Keterangan

SIZE Menentukan ketebalan garis

WIDTH Menentukan lebar garis

ALIGN Menentukan peletakan teks dalam baris

NOSHADE Mengatur agar garis tidak disertai bayangan

Contoh 1:

<TITLE>Atribut SIZE pada Tag HR</TITLE> </HEAD>

<BODY>

<H1>KEBUN PESONA</H1> <HR SIZE = "10"> Jl. Solo Km 14<BR> Yogyakarta<BR> Indonesia<BR> </BODY>

(13)

Pemakaian atribut noshade ditunjukkan pada kode berikut:

Hasilnya, garis dalam keadaan diblok

Contoh:

<TITLE>Atribut noshade pada hr</TITLE> </HEAD>

<BODY>

<H1>KEBUN PESONA</H1> <HR SIZE = "10" noshade> Jl. Solo Km 14<BR>

Yogyakarta<BR> Indonesia<BR> </BODY>

(14)

Hasilnya:

Penggunaan atribut WIDTH dapat dilihat pada kode berikut

Contoh 2: <HTML> <HEAD>

<TITLE>Atribut WIDTH dan ALIGN pada Tag HR</TITLE> </HEAD>

<BODY>

(15)

</HTML> Hasilnya:

Perhatikan bahwa lebar garis diatur melalui persentase terhadap garis penuh. Semakin kecil persentasenya maka garis yang dihasilkan semakin kecil.



contoh untuk tag <center>

untuk menengahkan suatu teks, anda juga bisa menggunakan tag <center>, tentu saja untuk mengakhiri teks (yakni agar teks berikutnya tidak ditengahkan), anda perlu menyertakan </center>

(16)

<TITLE>contoh tag center</TITLE> </HEAD>

<BODY>

<center>ini adalah tag center</center> </BODY>

</HTML> Hasilnya:

teks berada ditengah



Menggunakan tag <DIV>

Tag divisi (<DIV>) berfungsi seperti tag paragraf (<P>), berguna untuk mengelompokkan sejumlah baris teks yang memiliki karakteristik yang sama.

Contoh:

<BODY>

(17)

<h2>Jln. Janti No.143</h2> <h2>Yogyakarta</h2>

</div> <hr> </BODY> </HTML>

(18)

Mengenal XHTML

XHTML singkatan dari extensible hypertext markup language

XHTML merupakan generasi berikutnya setelah HTML, tetapi dia menuntut kemampuan lebih tinggi untuk mengoperasikannya.

XHTML terdiri dari tiga bagian utama:

 DOCTYPE declaration  <head> section

 <body> section

Struktur dasar XHTML:

<!DOCTYPE...> <html> <head>

Deklarasi XHTML

Semua dokumen XHTML harus memiliki deklarasi DOCTYPE. Elemen html, head dan body harus ada, dan elemen title harus berada dalam elemen head.

Catatan : deklarasi DOCTYPE bukanlah bagian dari dokumen XHTML itu sendiri. Dia bukanlah elemen XHTML, sehingga tidak harus menggunakan tag penutup.

Halaman Anda harus memiliki deklarasi DOCTYPE jika anda ingin memvalidasi format XHTML yang benar. Yang memvalidasi adalah W3C (World Wide Web Consortium) Struktur XHTML dalam penggunaannya hampir sama dengan HTML, hanya lebih terstruktur dan konsisten. Berikut ini beberapa perbedaan antara HTML dan XHTML :

1. Elemen XHTML harus bersarang dengan sempurna 2. Elemen XHTML harus ditulis dalam huruf kecil 3. Elemen XHTML harus selalu ditutup

4. Dokumen XHTML harus memiliki satu root element

 Elemen XHTML harus bersarang dengan sempurna sedangkan dalam HTML, elemen-elemennya bisa ditulis dalam keadaan bersarang tidak sempurna seperti ini.

(19)

Perhatikan bagaimana nilai yang ada didalam elemen tidak tertutup sesuai urutan. Penulisan yang benar adalah seperti ini:

<b><i>Tulisan ini tebal dan miring</i></b>

 Elemen XHTML harus ditulis dalam huruf kecil. Sudah cukup jelas, karena spesifikasi XHTML yang mengharuskan semua TAG harus ditulis dengan huruf kecil

Contoh penulisan script yang salah:

<BODY>

<P>Ini sebuah paragraf</P> </BODY>

Contoh penulisan script yang benar:

<body>

<p>Ini sebuah paragraf</p> </body>

 Elemen XHTML harus selalu ditutup. Elemen yang tidak kosong harus selalu ditutup dengan tag penutup

<p>Ini paragraf

<p>Paragraf yang lain

<p>Ini paragraf</p>

<p>Paragraf yang lain</p>

 Elemen yang kosong tetap harus ditutup dengan tag penutup atau tag awal harus diakhiri dengan />

<br> <hr>

<br /> <hr />

 Dokumen XHTML harus memiliki satu root element. Semua elemen XHTML harus bersarang di dalam root element yaitu <HTML>. Semua elemen lainnya dapat memiliki sub element dan sub element harus ditulis berpasangan dan bersarang dengan elemen yang merupakan elemen atasannya (parent element).

Struktur standarnya adalah:

<html>

(20)