Pertemuan 2

PEMROGRAMAN WEB 1
BAGJA NUGRAHA, MKOM
FASILKOM UNSIKA
Internet

 Adalah kumpulan dari berbagai

jaringan komputer yang saling
interkoneksi yang mencakup
seluruh dunia (jaringan global)
dengan melalui jalur telekomunikasi
seperti telepon, fiber-optic, wireless
dan lainnya.
WWW (world widw web)

 Adalah salah satu bentuk

layanan yang dapat diakses
melalui internet.
 Biasa disingkat sebagai Web.
 Merupakan sekumpulan
dokumen, gambar-gambar,
dan bentuk resources yang
lainnya yang dihubungkan
melalui hyperlinks dan URLs.
 Protokol

 Merupakan bahasa/software standar untuk mengatur

komunikasi jaringan komputer
 TCP/IP (Transmission Control Protocol Internet Protocol)
merupakan cara standar untuk mempaketkan dan
menyelamatkan data komputer (sinyal elektronik)
sehingga data tersebut dapat dikirim ke komputer yang
lain.
 HTTP (Hypertext Transfer
Protocol)
 Adalah protokol yang menentukan aturan yang perlu diikuti oleh
web browser dalam meminta dan mengambil suatu dokumen dan
oleh web server dalam menyediakan dokumen yang diminta web
browser. Protokol ini merupakan protokol standar yang digunakan
untuk mengakses dokumen HTML.
 URL (Uniform Resource
Locator)
 digunakan untuk menentukan lokasi informasi pada
suatu web server.
 dapat diibaratkan sebagai suatu alamat, yang terdiri
dari:
 Protokol yang digunakan oleh suatu browser untuk
mengambil informasi
 Nama komputer (server) dimana informasi tersebut
berada
 Jalur/path serta nama file dari suatu informasi
Format umum URL:
 Protokol_transfer://nama_host/path/nama_file

Contoh:
http://www.unsika.ac.id/fasilkom/index.html

Keterangan:
 http  protokol yang digunakan
 www.unsika.ac.id  nama host atau server komputer
 fasilkom  jalur/path dari informasi yang dicari
 index.html  nama file
Protokol Transfer
 adalah protokol yang digunakan untuk pengiriman informasi di
internet.
 Beberapa protokol transfer:
 HTTP  protokol standar untuk suatu dokumen web
 FTP (File Transfer Protocol)  digunakan untuk mentransfer file
dalam format text atau binary dalam suatu server komputer
diinternet.
 Gopher  digunakan untuk mengakses server gopher yang
menyediakan informasi dengan menggunakan suatu sistem
menu atau melalui hubungan telnet.
 News NNTP (Network News Transfer Protocol)  digunakan
untuk mendistribusikan berita di USENet. USENet adalah suatu
sistem yang dirancang sebagai forum diskusi dengan
berdasarkan pada topik-topik yang disebut news-group.
 Telnet  digunakan untuk login ke suatu server komputer.
DNS (Domain Name System)

 Adalah suatu sistem penamaan standar

komputer-komputer di internet dengan tujuan
untuk mempermudah pengelolaan server
komputer internet.
 Merupakan suatu tingkat-tingkat domain, yang
merupakan kelompok komputer-komputer yang
terhubung ke internet.
Homepage
 Website (situs web)  merupakan alamat (URL) yang berfungsi
sebagai tempat penyimpanan data dan informasi dengan
berdasarkan topik tertentu.
 Web Page (halaman web)  merupakan halaman khusus dari
situs web tertentu yang tersimpan dalam bentuk file. Dalam web
page tersimpan berbagai informasi dan link yang
menghubungkan suatu informasi ke informasi lain baik itu dalam
page yang sama ataupun web page lain pada website yang
berbeda.
 Home page  merupakan sarana dasar untuk memperkenalkan
secara singkat tentang apa yang menjadi isi dari keseluruhan
website dari suatu organisasi atau pribadi.
 Server dan Client
Dalam dunia internet selalu terdapat dua sisi yang saling mendukung,
yaitu:
1. Server  penyedia berbagai layanan termasuk web. Layanan web
ditangani oleh sebuah aplikasi bernama web server.
2. Client  bertugas mengakses informasi yang disediakan oleh server.
Pada layanan web, client dapat berupa web browser.
 Web Browser
 Berjalan pada komputer user
 Merupakan tool untuk melakukan navigasi di web
 Menampilkan dokumen web
Contoh-contoh:
 MS Internet Explorer  Windows
 Netscape Navigator/Communicator  Multi
 Opera  Multi
 Conqueror  Linux
 Lynx  Unix
 Web Server
 Berjalan pada komputer server
 Sebagai tempat menyimpan file-file dokumen web
sehingga dapat diakses oleh pengguna internet

Contoh-contoh:
• Apache  Multi
• MS Intenet Information Server (IIS)  Windows
• Tomcat (for Java)  Multi
Web Programming

Web dapat dikategorikan menjadi dua, yaitu

1. web statis
web yang menampilkan informasi-informasi yang
sifatnya statis (tetap)
2. web dinamis atau interaktif.
web yang menampilkan informasi serta dapat
berinteraksi dengan user yang sifatnya dinamis.
Sehingga untuk membuat web dinamis dibutuhkan
kemampuan pemrograman web.
Dua kategori web programming:
 Server Side Programming
 Client Side Programming
Server-side Programming
 Server Side Programming 
web server melakukan parse
dan eksekusi sehingga script
ditampilkan dalam halaman
web
 Contoh: ASP, JSP, PHP
Client-side Programming
 Client Side Programming 
Contoh: JavaScript, HTML,
VBScript
Summary
 Server dan Client adalah dua sisi yang yang saling
mendukung sehingga internet tetap berjalan.
 Untuk pengiriman informasi di internet diperlukan
protokol.
 Sisi server berupa web server (misal Apache dan IIS) ,
sedangkan sisi Client berupa web browser (misal Opera
dan Internet Explorer)
 Dalam web programming, terdapat server-side
programming dan client-side programming. Client-side
programming adalah untuk membuat web yang statis,
sedangkan untuk membuat web yang dinamis (dapat
interaktif dengan user) diperlukan server-side dan client-
side programming.
PENGANTAR HTML
HyperText Markup Language
(HTML)
 HTML  standard bahasa yang digunakan
untuk menampilkan document web.
 Mengontrol tampilan dari web page dan contentnya.
 Mempublikasikan document secara online sehingga
bisa di akses.
 Membuat online form yang bisa di gunakan untuk
menangani pendaftaran, transaksi secara online.
 Menambahkan object-object seperti image, audio,
video dan juga java applet dalam document HTML.
 Versi terakhir saat ini adalah HTML5
 HTML5 diawali dengan <!DOCTYPE HTML>

20
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, Microsoft
FrontPage, Macromedia Dreamweaver, dan lain-lain.

21
File HTML
Pemberian nama file pada Home page

• File extention untuk file html : htm, html

• File : index.html menjadi default dalam web site atau virtual

directory dalam suatu website
Tag-tag HTML

 Kalo pada bahasa pemrograman kita

mengenal code, maka pada HTML kita
mengenal yang namanya tag.
 Contoh tag html adalah <head>, <title>,
<body>, <html>, <img>, dan lain-lain.
 Tag html tidak bersifat case sensitive 
<body> sama dengan <BODY>

23
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>

24
Struktur HTML document
 Document HTML bisa di bagi mejadi tiga bagian utama:
html, head, dan body.

<html>
<head>

</head>

<body>

</body>
</html>
25
Susunan HTML
<Head>
<Title>
Kepala
Judul Homepage
<head> </Title>
</Head>

Homepage
<Body>
Isi…Teks
Tubuh
Isi…Tabel.
<body> Isi…Audio, Video, dll.
</Body>

26
<html>

 Setiap document HTML harus di awali dan di

tutup dengan tag HTML  <html> ……
</html>
 Tag <html> memberi tahu browser bahwa
yang di dalam kedua tag tersebut adalah
document HTML.

27
<head>

 Bagian header dari document HTML di apit oleh tag <head></head>.

 Di dalam bagian ini biasanya dimuat tag <tittle> yang menampilkan judul
dari halaman web.

<head>
<title>Judul </title>
</head>

28
 <body>
 Tag <body> di gunakan untuk menampilkan text, image link
dan semua yang akan di tampilkan pada web page.

<html>
<head>
<title>Welcome to my html </title>
</head>
<body bgcolor="lavender">
<p>Document HTML yang Pertama</p>
</body>
</html>

29
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>

30
Elemen dasar – Paragraph (p)

 Menampilkan teks dalam bentuk paragraf.

<body>
<h3>Salam Kenal</h3>
<p>
Saya dari mahasiswa UNSIKA
Siapa ya yang mo kenalan dengan saya.
</p>
<body>

31
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>
list item (li) - continued

 Ordered list <ol>: List item berurutan.

<body>
<P>Daftar Prodi UNSIKA</P>
<ol start="1" type=“1">
<li>TEKNIK INFORMATIKA</li>
<li>TI</li>
<li>Komunikasi</li>
<li>Teknik INDUSTRI</li>
</ol>
<body>

33
 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, …

34
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>

35
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 Red
36
 Pemformatan Page – Cont. 1
 Alignment : untuk perataan objek (Left,Right,Center,Justify)
<P align="center">Daftar mahasiswa fasilkom</P>
 Format Text :
A. Physical Format B. Logical Format

C. Preformatted Text : menampilkan text spt aslinya.

<pre> HTML sungguh menyenangkan.
Mudah bukan… </pre> 37
 Pemformatan Page – Cont. 2
 Contoh :
 <!DOCTYPE HTML>
<html>
<head>
<title>Welcome to Teknik Informatika UNSIKA</title>
</head>
<body>
<B><P align="center">Prodi di UNSIKA</P></B>
UNSIKA memiliki 10 prodi , 3 diantaranya adalah : <br>
<font color="#9966FF" size="3" face="arial">
1. Teknik Informatika</font> <br>
2. Agroteknologi<br>
3. Ilmu Komunikasi<br>
</body>
</html>

38
Marquee (Scrolling text)
<marquee>This text will scroll from right to left</marquee>

<marquee direction="up">This text will scroll from bottom to

top</marquee>

<marquee direction="down" width="250" height="200"

behavior="alternate" style="border:solid">
<marquee behavior="alternate">
This text will bounce
</marquee>
</marquee>
Terima Kasih