LAPORAN AKHIR PRAKTIKUM

MATA PRAKTIKUM : PEMROGRAMAN WEB

MATERI PRAKTIKUM : DASAR HTML & CSS

PRAKTIKUM KE : 1

TANGGAL : 15 SEPTEMBER 2008

NAMA : NIDYA PERMATA SARI

NPM : 50405517

KELAS : 4IA15

KETUA ASISTEN :

NAMA ASISTEN :

PARAF :

JUMLAH LEMBAR : 22 LEMBAR

LABORATORIUM INFORMATIKA
UNIVERSITAS GUNADARMA
2008
 Listing Program

Filename : index.htm

1
Filename : style.css

2
3
4
 Pembahasan Materi Praktikum Ke-1

Pada praktikum ke-1 PEMROGRAMAN WEB, materi yang di bahas adalah

sejarah internet dan penjelasan mengenai HTML. Pertama saya akan menjelaskan
mengenai sejarah internet, sebagai berikut :
Pada awalnya Internet merupakan jaringan komputer yang dibentuk oleh
Departemen Pertahanan Amerika Serikat di tahun 1969, melalui proyek ARPA
yang disebut ARPANET (Advanced Research Project Agency Network), di mana
mereka mendemonstrasikan bagaimana dengan hardware dan software komputer
yang berbasis UNIX, kita bisa melakukan komunikasi dalam jarak yang tidak
terhingga melalui saluran telepon. Proyek ARPANET merancang bentuk
jaringan, kehandalan, seberapa besar informasi dapat dipindahkan, dan akhirnya
semua standar yang mereka tentukan menjadi cikal bakal pembangunan protokol
baru yang sekarang dikenal sebagai TCP/IP (Transmission Control Protocol /
Internet Protocol). Tujuan awal dibangunnya proyek itu adalah untuk keperluan
militer. Pada saat itu Departemen Pertahanan Amerika Serikat US Department of
Defense) membuat sistem jaringan komputer yang tersebar dengan
menghubungkan komputer di daerah-daerah vital untuk mengatasi masalah bila
terjadi serangan nuklir dan untuk menghindari terjadinya informasi terpusat,
yang apabila terjadi perang dapat mudah dihancurkan. Pada mulanya ARPANET
hanya menghubungkan 3 situs saja yaitu Stanford Research Institute, University
of California, Santa Barbara, University of Utah, di mana mereka membentuk
satu jaringan terpadu di tahun 1969, dan secara umum ARPANET diperkenalkan
pada bulan Oktober 1972. Tidak lama kemudian proyek ini berkembang pesat di
seluruh daerah, dan semua universitas di negara tersebut ingin bergabung,
sehingga membuat ARPANET kesulitan untuk mengaturnya. Oleh sebab itu
ARPANET dipecah manjadi dua, yaitu "MILNET" untuk keperluan militer dan
"ARPANET" baru yang lebih kecil untuk keperluan non-militer seperti,
universitas-universitas. Gabungan kedua jaringan akhirnya dikenal dengan nama
DARPA Internet, yang kemudian disederhanakan menjadi Internet.

5
Kemudian penjelasan mengenai HTML :

HyperText Markup Language (HTML) adalah sebuah bahasa markup

yang digunakan untuk membuat sebuah halaman web dan menampilkan
berbagai informasi di dalam sebuah browser Internet. Bermula dari sebuah
bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan
percetakan yang disebut dengan SGML (Standard Generalized Markup
Language), HTML adalah sebuah standar yang digunakan secara luas
untuk menampilkan halaman web. HTML saat ini merupakan standar
Internet yang didefinisikan dan dikendalikan penggunaannya oleh World
Wide Web Consortium (W3C). Versi terakhir dari HTML adalah HTML
4.01, meskipun saat ini telah berkembang XHTML yang merupakan
pengembangan dari HTML.

Untuk laporan akhir praktikum pertama adalah membuat layout/design(tampilan)

Guestbook Application menggunakan Scripting HTML untuk interface dan
CSS(Cascading Stylesheet) untuk mempercantik output program yang akan ditampilkan
di web browser.

Spesifikasi system operasi dan tools/text editor yang digunakan adalah sebagai berikut :
1. Linux, sebagai sistem operasi dengan distro Mandriva 2008.1 Spring
2. Windows, sebagai sistem operasi dengan versi XP SP3 Leopard.
3. Eclipse PDT, phpDesigner2008, Bluefish sebagai text editor HTML.
4. Style Master, sebagai text editor CSS.
5. Mozilla Firefox versi 3.0, sebagai web browser.
6. Internet Explorer versi 8 beta sebagai web browser.

6
 Logika Program

Laporan akhir praktikum kali ini adalah membuat aplikasi form sederhana, berikut ini
adalah source code bentuk umum scripting HTML :

Penjelasan baris 1 :
Dalam HTML sudah didefinisikan tiga macam DTD (Document Type Definition), yaitu :

* HTML 4.01 Strict DTD : Semua tag dan atribut yang tidak disarankan untuk tidak
dipakai lagi, dan semua tag yang tidak ada dalam DTD Frameset.

Contoh DTD untuk HTML 4.01 Strict adalah sebagai berikut :

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01

Strict//EN””http://www.w3.org/TR/html4/strict.dtd”>

* HTML 4.01 Transitional DTD : Semua tag sesuai spesifikasi HTML 4.01,
termasuk tag-tag yang sebaliknya tidak dipakai lagi.

Contoh DTD untuk HTML 4.01 Transitional adalah sebagai berikut :

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01

Transitional//EN””http://www.w3.org/TR/html4/loose.dtd”>

* HTML Frameset DTD 4.01 DTD : DTD ini sama dengan DTD Transitional
ditambah frame (jadi, ini adalah DTD paling umum).

Contoh DTD untuk HTML 4.01 Frameset adalah sebagai berikut :

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01

Frameset//EN””http://www.w3.org/TR/html4/frameset.dtd”>

7
XHTML

XHTML adalah formulasi bahasa HTML sebagai aplikasi XML sehingga bahasa
representasi web ini menjadi konsisten dengan aturan-aturan tulisan XML. XHTML yang
terakhir adalah XHTML 1.0. Pada dasarnya HTML dengan XHTML hampir mempunyai
kemiripan, hanya pada penulisan tag dan DTD yang berbeda. Penyempurnaan HTML
dalam XHTML mempunyai dua keuntungan yaitu :

- XHTML adalah XML yang sah maka dokumen XHTML sepenuhnya didukung
aplikasi yang bias membaca, menulis atau mengedit XML.

- Seperti dokumen XML lain, relative lebih mudah untuk memperkenalkan tag baru dan
menambahkan atribut baru walaupun belum ada tambahan tag baru pada XHTML 1.0.
Perkembangan lanjut untuk versi lebih baru akan jauh lebih mudah daripada HTML.

Dalam XHTML didefinisikan tiga macam DTD (Document Type Definition), yaitu :

* <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

* <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

* <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

Perbedaan pada XHTML 1.0 dengan HTML 4.01 adalah sebagai berikut :
* Dokumen harus terbentuk dengan baik (well-formed),
* Semua elemen dan atribut harus ditulis dengan huruf kecil untuk XHTML,
* Setiap tag pembuka harus memiliki tag penutup. Untuk tag seperti <br> dan <hr>
yang tidak memiliki tag penutup diperlukan notasi <br />.

Fungsi dari doc type adalah sebagai standard untuk validasi tag HTML/XHTML.

8
Penjelasan baris 2 :
Dalam elemen <html> dideklarasikan juga skema untuk tag-tag khusus yang dipakai
dalam halaman web. Jika Anda akan menggunakan tag-tag JSF dalam laman XHTML,
maka deklarasi elemen <html> anda adalah sebagaimana dibawah ini :

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html">
...
</html>

Penjelasan baris 3-6 :

Tag <HEAD> … </HEAD> merupakan tag kepala sebelum badan. Tag kepala ini akan
terlebih dulu dieksekusi sebelum tag badan. Di dalam tag ini berisi tag <META> dan
<TITLE>. Tag <META> merupakan informasi atau header suatu dokumen HTML.
Atribut yang dimiliki oleh tag ini antara lain:

HTTP_EQUIV, atribut ini berfungsi untuk menampilkan dokumen HTML secara

otomatis dalam jangka waktu tertentu. CONTENT, atribut ini berisi informasi tentang isi
document HTML yang akan dipanggil. NAME, atribut ini merupakan identifikasi dari
meta itu sendiri.

Sedangkan tag <TITLE> … </TITLE> adalah tag judul. Sebaiknya setiap halaman web
memiliki judul, dan judul tersebut dituliskan di dalam <TITLE> judul </TITLE>. Judul
ini akan muncul dalam titlebar dari browser.

Penjelasan baris 7-9 :

Untuk selanjutnya, kita hanya akan memperhatikan tag-tag yang ada di dalam <BODY>
… </BODY> karena bentuk tampilan/desain web tergantung pada tag yang ditulis di
dalam <BODY> … </BODY>.

9
Dibawah ini adalah source code keseluruhan program :

Penjelasan baris 6 :
Scripting pada baris ke-6 menunjukkan bahwa kita mengambil file css dari luar, atau
yang biasa dikenal dengan istilah css eksternal.Tag link adalah scripting HTML yang
berfungsi untuk menuju/mengambil file tertentu. Untuk mengambil file .css
menggunakan atribut href diikuti nama file(href=’style.css’). Atribut rel dari elemen link
harus diberi nilai "stylesheet" untuk memungkinkan browser mengenali bahwa atribut
href memberikan (URL) bagi style sheet program.

10
Penjelasan baris 9-26 :
Element HTML <div> di dalam tag <body> yang digunakan berfungsi sebagai
tempat/rumah yang didalamnya terdapat atribut id dan class. Atribut id dan class inilah
yang akan kita panggil untuk mempercantik hasil output program. Tag DIV juga
berfungsi untuk mendefinisikan id dan class serta lang pada CSS. Sedangkan tag span
berfungsi untuk elemen yang bersifat inline.

CSS mempunyai 3 selector yaitu :

- class : selector class dapat digunakan berulang di setiap tempat dalam HTML.
Diawali dengan “.(titik)”,
- tag : selector yang dapat digunakan ketika seluruh tag yang sama ingin disetting
sama. Misalnya saja tag <h1> maka setiap kali menuliskan <H1> maka
setingannya akan selalu sama misalnya hurufnya tebal,
- id : Selector advanced hanya berfungsi pada 1 ID khusus dan hanya digunakan 1
kali saja. Diawali “#(octhotorp)” dalam penamaan.

<div id=’contact’> scripting HTML ini menunjukkan memanggil id css dengan nama id
‘contact’, sedangkan <span class=’ctop’> menunjukkan memanggil class css dengan
nama class ctop.

Element FORM berfungsi untuk mendefinisikan form interaktif. Element ini mempunyai
attribute yaitu action, dan method. Attribute action berisikan aksi terhadap form yang
dikirim (URI) dan attribute method berisikan metode form melakukan proses
pengiriman(GET/POST). Sederhananya method ini bekerja ketika si user menekan
tombol submit dengan action yang telah disetting sebelumnya.

Method GET, digunakan untuk mengambil suatu nilai dan mengirim informasi ke HTTP
dengan method GET. Method ini biasanya berkaitan dengan parsing URL, perbedaan
mendasar dengan method POST adalah jika menggunakan method GET, maka nilai dari
sebuah variable form akan terlihat di url, sedangkan dengan method POST tidak terlihat.
Sehingga method GET ini tidak cocok apabila digunakan berkaitan dengan security.

11
Method POST, method ini biasanya digunakan untuk mengambil suatu nilai, berbeda
dengan method GET yang biasanya digunakan untuk mengambil parsing dari sebuah
URL.

Jelas terlihat pada hasil akhir output program terdapat 3 input text dan 1 textarea, berikut
penjelasan lebih lengkapnya :

Element INPUT berfungsi untuk mendefinisikan input yang akan dimasukkan pengguna.
Element ini mempunyai attribute yaitu name, size, type, value, checked.
Attribute name mendefinisikan nama dari input kontrol form, attribute size
mendefinisikan ukuran teks pada input kontrol, type mendefinisikan bentuk-bentuk input
kontrol, value mendefinisikan nilai awal/reset/submit, checked mendefinisikan pilihan
terpilih pada type radio/checkbox. Element ini tidak mempunyai tag penutup dan harus
berada di dalam element FORM.

Element TEXTAREA berfungsi sebagai input kontrol form untuk memasukkan teks lebih
dari satu baris. Element ini mempunyai attribute yaitu name, cols, rows. Attribute name
mendefinisikan nama input kontrol form element textarea, attribute cols mendefinisikan
jumlah kolom textarea yang terlihat, dan attribute rows mendefinisikan jumlah baris
textarea yang terlihat.

Atribut name pada input dan textarea berfungsi sebagai variable yang nantinya akan
ditangkap pada bahasa PHP/ASP/ASP.NET/JSP atau bahasa lainnya ketika terjadi proses
data, baik itu dengan method GET ataupun POST.

Button, digunakan untuk mendefinisikan tombol untuk melakukan pemrosesan form. Ada
bermacam-macam button.
- Submit : digunakan untuk memanggil URL, setelah input selesai dimasukkan
- Reset : digunakan untuk menginisialisasi setiap elemen form.
- Button : digunakan untuk membuat form lebih interaktif, untuk memanggil script
yang ada dalam dokumen HTML.

12
div, h2, form, label, input, span {
margin:0;
padding:0;
}
.spacer {
font-size:0;
line-height:0;
clear:both;
}

Untuk semua tag div, h2, form, label, input dan span dalam HTML diberi margin 0 dan
padding 0. Fungsi margin dan padding adalah untuk pengaturan letak kiri, kanan, atas dan
bawah pada tampilan output di webbrowser.

.spacer = titik(.) menunjukkan selector class dengan nama spacer, sehingga ketika
dipanggil pada tag <br> baris ke-24 dengan nama file adalah index.htm menjadi : <br
class=’spacer’>, dengan ukuran huruf adalah 0px(pixel), tinggi garis 0 dan meniadakan
jarak untuk keduanya.

/* ----------------- body start --------------------------- */

#contact {
width:312px;
margin:auto;
}

/* … */ adalah komentar pada css, sehingga tidak akan di eksekusi pada saat program di
running.

#contact = tanda(ochtotorp/#) menunjukkan selector id yang berfungsi pada saat

pemanggilan dalam tag HTML <div id=’contact’>. Untuk panjang TAG <form> …
</form> adalah 312px(pixel) dan diberi marginnya auto. Pengertian auto adalah
diberikan default panjang kanan dan kiri dari form adalah sama, dalam arti lain jarak
kanan dan kiri diberikan align=center.

13
#contact span.ctop {
background:url(images/contact_top.gif) no-repeat 0 0 #FCFAF3;
color:#000000;
line-height:0;
font-size:0;
height:14px;
display:block;
}

Untuk selector id css <div id=’contact’> dan selector class <span class=ctop> diberikan
background dengan nama file contact_top.gif pada folder images, arti dari no-repeat
adalah gambar tidak di looping pada tampilan web browser dan di beri warna #FCFAF3.

Untuk warna tulisan diberi warna dengan nilai hexa #000000, dengan ukuran tulisan 0px,
memiliki tinggi 14px.

display:block = Memberikan nilai untuk men-generate sebuah block box.

14
#contact span.cbottom {
background:url(images/contact_bottom.gif) no-repeat 0 0 #FCFAF3;
color:#000000;
line-height:0;
font-size:0;
height:25px;
display:block;
}

Untuk selector id css <div id=’contact’> dan selector class <span class=cbottom>
diberikan background dengan nama file contact_bottom.gif pada folder images, arti dari
no-repeat adalah gambar tidak di looping pada tampilan web browser dan di beri warna
#FCFAF3(nilai hexa ini bias dilihat pada halaman 14). Untuk warna tulisan diberi warna
dengan nilai hexa #000000(hitam), dengan tinggi baris 0px, ukuran tulisan 0px, memiliki
tinggi 25px. display:block = Memberikan nilai untuk men-generate sebuah block box.

#contact form.contact {
background:url(images/contact_midle.gif) repeat-y 0 0 #FCFAF3;
color:#000000;
width:272px;
padding:0 20px;
float:left;
}

Untuk selector id css <div id=’contact’> dan selector class <form class=contact>
diberikan background dengan nama file contact_midle.gif pada folder images, arti dari
repeat-y adalah warna gambar mengikuti garis horizontal pada sumbu y pada tampilan
web browser dan di beri warna #FCFAF3(nilai hexa ini bias dilihat pada halaman 14).
Untuk warna tulisan diberi warna dengan nilai hexa #000000(hitam), dengan lebar
272px, padding(lapisan ketebalan default) 20px.
float:left = property float akan memberikan letak di kiri.

15
#contact form.contact h2.text3 {
background:url(images/contact_h2_bg.gif) no-repeat 0 0 #FFFFFF;
color:#0B0B0B;
padding:0 0 10px 55px;
float:left;
width:228px;
height:37px;
font:normal 24px/30px Georgia, "Times New Roman", Times, serif;
}

Untuk selector id css <div id=’contact’> dan selector class <form class=contact> serta
selector class <h2 class=’text3’> diberikan background dengan nama file
contact_h2_bg.gif pada folder images, arti dari no-repeat adalah warna gambar tidak di
looping pada tampilan web browser dan di beri warna #FFFFFF(putih). Untuk warna
tulisan diberi warna dengan nilai hexa #0B0B0B(hitam), dengan lebar 282px, tinggi
37px, ukuran tulisan normal dengan size 24px/30px dengan jenis Georgia, "Times New
Roman", Times, serif. float:left = property float akan memberikan letak di kiri.

16
#contact form.contact h2.text3 span {
background-color:#FFFFFF;
color:#A60101;
font:normal 24px/30px Georgia, "Times New Roman", Times, serif;
}

Untuk selector id css <div id=’contact’>, selector class <form

class=contact> dan selector class <h2 class=’text3’> serta tag
span diberikan warna background #FFFFFF(putih). Untuk
warna tulisan diberi warna dengan nilai hexa #A60101,
ukuran tulisan normal dengan size 24px/30px dengan jenis
Georgia, "Times New Roman", Times, serif.

#contact form.contact label {

background-color:#FFFFFF;
color:#0B0B0B; margin:0 0 8px 0;
float:left;
font:bold 10px/28px Arial, Helvetica, sans-serif;
text-transform:uppercase;
}

Untuk selector id css <div id=’contact’>, selector class <form class=contact> dan tag
label diberikan warna background #FFFFFF(putih). Untuk warna tulisan diberi warna
dengan nilai hexa #0B0B0B(hitam), ukuran tulisan di cetak tebal dengan size 10px/28px
dengan jenis Arial, Helvetica, sans-serif. Untuk format text diberi uppercase artinya jika
di dalam tag body kita menulis dengan huruf kecil, maka output yang akan tercetak
adalah huruf besar. float:left = property float akan memberikan letak di kiri.

17
#contact form.contact input {
background-color:#EFEBDE;
color:#0B0B0B;
border:#C3BCA4 1px solid;
width:250px; height:22px;
padding:2px;
margin:0 0 8px 15px;
float:right;
font:normal 14px/20px Arial, Helvetica, sans-serif;
}

Untuk selector id css <div id=’contact’>, selector class <form class=contact> dan tag
input diberikan warna background #EFEBDE. Untuk warna border form input dengan
nilai hexa #C3BCA4 ketebalan border 1px dan tipe solid, lebar 250px dan tinggi 22px,
jarak antar input padding 2px, jarak antar input/textarea diberi margin 0 0 8px 15px.
ukuran tulisan di normal dengan size 14px/20px dengan jenis Arial, Helvetica, sans-serif.
float:right = property float akan memberikan letak di kanan.

18
#contact form.contact textarea {
background-color:#EFEBDE;
color:#0B0B0B;
border:#C3BCA4 1px solid;
width:250px; height:66px;
padding:2px;
margin:0 0 13px 15px;
float:right;
font:normal 14px/20px Arial, Helvetica, sans-serif;
}

Untuk selector id css <div id=’contact’>, selector class <form class=contact> dan tag
textarea diberikan warna background #EFEBDE. Untuk warna border form textarea
dengan nilai hexa #C3BCA4 ketebalan border 1px dan tipe solid, lebar 250px dan tinggi
66px, jarak antar input padding 2px, jarak antar input/textarea diberi margin 0 0 13px
15px. ukuran tulisan di normal dengan size 14px/20px dengan jenis Arial, Helvetica,
sans-serif. float:right = property float akan memberikan letak di kanan.

19
#contact form.contact input.submit {
background:url(images/submit_bg.gif) no-repeat 45px 0 #FFFFFF;
color:#0B0B0B; border:none;
width:60px; height:13px;
float:right; margin:0 0 0 10px;
padding:0 20px 0 0;
cursor:pointer;
font:normal 10px/13px Arial, Helvetica, sans-serif;
text-transform:uppercase;
}

Untuk selector id css <div id=’contact’>, selector class <form class=contact> dan selector
class <input type=’submit’ class=’submit’> diberikan background gambar dengan nama
file submit_bg.gif , no-repeat(tidak ada pengulangan gambar di web browser), memiliki
jarak 45px antar submit, serta warna border #FFFFF(putih). Untuk warna tulisan
#0B0B0B(hitam) dan bordernya tidak ada, jarak antar input/textarea diberi margin 0 0 0
10px. ukuran tulisan di normal dengan size 10px/13px dengan jenis Arial, Helvetica,
sans-serif. float:right = property float akan memberikan letak di kanan. Untuk format text
diberi uppercase artinya jika di dalam tag body kita menulis dengan huruf kecil, maka
output yang akan tercetak adalah huruf besar.

20
#contact form.contact input.reset {
background:url(images/more_bg.gif) no-repeat 45px 0 #FFFFFF;
color:#0B0B0B;
border:none;
width:60px;
height:13px;
float:right;
margin:0;
padding:0 15px 0 0;
cursor:pointer;
font:normal 10px/13px Arial, Helvetica, sans-serif;
text-transform:uppercase;
}
/* ----------------- body end --------------------------- */

Untuk selector id css <div id=’contact’>, selector class <form class=contact> dan selector
class <input type=’reset’ class=’reset’> diberikan background gambar dengan nama file
more_bg.gif dalam folder images, no-repeat(tidak ada pengulangan gambar di web
browser), memiliki jarak 45px antar submit, serta warna border #FFFFF(putih). Untuk
warna tulisan #0B0B0B(hitam) dan bordernya tidak ada, jarak antar input/textarea diberi
margin 0 dan padding 0 15px 0 0. memiliki lebar 60px dan tinggi 13px, ukuran tulisan di
normal dengan size 10px/13px dengan jenis Arial, Helvetica, sans-serif. float:right =
property float akan memberikan letak di kanan. Untuk format text diberi uppercase
artinya jika di dalam tag body kita menulis dengan huruf kecil, maka output yang akan
tercetak adalah huruf besar.

cursor:pointer = property pointer ini akan menampilkan pointing device.

21
Output Program

22