Scribd
Unggah
137 tayangan13 halaman

Modul Web Design

Diunggah oleh

vcwalet
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
137 tayangan13 halaman

Modul Web Design

Diunggah oleh

vcwalet
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 13

MODUL MATERI

Disusun :
Rachmat Hidayat, A.Md.Kom
www.tamhcar.cjb.net - www.tamhcar.4shared.com
[email protected] - Hp. 081.336.111.211





2007
Design Grafis, Web Programming, Software Provider :: [email protected]

By RACHMAT HIDAYAT, A.Md.Kom : 081.336.111.211 Belajar Web Design - 1
BAB 1
HTML TINGKAT DASAR

Dasar dari semua pemrograman web adalan pemrograman HTML, sehingga dikatakan
bahwa tidak akan dapat membangun sebuah gedung tanpa ada pondasi yang mendasari
dari gedung tersebut. Apapupn bagus dan kuatnya gedung tersebut bila tanpa ada pondasi
maka tidak akan dapat bertahan lama. Dalam modul ini semua contoh pemrograman dicoba
pada browser Internet Explorer, akan tetapi tidak menutup kemungkinan untuk
menggunakan browser yang lainnya seperti Netscape Communicator dan lainnya.

A. Format Penulisan HTML
Untuk memulai pembuatan halaman HTML maka dapat dimulai dengan
menyiapkan editor yang akan digunakan, misalkan EditPlus atau Notepad, yang
dilakukan disini adalah menggunakan EditPlus karena mempunyai fasilitas yang
mendukung guna pembuatan HTML maupun PHP nantinya.
Format halaman HTML adalah terdiri dari dua bagian yaitu bagian Header dan
bagian Body, yang semuanya itu dibuka dan ditutup dengan <tag>. Seperti tag <html>
adalah digunakan untuk tanda awal dari suatu halaman HTML, sedangkan tag </html>
(diawali tanda slash) digunakan untuk tanda akhir dari suatu halaman HTML. Tag-tag
tersebut dapat ditulis dengan huruf kecil maupun huruf besar, karena HTML tidak
mengenal case sensitive (membedakan huruf kecil dan besar).
Di bagian tag <head> dapat diisi tag lain, diantaranya sebagai berikut :
Judul halaman : <title> . . . </title>
Informasi untuk search engine : <meta name=penjelasan content=isi>
Penyisipan musik ke dalam web : <bgsound src=namafile.midl loop=-1 | 1>
Di dalam tag <body> dapat ditambahkan attribut, diantaranya sebagai berikut :
Warna teks : text=warna
Warna latar belakang : bgcolor=warna
Latar belakang gambar : background=nama file gambar
Warna link yg pernah dikunjungi : vlink=warna
Warna link yg aktif : alink=warna
Di mana warna dapat berupa kode warna atau kode nama warna. Berikut ini adalah 16
warna tersebut yang otomatis didukung oleh web browser :
Black = #000000 Blue = #0000FF Olive = #808000
White = #FFFFFF Fuchsia = #FF00FF Green = #008000
Red = #FF0000 Gray = #808080 Teal = #008080
Yellow = #FFFF00 Silver = #C0C0C0 Navy = #000080
Lime = #00FF00 Maroon = #800000 Purple = #800080
Aqua = #00FFFF

Agar lebih jelas, coba skrip : hallo.html
<html>
<head>
<title>Judul ditampilkan pada baris teratas browser</title>
<meta name=Author content=Rachmat Hidayat>
<bgsound src=dewa.mid loop=-1>
</head>
<body text=#FFFF00 bgcolor=red background="image\rhodo.bmp">
SELAMAT ANDA TELAH BERHASIL MEMBUAT HALAMAN WEB !
</body>
</html>
Design Grafis, Web Programming, Software Provider :: [email protected]

By RACHMAT HIDAYAT, A.Md.Kom : 081.336.111.211 Belajar Web Design - 2
B. Sytle dari Teks
Ada dua cara untuk pengaturan style teks, yaitu menggunakan heading dengan tag
<h> atau menggunakan font dengan tag <font>. Heading <h> menyediakan 6 style
teks yang dapat diatur menggunakan angka dari 1 sampai 6, dimana angka 1 adalah
ukurang yang paling besar, biasanya digunakan untuk judul atau sub judul, yang dicetak
besar dan tebal (bold). Heading mempunyai attribut untuk mengatur perataan yaitu
Align=Left | Center | Right.
Sedangkan bila menggunakan cara kedua maka digunakan tag <font> dimana
tersedia 7 style teks yang dapat dipilih menggunakan tingkatan dari 1 sampai 7, yang
merupakan kebalikan dari heading, dimana 1 adalah ukuran terkecil sedangkan 7 adalah
ukuran terbesar, dan tidak tebal.
Di dalam tag <font> dapat ditambahkan attribut, diantaranya sebagai berikut :
Ukuran : size=angka 1 s/d 7
Warna Teks : color=warna
Jenis font yang dikehendaki : face=tipe_font
Agar lebih jelas, coba skrip : style teks.html
<html>
<head><title>Style Teks Menggunakan Heading dan Font</title></head>
<body bgcolor="yellow">
<H1 align=center>JUDUL MENGGUNAKAN HEADING 1 DAN ALIGN TENGAH</H1>
<H2 align=right>JUDUL MENGGUNAKAN HEADING 2 DAN ALIGN KANAN</H2>
<H3 align=left>JUDUL MENGGUNAKAN HEADING 3 DAN ALIGN KIRI</H3>
<font size=6 color="blue">TEKS INI MENGGUNAKAN UKURAN 6<br>
DENGAN FONT FACE "DEFAULT" BROWSER<P>
<font size=7 face="verdana" color="red">TEKS INI MENGGUNAKAN UKURAN 7<br>
DENGAN FONT FACE "VERDANA"</font>
</body></html>

C. Pengaturan Format Tata Letak
Pengaturan tata letak disni untuk mengatur tampilan teks agar terlihat rapi dan
sesuai dengan keinginan, yaitu meliputi pengaturan paragraph, ganti baris baru,
pengaturan posisi judul atau sub judul, yaitu diletakkan posisi kiri, tengah atau kanan
dari halaman web, mencetak secara miring untuk penekanan suatu kata, dan lain
sebagainya. Adapun tag-tag yang digunakan disini adalah meliputi tag :
Paragraf : <p> atrributnya adalah Align=letak
Ganti baris : <br>
Preformatted (teks apa adanya) : <pre> . . . </pre>
Indentasi (tabulasi) : <blockquote> . . . </blockquote>
Huruf tebal : <b> . . . </b> atau <strong> . . . </strong>
Huruf miring : <i> . . . </i> atau <em> . . . </em>
Huruf garis bawah : <u> . . . </u>
Subscript : <sub> . . . </sub>
Superscript : <sup> . . . </sup>
Huruf kecil : <small> . . . </small>
Huruf Besar : <big> . . . </big>
Perataan tampilan teks : <div align=...>
Mencoret Teks : <strike> . . . </strike>
Garis horisontal : <hr> memiliki atribut sebagai berikut :
Align=letak Size=angka ketebalan
Width=angka Lebar NoShade {tanpa bayangan}
Design Grafis, Web Programming, Software Provider :: [email protected]

By RACHMAT HIDAYAT, A.Md.Kom : 081.336.111.211 Belajar Web Design - 3
Teks dapat lebih dibuat menarik dengan menjalankan teks yang diinginkan. Teks
berjalan dapat dibuat dengan tag : <marquee> . . . </marque>
Adapun atribut yang dapat ditambahkan pada tag <marquee>, sebagai berikut :
Mengatur warna background teks : bgcolor=warna
Mengatur arah gerakan : direction=left | right | up | down
Mengatur perilaku gerakan : behavior=scroll | slide | alternate
Scroll : teks bergerak berputar,
Slide : teks bergerak sekali lalu berhenti
Alternate : teks bergerak ke kiri lalu ke kanan, dst.
Menampilkan pesan tool tip : title=pesan
Kecepatan gerakan dlm pixel : scrollamount=angka {makin banyak, makin cepat}
Waktu tunda gerakan : scrolldelay=angka {dalam milidetik}
Mengatur lebar blok : width=lebar {dalam pixel atau persen}
Mengatur tinggi blok : height=tinggi

Agar lebih jelas, coba skrip : format teks.html

<head><title>Pengaturan Format Tata Letak</title></head>
<body>
<font size=5 face="arial">
Modul ajar ini dususun berdasarkan berbagai referensi yang ada,
baik bersumber pada buku teks dan dari alamat-alamat URL yang
ada di <big>Internet</big>. Ditambah dengan <b>pengalaman</b> penulis.
selama mengajar.
<hr align="center" size="4" width="80%" color="blue">
<p>Penulis mengucapkan banyak <small>terima kasih kepada
rekan-rekan</small> yang telah banyak merelakan waktunya.</font>
<p><h2>KATA MUTIARA</h2>
<font size=4 face="verdana"><div align="justify">
<blockquote>
<i>Berakit rakit ke hulu berenang-renang ketepian,
bersakit-sakit dahulu bersenang-senang kemudian.</i><br>
Mempelajari <b>pemrograman web</b> tidaklah semudah membalik tangan,
diperlukan kemauan yang tinggi dapat mempelajarinya, dengan jalan
<em>mempertinggi jam terbang</em> yaitu sering mencoba dan mencoba
lagi sehingga mampu untuk membuat halaman web <sub>statis</sub>
dan <sub>dinamis</sub> dan <sup>benar</sup>,
jangan <strike>diam saja.</strike>.
</blockquote>
<font color="white"><b><div align="center">
<marquee bgcolor="red" direction="right" behavior="alternate"
title="Teks Berjalan">tamhcar SoftDesign - [email protected]
- tamhcar.cjb.net</marquee>
<p><font color="yellow">
<marquee bgcolor="black" width="50%" height="50" direction="up"
behavior="scroll" scrollamount="1"><div align="center">
"Kalau kita tidak punya apa-apa dan bukan siapa-siapa,<br>
maka tidak akan ada orang yang akan menghargai kita",<br>
<font color="cyan">kata Rachmat Hidayat</marquee>
</body></html>

Design Grafis, Web Programming, Software Provider :: [email protected]

By RACHMAT HIDAYAT, A.Md.Kom : 081.336.111.211 Belajar Web Design - 4
Terkadang diinginkan untuk menampilkan teks seperti apa adanya, misalkan sautu
teks program, dimana susunan dari tiap kalimat harus sama persis dengan aslinya.
Untuk keperluan tersebut maka dapat digunakan tag <pre> yang berfungsi untuk
menampilkan teks apa adanya seperti aslinya.
Agar lebih jelas, coba skrip : pre.html pre.html pre.html pre.html
<html>
<head><title>Format Teks Dengan Tag Preformatted</title></head>
<body>
<h3>CONTOH PROGRAM PHP</h3>
<pre>
&lt;?php
$a=9;
$b=5;
for ($i=0; $i<10; $i++) {
$c=$c + $a;
$d=$c - $b;
$e=$c / $d;
print $c;
print $d;
?&gt;
</pre>
</body></html>

Karena karakter < dan C merupakan karakter khusus yang digunakan untuk
membuat tag, maka untuk menampilkan karakter tersebut apa adanya pada halaman
browser maka digunakan entitas karakter, yang terdiri dari tiga karakter yaitu &
(ampersand), # (crash) dan ; (semicolon). Entitas ini mempunyai sifat case sensitive,
dimana memperhatikan penulisan antara huruf kecil dan besar.
Berikut diberikan table karakter entitas dimana sering ditemukan pada halaman
web dan bahkan sering digunakan untuk keperluan tertentu, seperti contoh di atas.

Kode Notasi Tampilan Arti
- &nbsp; Tambah spasi
&#60; &lt; < Lebih kecil
&#61; &gt; > Lebih besar
&#38; &amp; & Ampersand
&#34; &quot; Petik ganda
&#174; &reg; Terdaftar
&#8482; -
TM
Merek dagang
&#169; &copy;

Hak cipta
&#247 &divide; / Pembagian
&#215 &times; X Perkalian

D. Tugas (dikumpulkan pada pertemuan berikutnya)
Buatlah halaman web sederhana sebagai homepage pribadi, yang berisi tentang
data pribadi misalkan NIM, nama, alamat rumah, tempat & tanggal lahir, riwayat
pendidikan, email, hobby, karya-karya penelitian / program yang pernah dibuat,
pengalaman kerja, kesan pertama terhadap Mr. Tamhcar, cita-cita, pengalaman suka
duka, bahasa program yang dikuasai, program-program komputer (software) yang
pernah dicoba, system operasi yang dikuasai, cowok / cewek idaman dan lain-lain.
Gunakanlah tag-tag yang telah dipelajari di atas, buat seindah dan semenarik mungkin.
Design Grafis, Web Programming, Software Provider :: [email protected]

By RACHMAT HIDAYAT, A.Md.Kom : 081.336.111.211 Belajar Web Design - 5
BAB 2
MANIPULASI DAFTAR ITEM DAN TABEL

Didalam bab 1 telah dijelaskan tentang penggunaan tag-tag dasar dari HTML untuk
membuat halaman web, yaitu meliputi format halaman dan style dari teks yang digunakan.
Untuk selanjutnya dibahas mengenai tag-tag yang lain dimana melibatkan penggunaan
bullet, yaitu untuk membuat daftar / list dari satu teks. Di dalam bab ini juga dijelaskan
tentang bagaimana cara membuat table, dimana table banyak digunakan pada pembuatan
halaman web yang memerlukan pengaturan posisi kolom, seperti halnya pada halaman web
suatu portal

A. Manipulasi Daftar Item
Manipulasi list tidak begitu populer secara ekstrim karena ia dapat diganti dengan
gambar bullet. Akan tetapi selain bekerja jauh lebih cepat dari penggunaan gambar
bullet, ia membuat kesan berbeda antara homepage pemula dengan homepage
profesional. Halaman-halaman web yang berisi daftar tentang nama-nama staf, divisi,
stok barang, daftar isi atau indeks biasanya memerlukan tampilan rapi dan profesional.
Ada beberapa tag khusus yang berhubungan dengan pembuatan daftar, diantaranya
<UL>, <OL>, <LI>, <DL>, <DT>, <DD> dan <MULTICOL>.
1. Daftar Tak Berurut | Tanpa Nomor
Daftar tak berurut dapat digunakan untuk membuat daftar item yang isinya
tidak berurut. Tag yang digunakan adalah <UL> (Unordered List) dan setiap item
yang ada di dalam daftar harus didahului dengan tag <LI> (List).
Secara default browser akan menghasilkan gambar bullet berupa bulatan hitam
untuk hitam untuk level pertama, gambar lingkaran untuk item level kedua dan
gambar kotak hitam untuk item level ketiga. Demikian seterusnya secara berulang.
Jika tidak ingin menggunakan bullet default, maka dapat ditambahkan attribut
TYPE dalam tag <UL>, dengan pilihan disc, circle dan square sehingga tag
<ul> menjadi <ul type=kode bullet>
Agar lebih jelas, coba skrip : unordered.html unordered.html unordered.html unordered.html
<html>
<head><title>Daftar Tak Berurut atau Tanpa Nomor</title></head>
<body>
<font face="verdana" size="5">
<h1>~ DEPOT TAMHCAR ~</h1>
<b><u>Daftar Makanan</u></b>
<ul>
<li>Nasi Goreng</li>
<li>Nasi LaLapar</li>
<li>Nasi LoeDech</li>
<li>Nasi Campur Apa Saja</li>
</ul>
<b><u>Daftar Minuman</u></b>
<ul type="square">
<li>Minuman Dingin</li>
<ul>
<li>Coca Cola Cool</li>
<li>Es Teh</li>
</ul><br>
<li>Minuman Panas</li>
<ul>
<li>Kopi Panas</li>
<li>Wedang Jahe</li>
</ul>
</ul>
</body></html>
Design Grafis, Web Programming, Software Provider :: [email protected]

By RACHMAT HIDAYAT, A.Md.Kom : 081.336.111.211 Belajar Web Design - 6
2. Daftar Berurut | Bernomor
Daftar berurut dapat digunakan untuk membuat daftar item dengan nomor
urut. Tag yang dapat digunakan adalah <OL> (Ordered List) dan setiap item yang
ada di dalam daftar harus didahului dengan tag <LI> (List). Anda dapat
menentukan tipe nomor urutnya sendiri dengan mengisi attribut TYPE dengan
tipe_nomor seperti terlihat pada sintaks berikut :
<OL TYPE=tipe_nomor START=angka>
Dimana tipe_nomor digunakan untuk menentukan tipe nomor yang ingin ditampilkan
oleh browser. Dapat berupa salah satu dari : 1 (1, 2, 3, ), a (a, b, c, ), A (A,
B, C, ), i (i, ii, iii, ) dan I (I, II, III, )
angka pada attribut START= adalah angka integer yang dapat digunakan untuk
menentukan angka awal item.
Agar lebih jelas, coba skrip : ordered.html ordered.html ordered.html ordered.html
<html>
<head><title>Daftar Berurut atau Dengan Nomor</title></head>
<body>
<font face="verdana" size="5">
<h1>SERBA GRATIS DARI INTERNET</h1>
<ol type="I">
<li><b>Penyelenggara E-mail Gratis</b></li>
<ol type="A"><br>
<li>DALAM NEGERI :</li>
<ol>
<li>mail.telkom.net</li>
<li>www.bolehmail.com</li>
</ol><br>
<li>LUAR NEGERI :</li>
<ol>
<li>mail.yahoo.com</li>
<li>mail.excite.com</li>
</ol>
</ol><br>
<li><b>Penyelenggara Web Space Gratis</b></li>
</ol>
</body></html>

3. Daftar Definisi
Daftar definisi diperlukan saat kita akan menjelaskan suatu terminologi secara
rapi dan profesional. Secara umum ada dua bagian item di dalam sebuah daftar
definisi. Bagian pertama adalah bagian tabel dan bagian kedua adalah bagian
penjelasan.
Blok daftar definisi ditentukan dengan tag <DL>. Untuk bagian tabel, kita
menggunakan tag <DT>, sedangkan untuk membuat bagian penjelasan atau definisi
kita menggunakan tag <DD>.
Agar lebih jelas, coba skrip : daftar definisi.html daftar definisi.html daftar definisi.html daftar definisi.html
<html>
<head><title>Membuat Daftar Definisi</title>
<body>
<dl>
<dt><i>BAB I</i>
<dd><b>Pendahuluan</b>
Menjelaskan mengenai Evolusi Cyberspace, Word Wide
Web, Perencanaan HomePage serta Editor-editor Web yang
digunakan untuk membuat HomePage.

Design Grafis, Web Programming, Software Provider :: [email protected]

By RACHMAT HIDAYAT, A.Md.Kom : 081.336.111.211 Belajar Web Design - 7
<dt><i>BAB II</i>
<dd><b>Dasar-Dasar Bahasa HTML.</b>
Mengapa kita menggunakan tag-tag serta attribut-
attributnya serta menjelaskan segala sesuatu tentang
dasar-dasar HTML yang harus diketahui sebelum membuat
HomePage.
</dl></body></html>

Jika tag <DD> digunakan tanpa tag<DL>, maka dapat dimanfaatkan untuk
membuat baris pertama paragraf lebih masuk ke dalam (indent).

B. Membuat Tabel
Tabel memungkinkan perancang web untuk mengorganisasikan data dalam
struktur tabulator yang rumit. Tabel juga dapat diisi dengan daftar item, paragraf, form,
gambar, teks-teks preformatted, dan bahkan tabel-tabel yang lain (tabel dalam tabel).
Format sebuah tabel sebenarnya sederhana, akan tetapi dapat menjadi rumit
karena sifat struktur aslinya. Meski sederhana tetapi aturan mainnya harus benar-benar
diikuti, tidak seperti penggunaan tag-tag yang lain. Sebuah tabel dimulai dengan tag
<TABLE>. Setiap baris tabel dibentuk dengan tag <TR> dan setiap kolom dibentuk
dengan tag <TD>, jika kolom ingin huruf didalamnya otomatis tebal dan ketengah,
biasanya untuk judul, maka tag <TD> bisa diganti <TH>.
Di dalam tag <TABLE> dapat ditambahkan attribut, diantaranya sebagai berikut :
Bentuk border di sekeliling tabel : border=angka , angka 0 berarti tidak bergaris
Warna border tabel : bordercolor=warna
Mengatur Posisi tabel : align=left | center | right
Jarak antar border dengan isi : cellpadding=angka
Mengatur tebal frame dlm pixel : cellspacing=angka
Lebar tabel dlm pixel / persen : width=angka
Attribut yang dapat ditambahkan pada tag <TABLE>, <TR> dan <TD> adalah :
Warna latar belakang : bgcolor=warna
Gambar sebagai latar belakang : background=nama_file
Perataan isi sel secara horisontal : align=left | center | right
Perataan isi sel secara vertikal : valign=top | middle | bottom
Untuk menggabung kolom : colspan=angka
Untuk menggabung baris : rowspan=angka
Lebar kolom dlm pixel / persen : width=angka
tinggi baris dlm pixel : height=angka
Agar lebih jelas, coba skrip : tabel sederhana.html tabel sederhana.html tabel sederhana.html tabel sederhana.html
<html>
<head><title>Tabel Sederhana</title></head>
<body>
<table border="1">
<tr>
<th>NRP</th>
<th>NAMA</th>
<th>NILAI</th>
</tr>
<tr> <td>0101</td> <td>Bendot</td> <td>80</td> </tr>
<tr> <td>0102</td> <td>Bokir</td> <td>60</td> </tr>
<tr><td>0103</td><td>Kadir</td><td>72</td></tr>
</table></body><html>

Design Grafis, Web Programming, Software Provider :: [email protected]

By RACHMAT HIDAYAT, A.Md.Kom : 081.336.111.211 Belajar Web Design - 8
Agar lebih jelas attributnya, coba skrip : tabel attribut.html tabel attribut.html tabel attribut.html tabel attribut.html
<html>
<head><title>Attribut Table</title></head>
<body bgcolor="blue">
<table border="1" bgcolor="cyan" align="center" width="300"
bordercolor="green" cellpadding="1" cellspacing="3">
<tr><td align="center" colspan="4">Tabel Mahasiswa</td></tr>
<tr bgcolor="silver" >
<th rowspan="4" bgcolor="white" valign="middle">Mencoba</th>
<th>NRP</th>
<th bgcolor="yellow">NAMA</th>
<th>NILAI</th>
</tr>
<tr align="center" valign="top">
<td align="center">0101</td><td width="50%">Bendot</td><td>80</td>
</tr>
<tr align="center"><td>0102</td><td>Bokir</td><td>60</td></tr>
<tr align="center"><td>0103</td><td>Kadir</td><td>72</td></tr>
</table>
</body><html>


Berikut tabel bersarang, coba skrip : tabel bersarang.html tabel bersarang.html tabel bersarang.html tabel bersarang.html
<html>
<head><title>TabeL Bersarang</title></head>
<table border="1" align="center">
<tr><td align="center" colspan="2">Daftar Harga</td></tr>
<tr>
<td>
<table border="1">
<tr align="center"><td colspan="2">NOKIA</td>
<tr><th>Tipe</th><th>Harga</th></tr>
<tr><td>2100</td><td>300.000</td></tr>
<tr><th>3200</th><th>450.000</th></tr>
</table>
</td>
<td>
<table border="1">
<tr align="center"><td colspan="2">SONY ERICSON</td>
<tr><th>Tipe</th><th>Harga</th></tr>
<tr><td>k510I</td><td>900.000</td></tr>
<tr><th>W810i</th><th>1.650.000</th></tr>
</table>
</td>
</tr>
</table>
</body>
<html>

Design Grafis, Web Programming, Software Provider :: [email protected]

By RACHMAT HIDAYAT, A.Md.Kom : 081.336.111.211 Belajar Web Design - 9
B. Menggunakan Frame
Frame umumnya digunakan untuk menampilkan beberapa halaman html sekaligus
dalam satu layar. Frame sangat bermanfaat jika digunakan untuk membuat menu
dengan link ke berbagai halaman atau menampilkan lebih dari satu subjek dalam satu
halaman.
Untuk memanfaatkan frame, ada dua tag utama yang harus dipakai. Pertama
<FRAMESET> untuk mengatur hal-hal yang berhubungan dengan ukuran frame.
Attribut yang diperlukan adalah sebagai berikut :
Lebar dalam pixel atau persen : rows=lebar1, lebar2, lebarN,
Tinggi dalam pixel atau persen : cols=lebar1, lebar2, lebarN,
Menentukan border pemisah : border=angka
Menentukan warna border : bordercolor=warna

Dan yang kedua adalah <FRAME> untuk mengatur nama dan alamat file yang ingin
ditampilkan dalam frame. Attribut yang digunakan adalah :
Menentukan file html : src=nama_file
Memberi nama frame : name=nama frame
Tidak dapat mengatur ukuran : noresize
Mengatur scrollbar pada layar : scrolling=yes | no | auto
Perhatikan : bahwa pembuatan script HTML untuk frame tidak menggunakan tag
<body>, apabila tag <body> diberikan maka frame tidak akan terbentuk, karena tag
<body> merupakan tampilan isi halaman web dan bukan untuk membuat frame.

Untuk lebih jelas, buatlah beberapa skrip berikut :
File pertama : pelawak.html pelawak.html pelawak.html pelawak.html
<html>
<body bgcolor=cyan>
<font size=5 face="arial"><h2><u>Manfaat HomePage Bagi Pelawak</u></h2>
<b>Pelawak</b> dapat mengisi homepagenya dengan aktifitas grup lawak,
perekrutan anggota jika ada, foto-fot hasil lawatan dalam melawak, jadwal
melawak atau bahkan cerita-cerita humor yang pernah dibuat.
</body></html>

File kedua : musisi.html musisi.html musisi.html musisi.html
<html>
<body bgcolor=lightgreen>
<font size=5 face="verdana"><h2><u>Manfaat HomePage Bagi Musisi</u></h2>
<b>Musisi</b> dapat mengisi homepagenya dengan karya musik, contoh lagu
yang telah diciptakan (baik dalam format MP3, WAV, MIDI), lirik-lirik atau
aransemen lagu yang diciptakan, kelompok musik, personelnya dan lainnya.
</body></html>

File ketiga : frame awal.html frame awal.html frame awal.html frame awal.html
<html>
<head><title>Membuat Frame</title></head>
<frameset cols="60%,40%" >
<frame src="pelawak.html" noresize>
<frame src="musisi.html">
</frameset></html>

Design Grafis, Web Programming, Software Provider :: [email protected]

By RACHMAT HIDAYAT, A.Md.Kom : 081.336.111.211 Belajar Web Design - 10
Dari kedua tampilan frame di atas dapat dibuat kombinasi antara frame vertikal dengan
frame horisontal, sehingga menjadi satu jendela yang mempunyai frame vertikal dan
horisontal. Untuk keperluan tersebut maka diperlukan file HTML lagi yang digunakan
untuk mengisi frame yang ketiga.
File keempat : anda.html anda.html anda.html anda.html
<html>
<body bgcolor="yellow">
<font size=5 face="courier new"><h1><u>Manfaat HomePage Bagi Anda</u></h1>
<b>Anda</b> dapat mengisi homepage Anda dengan data mengenai Anda sendiri,
teman-teman Anda, keluarga Anda, foto-foto Anda, kegiatan Anda, kegiatan
teman-teman Anda, acara mingguan, mengumpulkan teman baru (dari pengunjung
situs), bertukar pikiran dengan teman, dan sebagainya.
</body></html>

Kemudian buatlah skrip frame gabungan.html menjadi :
<html>
<head><title>Vertikal dan Horisontal Frame</title></head>
<frameset cols="30%,70%" bordercolor="red" border="5">
<frame src="anda.html" noresize>
<frameset rows="50%,50%" bordercolor="blue">
<frame src="musisi.html">
<frame src="pelawak.html">
</frameset>
<frame src="musisi.html">
</frameset></html>

BAB 3
IMAGE DAN LINK

Image disini diartikan citra atau gambar, yang digunakan pada suatu homepage untuk
mempercantik tampilan sehingga apabila homepage di tampilkan akan banyak menarik
pengunjung untuk melihatnya. Suatu image memang memang mempunyai seribu satu
makna yang setiap orang mempunyai kata yang berbeda dalam menafsirkan suatu citra.
Kebanyakan image mempengaruhi proses terbukanya suatu homepage. Oleh sebab itu
dibutuhkan image yang mempunyai ukuran kecil, yaitu menggunakan teknik kompresi,
sehingga citra dapat dimampatkan sedemikian sehingga menjadi lebih kecil ukuran bayte-
nya dari sebelum dilakukan kompresi.

A. Menampilkan Image
Untuk dapat menampilkan image maka digunakan tag <img> diikuti dengan
attribut src diikuti nama file image yang akan ditampilkan, selain attribut src, tag
<img> memiliki beberapa attribut lain, diantaranya :
Mengatur posisi image : align=bottom | center | top | left | right
Mengatur tinggi image : height=angka pixel | persen
Mengatur lebar image : width=angka pixel | persen
Mengatur bingkai image : border=angka
Menampilkan teks alternatif : bordercolor=warna

Agar lebih jelas, coba skrip : image.html image.html image.html image.html
<html>
<head><title>Menampilkan Image atau Gambar</title></head>
<body>
<table>
<tr><td><img src="c:\windows\zapotec.bmp"></td>
<td><font size="6">Image ini disisipkan sederhana di dalam tabel</td>
Design Grafis, Web Programming, Software Provider :: [email protected]

By RACHMAT HIDAYAT, A.Md.Kom : 081.336.111.211 Belajar Web Design - 11
</tr></table><br><font size="6">
Image ini <img src="c:\windows\zapotec.bmp" align="bottom"> di bawah<p>
Image ini <img src="c:\windows\zapotec.bmp" align="center"> di tengah<p>
Image ini <img src="c:\windows\zapotec.bmp" align="top"> di atas<p>
<img src="c:\windows\zapotec.bmp" align="left">
<img src="c:\windows\zapotec.bmp" align="right"><div align="justify">
Image yang sebelah kiri menggunakan attribut <b>Align="left"</b>
Sedangkan yang sebelah kanan menggunakan attribut <b>Align="right"</b>,
sehingga ditampilkan image pada tampilan sebelah kanan teks.<p><Br>
<img src="c:\windows\zapotec.bmp" alt="Ukuran asli">
<img src="c:\windows\zapotec.bmp" width="200" alt="Ukuran 200 Pixel">
<img src="c:\windows\zapotec.bmp" width="20" height="200"
alt="Ukuran lebar 20 pixel, tinggi 200 pixel, jadi tidak simetris">
<img src="c:\windows\zapotec.bmp" width="10%" alt="Ukuran 10% dari layar">
</body><html>

B. Hyperlink Relatif
Satu diantara dua tag yang 80%-nya digunakan dalam setiap halaman web adalah
<a> selain tag <img>. Tag ini digunakan untuk melompat ke halaman html lain, baik
yang berada dalam server bersangkutan maupun di server lain. Segala sesuatu (teks
atau gambar) yang diapit dengan tag ini apabila diklik akan membawa user ke halaman
lain sesuai attribut href yang digunakan dalam tag tersebut.
Untuk lebih jelas, buatlah beberapa skrip berikut :
File pertama : link link link link- -- -a.html a.html a.html a.html
<html>
<head><title>Hyperlink menggunakan tiga alamat</title></head>
<body>
<font size="5" face="arial">System Mechanic</font><br>
<font size="6" face="impact">Menjaga Performa Sistem Komputer</font><br>
<font size="4" face="verdana"><b>Melakukan perawatan pada sistem komputer
merupakan cara yang paling mudah untuk memberitahukan performa komputer
agar tetap stabil.</b>,<p>
Untuk keperluan menjaga performa sistem windows sehingga selalu prima,
maka perusahaan IOLO Inc mengeluarkan produknya dengan nama System
Mechanic versi 3.6, yang mempunyai fitur diantaranya :<p>
<font size="4"><a href="system.html">Clean System Registry</a><br>
<a href="setting.html">Customize Windows Setting</a><p></font></font>
<b><i>Sumber : Tamhcar Tabloid edisi 250, minggu ke V tahun 2008</i></b>
</body></html>

File kedua : system.html system.html system.html system.html
<html>
<head><title>Clean System Registry</title></head>
<body>
<font face="verdana"><h3>Clean System Registry</h3>
Fasilitas ini disediakan untuk melakukan pembersihan secara aman pada
sistem registry.<p><a href="link-a.html">Kembali ke System Mechanic</a>
</body></html>

File ketiga : setting.html setting.html setting.html setting.html
<html>
<head><title>Customize Windows Setting</title></head>
<body>
<font face="verdana"><h3>Customize Windows Setting</h3>
Maaf, halaman ini masih dalam perbaikan. Balek sesok yo..<p>
<a href="link-a.html">Kembali ke System Mechanic</a></body></html>
Design Grafis, Web Programming, Software Provider :: [email protected]

By RACHMAT HIDAYAT, A.Md.Kom : 081.336.111.211 Belajar Web Design - 12
C. Hyperlink Absolut
Hampir sama dengan link alamat relatif di atas, perbedaannya hanyalah pada
alamat yang digunakan, yaitu menggunakan alamat URL. (Uniform Resources Locator),
contohnya www.tamhcar.cjb.net yang berarti menampilkan homepage Tamhcar yaitu
ditulis <a href=http://www.tamhcar.cjb.net>Tamhcar SoftDesign</a>.

D. Hyperlink Halaman
Berbeda dengan link yang dilakukan di atas, yaitu melompat pada halaman lain
selain halamannya sendiri. Berikut ini link dilakukan pada halaman yang sama, dengan
syarat bahwa bagian yang akan dilompati melebihi dari satu jendela browser.
Agar lebih jelas, coba skrip : link link link link- -- -b bb b.html .html .html .html
<html>
<head><title>Hyperlink Dalam Satu Halaman</title></head>
<body><font size="7" face="verdana">
<a name="atas"><b>Sekilas tentang FrontPage :</b></a>
<ul>
<li><a href="#satu">Ketahuilah Situs Anda Secara Keseluruhan</a><p></li>
<li><a href="#dua">Memformat Teks Sebagai Subscript</a><p></li>
<li><a href="#tiga">Selalu Gunakan Huruf Kecil</a><p></li>
<li><a href="#empat">Membuat Thumnail</a><p></li>
<li><a href="#lima">Gambar Background Yang Tidak Bergeser</a><p></li>
</ul><p>
<font size="5"><b><i>Sumber :</i></b>
<a href="http://www.tamhcar.cjb.net">http://www.tamhcar.cjb.net</a><p><p>
<hr align="center"><font size="6"><br><br><br><br>
<b><a name="satu">Ketahuilah Situs anda Secara<a></b>
Ketika sedang mengerjakan proyek Web Anda, ketahuilah seluruh komponen
yang ada, seperti berapa space yang dibutuhkan seluruh file.<p>
<a href="#atas">Kembali Ke Atas</a><br><br><br><br>
<b><a name="dua">Memformat Teks Sebagai Subscript<a></b>
Apakah Anda mengira bahwa pada halaman web Anda tidak bisa membuat
subscript atau superscript untuk penulisan naskah ilmiah Anda?<p>
<a href="#atas">Kembali Ke Atas</a><br><br><br><br>
<b><a name="tiga">Selalu Gunakan Huruf Kecil<a></b>
Pernahkah Anda merasa kebingungan setelah meng-upload Web Content
dan menemukan bahwa tidak semua link-nya bisa berjalan, seperti ketika
Anda mengujinya secara lokal? Kuncinya, gunakanlah semua huruf kecil
untuk nama file dan folder, baik patch maulun link.<p>
<a href="#atas">Kembali Ke Atas</a><br><br>
</body>
</html>

E. Tugas (dikumpulkan pada pertemuan berikutnya)
Buatlah Homepage pribadi Anda, dengan menggunakan tag-tag yang sudah Anda
pelajari. Minimal terdiri dari 6 (enam) buah file html, termasuk file index atau menu
utamanya. Contoh menu : Home, Profil, Galery, Cerita dan lain sebagainya.

Anda mungkin juga menyukai