Tki Modul 3 RPL Kb4!1!47

Kegiatan Belajar 4: Pemrograman Web
A. Capaian Pembelajaran Mata Kegiatan

Mahasiswa memahami pemrograman web
B. Sub Capaian Pembelajaran Mata Kegiatan
1. Menjelaskan konsep teknologi aplikasi web

2. Membuat format teks pada halaman web
3. Membuat format tabel pada halaman web
4. Membuat format multimedia pada halaman web
5. Membuat format kaitan (link) pada halaman web
6. Membuat format formulir pada halaman web
7. Membuat style pada halaman web
C. Pokok-pokok materi
1. Konsep teknologi web
2. Format teks pada halaman web
3. Format tabel pada halaman web
4. Format multimedia pada halaman web
5. Format kaitan (link) pada halaman web
6. Format formulir pada halaman web
7. Style pada halaman web
D. Uraian Materi
1. Pengenalan Web
a. Apakah web :
Web (World Wide Web) merupakan salah satu layanan yang didapat oleh
pemakai komputer yang terhubung ke internet, yang dapat memudahkan
pengguna komputer untuk berinteraksi dengan pengguna internet lainnya
dan mencari informasi yang diperlukan.
b. Web browser :
Browser web merupakan software yang digunakan untuk menampilkan informasi
dari server web.
1
2
Contoh dari web browser : Opera, Mozzila, Netscape Navigator, Internet

Explorer, Lynx, Konqueror.
c. Server web :
Server web adalah komputer yang digunakan untuk menyimpan
dokumen-dokumen web, komputer ini akan melayani permintaan dokumen
web dari kliennya.
Contoh dari web server : IIS, PWS, Apache, Xitami.
d. Pemrograman web (HTML):

Dalam pemrograman web, diperlukan suatu file teks yang bernama atau
berekstensi HTML (Hypertext Markup Language).
Ada dua cara untuk membuat sebuah web page:
1. dengan menggunakan editor teks biasa (notepad, editplus)
2. dengan HTML Editor.
Dokumen HTML disusun oleh elemen-elemen seperti : head, body, table,

paragraf dan list.
Untuk menandai berbagai elemen dalam suatu dokumen HTML, kita
menggunakan tag. Tag HTML terdiri atas sebuah kurung sudut kiri (<, lebih
kecil), sebuah nama tag, dan sebuah kurung sudut kanan (>, tanda lebih
besar). Tag umumnya berpasangan, misalkan tag awal <H1> berpasangan
dengan tag akhir </H1>.
3
2. Struktur Html
Elemen yang dibutuhkan untuk membuat suatu dokumen HTML dinyatakan
dengan tag <html>, <head>, dan <body> berikut tag-tag pasangannya. Setiap
dokumen terdiri atas tag head dan body. Elemen head berisi informasi tentang
dokumen tersebut, dan elemen body berisi teks yang sebenarnya yang tersusun
dari link, grafis, paragraf dan elemen lainnya.
Berikut ini adalah pola dasar sebuah dokumen HTML :
<!DOCTYPE html>
<html>
<head>
<title>
Cara Kode - Ini tampil di tabs bar / title bar
</title>
</head>
<body>
Selamat belajar HTML, ini bagian yang tampil dalam browser
</body>
</html>
Pada baris pertama yaitu <!DOCTYPE html> fungsinya untuk memberi tahu
browser bahwa file tesebut adalah file HTML, atau untuk mendeklarasi dari
dokument HTML.
Pada baris nomor 3 terdapat tag pembuka HTML yaitu <html>, dan pada
baris nomor 9 terdapat tag penutup HTML yaitu </html>. Tag ini menjadi wadah
dari semua tag-tag HTML yang akan ditulis, atau ketika kamu akan menulis tag
HTML lain harus berada didalam tag HTML ini.
Pada baris ke 3 terdapat tag header yaitu <head>, dan penutupnya terdapat
pada baris ke 5 yaitu </head>. Tag head menjadi tempat untuk menempatan
informasi-informasi yang ada atau digunakan didalam file html tersebut, misalnya
seperti title, meta, script, dan lain sebagainya.
Pada baris nomor 4 terdapat tag title yaitu <title>Cara Kode – Ini tampil di tab
bar / title bar</title>. Tag title ini akan tampil pada bagian tab bar atau title bar
pada browser, contohnya seperti gambar dibawah ini pada bagian yang ditandai
kotak merah :
4
Pada baris ke 6 terdapat tag body yaitu <body>, dan penutupnya terletak pada
baris ke 8 yaitu </body>. Dalam tag body ini dapat digambarkan sebagai tubuh
dalam HTML, dalam tag body ini akan ditampilkan dalam halaman browser.
Dan pada baris nomor 7 terdapat tulisan “Selamat belajar HTML, ini bagian yang
tampil dalam browser”, ini merupakan tulisan bisa (tanpa tag) dan tampil di
browser sebagai text biasa juga.
Jika diperhatikan dari file latihan HTML tersebut dapat dilihat setiap sepasang tag
yang ada di dalamnya agak menjorok ke kanan, itu bertujuan supaya kode HTML
kita terlihat lebih rapi dan mudah dibaca.
3. Format Teks Halaman Web

a . Mengatur Ukuran Teks atau atribut size
Dalam HTML digunakan untuk mengatur ukuran font/teks, Ring dari ukuran
adalah 1-7 . Nilai 1 adalah ukuran font ukuran terkecil dan terbesar 7 . Dan untuk
html dengan css bisa seperti ini:
<p style=”font-size:20px”>
5
b . Mengatur Jenis Teks/Format teks

Adalah pengaturan jenis font atau teks yang digunakan. Anda dapat memilih
jenis font dengan maksimal 3 jenis font. Untuk melihat jenis font , Anda dapat
menyalin dan paste dari MS.Word , corel , photoshop , adobe dreamweaver dan
lain-lain. contoh:
<font face=”Comic Sans MS“>teks dengan font Comic San MS </font>
c . Mengatur Warna Font/ teks html

Digunakan untuk mengatur warna font, didefinisikan dengan menggunakan nilai
RGB / HEX atau canalso langsung menggunakan nama warna (“red” misalnya) .
Sintak Penulisan atribut seperti ini (font color=”….” ), kita bisa mengisi dengan
nama warna langsung atau dengan code warna dari photoshop, corel,
editplus,dll.
Praktikum 1
❑ Bukalah notepad atau program text editor yang lain.
❑ Ketikkan script berikut :
<HTML>
<HEAD>
<TITLE> World Wide Web</TITLE>
<BODY>
<CENTER><H1>Definisi World Wide Web</H1></CENTER>
<P ALIGN=”LEFT”>
WWW adalah layanan yang paling sering digunakan dan
memiliki perkembangan yang sangat cepat karena dengan
layanan ini kita bisa menerima informasi dalam
berbagai format (multimedia). Untuk mengakses layanan
6
WWW dari sebuah komputer (yang disebut WWW server atau

web server) digunakan program web client yang disebut
web browser atau browser saja. Jenis-jenis browser
yang sering digunakan adalah: Netscape
Navigator/Comunicator, Internet Explorer, NCSA Mosaic,
Arena, Lynx, dan lain-lain.
<P ALIGN=”RIGHT”>
Surfing merupakan istilah umum yang digunakan bila
menjelajahi dunia maya atau web. Tampilan web yang
sangat artistik yang tidak hanya menampilkan teks tapi
juga gambar-gambar yang di tata sedemikian rupa
sehingga selalu membuat betah netter untuk surfing
berjam-jam. Karena itu para netter harus sangat
memperhitungkan rencana web mana saja yang akan
dikunjungi atau batasi informasi yang ingin diakses,
karena bila tidak netter akan tersesat kedalam rimba
informasi yang maha luas.
</BODY>
</HTML>
❑ Simpan (File|Save As), dengan nama web.html, pada kolom Save As Type,
pilihlan All Files(*.*).
❑ Buka web browser anda (internet explorer, chrome atau Mozilla Firefox)
❑ Bukalah dokumen yang anda buat tadi. (File|Open)
❑ Klik browse: arahkan ke file Contoh1.html, klik OK
❑ Lihatlah hasilnya :
7
8
Praktikum 2
Pada praktikum 2 kali ini kita akan belajar menambahkan warna background, dan
pemformatan tampilan teks.
❑ Buka kembali file web.html pada program teks editor anda (notepad).
❑ Ubah perintah berikut <BODY BGCOLOR=”PINK”>
❑ Ubah paragraf pertama menjadi seperti dibawah ini :
<P ALIGN=”LEFT”>
<B>WWW</B> adalah layanan yang paling sering digunakan dan
memiliki perkembangan yang sangat cepat karena dengan
layanan ini kita bisa menerima informasi dalam berbagai
format (multimedia). Untuk mengakses layanan WWW dari
sebuah komputer (yang disebut <U>WWW server atau web
server </U>) digunakan program web client yang disebut
web browser atau browser saja. Jenis-jenis browser yang
sering digunakan adalah: <I>Netscape
Navigator/Comunicator, Internet Explorer, NCSA Mosaic,
Arena, Lynx, dan lain-lain.</I>
❑ Simpan hasil editing anda (File|Save)
❑ Lihat hasil perubahan pada web browser anda.
Praktikum 3
❑ Buatlah sebuah dokumen HTML untuk tulisan berikut ini :
❑ Simpan dengan nama Lulusan_kompetitif.html.
e. Lulusan S-1 yang Kompetitif
Sebuah perenungan untuk anda para mahasiswa

9
SEKITAR 15-20 tahun yang lalu, lulusan Strata 1 (S-1) dapat dipastikan bisa
memperoleh pekerjaan yang enak dengan cepat. Enak di sini maksudnya
mendapatkan jabatan dan gaji yang baik. Namun, sekarang keadaan berubah.
Tidak sedikit lulusan sarjana yang menganggur karena tidak mendapat pekerjaan
dan tidak bisa membuka usaha sendiri. Untuk menutupi kenyataan menganggur,
beberapa penganggur mencoba melucu dengan mengatakan bekerja di
perumtel, kependekan dari penunggu rumah dan telenovela. Menganggurnya
lulusan S-1 tidak saja akibat kondisi di luar, tetapi juga akibat kondisi dari dalam
diri lulusan S-1 itu. Banyak mahasiswa yang tidak menyiapkan diri dan mentalnya
selama kuliah sehingga ketika lulus tidak tahu ke arah mana harus melangkah.
Sesungguhnya apa yang dipikirkan para lulusan SMU ketika memasuki bangku kuliah
dan bidang studi yang dipilihnya? Menjadi tukang insinyur seperti si Doel anak
sekolahan? Lalu, ke mana setelah itu? Apakah di benak mereka terpikirkan 3 K:
Kuliah, kerja, kawin? Lulus kuliah, mencari pekerjaan, kemudian menikah, dan
seterusnya?
Apakah para mahasiswa itu terkungkung dalam situasi dunianya sendiri tanpa melihat
dunia di luarnya seperti adanya pasar global yang dinamis dan menuntut daya
saing sangat kompetitif? Siapkan mereka menyambut pasar bebas ASEAN
(AFTA) tahun 2003? Pedulikah mereka pada pengakuan kualitas kelulusan
mereka oleh negara lain yang sangat penting untuk persaingan global dan pasar
bebas? Pedulikah mereka pada posisi sumber daya manusia (SDM) Indonesia di
antara SDM bangsa lain?
10
3. Pemformatan Teks Dan Karakter Khusus

Pemformatan Teks:
Perintah-perintah yang digunakan:
❑ <FONT FACE=”nama font” SIZE=”ukuran font” COLOR=”warna
font”> ..teks.. </font>
❑ tag-tag pemformatan :
Tag awal Kegunaan
definisikan teks yang ditebalkan.
g> definisikan teks yang besar ukurannya.
> definisikan teks yang ditekankan
definisikan teks yang dimiringkan – Italic
all> definisikan teks yang kecil ukurannya
rong> definisikan teks yang ditebalkan.
b> definisikan teks yang dijadikan subscript.
p> definisikan teks yang dijadikan superscript.
definisikan teks yang digaris bawahi – Underline
definisikan teks yang di coret – strikethrough
❑ Karakter-karakter khusus
Entitas Keterangan
py; yright
g; istered
53; de mark
sp; breaking space
mp; persand
uo; gle quotation mark (left)
quo; gle quotation mark (right)
und; ndsterling
ro; o
n;
11
Praktikum 1
❑ Ketikkan script berikut menggunakan teks editor.
❑ Simpan dengan nama Internet.html
<html>
<head><title> Interconnected Network</title>
</head>
<body bgcolor=”pink”>
<center>
<font face=”arial” size=6 color=red> Interconnected
Network alias Internet</font>
</center>
<hr>
<font face=”helvetica” size=4 color=red>
<p align=”left”>
<I>Interconnected Network</I> - atau yang lebih populer
dengan sebutan Internet - adalah sebuah sistem
komunikasi global yang menghubungkan
komputer-komputer dan jaringan-jaringan komputer di
seluruh dunia. Setiap komputer dan jaringan terhubung
- secara langsung maupun tidak langsung - ke beberapa
jalur utama yang disebut <I> internet backbone </I>
dan dibedakan satu dengan yang lainnya menggunakan
ang biasa disebut dengan alamat
<I>unique name</I> y
IP 32 bit. Contoh: 202.155.4.230 . Komputer dan
jaringan dengan berbagai platform yang mempunyai
perbedaan dan ciri khas masing-masing (Unix, Linux,
Windows, Mac, dll) bertukar informasi dengan sebuah
protokol standar yang dikenal dengan nama TCP/IP
(<I>Transmission Control Protocol/Internet
Protocol</I>). TCP/IP tersusun atas 4 layer (network
access, internet, host-to-host transport, dan
12
application) yang masing-masing memiliki protokolnya

sendiri-sendiri.
</font></p>
<font face=”garamond” size=4 color=blue>
<p align=”right”>
Bila anda mempunyai Komputer minimal prosessor 486,
Windows 95, Modem, dan line telepon, maka anda telah
bisa bergabung dengan ribuan juta komputer lain dari
seluruh dunia dan mengakses harta karun informasi di
internet.
</font>
</p>
<hr>
<center>
<font face=”century” size=3 color=brown>&copy PPG
RISTEKDIKTI <br><b>JAKARTA</b></font>
</center>
</body>
</html>
Praktikum 2
<HTML>
<HEAD>
<TITLE> karakter khusus </TITLE>
</HEAD>
<BODY>
Copyright © <br>
Trademark ™ <br>
Registered ® <br>
Poundsterling £ <br>
13
Yen ¥ <br>

Euro €<br>
</BODY>
</HTML>
❑ Simpan dengan nama karakter_khusus.html

❑ Lihat hasilnya dengan browser.
Praktikum 3
<HTML>
<HEAD>
<TITLE> Formatting Font </TITLE>
</HEAD>
<BODY>
<b>Bold</b>
<BR>
<u>Underline</u>
<BR>
<I>Italic</I>
14
<BR>
<strong>Strong</strong>
<BR>
<em>Emphasis</em>
<BR>
<cite>Citation</cite>
<BR>
<S>strikethrough</s>
<BR>
CO<sup>2</sup>
<BR>
H<sub>2</sub>O
</BODY>
</HTML>
❑ Simpan dengan nama font.html

15
4. Penyisipan Gambar
Perintah-perintah yang digunakan dalam penyisipan gambar :
❑ Perintah dibawah ini digunakan untuk menyisipkan gambar kedalam

dokumen HTML.
width=”ukuran lebar gambar”

<img src=”nama_ image.ext”
align=”posisi/perataan
height=”ukuran tinggi gambar”
>
gambar terhadap teks”
❑ Bila ingin menggunakan gambar sebagai background/latar belakangdokumen

HTML
<body background=”nama_image.ext”>
praktikum 1

<html>
<head>
<title>Wisata Dunia</title>
</head>
<body background="Bgd.gif">
<p align="center"><b><u>Tempat-tempat yang indah didunia
</u></b></p>
<hr>
<p align="left">Inilah tempat-tempat wisata dunia yang
banyak dikunjungi oleh
wisatawan tiap tahunnya:</p>
<p align="left"><img border="0" src=" lawu.jpg"
width="148" height="103">
16
<b>Gunung Lawu</b> : terletak di Propinsi Jawa Timur

Indonesia</p>
<p align="left"><b>Hawaii</b> : Terletak di Benua Amerika
<img border="0" src=" Hawaii.jpg" width="203"
height="134"></p>
</body>
</html>
❑ Simpan dengan nama image_align.html

❑ Lihat hasil melalui browser.
17
Praktikum 2 (Tugas)
Buatlah dokumen HTMl dengan tampilan sebagai berikut :

18
5. Hyperlink
Perintah-perintah yang digunakan :
❑ Membuat link dengan karakter :
<a href=”URL/dokumen.html”>link</a>
❑ Membuat link dengan gambar :
<a href=”URL/dokumen.html”><img src=”nama_gambar”></a>
❑ Membuat nama link pada satu dokumen (anchor) :
<a name=”nama_anchor”></a>
❑ Membuat link pada bagian lain dalam satu dokumen HTML. :
<a href=’#nama_anchor’>nama_link</a>
Praktikum 1
<html>
<head>
<title>Wisata Dunia</title>
</head>
<body background=" Bgd.gif">
<p align="center">
<a name="atas"><b><u>Tempat-tempat yang indah didunia
</u></b></a>
</p>
<hr>
<p align="left">
Inilah tempat-tempat wisata dunia yang banyak dikunjungi
oleh
wisatawan tiap tahunnya.
</p>
<p align="left">Ikuti link pada gambar untuk melihat secara
detail.</p>
<p align="left">
19
<a href=" detail_tempat_wisata.html"><img src="lawu.jpg"

width="136" height="95">
</a>
<b>Gunung Lawu</b> : di Propinsi Jawa Timur
<p>
<p align="left">
<b>Hawaii</b> : Terletak di Benua Amerika
<a href=" detail_tempat_wisata.html"><img src=" Hawaii.jpg"
width="161" height="99"></a>
</p>
<p align="left">
<a href="detail_tempat_wisata.html">
<img src="Colouseum.jpg" width="134" height="89"></a>
<b>Colloseum</b> : ada di Romawi
</p>
<p align="left">
<b>Candi Borobudur</b> : Di Jawa Tengah
<a href=" detail_tempat_wisata.html"><img
src="Borobudur.jpg" width="132" height="92"></a>
</p>
<p align="center"></p>
<p align="center">Tersedia paket perjalanan wisata dengan
harga mulai 100$ US</p>
<p align="center"><a href="mailto:pesan@travel.com">Pesan
sekarang juga</a></p>
<hr>
<a href="#atas">TOP</a>
</body>
</html>
❑ Simpan dengan nama Tempat_wisata.html
❑ Jalankan dari web browser.
20
21
Praktikum 2
❑ Buat script berikut dan simpan dengan nama detail_tempat_wisata.html
<html>
<head>
<title>Detail Tempat Wisata</title>
</head>
<body>
<p align="center">
<b><font size="4">Detail Tempat Wisata</font></b>
</p>
<p>
<u><b>Gunung Lawu</b></u>
</p>
<p>
<img src="lawu.jpg" width="156" height="113" align="left">
Gunung yang indah dan penuh dengan legenda ini terletak di
Propinsi Jawa Timur, dengan
ketinggian sekitar 3265 diatas permukaan laut.
</p>
<p>Harga paket perjalanan wisata : Rp. 500.000 (3H2M)</p>
<p> </p>
<p>
<b><u>Hawaii</u></b>
</p>
<p>
<img src="Hawaii.jpg" width="154" height="98" align="left">
</p>
<p align="left">
Kepulauan hawaai merupakan pulau yang indah dengan
pantai-pantai
yang eksotis. Dengan tarian yang khas, dan keramah-tamahan
penduduknya.
22
</p>
<p align="left">
Harga paket perjalanan wisata : $500.000 (3H2M)</p>
<p> </p>
<p><b><u><a
href="wisata_dunia.html">Kembali</a></u></b></p>
</body>
</html>
Cek semua link yang terdapat pada kedua file HTML diatas
23
6. List
List merupakan bentuk yang umum yang biasa kita gunakan untuk menguraikan daftar
sesuatu.
Jenis-jenis list dalam HMTL :
❑ List dengan nomor (OL : Ordered List)
Nomor item pada ordered list secara default adalah menggunakan angka 1,2,3..,
dst sampai sejumlah item dalam list tersebut. Bila nomor ingin diganti dengan
type yang lain (romawi, abjad huruf besar/kecil), maka kita tinggal mengisi
atribut type pada tag <ol>
Contoh untuk list dengan angka romawi : <ol type=”I”>
❑ List tanpa nomor (UL: Unordered List)
Jenis bullet pada unordered list bisa diganti dengan mengisikan atribut type pada
tag <ul>
Contoh <ul type=”box”> : bila ingin bullet berbentuk kotak.
❑ List definisi
Praktikum 1:
❑ Cobalah script berikut ini :
<HTML>
<HEAD>
<TITLE> Ordered List & Unordered List</TITLE>
</HEAD>
<BODY>
<h4>An ordered List : </h4>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<h4>An unordered List : </h4>
<ul>
<li>Coffee</li>
24
<li>Tea</li>
<li>Milk</li>
</ul>
</BODY>
</HTML>
❑ Simpan dengan nama list.html
❑ Jalankan dengan web browser
Praktikum 2:
❑ Cobalah script berikut ini :
<HTML>
<HEAD>
<TITLE> definition list </TITLE>
</HEAD>
<BODY>
<DL>
<DT>Coffee</DT>
<DD>Black hot drink</DD>
<DT>Ice Cream</DT>
<DD>sweet Cold drink</DD>
</DL>
</BODY>
</HTML>
❑ Simpan dengan nama definition.html

25
7. Tabel
Elemen-elemen tabel :
Elemen Keterangan
le>...</table> definisikan sebuah tebel dalam HTML. Jika atribut border

dituliskan, maka browser akan menampilkan tabel dengan
border.
…</th> definisikan sel header tabel, secara default teks dalam sel ini
ditebalkan dan rata tengah.
…</tr> definisikan sebuah baris tabel dalam tabel. Anda dapat
mendefinisikan atribut untuk seluruh baris :
align(left,center,right) dan/atau valign (top,middle,bottom)
…</td> definisikan sebuah sel data tabel, secara default teks dalam
sel ini akan ditampilkan rata kiri dan ditengah secara vertikal.
Sel data tabel dapat berisi atribut untuk mendefinisikan
karakteristik dari sel dan isinya.
Praktikum 1
❑ Ketikkan script berikut
<HTML>
<HEAD>
<TITLE> Belajar Tabel </TITLE>
</HEAD>
<BODY>
<h4>Daftar Pegawai P3G UNM</h4 >
<TABLE BORDER="1">
<TR ALIGN="CENTER" BGCOLOR="PINK">
<TD>No</TD>
<TD>Nama</TD>
<TD>Alamat</TD>
<TD>Telepon</TD>
26
</TR>
<TR>
<TD>1</TD>
<TD>Agung Saputra Bahar</TD>
<TD>Sungguminasa Gowa</TD>
<TD>081355644111</TD>
</TR>
<TR>
<TD>2</TD>
<TD>Hasyid</TD>
<TD>Daya Makassar</TD>
<TD>08123456798</TD>
</TR>
<TR>
<TD>3</TD>
<TD>Ahmad Zaki</TD>
<TD>Minasa Upa Makassar</TD>
<TD>081342730905</TD>
</TR>
</TABLE>
</BODY>
</HTML>
❑ Simpan dengan nama tabel1.html
27
Praktikum 2
❑ Ketikkan script berikut ini

<html>
<head>
</head>
<body>
<table border="1" cellpadding="0" cellspacing="0"
width="100%">
<caption><b>Daftar Nilai Pemrograman Web 1</b></caption>
<tr>
<th width="33%" rowspan="2" valign="middle">Nama</th>
<th width="67%" colspan="2" >Nilai</th>
</tr>
<tr>
<th width="33%">Tugas</th>
<th width="34%">Praktikum</th>
</tr>
<tr>
<td width="33%">Hasyid </td>
<td width="33%" align="center">80</td>
</tr>
<tr>
<td width="33%">Imran </td>
</tr>
<tr>
<td width="33%">Nasmah </td>
</tr>
</table>
</body>
</html>
❑ Simpan dengan nama tabel2.html

Praktikum 3 (tugas)
❑ Buatlah dokumen HTML dengan tampilan sebagai berikut :

28
Biaya SPP Per semester Perguruan Tinggi Negeri

Tahun ajaran 2017/2018
Lulusan Periode Daftar Biaya
I Rp. 16.500.000
PTN BH II Rp. 17.000.000
III Rp. 17.500.000
I Rp. 16.750.000
PTN BLU II Rp. 17.250.000
III Rp. 17.750.000
I Rp. 7.000.000
PTN Satker II Rp. 7.500.000
III Rp. 8.000.000
29
8. Frame
Sintaks :
<frameset>
<frame src=”url” name=”nama frame”>
</frame>
Praktikum 1
❑ Buat file dengan nama Frame.html
<frameset framespacing="0" border="0" rows="64,*,79"

frameborder="0">
<frame name="top" scrolling="no" noresize
target="contents" src="atas.htm">
<frameset cols="150,*">
<frame name="contents" target="main" src="kiri.htm">
<frame name="main" src="utama.htm" scrolling="no">
</frameset>
<frame name="bottom" scrolling="no" noresize
target="contents" src="bawah.htm">
</frameset>
❑ Buat file dengan nama atas.html

<html>
<head>
</head>
<body>
<p align="center"><b><font size="5">
<marquee width="661" height="19">PPG : Pendididkan Profesi
Guru </marquee>
</font></b></p>
</body>
30
</html>
❑ Buat file dengan nama utama.html

<html>
<head>
<title>SELAMAT DATANG DI SITUS PPG RISTEKDIKTI</title>
</head>
<body>
<p align="center"><b><img border="0"
src="Logo_Kemenristekdikti.png" width="61" height="61"
align="middle"> SELAMAT DATANG DI PENDIDIKAN PROFESI
GURU RISTEKDIKTI</b></p>
<hr>
<p align="left">Sesuai dengan Pengumuman dari Direktorat
Pembelajaran dan Kemahasiswaan Nomor: 919/B2/MI/2017
kami sampaikan informasi bahwa kepada Calon Mahasiswa
Program PPG Prajabaan Bersubsidi Tahun 2017 yang
dinyatakan diterima pada Gelombang II sejumlah 3.661
(tiga ribu enam ratus enam puluh satu), diwajibkan untuk
segera melakukan registrasi online dan lapor diri.</p>
</body>
</html>
❑ Buat file dengan nama kiri.html
<html>
<head>
<title>Program Studi</title>
</head>
<body>
<p>Sejarah Singkat</p>
<p>Program Studi</p>
<p>Fasilitas</p>
<p>Alumni</p>
31
<p>Info Kerja</p>
</body>
</html>
❑ Buat file dengan nama bawah.html

<html>
<head>
<title>untitled</title>
</head>
<body>
<p align="center">© PPG Ristekdikti<br>2018</p>
</body>
</html>
Jalankan file frame.html, pastikan hasilnya seperti gambar berikut :

32
9. Image Map
Metode ImageMap mengharuskan pemrogram web untuk mendefinisikan
daerah-daerah dalam suatu gambar (image) yang mempunyai link. Daerah yang
didefinisikan berupa bentuk daerah dan koordinat pembatasnya. Bentuk daerah
peta dibedakan menjadi :
❑ Point : daerah berupa titik

❑ Rect : daerah berupa kotak/persegi panjang
❑ Poly : daerah berbentuk polygon
❑ Circle : daerah berbentuk lingkaran
Koordinat daerah menggunakan posisi titik (point). Adapun ketentuan pendefinisian

koordinat (0,0) dimulai dari pojok kiri atas gambar, dan maksimum koordinat
adalah pojok kanan bawah gambar (lebar_maks, tinggi_maks).
Sintaks :
<img src=”nama gambar sebagai map” width=”lebar tampilan
gambar” height=”tinggi tampilan gambar”
usemap=”#nama_map” border=0>
<map name=”nama_map”>
<area shape=”jenis map” coords=”koordinat map”
href=”file yang dipanggil”>
</map>
Coordinat dari object relatif terhadap pojok kirai atas image.

Coordinate Value
Rect Left-x, top-y, right-x, bottom-y
Circle CENTER-X, CENTER-Y, RADIUS
Poly X1, Y1, X2, Y2, … XN, YN
33
Contoh:
<html>
<head>
<title>Creating Hotspot</title>
</head>
<body>
<img src="Starry.gif" width="400" height="200"
border="0" usemap="#Map">
<map name="Map">
<area shape="rect"
coords="0,0,200,100"
href="file1.htm"
alt="kotak link">
<area shape="circle"
coords="354,41,36"
href="file2.htm"
alt="lingkaran link">
<area shape="poly"
coords="58,102,97,101,110,134,
119,119,177,195,69,196,
47,162,62,143" href="#">
</map>
</body>
</html>
34
Contoh penggunaan image map:
Script dari image map diatas adalah :

<html>
<head><title>Image Map</title></head>
<body>
<p align="center"><map name="Peta">
<area href="profile.html" shape="rect" coords="114, 4,
228, 118">
<area href="fasilitas.html" shape="rect" coords="115, 119,
229, 234">
<area href="Prodi.html" shape="rect" coords="4, 2, 114,
118">
<area href="alumni" shape="rect" coords="4, 115, 114,
232"></map>
<img border="0" src="Logo_Kemenristekdikti.png"
width="230" height="235" usemap="#peta"></p>
<p align="center"><b>Selamat Datang</b></p>
</body>
</html>
10. Form dan Input

Form merupakan elemen HTML yang digunakan untuk mendapatkan
masukan dari pengguna web. Pengguna web dapat memasukkan input melalui
halaman web.
35
Sintaks :
<form action=” URL “ method=”get/post” enctype=””>
</form>
Jenis masukan dalam suatu form dibedakan menjadi :

❑ Text : digunakan untuk memasukkan suatu nilai untuk dikirimkan ke server.
Nilai bisa berupa angka atau teks.
❑ Text Area : digunakan untuk memasukkan data dalam bentuk teks yang
jumlah karakternya banyak.
❑ Radio : menyediakan beberapa pilihan, hanya satu pilihan yang bisa dipilih.
❑ Check Box : menyediakan beberapa pilihan, bisa lebih dari satu pilihan.
❑ List : pilihan dalam bentuk list., pilihan dapat lebih dari satu.
❑ Button : mendefinisikan tombol untuk melakukan pemrosesan form.
o Submit : untuk memenggil url, setelah selesai penginputan form.
o Reset : untuk menginisialisasi setiap elemen form.
o Button : untuk memebuat form lebih interaktif, untuk memanggil script
(fungsi) yang ada dalam dokumen HTML.
o Image : digunakan sebagai pengganti button, button yang berbentuk
gambar.
Praktikum 1
<html>
<head>
<title>formulir</title>
</head>
<body>
<p><b>Formulir Pendaftaran PPG</b></p>
<form method="POST" action=" " name=”form_kursus”>
<table width="100%">
<tr>
<td>Nama</td>
<td>:</td>
<td><input type="text" name="nama" size="39"></td>
</tr>
<tr>
<td>Jenis Kelamin</td>
36
<td>:</td>
<td><input type="radio" value="L" checked
name="jkl">Laki-laki
<input type="radio" name="jkl"
value="p">Perempuan</td>
</tr>
<tr>
<td>Alamat</td>
<td>:</td>
<td><input type="text" name="alamat" size="39"></td>
</tr>
<tr>
<td>Propinsi</td>
<td>:</td>
<td><select size="1" name="propinsi">
<option>Jawa Barat</option>
<option>Jawa Tengah</option>
<option>Sulawesi Selatan</option>
</select></td>
</tr>
<tr>
<td>Pilihan PPG</td>
<td>:</td>
<td><input type="checkbox" name="kursus"
value="inggris">Bahasa Inggris<br>
<input type="checkbox" name="kursus"
value="komputer">Komputer</td>
</tr>
</table>
<p><input type="submit" value="Submit"
name="Bsubmit"><input type="reset" value="Reset"
name="Breset"></p>
</form>
</body>
</html>
❑ Simpan dengan nama form.html
37
38
Praktikum 2 (validasi data)

❑ Bukalah kembali file form.html.
❑ Tambahkan script berikut pada bagian head :
<script language="VBscript">

</script>
❑ Jalankan dengan browser.
Validasi Data dengan JavaScript:

<html>
<head>
<title>Membuat Validasi</title>
<script LANGUAGE="JAVASCRIPT">
function ValidasiForm()
{
if (document.FormTamu.nama.value=="") {
alert("Kolom nama tidak boleh kosong");
return false;
}
if (document.FormTamu.alamat.value=="") {
alert("Kolom Alamat tidak boleh kosong");
39
return false;
}
if (document.FormTamu.email.value=="") {
alert("Kolom Email tidak boleh kosong");
return false;
}
}
</script>
</head>
<body>
<form onSubmit="return ValidasiForm()" name="FormTamu"
method="post" action="">
<table class="TABLE" width="307" border="0"
cellspacing="0" cellpadding="3">
<tr align="left" bgcolor="#00FF00">
<th colspan="2" scope="col">Form Validasi </th>
</tr>
<tr>
<td width="92">Nama </td>
<td width="246">
<input name="nama" type="text" id="nama" size="25"
maxlength="35"></td>
</tr>
<tr>
<td>Alamat</td>
<td><input name="alamat" type="text" id="alamat"
size="25" maxlength="35"></td>
</tr>
<tr>
<td>Email</td>
<td><input name="email" type="text" id="email"
40
</tr>
<tr>
<td> </td>
<td><input type="submit" name="Submit"
value="Kirim"></td>
</tr>
</table>
</form>
</body>
</html>
❑ Jalankan hasilnya.
41
11. CSS (Cascading Style Sheet)

CSS merupakan sebuah dokumen yang dapat digunakan untuk melakukan
pengaturan pada seluruh komponen web. CSS bisa digunakan dengan berbagai
metode, salah satu diantaranya adalah diletakkan pada bagian Head.
Contoh penggunaan CSS :
<html>
<head><title>Membuat form bentuk cantik</title>
<style type="text/css">

</style></head>
<body>
<form name="form1" method="post" action="">
<table class="TABLE" width="350" border="0"
cellspacing="0" cellpadding="3">
<tr align="left" bgcolor="#00FF00">
<th colspan="2" scope="col">Form Cantik </th>
42
</tr>
<tr>
<td width="81">Nama </td>
<td width="107">
<input name="nama" type="text" id="nama" size="25"
maxlength="35"></td>
</tr>
<tr>
<td>Alamat</td>
<td><input name="alamat" type="text" id="alamat"
</tr>
<tr>
<td>Email</td>
<td><input name="email" type="text" id="email"
</tr>
<tr>
<td>Pesan</td>
<td> <textarea name="pesan" cols="25" rows="4"
id="pesan"></textarea></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" name="Submit"
value="Kirim"></td>
</tr>
</table>
</form>
</body>
</html>
43
12. Mempercantik Halaman Web

Cursor diikuti teks:
<html>
<head>
<title>Animasi Kursor</title>
<script language="JavaScript">

</script>
<STYLE>
.spanstyle {
45
position:absolute;
visibility:visible;
top:-50px;
font-size:8pt;
font-family:verdana;
color:black;
font-weight: bold;
}
a { color:FFFFCC; text-decoration:none }
a:hover { color:FFFF99; text-decoration:underline }
a:visited { color:FFFF99 }
</STYLE>
<script language="JavaScript">

</script>
</head>
<body onLoad="textfollow()">
Gerakan Mouse .....
</body>
</html>
46
Teks Berjalan Pada Status Bar

<html>
<head>
<title>teks jalan</title>
<script language="VBScript">

</script>
</head>
<body OnLoad=TeksJalan>
</body>
</html>
E. Rangkuman
Web (World Wide Web) merupakan salah satu layanan yang didapat oleh
pemakai komputer yang terhubung ke internet, yang dapat memudahkan
pengguna komputer untuk berinteraksi dengan pengguna internet lainnya dan
mencari informasi yang diperlukan. Browser web merupakan software yang
digunakan untuk menampilkan informasi dari server web. Contoh dari web
browser: Chrome, Opera, Mozzila, Netscape Navigator, Internet Explorer, Lynx,
Konqueror. Server web adalah komputer yang digunakan untuk menyimpan
47
dokumen-dokumen web, komputer ini akan melayani permintaan dokumen web

dari kliennya, Contoh dari web server : IIS, PWS, Apache, Xitami.
Dalam pemrograman web, diperlukan suatu file teks yang bernama atau
berekstensi HTML (Hypertext Markup Language). Ada dua cara untuk membuat
sebuah web page: (1) dengan menggunakan editor teks biasa (notepad,
editplus), (2) dengan HTML Editor.

Tki Modul 3 RPL Kb4!1!47

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

Tki Modul 3 RPL Kb4!1!47

Diunggah oleh

Hak Cipta:

Format Tersedia

Kegiatan Belajar 4: Pemrograman Web

A. Capaian Pembelajaran Mata Kegiatan

B. Sub Capaian Pembelajaran Mata Kegiatan

1. Menjelaskan konsep teknologi aplikasi web

Contoh dari web browser : Opera, Mozzila, Netscape Navigator, Internet

d. Pemrograman web (HTML):

Dokumen HTML disusun oleh elemen-elemen seperti : head, body, table,

3. Format Teks Halaman Web

b . Mengatur Jenis Teks/Format teks

<font face=”​Comic Sans MS​“>teks dengan font Comic San MS </font>

c . Mengatur Warna Font/ teks html

WWW dari sebuah komputer (yang disebut WWW server atau

e. Lulusan S-1 yang Kompetitif

Sebuah perenungan untuk anda para mahasiswa

3. Pemformatan Teks Dan Karakter Khusus

application) yang masing-masing memiliki protokolnya

Yen &yen; <br>

❑ Simpan dengan nama karakter_khusus.html

❑ Simpan dengan nama font.html

❑ Perintah dibawah ini digunakan untuk menyisipkan gambar kedalam

​ width=”​ukuran lebar gambar​”

❑ Bila ingin menggunakan gambar sebagai background/latar belakangdokumen

❑ Ketikkan script berikut :

<b>Gunung Lawu</b> : terletak di Propinsi Jawa Timur

❑ Simpan dengan nama image_align.html

Buatlah dokumen HTMl dengan tampilan sebagai berikut :

<a href=" detail_tempat_wisata.html"><img src="lawu.jpg"

❑ Simpan dengan nama definition.html

le>...</table> definisikan sebuah tebel dalam HTML. Jika atribut border

❑ Ketikkan script berikut

❑ Ketikkan script berikut ini

❑ Simpan dengan nama tabel2.html

❑ Buatlah dokumen HTML dengan tampilan sebagai berikut :

Biaya SPP Per semester Perguruan Tinggi Negeri

❑ Buat file dengan nama Frame.html

<frameset framespacing="0" border="0" rows="64,*,79"

❑ Buat file dengan nama atas.html

❑ Buat file dengan nama utama.html

❑ Buat file dengan nama bawah.html

Jalankan file frame.html, pastikan hasilnya seperti gambar berikut :

❑ Point : daerah berupa titik

Koordinat daerah menggunakan posisi titik (point). Adapun ketentuan pendefinisian

Coordinat dari object relatif terhadap pojok kirai atas image.

Contoh penggunaan image map:

Script dari image map diatas adalah :

10. Form dan Input

Jenis masukan dalam suatu form dibedakan menjadi :

Praktikum 2 (validasi data)

Validasi Data dengan JavaScript:

11. CSS (Cascading Style Sheet)

12. Mempercantik Halaman Web

var message="PENDIDIKAN PROFESI GURU"

var xpos=new Array()

var ypos=new Array()

for (i=message.length-1; i>=1; i--) {

Teks Berjalan Pada Status Bar

dokumen-dokumen web, komputer ini akan melayani permintaan dokumen web

Anda mungkin juga menyukai

<font face=”Comic Sans MS“>teks dengan font Comic San MS </font>

Yen ¥ <br>

width=”ukuran lebar gambar”