PEMROGRAMAN BERBASIS WEB

PENGANTAR PEMROGRAMAN
BERBASIS WEB DAN HTML
M. ADNAN NUR, S.KOM., MT.
KONSEP WEB
 Word Wide Web (WWW) atau yang biasa disingkat dengan Web
merupakan suatu ruang informasi yang direpresentasikan dalam
bentuk hypertext dan saling terkoneksi satu dengan lainnya
(hyperlink) kemudian diidentifikasi oleh pengenal global yang
disebut Uniform Resource Identifier (URI)
 Bentuk URI yang paling umum adalah Uniform Resource Locator
(URL), yang sering disebut secara informal sebagai alamat web
 WWW berjalan dengan protokol Hypertext Transfer Protokol
(HTTP)
 Halaman web merupakan file teks yang berisi sintaks Hypertext
Markup Language (HTML) dan dapat diterjemahkan oleh web
browser
KONSEP PEMPROGRAMAN BERBASIS WEB

 Aplikasi berbasis web merupakan aplikasi yang berarsitektur

client server dimana pada sisi client menggunakan browser dan
sisi server umumnya menggunakan web server
 Menggunakan protokol HTTP untuk saling berkomunikasi antara
client dan server
 Pemprograman berbasis web terdiri atas pemprograman pada
sisi client (client side scripting) dan pemprograman sisi server
(server side scripting)
Arsitektur Web
HTTP Request
Web Web Halaman
Browser TCP / IP Server
Web

HTTP Response

 User memasukkan URL pada browser

 Browser menghubungi server sesuai URL
 Setelah terhubung, browser mengirimkan HTTP Request
 Server menjawab dengan mengembalikan HTTP Response (berisi
header dan halaman web)
 Browser merepresentasikan isi halaman web kepada user
Client Side Scripting

 Script yang pengolahannya dilakukan pada sisi client.

pengolahan disini berarti “interpretasikan” oleh web browser
 Semua script yang masuk kategori ini dapat diterjemahkan oleh
web browser
 Didalam web browser terdapat sebuah “engine” berupa daftar
pustaka (library) yang mampu mengenali semua perintah-
perintah yang terdapat pada kategori client side scripting
 Bahasa yang dikenali oleh browser client diantaranya HTML,
Extensible Markup Language (XML) dan Cascading Style Sheet
(CSS)
 Contoh client side scripting: vbscript, javascript dan java applet
Server Side Scripting

 Server Side Scripting merupakan sebuah teknologi scripting

atau pemrograman web dimana script (program) dikompilasi
atau diterjemahkan di server dan hasilnya dalam bentuk html
yang dikirim ke client.
 Dengan server side scripting, memungkinkan untuk
menghasilkan halaman web yang dinamis.
Contoh PHP,ASP, JSP dll
Ilustrasi Server Side & Client Side Scripting
Web Server

Web Server merupakan sebuah perangkat lunak dalam server

yang berfungsi menerima permintaan (request) berupa halaman
web melalui HTTP atau HTTPS dari klien yang dikenal dengan
browser web dan mengirimkan kembali (response) hasilnya
dalam bentuk halaman-halaman web yang umumnya berbentuk
dokumen HTML.
Beberapa Web Server :
 Apache Web Server
 Internet Information Service, IIS
 Xitami Web Server
 Sun Java System Web Server
Hypertext Markup Language (HTML)

 HTML merupakan bahasa markup paling populer selain

Extensible Markup Language (XML) dan Wireless Markup
Language (WML). Bahasa Markup bukan bahasa pemrograman
sehingga kurang tepat jika HTML disebut sebagai pemrograman
HTML
 Istilah Dalam HTML:
o Tag, digunakan untuk menentukan tampilan web browser. Dinyatakan
dengan tanda ‘<>’. Tag Kontainer <nama_tag>…</nama_tag>
o Elemen HTML, merupakan jenis-jenis tag. HTML memiliki beberapa
elemen untuk berbagai keperluan tampilan
o Attribut, ditempatkan pada elemen yang berfungsi untuk memberikan
nilai pada elemen. Satu elemen biasanya mempunyai banyak attibut
Struktur Dasar HTML
 Setiap halaman HTML setidaknya memiliki struktur dasar yang terdiri dari
Tag DTD atau DOCTYPE, tag html, tag head, dan tag body.
 Inilah yang merupakan struktur paling dasar dari HTML, walaupun HTML
tidak hanya berisi struktur tersebut
 Perintah HTML dapat dibuat pada editor seperti notepad, sublime text dan
editor lainnya serta disimpan dengan format *.html atau *.htm.
Setelah disimpan, buka file HTML tersebut pada browser.
Contoh : index.html
Struktur Dasar HTML
Jenis-jenis DOCTYPE :
 HTML 5
<!DOCTYPE html>
 HTML 4.01 Strict, berisi semua elemen HTML dan atributnya, tapi tidak termasuk
presentasional (seperti font) dan framesets tidak diperbolehkan
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
 HTML 4.01 Transitional, berisi semua elemen HTML dan atributnya, termasuk presentasional
dan elemen lama (seperti font) serta framesets tidak diperbolehkan.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
 HTML 4.01 Frameset, sama dengan HTML 4.01 Transitional, tapi memungkinkan penggunaan
Frameset.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
Struktur Dasar HTML
 XHTML 1.0 Strict, berisi semua elemen HTML dan atributnya, tapi tidak termasuk presentasional
(seperti font), framesets tidak diperbolehkan serta markup juga harus ditulis sebagai well-formed
XML (tag harus memiliki pembuka dan penutup serta terstruktur dengan baik)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 XHTML 1.0 Transitional, berisi semua elemen HTML dan atributnya, termasuk presentasional dan
elemen lama (seperti font), framesets tidak diperbolehkan dan markup juga harus ditulis sebagai
well-formed XML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 XHTML 1.0 Frameset, sama dengan XHTML 1.0 Transitional namun memungkinkan penggunaan
Frameset.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
 XHTML 1.1, sama dengan XHTML 1.0 Strict, tetapi memungkinkan dalam menambahkan modul
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Struktur Dasar HTML
 Tag <HTML>, merupakan tag pembuka dari keseluruhan halaman web.
Semua elemen HTML akan berada dalam tag ini. Tag HTML dimulai dengan
<HTML> dan diakhiri dengan </HTML>
 Tag <head>, berisi berbagai deskripsi halaman web seperti judul halaman,
perintah CSS, perintah Javascript serta perintah lainnya yang tidak tampil
dibrowser. Tag head diawali dengan<head> dan diakhiri </head>
 Tag <body>, berisi semua elemen html yang akan tampil pada jendela
browser seperti paragraf, tabel, gambar, tautan dan elemen lainnya. Tag
body diawali dengan <body> dan diakhiri </body>
Elemen HTML Dalam Tag <Head>
 Tag <TITLE>, digunakan untuk memberi judul halaman web.
Penulisannya : <TITLE> Judul Halaman Web </TITLE>
 Tag <LINK>, digunakan untuk menunjukkan relasi antar dokumen lainnya.
Tag ini mempunyai beberapa atribut :
 HREF : Menunjuk pada URL dokumen lain
 REL : Mendefinisikan relasi terhadap dokumen lain
 TYPE : Menentukan tipe dan parameter dari relasi
Contoh : <LINK Rel=“Stylesheet” Href=“Style.css” Type=“Text/css”/>
 Tag <META>, digunakan untuk mendefinisikan informasi-informasi di luar HTML. Meta dapat
digunakan oleh browser untuk menjalankan suatu aktivitas yang belum didukung oleh HTML.
Tag ini mempunyai beberapa atribut :
o HTTP-EQUIV : Mendefinisikan properti dari elemen
o NAME : Menyediakan deskripsi tambahan dari elemen
o URL : Mendefinisikan target dokumen dari sebuah properti
o CONTENT : Menyediakan nilai respon dari properti
Contoh : <META HTTP-EQUIV=”refresh” CONTENT=”60”>
Contoh ini digunakan untuk merefresh halaman web setiap 60 detik
Contoh
Ketikkan perintah HTML berikut pada editor dan simpan dengan nama ‘contoh1.html ‘.
Jika sudah, buka file tersebut pada browser.

Hasil :
Attribut Pada Tag <Body>
Tag Body memiliki attribut antara lain :
 ALINK : Menentukan warna link aktif
 BACKGROUND : Merujuk URL atau direktori dari file gambar yang digunakan
sebagai latar belakang
 BGCOLOR : Menentukan warna latar belakang
 LEFTMARGIN : Batas kiri dokumen
 LINK : Menentukan warna link yang belum dikunjungi
 TEXT : Menentukan warna teks
 TOPMARGIN : Menentukan batas atas
 VLINK : Menentukan warna link yang telah dikunjungi
Contoh

Hasil :
MEMFORMAT TEXT PADA TAG BODY
 <BR>, untuk membuat baris baru (break)
 <P>…</P>, Membuat Paragraf
 <HR>, Membuat garis batas horizontal
Attribut:
o ALIGN : Merupakan posisi vertikal garis pemisah. Nilainya adalah LEFT, RIGHT,atau
CENTER
o WIDTH : Lebar dari garis batas. Nilai yang dimasukkan dapat berupa pixel ataupun
persen dari lebar jendela browser
o SIZE : Menentukan tebal garis batas
o NOSHADE : Menonaktifkan efek tiga dimensi
o COLOR Menentukan warna garis batas
 <Hn></Hn>, ‘n’ berkisaran 1 – 6 untuk membuat Heading. <H1> dengan ukuran paling besar
dan <H6> paling kecil
 <CENTER></CENTER>, Teks Rata Tengah
 <!-- Komentar -->, untuk pemberian komentar yang tidak dieksekusi oleh browser
 <PRE>..</PRE>, membuat tampilan dokumen HTML pada browser sama dengan tampilan
pada teks editor.
Contoh

Hasil :
Contoh Hasil :
MEMFORMAT TEXT PADA TAG BODY
PHYSICAL FORMAT
 <B></B>, untuk menampilkan huruf tebal.
 <I></I>, untuk menampilkan huruf miring.
 <U></U>, untuk menampilkan garis bawah pada teks.
 <TT></TT>, untuk menampilkan huruf seperti huruf mesin ketik.
 <STRIKE></STRIKE>, untuk menampilkan garis horizontal pada bagian
tengah huruf.
 <BIG></BIG>, untuk menampilkan ukuran huruf yang lebih besar.
 <SMALL></SMALL>, untuk menampilkan ukuran huruf yang lebih kecil.
 <SUB></SUB>, untuk menampilkan subscript.
 <SUP></SUP>, untuk menampilkan superscript.
 <BLOCKQUOTE></BLOCKQUOTE>, Digunakan untuk menandai bagian yang
dikhususkan pada sebuah dokumen, misalnya kutipan kitab suci, kata
mutiara dll. Teks yang diberi ini akan menjorok ke dalam
Contoh

Hasil :
Contoh

Hasil :
MEMFORMAT TEXT PADA TAG BODY
 <FONT></FONT>, Digunakan untuk mengatur jenis, ukuran dan warna Huruf.
Attributnya antara lain :
o FACE : untuk menentukan jenis huruf
o SIZE : untuk menentukan ukuran huruf
o COLOR : untuk menentukan warna huruf
Contoh

Hasil :
LANJUT KE MATERI BERIKUTNYA