Modul Praktikum Desain Web

MODUL PRAKTIKUM
DESAIN WEB
Disusun :
Firdaus, S.Kom., M.Kom
MANAJEMEN INFORMATIKA
AKADEMI MANAJEMEN INFORMATIKA DAN KOMPUTER (AMIK)
BOEKITTINGGI
BUKITTINGGI - 2020
DAFTAR ISI
MODUL 1 ........................................................................................................................... 1
MODUL 2............................................................................................................................ 5
MODUL 3............................................................................................................................ 12
MODUL 4............................................................................................................................ 18
MODUL 5............................................................................................................................ 24
MODUL 6............................................................................................................................ 31
MODUL 7............................................................................................................................ 38
MODUL 1
PENGENALAN HTML
A. TEORI
1.1. Pengenalan HTML
Hyper Text Markup Language adalah bahasa yang digunakan untuk membuat suatu situs
web atau homepage. Setiap dokumen dalam Web ditulis dalam format HTML. Semua format
dokumen, hyperlink yang dapat di klik, gambar, dokumen multimedia, form yang dapat
di isi dan sebagainya didasarkan atas HTML.
1.2. Struktur Dasar HTML

Dokumen HTML hanyalah sebuah dokumen teks biasa dan disebut sebagai Markup
Language yakni bahasa yang mengandung kode penanda yang disebut tag HTML yang
digunakan untuk mengatur format tampilan suatu dokumen. Kode ini diselipkan ke dalam
teks HTML, berfungsi untuk mengontrol format dan layout dalam dokumen, menunjuk ke
suatu hyperlink, dan lain-lain. Tag HTML ini menggunakan simbol khusus untuk
menandakan suatu kode instruksi, simbol ini adalah kurung siku, < dan >.
Hal yang harus diperhatikan adalah kode tag HTML ini tidak bersifat case-sensitif artinya
<body> sama dengan <BODY> ataupun <bOdY>. Pada umumnya banyak dari pemakai
HTML menggunakan huruf besar dalam penulisan tag HTML sehingga menyebabkan kode-
kode ini terlihat jelas, sehingga mempermudah proses pembacaan. Semua dokumen HTML
terdiri dari dua bagian logikal, yaitu:
a. bagian kepala (head). Secara umum, bagian kepala dari dokumen HTML berisi
informasi umum mengenai dokumen
b. bagian badan (body) yaitu berisi dokumen yang sebenarnya.
Setiap dokumen HTML harus dimulai dan diakhiri dengan tag <HTML> yang
mendeklarasikan suatu dokumen sebagai dokumen HTML. Struktur dasarnya adalah sebagai
berikut :
<HTML>
<HEAD>
<TITLE> JUDUL FORM </TITLE>
</HEAD>
<BODY>
ISI WEB
</BODY>
</HTML>
Keterangan:
<html> .. </html>
Mendefinisikan bahwa teks yang berada diantara kedua tag tersebut adalah file
HTML.
<head> .. </head>
Sebagai informasi page header. Di dalam tag ini kita bisa meletakkan tag-tag
TITLE, BASE, ISINDEX, LINK, SCRIPT, STYLE & META.
<title> .. </title>
1
Sebagai titel atau judul halaman/form, digunakan sebagai identifikasi dokumen.
Kalimat yang terletak di dalam tag ini akan muncul pada bagian paling atas browser
Anda (pada title bar).
<body> .. </body>
Mendefinisikan teks beserta formatnya yang hendak ditampilkan sebagai isi halaman
web. Di dalam tag ini bisa diletakkan berbagai page attribute seperti bgcolor,
background, text, link, vlink, alink, leftmargin dan topmargin. Contoh dari
penggunaan tag <HTML> seperti ini:
1.3. Memulai Membuat Dokumen dengan Format HTML

Langkah – langkah untuk memulai membuat dokumen HTML sebagai berikut :
1. Buka notepad sebagai editor dokumen HTML
2. Buat skrip sederhana seperti dibawah ini di notepad:
Contoh 1.1 Dokumen HTML Sederhana
<HTML>
<HEAD>
<TITLE>Halaman Web Pertamaku</TITLE>
</HEAD>
<BODY>
Ini adalah halaman web pertamaku
</BODY>
</HTML>
3. Simpan dokumen yang telah dibuat dengan menggunakan ekstensi .html dan
Save as type pilih All Files
Gambar 1.1 Penyimpanan Dokumen HTML
2
4. Untuk melihat hasil dari dokumen HTML yang telah dibuat, buka dokumen tersebut
menggunakan web browser (Misalnya: Internet Explorer atau Mozilla Firefox)
Gambar 1.2 Hasil Eksekusi Contoh 1.1

Judul dokumen HTML
Informasi yang dituliskan pada tag <body>
5. Alamat file yang diakses ditunjukkan pada url. Untuk contoh diatas, url yang dimaksud
adalah D:\Praktikum Desain Web\Contoh_1.1.html
3
B. BAHAN PRAKTEK :
1. Praktek_1.1.html
<HTML>
<HEAD>
<TITLE>Halaman Web Pertamaku</TITLE>
</HEAD>
<BODY>
Ini adalah halaman web pertamaku
</BODY>
</HTML>
2. Praktek_1.2.html
<HTML>
<HEAD>
<TITLE>Halaman Web Keduaku</TITLE>
</HEAD>
<BODY>
Selamat Datang di Halaman Web Saya
Web saya masih sederhana, jadi harap maklum
Terimakasih.
</BODY>
</HTML>
C. LATIHAN :
1. Buatlah dokumen HTML yang menampilkan Biodata saudara, yang berisi : Nama, NPM,
Program Studi, dan Alamat.
4
MODUL 2
DESAIN HALAMAN WEB
A. TEORI
2.1. Format Dokumen HTML

2.1.1. Body
Pada bagian tag <BODY> digunakan untuk mendefinisikan teks beserta formatnya yang
hendak ditampilkan sebagai isi halaman web. Di dalam tag ini bisa diletakkan berbagai page
attribute seperti bgcolor, background, text, link, vlink, alink, leftmargin dan topmargin.
1. Background : digunakan untuk mengatur latar belakang dengan gambar/image
2. Bgcolor : digunakan untuk mengatur warna latar belakang dokumen, dengan
warna putih sebagai default-nya
3. Text : digunakan untuk mengatur warna teks dokumen, dengan warna hitam
sebagai warna default
4. Link : Untuk mengatur warna link dokumen dengan warna biru sebagai warna
default
5. Vlink : Untuk mengatur warna visited link dokumen dengan default ungu.
6. Alink : digunakan untuk mengatur warna active link dokumen dengan default
merah.
2.1.2. Heading
Heading digunakan untuk mengatur ukuran huruf pada header. Tag heading <Hn>..</Hn>,
"n" mempunyai nilai antara 1 - 6 atau antara <H1> sampai <H6>, dengan <H1> merupakan
ukuran terbesar dan <H6> merupakan ukuran terkecil.
Dalam banyak dokumen, heading pertama digunakan sebagai judul tulisan. Heading ini
mempunyai atribut untuk menentukan letak tulisan, di kiri, kanan ataupun tengah. Jika atribut
ini tidak ditambahkan, maka heading akan otomatis rata kiri.
2.1.3. Paragraf
Untuk membuat paragraf ini digunakan tag <P>, hal yang perlu dicatat adalah tag <P> ini
akan mengabaikan spasi dan pindah baris. Dalam pembuatan paragraf pun, kita bisa
menggunakan atribut ALIGN untuk mengatur letak paragraf, rata kiri, tengah ataupun rata
kanan. Attribut align mempunyai nilai: LEFT, RIGHT, CENTER dan JUSTIFY.
2.1.4. Line Breaks

Line breaks digunakan untuk menambahkan baris baru pada teks dalam dokumen HTML
dengan cara menambahkan tag <BR>. <CENTER> digunakan untuk membuat teks
dalam posisi di tengah. Setiap teks yang terdapat diantara <CENTER> dan </CENTER>
akan ditempatkan di tengah- tengah margin kiri dan kanan.
2.1.5. Teks Preformat

Berbeda dengan pembuatan paragraf yang mengabaikan setiap tambahan spasi, tag
<PRE> ini akan membuat spasi ikut diperhitungkan. Dengan kata lain tag <PRE> akan
menampilkan teks pada halaman web sesuai dengan yang kita tuliskan dan dengan tag ini
data tabular dapat dibuat. Biasanya spasi dan tab ini digunakan untuk membuat baris dan
kolom, yang membutuhkan banyak spasi untuk membuat urutan baris dan kolom. Berikut ini
contoh penggunaan dari tag <PRE>.
5
2.1.6. Format Bentuk Tulisan
Untuk pengaturan teks, terdapat beberapa tag yang dapat digunakan. Cara menggunakannya
adalah awali dengan <tag>, terus masukkan tulisan yang akan diatur dan akhiri dengan
</tag>. Tag-tag yang dapat digunakan untuk mengatur teks adalah :
<B> Bold text
<I> Italic text
<U> Underscore
<TT> Typewriter
<S> Strikeout - draws a line through the text
<BLINK> Text berkedip (lebih baik jangan digunakan)
<CITE> Digunakan untuk quoting text
<BIG> Ukuran teks akan lebih besar satu ukuran
<SMALL> Ukuran teks akan lebih kecil satu ukuran
<SUP>
Membuat tekssuperscript
<SUB> membuat tekssub script
<ABBREV> Abbreviations
<ACRONYM> Untuk akronim
<PERSON> Digunakan untuk indexing
<Q> Membuat short inline quotation
<VAR> Membuat variable name, selalu dalam italics.
2.1.7. Font
Tag <FONT> digunakan untuk mengatur huruf dokumen HTML. Tag FONT mempunyai
attribut, yaitu: SIZE, FACE, COLOR.
SIZE: Digunakan untuk mengatur ukuran font. Ukuran font yang digunakan berkisar
antara 1 - 7 dengan 1 merupakan ukuran terkecil dan 7 merupakan ukuran terbesar.
FACE: Digunakan untuk mengatur jenis atau nama font. Anda bisa memilih maksimal 3
jenis font yang masing-masing dipisahkan oleh koma. Bila terdapat spasi yang terletak pada
nama font maka harus digunakan tanda garis bawah (_). Dalam memilih jenis font ini
harus dipertimbangkan apakah font yang kita gunakan pada halaman web kita nantinya akan
terdapat pada komputer pengguna yang lain.
COLOR: Digunakan untuk mengatur warna font. Didefinisikan dengan menggunakan nilai
RGB/HEX atau bisa juga langsung menggunakan nama warna (red misalnya).
2.1.8. Karakter Spesial

Terdapat empat karakter yaitu tanda lebih kecil (<), tanda lebih besar (>), tanda dan (&) dan
kutip ganda (“), yang mempunyai arti khusus dan digunakan sebagai kode dalam HTML
sehingga tidak dapat digunakan secara langsung sebagai teks dalam dokumen HTML kita.
Untuk menggunakan karakter-karakter di atas ke dalam dokumen HTML, diperlukan
suatu karakter spesial untuk menggantikan karakter-karakter di atas.
Karakter spesial tersebut antara lain :
< karakter spesial untuk <
> karakter spesial untuk >
& karakter spesial untuk &
" karakter spesial untuk "
@ karakter spesial untuk @
© karakter spesial untuk ©
© karakter spesial untuk ©
® karakter spesial untuk ®
® karakter spesial untuk ®
karakter spesial untuk spasi yang tak dapat
dipecah
6
2.1.9. Garis Horizontal
Tag <HR> digunakan untuk membuat garis horizontal pada jendela browser. Defaultnya
adalah membuat garis yang solid.
Tag ini mempunyai atribut SIZE, WIDTH, ALIGN dan NOSHADE.
<HR NOSHADE> digunakan untuk membuat garis yang tidak ada efek baying-bayang 3-D.
<HR SIZE=ukuran> untuk menentukan panjang garis dalam satuan pixel, default 2.
<HR WIDTH=ukuran atau persentase> untuk menentukan ketebalan garis.
<HR ALIGN=LEFT atau RIGHT atau CENTER> untuk membuat garis dengan letak sebelah
kiri (left), kanan (right) atau tengah (center-default).
2.2. List
2.2.1. List Berurut (Ordered Lists)
<OL> Juga digunakan untuk membuat daftar item bernomor, dengan tiap item dapat
menggunakan angka arab atau romawi. List entri juga didefinisikan dengan tag <LI>.
Atribut yang ada pada Ordered List adalah TYPE dan START. Beberapa type penomoran
yang dapat digunakan pada ordered list ditunjukkan pada tabel di bawah ini :
Tipe Penomoran pada Ordered List

Tipe Penjelasan
I Angka ditampilkan dalam angka romawi huruf besar
i Angka ditampilkan dalam angka romawi huruf kecil
a Huruf ditampilkan dalam abjad huruf kecil
A Huruf ditampilkan dalam abjad huruf besar
1 Angka yang dimulai dari 1
Pada tag <OL> juga terdapat atribut START untuk memulai list dari nomor tertentu. Pada tag
<LI> terdapat atribut VALUE untuk melewati nomor yang tidak diinginkan.
2.2.2. List Tanpa Urutan (Unordered Lists)

Tag <UL> untuk membuat daftar item dengan tanda bullet (tidak bernomor). List entri
didefinisikan dengan tag <LI>. Pada jenis ini tidak memerlukan pengurutan data. Kita juga
dapat menentukan jenis bullet yang akan digunakan dengan menentukan type-nya.
Beberapa tipe yang dapat dipilih ditunjukkan pada tabel di bawah ini :
Tipe Penjelasan
Disc Bullet berbentuk cakram
Circle Bullet berbentuk lingkaran
Square Bullet berbentuk kotak
B. BAHAN PRAKTEK :
7
1. Praktek_2.1.html (Menggunakan Heading)
<HTML>
<HEAD> <TITLE> Belajar membuat HTML yuk </TITLE> </HEAD>
<BODY>
My Homepage
<H1>Heading tingkat 1</H1>
<H1 ALIGN=LEFT>Heading 1 rata kiri</H1>
<H2 ALIGN=CENTER>Heading 2 rata tengah</H2>
<H3 ALIGN=RIGHT>Heading 3 rata kanan</H1>
</BODY>
</HTML>
2. Praktek_2.2.html (Memformat paragraf)

<html>
<head>
<title>Memformat Paragraf</title>
</head>
<body>
<p>Paragraf Pertama</p>
<p>Paragraf pertama ini menggunakan rataan kiri.</p>
<p></p>
<p align=”center”>Paragraf Kedua</p>
<p align=”center”>Paragraf kedua ini menggunakan rataan tengah</p>
<p></p>
<p align=”right”>Paragraf Ketiga</p>
<p align=”right”>Paragraf ketiga ini menggunakan rataan kanan</p>
</body>
</html>
3. Praktek_2.3. html (Line Break)

<html>
<head>
<title>Menggunakan Line Break</title>
</head>
<body>
Menggunakan Line Break<br><br>
Dengan menggunakan line break, kita dapat memindahkan kalimat<br>
setelah elemen tersebut satu baris di bawahnya.<br>
seperti halnya menggunakan ENTER pada word processing.
</body>
</html>
4. Praktek_2.4.html (Preformatted Text)
8
<HTML>
<HEAD> <TITLE> Belajar membuat HTML yuk </TITLE> </HEAD>
<BODY>
<H2>My Homepage</H2>
<h3>Penggunaan Teks Preformat</h3>
Contoh dibawah adalah penggunaan tag Preformat untuk membuat Tabel<br>
<PRE>
Tabel data mahasiswa
----------------------------------
Nama Umur
----------------------------------
Adi Sasongko 19
Budi Swarga 20
Chev Sampurna 18
Della Rossa 19
----------------------------------
</PRE>
</BODY>
<HTML>
5. Praktek_2.5.html (Memformat Tulisan)

<html>
<head>
<title>Memformat Tulisan</title>
</head>
<body>

<b>Tulisan ini akan tercetak tebal</b>
<p>

<i>Tulisan ini akan tercetak miring</i>
<p>

<u>Pada tulisan ini terdapat garis bawah</u>
<p>

Dalam matematika, x pangkat 2 ditulis dengan X <sup>2</sup>
<p>

Rumus kimia untuk oxygen adalah O <sub>2</sub>
</body>
</html>
6. Praktek_2.6.html (Font)
<html>
<head>
<title>::: Ukuran, Jenis dan Warna Font:::</title>
</head>
<body>
<font size=1 Face=arial color=#FF0000>Ukuran font 1</font><br>
<font size=2 Face=arial color=green>Ukuran font 2</font><br>
<font size=3 Face=arial color=blue>Ukuran font 3</font><br>
<font size=4 Face=verdana color=red>Ukuran font 4</font><br>
<font size=5 Face=verdana color=blue>Ukuran font 5</font><br>
<font size=6 Face=tahoma color=green>Ukuran font 6</font><br>
<font size=7 Face=tahoma color=red>Ukuran font 7</font><br>
7.</body>
Praktek_2.7.html (Garis Horisontal)
</html>
9
<html>
<head>
<title>Horizontal Rules</title>
</head>
<body>
Menambahkan garis horisontal pada dokumen HTML
<hr size="15">
<hr width="100" align=”left”>
<hr color="blue">
<h color="red" size="3" width="300" noshade>
</body>
</html>
8. Praktek_2.8.html (Ordered List)

<html>
<head>
<title>Menggunakan List</title>
</head>
<body>
<h3>Menggunakan Ordered List</h3>
<hr>
<h4>Ordered List dengan Type Default</h4>
<ol>
<li>Nasi Goreng</li>
<li>Nasi Rames</li>
<li>Pecel Lele</li>
</ol>
<h4>Ordered List dengan Type a</h4>
<ol type="a">
<li>Nasi Rames</li>
<li>Pecel Lele</li>
</ol>
<h4>Ordered List dengan Type I</h4>
<ol type="I">
<li>Nasi Rames</li>
<li>Pecel Lele</li>
</ol>
<h4>Ordered List dengan Menambahkan Atribut Start</h4>
<ol start="4">
<li>Nasi Rames</li>
<li>Pecel Lele</li>
</ol>
</body>
</html>
9. Praktek_2.9.html (Unordered Lists)
10
<html>
<head>
<title>Menggunakan List</title>
</head>
<body>
<h3>Menggunakan Unordered List</h3>
<hr>
<h4>Ordered List dengan Type Default</h4>
<ul>
<li>Manchester United</li>
<li>Chelsea</li>
<li>Arsenal</li>
</ul>
<h4>Unordered List dengan Type Circle</h4>
<ul type="circle">
<li>Juventus</li>
<li>AC Milan</li>
<li>AS Roma</li>
</ul>
<h4>Unordered List dengan Type Disc</h4>
<ul type="disc">
<li>Real Madrid</li>
<li>Barcelona</li>
<li>Malaga</li>
</ul>
<h4>Unordered List dengan Type Square</h4>
<ul type="square">
<li>PSV</li>
<li>Ajax Amsterdam</li>
<li>Feyenord</li>
</ul>
</body>
</html>
C. LATIHAN :
1. Buatlah halaman HTML untuk menampilkan teks di bawah ini:
H2O
X2 + 4X + 4
Linux adalah sistem operasi yang bersifat open source.
2. Buatlah dokumen HTML dengan tampilan sebagai berikut :

Keterangan : garis berwarna merah
11
MODUL 3
LINK DAN GAMBAR
A. TEORI
3.1. Link
Kekuatan utama dokumen HTML terletak pada hypertext link atau hyperlink atau lebih
singkat lagi disebut link. Dengan hyperlink ini kita bisa membuka dokumen HTML lain atau
langsung menuju ke bagian tertentu sebuah dokumen HTML. Hyperlink ini dapat diletakkan
pada teks tertentu ataupun pada sebuah image, bila diletakkan pada teks maka teks tersebut
(secara default) akan digaris-bawahi dan warnanya menjadi berbeda.
Dalam pembuatan dokumen HTML diperlukan keterhubungan antar dokumen.
Keterhubungan ini dibagi dalam 2 (dua) kategori :
1. Keterhubungan antara satu dokumen dengan dokumen yang lain
2. Keterhubungan kepada suatu bagian pada dokumen itu sendiri
Sintaks tag link adalah sebagai berikut:
<A href=url_tujuan> nama_link </A>
url_tujuan bernilai lokasi atau nama file yang akan dituju. Sedangkan nama_link adalah
nilai yang akan ditampilkan di browser sebagai teks link atau tombol penghubung. Tulisan
yang terletak antara <A> dan </A> akan terdapat garis bawah dan atribut warnanya dapat
diatur dalam tag <BODY>. Dikenal 3 (tiga) istilah dalam pengalamatan link :
1. Link relatif
Link ini menggunakan alamat relatif file dituju.
Misal : <a href=”tujuan.htm”>Tujuan</a>
2. Link absolut
Link ini menggunakan alamat absolut file yang dituju.
Misal : <a href=”c:/my documents/tujuan.htm”>Tujuan</a>
3. Link dalam dokumen yang sama
Link ini menggunakan alamat pada bagian tertentu di dokumen itu sendiri.
Misal : <a href=”#top”>Kembali ke atas</a>
Beberapa atribut yang dapat ditambahkan dalam tag <a> diantaranya :

Atribut Kegunaan
Href Menunjukkan url yang dituju
Name Memberikan nama pada bagian tertentu pada dokumen
Target Menunjukkan target ditampilkannya link
Title Menunjukkan title dari link ketika cursor digerakkan di sekitar
area hyperlink
3.2. Membuat Link antar Dokumen HTML

Untuk membuat link/penghubung dengan target ke dokumen / halaman yang berbeda, anda
harus membuat dokumen yang dituju / target dan disimpan dalam direktori tertentu,
baik pada direktori yang sama atau berbeda dengan dokumen yang aktif sekarang. Untuk
mencoba membuat link, silahkan buat script berikut dan beri nama masing-masing dokumen
dengan dok_awal.htm dan dok_tujuan.htm.
12
Membuat halaman awal dok_awal.html :
<HTML>
<HEAD>
<TITLE> Belajar membuat HTML yuk </TITLE>
</HEAD>
<BODY>
<h3>Membuat Relative Link</h3>
Contoh membuat Link yang sederhana<br><br>
Untuk pindah ke dokumen yang lain,ikuti link pertama ini dengan
klik <A HREF="doktujuan.html">disini</A>
</BODY>
</HTML>
Membuat halaman target link dok_tujuan.html :

<HTML>
<HEAD>
<TITLE> Relative Link </TITLE>
</HEAD>
<BODY>
<P>Ini dokumen dengan nama file : dok_tujuan.html,
yang dituju oleh Relative Link pada dokumen dok_awal.html
</P>
</BODY>
</HTML>
3.3. Membuat Link ke Bagian Tertentu dalam Dokumen

Untuk membuat link ke bagian tertentu dalam dokumen yang sama, harus diberikan nama
anchor. Perbedaan dengan link yang berbeda dokumen adalah tujuan / target link, jika dalam
dokumen yang sama yang dituju adalah nama anchor tetapi kalau dokumen yang beda yang
dituju adalah nama file / dokumen yang bersangkutan.
Untuk memberi nama anchor, atribut yang dipakai adalah NAME pada tag anchor <A> dan
untuk membuat link cukup memberikan tanda # setelah nama file dalam URL. Misal:
<A HREF=”#sejarah”> Bab 1 </A>
atau dapat ditulis lengkap:

<A HREF=”belajar_html.htm#sejarah”> Bab 1 </A>
dan untuk nama anchornya:

<A NAME=”sejarah”>1.1 Sekilas Sejarah Internet</A>
3.4. Gambar
Untuk menyisipkan gambar kita dapat memanfaatkan tag <IMG>. Format file gambar yang
bisa ditampilkan bisa bermacam-macam, misalnya jp, jpeg, pcx, gif, psd, dan sebagainya.
Pada umumnya, perancang web hanya menggunakan kombinasi dari tiga format file gambar
saja yaitu jpeg, gif dan psd.
Sintaks :
<IMG src="url_file" width="img_width" height="img_height" vspace="10"
hspace="10" alt="alt_teks">
13
Beberapa atribut yang digunakan pada tag <img> antara lain :
Atribut Kegunaan
Menampilkan alternatif text pada image jika mouse
Alt
berada diatasnya
Align Mengatur perataan posisi gambar (center, left, right)
Border Mengatur lebar border/bingkai pada gambar
Height Mengatur tinggi image
Hspace Mengatur letak gambar
Src Menentukan sumber file, lokasi dimana file disimpan
Width Mengatur lebar image
Vspace Mengatur letak gambar
B. PRAKTEK
1. Praktek_3.1.html (Link1 )
<html><head><title>++Universitas Methodist Indonesia+
+</title></head>
<body>
<h2 align="center">
<font color="blue">Universitas Methodist Indonesia</font>
</h2>
<hr>
<h3>Fakultas :</h3>
<a href="ekonomi.html">Ekonomi</a><br>
<a href="fikom.html">Ilmu Komputer</a><br>
</body>
</html>
<html><head><title>++Universitas Methodist Indonesia+
+</title></head>
<body>
<h2 align="center">
<font color="blue">Universitas Methodist Indonesia</font>
</h2>
<hr>
Fakultas Ekonomi terdiri dari 4 Program Studi:
<ol start=1>
<li>Manajemen</li>
<li>Akuntansi</li>
<li>Manajemen Informatika</li>
<li>Komputerisasi Akuntansi</li>
</ol>
<br><br>
<a href="umi.html">[ HOME ]</a>
<a href="fikom.html"> [ FIKOM ]</a>
</body>
</html>
14
<html>
<head><title>++Universitas Methodist Indonesia++</title></head>
<body>
<h2 align="center"><font color="blue">Universitas Methodist
Indonesia</font></h2>
<hr>
Fakultas Ilmu Komputer terdiri dari 2 Program Studi:
<ol start=1>
<li>Sistem Informasi</li>
<li>Teknik Informatika</li>
</ol>
<br><br>
<a href="umi.html">[ HOME ]</a>
<a href="ekonomi.html">[ EKONOMI ]</a>
</body>
</html>
4. Praktek_3.4.html (Link ke dokumen yang sama )

<HTML>
<HEAD>
<TITLE>Membuat Link Ke Bagian dalam Dokumen</TITLE>
</HEAD>
<BODY>
<H4>Membuat Link ke Bagian dalam Dokumen</H4>
<A NAME="bab1"></A>
<B>Bab 1</B><BR>
Pada bab ini akan dijelaskan tutorial membuat dokumen HTML.<BR>
Mulai dari membuat dokumen HTML yang sederhana sampai membuat
sebuah web.<Br>
Sebagai pendahuluan, coba klik link ini untuk
<A HREF="#sejarah">menuju ke bagian lain</A> pada dokumen ini..
<P> </P>
<P> </P>
<P> </P>
<P> </P>
<P> </P>
<P> </P>
<P> </P>
<P> </P>
<P> </P>
<A NAME="sejarah"></A>
<B>1.1 Sekilas Sejarah Internet</B><BR>
Bab ini adalah bagian lain pada dokumen yang dituju ketika link
pada Bab 1 diklik.<BR>
Untuk kembali ke Bab 1, klik <A HREF="#bab1">disini</A>
</BODY>
</HTML>
15
5. Praktek_3.5.html (Gambar/Image)
Diasumsikan Logo_UMI.jpg sudah ada dalam folder yang sama dengan file HTMLnya.
<html>
<head> <title> Menambahkan Image </title> </head>
<body>
<h4>Menambahkan image ke dalam dokumen HTML</h4>
<img src="Logo_UMI.jpg" width="150" height="120">
<br>
<h4>Mengatur border pada image</h4>
<img src="Logo_UMI.jpg" border="5">
<br>
<h4>Alternating Text</a>
pada image di bawah ini terdapat alternating text.
silahkan gerakkan mouse melewati image<br>
<img src="Logo_UMI.jpg" alt="Alternating Text">
</body>
</html>
6. Praktek_3.6.html (Gambar sebagai Hyperlink)

<html>
<head> <title> Halaman Awal </title> </head>
<body>
<H4>Selamat Datang di Situs Pribadi Saya</H4>
untuk bisa menjelajahi situs ini, silahkan klik pada gambar
berikut
<A HREF="Praktek_3.1.html">
<IMG SRC="Logo_UMI.jpg" ALT="Link Menggunakan Image"></A>
<BR><BR>
Selamat menikmati penjelajahan di situs ini.
</body>
</html>
16
C. LATIHAN
Buatlah tampilan seperti gambar berikut ini dan buat link untuk masing-masing menu pada
gambar dibawah in :
Home.html
Biodata.html
Galeri.html
17
MODUL 4
TABEL
A. TEORI
4.1. Tabel
Tabel merupakan cara untuk menampilkan informasi dalam halaman web dengan bentuk
kolom dan baris.
4.2. Membuat Tabel

Untuk membuat tabel dalam dokumen HTML, kita dapat menggunakan tag <TABLE>.
Dalam 1(satu) tabel terdiri atas baris dan kolom. Elemen pendukung dalam pembuatan tabel
di dokumen HTML adalah :
1. Table Heading
Table heading diwakili dengan tag <TH>, digunakan untuk memberikan judul kolom
pada tabel.
2. Table Row
Table row merupakan penyusun baris pada tabel. Diwakili dengan tag <TR>.
3. Table Data
Table data adalah bagian yang digunakan untuk mengisikan informasi yang akan
ditampilkan di web browser. Diwakili dengan tag <TD>. Table data selalu berada di
dalam table row. Biasa disebut kolom.
Susunan sederhana dalam membuat tabel di dokumen HTML sebagai berikut:
<TABLE>
<TH>... berisi judul tabel</TH>
<TR>
<TD>
... berisi informasi yang ditampilkan di web browser
</TD>
</TR>
</TABLE>
Beberapa atribut yang bisa ditambahkan dalam tag <TABLE> adalah sebagai berikut :
Atribut Kegunaan
Align Untuk mengatur alignment tabel
Background Menambahkan image sebagai background pada tabel
Bgcolor Untuk mengatur warna background tabel
Untuk mengatur besar border table (dalam pixel),
Border
default=0
Bordercolor Mengatur warna border
Cellpadding Mengatur jarak antara border dengan isi cell
Cellspacing Mengatur jarak antar cell
Height Mengatur tinggi tabel
Width Mengatur lebar tabel (dalam pixel atau persen)
4.3. Menambahkan Judul Tabel
18
Judul tabel atau biasa disebut CAPTION terletak dibagian luar tabel yang bisa berada
dibawah atau diatas tabel. Secara default caption diletakkan dibagian atas suatu tabel, tetapi
juga dapat diletakkan dibawah suatu tabel dengan menambahkan atribut ALIGN=BOTTOM
pada elemen caption tersebut.
4.4. Memformat Baris

Seperti yang sudah dijelaskan di atas, salah satu elemen pendukung tabel pada dokumen
HTML adalah table row. Untuk memudahkan kita sebut saja sebagai baris (row). Setiap tabel
pasti terdiri atas baris – baris yang diwakili dengan tag <TR>.
Jenis atribut pada tag <TR> antara lain :

Atrribut Kegunaan
Mengatur rataan (horizontal)
Align
Terdapat 3 (tiga) pilihan : left, center, atau right
Bgcolor Mengatur warna yang dijadikan background
Height Mengatur tinggi baris
Mengatur rataan (vertikal)
Valign
Terdapat 3 (tiga) pilihan : top, middle, bottom
4.5. Memformat Kolom

Elemen pada tabel yang digunakan sebagai tempat untuk menuliskan informasi yang nantinya
akan ditampilkan di web browser adalah table data. Untuk selanjutnya kita akan menyebut
bagian ini sebagai kolom. Kolom dalam dokumen HTML diwakili oleh tag <TD>.
Jenis atribut pada tag <TD> antara lain :

Atrribut Kegunaan
Mengatur rataan (horizontal)
Align
Terdapat 3 (tiga) pilihan : left, center, atau right
Background Menambahkan image sebagai background kolom
Bgcolor Mengatur warna yang dijadikan background
Colspan Menggabungkan kolom
Height Mengatur tinggi kolom
Rowspan Menggabungkan baris
Mengatur rataan (vertikal)
Valign
Terdapat 3 (tiga) pilihan : top, middle, bottom
Width Mengatur lebar kolom
4.6. Mengatur CELLSPACING dan CELLPADDING

Atribut CELLSPACING adalah jumlah spasi yang dimasukkan diantara sel-sel dalam tabel.
Secara default cell spacing ini bernilai 2.
Atribut CELLPADDING adalah jumlah spasi di antara border sel dan isi dari sel. Secara
default cell padding ini bernilai 1.
B. PRAKTEK
19
1. Praktek_4.1.html (Pembuatan tabel)
<html>
<head> <title>::: Pembuatan Table:::</title> </head>
<body>
<font face=arial size=2 color=maroon>
<table border=1>
<caption align=top><b><u>Daftar Alamat</u></b></caption>
<tr bgcolor=yellow>
<th width=40>No.</td>
<th width=150>Nama</td>
<th width=200>Alamat</td>
</tr>
<tr>
<td align=center>1.</td>
<td>Raihan Umar</td>
<td>Tarogong Garut</td>
</tr>
<tr bgcolor='sky blue'>
<td>Ari Mulyaningsih</td>
<td>Wringin Anom Gresik</td>
</tr>
<tr>
<td>Ananda Denira</td>
<td>Cicadas Bandung</td>
</tr>
<tr bgcolor='sky blue'>
<td>Ari Wibowo</td>
<td>Sariwangi Tangerang</td>
</tr>
</table>
</body>
</html>
2. Praktek_4.2.html (Menambahkan Judul Tabel)

<HEAD>
<TITLE> Belajar membuat HTML yuk </TITLE>
</HEAD>
<BODY>
<h3>Membuat Tabel dengan Judulnya</h3>
<TABLE BORDER=2 WIDTH=50% BGCOLOR="Sky Blue">
<CAPTION>
Tabel 3.1 Prakiraan cuaca di kota besar
</CAPTION>
<TH>Kota</TH>
<TH>Cuaca</TH>
<TR>
<TD>Bandung</TD>
<TD>Hujan</TD>
</TR>
<TR>
<TD>Jakarta</TD>
<TD>Cerah</TD>
</TR>
</TABLE>
<BR>Contoh penggunaan judul tabel yang terletak di bawah

tabel<BR><BR>
<TABLE BORDER=1 WIDTH=50% ALIGN=CENTER
20
BACKGROUND="Tulips.JPG">
<CAPTION ALIGN=bottom>
Tabel 3.1 Prakiraan cuaca di kota besar
</CAPTION>
3. Praktek_4.3.html (Baris dan Kolom)
<HTML>
<HEAD> <TITLE> Memformat Baris dan Kolom </TITLE> </HEAD>
<BODY>
<TABLE BORDER=3>
<CAPTION>Daftar Order Barang</CAPTION>
<TH>No</TH>
<TH>Barang</TH>
<TH>Jenis</TH>
<TH>Harga</TH>
<TH>Jumlah</TH>
<TH>Total Harga</TH>
<TR>
<TD ALIGN=CENTER>1</TD>
<TD>Pocari Sweat</TD>
<TD ROWSPAN=2>Minuman</TD>
<TD>Rp. 4500</TD>
<TD ALIGN=RIGHT>5</TD>
<TD>Rp. 22500</TD>
</TR>
<TR>
<TD>Nutrisari Jus Jeruk</TD>
<TD>Rp. 2450</TD>
<TD>Rp. 7350</TD>
</TR>
<TR>
<TD>Kacang Kulit Garuda</TD>
<TD ROWSPAN=3>Makanan</TD>
<TD>Rp. 9800</TD>
<TD>Rp. 19600</TD>
</TR>
<TR>
<TD>Tango Coklat</TD>
<TD>Rp. 2750</TD>
<TD>Rp. 2750</TD>
</TR>
<TR>
<TD>Snack Ringan</TD>
<TD>Rp. 6450</TD>
<TD>Rp. 12900</TD>
</TR>
<TR HEIGHT=30 BORDERCOLOR="RED">
<TD COLSPAN=5 BGCOLOR="GRAY"><B>TOTAL</B></TD>
<TD BGCOLOR="GRAY"><B>Rp. 65100</B></TD>
21
</TR>
</TABLE>
</BODY>
</HTML>
4. Praktek_4.4.html (Cellspacing dan Cellpadding)
<HTML>
<HEAD> <TITLE> Membuat CELLSPACING & CELLPADDING </TITLE> </HEAD>
<BODY>
<TABLE BORDER=3 CELLSPACING=5 CELLPADDING=10>
<CAPTION>Peringkat Kejuaraan Catur</CAPTION>
<TH>Peringkat</TH>
<TH>Medali</TH>
<TH>Pemenang</TH>
<TR>
<TD>1</TD>
<TD>Emas</TD>
<TD>Aditia Warman</TD>
</TR>
<TR>
<TD>2</TD>
<TD>Perak</TD>
<TD>Firmansyah</TD>
</TR>
<TR>
<TD>3</TD>
<TD>Perunggu</TD>
<TD>Indra Bekti</TD>
</TR>
</TABLE>
</BODY>
</HTML>
C. LATIHAN
1. Buatlah layout web seperti gambar berikut :
22
2. Buatlah layout web seperti gambar berikut :
MODUL 5
FORM
23
A. TEORI
5.1. Form
Form dalam HTML digunakan untuk menerima masukan atau isian dari user untuk kemudian
diolah lebih lanjut menjadi informasi yang dibutuhkan, baik oleh user ataupun pihak yang
mempunyai web. Elemen dari form HTML adalah <FORM> yang menunjukkan awal dari
suatu form HTML dan diakhiri dengan </FORM>. Dalam sebuah dokumen dapat
mempunyai lebih dari satu form HTML.
Sintak penulisan form adalah:
<form method=”post atau get” action=”program_pemroses”>

elemen-elemen FORM
</form>
Tag <FORM> digunakan untuk membuat form dalam dokumen HTML.

Jenis- Jenis Atribut dalam Tag <FORM> :
Atribut Deskripsi
Menentukan bagaimana data akan di kirim ke server.
GET – data akan di kirim dengan menggunakan query string pada URL.
METHOD POST – data akan di kirim ke server sebagai block data ke script.
Syntax:
METHOD=”POST|GET”
Menentukan lokasi dari script yang akan memproses data dari
ACTION
form Syntax: ACTION=”URL”
5.2. Jenis Inputan dalam Form
1. Type=TEXT
Kotak isian bertipe teks ini menerima data karakter (default) sebanyak satu baris.
Jenis- Jenis Atribut pada Input Field Tipe Text :
Atribut Deskripsi
Nama variable dari control yang akan menyimpan nilai
Name
dari input field
Type <INPUT TYPE=”TEXT”>
Value Untuk memberikan value ke input field
Size Jumlah karakter dari input field
Maxlength jumlah karakter maksimum untuk input field
Contoh :
<INPUT TYPE=”TEXT” NAME=”textbox1” VALUE=”” SIZE=”20”>
Tampilan :
2. TYPE=PASSWORD
24
Kotak isian bertipe password ini menerima data karakter, tapi tidak akan ditampilkan karena
kebutuhan masukan password yang bersifat rahasia. Atribut nya sama dengan input field type
text.
Contoh :
<INPUT TYPE="PASSWORD" NAME="PWD" VALUE="" SIZE=”20”>
Tampilan :
3. TYPE=CHECKBOX
Suatu inputan yang memungkinkan kita memilih satu atau lebih pilihan atau tidak memilih
sama sekali, dengan memberikan tanda pada checkbox tersebut.
Jenis-Jenis Atribut pada Input Field Tipe Checkbox :

Atribut Deskripsi
Checked Untuk memberi default check
Name Nama variable dari control yang akan menyimpan nilai dari input field
Type <INPUT TYPE=”CHECKBOX”>
Value Untuk memberikan value ke input
Size Ukuran control
Tampilan :
4. TYPE=RADIO
Hanya mengijinkan memilih satu dari banyak pilihan. Setiap radio button control harus
memiliki nama yang sama, sehingga user hanya bisa memilih satu option saja. Radio button
juga harus secara explisit memberikan nilai ke atribut value.
Jenis-Jenis Atribut pada Input Field Tipe Radio :

Atribut Deskripsi
Checked Untuk memberi default check
Nama variable dari control yang akan menyimpan
Name
nilai dari input field
Type <INPUT TYPE=”RADIO”>
Value Untuk memberikan value ke input
Size Ukuran control
Tampilan :
5. TYPE=BUTTON
25
Jenis-Jenis Atribut pada Input Field Tipe Button :
Atribut Deskripsi
Nama variable dari kontrol yang akan menyimpan
Name
nilai dari input field
<INPUT TYPE=”SUBMIT”> : Mengirimkan
form ke URL yang telah didefinisikan pada atribut
Type ACTION pada tag <FORM>
<INPUT TYPE=”RESET”> : Browser mengembalikan field dalam
form ke dalam nilai default(mengosongkan nilai semua elemen form).
Value Memberikan nama label pada button
Size Menentukan lebar button
Ada 4 (empat) jenis varian pada elemen ini :

a. Submit
Tombol ini berfungsi untuk memanggil url yang sudah didefisikan di atribut action.
b. Reset
Tombol ini berfungsi untuk mengembalikan form ke kondisi awal (mengosongkan nilai
semua elemen yang ada pada form).
c. Button
Tombol ini berfungsi untuk membuat form lebih interaktif dengan memanggil script lain.
d. Image
Menggunakan gambar sebagai pengganti tombol.
Contoh :
<INPUT TYPE="SUBMIT" NAME="SUBMIT" VALUE="SUBMIT">
Tampilan :
<INPUT TYPE="RESET" NAME="RESET" VALUE="RESET">

Tampilan :
6. Tag <TEXTAREA>
Tag ini digunakan untuk membuat input teks yang lebar, bisa menampung lebih banyak
karakter dibanding input field bertipe TEXT.
Teks yang berada diantara tag <TEXTAREA> dan </TEXTAREA> secara default akan
ditampilkan sesuai aslinya.
Jenis-Jenis Atribut pada Input Tipe Textarea :

Attribute Deskripsi
Rows Jumlah baris
Cols Lebar kolom text area
Wrap WRAP=PHYSICAL – tampilan word-wraps. Default WRAP=OFF
Tampilan :
7. TYPE=IMAGE NAME=SUBMIT SRC=”…”
26
Mengirimkan informasi form seperti halnya tombol Submit, hanya berbentuk gambar.
Contoh :
<INPUT TYPE="IMAGE" NAME="SUBMIT" SRC="submit.jpg">
Tampilan :
8. Tag <SELECT> dan <OPTIONS>

Digunakan untuk membuat input field yang berbentuk pilihan. Tag
<SELECTION> dan <OPTION> ini harus digunakan secara bersama- sama. Tag <OPTION>
ini mendefinisikan pilihan dari item-item. Tag ini dipasangkan diantara tag <SELECT> dan
</SELECT>.
Jenis-Jenis Atribut Pada Input Field Tipe Select :

Atribut Deskripsi
Value Teks yang ditampilkan pada tombol, default =“Submit Query”
Size Untuk menentukan jumlah baris yang di tampilkan
Multiple Untuk menentukan apakah user boleh memilih lebih dari satu option
atau tidak.
Selected Pilihan ini dipilih secara default.
Contoh :
<select name="job" size="1">
<option value="1">Web Developer</option>
<option value="2">Web Designer</option>
<option value="3" selected>Web Administrator</option>
<option value="4">Web Database</option>
</select>
Tampilan :
Jika di klik panah ke bawah
Jika size = "3", maka tampilannya sebagai berikut :
B. PRAKTEK
27
1. Praktek_5.1.html (Menambahkan Elemen Text)
<html>
<head>
<title>Menambahkan Elemen Text</title>
</head>
<body>
Nama : <input type="text" name="nama"> <br>
Nim : <input type="text" name="nim" value="901" maxlength="9" size="9">
</body>
</html>
2. Praktek_5.2.html (Menyembunyikan Password)

<html>
<head>
<title>Menyembunyikan Password</title>
</head>
<body>
Password Anda : <input type="password" name="nama" size="30" maxlength="15">
</body>
</html>
3. Praktek_5.3.html (Menampilkan Pilihan pada Dokumen, menggunakan Radio)

<html>
<head>
<title>Menambahkan Pilihan pada Dokumen HTML</title>
</head>
<body>
Jenis kelamin :
<br><input type="radio" name="jns_kelamin" value="L" checked>Laki-laki
<br><input type="radio" name="jns_kelamin" value="P">Perempuan
</body>
</html>
4. Praktek_5.4.html (Pilihan Ganda pada Dokumen, menggunakan Checkbox)

<html>
<head>
<title>Pilihan Ganda pada Dokumen HTML</title>
</head>
<body>
Hobi Anda :
<br><input type="checkbox" name="hobi1" value="baca" checked>Baca
<br><input type="checkbox" name="hobi2" value="belanja">Belanja
<br><input type="checkbox" name="hobi3" value="coding" checked>Coding
<br><input type="checkbox" name="hobi4" value="nonton">Nonton
</body>
</html>
5. Praktek_5.5.html (Menambahkan Tombol di Dokumen HTML)
28
<html>
<head>
<html>
<head>
<title>Menambahkan Tombol di Dokumen HTML</title>
</head>
<body>
<input type="submit" value ="Kirim" name="Submit">
<input type="reset" value ="Ulangi" name ="Reset">
<input type="button" value ="Batal" name ="Cancel">
<input type="image" name="Gambar" src="Logo-UMI.jpg"
width="50" height="50">
</form>
</body>
</html>
6. Praktek_5.8.html (Menerima Masukan yang Panjang, menggunakan Textarea)

<html>
<head>
<title>Menerima Masukan yang Panjang</title>
</head>
<body>
Deskripsi diri :
<br>
<textarea name="deskripsi" cols="25" rows="5">
Tuliskan deskripsi diri Anda disini
</textarea>
</body>
</html>
7. Praktek_5.9.html (Pilihan Menggunakan Dropdown)

<html>
<head>
<title>Pilihan Menggunakan Dropdown</title>
</head>
<body>
Peminatan pilih salah satu:
<br>
<select name="peminatan">
<option value="wm">Web Master</option>
<option value="db">Database Management</option>
<option value="cnm">Computer Network Management</option>
</select>
<br>
Kemampuan :
<br>
<select size="4" name="kemampuan" multiple>
<option value="asp">asp</option>
<option value="php">php</option>
<option value="mysql">mysql</option>
<option value="oracle">oracle</option>
<option value="hardware">hardware</option>
<option value="jaringan">jaringan</option>
</select>
</body>
</html>
C. LATIHAN
29
1. Buatlah sebuah form lengkap seperti pada gambar di bawah ini :
2. Buatlah sebuah form lengkap seperti pada gambar di bawah ini :
MODUL 6
30
FRAME
A. TEORI
6.1. Frame
Diperkenalkan teknik lain dalam mengatur tata letak dokumen web dengan menggunakan
frame. Sama halnya dengan tabel, frame akan membagi web page dalam baris dan kolom,
bedanya, jika digunakan frame, web page akan terbagi menjadi beberapa windows yang
masing – masing bagian mempunyai nama (nantinya akan menjadi target). Tiap bagian
windows ini akan berisi web page. Jadi dengan menggunakan frame, kita dapat menampilkan
beberapa web page dalam satu halaman. Sehingga tampilan halaman HTML yang salah satu
atau beberapa bagian berganti-ganti isinya sedangkan bagian lain tetap sehingga dapat
menghemat bandwidth internet dan mempercepat proses download secara keseluruhan.
Sintaks umum yang digunakan untuk membuat frame :

<HTML>
<HEAD>
</HEAD>
<FRAMESET BORDER=”#” { [ROWS | COLS] } = { #,[#,[...]] }>
<FRAME SRC=”url” NAME=”FrameName”>
</FRAMESET>
</HTML>
6.2. Frame Syntax

<FRAMESET>
Tag frameset ini mempunyai 2 buah atribut ROWS dan COLS. Frame document ini tidak
mempunyai BODY, tapi memiliki tag <FRAMESET> dan diakhiri dengan tag
</FRAMESET>. Di dalam FRAMESET ini hanya dapat mempunyai tag FRAMESET
lainnya, tag FRAME atau tag NOFRAMES.
ROWS=”list”
Digunakan untuk frame pembagi horizontal. Atribut ROWS memakai daftar nilai yang
dipisahkan dengan koma. Secara umum digunakan nilai prosentase.
<FRAMESET ROWS=”10%,25%,65%”>
Jika totalnya tidak 100%, maka semua presentase akan diskalakan sehingga total menjadi
100%. Untuk pengisian nilainya dimungkinkan juga menggunakan nilai pixel selain
menggunakan nilai prosentase, untuk menggunakan sisa space pada layar bisa digunakan
tanda *
<FRAMESET ROWS=”100,250,*”>
<FRAMESET ROWS=”100,*,300,100”>
COLS=”list”
Digunakan untuk frame pembagi vertikal. Atribut COLS memakai daftar nilai
yang dipisahkan dengan koma. Tag FRAMESET ini dapat bersarang didalam tag
FRAMESET yang lain.
<FRAMESET COLS=”20%,80%”>
<FRAMESET COLS=”200,*”>
<FRAME>
31
Mendefinisikan frame tunggal dalam frameset. Beberapa atribut yang sering digunakan
adalah :
SRC=”url” :Atribut SRC ini berisi URL ke dokumen yang akan ditampilkan pada frame ini.
NAME=”window_name” : Atribut NAME berisi nama frame yang bisa ditunjuk oleh link
pada dokumen yang lain, biasanya dari frame lain pada dokumen yang sama. Atribut
NAME ini bersifat optional.
Frame bernama bisa mempunyai isi target window dengan menggunakan atribut
TARGET.
SCROLLING=”yes|no|auto”
Atribut SCROLLING mendeskripsikan apakah frame harus mempunyai scrollbar atau tidak.
Pilih “yes” jika diinginkan scrollbar selalu tampak pada frame, pilih “no” jika tidak
menginginkan scrollbar tidak tampak atau pilih “auto” sehingga browser yang nanti
menentukan akan menampilkan scrollbar jika dibutuhkan. Atribut ini bersifat optional dan
nilai defaultnya adalah auto.
NORESIZE
Atribut NORESIZE ini mengindikasikan jika frame tidak dapat di ubah ukurannya oleh user.
Secara default, semua frame dapat diubah ukurannya.
BORDERCOLOR=color
Memberi warna pada border yang memisahkan frame ini dengan yang lain, misalkan
BORDERCOLOR=green.
BORDERCOLOR dapat digunakan pada satu atau lebih <FRAME> atau dengan
<FRAMESET> untuk mengatur warna default pada semua border.
MARGINWIDTH=pix
Secara default, terdapat 8 pixel margin kiri dan kanan untuk setiap frame yang dapat
diperkecil ataupun diperbesar.
MARGINHEIGHT=pix
Secara default, terdapat 8 pixel margin atas dan bawah pada setiap frame yang dapat
diperkecil atau diperbesar.
6.3. Frame Target

Target frame digunakan untuk menentukan tujuan ditampilkannya suatu informasi dari
suatu link. Biasanya, target frame ini disesuaikan dengan nama frame yang akan dijadikan
tujuan menampilkan informasi tersebut.
Ada nama frame predefined yang dapat digunakan sebagai target, seperti yang diperlihatkan
pada tabel di bawah ini : _self, _top, _parent, _blank.
Jenis – Jenis Target Frame :
32
Nama Frame Kegunaan
Digunakan apabila target frame adalah frame tempat
_self
link berada
Digunakan apabila target frame adalah windows
tempat frame berada. Dengan menggunakan _top sebagai target, maka
_top
definisi frame yang ada pada window browser akan hilang, diganti
dengan definisi frame yang baru jika ada
Target frame adalah setingkat di atas frame link
_parent
berada
Digunakan apabila hasil link ingin ditampilkan di
_blank
window baru
B. PRAKTEK
Sebelum mencoba membuat frame, silahkan buat beberapa dokumen web yang nanti akan
ditampilkan di tiap frame. Misalkan terdapat tiga halaman yang akan ditampilkan yang terdiri
dari halaman header.html, menu.html, main.html, prodi_si.html, home.html.
1. Header.html
<html>
<head>
<title>Header FIKOM-UMI </title>
</head>
<body>
<center>
<font size="6" color="red">Universitas Methodist Indonesia</font> <br>
<font size="5" color="blue">Fakultas Ilmu Komputer</font> <br>
<b>Jl. Hang Tuah No.8 Medan</b>
<hr>
</center>
</body>
</html>
2. Main.html
<html>
<head>
<title>Main FIKOM-UMI</title>
</head>
<body>
<h3>Selamat datang di Fakultas Ilmu Komputer</h3>
Saat ini kami berlokasi di Kampus Universias Methodist Indonesia
<br>Jl. Hang Tuah No.8 Medan<br>
Beberapa Program Studi yang terdapat di Fakultas Ilmu Komputer
diantaranya :
<ol>
<li>Program Studi Sistem Informasi</li>
<li>Program Studi Teknik Informatika</li>
</ol>
</body>
</html>
3. Prodi_SI.html
33
<html>
<head>
<title>Program Studi Sistem Informasi</title>
</head>
<body>
<h3> Program Studi Sistem Informasi </h3>
<hr>
Program Studi ini berkonsentrasi untuk mencetak lulusan yang mampu
menguasai teknologi ICT yang handal dan siap pakai.
Kurikulum yang dipersiapkan untuk mencapai tujuan tersebut seperti
diperlihatkan pada tabel berikut ini :
<table width="100%" border="1" cellpadding="1" cellspacing="1">
<tr bgcolor="#e2e2e2">
<td>Tahapan</td>
<td>Mata Kuliah / Praktikum</td>
</tr>
<tr>
<td rowspan="7">Semester 1</td>
<td>Algoritma Pemrograman</td>
</tr>
<tr><td>Bahasa Inggris</td></tr>
<tr><td>Pengenalan Komputer</td></tr>
<tr><td>Praktikum Pascal</td></tr>
<tr><td>Praktikum Pengenalan Komputer</td></tr>
<tr><td>Praktikum Aplikasi Internet</td></tr>
<tr><td>Praktikum Dasar Jaringan Komputer</td></tr>
</table>
</body>
</html>
4. Menu.html
<html>
<head>
<title> Header FIKOM-UMI </title>
</head>
<body>
[ <a href="Menu.html"> Home </a> ]<br>
[ <a href="Prodi_SI.html" target="main">Program Studi Sistem
Informasi</a> ]<br>
[ <a href="#"> Teknik Informatika </a> ]
</center>
</body>
</html>
5. Home.html
<html>
<head>
<title>Menggunakan Frame</title>
</head>
<frameset rows=100,*>
<frame src="Header.html" scrolling="no" name="atas">
<frameset cols=250,*>
<frame src="Menu.html" name="kiri">
<frame src="Main.html" name="main">
</frameset>
</frameset>
<noframes><body>
</body></noframes>
</html></html>
C. LATIHAN
34
Buatlah dokumen HTML seperti pada gambar dibawah ini dengan menggunakan teknik
frame. File-file yang dibuat adalah:
a. Index.html
b. Header.html
c. Menu.html
d. Isi.html
e. Footer.html
f. Visi.html
g. Fakultas.html
h. Fasilitas.html
Index.html
35
36
37
MODUL 7
CSS ( Cascading Style Sheet)
A. TEORI
7.1. Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS) adalah suatu bahasa stylesheet yang digunakan untuk
mengatur tampilan suatu dokumen yang ditulis dalam bahasa markup. CSS diperkenalkan
untuk pengembangan website pada tahun 1996. Nama CSS didapat dari fakta bahwa setiap
deklarasi style yang berbeda dapat diletakkan secara berurutan, yang kemudian akan
membentuk hubungan parent-child pada setiap style.
Penggunaan yang paling umum dari CSS adalah untuk memformat halaman web yang ditulis
dengan HTML dan XHTML. Spesifikasi CSS diatur oleh World Wide Web Consortium
(W3C). CSS memungkinkan halaman yang sama untuk ditampilkan dengan cara yang
berbeda untuk metode presentasi yang berbeda, seperti melalui layar, cetak, suara (sewaktu
dibacakan oleh browser basis-suara atau pembaca layar), dan juga alat pembaca braille.
Halaman HTML atau XML yang sama juga dapat ditampilkan secara berbeda, baik dari segi
gaya tampilan atau skema warna dengan menggunakan CSS.
7.2. Keuntungan Menggunakan CSS

CSS digunakan untuk mempersingkat penulisan tag HTML seperti font,color,text, dan table
menjadi lebih ringkas sehingga tidak terjadi pengulangan tulisan.
Cascading Style Sheet, tahap 1 (CSS1) yang dipopulerkan oleh World Wide Web Consortium
(W3C) telah menetapkan versi terbaru peselancar Web Netscape dan Microsoft untuk
menentukan jenis gaya yang mungkin atau kenyataan yang menterjemahkan ciri-ciri elemen
gaya dalam sebuah halaman Web. CSS disediakan untuk memberikan kebebasan bagi para
desainer halaman web sesuai dengan yang dikehendakinya.
Keuntungan menggunakan CSS :

 Memisahkan presentastion sebuah dokumen dari content document itu sendiri.
 Mempermudah dan Mempersingkat pembuatan dan pemeliharaan dokumen web
 Mempercepat proses rendering/pembacaan HTML.
7.3. Penempatan CSS
7.3.1. Inline Style Sheet

CSS dalam posisi inline style sheet dituliskan menjadi satu dengan halaman web yang akan
diatur style-nya dan menjadi bagian dari body.
Penulisan style dilakukan dengan cara menambahkan atribut title pada elemen (tag) HTML
yang akan diatur style-nya. Oleh karena itu, untuk mengimplementasikan CSS pada
halaman web, semua tag harus diformat secara independen.
Dengan menggunakan model penempatan inline style sheet, jika ada sebuah tag HTML yang
digunakan berulang kali dalam sebuah halaman web, pembuat website dapat
mengimplementasikan style yang berbeda pada tag tersebut. Ketika menggunakan inline style
sheet untuk memanipulasi halaman web, pembuat web hanya dapat menggunakan satu
property saja pada tag HTML yang akan dimanipulasi.
Format Statement : SELECTOR {PROPERTY:VALUE}
38
7.3.2. Embedded Style Sheet
Sama halnya dengan CSS dalam posisi inline style sheet, penulisan CSS dalam posisi
embedded style sheet juga menjadi satu dengan halaman web yang akan diatur style-nya,
hanya saja, posisi CSS menjadi bagian dari header (berada diantara tag <head>) dengan
menambahkan tag <style type=”text/css”>.
Dengan menggunakan model penempatan CSS sebagai embedded style sheet, pembuat web
cukup satu kali mendefinisikan style yang akan dikenakan pada tag – tag yang berada dalam
halaman web. Jika ada sebuah tag yang digunakan secara berulang, secara otomatis akan
mempunya style yang sama, berbeda dengan model inline style sheet yang mengharuskan
pembuat web menentukan style pada tag – tag yang digunakan berulang kali dan
memungkinkan untuk menentukan style yang berbeda pada tag tersebut.
Format Statement :
"HTML tag"{ "CSS Property":"Value" ; }
"HTML tag"{ "CSS Property1":"Value1";
"CSS Property2":"Value2"; ..}
7.3.3. Linked Style Sheet

Berbeda dengan 2 (dua) model penempatan CSS sebelumnya, menggunakan linked style
sheet berarti harus menyediakan sebuah file CSS khsusus berisi berbagai format style yang
terpisah dari halaman web. File ini nantinya akan dipanggil oleh halaman web yang
membutuhkan pengaturan style.
Dengan menggunakan model ini, style akan terpusat pada sebuah file, sehingga jika ada
pengubahan style, pembuat website tidak perlu merubah di semua halaman web yang dibuat,
tetapi cukup dengan merubah style yang didefinisikan pada file CSS.
Untuk menggunakan file lain yang berisi css pada file HTML, digunakan tag <link> yang
ditempatkan pada bagian page header atau diantara tag <head>....</head>
Untuk menggunakan linked style sheet, setidaknya dibutuhkan 2 (dua) file yang masing –
masing berfungsi sebagai file css (yang akan dipanggil) dan file HTML (yang akan
memanggil).
Tahap pertama, buat sebuah file css dan simpan dengan menggunakan nama file mystyle.css
dengan isi script css sebagai berikut :
p { font-family: Arial, Helvetica, sans-serif; font-size: 12pt;
color: #FF0000; font-style:italic}
7.4. Aturan Penulisan pada CSS

Sintaks CSS dibagi dalam 3 bagian :
Selector {property : value}
Dimana :
 Selector berisi tag HTML yang akan didefinisikan (body, H1, font, dll)
 Property merupakan atribut yang akan di-set/diubah
 Value merupakan nilai dari property
Contoh penulisan CSS :
H1 {
Font-family : arial; Color :
#0000FF
}
Keterangan :
H1 merupakan selector, Color merupakan property, dan #0000FF merupakan value
39
7.5. CSS Selector
CSS selector adalah bagian terpenting dari CSS. Selector mendefinisikan elemen – elemen
HTML mana saja yang akan dimanipulasi menggunakan kode CSS.
Ada 4 (empat) macam selector :

1. Tag / elemen
Semua tag /elemen HTML yang berada pada bagian <body> merupakan selector.
2. Selector bebas
Seorang web design dapat membuat tag sendiri yang difungsikan sebagai CSS.
3. Class
Pada pendeklarasiannya, penulisan selector berbentuk class diawali dengan tanda titik (.),
dan pada file HTML yang memanggilnya, ditambahkan atribut class.
4. ID
Pada pendeklarasiannya, penulisan selector berbentuk ID diawali dengan tanda pagar
(#), dapat digunakan untuk mendefinisikan header, content, dan desain dalam desain web
karena didefinisikan dengan ID berbeda.
B. PRAKTEK
1. Praktek_7.1.html (Menggunakan sebuah property untuk memanipulasi font )
<htm>
<head>
<title>CSS untuk memanipulasi font</title>
</head>
<body>
<h3 style="font-family:'Courier New', Courier ">Fakultas Ilmu Komputer
Universitas Methodist Indonesia Medan (FIKOM-UMI)</h3>
<p style="font-family:Verdana, Arial, Helvetica, sans-serif">
Fakultas Ilmu Komputer Universitas Methodist Indonesia Medan (FIKOM-UMI)
yang berdiri sejak 2005 merupakan salah satu perguruam tinggi di Medan.
</p>
<p style="font-size:16px"> Sebelum fakultas ini berdiri, jauh sebelumnya

sudah berdiri fakultas-fakultas lainnya yang membentuk Universitas
Methodist Indonesia Medan di bawah naungan Yayasan Pendidikan Gereja
Methodist Indonesia.</p>
<p style="font-style:italic"> Dalam penyelenggaraan FIKOM-UMI Medan,

kegiatan - kegiatannya dipandu oleh tata nilai dan moral berazaskan
kekristenan yang diterapkan pada sistem insitusi.</p>
</body>
</html>
40
2. Praktek_7.2.html (Memanipulasi font dengan memberikan sebuah nilai pada
selector)
<html>
<head>
<style type="text/css">
p {
font-family:Verdana, Arial, Helvetica, sans-serif
}
td {
font-weight:bold
}
a {
font-size:24px
}
</style>
</head>
<body>
<h2> Fakultas Ilmu Komputer Universitas Methodist Indonesia Medan (FIKOM-
UMI)</h2>
<p> Fakultas Ilmu Komputer Universitas Methodist Indonesia Medan (FIKOM-
UMI) yang berdiri sejak 2005 merupakan salah satu perguruam tinggi di
Medan.</p>
<table width="100%">
<tr>
<td>
Sebelum fakultas ini berdiri, jauh sebelumnya sudah berdiri fakultas-
fakultas lainnya yang membentuk Universitas Methodist Indonesia Medan
di bawah naungan Yayasan Pendidikan Gereja Methodist Indonesia.</td>
</tr>
<tr>
<td>
Dalam penyelenggaraan FIKOM-UMI Medan, kegiatan - kegiatannya dipandu
oleh tata nilai dan moral berazaskan kekristenan yang diterapkan pada
sistem insitusi.</td>
</tr>
</table>
<br>
Tata nilai tersebut tercermin dalam Visi, Misi, dan Tujuan Fakultas Ilmu
Komputer Universitas Methodist Indonesia Medan.
</body>
</html>
3. Praktek_7.3.html (Memanipulasi font dengan mengisikan beberapa nilai pada

sebuah selector)
<html>
<head>
td {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-style:italic;
}
a {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
font-weight:bold
}
</style>
</head>
<body>
<h3> Fakultas Ilmu Komputer Universitas Methodist Indonesia Medan (FIKOM-
UMI)</h3>
<tr> <td>
Fakultas Ilmu Komputer Universitas Methodist Indonesia Medan (FIKOM-UMI)
yang berdiri sejak 2005 merupakan salah satu perguruam tinggi di
Medan.<br> </td>
</tr><tr><td>
Sebelum fakultas ini berdiri, jauh sebelumnya sudah berdiri fakultas-
fakultas lainnya yang membentuk Universitas Methodist Indonesia Medan
di bawah naungan Yayasan Pendidikan Gereja Methodist
Indonesia.<br> </td></tr>
41
<tr>
<td>
Dalam penyelenggaraan FIKOM-UMI Medan, kegiatan - kegiatannya dipandu
oleh tata nilai dan moral berazaskan kekristenan yang diterapkan pada
sistem insitusi. <br> </td>
</tr>
<tr>
<td>Untuk kembali ke berita sebelumnya, <a
href="Praktek_7.2.html">silahkan klik disini</a></td>
</tr>
</table>
</body>
</html>
4. Praktek_7.4.html (Memanipulasi font dengan menggunakan selector bebas, class,

dan ID)
<html>
<head>
tulisan_miring {
font-size:12px;
font-style:italic;
}
. cetak_tebal {
font-size:12px;
font-weight:bold
}
#14pt {
font-size:14pt;
}
</style>
</head>
<body>
<h3> Fakultas Ilmu Komputer Universitas Methodist Indonesia Medan
(FIKOM-UMI)</h3>
<tr>
<td>
<tulisan_miring>
Fakultas Ilmu Komputer Universitas Methodist Indonesia Medan
(FIKOM-UMI) yang berdiri sejak 2005 merupakan salah satu perguruam
tinggi di Medan.
</tulisan_miring><br>
</td>
</tr>
<tr>
<td class="cetak_tebal">
Sebelum fakultas ini berdiri, jauh sebelumnya sudah berdiri
fakultas-fakultas lainnya yang membentuk Universitas Methodist
Indonesia Medan di bawah naungan Yayasan Pendidikan Gereja
Methodist Indonesia. <br>
</td>
</tr>
<tr>
<td id="14pt">
Dalam penyelenggaraan FIKOM-UMI Medan, kegiatan - kegiatannya
dipandu oleh tata nilai dan moral berazaskan kekristenan yang
diterapkan pada sistem insitusi. <br>
</td>
</tr>
</table>
</body>
</html>
42
5. Praktek_7.5.html (Menggunakan Linked Style Sheet)
Langkah 1 : Siapkan file untuk mendefinisikan style, simpan dengan nama file
mystyle.css
/* CSS Document */
tulisan_miring {
font-size:12px;
font-style:italic;
}
.cetak_tebal {
font-size:12px;
font-weight:bold
}
#14pt {
font-size:14pt;
}
p {
font-family:Verdana, Arial, Helvetica, sans-serif
}
td {
font-weight:bold
}
a {
font-size:24px
}
Langkah 2 : Pemanggilan file CSS ke dalam halaman web

<html>
<head>
<link href="mystyle.css" rel="stylesheet" type="text/css">
</head>
<body>
(FIKOM-UMI)</h3>
<tr>
<td>
<tulisan_miring>
tinggi di Medan.
</tulisan_miring><br>
</td>
</tr>
<tr>
<td class="cetak_tebal">
</td>
</tr>
<tr>
<td id="14pt">
diterapkan pada sistem insitusi.<br>
</td>
</tr>
</table>
</body>
</html>
43
6. Praktek_7.6.html (Memanipulasi color dan background halaman web)
<html>
<head>
<title>CSS untuk memanipulasi color dan background</title>
.warna_background {
background-color:#00CCFF
}
.mewarnai_tulisan {
color:red
}
.background_bergambar {
background-image:url(Logo_UMI.jpg);
background-repeat:no-repeat
}
.background_bergambar_bawah {
background-image:url(Logo_UMI.jpg);
background-position:right;
background-repeat:repeat-y
}
</style>
</head>
<body>
(FIKOM-UMI)</h3>
<tr>
<td class="mewarnai_tulisan">
tinggi di Medan.
<br>
</td>
</tr>
<tr>
<td class="warna_background">
</td>
</tr>
</table>
<br>
<table width="100%" border=”1”>
<tr>
<td height="350" width="50%" class="background_bergambar"
valign="bottom">
diterapkan pada sistem insitusi.</td>
<td class="background_bergambar_bawah"> </td>
</tr>
</table>
</body>
</html>
44
C. LATIHAN
1. Buatlah dokumen HTML seperti pada gambar berikut dengan menggunakan CSS :
2. Buatlah dokumen HTML seperti pada gambar berikut dengan menggunakan CSS :
45

Modul Praktikum Desain Web

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

Modul Praktikum Desain Web

Diunggah oleh

Hak Cipta:

Format Tersedia

MODUL PRAKTIKUM

Firdaus, S.Kom., M.Kom

1.2. Struktur Dasar HTML

1.3. Memulai Membuat Dokumen dengan Format HTML

Gambar 1.1 Penyimpanan Dokumen HTML

Gambar 1.2 Hasil Eksekusi Contoh 1.1

2.1. Format Dokumen HTML

2.1.4. Line Breaks

2.1.5. Teks Preformat

2.1.8. Karakter Spesial

Tipe Penomoran pada Ordered List

2.2.2. List Tanpa Urutan (Unordered Lists)

2. Praktek_2.2.html (Memformat paragraf)

3. Praktek_2.3. html (Line Break)

4. Praktek_2.4.html (Preformatted Text)

5. Praktek_2.5.html (Memformat Tulisan)

8. Praktek_2.8.html (Ordered List)

9. Praktek_2.9.html (Unordered Lists)

2. Buatlah dokumen HTML dengan tampilan sebagai berikut :

Sintaks tag link adalah sebagai berikut:

<A href=url_tujuan> nama_link </A>

Beberapa atribut yang dapat ditambahkan dalam tag <a> diantaranya :

3.2. Membuat Link antar Dokumen HTML

Membuat halaman target link dok_tujuan.html :

3.3. Membuat Link ke Bagian Tertentu dalam Dokumen

atau dapat ditulis lengkap:

dan untuk nama anchornya:

4. Praktek_3.4.html (Link ke dokumen yang sama )

6. Praktek_3.6.html (Gambar sebagai Hyperlink)

4.2. Membuat Tabel

4.3. Menambahkan Judul Tabel

4.4. Memformat Baris

Jenis atribut pada tag <TR> antara lain :

4.5. Memformat Kolom

Jenis atribut pada tag <TD> antara lain :

4.6. Mengatur CELLSPACING dan CELLPADDING

2. Praktek_4.2.html (Menambahkan Judul Tabel)

<BR>Contoh penggunaan judul tabel yang terletak di bawah

<form method=”post atau get” action=”program_pemroses”>

Tag <FORM> digunakan untuk membuat form dalam dokumen HTML.

5.2. Jenis Inputan dalam Form

<INPUT TYPE="PASSWORD" NAME="PWD" VALUE="" SIZE=”20”>

Jenis-Jenis Atribut pada Input Field Tipe Checkbox :

Jenis-Jenis Atribut pada Input Field Tipe Radio :

Ada 4 (empat) jenis varian pada elemen ini :

<INPUT TYPE="RESET" NAME="RESET" VALUE="RESET">

Jenis-Jenis Atribut pada Input Tipe Textarea :

7. TYPE=IMAGE NAME=SUBMIT SRC=”…”

<INPUT TYPE="IMAGE" NAME="SUBMIT" SRC="submit.jpg">

8. Tag <SELECT> dan <OPTIONS>

Jenis-Jenis Atribut Pada Input Field Tipe Select :

Jika size = "3", maka tampilannya sebagai berikut :

2. Praktek_5.2.html (Menyembunyikan Password)

3. Praktek_5.3.html (Menampilkan Pilihan pada Dokumen, menggunakan Radio)

4. Praktek_5.4.html (Pilihan Ganda pada Dokumen, menggunakan Checkbox)

5. Praktek_5.5.html (Menambahkan Tombol di Dokumen HTML)

6. Praktek_5.8.html (Menerima Masukan yang Panjang, menggunakan Textarea)

7. Praktek_5.9.html (Pilihan Menggunakan Dropdown)

2. Buatlah sebuah form lengkap seperti pada gambar di bawah ini :

Sintaks umum yang digunakan untuk membuat frame :

6.2. Frame Syntax

6.3. Frame Target

Jenis – Jenis Target Frame :