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
menerjemahkan kode-kode tertentu, menjalankan kode-kode tersebut, dan memungkinkan
berinteraksi dengan basis data, PHP, JSP adalah beberap contoh middleware
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 aplikasi
berbasis Web (Web-based application). Sebagai contoh, sistem informasi akademis berbasis
Web memungkinkan seorang mahasiswa melihat informasi tentang nilai dari matakuliah-matakuliah yang sudah diambilnya dari luar kampus (di mana saja). Selain itu, pada masa
semester baru, mahasiswa dapat memasukkan data KRS (kartu rencana studi) melalui
Internet.
Gambar : mekanisme pembangkitan web secara dinamis
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 :
<HTML>
<HEAD>
<TITLE>HTML pertama</TITLE>
</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 ” >
Nama Tag
Nama atribut
Nilai atribut
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>
Berguna untuk membuat paragraph, pada prinsipnya, efek tag <p> serupa dengan kalau anda
menggunakan dua buah tag <br>
<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.
<HTML>
<HEAD>
<TITLE>contoh tag br</TITLE>
</HEAD>
<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>
<h6>This is heading 6</h6>
</body>
</html>
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
bawah:
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 diblok
Contoh:
<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 = "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>
Contoh:
<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>
<div align="right">
<h1>STMIK AKAKOM</h1>
<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.
<b><i>Tulisan ini tebal dan miring</b></i>
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:
<html>
<head> ... </head>
<body> ... </body>
</html>
