k e g i a ta n b e l a j a r 4 : p e mr o g r a ma n w e b · 4. format multimedia pada halaman web...

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 :

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

<I>unique name</I> yang biasa disebut dengan alamat

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>


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


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

<img src=” nama_ image.ext” width=” ukuran lebar gambar”

height=” ukuran tinggi gambar” align=” posisi/perataan

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 ❑ Ketikkan script berikut :

<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:[email protected]">Pesan

sekarang juga</a></p>

<hr>

<a href="#atas">TOP</a>

</body>

</html>

❑ Simpan dengan nama Tempat_wisata.html

❑ Jalankan dari web browser.

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

PTN BH

I Rp. 16.500.000

II Rp. 17.000.000

III Rp. 17.500.000

PTN BLU

I Rp. 16.750.000

II Rp. 17.250.000

III Rp. 17.750.000

PTN Satker

I Rp. 7.000.000

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 ❑ Ketikkan script berikut :

<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


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

<!--

var x,y

var step=20

var flag=0

var message="PENDIDIKAN PROFESI GURU"

message=message.split("")

var xpos=new Array()

for (i=0;i<=message.length-1;i++) {

xpos[i]=-50

}

var ypos=new Array()


ypos[i]=-50

}

function handlerMM(e){

x = (document.layers) ? e.pageX : event.clientX

y = (document.layers) ? e.pageY : event.clientY

flag=1

}

function textfollow() {

if (flag==1 && document.all) {

44

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

xpos[i]=xpos[i-1]+step

ypos[i]=ypos[i-1]

}

xpos[0]=x+step

ypos[0]=y

for (i=0; i<message.length-1; i++) {

var thisspan =

eval("document.all.span"+(i)+".style")

thisspan.posLeft=xpos[i]

thisspan.posTop=ypos[i]

}

}

if (flag==1 && document.layers) {

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

xpos[i]=xpos[i-1]+step

ypos[i]=ypos[i-1]

}

xpos[0]=x+step

ypos[0]=y

for (i=0; i<message.length-1; i++) {

var thisspan = eval("document.span"+i)

thisspan.left=xpos[i]

thisspan.top=ypos[i]

}

}

var timer=setTimeout("textfollow()",10)

}

file://-->

</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.

k e g i a ta n b e l a j a r 4 : p e mr o g r a ma n w e b · 4. format multimedia pada halaman web...

Documents