Buku ajar desain web

BUKU AJAR DESAIN WEB
Oleh Moh.Erdda Habiby, S,ST

DAFTAR ISI :
Bab I HTML ….................................................................................................................... 2
Bab II CSS ........................................................................................................................ 20
Bab III JAVASCRIPT …..................................................................................................... 34
Bab IV SUMBER .............................................................................................................. 41

1

I. HYPERTEXT MARKUP LANGUAGE (HTML)
TUJUAN :
1. Memahami tentang konsep WWW
2. Memahami tentang struktur dokumen HTML
3. Memahami tentang dasar-dasar HTML
4. Memahami tentang pengaturan teks, daftar item, gambar, tabel, form, meta dll.

LAYANAN-LAYANAN DI INTERNET
•
•
•
•
•
•
•
•
•
•

Dokumen/World Wide Web/WWW (HTTP)
e-mail (POP, SMTP, IMAP)
Chatting (IRC)
Pertukaran file (FTP)
Akses komputer jarak jauh (telnet)
Direktori (LDAP)
Monitoring jaringan (NMAP)
Modul aplikasi (SOAP)
Suara (VoIP)
dll.

WORLD WIDE WEB
Internet merupkan jaringan global yang menghubungkan suatu network dengan network lainya di seluruh
dunia, TCP/IP menjadi protocol penghubung antara jaringan-jaringan yang beragam di seluruh dunia untuk
dapat berkomunikasi. World Wide Web (WWW) merupakan bagian dari internet yang paling cepat
berkembang dan paling populer. WWW bekerja merdasarkan pada tiga mekanisme berikut :
• Protocol standard aturan yang di gunakan untuk berkomunikasi pada computer networking,
Hypertext Transfer Protocol (HTTP) adalah protocol untuk WWW.
• Address WWW memiliki aturan penamaan alamat web yaitu URL(Uniform Resource Locator) yang
di gunakan sebagai standard alamat internet.
• HTML digunakan untuk membuat document yang bisa di akses melalui web.

PENGENALAN HTML
Hypertext Markup Language merupkan standard bahasa yang di gunakan untuk menampilkan document
web, yang bisa anda lakukan dengan HTML yaitu:
• Mengontrol tampilan dari web page dan contentnya.
• Mempublikasikan document secara online sehingga bisa di akses dari seluruh dunia.
• Membuat online form yang bisa di gunakan untuk menangani pendaftaran, transaksi secara online.
• Menambahkan object-object seperti image, audi, video dan juga java applet dalam document HTML.

BROWSER DAN EDITOR
Browser
Browser merupakan software yang di install di mesin client yang berfungsi untuk menterjemahkan tag-tag
HTML menjadi halaman web. Browser yang sering di gunakan biasanya Internet Explorer, Netscape
Navigator dan masih banyak yang lainya.
Editor
Program yang di gunakan untuk membuat document HTML, ada banyak HTML editor yang bisa anda
gunakan diantaranya: Ms FrontPage, Dreamweaver, Notepad.

TAG DASAR YANG DIBUTUHKAN DALAM DOKUMEN
Berikut ini adalah tag dasar yang dibutuhkan dan harus ada dalam dokumen HTML :
<HTML> dan </HTML>
<HEAD> dan </HEAD>
<TITLE> dan </TITLE>
<BODY> dan </BODY>

2

TRY THIS.....
<HTML>
<HEAD>
<TITLE>Latihan HTML</TITLE>
</HEAD>
<BODY>
Selamat Belajar HTML<BR>
Semoga Sukses !
</BODY>
</HTML>

Atribut dasar Tag <BODY>

•
•
•
•
•
•

Bgcolor : warna background documen.
Leftmargin : ukuran margiin kiri dokumen.
Rightmargin : ukuran margin kanan dokumen.
Topmargin : ukuran margin atas dokumen.
Bottommargin : ukuran margin bawah dokumen.
Link, vlink, alink : warna link, aktif link dan link yang sudah dikunjungj pada dokumen.

CONTOH
Atribut bgcolor :
<body bgcolor=”blue”> atau <body bgcolor=”0000FF”>
Atribut leftmargin,rightmargin,topmargin ,dan bottommargin :
<body leftmargin=”25” rightmargin=”25” topmargin=”20” bottommargin=”30”>
Atribut link,alink, dan Vlink
<body link=”fuchsia” alink=”white” vlink=”silver”>
TRY THIS.....
<HTML>
<HEAD>
<TITLE>LATIHAN WEB</TITLE>
</HEAD>
<BODY bgcolor=”blue” link=”fuchsia” alink=”white” vlink=”silver” leftmargin=”25”
rightmargin=”25” topmargin=”20” bottommargin=”30”>
...teks dokumen pertamaku ini ditulis di area body <br>
<a href=””>ini link ke 1</a></br>
<a href=””>ini link ke 2</a>
</BODY>
</HTML>

FORMAT TAMPILAN SEDERHANA
Tag untuk headline
Untuk membuat text HEADLINE (judul), kita harus, melingkupi text tersebut dengan tag pembuka dan tag
penutup headline. Tag headline ditulis dengan aturan sebagai berikut:
Tag pembuka <HX> dan tag penutup </HX>. Perhatikan , X diganti dengan angka!

3

TRY THIS.....
<HTML>
<HEAD>
<TITLE>Format tampilan sederhana </TITLE>
</HEAD>
<BODY>
<H1>HEADLINE LEVEL 1</H1>
</BODY>
</HTML>
Tag Style Sederhana
Kini akan dibahas beberapa text style. Tag-tag tersebut digunakan untuk mengatur format text.
Contoh:
• Untuk membuat text tebal bisa menggunakan <strong> atau <b>
• Untuk membuat text miring <em> atau <i>
• Untuk membuat text digaris bawahi <u>
• Untuk membuat text seperti teletype writer <tt>
• Untuk membuat text seperti font courier <code>
• Untuk membuat text seperti code <samp>
TRY THIS.....
<HTML>
<HEAD>
<TITLE> Format tampilan sederhana</TITLE>
</HEAD>
<BODY>
Tulisan ini ditulis dengan <strong>”tag strong, agar tebal”</strong> <br>
Tulisan ini ditulis dengan <em>”tag EM, agar miring”</em> <br>
Tulisan ini ditulis dengan <code>”tag code, agar seperti kode program”</code>
<br>
</BODY>
</HTML>

MENAMBAHKAN BULLETS DAN NUMBERING
Untuk memudahkan ada dua jenis bullet yang akan dibahas dalam buku ini, yaitu Unordered list atau
disingkat menjadi <UL> dan ordered list yang disingkat <OL>
Dengan menggunakan <UL> kita hanya bisa membuat bullet saja, sedangkan untuk menampilkan list
dengan memberikan nomer di awal text adalah dengan menggunakan pilihan <OL>
untuk membuat list setiap kali anda harus menggunakan <li> di awal setiap kalimat atau text yang akan

4

menggunakan <ul> atau <ol>. Karena <li> lah yang dijadikan patokan sebagai awal penulisan list dalam
suatu dokumen.
TRY THIS.....
<html>
<head><title>menambahkan bullets dan numbering</title>
</head>
<body>
<h3> mencoba bullets dan numbering </h3>
<b> seri operating system </b>
<ul> <li> microsoft windows 2000 profesional </li>
<li> microsoft windows 2000 server </li>
<li> instalasi dan konfigurasi windows</li>
</ul>
<b> seri microsoft office</b>
<ol> <li>microsoft word 2000</li>
<li>microsoft access 2000</li>
<li>microsoft power point 2000</li>
</ol>
</body>
</html>
Penggunaan tag <DL>, <DT>, <DD> untuk menampilkan daftar khusus dengan tampilan
menjorok ke kanan. TRY THIS TOO.....
<HTML>
<HEAD>
<TITLE>Daftar Definisi</TITLE>
</HEAD>
<BODY>
<B>Kamus Teknologi Informasi:</B>
<DL>
<DT>HTML</DT>
<DD>Bahasa yang digunakan untuk menyusun Web</DD>
<DT>HTTP</DT>
<DD>Protokol yang dipakai untuk mentransfer HTML</DD>
</DL>
</BODY>
</HTML>

MENEMPATKAN KOMENTAR
komentar dalam suatu dokumen amatlah penting. Komentar ditempatkan di antara program untuk
memberikan komentar atas program yang dibuat. Sehingga bagi orang lain yang membaca program tersebut
bisa dimengerti tanpa menanyakan kepada orang yang membuatnya.
Syntax :
diawali dgn <!-diakhiri dgn -->

5

TRY THIS.....
<html>
<head>
<title>menambahkan bullets dan numbering</title>
</head>
<body>
<h3> mencoba bullets dan numbering </h3>
<b> seri operating system </b>

<ul> <li> microsoft windows 2000 profesional </li>
<li> microsoft windows 2000 server </li>
<li> instalasi dan konfigurasi windows</li>
</ul>
<b> seri microsoft office</b>

<ol> <li>microsoft word 2000</li>
<li>microsoft access 2000</li>
<li>microsoft power point 2000</li>
</ol>
</body>
</html>

FORMAT ELEMENT ARRAY
<P> TAG UNTUK PARAGRAPH
Tag <p> digunakan untuk menampilkan satu blok text dalam bentuk paragraph. Blok text tersebut diawali
dengan <p> dan ditutup dengan </p>, penggunaan tag </p> sebagai penutup akan memastikan bahwa
paragraph akan disertai dengan extra space.
TRY THIS.....
<html>
<head>
<title> tag P untuk paragraph</title>
</head>
<body>
<p> pergunakan tag p untuk membuat paragraph.element text yang dimulai dengan
tag p akan dimulai dengan baris baru, dan akan ditambahkan baris kosong
padanya.</p>
<p> ini adalah line break dengan extra baris kosong, yang dibuat dengan tag p.
<br> ini adalah line break yang dibuat dengan tag br, coba bandingkan dengan tag
p.
</body>
</html>
<PRE> TAG PRE -FORMATED TEXT
tag <pre> merupakan tag yang digunakan untuk membuat satu blok tulisan yang tata letaknya dapat kita atur
sesuai dengan tampilan pada saat pembuatan.

6

TRY THIS.....
<html>
<head>
<title>tag pre untuk pre-formatted text</title>
<body>
<pre>
TO : LEE SMITH
FROM : CHRIS BROWN
SUBJECT : MEETING SCHEDULE AND AGENDA FOR WEB SITE TEAM
DATE : THURS, 14 AUG 1997 22:00:05
9/20/97
8:00 AM
ROOM 218
9/21/97
9.00 AM
ROOM 218
9/22/97
2.00 PM
ROOM 111
AT THE FIRST MEETING, WE SHOULD DISCUSS HOW TO USE THE &LT;STYLE&GT; TAG TO MAKE
OUR HOME PAGE MORE INTERESTING.
</pre>
</body>
</head>
</html>
<DIV> TAG UNTUK MEMFORMAT ALIGNMENT SATU BLOK TEXT
Tag <div> digunakan untuk mengatur alignment satu blok text, memungkinkan pengaturan rata kiri atau rata
kanan atau rata tengah.
syntax: <div align = ”left” | ”center” | ”right” >
TRY THIS.....
<html>
<head>
<title> Tag div untuk alignment text</title>
</head>
<body>
<div align=right>
<H1>aligning a block of content to right </H1>
<p>you can use a div tag to align a block of content to the right.</p>
<p>the content can include anything you like, including tables,images,
lists, and so on. Note,
however, that right-aligned lists often do not
look very neat.<p>
</div>
</body>
</html>

TAG - TAG UNTUK MEMFORMAT TEXT
PHYSICAL FORMATTING
<B> ... </B> Untuk Bold text
<I> ... </I> Untuk italic text
<U> ... </U> Untuk Underline Text
<BIG> ... </BIG> Untuk ukuran yang lebih besar dari normal
<SMALL> ... </SMALL> Untuk ukuran yang lebih kecil dari normal
<STRIKE> ... </STRIKE> Untuk memberi garis di tengah text
<SUP> ... </SUP> Untuk Superscript text
<SUB> ... </SUB>UNtuk Subscript text

7

<CENTER> ... </CENTER> Untuk Center document
LOGICAL FORMATTING
<EM> ... </EM> / <I> Text miring
<STRONG> … </STRONG> / <B> Text tebal
<DEL> ... </DEL> / <STRIKE> Mencoret text
<INS> ... </INS> / <U> Underline text
<SPAN> TAG UNTUK MEMFORMAT TEXT DALAM BARIS
Tag <span> digunakan untuk memformat sejumlah text pada suatu baris kalimat tanpa mengganggu text lain
dalam baris yang sama
syntax:
<span style=”color : warna; font-weight : bold | reguler; font-style : italic |
normal”>
TRY THIS.....
<html>
<head>
<title>tag div untuk alignment text</title>
</head>
<body>
<p>here is some normal paragraph text. It looks OK, but it would lookmuch
better if it were
<span style=”color:red; font-weight:bold; font-style:italic”> in bright,
bold, italic merah. </span>
</body>
</html>
<CENTER> TAG UNTUK CENTER TEXT
Tag <center> akan menyebabkan text atau tulisan yang diapit oleh tag <center> dan </center> akan
diposisikan center atau ditengah secara horizontal.
TRY THIS.....
<html>
<head>
<title> tag div untuk alignment text</title>
</head>
<body>
<center><H1>Perguruan Tinggi Raharja</H1></center>
selamat datang di jurusan sistem komputer CCIT
</body>
</html>
<BR> TAG UNTUK LINE BREAK
Tag <BR> akan menyebabkan text atau tulisan yang ada di sebelah kanannya turun ke bawah satu baris
(line break). Tag <BR> tidak mempunyai penutup.
TRY THIS.....
<html>
<head>

8

</head>
<body>
Tulisan ini berada pada baris pertama
<br>tulisan ini turun karena tag BR <br> tulisan ini juga karena tag BR.
</body>
</html>
<HR> TAG UNTUK MEMBUAT GARIS PEMISAH HORIZONTAL
Tag <HR> digunakan untuk membuat garis pemisah antar baris atau untuk membuat suatu garis horizontal
sepanjang lebar halaman homepage. tag<HR> memiliki tag penutup.
Syntax:
<HR ALIGN=”CENTER” | “LEFT”| “RIGHT”
NOSHADE
SIZE = “THICKNESS”
WIDTH=”WIDTH” >
ALIGN : Untuk menentukan apakah rata kiri, tengah, atau kanan.
NOSHADE: jika ditulis maka garis dibuat tanpa bayangan, jika tidak maka garisnya memiliki bayangan
SIZE : untuk menentukan ketebalan garis (dalam pixel)
WIDTH : untuk menentukan lebar dan panjang garis (dalam persen %)
TRY THIS.....
<html>
<head>
</head>
<body>
<P> This text appears above a thick, unshaded, centered horizontal rule.
<HR NOSHADE ALIGN=”center” width=”50%” SIZE=”8”>
<P>this text appears below the horizontal rule.
</body>
</html>
<MARQUEE> TAG
Kadang-kadang kita memerlukan text dalam web yang dibangun sedikit bergerak atau berjalan ke kiri atau
kekanan adalah sebagai berikut :
Syntax :
<MARQUEE align="center" direction="right" height="50" scrollamount="2"
width="80%">
….
</MARQUEE>
Atribut yang biasa digunakan :
1. Widht = lebar blok teks dalam pixel atau persen.
2. Title = pesan yang akan muncul saat mouse berada di atas teks.
3. Direction = “left / right / up / down” untuk arah gerakan teks.
4. Scrollmount = kecepatan gerakan dalam pixel, semakin besar angka semakin cepat gerakannya.
5. Bgcolor = warna background teks.
6. Behavior = “scroll / slide / alternate” untuk mengatur perilaku gerakan

9

TRY THIS.....
<HTML>
<HEAD>
<TITLE>LATIHAN WEB</TITLE>
</HEAD>
<BODY>
<marquee direction="up" onmouseover="this.stop()" onmouseout="this.start()"
scrollamount="2" align="center" width="100%" height="200">
<a href="http://miscah.blogspot.com/2009/04/cara-pasang-search-engine-diblog.html">Cara Pasang Search Engine </a> <br>
<a href="http://miscah.blogspot.com/2009/04/trik-membuat-read-more.html">Trik
Membuat Read More (Template Baru) </a> <br>
<a href="http://miscah.blogspot.com/2009/04/membuat-favicon.html">Cara Membuat
Favicon </a> <br>
<a href="http://miscah.blogspot.com/2009/04/cara-membuat-labelkategori.html">Cara Membuat Label (Kategori) </a> <br>
</marquee>
</BODY>
</HTML>
Pengaturan Warna Font
Untuk mengatur warna font dapat melalui 2 cara, pertama melalui tag <body> dan yang kedua melalui tag
<font> seperti yang akan anda lihat dibawah ini.
TRY THIS.....
<HTML>
<HEAD>
<TITLE>Warna - Bagian 2</TITLE>
</HEAD>
<BODY BGCOLOR = "black" TEXT = "gray">
Normal<BR>
<FONT COLOR = "blue">Warna Biru</FONT><BR>
<FONT COLOR = "green">Warna Hijau</FONT><BR>
<FONT COLOR = "red">Warna Merah</FONT><BR>
<FONT COLOR = "yellow">Warna kuning</FONT><BR>
</BODY>
</HTML>
<FONT> TAG
Dalam menulis suatu dokumen kita perlu mengatur ukuran huruf. Misalnya untuk judul bisa menggunakan
lebih besar, untuk sub judul lebih kecil dibandingkan judul, dan untuk isi biasanya ukuran kecil atau sedang.
Untuk ukuran / size font dimulai dari 1 sampai 7, nilai default nya 3. Ada juga font color yang digunakan
untuk memberikan warna pada font. Lalu ada juga font face yang dimaksud font face adalah tipe dari font
tersebut. Misalnya arial, times new roman dll.

10

Syntax :
<font
color=”color”
face=”font type”
size=”1 until 7”
>
….
</font>
TRY THIS.....
<HTML>
<HEAD>
<TITLE>Jenis Font</TITLE>
</HEAD>
<BODY>
Normal: 012345ABCD<BR>
<FONT COLOR="blue" FACE = "Arial">Arial:
012345ABCD</FONT>
<BR>
<FONT COLOR="green" FACE = "Courier" SIZE="5">
Courier: 012345ABCD</FONT>
<BR>
</BODY>
</HTML>

ANCHOR DAN LINK
Tag <A> memungkinkan kita untuk mendefinisikan anchors. (point atau tempat dimana kita dapat
mengaksesnya sewaktu-waktu) dan links (pemanggil anchors atau dokumen .html lain, yang membawa kita
masuk ke anchor tersebut ketika link kita click).
<A> sebagai Anchor
sebuah anchor mengedintifikasi suatu lokasi dalam suatu dokumen HTML. Untuk mengedintifikasi bahwa
tag <A> digunakan sebagai anchor, kita harus mengisi parameter NAME pada tag <A>
Syntax :
<A
NAME=”anchor name”
>
…
</A>
<A> Sebagai Link
Untuk mendefinisikan suatu link, pergunakan tag <A> dengan mengisi parameter HREF pada tag <A>, untuk
memberitahu tujuan dari sebuah link ketika user menekan click isi atau text yang berada di antara tag <A
HREF> dan </A>.
Nilai yang diisikan pada parameter HREF adalah berupa URL (uniform resource locators). Jika kita
menginginkan link membuka dokumen baru, maka nilai HREF harus merupakan nama dokumen yang dituju.
Namun, apabila kita menginginkan link membawa arah tampilan ke suatu tempat pada dokumen yang sama,
maka nilai HREF harus merupakan nama dari anchor tujuan yang diawali dengan simbol “#” (contoh :
#bagian 1).

11

Syntax :
<A
HREF=”location atau nama dokumen”
>
…
</A>
TRY THIS.....
<HTML>
<HEAD>
<TITLE>link pada dokumen yang sama</TITLE>
</HEAD>
<BODY>
<A NAME=section2>
<H2>A Cold Autum Day</H2></A>
if this anchor is in a file called “nowhere.htm” you could define a link that
jumps to the anchor as follows :
<P>Jump to the second section
<A HREF=”#section2”>A cold Autumn day</A> in the mystery “A man from nowhere.”
</BODY>
<HTML>
AND THIS.....
<HTML>
<HEAD>
<TITLE>link untuk memanggil dokumen yang sama</TITLE>
</HEAD>
<BODY>
<A HREF=”coba.html”>Panggil dokumen coba.html</A>untuk melihat link memanggil
dokumen lain.
</BODY>
<HTML>

IMAGE
Untuk menampilkan gambar pada html dapat menggunakan 2 cara yang pertama memanfaatkan tag <body>
dan yang kedua menggunakan tag <img>.
<BODY BACKGROUND> TAG
<HTML>
<HEAD>
<TITLE>Menampilkan Gambar</TITLE>
</HEAD>
<BODY BACKGROUND = "../citra/gunung.jpg">
Gambar Komputer terbaru
<IMG SRC = "komputer.gif" ALIGN = "MIDDLE">
</BODY>
</HTML>

12

<IMG> TAG
Tag <IMG> digunakan untuk menentukan file image yang akan ditampilkan dalam dokumen html.
File format image yang umum digunakan adalah:
• GIF (Graphics Interchange Format)
• JPEG (Joint Photograpic Experts Group)
Syntax :
<IMG
SRC=”location”
ALT=”Alternativetext”
ALIGN=”alignment”
BORDER=”border width”
HEIGHT=”height”
WIDTH=”width”
>
TRY THIS.....
<HTML>
<HEAD>
<TITLE> MEMBUAT IMG<TITLE>
</HEAD>
<BODY>
<img src=”Violets.JPG”
alt=”voilets” width=150
height=113>
</BODY>
</HTML>

TABLES
<TABLE> TAG
Tag <Table> digunakan tag yang berfungsi untuk mendefinisikan sebuah tabel. Di dalam tebel berisi baris
dan sel. Untuk membuat baris gunakan tag <tr>, untuk membuat baris heading gunakan tag <th>,
sedangkan untuk membuat sel gunakan tag <td>.
Syntax :
<table
align=”left | right | center”
bgcolor=”color”
border=”value”
cellpadding=”value”
cellspacing=”value”
height=”height”
width=”width”
cols=”numofcols”
hspace=”horizmargin”
vspace=”vertmargin”
>
…
</tabel>

13

<CAPTION> TAG
Tag <caption> digunakan untuk mendefinisikan judul dari suatu tabel. Tag ini diletakkan di dalam tag <table>
(antara <table> dan </table>)
Syntax :
<caption align=”bottom” | “top”>......</caption>
<TR> TAG
Tag <TR> berfungsi untuk mendefinisikan baris dalam tabel. tag ini diletakkan di dalam tag <table> (antara
<table> dan </table>)
Syntax :
<tr
align=”center | left | right”
valign=”baseline | bottom | middle | top”
bgcolor=”color”
>
...
</tr>
<TD> TAG
Tag <td> digunakan mendefinisikan sel dalam bari. Tag <td> ini diletakkan di dalam tag <tr> (antara <tr> dan
</tr>).
Syntax :
<td
vlign=”baseline | bottom | middle | top”
bgcolor=”color”
colspan=”value”
rowspan=”value”
height=”pixelheight”
width=”pixelwidth”
nowrap=”value”
>
….
</td>
<TH> TAG
Tag <th> digunakan untuk mendinisikan baris heading dalam tabel. Tag ini diletakkan di dalam tag <TR>
(antara <tr> dan </tr>)
Syntax :
<th
vlign=”baseline | bottom | middle | top”
bgcolor=”color”
colspan=”value”
rowspan=”value”
height=”pixelheight”

14

width=”pixelwidth”
nowrap=”value”
>
…..
</th>
TRY THIS.....
<html>
<head>
<title>membuat table</title>
</head>
<body>
<table border cellpadding=”8” cellspacing=”4” bgcolor=”yellow”>
<tr><th> english </th><th> spanish </th><th> german </th></tr>
<tr><td> one
</td><td> uno
</td><td> ein </td><tr>
<tr><td> two
</td><td> dos
</td><td> zwei </td><tr>
<tr><td> three
</td><td> tres
</td><td> drei </td><tr>
<caption align=”bottom”> <b> Table 1</b> : tables are as easy as one, two,
three
</caption>
</table>
</body>
</html>

FRAMES
<FRAMESET> TAG
Tag <frameset> digunakan untuk mendefinisikan suatu set yang terdiri dari beberapa frame yang akan
ditampilkan pada window browser. Dalam tag <frameset> (antara <frameset> dan </frameset>) terdiri dari
beberapa tag <frame>, dan tiap tag frame merupakan definisi dari suatu frame (bagian).
Syntax :
<frameset
cols = “column width list”
rows=”row height list”
border=”pix width”
bordercolor=”color”
frameborder=”yes” | “no”
>
...
</frameset>
<FRAME> TAG
Tag <frame> adalah tag yang digunakan untuk membuat frame. Frame ini merupakan suatu bagian pada
web browser yang dapat diatur secara individual (atau bisa dibilang window di dalam window).
Tag <frame> harus digunakan di dalam tag <frameset> (antara <frameset> dan </frameset>
Syntax :
< frame
name=”frame name”

15

noresize
scrolling=”yes” | “no” | “auto”
src=”url”
>
<NOFRAMES> TAG
Tag <noframes> menampilkan isi dokumen apabila browser yang digunakan oleh user tidak mendukung
frame. Tag ini tidak akan diakses apabila browser yang digunakan adalah browser yang mendukung frame.
Syntax :
<noframes>....<noframes>
TRY THIS.....
Perhatian :
Sebelum mencoba contoh di atas, dianjurkan untuk ,membuat dokumen HTML dengan nama : frleft.htm,
frtop.htm dan frmain.htm
<html>
<head>
<title>membuat frame</title>
</head>
<frameset cols=”20%,*”>
<frame src=”frleft.htm” name=”noname”>
<frameset rows=”30%,*”>
<frame src=”frtop.htm” name=”toptoc”>
<frame src=”frmain.htm” name=”outer”>
</frameset>
</frameset>
<noframes>
<body>
you must use a browser that can display frames to see this page.
</body>
</noframes>
</html>

PENGGUNAAN FORM dan ELEMENT INPUT
Kegunaan Form
Berikut ini beberapa contoh kegunaan Form dalam web:
1. memperoleh data-data user baik nama, alamat dan data lainnya
2. memperoleh informasi pembelian secara online
3. memperoleh feedback dari user mengenai website anda.
Form Element
Tag <FORM> digunakan untuk membuat form dalam document HTML.
ACCEPT : Mendefinisikan MIME yang di izinkan oleh server yang memuat script untuk memproses form.
Syntax: ACCEPT=”Internet Media Type”
METHOD : Menentukan bagaimana data akan di kirim ke server.
GET – data akan di kirim dengan menggunakan query string pada URL.
POST – data akan di kirim ke server sebagai block data ke script.
Syntax: METHOD = ” POST | GET ”

16

ACTION : Menentukan lokasi dari script yang akan memproses data dari form
Syntax: ACTION=”URL”
Mengenal komponen input
Dalam penulisan dokumen html khususnya yang berhubungan dengan form ada beberapa komponen input
yang sering digunakan, misalnya radio button,check box,check list, dan sebagainya.
• Teks satu baris (single-line text) <input type="text">

•
•
•
•
•
•

•
•
•

Teks banyak baris (multi-line text) <textarea></textarea>
Teks rahasia (password) <input type="password">
Pilihan tunggal (single selection) <input type="radio">, <select></select>
Pilihan majemuk (multiple selections) <select multiple></select>
Centang (on/off) <input type="checkbox">
Data bawaan/tersembunyi (hidden) <input type="hidden">
File <input type="file">
Koordinat 2D dalam sebuah bidang gambar <input type="image">
Aksi user melalui penekanan tombol <input type="submit">, <input type="reset">,
<input type="button">, <button></button>

TAG INPUT
Macam macamnya :
• <input type="jenis" name="nama" id="id" value="nilai" disabled>
type : text, password, radio, checkbox, image, submit, reset, button, hidden, file
name : identifier untuk sisi server
id : identifier untuk sisi browser
value : nilai default
disabled : jika disebutkan maka elemen tidak aktif (tidak digunakan)
•

<input type="[text | password]" name="nama" readonly size="m"
maxlength="n">
readonly : jika disebutkan maka elemen tidak bisa diubah nilainya
size : ukuran lebar dalam banyaknya karakter (bisa di-override oleh CSS)
maxlength : banyaknya karakter maksimal yang dapat dimasukkan user
• <input type="[radio | checkbox]" name="nama" checked>
checked : jika disebutkan maka defaultnya adalah dalam keadaan dipilih
• <input type="image" src="gambar" name="nama" alt="alternatif">
src : nama file gambar
alt : teks yang ditampilkan bila browser tidak dapat menampilkan gambar
TAG TEXTAREA, SELECT, BUTTON
• <textarea name="nama" rows="b" cols="k">nilai</textarea>
nilai : nilai default
rows : banyaknya baris yang ditampilkan (tinggi)
cols : banyaknya kolom/karakter yang ditampilkan (lebar)
• <select name="nama" multiple size="r">
<option value="nilai 1" selected>teks 1</option>
<option value="nilai 2">teks 2</option> … </select>
multiple : jika disebutkan maka pilihan boleh lebih dari satu (sambil menekan tombol Ctrl)
size : banyaknya baris pilihan yang ditampilkan (default = 1)
selected : jika disebutkan maka defaultnya dalam keadaan terpilih

17

• <button type="jenis" name="name" value="nilai">tampilan</button>
type : submit, reset, button
tampilan : kode dalam HTML yang akan menjadi tampilan untuk tombol
TRY THIS.....
<HTML>
<HEAD>
<TITLE>Contoh Penggunaan Formulir</TITLE>
</HEAD>
<BODY>
<FORM ACTION = "info.htm" METHOD = "POST">
Nama :
<INPUT TYPE = "TEXT" NAME = "nama" SIZE = "20"
MAXLENGTH = "20">
<BR>
Hobby :
<INPUT TYPE = "TEXT" NAME = "hobby" SIZE = "25"
MAXLENGTH = "40">
<BR>
<INPUT TYPE = "SUBMIT" VALUE = "Kirim">
<INPUT TYPE = "RESET" VALUE = "Kosongkan">
</FORM>
</BODY>
</HTML>
File info.htm yang dituju oleh web diatas.
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
INFO..................
</BODY>
</HTML>

TAG TAG HTML LENGKAP
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•

Structure
• html
• head
• body
• div
• span
Meta Information
• DOCTYPE
• title
• link
• meta
• style
Text

• p

18

h1, h2, h3, h4, h5, and h6
strong
em
abbr
acronym
address
bdo
blockquote
cite
q
code
ins
del
dfn
kbd
pre

• samp
• var
• br

•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•

Links
• a
• base
Images and Objects
• img
• area
• map
• object
• param
Lists

•
•
•
•
•
•

ul
ol
li
dl
dt
dd

Tables
•
•
•
•
•
•
•
•
•
•

table
tr
td
th
tbody
thead
tfoot
col
colgroup
caption

Forms
•
•
•
•
•
•
•
•
•
•

form
input
textarea
select
option
optgroup
button
label
fieldset
legend

Scripting
• script
• noscript
Presentational
• b, i, tt, sub, sup, big, small, hr
The Whole Shebang
• a
• abbr
• acronym

19

address
area
b
base
bdo
big
blockquote
body
br
button
caption
cite
code
col
colgroup
dd
del
dfn
div
dl
DOCTYPE
dt
em
fieldset
form
h1, h2, h3, h4, h5, and h6
head
html
hr
i
img
input
ins
kbd
label
legend
li
link
map
meta
noscript
object
ol
optgroup
option
p
param
pre
q
samp
script
select
small
span
strong
style
sub

•
•
•
•
•
•
•

•
•
•
•
•
•

sup
table
tbody
td
textarea
tfoot
th

thead
title
tr
tt
ul
var

TUGAS :
1. Buatlah Website Dinamis dengan tema e-commerce dan personal

BAB II.CASCADING STYLE SHEETS (CSS)
TUJUAN :
1. Memahami tentang konsep CSS
1. Memahami aturan penulisan pada CSS
2. Memahami selector sebagai pengontrol design
3. Memahami pembuatan background
4. Memformat text pada web
5. Memahami pengaturan bentuk font
6. Membuat pengaturan tabel dan pewarnaannya
7. Membuat hyperlink dan tombol yang menarik dll

Konsep CSS
Apa itu CSS :
• Feature untuk membuat dynamic HTML.
• Style sheet mendeskripsikan bagaimana tampilan document HTML di layar (template)
• Membuat special efek (mendefinisikan style untuk <H1> dengan style bold dan italic dan berwarna
biru)
• Support ke semua browser.
Aturan penulisan :
• Nilai untuk property tidak boleh dalam tanda petik.
contoh : color : green;
• Nama property bersifat case sensitive.
color : green;
property : color
value : green

Cara penggunaan CSS :
•

External Style Sheet
Bentuk :
<link rel=“stylesheet” type=“text/css” href=“css_files.css”>
dimana :
• <link, merupakan tag pembuka diakhiri dengan tanda “>”
• rel=“stylesheet”, menerangkan halaman ini akan dikenai efek style sheet
• type=“text/css”, file yang dipanggil berupa css
• href=“css_files.css”, alamat dokumen stylesheet yang dipanggil
Contoh Penggunaan :
script efek.css nya.....
body {
color: green;
background: white;
font-family : arial;
}

20

HTML nya......
<HTML>
<HEAD>
<TITLE>centranet</TITLE>
<LINK REL="STYLESHEET"
TYPE="text/css" HREF="efek.css">
</HEAD>
<BODY>
<H1>STIKOM PGRI</H1>
<P> STIKOM adalah kampus teknik yang
concern ke bidang IT
</BODY>
</HTML>
•

Internal Style Sheet
Bentuk umum :
<style type=“text/css”>
...definisi style...
</style>
Contoh Penggunaan :
<HTML>
<HEAD>
<TITLE>Stikom PGRI</TITLE>
<STYLE type="text/css">
body {
color: white;
background: green;
font-family : arial;
}
</STYLE>
</HEAD>
<BODY>
<H1>STIKOM PGRI</H1>
<P> STIKOM adalah kampus teknik yang
concern ke bidang IT
</BODY>
</HTML>

•

Inline Style sheet
Contoh Penggunaan :
<HTML>
<HEAD>
<TITLE>centranet</TITLE>
</HEAD>
<BODY style="color: white;
background: green;
font-family : arial; ">
<H1>ZEFNET</H1>
<P>ZEFNET adalah sebuah web

21

Developer dan Linux Center
</BODY>
</HTML>
ATURAN PENULISAN PADA CSS
Syntaxis CSS dibagi dalam 3 bagian :
selector {property : value}
dimana :
selector : tag HTML yang akan didefinisikan (body, H1, Link , dll).
property : atribut yang akan diubah
Cara penulisan :
FONT-FAMILY : sans-serif;
FONT-SIZE : small;
Cara penulisan yang salah :
FONT-FAMILY : “sans-serif”;
FONT-SIZE : ‘small’;
Cara mendeklarasikan kelompok : (tanda koma serta &)
H1, H2 {color : green};
H3, H4 & H5 {color : red};
Cara menuliskan komentar :
• Menggunakan tanda : /* ..... */
• Menggunakan tanda : <!--->
Bentuk ukuran :

SELECTOR SEBAGAI PENGONTROL DESIGN
1. Selector untuk merubah body.
<HTML>
<HEAD>
<TITLE> Selector </TITLE>
</HEAD>
<style type="text/css">
body{
FONT-FAMILY: Geneva, Arial;
FONT-SIZE: 20px;
color: red;
BACKGROUND-COLOR: green;
}
</style>
<BODY>

22

Halaman efect CSS
</BODY>
</HTML>
2. Jenis-jenis selector
a. Selector bebas
<HTML>
<HEAD>
<TITLE> Selector
</TITLE>
gbawah{
TEXT-DECORATION: underline;
}
</style>
</HEAD>
<BODY>
<gbawah> Efect Garis Bawah dengan Selector Bebas </gbawah>
</BODY>
</HTML>
b. Selector dengan class
<HTML>
<HEAD>
<TITLE> Selector
</TITLE>
.right { text-align : right }
</style>
</HEAD>
<BODY>
<h2 class="right">Class
<p class="right"> Class

Heading 2 </h2>
Paragraf</p>

</BODY>
</HTML>
c. Selector Id
<HTML>
<HEAD>
<TITLE> Selector
</TITLE>
#BODY_115 {
FONT-SIZE: 20px;
TEXT-DECORATION: underline;
COLOR: blue;
FONT-FAMILY:Comic Sans MS; }
</style>
</HEAD>

23

<BODY id="BODY_115">
Menggunakan ID Selector
</BODY>
</HTML>

MEMFORMAT HALAMAN WEB
1. Format dengan margin
<HTML>
<HEAD>
<TITLE>Pengaturan Margin</TITLE>
<STYLE ="text/css">
BODY
{
margin-top : 1cm;
margin-right : 2cm;
margin-bottom : 1cm;
margin-left : 2cm;
}
</STYLE>
</HEAD>
<BODY>
Pengaturan Margin Halaman (1cm,2cm,1cm,2cm)
</BODY>
</HTML>
2. Pemetaan menggunakan padding
Padding hampir sama dengan margin :
a. Margin hanya digunakan untuk membuat batasan-batasan sisi halaman.
b. Padding dapat membuat batasan-batasan pada komponen web lain seperti tabel, disamping pengaturan
batas halaman.
<HTML>
<HEAD>
<TITLE>Pengaturan Margin</TITLE>
<STYLE ="text/css">
BODY {
padding-top : 10%;
padding-right : 20%;
padding-bottom : 40%;
padding-left: 20%;
}
</STYLE>
</HEAD>
<BODY>
Text ini berada di tengah halaman ,
karna di lakukan pengaturan halaman
dengan menggunakan padding atas 10%, kanan 20%,bawah 40%,dan kiri 20%.
</BODY>
</HTML>

24

MEMBUAT BACKGROUND
1. Background warna
<HTML>
<HEAD>
<TITLE>Menggunakan Background Warna</TITLE>
BODY { background-color : yellow}
</STYLE>
</HEAD>
<BODY>
Halaman ini di buat Berwarna Kuning
</BODY>
</HTML>
2. Background campuran
<HTML>
<HEAD>
<TITLE>Menggunakan Background Warna</TITLE>
<STYLE ="text/css">
body {background-color : #99CCFF}
h2 {background : green}
h3 {background-color : transparent}
p {background : rgb(240,248,255)}
</STYLE>
</HEAD>
<BODY>
<h2>Header 2,Background Hijao</h2>
<h3>Header 3 , Bakground Transparan</h3>
<p>Background pada paragraph</p>
</BODY></HTML>
3. Background gambar
Properties
background-image
background-repeat

Value
url
repeat
repeat-x
repeat-y
no-repeat

Keterangan
Alamat gambar yang dituju
Diulang dlm halaman
Diulang sumbu x
Diulang sumbu y
Tampil 1 gbr

Backgroundposition

top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x-% y-%
x-pos y-pos

Atas kiri hal
Atas tngh hal
Atas kanan hal
Tgh kiri hal
Pusat hal
Tngh kanan hal
Bwh kiri hal
Bwh tgh hal
Bwh kanan hal
Pakai nilai %

25

Contoh 1 :
<HTML>
<HEAD>
<TITLE>Menggunakan Background Gambar</TITLE>
<STYLE ="text/css">
BODY
{
background-image:
url("drums.jpg");
background-repeat: repeat-x;
}
</STYLE>
</HEAD>
<BODY>
Background Berulang pada Sumbu X
</BODY>
</HTML>
Contoh 2 :
<HTML>
<HEAD>
<TITLE>Menggunakan Background Gambar</TITLE>
<STYLE ="text/css">
BODY
{
background-image:url ("motor.jpg");
background-repeat: no-repeat;
background-position: center center; }
</STYLE>
</HEAD>
<BODY>
Background di Pusat Halaman
</BODY>
</HTML>

FORMAT TEXT PADA WEB
Properties
Value
Keterangan
Pengaturan warna
color
green, dll
Pengaturan Spasi (jrk antar karakter)
letter-spacing
Normal
Ukrn standar HTML
Length
Ukrn panjang (cm,px)
Perataan Text
text-align
left
right
center
justify
text-decoration
none
Bentuk standar
underline
Bergaris bwh
overline
Bergaris atas
line-through Text dicoret
blink
Text berkedip

26

Pengaturan text indentasi
text-indent
length
%
Pengubahan Bentuk Karakter
text-transform
capitalize
uppercase
lowercase
none

Dengn cm, px
Dengan persentase

Contoh 1 :
<HTML>
<HEAD>
<TITLE>Format Text </TITLE>
<STYLE ="text/css">
p {color : green; letter-spacing: 0.5cm}
h4 {letter-spacing: -2px}
</STYLE>
</HEAD>
<BODY>
<p>Pengaturan Spasi Pada Paragraph </p>
<h4> Header 4</h4>
</BODY>
</HTML>
Contoh 2 :
<HTML>
<HEAD>
<STYLE ="text/css">
h1 {text-align: center}
h2 {text-align: left}
h3 {text-align: right}
</STYLE>
</HEAD>
<BODY>
<h1>Header 1,Di tengah</h1>
<h2>Header 2 , Di kiri</h2>
<h3>Header 3 ,Di kanan</h3>
</BODY>
</HTML>
Contoh 3 :
<HTML>
<HEAD>
<STYLE ="text/css">
em {text-decoration : overline}
h2 {text-decoration: blink}
h3 {text-decoration: underline}
a {text-decoration: none}
</STYLE>
</HEAD>

27

<BODY>
<em>Bentuk Overline</em>
<h2>Header 2, Bentuk Line-through</h2>
<h3>Header 3,Bentuk Underline</h3>
<p> <a href="http://justerda.wordpress.com">
Penggunaan Dalam Link,Nilai NONE</a></p>
</BODY>
</HTML>
Contoh 4 :
<HTML>
<HEAD>
<STYLE ="text/css">
p.besar {text-transform: uppercase}
p.kecil {text-transform: lowercase}
</STYLE>
</HEAD>
<BODY>
<p class="besar">
pengubahan kedalam hurup Besar
</p>
<p class="kecil">
PENGUBAHAN KEDALAM HURUF KECIL
</p>
</BODY>
</HTML>

PENGATURAN FONT
Properties
Jenis Font
font-family
Ukuran Huruf
Font-size

Value
arial, dll

Small
Medium
Large
Length
%
Pengaturan gaya pada font
font-style
normal
italic
oblique
Ketebalan huruf
font-weight

Keterangan

Kecil
Menengah
Besar
Besar font (pt,px)
Persentase

normal
bold
100 ~ 900

Contoh 1 :
<HTML>
<HEAD>
<TITLE>Pengaturan Font</TITLE>
<STYLE ="text/css">
p.italic

28

{
font-size :200 % ;
font-style: italic;
}
p.normal{
font-family : verdana ;
font-style: normal;
}
p.oblique {font-style: oblique}
</STYLE>
</HEAD>
<BODY>
<P class="italic">Menggunakan Style Italic</P>
<P class="normal">Menggunakan Style Normal </P>
<P class="oblique">Menggunakan Style Oblieque</P>
</BODY>
</HTML>
Contoh 2 :
<HTML>
<HEAD>
<TITLE>Pengaturan Font</TITLE>
<STYLE ="text/css">
p.normal
{
font-weight: normal;
}
p.thick
{
font-weight: bold;
}
p.thicker
{
font-family : times ;
font-weight: 900;
}
</STYLE>
</HEAD>
<BODY>
<p class="normal">
This is a paragraph</p>
<p class="thick">
<p class="thicker">
</BODY>
</HTML>

29

PENGATURAN TABEL
Yang perlu diperhatikan adalah pengaturan border, padding dan margin suatu tabel.
1. Pengaturan padding
<HTML>
<HEAD>
<TITLE>Pengaturan Padding Table</TITLE>
td.kiri{
padding-top: 2cm;
padding-right: 2cm;
padding-bottom: 2cm;
padding-left: 2cm ;
background-color : #F0F8FF;
}
</style>
</HEAD>
<BODY>
<TABLE BORDER="1">
<TR>
<TD class="kiri">Pading dengan jarak 2cm dari kiri,atas,kanan,dan bawah</TD>
<TD>Tanpa jarak </TD>
</TR>
</TABLE>
</BODY>
</HTML>
2. Menggunakan file css untuk mempercantik pembuatan tabel.
File table_specbody.css
/* CSS Document */
TH {
color : #FFFFFF;
background-color : #336699;
border-width: 1px ;
border-style:solid;
border-color :red ;
font-size: 9pt;
}
TD {
color : red;
background-color : #E6E6FA;
border-width: 1px ;
border-style:solid;
border-color :blue ;
font-size: 9pt;
}
File html yang akan memanggil file css
<HTML>
<HEAD>

30

<TITLE>Pengaturan Table spec</TITLE>
<LINK REL="STYLESHEET" TYPE="text/css" HREF="table_specbody.css">
</HEAD>
<BODY>
<table width="468" border="0" cellpadding="5" cellspacing="0" >
<tr>
<th width="112" >Nama Computer</th>
<th width="91">Prossesor</th>
<th width="96">Ram</th>
<th width="137" >System Operasi</th>
</tr>
<tr>
<td>Clnt-1</td>
<td >IP 4 1,8 Ghz</td>
<td >10 GB</td>
<td >Redhat Linux</td>
</tr>
<tr>
<td >Clnt-2</td>
<td >IP 2 Ghz C</td>
<td >6 GB</td>
<td >Mandrake Linux</td>
</tr>
<tr>
<td >Clnt-2</td>
<td >XP 2000+ </td>
<td >20 GB</td>
<td>Windows</td>
</tr>
</table>
</BODY>
</HTML>

PENGATURAN HYPERLINK & TOMBOL YANG MENARIK
Syntax penulisan pada CSS :
a:link {property : value}
Selector
a:link
a:visited
a:active
a:hover

Keterangan
Keadaan awal pemicu link aktif
Keadaan pemicu link setelah dikunjungi
Keadaan pemicu yang sedang aktif
Kejadian pada pemicu link saat mouse
digerakkan diatasnya

1. Penggunaan property selector
<HTML>
<HEAD>
<TITLE>Pengaturan pada link</TITLE>
/*Konversi pengaturan Link pada contoh

31

sebelumya menggunakan css */
A:link {color : green;}
A:hover { color : pink;}
</STYLE>
</HEAD>
<BODY>
<a href="http://justerda.wordpress.com" target="_self">Contoh Hyperlink
menggunakan CSS</a>
</BODY>
</HTML>
2. Pembuatan tombol dengan tabel
<HTML>
<HEAD>
<TITLE>Pengaturan Pada Link background</TITLE>
<STYLE ="text/css">
A:link {text-decoration: none}
A:visited {text-decoration: none}
A:active {text-decoration: none}
A:hover {
font-weight:none;
color: red;
background-color:blue;}
</STYLE>
</HEAD>
<BODY>
<TABLE border="1">
<TR>
<TD width="144">
<a href="#">Arahkan Mouse ke sini</a>
</TD>
</TR>
<TR>
<TD width="144">
<a href="#">Arahkan Mouse ke sini</a>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
3. Membuat tombol visual 3D
a. Pembuatan file css
/* CSS Document */
.leftlinks {
border:1px solid #22476C;
padding:5px;
margin:5px;

32

text-align:middle;
background-color:#336699;
width:150px;
}
.leftlinks a {
display:block;
margin:3px 0px;
border-top:1px solid #4C86C0;
border-left:1px solid #4C86C0;
border-right:1px solid #22476C;
border-bottom:1px solid #22476C;
padding: 4px 10px;
text-align:center;
color:#EDEDED;
text-decoration:none;
}
.leftlinks a:link {
color:#EDEDED;
}
.leftlinks a:visited {
color:#EDEDED;
}
.leftlinks a:hover {
display:block;
margin:3px 0px;
border-top:1px solid #22476C;
border-left:1px solid #22476C;
border-bottom:1px solid #4C86C0;
border-right:1px solid #4C86C0;
padding: 5px 9px 3px 11px;
text-align:center;
color:#EED929;
text-decoration:none;
}
b. Pembuatan file HTML utk memanggil css
<HTML>
<HEAD>
<TITLE>Pengaturan Pada Link Visualisasi tombol</TITLE>
<LINK REL="STYLESHEET" TYPE="text/css" HREF="link_frtombol.css">
</HEAD>
<BODY>
<div class="leftlinks">
<a href="index.htm">Teras Wamika</a>
<a href="profil.htm">Pssrofil Organisasi</a>
<a href="struktur.htm">Struktur</a>

33

<a
<a
<a
<a
</div>
</BODY>
</HTML>

href="pembimbing.htm">Pembimbing Org</a>
href="dpo.htm">DPO Organisasi</a>
href="kegiatan.htm">Kegiatan Rutin</a>
href="berita.htm">Berita UKM</a>

Fungsi tag <div> : hampir sama dengan tag paragraf <p>, berguna untuk mengelompokkan sejumlah baris
teks yang memiliki karakteristik yang sama.

TUGAS :
1. Buatlah Website yang sudah dilengkapi CSS.

BAB III. JAVASCRIPT
TUJUAN :
1. Memahami tentang struktur javascript
2. Memahami tentang pemrograman di javascript
3. Memahami tentang pemakaian obyek dan form

SEKILAS TENTANG JAVASCRIPT
Javascript adalah bahasa skrip yang ditempelkan pada kode HTML dan diproses di sisi klien. Dengan
adanya bahasa ini, kemampuan dokumen HTML menjadi semakin luas. Sebagai contoh, dengan
menggunakan JavaScript dimungkinkan untuk memvalidasi masukan-masukan pada formulir sebelum
formulir dikirimkan ke server. Javascript bukanlah bahasa Java dan merupakan dua bahasa yang berbeda.
Javascript diinterpretasikan oleh klien (kodenya bisa dilihat pada sisi klien), sedangkan kode Java
dikompilasi oleh pemrogram dan hasil kompilasinyalah yang dijalankan oleh klien.

STRUKTUR JAVASCRIPT
Struktur dari JavaScript adalah sbb :
<SCRIPT LANGUAGE = ”JavaScript”>
<!- Penulisan kode javascript
// - - >
</SCRIPT>
Keterangan :
Kode <!- // - - > umumnya disertakan dengan tujuan agar sekiranya browser tidak
mengenali JavaScript maka browser akan memperlakukannya sebagai komentar sehingga
tidak ditampilkan pada jendela browser.

JAVASCRIPT SEBAGAI BAHASA BERORIENTASI PADA OBYEK
Properti
Properti adalah atribut dari sebuah objek. Contoh, objek mobil punya properti warna mobil.
Penulisan :
Nama_objek.nama_properti = nilai
window.defaultStatus = ”Selamat Belajar JavaScript”;

34

Metode
Metode adalah suatu kumpulan kode yang digunakan untuk melakukan sesuatu tindakan terhadap objek.
Penulisan :
Nama_objek.nama_metode(parameter)
document.write (”Hallo”)

LETAK JAVASCRIPT DALAM HTML
Sintaks Javascript dalam dokumen HTML dapat diletakkan pada :
1. Bagian Head
2. Bagian Body (jarang digunakan).
3.
LATIHAN – LATIHAN :
A. DASAR-DASAR JAVASCRIPT
1. Pemakaian alert sebagai property window
<HTML>
<HEAD>
<TITLE>Alert Box</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
<!-window.alert("Ini merupakan pesan untuk Anda");
//-->
</SCRIPT>
</BODY>
</HTML>
2. Pemakaian metode dalam objek.
<HTML>
<HEAD>
<TITLE>Skrip JavaScript</TITLE>
</HEAD>
<BODY>
Percobaan memakai JavaScript:<BR>
<!-document.write("Selamat Mencoba JavaScript<BR>");
document.write("Semoga sukses!");
//-->
</SCRIPT>
</BODY>
</HTML>
3. Pemakaian prompt
<HTML>
<HEAD>
<TITLE>Pemasukan Data</TITLE>
</HEAD>

35

<BODY>
<!-var nama = prompt("Siapa nama Anda?","Masukkan nama anda");
document.write("Hai, " + nama);
//-->
</SCRIPT>
</BODY>
</HTML>
4. Pembuatan fungsi dan cara pemanggilannya
<HTML>
<HEAD>
<TITLE>Contoh Program Javascript</TITLE>
</HEAD>
<SCRIPT language="Javascript">
function pesan(){
alert ("memanggil javascript lewat body onload")
}
</SCRIPT>
<BODY onload=pesan()>
</BODY>
</HTML>
DASAR-DASAR PEMROGRAMAN DI JAVASCRIPT
1. Operasi dasar aritmatika
<HTML>
<HEAD>
</HEAD>
function test (val1,val2)
{
document.write("<br>"+"Perkalian : val1*val2 "+"<br>")
document.write(val1*val2)
document.write("<br>"+"Pembagian : val1/val2 "+"<br>")
document.write(val1/val2)
document.write("<br>"+"Penjumlahan : val1+val2 "+"<br>")
document.write(val1+val2)
document.write("<br>"+"Pengurangan : val1-val2 "+"<br>")
document.write(val1-val2)
document.write("<br>"+"Modulus : val1%val2 "+"<br>")
document.write(val1%val2)
}
</SCRIPT>
<BODY>
<input type="button" name="button1" value="arithmetic"
onclick=test(9,4)>
</BODY>
</HTML>

36

2. Operasi relational
<HTML>
<HEAD>
</HEAD>
function test () {
val1=window.prompt("Nilai I :")
val2=window.prompt("Nilai II :")
document.write("<br>"+"val1==val2"+"<br>")
document.write(val1==val2)
document.write("<br>"+"val1!=val2"+"<br>")
document.write(val1!=val2)
document.write("<br>"+"val1&gtval2"+"<br>")
document.write(val1>val2)
document.write("<br>"+"val1&ltval2"+"<br>")
document.write(val1<val2) }
</SCRIPT>
<BODY>
<input type="button" name="button1" value="relational"
onclick=test()>
</BODY>
</HTML>
3. Seleksi kondisi (if..else)
<HTML>
<HEAD>
<TITLE>Contoh if-else</TITLE>
</HEAD>
<BODY>
<!-var nilai = prompt("Nilai (0-100): ", 0);
var hasil = "";
if (nilai >= 60)
hasil = "Lulus";
else
hasil = "Tidak Lulus";
document.write("Hasil: " + hasil);
//-->
</SCRIPT>
</BODY>
</HTML>
4. Penggunaan operator switch untuk seleksi kondisi
<HTML>
<HEAD>
</HEAD>
function test ()
{

37

val1=window.prompt("Input Nilai (1-5):")
switch (val1)
{
case "1" :
document.write("bilangan satu")
break
case "2" :
document.write("bilangan dua")
break
case "3" :
document.write("bilangan tiga")
break
case "4" :
document.write("bilangan empat")
break
case "5" :
document.write("bilangan lima")
break
default :
document.write("bilangan lainnya")
}
}
</SCRIPT>
<BODY>
<input type="button" name="button1" value="switch"
onclick=test()>
</BODY>
</HTML>
5. Pemakaian looping < for >
<HTML>
<HEAD>
</HEAD>
<BODY>
<!-for (x=0;x<=10;x++)
document.write(x+"<br>")
// -->
</SCRIPT>
</BODY>
</HTML>
6. Pemakaian looping < do..while >
<HTML>
<HEAD>
</HEAD>
<BODY>

38

<!-var x=0
do{
x++;
}
while (x<=10)
// -->
</SCRIPT>
</BODY>
</HTML>
7. Pemakaian looping < while >
<HTML>
<HEAD>
</HEAD>
<BODY>
<!-var x=0
while (x<=10){
x++;
}
// -->
</SCRIPT>
</BODY>
</HTML>
PEMBUATAN FORM
1. Form input :
<html>
<head> </head>
function test () {
var val1=document.kirim.T1.value
if (val1%2==0)
document.kirim.T2.value="bilangan genap"
else
document.kirim.T2.value="bilangan ganjil"
}
</SCRIPT>
<body>
<form method="POST" name="kirim">
<p>BIL <input type="text" name="T1" size="20">
MERUPAKAN BIL <input type="text" name="T2" size="20">
</p>
<p><input type="button" value="TEBAK" name="B1" onclick=test()>
</p>

39

</form>
</body></html>
2. Form button :
<HTML>
<HEAD>
<TITLE>Objek document</TITLE>
</HEAD>
<BODY>
<!-function ubahWarnaLB(warna) {
document.bgColor = warna;
}
function ubahWarnaLD(warna) {
document.fgColor = warna;
}
//-->
</SCRIPT>
<H1>TES</H1>
<FORM>
<INPUT TYPE = "BUTTON"
VALUE = "Latar Belakang Hijau"
onClick = "ubahWarnaLB('GREEN')">
VALUE = "Latar Belakang Putih"
onClick = "ubahWarnaLB('WHITE')">
VALUE = "Teks Kuning"
onClick = "ubahWarnaLD('YELLOW')">
VALUE = "Teks Biru"
onClick = "ubahWarnaLD('BLUE')">
</FORM>
<!-document.write("Dimodifikasi terakhir pada " +
document.lastModified);
//-->
</SCRIPT>
</BODY>
</HTML>

TUGAS :
1. Buatlah Website yang dilengkapi Javascript

40

BAB IV. SUMBER
•
•
•

The Ultimate HTML Reference, Ian Lloyd, SitePoint Pty Ltd, Australia.
Siapa saja bisa membuat website dengan HTML dan CSS, Untung Rahardja.
Mendesain web menggunakan HTML,CSS dan Javascript, Moh.Erdda Habiby,
http://justerda.wordpress,com

41

Buku ajar desain web

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a Buku ajar desain web

Similar a Buku ajar desain web (20)

Buku ajar desain web