PI at IF-7

LOGO
INTRODUCTION TO
WEB PROGRAMMING
Undang Syaripudin
Objective chapter
1. Memahami dan Mengerti tentang WWW

(Word Wide Web)
2. Memahami dan Mengerti tentang tag-tag

dasar HTML
3. Mampu Membuat halaman web yang

sederhana dengan HTML.
Dasar-dasar Pemrograman Berbasis Web
Beberapa konsep dasar pemrograman berbasis web

(Hariyanto, 2004), yaitu :
1. Komunikasi antara web browser dan web server

berdasarkan protokol HTTP.
2. Dokumen dan semua sumber daya apapun di
jaringan yang dikehendaki diidentifikasi dengan
Universal Resource Locator (URL).
3. Dokumen web ditulis berdasarkan standar HTML.
4. Pemrograman sisi klien (client-side scripting).
5. Pemrograman sisi server (server-side
scripting/programming).
Hypertext Transfer Protocol (HTTP)
 Hypertext Transfer Protocol (HTTP) adalah protokol

level aplikasi untuk sistem informasi hypermedia
tersebar. Protokol ini generik dan stateless yang
dapat dimanfaatkan banyak tugas selain untuk
hypertext. HTTP adalah bahasa komunikasi antara
web browser dan web server, dimana kebanyakan
komunikasi ini di luar perhatian pemakai web
browser.
Universal Resource Locator (URL)
 URL (Universal Resource Locator ) adalah penunjuk ke

sumber daya tertentu di jaringan TCP/IP (internet) yang
mempunyai format sintaks standar sebagai berikut.
Protokol://Servername:PortNumber/Filepath
Contoh :
http://uinsgd.ac.id/index.php
Pemrograman Sisi
(Client-side Dan Server-side Scripting)
Bahasa pemrograman yang untuk mengaplikasikannya tidak
memerlukan web server, atau bahasa pemrograman yang berjalan di
sisi client.
Contoh :
1. HTML
2. JavaScript
3. DLL
Bahasa pemrograman yang untuk mengaplikasikannya
memerlukan web server, atau bahasa pemrograman yang berjalan di
sisi server.
Contoh :
4. ASP, memerlukan web server IIS.
5. PHP, memerlukan web server Apache, xampp.
6. DLL
Model Pemrograman Web
CLIENT WEB
(PC) SERVER
Request (URL)
HTTP Server
Request (URL)
Response (Content)
Web Content
Response (Content)
Browser
World Wide Web (WWW)
 Internet merupakan jaringan global yang
menghubungkan suatu network dengan network
lainya di seluruh dunia.
 TCP/IP menjadi protocol penghubung antara
jaringan-jaringan yang beragam di seluruh dunia
untuk dapat berkomunikasi.
 World Wide Web (WWW) merupakan bagian dari
internet yang paling cepat berkembang dan paling
populer.
8
WWW - continued
 WWW bekerja merdasarkan pada tiga mekanisme
berikut:
 Protocol standard aturan yang di gunakan untuk
berkomunikasi pada computer networking, Hypertext
Transfer Protocol (HTTP) adalah protocol untuk WWW.
 Address WWW memiliki aturan penamaan alamat web
yaitu: URL(Uniform Resource Locator) yang di gunakan
sebagai standard alamat internet.
 HTML digunakan untuk membuat document yang bisa di
akses melalui web.
 http://www.detik.com/index.html
9
Browser dan Editor
 Browser: Browser merupakan software yang di install
di mesin client yang berfungsi untuk
menterjemahkan tag-tag HTML menjadi halaman
web. Browser yang sering di gunakan biasanya
Internet Explorer, Netscape Navigator, Opera, Mozilla
dan masih banyak yang lainya.
 Editor: Program yang di gunakan untuk membuat
document HTML, ada banyak HTML editor yang bisa
anda gunakan diantaranya: Notepad, Notepad++,
Microsoft FrontPage, Macromedia Dreamweaver, dan
lain-lain.
10
HyperText Markup Language (HTML)
HTML  standard bahasa yang digunakan

untuk menampilkan document web.
1. Mengontrol tampilan dari web page dan
contentnya.
2. Mempublikasikan document secara online sehingga
bisa di akses.
3. Membuat online form yang bisa digunakan untuk
menangani pendaftaran, transaksi secara online.
4. Menambahkan object-object seperti image, audio,
video dan juga yang lainnya ke dalam document
HTML.
11
Tag-tag HTML
1. Kalo pada bahasa pemrograman kita
mengenal code, maka pada HTML kita
mengenal yang namanya tag.
2. Contoh tag html adalah <head>, <title>,

<body>, <html>, <img>, dan lain-lain.
3. Tag html tidak bersifat case sensitive 

<body> sama dengan <BODY>
12
Tag-tag HTML - continued
Bentuk umum penulisan tag html adalah:
<ELEMENT ATTRIBUTE = value>
Dimana:
 Element - nama tag
 Attribute - atribut dari tag
 Value - nilai dari atribut.
Contoh:
<BODY BGCOLOR=lavender>
13
Struktur HTML document
Document HTML bisa di bagi mejadi tiga bagian utama:
html, head, dan body.
<html>
<head>
</head>
<body>
</body>
</html>
14
Susunan HTML
<Head>
Kepala <Title>
Judul Homepage
<head> </Title>
</Head>
Homepage
<Body>
Isi…Teks
Tubuh
Isi…Tabel.
<body> Isi…Audio, Video, dll.
</Body>
15
<html>
1. Setiap document HTML harus di awali dan di tutup

dengan tag HTML  <html> …… </html>
2. Tag <html> memberi tahu browser bahwa yang di

dalam kedua tag tersebut adalah document HTML.
16
<head>
 Bagian header dari document HTML diapit oleh tag <head></head>.

 Di dalam bagian ini biasanya dimuat tag <tittle> yang menampilkan judul
dari halaman web.
Contoh:
<head>
<title>Welcome to eepis-its</title>
</head>
17
<body>
 Tag <body> di gunakan untuk menampilkan text, image link

dan semua yang akan di tampilkan pada web page.
<html>
<head>
</head>
<body bgcolor="lavender">
<p>Document HTML yang Pertama</p>
</body>
</html>
18
Elemen dasar – Block Level
 Block level element:

terdapat 6 tingkatan,
yaitu H1 sampai H6.
<body>
<h1>Heading one</h1>
<h2>Heading two</h2>
<h3>Heading three</h3>
<h4>Heading four</h4>
<h5>Heading five</h5>
<h6>Heading six</h6>
</body>
19
Elemen dasar – Paragraph (p)
 Menampilkan teks dalam bentuk paragraf.
<body>
<h3>Salam Kenal</h3>
<p>
Saya dari jurusan telekom PENS ITS.
Siapa ya yang mo kenalan dengan saya.
</p>
<body>
20
Elemen dasar – list item (li)
 Unordered list <ul>: List item tidak berurutan

(bullet)
<body>
<P>Nama-nama buah</P>
<ul>
<li>Mangga</li>
<li>Duren</li>
<li>Sirsak</li>
</ul>
</body>
21
list item (li) - continued
 Ordered list <ol>: List item berurutan.
<body>
<P>Daftar Jurusan PENS ITS</P>
<ol start="1" type=“1">
<li>Telkom</li>
<li>IT</li>
<li>Elka</li>
<li>Elektro Industri</li>
</ol>
</body>
22
list item (li) - continued
 Tipe-tipe pada list item - ordered list

<ol> :
 “A” : A, B, C, …
 ”a” : a, b, c, …
 ”I” : I, II, III, …
 ”i” : i, ii, iii, …
 ”1” : 1, 2, 3, …
23
Elemen dasar – Horizontal Rules <hr>
 Horizontal Rule tag digunakan untuk menggambar garis

horizontal dalam dokumen html.
 Attribut dari <hr> adalah:
 Position: menetukan posisi dari <hr>, dengan nilai : center | right |
left.
 Width: untuk menentukan panjang <hr>. Nilai default 100%.
 Size: untuk menentukan tebal dari <hr> dalam pixel.
 Noshad: Efek bayangan.
 Contoh:
<hr position=“center” width=90% size=3 noshad>
24
Pemformatan Page
 Break : memulai baris baru

tag : <br>
 Font : menentukan format tampilan font
<font color="#9966FF" size="5"> Belajar Web </font>
 Color : attribute dgn 3 kategori warna (RGB)

#RRGGBB, misal #FF0000 adalah
25
Red
Pemformatan Page – Cont. 1
 Alignment : untuk perataan objek (Left,Right,Center,Justify)
<P align="center">Daftar Jurusan PENS ITS</P>
 Format Text :
A. Physical Format B. Logical Format
C. Preformatted Text : menampilkan text spt aslinya.

<pre> HTML sungguh menyenangkan.
Mudah bukan… </pre> 26
Pemformatan Page – Cont. 2
<html>
<head>
</head>
<body>
<B><P align="center">Lab di Jur. Telkom</P></B>
Jurusan Telkom mempunyai 7 lab, diantaranya <br>
<font color="#9966FF" size="3" face="arial">
1. Lab. Multimedia </font> <br>
2. Lab. Microwave <br>
3. Lab. Komunikasi Digital <br>
</body>
</html>
27
Elemen dasar – hyperlink <a>
 Untuk membuat link ke dokumen lain.
Contoh:
<a href=dua.html>Ke halaman dua</a>
<a href=“http://lecturer.if-its.edu/
~undang”> WEB PRIBADI UNDANK</a>
 Untuk membuat link ke bagian tertentu dlm dokumen.
Contoh:
28
<html>
<head>
<title>Penggunaan Tag Link </title>
</head>
<body>
<h1>Belajar Tag Link</h1>
<p>Saya sedang belajar HTML dari
<a href="http://www.duniailkom.com">Duniailkom</a></p>
</body>
</html>
<html>
<head>
<title>Penggunaan Tag Link </title>
</head>
<body>
<h1>Belajar Tag Link</h1>
<p>Halaman HTML pertama saya adalah <a href=
"hello.html">Hello</a></p>
</body>
</html>
Pembuatan Tabel
<html> <tr>
<head> <td> Baris 4, Kolom 1</td>
<title>Penggunaan Tag Tabel</title> <td> Baris 4, Kolom 2</td>
</head> <td> Baris 4, Kolom 3</td>
<body> </tr>
<h1>Belajar Tag Tabel</h1> </table>
<table border="1"> </body>
<tr> </html>
<td>Baris 1, Kolom 1</td>
</tr>
<tr>
<td> Baris 2, Kolom 3</td>
</tr>
<tr>
</tr> 31
LOGO
tag form, input, textarea, select dan option
Pengertian tag <form>

Form biasanya digunakan untuk mengumpulkan
data dari pengunjung web kita. Mulai dari form untuk
login, form kontak, form untuk pendaftaran user,
bahkan untuk mengirimkan data antar halaman web.
Penggunaan form hanya menggunakan HTML saja
tidak akan terlalu berguna. Form biasanya hanya
berupa interface yang disediakan untuk mengumpulkan
data dari user, dan akan diproses dengan bahasa
pemograman web yang lain seperti JavaScript atau
PHP, dan disimpan di dalam tabel MySQL.
tag form
Pengertian tag <form>

 Sebuah form dalam HTML harus berada di dalam tag
form, yang diawali dengan <form> dan diakhiri
dengan </form>. Tag form akan membutuhkan
beberapa atribut untuk dapat berfungsi dengan
seharusnya.
 Atribut pertama adalah action, yang berfungsi untuk
menjelaskan kemana data form akan dikirimkan.
Biasanya nilai dari atribut action ini adalah alamat
dari sebuah halaman HTML/PHP yang digunakan
untuk memproses isi data form.
tag form
 Atribut kedua adalah method, yang berfungsi untuk menjelaskan

bagaimana data isian form akan dikirim oleh web browser. Nilai
dari atribut method ini bisa berupa get atau post.
 Perbedaan method get dan method post. atribut method get
adalah nilai default seandainya atribut method tidak ditulis maka
isian form akan terlihat pada url browser, Method get ini
biasanya digunakan untuk query pencarian. Sedangkan Method
post biasanya digunakan untuk data yang lebih sensitif seperti
yang berisi password, atau registrasi user. Data hasil form tidak
akan terlihat pada browser.
Struktur dasar form akan terlihat sebagai berikut:

<form action="prosesdata.php" method="post"> ...isi form...
</form>
PEMBUATAN TAG FORM DAN INPUT
<html>
<head>
<title>Belajar Membuat Form </title>
</head>
<body>
<form action=" formulir.html" method=“post">
Nama: <input type="text" name="nama" value="Nama Kamu" />
<br />
Password: <input type="password" name="password" />

<br />
</form>
</body>
</html>
TAG INPUT
 <input type=”text” /> atau bisa juga <input /> adalah textbox inputan
biasa yang menerima input berupa text, contohnya digunakan untuk
inputan nama, username, dan inputan yang berupa text pendek. Input
type text ini juga bisa memiliki atribut value yang bisa diisi nilai
tampilan awal dari text
 <input type=”password” /> dalam tampilannya sama dengan type
text, namun teks yang diinput tidak akan terlihat, akan berupa bintang
atau bulatan. Biasanya hanya digunakan untuk inputan yang sensitif
seperti password.
 <input type=”checkbox” /> adalah inputan berupa checkbox yang
dapat diceklist atau di centang oleh user. User dapat memilih atau
tidak memilih checkbox ini. Type checkbox memiliki atribut checked
yang jika ditulis atau diisi dengan nilai checked, akan membuat
chexkbox langsung terpilih pada saat pertama kali halaman
ditampilkan. Contoh inputan checkbox berupa hobi, yang oleh user
dapat dipilih beberapa hobi.
TAG INPUT
 <input type=”radio” /> mirip dengan checkbox, namun user

hanya bisa memilih satu diantara pilihan group radio. Type radio
ini berada dalam suatu grup dan user hanya bisa memilih salah
satunya. Contoh inputan type radio adalah jenis kelamin.
 <input type=”submit” /> akan menampilkan tombol untuk
memproses form. Biasanya diletakkan pada baris terakhir dari
form. Atribut value jika diisi akan membuat text tombol submit
berubah sesuai inputan nilai value.
Membuat tag input
<body>
Jenis Kelamin :
<input type="radio" name="jenis_kelamin" value="laki-laki" checked />
Laki - Laki
<input type="radio" name="jenis_kelamin" value="perempuan" />
Perempuan <br/>
Hobi: <input type="checkbox" name="hobi_baca" /> Membaca Buku
<input type="checkbox" name="hobi_nulis" checked /> Menulis
<input type="checkbox" name="hobi_mancing" /> Memancing
<br/>
</body>
tag <textarea>
 Tag textarea pada dasarnya sama dengan input type

text, namun lebih besar dan dapat berisi banyak
baris. Panjang dan banyak baris untuk text area di
atur melalui atribut rows dan cols, atau melalui CSS.
Contoh penggunaan textarea adalah sebagai berikut:
<textarea rows="5" cols="20"> Text yang diisi

dapat mencapai banyak baris
</textarea>
tag <select> dan option
 Tag select digunakan untuk inputan yang telah

tersedia nilainya, dan user hanya dapat memilih dari
nilai yang ada. Tag select digunakan bersama-sama
dengan tag option untuk membuat box pilihan.
Contoh penggunaan tag select adalah sebagai berikut:

<select> <option>Pilihan 1</option>
<option>Pilihan 2</option>
<option value="pilihan ketiga">Pilihan 3</option> </select>
Membuat tag selection, textarea
<body>
Asal Kota:
<select name="asal_kota" > <option value="Kota Jakarta"> Jakarta</option>
<option>Bandung</option> <option value="Kota Semarang“
selected>Semarang</option> </select> <br />
Komentar Anda:
<textarea name="komentar" rows="5" cols="20"> Silahkan katakan isi hati anda
</textarea> <br />
<input type="submit" value="Proses!" >
<input type="submit" value="Reset!" >
</body>
HASIL AKHIR
LOGO

PI at IF-7

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

PI at IF-7

Diunggah oleh

Hak Cipta:

Format Tersedia

LOGO

1. Memahami dan Mengerti tentang WWW

2. Memahami dan Mengerti tentang tag-tag

3. Mampu Membuat halaman web yang

Beberapa konsep dasar pemrograman berbasis web

1. Komunikasi antara web browser dan web server

 Hypertext Transfer Protocol (HTTP) adalah protokol

 URL (Universal Resource Locator ) adalah penunjuk ke

HTML  standard bahasa yang digunakan

2. Contoh tag html adalah <head>, <title>,

3. Tag html tidak bersifat case sensitive 

1. Setiap document HTML harus di awali dan di tutup

2. Tag <html> memberi tahu browser bahwa yang di

 Bagian header dari document HTML diapit oleh tag <head></head>.

 Tag <body> di gunakan untuk menampilkan text, image link

 Block level element:

 Menampilkan teks dalam bentuk paragraf.

 Unordered list <ul>: List item tidak berurutan

 Ordered list <ol>: List item berurutan.

 Tipe-tipe pada list item - ordered list

 Horizontal Rule tag digunakan untuk menggambar garis

 Break : memulai baris baru

 Color : attribute dgn 3 kategori warna (RGB)

C. Preformatted Text : menampilkan text spt aslinya.

Pengertian tag <form>

Pengertian tag <form>

 Atribut kedua adalah method, yang berfungsi untuk menjelaskan

Struktur dasar form akan terlihat sebagai berikut:

Password: <input type="password" name="password" />

 <input type=”radio” /> mirip dengan checkbox, namun user

 Tag textarea pada dasarnya sama dengan input type

Contoh penggunaan textarea adalah sebagai berikut:

<textarea rows="5" cols="20"> Text yang diisi

 Tag select digunakan untuk inputan yang telah

Contoh penggunaan tag select adalah sebagai berikut:

Anda mungkin juga menyukai