buku ajar desain web

BUKU AJAR DESAIN WEBOleh Moh.Erdda Habiby, S,ST

DAFTAR ISI :

Bab I HTML ….................................................................................................................... 2Bab II CSS ........................................................................................................................ 20Bab III JAVASCRIPT …..................................................................................................... 34Bab 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 DOKUMENBerikut 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.

CONTOHAtribut 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 headlineUntuk 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><H2>HEADLINE LEVEL 2</H2><H3>HEADLINE LEVEL 3</H3><H4>HEADLINE LEVEL 4</H4><H5>HEADLINE LEVEL 5</H5><H6>HEADLINE LEVEL 6</H6>

</BODY></HTML>

Tag Style SederhanaKini 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>


<TITLE> Format tampilan sederhana</TITLE></HEAD><BODY>

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

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 

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.


<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 SMITHFROM : CHRIS BROWNSUBJECT : MEETING SCHEDULE AND AGENDA FOR WEB SITE TEAMDATE : THURS, 14 AUG 1997 22:00:059/20/97 8:00 AM ROOM 2189/21/97 9.00 AM ROOM 2189/22/97 2.00 PM ROOM 111AT 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” >


<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”>


<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.


<title> tag div untuk alignment text</title>

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 bayanganSIZE : untuk menentukan ketebalan garis (dalam pixel)WIDTH : untuk menentukan lebar dan panjang garis (dalam persen %)

TRY THIS.....<html>

<head><title> tag div untuk alignment text</title>

</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-di-blog.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-label-kategori.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 :

<ANAME=”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>


<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”>


<TITLE> MEMBUAT IMG<TITLE></HEAD><BODY>

<img src=”Violets.JPG”alt=”voilets” width=150height=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 :

<tdalign=”center | left | right”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 :

<thalign=”center | left | right”vlign=”baseline | bottom | middle | top”bgcolor=”color”colspan=”value”rowspan=”value”height=”pixelheight”

14

width=”pixelwidth”nowrap=”value”

>…..</th>


<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 :

<framesetcols = “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

noresizescrolling=”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 INPUTMacam macamnya :

• <input type="jenis" name="nama" id="id" value="nilai" disabled>type : text, password, radio, checkbox, image, submit, reset, button, hidden, filename : identifier untuk sisi serverid : identifier untuk sisi browservalue : nilai defaultdisabled : 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 nilainyasize : 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 gambaralt : teks yang ditampilkan bila browser tidak dapat menampilkan gambar

TAG TEXTAREA, SELECT, BUTTON

• <textarea name="nama" rows="b" cols="k">nilai</textarea>nilai : nilai defaultrows : 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, buttontampilan : 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

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

18

• 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

• 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

19

• 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><style type="text/css">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><style type="text/css">.right { text-align : right }</style></HEAD><BODY>

<h2 class="right">Class Heading 2 </h2><p class="right"> Class Paragraf</p>

</BODY></HTML>

c. Selector Id

<HTML><HEAD>

<TITLE> Selector </TITLE><style type="text/css">#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><STYLE type="text/css">

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 Value Keteranganbackground-image url Alamat gambar yang ditujubackground-repeat repeat

repeat-xrepeat-y

no-repeat

Diulang dlm halamanDiulang sumbu xDiulang sumbu y

Tampil 1 gbr

Background-position

top lefttop centertop right

center leftcenter centercenter rightbottom left

bottom centerbottom right

x-% y-%x-pos y-pos

Atas kiri halAtas tngh hal

Atas kanan halTgh kiri halPusat hal

Tngh kanan halBwh kiri halBwh tgh hal

Bwh kanan halPakai 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; }


Background di Pusat Halaman</BODY></HTML>

FORMAT TEXT PADA WEB

Properties Value KeteranganPengaturan warnacolor green, dllPengaturan Spasi (jrk antar karakter)letter-spacing Normal

LengthUkrn standar HTMLUkrn panjang (cm,px)

Perataan Texttext-align left

rightcenterjustify

text-decoration noneunderlineoverlineline-throughblink

Bentuk standarBergaris bwhBergaris atasText dicoretText berkedip

26

Pengaturan text indentasitext-indent length

%Dengn cm, pxDengan persentase

Pengubahan Bentuk Karaktertext-transform capitalize

uppercaselowercasenone

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><TITLE>Format Text </TITLE>

<STYLE ="text/css">h1 {text-align: center}h2 {text-align: left}h3 {text-align: right}


<h1>Header 1,Di tengah</h1><h2>Header 2 , Di kiri</h2><h3>Header 3 ,Di kanan</h3>

</BODY></HTML>

Contoh 3 :<HTML><HEAD><TITLE>Format Text </TITLE>

<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><TITLE>Format Text </TITLE><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 Value KeteranganJenis Fontfont-family arial, dllUkuran HurufFont-size Small

Medium LargeLength%

KecilMenengahBesarBesar font (pt,px)Persentase

Pengaturan gaya pada fontfont-style normal

italicoblique

Ketebalan huruffont-weight normal

bold100 ~ 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-family : verdana ;font-weight: normal;}p.thick {font-family : verdana ;font-weight: bold;}p.thicker {font-family : times ;font-weight: 900;}


<p class="normal">This is a paragraph</p><p class="thick">This is a paragraph</p><p class="thicker">This is a paragraph</p>

</BODY></HTML>

29

PENGATURAN TABELYang perlu diperhatikan adalah pengaturan border, padding dan margin suatu tabel.

1. Pengaturan padding<HTML><HEAD><TITLE>Pengaturan Padding Table</TITLE>

<style type="text/css">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 Keterangana:link Keadaan awal pemicu link aktifa:visited Keadaan pemicu link setelah dikunjungia:active Keadaan pemicu yang sedang aktifa:hover Kejadian pada pemicu link saat mouse

digerakkan diatasnya

1. Penggunaan property selector<HTML> <HEAD> <TITLE>Pengaturan pada link</TITLE>

<STYLE type="text/css">/*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;background-color:#336699;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;background-color:#336699;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 href="pembimbing.htm">Pembimbing Org</a> <a href="dpo.htm">DPO Organisasi</a> <a href="kegiatan.htm">Kegiatan Rutin</a>

<a href="berita.htm">Berita UKM</a></div></BODY></HTML>

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 JAVASCRIPTJavascript 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 JAVASCRIPTStruktur 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

PropertiProperti adalah atribut dari sebuah objek. Contoh, objek mobil punya properti warna mobil.Penulisan : Nama_objek.nama_properti = nilai window.defaultStatus = ”Selamat Belajar JavaScript”;

34

MetodeMetode 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"></SCRIPT></BODY></HTML>

2. Pemakaian metode dalam objek.<HTML><HEAD><TITLE>Skrip JavaScript</TITLE></HEAD><BODY>Percobaan memakai JavaScript:<BR><SCRIPT LANGUAGE = "JavaScript"></SCRIPT></BODY></HTML>

3. Pemakaian prompt<HTML><HEAD><TITLE>Pemasukan Data</TITLE></HEAD>

35

<BODY><SCRIPT LANGUAGE = "JavaScript"></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><TITLE>Contoh Program Javascript</TITLE></HEAD><SCRIPT language="Javascript">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> <TITLE>Contoh Program Javascript</TITLE></HEAD><SCRIPT language="Javascript">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><SCRIPT LANGUAGE = "JavaScript"></SCRIPT></BODY></HTML>

4. Penggunaan operator switch untuk seleksi kondisi<HTML><HEAD><TITLE>Contoh Program Javascript</TITLE></HEAD><SCRIPT language="Javascript">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><TITLE>Contoh Program Javascript</TITLE></HEAD><BODY><SCRIPT language="Javascript"></SCRIPT></BODY></HTML>

6. Pemakaian looping < do..while ><HTML><HEAD><TITLE>Contoh Program Javascript</TITLE></HEAD><BODY><SCRIPT language="Javascript">

38

</SCRIPT></BODY></HTML>

7. Pemakaian looping < while ><HTML><HEAD><TITLE>Contoh Program Javascript</TITLE></HEAD><BODY><SCRIPT language="Javascript"></SCRIPT></BODY></HTML>

PEMBUATAN FORM

1. Form input :<html><head> </head><SCRIPT language="Javascript">function test () {var val1=document.kirim.T1.valueif (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><SCRIPT LANGUAGE = "JavaScript"></SCRIPT><H1>TES</H1><FORM><INPUT TYPE = "BUTTON" VALUE = "Latar Belakang Hijau" onClick = "ubahWarnaLB('GREEN')"><INPUT TYPE = "BUTTON" VALUE = "Latar Belakang Putih" onClick = "ubahWarnaLB('WHITE')"><INPUT TYPE = "BUTTON" VALUE = "Teks Kuning" onClick = "ubahWarnaLD('YELLOW')"><INPUT TYPE = "BUTTON" VALUE = "Teks Biru" onClick = "ubahWarnaLD('BLUE')"></FORM><SCRIPT LANGUAGE = "JavaScript"></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

Documents