buku panduan web design - Teknologi Informasi dan Komunikasi

BUKU PANDUAN
WEB DESIGN
DAFTAR ISI
1.
PENDAHULUAN ........................................................................................................ 1
2.
KUMPULAN TAG HTML .......................................................................................... 2
3.
STRUKTUR DASAR HTML ..................................................................................... 3
4.
MEMBUAT DOKUMEN HTML ................................................................................ 4
5.
RANCANGAN STRUKTURAL TEXT ..................................................................... 5
6.
LATAR BELAKANG DAN WARNA........................................................................ 5
7.
MEMBUAT SEBUAH LINK ..................................................................................... 5
8.
MEMASUKKAN SEBUAH IMAGE (GAMBAR) .................................................. 7
9.
MEMBUAT DAFTAR (BULLETS AND NUMBERING) ..................................... 7
10. MEMBUAT FRAME ................................................................................................... 8
11. MEMBUAT TABLE .................................................................................................. 10
PENDAHULUAN
World wide web (www) mendapat perhatian publik yang sangat besar yang tidak
dapat disamai oleh aplikasi internet lainnya. Pada tahun 1995, www menggantikan
FTP(File Transfer Protocol) sebagai aplikasi internet yang bertanggung jawab atas
sebagian besar lalu lintas internet. Web telah menjadi sedemikian terkenalnya
sehingga kadang dicampuradukkan dengan istilah internet itu sendiri meskipun
pengertian "di Web" dan "di Inetrnet" sebenarnya tidaklah sama.
Web adalah sistem pengiriman dokumen tersebar yang berjalan di internet. Web
dikembangkan di CERN (European Center for Nuclear Research), suatu lembaga bagi
penelitian fisika energi tinggi di Geneva, Swiss. Tujuan semula dari lembaga ini
adalah untuk membantu para fisikawan di berbagai lokasi yang berbeda dalam
bekerja sama dan berbagi material penelitian.
Web dengan cepat berkembang ke luar lingkup masyarakat fisika energi tinggi. Pada
tahun 1993, terdapat 130 server web di internet. Setahun kemudian jumlahnya
meningkat menjadi 2.738, dan pada bulan Juni 1995 terdapat 23.500 server web.
Sekarang ini web telah memiliki pemirsa dalam jumlah yang sangat besar di luar
lingkup akademis : kurang lebih 30% dari server web yang tengah beroperasi saat
ini berada di komputer dalam domain komersial, dan di sebagian industri, di mana
keberadaaan perusahaan web sama pentingnya dengan memiliki telpon atau faks
bagi tujuan komunikasi bisnis. Web sekarang telah menjadi media yang sangat
penting bagi periklanan dan alamat web sekarang sudah umum dijumpai pada
majalah, surat kabar, dan iklan televisi. Artinya pembuatan-pembuatan halaman web
yang berkualitas sangat dibutuhkan pada jaman sekarang ini.
Untuk dapat dinikmati, web menggunakan suatu protocol yang berfungsi sebagai
penerjemah. Protocol ini lah yang dimiliki oleh browser-browser Internet seperti
Internet Explorer maupun Opera dan yang lain. Protocol itu disebut dengan HTTP
(Hypertext Markup Transfer Protocol).
Dokumen pada Web dibuat dalam bentuk kode-kode yang mengatur bagaimana
browser menampilkan informasi yang ada pada halam tersebut. Kode tersebut
dikenal dengan nama HyperText Markup Language (HTML). Walaupun suatu
dokumen HTML berisi set perintah, namun HTML bukanlah bahasa pemrograman
karena dia hanya mengatur tampilan.
Pada awalnya HTML dikembangkan sebagai subset
SGML (Standard Generalized
Mark-up Language). Karena HTML didedikasikan untuk ditransmisikan melalui media
Internet, maka HTML relatif lebih sederhana daripada SGML yang lebih ditekankan
pada format dokumen yang berorientasi pada aplikasi
Hasil olahan HTML harus dilihat pada Browser. Tidak seperti Microsoft Word yang
hasilnya langsung dapat Anda lihat pada aplikasi yang sama. Anda dapat juga
mencoba membuat dokumen html melalui Notepad.
1
KUMPULAN TAG HTML
<!--
-->
<a href>
Memberi komentar atau keterangan. Kalimat yang terletak pada tag kontiner ini tidak akan
terlihat pada browser
Membuat link ke halaman lain atau ke bagian lain dari halaman tersebut
<a name>
Membuat nama bagian yang didefinisikan pada link pada halaman yang sama
<applet>
Sebagai awal dari Java applets
<area>
<b>
Mendefinisikan daerah yang dapat diklik (link) pada image map
Membuat teks tebal
<basefont>
Membuat atribut teks default seperti jenis, ukuran dan warna font
<bgsound>
Memberi (suara latar) background sound pada halaman web
<big>
Memperbesar ukuran teks sebesar satu point dari defaultnya
<blink>
Membuat teks berkedip
<body>
Tag awal untuk melakukan berbagai pengaturan terhadap text, warna link & visited link
<br>
Pindah baris
<caption>
Membuat caption pada tabel
<center>
Untuk perataan tengah terhadap teks atau gambar
<comment>
Meletakkan komentar pada halaman web tidak tidak akan nampak pada browser
<dd>
Indents teks
<div>
Represents different sections of text.
<embed>
<fn>
Menambahkan sound or file avi ke halaman web
Seperti tag <a name>
<font>
Mengganti jenis, ukuran, warna huruf yang akan digunakan utk teks
<form>
Mendefinisikan input form
<frame>
<frameset>
Mendefinisikan frame
Mendefinisikan attribut halaman yang akan menggunakan frame
<h1> ...
<h6>
Ukuran font yang dibedakan berdasarkan headingnya.
<head>
Mendefinisikan head document.
<hr>
Membuat garis horizontal
<html>
Bararti dokumen html
<i>
Membuat teks miring
<img>
Image, imagemap atau an animation
<input>
Mendefinisikan input field pada form
<li>
<map>
<marquee>
<nobr>
<noframes>
Membuat bullet point atau baris baru pada list (berpasangan dengan tag <dir>, <menu>,
<ol> and <ul> )
Mendefinisikan client-side map
Membuat scrolling teks (teks berjalan) - hanya pada MS IE
Mencegah ganti baris pada teks atau images
Jika browser user tidak mendukung frame
<ol>
Mendefinisikan awal dan akhir sebuah Numbering
<p>
Ganti paragraph
<pre>
Membuat teks dengan ukuran huruf yg sama
<script>
Mendefinisikan awal script
<table>
Membuat tabel
<td>
<title>
Kolom pada table
Mendefinisikan title
<tr>
Baris pada table
<u>
Membuat teks bergaris bawah
<ul>
Mendefinisikan awal dan akhir sebuah Bullets
2
STRUKTUR DASAR HTML
HTML (Hypert Text Markup Language) merupakan bahasa pemrograman yang
digunakan dalam pembuatan halaman web. Dalam penggunaannya sebagian besar
kode HTML tersebut harus terletak di antara TAG kontainer. Yaitu diawali dengan
<namatag> dan diakhiri dengan </namatag> (terdapat tanda "/").
Sebuah halaman web minimal mempunyai empat buat tag, yaitu :
<HTML>  Sebagai tanda awal dokumen HTML.
<HEAD>  Sebagai informasi page header. Di dalam tag ini kita bisa meletakkan
tag-tag TITLE, BASE, ISINDEX, LINK, SCRIPT, STYLE & META.
<TITLE>  Sebagai titel atau judul halaman. Kalimat yang terletak di dalam tag ini
akan muncul pada bagian paling atas browser Anda (pada title bar).
Contoh :
<TITLE>Tips HTML -- www.klik-kanan.com</TITLE>
<BODY>  Di dalam tag ini bisa diletakkan berbagai page attribute seperti warna
latar belakang, warna teks, warna link, warna visited link, warna active link dan lainlain.
Atribut :
BGCOLOR, BACKGROUND, TEXT, LINK, VLINK, ALINK, LEFTMARGIN & TOPMARGIN.
Contoh :
<BODY bgcolor="#000000" background="images/pcb.gif" text="#FFFFFF" link="#FF0000"
vlink="FFFF00" alink="#0000FF">
Sebuah contoh sederhana dokumen HTML :
<HTML>
<HEAD>
<TITLE>Halaman pembuka
</TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF" background="images/gambar1.gif" text="#FF0000">
Letakkan text, images, dan link Anda di sini
</BODY>
</HTML>
3
MEMBUAT DOKUMEN HTML
Untuk memulai membuat halaman web disarankan untuk membuat sebuah
folder khusus untuk menampung file-file yang kita butuhkan pada saat
pembuatan web. Sekarang Anda akan mecoba membuat dokumen HTML Anda
yang pertama.
1. Buka Windows Notepad (Start – Programs – Accessories – Notepad)
2. Ketik teks berikut, sama persis!
<HTML>
<HEAD>
<TITLE> Selamat Datang </TITLE>
</HEAD>
<BODY>
<H1>Tekhnologi Internet</H1>
</BODY>
</HTML>
3. Simpan pada folder kerja Anda dengan nama: Index.htm (bukan *.txt)
4. Buka Internet Explorer
, jangan tutup Notepad Anda
5. Klik menu File – Open…
6. Klik Browse…
7. Kemudian arahkan ke folder kerja Anda
8. Klik file Index (atau Index.htm)
9. Klik Open
10. Maka semestinya hasilnya seperti di bawah ini
11. Perhatikan pada title bar, itu adalah hasil dari tag <TITLE>.
12. Teks Tekhnologi Internet ditampilkan dengan format Heading 1 (<H1>)
4
RANCANGAN STRUKTURAL TEXT
Jenis Tag
<TAG>
Jenis Perataan
Huruf Tebal
Keterangan
<DIV ALIGN=left|right|center></DIV>
<B>…</B>
(Bold)
Huruf Miring
<I>…</I>
(Italic)
Garis Bawah
<U>…</U>
(Underline)
Huruf Di Coret
<S>…</S>
(Strike out)
Huruf kecil dibawah
<SUB>…</SUB>
(Subscribe)
Huruf kecil diatas
<SUP>…</SUP>
(Super scribe)
Huruf Berjenis Mesin Ketik
<TT>…</TT>
(Typewriter)
Ukuran Huruf
<FONT SIZE=#>…</FONT>
Warna Huruf
<FONT COLOR=”#$$$$$$>…</FONT>
$ : boleh diisi angka 0 s/d F
<FONT FACE=”***”>…</FONT>
* : boleh diisi dengan font
type yang ada pada windows
Jenis Huruf/Font Type
# : boleh diisi angka 1 s/d 7
LATAR BELAKANG DAN WARNA
Jenis Tag
<TAG>
Latar Belakang dengan Gambar
<BODY BACKGROUND=”URL”>
Warna Latar Belakang
<BODY BGCOLOR=”#$$$$$$”>
Warna Huruf Text
<BODY TEXT=”#$$$$$$”>
Warna Acuan(link)
<BODY LINK=”#$$$$$$”>
Keterangan
(Tiled background)
Acuan Lepas Kunjung
<BODY VLINK=”#$$$$$$”>
(Visited Link)
Acuan Aktif
<BODY ALINK=”#$$$$$$”>
(Active Link)
MEMBUAT SEBUAH LINK
Untuk membuat sebuah link kita dapat menggunakan tag <a href> dan <a name>
yang membedakan adalah :
 <a href> : adalah Membuat link ke halaman lain atau ke bagian lain (objek lain)
dari halaman
tersebut.
 <a name> : adalah Membuat nama bagian yang didefinisikan pada link pada
halaman yang sama. Kalau di Ms Word itu sama artinya dengan
bookmark.
OK!! kita buat dulu yang <a href> :
Dan tampilannya akan seperti ini :
<HTML>
<HEAD>
<TITLE>Insert Picture</TITLE>
</HEAD>
<BODY bgcolor="#000000">
<h1><a href="zapotec.bmp">Hyperlink</a></h1>
</BODY>
</HTML>
Pada kata hyperlink tersebut terdapat sebuah link (hubungan) yang menghubungkan file “zapotec.bmp”
pada folder yang sama.
Gampang kan !!!
5
Sekarang kita buat yang pake’ <a name> :
<html>
<head>
<title>Hyperlink</title>
</head>
<body>
<h1><a name="gorillaz">Gorillaz</a></h1>
<h2><div align="center"><a href=#gorillaz>Band Favorit</a></div></h2>
</body>
</html>
Dan hasilnya :
Jadi
pada
tulisan
band
favorit
akan
menghubungkan pada sebuah bookmark yang
bernama gorillaz yang berisi teks gorillaz.
Nah !!! itu bedanyaa !!!
6
MEMASUKKAN SEBUAH IMAGE (GAMBAR)
Untuk memasukkan sebuah objek gambar pada sebuah halaman kita dapat
menggunakan perintah <img>. Contohnya seperti dibawah ini :
<html>
<head>
<title>Hyperlink</title>
</head>
Untuk mengatur Lebar
<body>
<img src="Autumn.jpg" width="313" height="115">
</body>
Untuk mengatur Tinggi
</html>
Dan hasilnya akan seperti dibawah ini :
Kalau soal perataan, ada statement sendiri yaitu dengan sub perintah align. Contoh :
<IMG SRC="constru1.gif" ALIGN=TOP>
 align = bottom : berarti objek tersebut kita letakkan pada posisi bawah.
 align = middle : berarti objek tersebut kita letakkan pada posisi tengah.
 align = top : berarti objek tersebut kita letakkan pada posisi teratas.
 align = left : berarti objek tersebut kita letakkan pada posisi kiri.
 align = right : berarti objek tersebut kita letakkan pada posisi kanan.
GAMPANG KANNN !!!!
MEMBUAT DAFTAR (BULLETS AND NUMBERING)
Jenis Tag
Daftar tanpa nomor (Bullets)
Jenis Bullets
<TAG>
<UL><LI></UL>
Keterangan
(Unordered list)
<UL TYPE=DISC|CIRCLE|SQUARE>
Berlaku pada semua list
yang ada.
<LI TYPE=DISC|CIRCLE|SQUARE>
Berlaku pada satu daftar
saja.
Daftar Bernomor
<OL><LI></OL>
Jenis penomoran
<OL TYPE=A|a|1|I|i>
Berlaku pada semua list
yang ada.
<LI TYPE=A|a|1|I|i>
Berlaku pada satu daftar
saja.
7
(Ordered List)
Contoh :
Contoh :
<UL><LI></UL>
<OL><LI></OL>
<h1>Hari SENIN :</h1>
<h3><UL type=circle>
<LI>Upacara
<LI>Matematika
<LI>Bahasa Indonesia
<LI>Sejarah
</UL>
</h3>
<h1>Hari SENIN :</h1>
<h3><OL type=I>
<LI>Upacara
<LI>Matematika
<LI>Bahasa Indonesia
<LI>Sejarah
</OL>
</h3>
Hasilnya :
Dan hasilnya :
Perbedaan sangat terlihat jelas…
MEMBUAT FRAME
Untuk membuat sebuah frame kita dapat menggunakan TAG sbb :
Jenis Tag
Dokumen dalam frame
<TAG>
<FRAMESET>…</FRAMESET>
Keterangan
Sebagai pengganti <BODY>
Tinggi baris frame
<FRAMESET ROWS=#>…</FRAMESET>
Dalam satuan pixel / %
Lebar kolom frame
<FRAMESET COLS=#>…</FRAMESET>
Dalam satuan pixel / %
Lebar garis batas
<FRAMESET BORDER=#>…</FRAMESET>
Warna garis batas
<FRAMESET BORDERCOLOR=”#$$$$$$”>…</FRAMESET>
Rancangan frame
<FRAME …>
Tampilan dokumen frame
<FRAME SCR=”URL”
Nama frame
<FRAME NAME=”***”|_Blank|_Self|_Parent|_Top>
Lebar batas
<FRAME MARGINWIDTH=#>
Batas kiri dan kanan
Tinggi batas
<FRAME MARGINHEIGHT=#>
Batas atas dan bawah
Scrollbar
Ukuran frame tak bisa diubah
Batas frame
Warna garis batas
<FRAME SCROLLING=”YES|NO”>
<FRAME NORESIZE>
<FRAME FRAMEBORDER=”YES|NO”>
<FRAME BORDERCOLOR=”#$$$$$$”>
Di bawah ini terdapat contoh dari pembuatan frame :
8
Memungkinkan scrolling
1
<FRAMESET cols="*,140">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAME SRC="menu.htm" NAME="Frame2">
</FRAMESET>
2
<FRAMESET cols="100,*">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAME SRC="menu.htm" NAME="Frame2">
</FRAMESET>
3
<FRAMESET rows="100,*">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAME SRC="menu.htm" NAME="Frame2">
</FRAMESET>
4
<FRAMESET rows="*,60">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAME SRC="menu.htm" NAME="Frame2">
</FRAMESET>
5
<FRAMESET rows="*,60">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAMESET cols="50%,50%">
<FRAME SRC="menu.htm" NAME="Frame2">
<FRAME SRC="menu2.htm" NAME="Frame3">
</FRAMESET></FRAMESET>
6
<FRAMESET cols="*,50%">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAMESET rows="15%,15%,70%">
<FRAME SRC="menu.htm" NAME="Frame2">
<FRAME SRC="menu2.htm" NAME="Frame3">
<FRAME SRC="menu3.htm" NAME="Frame4">
</FRAMESET></FRAMESET>
7
<FRAMESET cols="50%,50%">
<FRAMESET rows="50%,50%">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAME SRC="homepage2.htm" NAME="Frame2">
</FRAMESET>
<FRAMESET rows="50%,50%">
<FRAME SRC="menu.htm" NAME="Frame3">
<FRAME SRC="menu2.htm" NAME="Frame4">
</FRAMESET></FRAMESET>
8
<FRAMESET rows="15%,70%,15%">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAMESET cols="15%,70%,15%">
<FRAME SRC="menu.htm" NAME="Frame2">
<FRAME SRC="menu2.htm" NAME="Frame3">
<FRAME SRC="menu3.htm" NAME="Frame4">
</FRAMESET>
<FRAME SRC="homepage.htm" NAME="BIG">
</FRAMESET></FRAMESET>
Contoh pembuatan frame :
<HTML>
<HEAD>
<TITLE>Belajar Frame</TITLE>
</HEAD>
<FRAMESET cols="50%,50%">
<FRAMESET rows="50%,50%">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAME SRC="homepage2.htm" NAME="Frame2">
</FRAMESET>
<FRAMESET rows="50%,50%">
<FRAME SRC="menu.htm" NAME="Frame3">
<FRAME SRC="menu2.htm" NAME="Frame4">
</FRAMESET>
</FRAMESET>
<BODY>
</BODY>
<HTML>
Jadi
contoh
diatas
Frame1
menghubungkan
ke
halaman
lain
yaitu
“homepage.htm”, Frame2 menghubungkan ke halaman “homepage2.htm”,
9
untuk Frame3 menghubungkan ke halaman “menu.htm”, dan untuk Frame4
menghubungkan ke halaman “menu2.htm”. Hasil jadinya seperti di bawah ini :
Diatas terdapat 4 frame yang mempunyai fungsi yang berbeda-beda.
MEMBUAT TABLE
Jenis Tag
<TAG>
Keterangan
Rancangan table
<TABLE>…</TABLE>
Garis batas table
<TABLE BORDER=#>…</TABLE>
Celah sel
<TABLE CELLSPACING=#>
Penyangga sel
<TABLE CELLPADDING=#>
Lebar table
Baris dalam table
Penataan letak baris
Sel dalam table
Penataan letak sel
Tanpa ganti baris
<TABLE WIDTH=#>
<TR>…</TR>
<TR ALIGN=LEFT|CENTER|MIDDLE|BOTTOM
VALIGN=TOP|BOTTOM|MIDDLE>
<TD>…</TD>
<TD ALIGN=LEFT|CENTER|MIDDLE|BOTTOM
VALIGN=TOP|BOTTOM|MIDDLE>
<TD NOWRAP>
Rentang kolom
<TD COLSPAN=#>
Rentang baris
<TD ROWSPAN=#>
Lebar sel
<TD WIDTH=#>
Warna sel
<TD BGCOLOR=”#$$$$$$”>
Kepala table
Penataan letak kepala table
Tanpa baris baru
<TH>…</TH>
<TH ALIGN=LEFT|CENTER|MIDDLE|BOTTOM
VALIGN=TOP|BOTTOM|MIDDLE>
<TH NOWRAP>
Rentang kolom
<TH COLSPAN=#>
Rentang baris
<TH ROWSPAN=#>
Lebar kepala table
<TH WIDTH=#>
Warna kepala table
<TH BGCOLOR=”#$$$$$$”>
Keterangan table
Penataan keterangan
# : boleh diisi dengan angka atau present
<CAPTION>…</CAPTION>
<CAPTION ALIGN=TOP|BOTTOM>
Dibawah ini contoh dari pembuatan table :
10
Table Header
<table width="100" border="1" cellspacing="2" cellpadding="2">
<tr>
<td bgcolor="#0000FF">  </td>
<td bgcolor="#FFFF66"> </td>
<td rowspan="2" bgcolor="#FF3366"> </td>
</tr>
<tr>
<td colspan="2" bgcolor="#33CC66"> </td>
</tr>
<tr>
<td colspan="3" bgcolor="#FFCC99"> </td>
</tr>
</table>
<table width="100" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#0000FF">  </td>
<td bgcolor="#FFFF66"> </td>
<td rowspan="2" bgcolor="#FF3366"> </td>
</tr>
<tr>
<td colspan="2" bgcolor="#33CC66"> </td>
</tr>
<tr>
<td colspan="3" bgcolor="#FFCC99"> </td>
</tr>
</table>
Contoh pembuatan table :
<html>
<head>
<title>Belajar Table</title>
<body>
<table width="500" border="1" cellspacing="2" cellpadding="2">
<tr>
<td
width=100
bgcolor="#0000FF"
align=center
valign=middle><font
face="comic
sans
align=center
valign=middle><font
face="comic
sans
ms"><b>Cell1</b></font></td>
<td
width=200
bgcolor="#FFFF66"
ms"><b>Cell2</b></font></td>
<td
rowspan="2"
bgcolor="#FF3366"
align=center
valign=middle><font
face="comic
sans
align=center
valign=middle><font
face="comic
sans
align=center
valign=middle><font
face="comic
sans
ms"><b>Cell3</b></font></td>
</tr>
<tr>
<td
colspan="2"
bgcolor="#33CC66"
ms"><b>Cell4</b></font></td>
</tr>
<tr>
<td
colspan="3"
bgcolor="#FFCC99"
ms"><b>Cell5</b></font></td>
</tr>
</table>
</body>
</html>
Hasilnya :
11
 Jangan berhenti belajar
 Jangan berhenti berpikir
 Jadilah yang terbaik
12