Gambar : mekanisme pembangkitan web secara dinamis
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.
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 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 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
Terdapat pemrosesan di server untuk menterjemahkan kode PHP menjadi kode HTML. Kode
HTML yang diterjemahkan oleh mesin PHP-lah yang akan diterima oleh pemakai (klien). Dengan menggunakan pendekatan Web dinamis, dimungkinkan untuk membentuk aplikasiberbasis Web (Web-based application). Sebagai contoh, sistem informasi akademis berbasis
Web memungkinkan seorang mahasiswa melihat informasi tentang nilai dari matakuliah-Gambar : mekanisme pembangkitan web secara dinamis
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 :
<HTML>
</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 ” >
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> <!-- Ini juga merupakan komentar, apakah akan ditampilkan ? --> Selamat Belajar HTML </BODY> </HTML>
Hasilnya: Contoh untuk tag <p>….</p>
<HTML> <HEAD> <TITLE>contoh tag p</TITLE> </HEAD> <BODY> <p> 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.
<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> Hasilnya:
- 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>
- <h2>……</h2>
- <h3>……</h3>
- <h4>……</h4>
- <h5>……</h5>
- <h6>……</h6>
- Contoh: <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p>
</body> </html> Hasilnya: Contoh 2: <html> <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>
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 Contoh:
- 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 Sebagai tambahan, beberapa browser mengenali atribut-atribut yang tertera pada tabel di
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:
<HTML> <HEAD> <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> </HTML>
Hasilnya:
Pemakaian atribut noshade ditunjukkan pada kode berikut:
Hasilnya, garis dalam keadaan diblokContoh:
<HTML> <HEAD> <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> </HTML>
Hasilnya:
Penggunaan atribut WIDTH dapat dilihat pada kode berikut Contoh 2:
<HTML> <HEAD> <TITLE>Atribut WIDTH dan ALIGN pada Tag HR</TITLE> </HEAD> <BODY> <HR ALIGN = "CENTER" WIDTH = "5%" SIZE = "10" NOSHADE> <HR ALIGN = "CENTER" WIDTH = "10%" SIZE = "10" NOSHADE> <HR ALIGN = "CENTER" WIDTH = "20%" SIZE = "10" NOSHADE> <HR ALIGN = "CENTER" WIDTH = "35%" SIZE = "10" NOSHADE> <HR ALIGN = "CENTER" WIDTH = "20%" SIZE = "10" NOSHADE> <HR ALIGN = "CENTER" WIDTH = "10%" SIZE = "10" NOSHADE> <HR ALIGN = "CENTER" WIDTH = "4%" SIZE = "10" NOSHADE> <HR ALIGN = "CENTER" WIDTH = "4%" SIZE = "10" NOSHADE>
<HR ALIGN = "CENTER" WIDTH = "4%" SIZE = "10" NOSHADE> <HR ALIGN = "CENTER" WIDTH = "6%" SIZE = "10" NOSHADE> <HR ALIGN = "CENTER" WIDTH = "12%" SIZE = "10" NOSHADE> </BODY> </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>
<HTML> <HEAD> <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:
<HTML> <HEAD> <TITLE>tag div</TITLE> </HEAD> <BODY>
<h2>Jln. Janti No.143</h2> <h2>Yogyakarta</h2> </div> <hr> </BODY> </HTML>
Hasilnya:
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> <title>... </title> </head> <body> ... </body> </html>
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.
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 Contoh penulisan script yang salah:
<p>Ini paragraf <p>Paragraf yang lain
Contoh penulisan script yang benar:
<p>Ini paragraf</p> <p>Paragraf yang lain</p>
- Elemen yang kosong tetap harus ditutup dengan tag penutup atau tag awal harus diakhiri dengan /> Contoh penulisan script yang salah:
<br> <hr>
Contoh penulisan script yang benar:
<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: