Suatu file HTML dapat dibuat menggunakan editor text sederhana seperti notepad

(1)

Modul 1: Dasar-dasar HTML

1.1 HTML

â¢ HTML adalah singkatan dari Hypertext Markup Language

â¢ Suatu file HTML merupakan file text yang diapit oleh

tag-tag markup

â¢

Tag markup

memberitahu Web browser bagaimana halaman ditampilkan

â¢ Suatu file HTML haruslah mempunyai ekstensi sebagai

htm

atau

html

â

.html

lebih disukai

â

.htm

digunakan karena masih ada server dengan sistim operasi lama yang hanya

dapat menangani nama â8+3â (8 characters, dot, 3 characters)

Suatu file HTML dapat dibuat menggunakan editor text sederhana seperti

notepad

1.2 Sejarah HTML

Tim Berners-Lee pada tahun 1989 yang mengusulkan suatu sistim dokumen hypertext

untuk digunakan oleh organisasi riset nuklir Eropa, CERN. HTML yang didasarkan Standard

Generalized Markup Language (SGML) belakangan diperkenalkan pertama kali dalam sistim

yang disebut "The World-Wide Web" (WWW) pada Oktober 1990. Kronologi perkembangan

HTML sejak diperkenalkan pertamakali hingga saat ini diperlihatkan sbb:

ï

Oktober tahun 1990: pertama kali doleh Berners-Lee's

ï

Musim panas tahun 1991: spesifikasi HTML di rilis pada Internet

ï

Juni 1993: draft yang mendefenisikan HTML di rilis

ï

Juli 1994: draft untuk HTML 2.0 di rilis

ï

Februari 1995: draft HTML 2.0 hasil perbaikan diusulkan sebagai suatu RFC (Request

For Comments)

ï

September 1995: HTML 2.0 diterima sebagai standar - (RFC 1866)

ï

Maret 1995: draft HTML 3.0 di rilis (belakangan habis masa nerlakunya/expired)

ï

Mei 1996: draft HTML 3.2 di rilis

ï

Juli 1996: HTML experimental DTD 'Cougar' di rilis

ï

Januari 1997: HTML 3.2 (Wilbur) direkomendasi oleh W3C (World Wide Web

Consortium

ï

Juli 1997: darft HTML 4.0 (dikembangkan dari Cougar) di rilis

ï

Nopember 1997: HTML 4.0 menjadi usulan rekomendasi W3C

ï

Desember 1997: HTML 4.0 direkomendasi oleh W3C

ï

April 1998: HTML 4.0 direvisi dan direkomendasi oleh W3C

ï

Desember 1998: draft untuk formulasi HTML dalam XML (eXtensible Markup

Language) dengan codename âVoyagerâ di rilis

ï

Januari 1999: draft kerja awal XHTML 1.0 di rilis

ï

Desember 1999: XHTML 1.0 menjadi usulan rekomendasi W3C

ï

September 1999: draft kerja awal XHTML 1.1 di rilis

ï

Januari 2000: XHTML 1.0 direkomendasi oleh W3C

ï

April 2001: XHTML 1.1 menjadi usulan rekomendasi W3C

ï

Mei 2001: XHTML 1.1 direkomendasi oleh W3C

1.3 Tag HTML

â¢

Tag HTML digunakan untuk mark elemen HTML

â¢

Tag HTML ditempatkan dalam kurung,

<

â¦

>

(2)

â¢

Kebanyakan tag HTML merupakan pasangan,

<b>

dan

</b>

(tag awal dan akhir)

â¢

Text yang berada diantara kedua tag adalah unsur content (tag bertindak sebagai

container)

â¢

Tag harus tersusun secara baik (properly nested ) yaitu tidak saling tumpang tindih

â¢

Tag tidak case sensitive;

<b>

mempunyai arti sama dengan

<B>

â¢

XHTML adalah case sensitive dan harus

lower case

1.4 Struktur dokumen HTML

Dokumen HTML minimal memliki tag sbb:

<html>

<head>

<title>My Title</title>

</head>

<body>

Hello, World!

</body>

</html>

tag

<HTML>

dan

</HTML>

digunakan untuk menandai awal dan akhir dari suatu file

HTML

tag

<TITLE>

dan

</TITLE>,

Tulisan yang berada diantara tag ini akan ditampilkan

oleh browser pada bagian title yang mana merupakan title dari jendela browser.

tag

<HEAD> </HEAD>

,

Berisi keterangan informasi halaman, seperti title dan jenis

dokumen dll

tag

,

menandai awal dan akhir dari badan dokumen HTML yang

ditampilkan pada browser

1.5 Fungsi dan Pengunaan tag-tag dalam HTML

1.5.1 Menformat Text

HTML mengandung tag yang dapat digunakan memformat tampilan tulisan pada

halaman anda. Tag yang digunakan a.l:

tag <i>

dan

</i> untuk membuat text

italic

tag <b>

and

</b> untuk membuat text

boldface

tag <h1>

,

<h2>

,

<h3>

,

<h4>

,

<h5>

, atau

<h6>

untuk header dalam dolumen dengan

ukuran font besar untuk

<h1>

dan terkecil untuk

<h6>

(lebih lanjut lihat modul)

Contoh :

Kode

Hasil

<H1>Heading 1</H1> <H2>Heading 2</H2> <H3>Heading 3</H3> <H4>Heading 4</H4> <H5>Heading 5</H5> <H6>Heading 6</H6>

Heading 1

Heading 2

Heading 3

Heading 4 Heading 5 Heading 6

(3)

Tabel tag untuk Formating dan Style

Author's Address <ADDRESS></ADDRESS>

Block Quote <BLOCKQUOTE></BLOCKQUOTE> Citation <CITE></CITE>

Code <CODE></CODE> Definition <DFN></DFN> Division <DIV></DIV> Emphasis <EM></EM> Heading <H?></H?> Keyboard Input <KBD></KBD> Large Font Size <BIG></BIG> Sample Output <SAMP></SAMP> Small Font Size <SMALL></SMALL> Strong Emphasis <STRONG></STRONG> Variable <VAR></VAR>

Tabel tag Formatting Presentasi/tampilan

Base Font Size <BASEFONT SIZE=?> Blinking <BLINK></BLINK> Bold <B></B>

Center <CENTER></CENTER> Change Font Size <FONT SIZE=+|-?></FONT>

Font Color <FONT COLOR="#$$$$$$"></FONT> Font Size <FONT SIZE=?></FONT>

Italic <I></I> Preformatted <PRE></PRE> Strikeout <S></S> Subscript <SUB></SUB> Superscript <SUP></SUP> Typewriter <TT></TT> Underline <U></U>

Width <PRE WIDTH=?></PRE> Tabel tag Pengaturan Baris Halaman (Dividers)

Alignment <HR ALIGN=LEFT|RIGHT|CENTER> Align Text <P ALIGN=LEFT|CENTER|RIGHT> </P> Line Break <BR>

Clear Textwrap <BR CLEAR=LEFT|RIGHT|ALL> Horizontal Rule <HR>

No Break <NOBR> </NOBR> Paragraph <P> </P>

Solid Line <HR NOSHADE> Thickness <HR SIZE=?>

Width <HR WIDTH=?>

Width Percent <HR WIDTH=%> Word Break <WBR>

(4)

Tabel tag Pengaturan Warna dan Backgrounds

Active Link <BODY ALINK="#$$$$$$"> Background Color <BODY BGCOLOR="#$$$$$$"> Text Color <BODY TEXT="#$$$$$$"> Tiled Background <BODY BACKGROUND="URL"> Link Color <BODY LINK="#$$$$$$"> Visited Link <BODY VLINK="#$$$$$$">

1.5.2 Whitespace

â¢

Whitespace adalah karakter yang tidak diprint seperti: space, tab, newline, dan lainnya

â¢

HTML memperlakukan whitespace sebagai pemisah kata, dan baris text secara

otomatis mengikuti lebar dari halaman

â¢

Untuk pidah baris halaman dapat digunakan tag <br> atau tag

<p>

dan

</p>

membuat kumpulan text dalam satu pragraf

â¢

Tag

<pre>

dan

</pre>

dapat digunakan pada text sehingga whitespace ditampilkan

sesuai dengan apa yang ditulis (âpreâ singkatan dari âpreformattedâ)

1.5.3 Karakter khusus Yang di Cadangkan

Ada sejumlah karakter yang tidak dapat diketik langsung pada bagian body HTML,

termasuk symbol untuk bahasa asing.

Tabel Karakter khusus

Entitas

Keterangan

Contoh

©

copyright symbol

Â©

®

registered trademark

symbol

Â®

trademark symbol

â¢

nonbreaking space

<

less-than symbol

<

>

greater-than symbol

>

&

ampersand

&

"

quotation mark

"

Contoh :

Kode

Hasil

2 < 3, adalah benar<br>

(5)

1.5.4 Lists

â¢

Ada dua jenis list HTML yaitu ordered, <ol> to </ol>, dan unordered, <ul> to </ul>

â¢

Ordered lists menggunakan nomor: 1, 2, 3, ...

â¢

Unordered lists menggunakan bullets (â¢)

â¢

Elements dari list adalah <li> dan </li>

Contoh :

Kode

Hasil

<ul>

<li>Sugar</li>

<li>Chips</li>

<li>Caffeine</li>

<li>Chocolate</li>

</ul>

ï·

Sugar

ï·

Chips

ï·

Caffeine

ï·

Chocolate

Attributes

â¢

Beberapa tag mempunyai atribut untuk tambahan informasi:

Bentuk:

nama attribut

="

nilai atribut

"

Contoh: ordered list dapat diganti menjadi A, B, C, ... dengan memberi atribut sbb:

Kode

Hasil

<ol>

<li>Sugar</li>

<li>Chips</li>

<li>Caffeine</li>

<li>Chocolate</li>

</ol>

1. Sugar

2. Chips

3. Caffeine

4. Chocolate

<li>Sugar</li>

<li>Chips</li>

<li>Caffeine</li>

<li>Chocolate</li>

</ol>

A. Sugar

B. Chips

C. Caffeine

D. Chocolate

Tabel tag Lists

Bullet Type <UL TYPE=DISC|CIRCLE|SQUARE><LI TYPE=DISC|CIRCLE|SQUARE>

Defination List <DL> <DT> <DD> </DL> Directory List <DIR> <LI> </DIR> Menu List <MENU> <LI> </MENU>

Numbering Type <OL TYPE=A|a|I|i|1><LI TYPE=A|a|I|i|1> Ordered Lists <OL> <LI> </OL>

Starting Number <OL VALUE=?><LI VALUE=?> Unordered List <UL> <LI> </UL>

(6)

1.5.4 Links

â¢

Untuk me link kehalaman lain: <a href="

URL

"> ke halaman </a>

â

Contoh: I'm taking <a href = "http://www.stmik.edu/news/index.html">Berita </a>

alumni.

â

Link text secara otomatis akan berwarna biru dan underlined (purple jika telah

dikunjungi)

â¢

Untuk link ke bagian lain dari halaman yang sama:

â

Insert nama anchor: <a name="refs">References</a>

â

Lakukan link: <a href="#refs">My references</a>

â¢

Untuk link dari halam lain ke nama anchor:

<a href="

PageURL

#refs">My references</a>

â¢

Untuk link e-mail <A HREF="mailto:psagala@yahoo.com">Mail!</A>

1.5.6 Images

â¢ Images (pictures) bukanlah bagain dari halaman HTML; HTML hanya memberitahu

dimana image di temukan

<img src="

URL

" alt="text description" width="150" height="100">

â¢ Atribut src attribute yang diperlukan sedang lainnya optional

â¢ The

URL alamat dan nama image

seperti:.gif, .jpg, atau .png

â¢ Atribut alt memberi text sebagai representasi jika image gagal ditampilkan

â¢ Atribut height and width jika disertakan memperbaiki tampilan image (jika ukuran salah

maka tampilan gambar akan terganggu)

â¢ Tidak ada tag akhir </img> karena tag <img> bukan container

Tabel tag Links dan Gambar

Alignment <IMG SRC="URL"ALIGN=TOP|BOTTOM|MIDDLE> Alignment <IMG SRC="URL"ALIGN=LEFT|RIGHT|

TEXTTOP|ABSMIDDLE|BASELINE|ABSBOTTOM> Alternate <IMG SRC="URL" ALT="***">

Border <IMG SRC="URL" BORDER=?>

Client Pull <META HTTP-EQUIV="Refresh" CONTENT="?; URL=URL">

Define Target <A NAME="***"> </A>

Dimensions <IMG SRC="URL" WIDTH="?" HEIGHT="?"> Display Image <IMG SRC="URL">

Embed Object <EMBED SRC="URL"> Imagemap <IMG SRC="URL" ISMAP>

Imagemap <IMG SRC="URL" USEMAP="URL"> URL Link <A HREF="URL"> </A>

Link to Target <A HREF="URL#***"> </A><A HREF="#***"> </A>

Low-Res Proxy <IMG SRC="URL" LOWSRC="URL"> Map <MAP NAME="***"> </MAP>

Object Size <EMBED SRC="URL" WIDTH="?" HEIGHT="?"> Runaround Space <IMG SRC="URL" HSPACE=? VSPACE=?>

(7)

Section <AREA SHAPE="RECT" COORDS=",,," HREF="URL"|NOHREF>

Target Window <A HREF="URL" TARGET="***"> </A>

1.5.7 Tables

â¢

Tables digunakan untuk mengorganisir informasi dalam dua dimensi (baris dan kolom)

â¢

Suatu

<table> dapat terdiri satu atau lebih baris table, <tr>

â¢

Setiap baris table terdiri dari satu atau lebih cell table data,

<td>

, atau cell table header,

<th>

â Perbedaan antara

<td>

dan

<th>

hanya pada format text. Pada cell

<th>

otomatis

dalam format â

boldface

â dan â

centered

â

â¢

Borders (batas) pada cell dapat diberi dengan menambah attribute:

border="1"

pada tag

awal

<table>

Contoh table:

Kode

Hasil

<tr>

<th>Name</th> <th>Phone</th>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<td>Sally</td> <td>555-3456</td>

</tr>

</table>

Tabel tag untuk Tables

Define Table <TABLE> </TABLE>

Table Border <TABLE BORDER> </TABLE> Table Border <TABLE BORDER=?> </TABLE> Cell Spacing <TABLE CELLSPACING=?> Cell Padding <TABLE CELLPADDING=?> Table Width <TABLE WIDTH=?>

Table Width (%) <TABLE WIDTH=%> Table Caption <CAPTION> </CAPTION>

Table Alignment <CAPTION ALIGN=TOP|BOTTOM> Table Row <TR> </TR>

Table Header <TH> </TH>

Alignment <TD ALIGN=LEFT|RIGHT|CENTER

VALIGN=TOP|MIDDLE|BOTTOM> No Line Breaks <TD >

Columns to Span <TD COLSPAN=?> Rows to Span <TD ROWSPAN=?>

(8)

Desired Width <TD WIDTH=?> Width Percent <TD WIDTH=%>

1.5.8 Frames

â¢

Frames adalah cara membagi jendela browser dalam beberapa bingkai. Halaman

HTML terpisah dapat ditempatkan pada tiap bingkai.

Framesets

â¢

Frames ditempatkan dalam frameset

â¢

Gantikan <body>...</body> dengan <frameset>...</frameset>

â¢

Pada Tag awal <frameset> gunakan atribut:

â¢

rows=

nilai dari tinggi baris _

â¢

cols=

nilai dari lebar koloml_

â¢

Nilai dapat berupa % atau pixel)

Contoh:

<frameset cols="20%,80%"

>

Menambah frames pada frameset

â¢ Letakkan tag

<frame> dalam <frameset>

yang merupakan rows atau columns

â

<frame>

bukan container maka tidak ada tag akhir

</frame>

â¢ Setiap <frame> mempunyai atribut seperti ini:

src=âURL

â

Dan beberapa tag e optional:

â

scrolling="yes|no|auto"

(default is

"auto"

)

â

noresize

Contoh lengkap Frame (situs The Java API):

Kode

<HTML> <HEAD>

<TITLE>Java 2 Platform SE v1.4.0</TITLE> </HEAD>

<FRAMESET cols="20%,80%"> <FRAMESET rows="30%,70%">

<FRAME src="overview-frame.html" name="packageListFrame"> <FRAME src="allclasses-frame.html" name="packageFrame"> </FRAMESET>

<FRAME src="overview-summary.html" name="classFrame"> </FRAMESET>

<NOFRAMES>

<H2>If you see this, you have frames turned off!</H2> </NOFRAMES>

</HTML>

(9)

Hasil

Tabel tag Frames

Column Widths <FRAMESET COLS=,,,> </FRAMESET> Column Widths <FRAMESET COLS=*> </FRAMESET> Define Frame <FRAME>

Display Document <FRAME SRC="URL">

Frame Document <FRAMESET> </FRAMESET>

Frame Name <FRAME

NAME="***"|_blank|_self|_parent|_top> Margin Width <FRAME MARGINWIDTH=?>

Margin Height <FRAME MARGINHEIGHT=?> Not Resizeable <FRAME NORESIZE>

Scrollbar <FRAME SCROLLING="YES|NO|AUTO"> Row Heights <FRAMESET ROWS=,,,> </FRAMESET> Row Heights <FRAMESET ROWS=*> </FRAMESET> Unframed Content <NOFRAMES> </NOFRAMES>

1.5.9 Forms

â¢

<form>

merupakans tag HTML yang digunakan untuk rancangan interface pada halam

web:

â

Untuk meminta informasi dari user yang kemudian dikirim ke server

â¢

Suatu form terdiri dari:

(10)

â

:

...form elements...

</form>

Elemen Form termasuk:: buttons, checkboxes, text fields, radio buttons, drop-down

menus, dll

â

Form biasanya dilenkapi button untuk kirim informasi ke server â

Submit

buttonâ

Parameters

form memberitahu bagaimana informasi dikirim:.

â

action="url

"

(diperlukan)

â¢

menetapkan kemana informasi dikirim jik button âSbmitâ diklik

â

method="get"

(default)

â¢

Data Form dikirim sebagai suatu URL dengan menyertakan

info data form form

â¢

Dapat digunakan jika hanay menggunkan data l ASCII dan tidak lebih dari 100

karakter

â

method="post"

â¢

Data Form dikirim dalam body URL request

tag

<input>

â

Kebanyakan elemen form menggunakan tag

input

dengan,

type="..."

berupa:

text

,

checkbox

,

radio

,

password, hidden

,

submit

,

reset

,

button

,

file

, atau

image

â¢ Parameter taga

input

a.l:

â

name

: nama dari elemen

â

value

: âvalueâ/nilai dari elemen

â

readonly

: nila yang tak bisa dirobah

â

disabled

: user tak dapat melakukan apa pun pada elemen ini

Contoh-contoh Text input:

A text field:

Hasil:

A password field:

Hasil:

textarea

A multi-line text field

<textarea name="textarea" cols="24" rows="2">Hello</textarea>

Hasil:

(11)

Buttons

â¢

A submit button:

â¢

A reset button:

â¢

A plain button:

Hasil:

Keterangan:

â¢

Submit : kirim data

â¢

Reset : restore semua lemen form ke keadaan semula

â¢

Button : ada aksi dari java script

Checkboxes

Kode

Hasil

A checkbox:

<input type="checkbox"

name="checkboxâ

value="checkbox" checked>

Radio buttons

Radio buttons:<br>

male<br>

female

Hasil:

(12)

Drop-down menu or list

Kode

Hasil

A menu or list:

<option value="green">green</option>

</select>

Contoh lengkap:

Kode

Hasil

<html>

<head>

<title>Get Identity</title>

content="text/html;

charset=iso-8859-1">

</head>

<body>

<p>Name:

</p>

<p>Gender:

<input type="radio" name="gender"

value="m">Male

<input type="radio" name="gender"

value="f">Female</p>

</form>

</body>

</html>

Tabel tag Forms

Checked <INPUT CHECKED>

Default Option <OPTION SELECTED>

Define Form <FORM ACTION="URL" METHOD=GET|POST> </FORM>

Field Name <INPUT NAME="***"> Field Size <INPUT SIZE=?> Field Value <INPUT VALUE="***">

File Upload <FORM ENCTYPE="multipart/form-data></FORM> Input Box Size <TEXTAREA ROWS=? COLS=?> </TEXTAREA>

Input Field <INPUT

(13)

Max Length <INPUT MAXLENGTH=?> Multiple Choice <SELECT MULTIPLE>

Name of Box <TEXTAREA NAME="***"> </TEXTAREA> Name of List <SELECT NAME="***"> </SELECT>

Option <OPTION>

Selection List <SELECT> </SELECT>

Wrap Text <TEXTAREA WRAP=OFF|VIRTUAL|PHYSICAL> </TEXTAREA>

# of Options <SELECT SIZE=?> </SELECT>

Contoh Komplit kombinasi form dan table:

Kode:

Kuesioner Mahasiswa </th>

</tr> <tr>

<tr>

<td width="106">Password</td>

</tr> <tr>

<td width="106">Jenis Kelamin</td>

<td width="471"><input type="radio" value="0" checked name="Kelamin">Pria

<input type="radio" name="Kelamin" value="1">Wanita</td>

</tr> <tr>

<td width="106">Hobby</td>

<td width="471"><input type="checkbox" name="C1" value="ON">Membaca,

<input type="checkbox" name="C2" value="ON">Sport, <input type="checkbox" name="C3" value="ON">Music, <input type="checkbox" name="C4"

value="ON">Memasak,

<input type="checkbox" name="C5" value="ON">Tamasya </td>

</tr> <tr>

<td width="106">Komentar</td>

</tr>

(14)

<tr>

<td width="106">Jurusan</td>

<td width="471"><select size="1" name="Jurusan"> <option selected>Komputer</option>

<option>Akuntansi</option> <option>Sekretaris</option> </select></td>

</tr> </table> </center> </div>

</center> </body> </html>

Hasil:

Kuesioner Mahasiswa

Nama

Password

Jenis

Kelamin

Pria

Wanita

Hobby

Membaca,

Sport,

Music,

Memasak,

Tamasya

Komentar

Jurusan

Komputer

Submit Reset

1.6 Link Absolut dan Relatif

Pada bab diatas telah ditunjukan kode html yang berfungsi sebagai link ke objek

gambar taupun ke halaman html seperti: <a href="

URL

"> ke halaman </a>.

URL (

Uniform Resource Location

) merupkan alamat/lokasi tempat objek gambar atau

halaman yang hendak dilink berda. Objek tersebut dapat berada dalam satu folder dengan file

pemanggil atau berda pada folder lain yang berbeda.

Ada dua cara menuliskan lokasi atau alamat yang dilink/dipanggil tersebut yaitu dengan

menuliskan secara lengkap URL yang dilink seperti (

link absolut

):

http://www.hair.net/~squiggie/LottzaStuff/other/images/chef.gif

Dalam contoh ini

chef.gif

adalah nama objek gambar yang dipanggil/dilink dengan lokasi

seperti ditunjukkan diatas. Sedangkan file yang memanggil adalah

page1.html

.

(15)

SRC="chef.gif"

berarti gambar tersebut ada

di folder yang sama dengan dokumen html

SRC="images/chef.gif"

berarti gambar

tersebut terletak satu folder di bawah (sub

folder) dokumen html.

SRC="../chef.gif"

berarti gambar tersebut

terletak satu folder di atas dokumen html.

SRC="../../chef.gif"

berarti gambar

tersebut terletak dua folder di atas dokumen

html.

SRC="../images/chef.gif"

berarti gambar

tersebut terletak satu folder di atas kemudian

satu folder ke bawah di direktori images.

SRC="../../../other/images/chef.gif"

Ada baiknya menggunakan URL

relatif

dibandingkan dengan pemakaian URL

absolut

(lengkap). Karena dalam perancangan web site, hasil rancangan dapat disimpan di hard disk

sendiri dan semua link akan berfungsi pada saat di-

upload

ke server di internet, dan juga

file/gambar tersebut akan lebih cepat ditampilkan oleh browser. Adapun URL absolut

digunakan jika gambar tadi terletak di server yang sama sekali berbeda.

(16)

CSS (Cascading Style Sheets)

Pendahuluan

CSS merupakan suatu teknik atau cara sederhana dalam membuat style (layout-tampilan)

dokumen html menjadi lebih efisien. Dengan CSS pekerjaan dalam desain dan pengelolaan situs

web menjadi lebih mudah karena ada pemisahan antara konten dan layout. Satu style sheet dapat

digunakan untuk tampilan keseluruhan situs. Dengan demikian melakukan modifikasi file css

secara otomatis akan meng update juga keseluruhan halaman-halaman web.

Pada dasarnya CSS adalah kumpulan/list dari statemen (pernyataan) atau dikenal sebagai

rules yang dapat merender berbagai sifat pada elemen HTML. Style rule dapat ditujukan untuk

elemen tunggal, multi elemen, seluruh dokumen, atau bahkan sekaligus untuk multi dokumen.

Juga dimungkinkan menerapkan banyak rule yang saling berbeda untuk suatu elemen berbeda

lokasi yang menggunakan metoda berbeda. Sebagai style rule tunggal, semua rule ini

dikumpulkan dan di satukan dan dikenal sebagai âcascadingâ of style.

Sintaks bahasa untuk style sheet agak berbeda dengan HTML, sehingga diperlukan

penjelasan lebih lanjut dalam implementasinya.

Alasan diperkenalkannya CSS adalah ketika HTML yang semula ditujukan untuk mark-up

language berbasis content (content terpisah dari kode), berkembang tak terkendali dengan

diperkenalkannya berbagai cara formatting dan juga elemen/atribut oleh para pembuat browser.

Sehingga menjadikan kode HTML terkotori dan menyimpang dari tujuan utama HTML. Dengan

CSS dapat dibuat terpisah antara tampilan dan content.

Perkembangan CSS:

- Mei 1995 - Draft awal CSS

- November 1995 â Drat kerja CSS1 oleh W3C (World Wide Web Consortium)

- 17 Desember 1996 - CSS1 direkomendasi oleh W3C

- November 1997 â Draft kerje CSS2 di rilis ke publik

- Maret 1998 - CSS2 usulan rekomendesai W3C

- Mei 1998 - CSS2 direkomendasi oleh W3C

Desember 1998 W3C merilis Note "List of suggested extensions to CSS"

-- Augustus 2002 â Draft pertama CSS 2.1 dirilis ke publik

- Januari 2003 â Draft kerja kedua dari CSS 2.1 dirilis

- September 2003 â Draft kerja terakhir CSS 2.1 dirilis

Deawasa ini hampir semua browser mendukung CSS2, meskipun ada bagian dari fitur yang

belum dapat di implementasi pada browser. Dan saat ini CSS3 masih dalam pengembangan

dengan memikirkan penggunaan ke depan.

Keuntungan Style Sheets

ï·

Pemisahan antara content dari tampilan

ï·

Tampilan dan layout semua halaman situs web dapat dirancang dalam satu file

ï·

Menghasilkan markup HTML yang lebih bagus, fleksibel dan maintainable

ï·

Dapat digunakan baik untuk HTML maupun halaman XML

ï·

Menambah kecepatan download

ï·

Proses rendering dilakukan di sistem dari pada di layar halaman

ï·

Mempunyai banyak fitur kontrol visual

ï·

Mudah di kembangkan untuk kemampuan ke depan

(17)

Kelemahan CSS sbb:

ï·

Browser-browser belum sepenuhnya men-support secara baik semua fitur CSS

Ada 3 cara implementasi CSS pada halaman html yaitu:

Inline Styles

embedded stylesheets

external stylesheets

Sintaks CSS

Sintaks CSS cukup sederhanaâterdiri dari kumpulan

selectors

(pilihan tags) dan

descriptors

(memberi tahu apa yang dilakukan padanya):

Selektor dinyatakan terlebih dahulu yang kemudian Selektor ditempatkan pad kurung kurawal {' and '}.

â¢

File CSS hanya terdiri dari pasangan-pasangan

selector/descriptor

â Selectors berupa tag HTML atau tag XML

â¢ Sintaks umum adalah:

selector

{

property

:

value

}

â

atau

selector

, ...,

selector

{

property

:

value

;

. . .

property

:

value

}

â

dimana:

â¢

selector

adalah tag yang akan dipengaruhi

â¢

property

dan

value

menjelaskan bagaimana tag ditampilkan

â Contoh: h1 {color: green; font-family: Verdana} artinya sesuatu yang terkandung

dalam tag h1

(HTML heading level 1) akan menjadi : font Verdana dan warna green

Contoh CSS

Contoh

Keterangan

/* This is a comment */

Komentar

h1,h2,h3 {font-family: Arial, sans-serif;}

Prioritas adalah font pertama

p, table, li, address { font-family: "Courier

New";margin-left: 15pt; }

Font dan margin diberlakukan untuk

semua tag (p, table, address)

p, li, th, td {font-size: 80%;}

Ukuran 80% untuk elemen dari tag

th {background-color:#FAEBD7}

Warna dpt dpt ditulis dalam

(18)

body { background-color: #ffffff;}

hexadesimal

a:link {color:darkred}

an unvisited link

a:visited {color:darkred}

a link that has been visited

a:active {color:red}

a link now being visited

a:hover {color:red}

when the mouse hovers over it

Selectors

â¢

Tag-tag baik HTML atau XML dapat digunakan sebagai elemen selector:

body { background-color: #ffffff }

â¢

Multiple selectors

:

em, i {color: red}

Pengulangan selectors

:

h1, h2, h3 {font-family: Verdana; color: red}

h1, h3 {font-weight: bold; color: pink}

â¢

Jika terjadi ketidak sesuaian nilai, maka yang paling akhir menimpa yang pertama

â¢

Universal selector *

dapat digunakan untuk semua elements:

* {color: blue}

â¢

Jika terjadi ketidak sesuaian nilai, maka selectors spesifik menimpa yang umum (sehingga

em

akan tetap red)

Contoh

â¢

Descendent selector

memilih tag dengan specific ancestor:

â

p code { color: brown }

code

dipilih jika berda dalam suatu paragraph

â¢

A child selector

>

memilih tag dalam suatu specific parent:

h3 > em { font-weight: bold }

memlih

em

hanya jika parent yang diikuti segera adalah

h3

â¢

An adjacent selector

memilih element yang diikuti segera oleh lainnya:

b + i { font-size: 8pt }

Contoh: <b>I'm bold and</b> <i>I'm italic</i>

Hasil

:

I'm bold and

I'm italic

â¢

Attribute selector

:

â Syntax:

element

[

attribute

] { ... }

â Contoh: table[border] { ... }

(19)

â¢

Nilai atribut:

â Syntax:

element

[

attribute

="

value

"] { ... }

â Contoh: table[border="0"] { ... }

Atribut

class

â¢

Memungkinkan styles yang berbeda untuk element yg sama

â

Style sheet

:

p.important {font-size: 24pt; color: red}

p.fineprint {font-size: 8pt}

â

Pada HTML

:

<p class="fineprint">Offer ends 1/1/97.</p>

â¢

Mendefenisikan suatu selector yang dapat di aplikasikan pada setiap elemen pada class,

cukup hilangkan nama tag (tetap ada dot):

.fineprint {font-size: 8pt}

Atribut

id

â¢

Atribut

id

layaknya atribut

class

, tapi menggunakan tanda

#

.

â

Style sheet

:

p#important {font-style: italic} atau

# important {font-style: italic}

â

Pada HTML

:

â¢

class

dan

id

keduanya dapat digunakan, dan tidak mesti mempunyai nama yang

berbeda:

div

dan

span

â¢

div

dan

span

adalah elemen HTML yang mempunyai fungsi untuk menangani informasi

CSS

â¢

div

seperti layaknya paragraph membri line break sebelum dan sesudah; sedangkan

span

tidak

â¢

Contoh:

â

CSS:

div {background-color: #66FFFF}

span.color {color: red}

â

HTML:

<div>This div is treated like a paragraph, but <span class="color">this

span</span> is not.</div>

Penggunaan style sheets

â¢

Ada tiga cara menggunakan (attach) CSS:

â

External style sheet

(20)

â¢

Berlaku baik untuk HTML maupun XML

â¢

Semua CSS dapat digunakan

â

Embedded style sheet

â¢

Digunakan hanya pada HTML (bukan utko XML)

â¢

Semua CSS dapat digunakan

â

Inline styles

â¢

Digunakan hanya pada HTML (bukan utko XML )

â¢

Terbatas dalam sintaks CSS

External style sheets

â¢

Dalam HTML, ditempatkan dalam elemen

<head>

:

Style Sheet URL

">

â¢

Dalam prolog dokumen XML:

<?xml-stylesheet href="

Style Sheet URL

" type="text/css"?>

Embedded style sheets

â¢

Dalam HTML, pada elemen

<head>

:

<style TYPE="text/css">

CSS Style Sheet

-->

</style>

Catatan:

tanda  adalah merupakan tanda untuk komentar dalam html. Akan

tetapi dalam hal ini berfungsi untuk menghindarkan tampilan error jika browser yang

menggunakan belum mengenal/tidak support css.

Inline style sheets

â¢

Atribut

STYLE

dapat ditambahkan pada setiap elemen HTML:

<

html-tag

STYLE="

property

:

value

">

or

<

html-tag

STYLE="

property

:

value

;

property

:

value

; ...;

property

:

value

">

â¢

Keuntungan:

â Berguna jika hanya sebagian kecil yang ingin di markup

â¢

Kekurangan:

â Karena tercampur - membingungkan kode HTML

â Tidak dapat diterapkan keseluruhan fitur CSS

(21)

Urutan (order) Cascading

â¢

Styles diterapkan pad HTML dalam urutan berikut:

â

Browser default

â

External style sheet

â

Internal style sheet (inside the <head>

tag)

â

Inline style (inside other elements)

â¢

Jika ada conflict dalam styles conflict, maka yang terdekat (nearest) ( atau most

recently applied) dimenangkan

Contoh urutan cascading:

â¢

External style sheet:

h3 {

color: red;

text-align: left;

font-size: 8pt

}

â¢

Internal style sheet:

h3 {

text-align: right;

font-size: 20pt

}

â¢

Hasil pada attributes:

color: red;

text-align: right;

font-size: 20pt

Beberapa properties and values dari font

â¢

font-family:

â

inherit

(same as parent)

â

Verdana, "Courier New", ...

(if the font is on the client computer)

â

serif | sans-serif | cursive | fantasy | monospace

â¢

font-size:

â

| xx-large |

12

pt

â¢

font-weight:

â

normal | bold |bolder | lighter | 100 | 200 | ... | 700

â¢

font-style:

â

normal | italic | oblique

Menyingkat properties

â¢

Contoh kombinasi properties:

h2 { font-weight: bold; font-variant: small-caps; font-size: 12pt; line-height:

14pt; font-family: sans-serif }

dapat ditulis sebagai:

h2 { font: bold small-caps 12pt/14pt sans-serif }

(22)

Colors dan lengths

â¢

color:

and

background-color:

purple | red | silver | teal | white | #FF0000 | #F00 | rgb(255, 0, 0) |

Browser-specific names (not recommended)

â¢

Dalam ukuran:

â em, ex, px, % : font size, x-height, pixels, percent of inherited size

â in, cm, mm, pt, pc: inches, centimeters, millimeters, points (1/72 of an inch), picas (1

pica = 12 points), relative to the inherited value

Beberapa properties dan values dari Text

â¢

text-align:

â left | right | center | justify

â¢

text-decoration:

â none | underline | overline | line-through

â¢

text-transform:

â none | capitalize | uppercase | lowercase

â¢

text-indent

â

length

|

10

% (indents the first line of text)

â¢

white-space:

â normal | pre | nowrap

Pseudo-classes

â¢

Pseudo-classes adalah elemen yang keadaan (dan tampilan) dapat berobah terhadap

waktu:

â¢

Syntax:

element

:

pseudo-class

{...}

â

:link

ï®

suatu link yang belum dikunjungi

â

:visited

ï®

link yang sudah dikunjungi

â

:active

ï®

link yang sedang diklik

â

:hover

ï®

link yang ditempatkan mouse di atasnya (tapi belum di klik)

â¢

Pseudo-classes dapat ditempatkan dimanapun dalam CSS selectors

(23)

Tabel Sintaks CSS Kaitannya dengan Versi Browser

CSS

Browser

Sintak

Sintak Spesifik

1.0 2.0 IExplorer Netscape Opera

Inclusion Methods

X

3.0

4.0B2

3.5

External Style Sheets

X

3.0

4.0B2

3.5

Embedded Style Sheets

X

3.0

4.0B2

3.5

Inline Style Sheets

X

3.0

4.0B3

3.5

@Rules

X

4.0

3.5

@charset

--

X

5.5

6.0

??

@import

X

4.0

6.0

3.5

@media

--

X

4.0

6.0

3.5

@namespace

--

6.0

--@page

--

X

5.5

--

4.0

@fontdef

--

4.0-4.x

--@font-face

--

X

4.0

--

--Rule Set Syntax

X

3.0

4.0

3.5

Selector Grouping

X

3.0

4.0

3.5

Declaration Grouping

X

3.0

4.0

3.5

Declaration Shorthands

X

3.0

4.0

3.5

Selectors

X

3.0

4.0

3.5

Element - Namespace

--

6.0

--Element - Universal

--

X

5.0

6.0

4.0

Element - Simple

X

3.0

4.0

3.5

Element - Descendent

X

3.0

4.0

3.5

Element - Child

--

X

--

6.0

3.5

Element - Adjacent

--

X

--

6.0

5.0

Attribute - Simple

--

X

--

6.0

4.0

Attribute - Value

--

X

--

6.0

4.0

Attribute - Begin Value

--

6.0

--Attribute - End Value

--

6.0

--Attribute - Substring Value

--

6.0

--Attribute - One-Of-Many

--

X

--

6.0

4.0

Attribute - Hyphen

--

X

--

--Attribute - Namespace

--

6.0

--HTML - Class

X

3.0

4.0

3.5

HTML - ID

X

3.0

4.0

3.5

Pseudo-Classes

X

3.0

4.0

3.5

:link

X

3.0

4.0

3.5

:visited

X

3.0

4.0

3.5

:active

X

4.0

6.0

5.0

(24)

:hover

--

X

4.0

6.0

4.0

:focus

--

X

--

6.0

7.0

:root

--

6.0

--:empty

--

6.0

--:not

--

6.0

--:first-child

--

X

--

6.0

7.0

:first-node

--

6.0

--:last-node

--

6.0

--:last-child

--

6.0

--:lang

--

X

--

--:viewport

--

6.0

--:viewport-scroll

--

6.0

--:canvas

--

6.0

--:scrolled-content

--

6.0

--:first

--

X

--

??

:left

--

X

--

??

:right

--

X

--

??

Pseudo-Elements

X

5.5B1

6.0

3.5

:before

--

X

--

6.0

4.0

:after

--

X

--

6.0

4.0

:first-letter

X

5.5B1

6.0

3.5

:first-line

X

5.5B1

6.0

3.5

Miscellaneous Syntax

X

3.0

4.0

3.5

Unicode Escapes

--

X

6.0

Comments

X

3.0

4.0

3.5

!important

X

4.0

6.0

3.5

Contoh-Contoh:

Contoh 1 (eksternal css)

Copy dan paste berikut ini sebagai

eksternal1.css

body {background-color: yellow} h1 {font-size: 36pt}

h2 {color: blue} p {margin-left: 50px}

Files eksternal1.css di link melalui file html:

eksternal1.html

(25)

<body>

<h1>This header is 36 pt</h1> <h2>This header is blue</h2> <p>This paragraph has a left margin of 50 pixels</p> </body>

</html>

Contoh 2 (eksternal css)

eksternal2.css

body {background-color: tan} h1 {color:maroon; font-size:20pt} hr {color:navy}

p {font-size:11pt; margin-left: 15px} a:link {color:green}

a:visited {color:yellow} a:hover {color:black} a:active {color:blue}

eksternal2.html

</head> <body>

<h1>This is a header 1</h1> <hr>

<p>You can see that the style sheet formats the text</p>

</body> </html>

Contoh3 (embedded css)

body {background-color: yellow} h1 {background-color: #00ff00} h2 {background-color: transparent} p {background-color: rgb(250,0,255)} </style>

</head> <body>

<h1>This is header 1</h1> <h2>This is header 2</h2>

(26)

<p>This is a paragraph</p> </body>

</html>

Contoh 4 (embedded css)

</head> <body>

<p>The "border-bottom-width" property is not recognized in Internet Explorer if it is used alone. Use the "border-style" property to set the borders first

with Internet Explorer.</p> </body>

</html>

Contoh 5 (embedded css)

width:100%; padding:0; margin:0;

list-style-type:none;} a {float:left;

width:6em;

text-decoration:none; color:white;

background-color:purple; padding:0.2em 0.6em;

border-right:1px solid white;} a:hover {background-color:#ff3300} li {display:inline}

</style> </head> <body> <ul>

<li><a href="#">Link one</a></li> <li><a href="#">Link two</a></li> <li><a href="#">Link three</a></li> <li><a href="#">Link four</a></li> </ul>

<p>

In the example above, we let the ul element and the a element float to the left.

The li elements will be displayed as inline elements (no line break

(27)

before or after the element). This forces the list to be on one line. The ul element has a width of 100% and each hyperlink in the list has a width of 6em (6 times the size of the current font).

We add some colors and borders to make it more fancy. </p>

</body> </html>

Contoh 6 (embeded css)

type:square; position:inside; list-style-image:url('arrow.gif')}

</style> </head> <body>

<p><b>Note:</b> Netscape 4 does not display the images or position the list.</p>

<ul>

<li>Coffee</li> <li>Tea</li>

</body> </html>

Contoh 7 (embeded css)

a.four:visited {color: #0000ff}

a.four:hover {font-family: monospace}

a.five:link {color: #ff0000; text-decoration: none} a.five:visited {color: #0000ff; text-decoration: none} a.five:hover {text-decoration: underline}

</style> </head>

(28)

<body>

<p>Mouse over the links to see them change layout.</p> <p><b><a class="one" href="default.asp.htm"

tppabs="http://www.w3schools.com/css/default.asp" target="_blank">This link changes color</a></b></p>

<p><b><a class="two" href="default.asp.htm"

tppabs="http://www.w3schools.com/css/default.asp" target="_blank">This link changes font-size</a></b></p>

<p><b><a class="three" href="default.asp.htm"

tppabs="http://www.w3schools.com/css/default.asp" target="_blank">This link changes background-color</a></b></p>

<p><b><a class="four" href="default.asp.htm"

tppabs="http://www.w3schools.com/css/default.asp" target="_blank">This link changes font-family</a></b></p>

<p><b><a class="five" href="default.asp.htm"

tppabs="http://www.w3schools.com/css/default.asp" target="_blank">This link changes text-decoration</a></b></p>

</body> </html>

References

â¢ Some of the examples in this presentation were taken from the W3Schools online tutorial at

http://www.w3schools.com/css/css_syntax.asp

â¢ Dave Raggettâs Adding a Touch of Style is a very nice online tutorial at

http://www.w3.org/MarkUp/Guide/Style

â¢ Index DOT Css has also been a great source of information about CSS:

http://www.blooberry.com/indexdot/css/index.html

â

In particular, there is a list of when CSS features were first supported by which browsers

(--

means ânot yet supportedâ) at

(29)

(30)

JavaScript

Apa dan untuk apa JavaScript?

â¢

JavaScript dikembangkan pertama sekali oleh Netscape, merupakan bahasa script

paling populer pada internet dan kompatibel dengan berbagai browser

â¢

Javascript dirancang untuk menambah interaktivitas halaman-halaman HTML.

â¢

JavaScript adalah bahasa

scripting (teks biasa â tanpa di compile)

bebas lisensi dan

mudah untuk dipelajari dan digunakan dibanding bhs programming tradisional.

â¢

JavaScript bekerja pada sisi client (

client side)

. Browsers menterjemahkan statemen

(perintah) JavaScript yang disisipkan (embedded) secara langsung pada halaman HTML.

â¢

JavaScript dirancang untuk digunakan pada halaman Web dan terintegrasi dengan

HTML

.

â¢

Statemen JavaScript yang disisipkan pada halaman

HTML

dapat mengenal dan

merespon User Events seperti Mouse Clicks, Form Input, dan Page Navigation.

â¢

JavaScript dapat membaca dan menulis elemen-elemen HTML

â¢

JavaScript dapat digunakan untuk validasi data - Sebagai contoh dalam Form Isian

â¢

JavaScript dapat digunakan untuk deteksi browser pengunjung (nama, versi dll)

â¢

JavaScript dapat digunakan untuk membuat cookies â Suatu informasi yang distore

pada komputer pengunjung untuk kemudian di

retrieve

untuk menegnal pengunjung

tersebut.

Apakah Java sama dengan JavaScript?

Tidak. Ada banyak perbedaan antar Java and JavaScript.

JavaScript

Java

Object based language

Object oriented language

Diinterpretasi (bukan compiled) oleh client.

Di Compile pd server sebelum dieksekusi

pada client.

Kodenya berintegrasi dalam dokumen HTML

Hasilnya berupa Applet, diakses dari halaman

HTML

Terbatas pada fungsi browser

Bisa sebagai aplikasi mandiri

Jenis data variable tidak dideklarasi (loose

typing).

Jenis data Variable harus dideklarasi (strong

typing).

Dynamic binding

Static binding

Bekerja sebatas pada elemen HTML

Lebih dari sekedar elemen dokumen HTML

(misalnya multimedia)

Mampu mengakses objek dan fungsionalitas

browser

Tidak mampu mengakses objek dan

fungsionalitas browser

Bagaimana cara menggunakan JavaScript ?

Kode JavaScript ditempatkan didalam file HTML, dengan demikian kode JavaScript

dapat dibuat dengan cara yang sama membuat HTML yaitu menggunakan editor teks

seperti WordPad ataupun NotePad.

(31)

Ada dua cara memasukkan JavaScript dalam dokumen HTML :

ï·

Menggunakan tag HTML yang menangani event.

ï·

Menyisipkan kodet JavaScript didalam tag

<SCRIPT>...</SCRIPT>

1. Menangani Event

â¢

Menangani Event akan mengubah halaman yang statis menjadi lebih dinamis.

â¢

Event adalah hasil terhadap aksi yang dilakukan oleh pemakai, seperti klik

pada mouse, klik pada tombol submit di suatu form, dan keluar dari halaman.

â¢

JavaScript menggunakan Event Handlers untuk merespon Event.

â¢

Event Handlers telah ditulis kedalam berbagai jensi tag HTML dan tidak

diperlukan lagi tag <SCRIPT>.

Sebagai contoh, berikut ini adalah contoh kombinasi HTML dan JavaScript untuk

memberi pesan bagi user.

Contoh: Event Click

<HTML> <BODY> <FORM>

<INPUT TYPE=BUTTON VALUE="Klik disni" onClick="alert('Terimakasih')">

</FORM> </BODY> </HTML>

Bentuk "

onClick

" adalah

Event Handler

, sebagai atribut dari tag <INPUT> dalam suatu

HTML. Sedangkan kode JavaScript berda dalam tanda petik yaitu:

"

alert('Terimakasih')

"

Kebanyakan (tidak semua) element-elemen pada halaman web merespon thdp interaktivitas

user (seperti: keystrokes, mouse clicks) dengan membuat events Handlers dapat ditempatkan

pada elemen form HTML

Contoh 2

<form method="post" action=""> <input type="button"

name="myButton" value="Click me"

onclick="alert('You clicked the button!');">

</form> </BODY> <HTML>

* name_{: dapat digunakan oleh kode} JavaScript lain

* value_{: yang muncul pada button (yaitu: âClick} meâ)

* onclick _{: nama event yang di}_handle * Nilai dari elemen onclickadalah kode JavaScript code yang di execute yaitu

(32)

Catatan:

1. JavaScript adalah case sensitive (HTML tidak case sensitive)

onclick="alert('You clicked the button!');"

ï§

Bagian yang digaris bawahi (onclick) adalah HTML

ï§

Sedangkan yang berda dalam tanda petik (quote) adalah JavaScript

ï§

Sehingga sering terlihat

onclick

di ganti huruf bersar menjadi onClick untuk

memudahkan dibaca tapi tidak untuk alert (JavaScript)

2. Tanda petik tunggal dan dobel digunakan dalam hal ini karena ada tanda petik

didalam tanda petik.

3. Menempatkan semicolon (;) pada setiap statemen adalah optional kecuali jika lebih

dari statemen dalam satu baris.

4.

<

script type="text/javascript"> juga dapat dituliskan sebagai

5. Menagani Browser versi lama (tidak support JavaScript)

Browser versi lama umumnya tidak mendukung java script dan akan menampilkan

code script sebagi content. Untuk mencegah hal ini terjadi digunakan tag commnet

HTML seperti diperlihatkan berikut:

some statements

//-->

</script>

6.

Komentar

JavaScript mendukung dua bentuk format untuk komentar:

â¢

Komentar satu baris yang diawali dengan suatu double slash (//)

â¢

Komentar banyak baris yang diawali dengan suatu /* dan diakhiri dengan

suatu */

Event-event Umum

Kebanyakan elemen HTML menghasilkan even berikut:

â

onClick

-- elemen form untuk di click

â

onDblClick

-- elemen form di click dua kali secara berturutan (dobel click)

â

onMouseDown

â tombol mouse ditekan saat berada diatas elemen form

â

onMouseOver

-- mouse digerakkan diatas elemen form

â

onMouseOut

-- mouse digerakkan menjauh elemen form

â

onMouseUp

-- tekanan tombol mouse dilepas sementra berada diatas elemen form

â

onMouseMove

-- mouse digerakkan

Contoh 3: MouseOver dan MouseOout (Rollover )

<html>

<body>

<h1 onMouseOver="style.color='red';"

onMouseOut="style.color='blue';">Hello </h1> </body>

</html>

(33)

Tabel Events dan event handlers I

Event

Diterapkan pada

Terjadi jika

Handler

Load Document body User me-load halaman dalam browser

onLoad

Unload Document body User exits dari halaman onUnload Error Images, window Error pada saat load

image atau window

onError

Abort Images User meng-abort saat load image

onAbort

KeyDown Documents, images, links, text areas

User menekan suatu key OnKeyDown

KeyUp Documents, images, links, text areas

User melepas tekanan pada key

OnKeyUp

KeyPress Documents, images, links, text areas

User menekan dan menahan key

onKeyPress

Change Text fields, text areas, select lists

User mengganti nilai elemen

onChange

MouseDown Documents, buttons, links User menekan tombol mouse

OnMouseDown

MouseUp Documents, buttons, links User melepas tekanan tombol mouse

OnMouseUp

Click Buttons, radio buttons, checkboxes, submit buttons, reset buttons, links

User meng-click pada elemen form atau link

onClick

MouseOver Links User menggerakkan

kursor stas link

OnMouseOver

MouseOut Areas, links User menggerakkan kursosr menjauhi image map atau link

OnMouseOut

Select Text fields, text areas User memilih field dari elemen form input

onSelect

Move Windows User atu script

mengerakkan window

OnMove

Lihat Modul untuk selengkapnya

2. Menggunakan Tag

â¢

Kebanyakan kode JavaScript ditempatkan didalam tag <script>

Contoh:

<html> <body> <script type="text/javascript"> document.write("<h1>Hello World!</h1>") </script> </body> </html>

â¢

Ada beberapa cara penempatan kode JavaScript didalam halaman HTML:

o Scripts yang ditempatkan pada bagian bodyakan dieksekusi sementara halaman diload.

(34)

o Script eksternal yaitu kode javascript dibuat terpisah dalam satu file yang dapat dipanggil melalui file html

Contoh:

Script pada Bagian Head dan dipanggil (eksekusi) pada bagian body

{

alert("This alert box was called with the onload event") }

</script> </head>

</html>

Contoh:

Script pada Bagian Body dan dikesekusi begitu halaman di load

<body>

document.write("This message is written when the page loads") </script>

</body> </html>

Contoh:

Script External

Buat file javascript yang disimpan dengan ekstensi .js

dan kemudian dipanggil melalui file

html

<p>

Script merupakan suatu file ekternal dengan nama"xxx.js". </p>

</body> </html>

JavaScript Popup Boxes

Alert Box dalam JavaScript dapat dibuat dalam tiga jenis popup box: Alert box,

Confirm

box

, dan

Prompt box

.

Alert Box

Alert box sering digunakan untuk meyakinkan bahwa informasi datang melalui user. Ketika suatu alert box pops up(muncul), user mesti klik "OK" untuk dilanjutkan.

(35)

Syntax:

alert("sometext")

Contoh:

{

alert("I am an alert box!!") }

</script> </head>

</body>

</html>

Confirm Box

Confirm box sering digunakan diinginkan bahwa user telah menerima sesuatu. Ketika confirm box muncul, user mesti klik salah satu "OK" atau "Cancel".

Syntax:

confirm("sometext")

Contoh:

{

var name=confirm("Press a button") if (name==true)

{

document.write("You pressed the OK button!") }

else {

document.write("You pressed the Cancel button!") }

} </script> </head>

</body> </html>

Prompt Box

Prompt box sering digunakan untuk memberi user kesempatan menginput suatu nilai sebelum masuk suatu halaman.

Ketika Prompt box muncul, user mesti kilk salah satu "OK" atau "Cancel" to proceed after entering an input value.

If the user clicks "OK" the box returns the input value. If the user clicks "Cancel" the box returns null.

Syntax:

prompt("sometext","defaultvalue")

(36)

Contoh:

{

var name=prompt("Please enter your name","") if (name!=null && name!="")

{

document.write("Hello " + name + "! How are you today?") }

} </script> </head>

</body> </html>

Variabel

Variabel adalah suatu âcontainerâ bagi informasi yang hendak disimpan

JavaScript memiliki beberapa tipe dari nilai sebagai berikut :

ï·

Number, baik bilangan nyata (real) maupun bilangan bulat (integer) (contoh 4.156

dan 39)

ï·

String (contoh

"ini adalah JavaScript"

)

ï·

Logical (Boolean) dengan nilai true dan false

ï·

Null, yang mana adalah keyword khusus yang mengawali nilai kosong.

Perlu diperhatikan bahwa tidak ada perbedaan antara tipe integer dengan real,

keduanya memiliki tipe yang sama yaitu number.

JavaScript tidak menyediakan tipe data khusus untuk data tanggal. Tetapi memiliki

beberapa fungsi dan object date yang dapat digunakan untuk melakukan manipulasi data

tanggal.

Aturan Mendefinisikan Nama Variabel

ï·

Nama Variable adalah

case sensitive

(beda antar huruf besar dan kecil)

ï·

Harus dimulai dengansuatu huruf atau under score ( _ ), dengan hruf dan selanjtnya

berupa angka

Contoh penulisan nama variabel:

First_Name

t99

_name

Batasan lainnya dalam pemberian nama variabel adalah tidak boleh sama dengan cadangan

kata pada JavaScript. Tabel 1 adalah daftar dari cadangan kata pada JavaScript.

(37)

Table 1. Cadangan kata pada JavaScript.

abstract extends int super

boolean false interface switch

break final long synchronized

byte finally native this

case float new throw

catch for null throws

char function package transient

class goto private true

const if protected try

continue implements public var

default import return val

do in short while

double instanceof static with

else

Jangkauan dari Variabel

JavaScript memiliki dua jangkauan untuk variabel:

ï· variabel Global ï· variabel Local

Variabel lokal

digunakan didalam suatu fungsi dan ruang linkupnya terbatas pada fungsi

tersebut. Jika keluar dari fungsi maka variabel jadi hilang. Variabel lokal dapa mempunyai

nama yang sama dalam funsi berbeda. Untuk mendeklarasikan suatu variabel lokal, harus

diawali dengan var, seperti contoh berikut ini:

var MaxValue=0

Jika variable dideklarasi diluar funsi dan semaua fungsi dalam halaman dapat mengaksesnya

didefenisikan sebagai

variabel global

.

JavaScript mengganggap semua variabel yang tidak diawali dengan var adalah variabel

global. Walaupun JavaScript memperbolehkan anda menggunakan nama variabel yang sama

untuk local maupun global, tetapi adalah praktek yang tidak disarankan.

TIP

Untuk memastikan fungsi mendapatkan nilai yang benar dari

suatu variabel global, deklarasikan semua variabel global

tersebut pada awal dari script.

Contoh: variabel

document.write("<h1>"+name+"</h1>") </script>

(38)

<p>Contoh ini mendeklarasikan suatu variable, memberi (assigns) nilai padanya dan menampilkannya </p>

</body> </html>

Ekspresi dan Operator

Literal dan variabel dihubungkan oleh operator, hasil dari pernyataan tersebut adalah

ekspresi

. JavaScript menyediakan berb

Suatu file HTML dapat dibuat menggunakan editor text sederhana seperti notepad

Modul 1: Dasar-dasar HTML

lebih disukai

untuk digunakan oleh organisasi riset nuklir Eropa, CERN. HTML yang didasarkan Standard

Musim panas tahun 1991: spesifikasi HTML di rilis pada Internet

Mei 1996: draft HTML 3.2 di rilis

Desember 1998: draft untuk formulasi HTML dalam XML (eXtensible Markup

Mei 2001: XHTML 1.1 direkomendasi oleh W3C

Tag harus tersusun secara baik (properly nested ) yaitu tidak saling tumpang tindih

</body>

<HEAD> </HEAD>

HTML mengandung tag yang dapat digunakan memformat tampilan tulisan pada

Contoh :

Tabel tag untuk Formating dan Style

Tabel tag Formatting Presentasi/tampilan

Tabel tag Pengaturan Warna dan Backgrounds

1.5.2 Whitespace

membuat kumpulan text dalam satu pragraf

termasuk symbol untuk bahasa asing.

ampersand

Contoh :

Hasil

Tabel tag Lists

1.5.4 Links

dikunjungi)

1.5.6 Images

seperti:.gif, .jpg, atau .png

1.5.7 Tables

hanya pada format text. Pada cell

Tabel tag untuk Tables

1.5.8 Frames

nilai dari tinggi baris _

</frame>

<HTML> <HEAD>

</HTML>

Hasil

Tabel tag Frames

1.5.9 Forms

menus, dll

info data form form

berupa:

Contoh-contoh Text input:

Hasil:

Button : ada aksi dari java script

female

content="text/html;

</form>

Tabel tag Forms

Contoh Komplit kombinasi form dan table:

Hasil:

gambar taupun ke halaman html seperti: <a href="

Ada dua cara menuliskan lokasi atau alamat yang dilink/dipanggil tersebut yaitu dengan

seperti ditunjukkan diatas. Sedangkan file yang memanggil adalah

berarti gambar tersebut

Ada baiknya menggunakan URL

digunakan jika gambar tadi terletak di server yang sama sekali berbeda.

digunakan untuk tampilan keseluruhan situs. Dengan demikian melakukan modifikasi file css

Juga dimungkinkan menerapkan banyak rule yang saling berbeda untuk suatu elemen berbeda

Alasan diperkenalkannya CSS adalah ketika HTML yang semula ditujukan untuk mark-up

Perkembangan CSS:

-- Augustus 2002 â Draft pertama CSS 2.1 dirilis ke publik

dengan memikirkan penggunaan ke depan.

Menambah kecepatan download

Ada 3 cara implementasi CSS pada halaman html yaitu:

selector/descriptor

â Contoh: h1 {color: green; font-family: Verdana} artinya sesuatu yang terkandung

Font dan margin diberlakukan untuk

a:active {color:red}

Pengulangan selectors

akan tetap red)

An adjacent selector

Atribut

cukup hilangkan nama tag (tetap ada dot):

berbeda:

Contoh:

Berlaku baik untuk HTML maupun XML

<head>

<style TYPE="text/css">

Inline style sheets

Kekurangan:

-- Augustus 2002 â Draft pertama CSS 2.1 dirilis ke publik

â Contoh: h1 {color: green; font-family: Verdana} artinya sesuatu yang terkandung

â in, cm, mm, pt, pc: inches, centimeters, millimeters, points (1/72 of an inch), picas (1

â¢ Index DOT Css has also been a great source of information about CSS: