MODUL PEMROGRAMAN WEB 1 · PDF fileBAB I PENGENALAN WEB ... BAB II BASIC TAG HTML ... kerja...

[email protected]

Modul Pemrograman Web 1 1

MODUL PEMROGRAMAN WEB 1

OLEH :

ENDAR NIRMALA, S.Kom, MT

JURUSAN TEKNIK INFORMATIKA

UNIVERSITAS PAMULANG

[email protected]


KATA PENGANTAR

Web merupakan salah satu sumber informasi yang banyak digunakan. Berbagai

aplikasi web dibuat dengan tujuan agar pemakai dapat berinteraksi dengan

penyedia informasi dengan mudah dan cepat melalui dunia Internet. HTML

digunakan untuk membangun suatu halaman web. Sekalipun banyak orang

menyebutnya sebagai suatu bahasa pemrograman, HTML sama sekali bukan

bahasa pemrograman, tapi merupakan bahasa markup (penandaan), terhadap

sebuah dokumen teks.

Sehubungan dengan kebutuhan untuk membangun aplikasi web yang bersifat

dinamis modul ini dibuat dengan mengkombinasikan HTML dan Java Script.

Harapan yang diinginkan agar pembaca khususnya mahasiswa dapat belajar

sendiri untuk mengimplementasikannya. Dengan pendekatan "belajar dengan

mencoba dan berlatih", modul ini dapat menuntun mahasiswa memiliki

kemampuan dasar dalam membuat aplikasi web yang dinamis.

Modul ini mencakup tentang HTML dan Java Script sehingga pembaca khusunya

mahasiswa dapat membuat web sederhana yang cukup menarik. Semua contoh

latihan sudah diuji dilingkungan Windows . Untuk lebih melengkapi modul ini

anda dapat mendownload sendiri situs-situs tutorial yang berhubungan dengan

HTML dan Java Script yang berada di Internet.

Akhir kata semoga modul ini dapat memberikan manfaat.

Jakarta, Mei 2011

Penulis

[email protected]


DAFTAR ISI

KATA PENGANTAR 1 DAFTAR ISI .......................................................................................................................... 3

BAB I PENGENALAN WEB ................................................................................................... 5

1.1 World Wide Web ...................................................................................................... 5

1.2 Sekilas Cara Kerja Web ............................................................................................ 6

1.3 Pengenalan HTML ................................................................................................... 7

1.3.1 Elemen HTML .................................................................................................... 8

1.3.2 Browser dan Editor ........................................................................................... 8

1.3.3 Struktur script HTML : ....................................................................................... 8

BAB II BASIC TAG HTML .................................................................................................... 10

2.1 Struktur Dasar HTML .............................................................................................. 10

2.1.1 HEAD ............................................................................................................... 10

2.1.2 BODY ............................................................................................................... 11

2.2 Format Dokumen HTML ......................................................................................... 11

BAB III FORMAT TEKS DAN KARAKTER KHUSUS ........................................................... 16

3.1 Format Teks ............................................................................................................ 16

3.2 Karakter Khusus ..................................................................................................... 16

BAB IV MENYISIPKAN GAMBAR, SUARA DAN VIDEO ..................................................... 20

4.1. Menyisipkan Gambar ............................................................................................ 20

4.2 Menyisipkan Suara ................................................................................................. 20

4.3 Menyisipkan Video ................................................................................................. 21

BAB V HYPERLINK ............................................................................................................ 22

BAB VI LIST ...................................................................................................................... 25

BAB VII TABEL ................................................................................................................... 29

BAB VIII FORM .................................................................................................................. 33

BAB IX FRAME .................................................................................................................. 38

BAB X CASCADING STYLE SHEET (CSS) ............................................................................ 43

10.1. Penulisan CSS ...................................................................................................... 43

10.2 Menggunakan Style sheet .................................................................................... 44

[email protected]


BAB XI PENGENALAN JAVA SCRIPT ................................................................................. 52

11.1 Penulisan Java Script ............................................................................................ 52

11.2 Variabel ................................................................................................................ 54

11.3. Tipe Data ............................................................................................................. 55

11.4 Jenis Operator ...................................................................................................... 56

BAB XII STRUKTUR KENDALI DAN FUNGSI ..................................................................... 61

12.1 Struktur Kendali ................................................................................................... 61

12.2 LOOP .................................................................................................................... 64

BAB XIII FUNCTION DAN ARRAY .................................................................................... 67

13.1. FUNCTIONS ......................................................................................................... 67

13.2 Array ..................................................................................................................... 68

BAB IV KOLEKSI CODE JAVA SCRIPT ................................................................................. 70

14.1 Membuat tanggal ................................................................................................ 70

14.2 Teks jalan distatus bar .......................................................................................... 70

14.3 Animasi Kursor ..................................................................................................... 71

DAFTAR PUSTAKA ............................................................................................................. 74

[email protected]


BAB I PENGENALAN WEB

1.1 World Wide Web

Internet merupakan jaringan global yang merupakan sumber daya informasi

dengan menghubungkan suatu network dengan network lainnya di seluruh dunia.

World Wide Web telah berkembang sangat pesat sejak kemunculannya diawal

tahun 1990 an. Semua perhatian public, baik dari media massa, bisnis,

pemerintah, ataupun perseorangan, tertuju kepada World Wide Web. Melihat daya

jangkauannya yang luar biasa, mereka pun mulai berlomba-lomba memanfaatkan

World Wide Web untuk memperlancar usahanya.

World Wide Web dibangun dari halaman web atau dikenal dengan home

page. Home page sendiri dibuat dengan menggunakan Hypertext Markup

Language (HTML). Tanpa HTML, tidak akan ada home page, dan tanpa home

page tidak akan ada World Wide Web. HTML merupakan pondasi dari World

Wide Web.

HTML merupakan format data yang digunakan untuk membuat dokumen

hypertext yang dapat dibaca dari satu platform komputer lainnya tanpa perlu

melakukan suatu perubahan apapun. Dokumen HTML sebenarnya merupakan

suatu dokumen teks biasa sehingga di platform apapun dokumen tersebut dapat

dibaca. Dokumen HTML disebut sebagai markup language karena mengandung

tanda-tanda tertentu yang digunakan untuk menentukan tampilan suatu teks dan

tingkat kepentingan dari teks tersebut dalam suatu dokumen.

Dengan sistem hypertext pada dokumen HTML, pengguna tidak harus

membaca suatu dokumen secara berurutan dari atas ke bawah, tetapi dapat menuju

ke topik tertentu secara langsung dalam dokumen dengan menggunakan teks

penghubung yang akan membawa kita ke suatu topik atau dokumen lain secara

langsung.

[email protected]


World Wide Web bekerja berdasarkan dengan tiga mekanisme, yaitu:

Protocol merupakan standard aturan yang digunakan untuk berkomunikasi

dengan komputer networking, protokol untuk World Wide Web adalah

Hypertex Transfer Protocol (HTTP).

Address, World Wide Web memiliki aturan penamaan alamat web yaitu URL

(Uniform Resource Locator) sebagai standard alamat internet.

HTML digunakan untuk membuat dokumen yang dapat diakses melalui web.

1.2 Sekilas Cara Kerja Web

Pada saat kita mengetikkan sesuatu alamat pada browser maka data akan

dilewatkan oleh suatu protocol HTTP melewati port 80 pada server. Alamat ini

adalah URL dari suatu situs yang mempunyai alamat yang unik di Internet. Web

Browser akan mengirimkan suatu aturan yang telah disepakati sebelumnya, aturan

ini biasa disebut sebagai protocol, standar protocol menggunakan TCP/IP, proses

ini dimulai dengan melakukan 3 way handshakes antara sumber dan tujuan. Web

browser, suatu aplikasi pada client yang akan menampilkan halaman web sites

dari internet. Web browser di install di sisi user (OS) menampilkan informasi ke

komputer dengan interpreting bahasa pengkodean HTML, dimana homepage

berisi gambar, suara, multimedia, dan resources lainnya yang dapat diakases. Files

Coding pada HTML memberikan datanya ke browser apa yang akan ditampilkan

ke sisi client. Isi HTML yang akan ditampilkan bukan dari browsernya tetapi dari

web servernya dan browser akan menginterpretasikan tag HTML untuk link ke

halaman berikutnya

[email protected]


Gambar 1.1 Cara kerja web

1.3 Pengenalan HTML

Hypertext Markup Language merupakan bahasa standard yang digunakan

untuk menampilkan dokumen web. Hal-hal yang dapat dilakukan dengan

menggunakan HTML, yaitu:

1. Mengontrol tampilan web page dan content-nya

2. Mempublikasikan dokumen secara on-line sehingga dapat di akses dari

seluruh dunia

3. Membuat on-line form yang dapat digunakan untuk menangani pendaftaran,

transaksi secara on-line

4. Menambahkan objek-objek seperti image, audio, video dan java applet.

Perbedaan utama dokumen HTML dengan dokumen pada umumnya adalah

dokumen HTML memiliki elemen-elemen HTML beserta tag-tagnya.

[email protected]


1.3.1 Elemen HTML

Elemen HTML merupakan komponen penyusun suatu dokumen HTML.

Elemen ini dibagi atas 2 bagian utama, yaitu:

Elemen-elemen <HEAD> yang memberikan informasi tentang dokumen

tersebut

Elemen-elemen <BODY> yang menentukan bagaimana isi suatu dokumen

ditampilkan oleh browser.

1.3.2 Browser dan Editor a. Browser

Browser merupakan software yang di install pada mesin client yang berfungsi

untuk meneterjemahkan tag-tag HTML menjadi halaman web. Browser yang

sering digunakan biasanya Internet Explorer, Netscape Navigator, Mozilla dan

Opera.

b. Editor

Editor adalah program yang digunakan untuk membuat dokumen HTML,

diantaranya MS FrontPage, Notepad, Macromedia DreamWeaver, EditPlus,

CuteHTML dan lain sebagainya.

1.3.3 Struktur script HTML :

<html>

<head>

--- bagian head ---

</head>

<body>

--- bagian body ---

</body>

</html>

[email protected]


Latihan :

1. Apa perbedaan Web, Portal dan Blog !

2. Apa yang dimaksud dengan Web Browser, berikan contoh !

3. Apa yang dimaksud dengan Web Server, berikan contoh !

4. Ceritakan proses kerja web !

[email protected]


BAB II BASIC TAG HTML

2.1 Struktur Dasar HTML

HTML digunakan untuk membangun suatu halaman web. Banyak orang

menyebutnya sebagai suatu bahasa pemrograman, HTML sama sekali bukan

bahasa pemrograman, tapi merupakan bahasa markup (penandaan), terhadap

sebuah dokumen teks. Simbol markup yang digunakan oleh HTML ditandai

dengan tanda lebih kecil ( < ) dan tanda lebih besar ( > ) , dan disebut tag.

Tag biasanya merupakan suatu pasangan, yang disebut tag awal dan tag akhir.

Tag awal dinyatakan dalam bentuk <nama_elemen> dan tag akhir dinyatakan

dalam bentuk </nama_elemen>. Ada beberapa macam bentuk tag yang dikenal

dalam HTML, yaitu :

Tag berpasangan

Format : <nama_elemen> teks </nama_elemen>

Tag tunggal

Format : <nama_elemen>

Tag yang disertai attribut

Format : <nama_elemen nama_attribut=argumen> teks </nama_elemen>

Atribut adalah properti dari suatu elemen HTML

2.1.1 HEAD

Bagian Head sebenarnya tidak harus ada pada dokumen HTML, tetapi pemakaian

head yang benar akan meningkatkan kegunaan suatu dokumen HTML. Isi bagian

head kecuali judul dokumen tidak akan terlihat oleh pembaca dokumen tersebut.

Elemen-elemen pada bagian head akan mengerjakan tugas-tugas sebagai berikut :

Menyediakan judul dokumen

Menjembatani hubungan antar dokumen

Memberitahu browser untuk membuat form pencarian

Menyediakan metode untuk mengirim pesan ke tipe browser

[email protected]


Elemen yang mungkin terdapat pada bagian head : Tag <TITLE>, digunakan untuk memberi judul dokumen.

Bentuk umumnya : <TITLE> Judul </TITLE>

Tag <BASE>, digunakan untuk menentukan basis URL sebuah dokumen.

Bentuk umumnya : <BASE HREF=”URL”>

Contoh : <BASE HREF=”//www.alamat.com/direktori”>

Tag <LINK>, digunakan untuk menunjukkan relasi antar dokumen HTML.

Tag <META>, digunakan untuk mendefinisikan informasi-informasi di luar

HTML.

Penggunaan elemen <META> yang paling populer adalah penggunaan properti

Keyword dan Description. Kedua properti ini sangat berguna untuk membantu

kerja search engine. Biasanya search engine akan menggunakan teks yang

disebutkan pada properti Keyword untuk mengindeks dokumen dan

menggunakan teks yang terdapat pada properti Description untuk

mendeskripsikan indeks tersebut.

2.1.2 BODY

Berfungsi untuk menyimpan informasi atau data yang akan ditampilkan dalam

web page. Bentuk Umum :

Bgcolor latar belakang : warna Background latar belakang: gambar

2.2 Format Dokumen HTML

<BR> : membuat baris baru, tidak memerlukan penutup </BR>

<P align= left|right|center |justify> : memulai paragaraf baru, tidak

memerlukan penutup </P>

<HR align=left|right|center width = ... size = ... noshade color = ... >

<Hn> : heading sebuah dokumen, nilai n berkisar antara 1 hingga 6.

<body bgcolor=”……” background=”….”>

[email protected]


<PRE> : membuat tampilan dokumen HTML pada browser sama dengan

tampilan pada teks editor. Dengan tag <PRE>, maka tag <P> dan tag <BR>

tidak diperlukan lagi.

<BLOCKQUOTE> : membuat tampilan menjorok ke dalam seperti identasi.

Bentuk umum : <blcokquote> .... </blockquote>

Latihan 1

<html> <head> <title>The Cool Web Movie Database</title> </head> <body> Welcome to the Cool Web Movie Database. So far we offer<br> information on the many brilliant films of David Lean:<br> soon, a lot more will be online. <hr width=75% size=3 color="blue" align=left> <h1>Films with Sam Spiegel Productions</h1> <h2>The Bridge on the River Kwai (1957)</h2> <p>Produced by Sam Spiegel, this film was the first of the Lean blockbuster movies, and featured a young Alec Guinness, William Holden, and a brilliant performance from Sessue Hayakawa. <h3>Lawrence of Arabia (1962)</h3> One of my all-time favorite movies, this epic adventure starring Peter O’Toole established Lean as a director who could truly envision film on a grand scale. <hr> <h4>The Later Years</h4> <h5>Doctor Zhivago (1965)</h5> <h6>Ryan’s Daughter (1970)</h6> <hr> This information maintained by Dave Taylor </body> </html>

[email protected]


Tampilan pada browser :

Latihan 2

<html> <head> <title>Penggunaan Pre</title> </head> <body bgcolor="cyan"> <h2>Ini adalah awal dari suatu paragraph lho</h2> <p>Kalo ini adalah paragraph kedua. <p>Nah ini nih paragrap terakhir. <p align="left"> Teks dengan Align="left" akan diratakan pada margin kiri. <p align="center">

[email protected]


Teks dengan Align="center" akan diratakan pada margin tengah. <p align="right"> Teks dengan Align="right" akan diratakan pada margin kanan. <pre> Teks ini mempergunakan s p a s i dan juga tombol ENTER untuk berpindah ke baris ini. Asisten Status ======================= Frans Single Budi Single juga Riyo Double, lho? Chandra duda, he he he... </pre> </body> </html> Tampilan pada browser

[email protected]


Latihan 3

Buatlah halaman web dengan tampilan sebagai berikut :

Simpan dengan nama : home.html

[email protected]


BAB III FORMAT TEKS DAN KARAKTER KHUSUS

3.1 Format Teks

Font, HTML menyediakan elemen <FONT> yang dapat dipakai untuk

mengubah ukuran, jenis, dan warna suatu teks.

Face : jenis huruf Size : ukuran huruf yang memiliki nilai dari 1 hingga 7.

Nilai 1 digunakan untuk membuat ukuran terkecil, sedangkan nilai 7 adalah ukuran terbesar. Nilai default dari ukuran standar teks adalah 3. Default standar ukuran teks dapat diubah dengan menggunakan tag <BASEFONT>

Color : warna

<b> : menebalkan teks

<strong> : menebalkan teks

<em> : menekankan teks

<i> : memiringkan teks

<small> : memperkecil ukuran teks

<big> : memperbesar ukuran teks

<sub> : teks dijadikan subscript

<sup> : teks dijadikan supercript

<u> : membuat garis bawah

<s> : mencoret teks

3.2 Karakter Khusus

© : Copyright bentuk umum : ©

® : Registered trademark bentuk umum : ®

™ : Trademark bentuk umum : ™

& : Ampersand bentuk umum : &

: Non breaking space bentuk umum : &nbsp

« : angle quotation mark (left) bentuk umum : «

» : angle quotation mark (right) bentuk umum : »

<font face=” ... ” size=n color=” ...” > …… </font>

[email protected]


¨ : tanda kutip bentuk umum : "

< : lebih kecil bentuk umum : <

> : lebih besar bentuk umum : >

x : tanda kali bentuk umum : ×

÷ : tanda bagi bentuk umum : ÷

Latihan 1 <html> <head> <title>FONTSIZE terhadap BASEFONT</title> </head> <body> <basefont size=3> <font size=5>size=5</font> <br><font size=-3 color="blue">teks dengan size=-3</font> <br><font face="arial black" size=-2>teks dengan size= -2</font> <br><center><font face="comic sans ms" color="red" size=-1>teks dengan size=-1</font></center> <br><font size=+1>teks dengan size=+1</font> <br><font size=+2>teks dengan size=+2</font> <br><font size=+3>teks dengan size=+3</font> </body> </html> Latihan 2 <html> <head> <title>Karakter Khusus</title> </head> <pre> Tag <B>...</B> <b>menebalkan</b> teks Tag <I>...</I> membuat teks terlihat miring <i>miring</i> Tag <U>...</U> <u>menggaris bawahi</u> teks Tag <S>...</S> memberikan coretan <s>coretan</s> pada teks Tag <Strike>...</Strike> memberikan <STRIKE>Coretan</strike> sama seperti elemen <S>

[email protected]


Tag <BLINK>...</BLINK> membuat teks <blink>berkedip</blink> Tag <TT>...</TT> menampilkan teks dalam font <TT>Typewriter</tt> Tag <Big>...</Big> <big>membesarkan</big> teks Tag <SMALL>...</SMALL> <small>mengecilkan</small> teks Tag <SUB>...</SUB> membuat teks <sub>subscript</sub> Tag <SUP>...</SUP> membuat teks <sup>supercript</sup> Tag <DFN>...</DFN> menandai suatu <dfn>definisi</dfn> Tag <EM>...</EM> menandai suatu <em>penekanan</em> teks Tag <CODE>...</CODE> <font size="4">menyatakan suatu <code>kode program</code></font> Tag <KBD>...</KBD> menyatakan <kbd>suatu keyboard</kbd> Tag <VAR>...</VAR> menyatakan suatu <var>variabel</var> Tag <STRONG>...</STRONG> <strong>menyatakan teks dengan penekanan yang kuat</strong> Tag <!--> membuat suatu komentar atau keterangan </body> </html>

[email protected]


Latihan 3 Buatlah halaman web dengan tampilan sebagai berikut :

Simpan dengan nama : relion.html

[email protected]


BAB IV MENYISIPKAN GAMBAR, SUARA DAN VIDEO

4.1. Menyisipkan Gambar

Format gambar yang dapat ditampilkan dalam dokumen HTML diantaranya GIF,

JPEG, PCX, PNG, WMF, dan BMP, namun yang hanpir sering dikenal disemua

browser adalah GIF dan JPG.

src : nama file gambar

Height : tinggi gambar

Width : lebar gambar

Align : mengatur letak image terhadap teks

(top| bottom| middle| left| right|center)

Alt : menampilkan teks pada saat image tidak dapat tampil

4.2 Menyisipkan Suara

Menyisipkan suara pada halaman web dapat menggunakan embed atau bgsound.

Format suara yang dapat disisipkan diantaranya : .wav, .mid, .mp3, dan .au.

Contoh : <embed src="music/davesite.mp3" loop="true" autoplay="false"

width="145" height="60"></embed>

Jika ingin memutar file secara otomatis saat halaman web di-load, set autoplay =

"true", jika tidak ingin file tersebut diputar secara otomatis, set autoplay = "false".

Jika ingin kotak kontrol disembunyikan, gunakan atribut hidden= "true". Biasanya

file tersebut akan berhenti bermain setelah selesai, jika ingin diputar secara terus

menerus atribut loop = "true". Volume dapat disetting dengan atribut volume,

<img src=” ... ” width= “...” height =” ...” Alt=” … “ align=” …”>

<embed src="filename.ext" width="x" height="x" autoplay="x" hidden="x" loop="x" volume="x"></embed>

[email protected]


nilai dari 1 hingga 100 (default adalah 50). Kotak mengontrol ukuran yang

memainkan suara dapat bervariasi dari browser ke browser, tetapi beberapa versi

dari Netscape tidak akan menampilkan kotak kecuali ditentukan. (145 dan 60

biasanya baik).

Contoh : <BGSOUND SRC="mother.mid" LOOP=5>

Pada beberapa browser bgsound tidak dapat bekerja.

4.3 Menyisipkan Video

Contoh :

<embed src="helloworld.swf" type="application/x-shockwave-flash" width="200"

height="200">

<bgsound src="" loop="">

<embed src="... " width="..." height="..." type=”...”>

[email protected]


BAB V HYPERLINK

Kelebihan utama dari HTML adalah kemampuannya untuk memberikan link dari

satu teks/gambar menuju dokumen lain atau bagian lain dalam suatu dokumen.

Ada empat jenis link :

1. Link relative

Membuat link dari satu page ke page yang lain pada komputer yang sama.

Contoh :

<a href=”perpustakaan.html”>perpustakaan</a>

2. Link absolute

Membuat link ke page web lain yang berada pada web site lain di Internet.

Contoh :

<a href=www.google.com>Google</a>

3. Link dalam dokumen yang sama :

Link jenis ini dibuat apabila dokumen panjang, sehingga apabila

ditampilkan dalam bowser web mengharuskan untuk melakukan scroll

layer berulang-ulang. Navigasi untuk memudahkan penelusuran dokumen

dengan membuat link antar bagian dengan memberinya nama.

Contoh :

<a href=”#pengenalan”>Pengenalan</a> ………… ………… <a name=”pengenalan”> ………… </a>

<a href=”nama file”> ….. </a>

<a href=”alamat web site”> …. </a>

<a href=”#nama bagian”> ……. </a>

http://www.google.com/�

[email protected]


4. Link Email

Link pada suatu pesan email.

Contoh :

<a href=”mailto:[email protected]”>kirim email</a>

Latihan 1

<HTML> <HEAD> <TITLE> Contoh Hyperlink </TITLE> </HEAD> <BODY> <pre> <hr color="blue" size=3 width=50% align="left"><font size= 4 color="red"><a href="home.html">Home</a> | <a href="profil.html">Profil</a> | <a href="about.html">About</a> | <a href="galery.html">Gallery</a> | <a href="kontak.html">Kontak</a></font> <hr color="blue" size=3 width=50% align="left"> <font size=3>Selamat datang di halaman webku... Terimakasih anda telah berkunjung, jika anda ingin mencari saya dapat searching ke <a href="http://www.google.com">google</a> Jika anda memiliki kesulitan dapat menghubungi saya by <a href="mailto:endarnirmala.gmail.com">email</a> </font> </pre> </BODY> </HTML> Latih 2

Lengkapi halaman web diatas sehingga saling terhubung antara halaman yang

satu dengan halaman yang lain.

Simpan halaman web sesuai dengan nama linknya, misalnya about.html,

profil.html, galery.html, dan kontak.html

<a href=”mailto:alamat email”>…..</a>

mailto:[email protected]�

mailto:alamat%20email�

[email protected]


Carilah Domain dan Hosting gratis (searching di Internet)

Buatlah Domain untuk alamat web anda dan cobalah lakukan hosting

(langkah-langkah pembuatan dan hosting cari di Internet, jika ada masalah

diskusikan dengan teman atau Dosen anda)

Kirimkan alamat web anda melalui email ke dosen anda.

[email protected]


BAB VI LIST

Tag List dalam dokumen HTML terdiri dari beberapa macam, diantaranya :

List dengan nomor (ordered list)

List tanpa nomor menggunakan bullet (unordered list)

Menu List (Daftar Menu)

Merupakan daftar item yang pendek dan tidak disertai dengan nomor ataupun

penanda item. Menu list menggunakan tag awal <MENU> dan tag akhir

</MENU>, dengan setiap item di dalamnya menggunakan <LI>.

Definition List <DL>

<ol type=”I|i|A|a|1”> <li> ... </li> <li> ... </li> dst </ol>

<ul type= ”circle|square|disc ”> <li> ... </li> <li> ... </li> dst </ul>

<menu> <li> …… </li> <li> …… </li> </menu>

<dl> <dt> ... </dt> <dd> .............. </dd> <dt> ... </dt> <dd> .............. </dd> </dl>

[email protected]


Latihan 1

<html> <head><title>Using List</title></head> <body> <font size="5">Common Foods of the French Quarter</font><br> You can visit <font size="+1">New Orleans</font> and have a great time without ever leaving the picturesque and partyin’ French Quarter area, particularly if you partake of some of these fabulous local foods: <ul> <li><font color="magenta">Beignets</font> - small deep-fried donuts in powdered sugar. Best with a steaming fresh <font size="+2">cup of coffee</font>.</li> <li><font color="GREEN">Seafood Gumbo</font> - a stew-like soup that’s delicious. Typically served with a side of white rice that’s best dumped into the soup directly. Skip the chicken gumbo some places serve too: the seafood is definitely better!</li> <li><font color="ORANGE" size="+2">Jambalaya</font> - the best of all possible dinners. You’ll just have to order it so you can find out what it’s about.</li> <li><font size="5" color="BLUE">alcohol</font> - it’s the grease on the wheels of the tourist experience in the French Quarter, but I’m not convinced it’s as necessary for a good time as the bars suggest... </li> </ul> Whatever you do, make sure you have <font size="+1">F</font><font size="+2">U</font> <font size="+3">N</font>! <dl> <dt>Komputer</dt> <dd> Komputer adalah seperangkat alat elektornik yang bekerja secara otomatis mempunyai internal storage dan untuk melakukan poses data</dd> <dt>Software</dt>

[email protected]


<dd>Software merupakan kumpulan dari perintah-perintah yang digunakan untuk melakukan proses sesuai dengan perintah yang diberikan dan sesuai dengan bahasa pemrograman yang digunakan.</dd> </dl> </body> </html> Latihan 2 <html> <head> <title>The Cool Web Movie Database</title> </head> <body> <font color="navy" size=4>Welcome to the Cool Web Movie Database.</font><br> So far we offer information on the many brilliant films of David Lean: soon, a lot more will be online. <ol type="A"> <li>Films with Sam Spiegel Productions</li> <li>The Bridge on the River Kwai (1957)</li> <li>Lawrence of Arabia (1962)</li> <li>The Later Years</li> <li>Doctor Zhivago (1965)</li> <li>Ryan’s Daughter (1970)</li> </ol> <blockquote> This information maintained by Dave Taylor </blockquote> The ingredients: <ul type="circle"> <li>100 g. flour</li> <li>10 g. sugar</li> <li>1 cup water</li> <li>2 eggs</li> <li>salt, pepper</li> </ul> The procedure: <ol type="1"> <li>Mix dry ingredients thoroughly.</li> <li>Pour in wet ingredients.</li> <li>Mix for 10 minutes.</li> <li>Bake for one hour at 300 degrees.</li> </ol> </body> </html>

[email protected]


Latihan 3

Buatlah tampilan halaman web seperti dibawah ini

Simpan dengan nama komponen.html

[email protected]


BAB VII TABEL

Tag <table> digunakan untuk membuat tabel dalam dokumen HTML, bagian

pokok dari tabel adalah sel. Elemen tabel terdiri dari :

Mendefinisikan tabel :

Border : garis pada tabel ; n=0, 1, 2, .. dst

Cellpadding : spasi antar sel dan border

Cellspacing : jarak antar sel

Mendefinisikan judul tabel, dalam keadaan default posisi ditengah bagian

paling atas tabel.

Menspesifikasikan sebuah baris.

Mendefinisikan sel header

Mendefinisikan sebuah sel data

Atribut tabel :

Align = {left | center | right } alignment horizontal untuk sel

Valign = {top | middle | bottom } alignment vertical dalam sel

Colspan = n menggabungkan beberapa kolom

Rowspan = n menggabungkan beberapa baris

Secara default letak tabel berada di sebelah kiri layar monitor, namun bisa diatur

sesuai dengan keinginan dengan menambahkan perintah <div align=” “ > diatas

tag <tabel> dan ditutup dengan </div> dibawah tag </tabel>

<table border=”n” cellpadding=”n” cellspacing=”n“> ……….

</table>

<caption align=”…”> … </caption>

<tr align=”…”> … </tr>

<th> … </th>

<td> … </td>

[email protected]


Latihan 1 : <html> <head> <title>Belajar HTML Table</title> </head> <body> <div align="center"> <table border="2" width="450"> <tr> <td colspan="3" bgcolor="#FF9900">Kolom 1+2+3 jadi satu </td> </tr> <tr> <td rowspan="2">Kolom 1A<br>+Kolom 1B</td> <td>Kolom 2A</td> <td rowspan="2">Kolom 3A<br>+Kolom 3B</td> </tr> <tr> <td width=100 height=137> <img title="myPerform" src="perform4.gif" width=250 height=250 alt="myPicture"> </td> </tr> <tr> <td>Kolom 1C</td><td>Kolom 2C</td><td>Kolom 3C</td> </tr> </table> </div> </body> </html>

[email protected]


Tampilan browser :

Latihan 2 <html> <head> <title>Penggunaan Tabel Dalam HTML</title> </head> <body> <table border="1" width="70%" > <caption>BIODATA SISWA</caption> <tr> <th width="15%">Nama</th> <th width="16%">Alamat</th> <th width="9%" align="center">Telepon</th> </tr> <tr> <td width="15%" rowspan="3">Angga Kusuma</td> <td width="16%" rowspan="3"> Jl. Karbela 2, Jakarta</td> <td width="13%" align="center">021 - 55667788</td> </tr> <tr> <td width="13%" align="center">08131445689</td> </tr>

[email protected]


<tr> <td width="13%" align="center">021 - 56788901</td> </tr> <tr> <td width="15%" rowspan="3">Wirastuti Wiraguna</td> <td width="16%" rowspan="3"> Jl. Permata 5, Jakarta</td> <td width="13%" align="center">021 - 76456982</td> </tr> <tr> <td width="13%" align="center">08183457298</td> </tr> <tr> <td width="13%" align="center">021 - 66543881</td> </tr> </table> </body> </html> Tampilan Browser :

[email protected]


BAB VIII FORM

Form merupakan elemen HTML yang digunakan untuk :

Memperoleh feedback dari pengguna web

Memperoleh informasi pembelian secara online

Memperoleh data-data user baik nama, alamat, dan data lainya untuk

mendaftar pada service yang disediakan

url : lokasi file yang akan melakukan proses terhadap input dari form method : menyatakan bagaimana masukan-masukan berasal dari form di kirimkan kepada program CGI Jenis masukan dalam Form :

Text : nilai yang dimasukkan dapat berupa angka atau teks

Value pada size menunjukkan besar text box Value pada maxlength menunjukkan jumlah karakter maksimum yang dapat ditampung.

Radio : menyediakan beberapa pilihan, hanya satu pilihan yang dapat dipilih.

Checkbox : menyediakan beberapa pilihan, dapat lebih dari satu pilihan

List atau Dropdown box : menyediakan pilihan dalam bentuk list.

<form action=”url” method=”get | post”> ……… ……… </form>

<input type=”text” name=”var1” size=n maxlength=n>

<input type=”radio” name=”var1”> pilihan 1 <input type=”radio” name=”var2”> pilihan 2 <input type=”radio” name=”var3”> pilihan 3

<input type=”checkbox” name=”var1” checked>pilihan 1 <input type=”checkbox” name=”var2”>pilihan 2 <input type=”checkbox” name=”var3”>pilihan 3

[email protected]


Textarea : memasukkan data dalam bentuk teks berupa memo.

Cols : besar kolom Rows : banyaknya baris

Button : digunakan untuk melakukan pemrosesan form, sehingga membuat

form lebih interaktif. Pada saat button ditekan script yang ada dalam file lain

akan dipanggil untuk melakukan proses selanjutnya. Tombol button terdiri

dari : submit dan reset.

Latihan 1 <html> <head><title>Latihan Dengan Objek Text</title></head> <body>  <form> <H1> Form Pendaftaran</H1><hr> <PRE> NIM : <input type="text" size="11" name="nim"> NAMA : <input type="text" size="25" name="nama"> JENIS KELAMIN : <input type="radio" name="jkel" value="Pria">Pria <input type="radio" name="jkel" value="Wanita">Wanita

<select name=”var” size=n> <option value=”… ”>pilihan 1 <option value=” … ”>pilihan 2 <option value= “ … “ selected>pilihan 3 </select>

<textarea name=”var” cols=”n” rows=”n”> … </textarea>

<input type=”submit” value=” … “> <input type=”reset” value=” … “>

[email protected]


AGAMA : <select name=agama> <option value="Islam">Islam</option> <option value="Katoholik">Katholik</option> <option value="Kristen">Kristen</option> <option value="Hindu">Hindu</option> <option value="Budha">Budha</option> </select> STATUS : <input type="radio" name="status" value="kawin">Kawin <input type="radio" name="status" value="belumkawin">Belum Kawin JURUSAN : <select name="jurusan" Size="1"> <option value ="Teknik Informatika"> Teknik Informatika </option> <option value ="Manajemen Informatika"> Manajemen Informatika </option> <option value ="Teknik Komputer"> Teknik Komputer </option> <option value ="Teknik Industri"> Teknik Industri </option> <option value ="Teknik Elektro"> Teknik Elektro </option> <option value ="Teknik Sipil"> Teknik Sipil </option> <option value ="Teknik Arsitektur"> Teknik Arsitektur </option> <option value ="Teknik Perencanaan Wil. Kota "> Perencanaan Wil. Kota </option> </select> KETERANGAN: <textarea name="ket" rows="3" cols="30"></textarea> </PRE> <BR> <input type="button" value="kirim"> <input type="reset" value="ulang"> </form> </body> </html>

[email protected]


Tampilan Browser :

[email protected]


Latihan 2

Buatlah form dengan tampilan seperti dibawah ini, gunakan fasilitas tabel agar tampilan rapi

[email protected]


BAB IX FRAME

Frame dapat membagi tampilan window menjadi beberapa bagian berdasarkan baris atau kolom.

Dokumen yang berisi frame tidak boleh menggunakan elemen BODY digantikan

oleh elemen FRAMESET yang menyatakan bahwa isi dokumen tersebut

mengandung suatu frame . Struktur dasar dokumen HTML dengan frame sebagai

berikut :

FRAMESET mempunyai 2 buah atribut, yaitu ROWS (membagi jendela

browser menjadi beberapa baris frame) dan COLS (membagi jendela browser

menjadi beberapa kolom frame). Misalnya jika kita ingin membuat 3 buah baris

frame di mana tiap frame tingginya adalah 100, 150, dan 200 pixel, maka kode

HTML untuk membuat frame ini adalah : <FRAMESET ROWS = “100, 150,

200”>. Cara lain untuk menyatakan ukuran baris dan kolom suatu frame adalah

dengan menggunakan % dan nilai relative.

Contoh 1 : <FRAMESET ROWS =”25%, 25%, 50%”>

Contoh 2 : <FRAMESET ROWS =”*, 3*, *”>

<frameset border=n rows|cols = ”..%, ...%, dst”> <frame src=”url” name=”name frame”> </frameset>

<html>

<head>

--- bagian head ---

</head>

<frameset>

[email protected]


Latihan 1 : <HTML> <HEAD> <TITLE> Membuat Frame berdasarkan baris </TITLE> </HEAD> <frameset rows="25%,65%,10%"> <frame src="header.html"> <frameset cols="15%, 85%"> <frame src="menu.html"> <frame src="home.html"> </frameset> <frame src="footer.html"> </frameset> </HTML> Simpan dengan nama: index.html Buat halaman menu <HTML> <HEAD> <TITLE>Contoh Membuat Hyperlink</TITLE> </HEAD> <BODY> <font color="navy" size="4">Menu </font> <font color="sienna" size="4"> <ul type="square"> <li><a href="home.html" target="kiri">Home</a></li> <li><a href="profil.html" target="kiri">Profil</a></li> <li><a href="galery.html" target="kiri">Gallery</a></li> <li><a href="kontak.html" target="kiri">Kontak</a></li> </ul></font> </BODY> </HTML> Simpan dengan nama menu.html

[email protected]


Buat halaman home <HTML> <HEAD> <TITLE> Halaman Utama </TITLE> </HEAD> <BODY> <font color="blue"><h1>Programming WEB dengan HTML</h1></font> <font color="brown"><h2><blink>Teknologi Informatika</blink></h2></font> <hr size=3 color="blue"> <font size=6 color="magenta"><marquee behavior="scroll" direction="up" height=40 scrollamount="1">Selamat datang pada halaman website kami....</marquee></font><br> <p align="justify"><font size=5>Terimakasih anda telah bergabung dan berkunjung pada situs kami, kami berharap anda memperoleh informasi yang anda inginkan dan anda cari.</p> <p>Situs ini berisi informasi sekitar materi yang berhubungan dengan programming web, diantaranya : HTML, CSS, PHP, MySql dan materi atau artikel lain sekitar web. </p></font> </BODY> </HTML> Simpan dengan nama home.html Buatlah halaman profil <HTML> <HEAD> <TITLE> Halaman Profil </TITLE> </HEAD> <BODY> <font size=4 color="blue"> <b><p>Hypertext Markup Language yang sering disebut HTML merupakan dasar pemrograman dalam membuat website. Sebaiknya sebelum anda menggunakan template, CMS atau fitur-fitur lain untuk membuat sebuah website, saya sarankan anda untuk belajar HTML terlebih dulu.</b></p> Dengan memahami perintah HTML anda dapat memperbaiki template atau CMS atau fitur lain dengan mudah.<b><i>HTML, CSS, PHP dan MySql</i></b>. Seiring dengan perkembangan teknologi,

[email protected]


maka begitu banyak fasilitas yang disediakan untuk mempermudah dalam pembuatan website. <b><u>Web site builder, CMS, Template dan lain-lain merupakan fasilitas untuk mempermudah pembuatan website. </u></b><br> <center><img src="image/img1.jpg"></center> <p>Saat ini P4TK Bisnis dan Pariwisata mulai mencoba untuk membuat diklat jarak jauh yang dapat dijangkau oleh siapapun, dimanapun tanpa dibatasi oleh jarak dan waktu dengan menggunakan fasilitas Open Source yang biasa disebut Open Distance Learning. </BODY> </HTML> Simpan dengan nama profil.html Buat halaman galery <HTML> <HEAD> <TITLE> Halaman Galery </TITLE></head> <body> <pre> <img src="image/me1.jpg" width=250 height=200> <img src="image/me2.jpg" width=250 height=200> <img src="image/me3.gif" width=170 height=200> <img src="image/perform6.gif" width=170 height=200> </pre> </BODY> </HTML> Simpan dengan nama galery.html Buat halaman kontak <HTML> <HEAD> <TITLE> Halaman Galery </TITLE> </HEAD> <BODY> <pre> <font color="purple" size=5> Universitas Pamulang Jl. Surya Kencana No.1 Pamulang-Tangerang Selatan Website : www.unpam.ac.id Email : [email protected] Telp : 021 - 7412566 Fax : 021 - 7412566</font></pre>

[email protected]


</BODY> </HTML>

Simpan dengan nama kontak.html Jalankan file index.html dan pastikan tampilan browser sebagai berikut :

8

[email protected]


BAB X CASCADING STYLE SHEET (CSS)

10.1. Penulisan CSS

Style sheet merupakan fasilitas HTML yang memungkinkan kita untuk

memisahkan style dan layout dokumen HTML sebenarnya. Dengan adanya

kemampuan ini kita tidak perlu menyentuh setiap baris HTML lagi jika ingin

melakukan perubahan layout pada dokumen, kita cukup mengubah definisi style

sheet atau membuat style sheet baru.

CSS merupakan kumpulan dari style yang dikelola secara terpisah dengan demikian

manajemen pages menjadi lebih mudah dan efisien. Aturan penggunaan CSS disusun

oleh tiga bagian yaitu : selector (elemen yang akan didefinisikan), property (atribut yang

akan diubah) dan nilai.

Beberapa attribute style sheet

Font-size

Atribut font-size digunakan untuk menentukan teks dalam satuan poin, inci,

cm, pixel, atau presentase. Nilai-nilai lain yang dapat digunakan adalah xx-

small, x-small, medium, large, x-large, dan xx-large.

Contoh : {font-size: x-large}

Font-family

Atribut ini digunakan untuk menentukan jenis font (typeface) suatu teks,

seperti {font-family: Arial, Sans-Serif}. Sans-Serif akan menggantikan Arial

jika system yang digunakan tidak mendukung Arial. Jika typeface terdiri dari

beberapa kata, tambahkan tanda petik untuk nama typeface.

Seperti {font-family: “Times New Roman”, “Courier New”}

Font-weight

Atribut font-weight menyatakan ketebalan suatu jenis font. Misalnya {font-

weight : medium}. Nilai-nilai yang bisa digunakan adalah bold, light,

bolder, lighter, medium, demi-bold, demi-light, extra-bold, dan extra-light.

Selector {property: value}

[email protected]


Font-style

Atribut ini digunakan untuk menentukan style suatu teks. Beberapa nilai

untuk attribute ini adalah normal (default), italic, dan small-caps.

Contoh : {font-style : italic}

Font

Atribut-atribut font di atas dapat dinyatakan sebagai berikut :

H1 {font-family: arial;

Font-size: 50 px;

Font-weight: bold;

Font-style: italic}

Penulisan ini dapat diganti menjadi :

H1 {font: Arial 50px bold italic}.

Text-align

Atribut ini digunakan untuk mengatur peralatan teks. Nilai-nilai yang tersedia

adalah left, right, center, dan justify. Contoh: {text-align: left}.

• Margin-left, Margin-right, Margin-top, dan Margin-bottom

Satuan margin dinyatakan dalam poin, inci, atau pixel.

Contoh :

{margin-top : 10px;

Margin-right: -5px;

Margin-bottom: 5px;

Margin-left: -5px}

10.2 Menggunakan Style sheet

Terdapat 3 cara untuk menggunakan style pada halaman web, yaitu : linking,

embedding, dan inline.

• Linking

Linking merupakan metode menggunakan style sheet dengan cara membuat

suatu link pada file di mana style tersebut berada. Untuk membuat link ke

suatu style sheet, cukup dilakukan dengan membuat suatu file yang berisi

definisi-definisi style dan kemudian menyimpannya dengan ekstensi file “.css”

serta menghubungkan halaman web ke URL dari file tersebut. Misalnya file

[email protected]


style sheet mempunyai nama “style2.css” sedangkan URL dari file tersebut

berada pada http://www.stylesheet.com/style2.css”, maka pada bagian

<HEAD> perlu menambahkan kode HTML sebagai berikut :

• Embedding

Embedding merupakan metode menggunakan style sheet dengan meletakkan

definisi style sheet di bagian atas dokumen sebelum bagian <BODY>.

Metode ini dilakukan dengan menggunakan pasangan tag <style> … </style>

yang diletakkan di antara bagian <HTML> dan <BODY>

• Inline

Inline merupakan metode menggunakan style sheet dengan memberikan

secara langsung suatu style pada suatu tag atau sekumpulan tag.

Contoh : <H1 STYLE=”color:blue”> Heading 1 </h1>

<LINK REL=STYLESHEET HREF=http://www.stylesheet.com/style2.css TYPE=”text/css”>

<html> <head> <title>Style Sheet</title> <style> < ! – BODY {font-family : Arial; font-size : 10pt, color : black} H1 H2 {font: Arial 16 pt medium, color: red} P {font: Arial; font-style: italic} -- > </style></head> <body> …. </body> </html>

http://www.stylesheet.com/style2.css�

http://www.stylesheet.com/style2.css�

[email protected]


10.3 Menggunakan Atribut CLASS

CLASS dapat digunakan untuk membuat bermacam-macam variasi pada definisi

style dari suatu elemen. Misalnya, paragraf tebal dengan identasi 15pt dan

paragraf miring dengan identasi 45pt, maka definisi style tersebut :

P.tebal {font-family : Arial; font-weight : bold; text-indent : 15pt}

P.miring {font-family : Arial; font-weight : italic; text-indent : 45pt}

Contoh :

Beberapa contoh penggunaan style sheet :

Contoh 1:

P { Text-align: center; Color: blue; Font-family: arial }

<html> <head> <title>STYLE SHEET</title> <style> <! - - p.tebal {font-family : Arial; font-weight : bold; text-indent : 15pt} p.miring {font-family : Arial; font-weight : italic; text-indent : 45pt} - - > </style> </head> <body> <p class=”tebal”>Teks dalam paragraph ini terlihat tebal dengan identasi 15 pt. <p class=”miring”>Teks dalam paragraph ini terlihat tebal dengan identasi 45 pt. </body> </html>

[email protected]


Contoh 2:

Contoh style sheet external:

Simpan dengan nama : style1.css

Latihan 1: <html> <head> <style type="text/css"> body { background-image: url('myflower.gif'); background-repeat:repeat-y; } h1 {text-align:center;} p.date {text-align:right;} p.main {text-align:justify; font-size: 125%; color: red;} </style> </head> <body> <h1>Penggunaan Align pada CSS</h1> <p class="date">Oktober, 2010</p> <p class="main">Ketika saya masih terlalu muda dan masih sangat rentan, ayah saya memberi nasihat "apabila kamu dikritik oleh seseorang ingatlah bahwa semua orang didunia tidak ada yang memiliki kelebihanmu ". In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, just remember that all the people

h1, h2, h3, h4, h5, h6 { Color: green; }

Body {background-color: yellow} H1 {font-size: 36 pt} H2 {color: blue} P {margin-left: 50px}

[email protected]


in this world haven't had the advantages that you've had.'</p> <p><b>Note:</b> Try to resize the browser window to see how justify works.</p> </body> </html> Latihan 2 : Buatlah file CSS dengan perintah seperti dibawah :

body { color: #80c0c0; background: black} a:link { color: #ff8080 } a:visited { color: #ff0000 } a:active { color: #a05050 } a.case1:link { background: green } p:first-line { margin-left: 25px } div.foo:first-line { font-weight: bold; margin-left: 30px } div:first-letter { font-size: x-large; color: #ffffff } ul ul li { font-size: x-large; font-decoration: italic } h2 em { font-weight: 900 } h2.ex1 { color: green; /* This type of heading MUST be Green and Large! */ line-height: 50px; font-size: 40px } .funkyclass { font: 36pt/40pt courier; font-variant: small-caps; border: thick dashed blue } #tagid1 { padding: 20px; border: 20px groove #ffffff } .class1, #tagid2 { font-family: 'comic sans ms', fantasy; color: rgb(100%,100%,0%) } h1, h2, div.class5, blockquote { background: #000080 } p.special { font: 12pt/14pt sans-serif; margin: 5px 0px 2px 25px;

[email protected]


border: medium dashed #ff0000; background: white url(http://www.foo.com/image.gif) repeat-x fixed top right } blockquote { margin-left: 2cm; color: #00ff00 } .part1 { font-size: xx-large; color: #808000 } h5 { font-size: xx-small ! important; color: red ! important } Simpan dengan nama sytle.css Latihan 3 :

Buatlah file dibawah ini dengan menyisipkan file CSS yang dibuat tersendiri

diatas.

<html> <head> <title>Contoh CSS Link</title> <link rel="stylesheet" TYPE="text/css" href="style.css"> </head> <body> <h1 CLASS="funkyclass" ALIGN="center">Welcome to my home page!</h1> Hi there! If you are reading this then you have found my home page! Congratulations! I know it can be hard to find my pages, but I bet that you feel lucky now. Now that you are here, please take a look at my page of links to <a HREF="http://www.mysite.com/coolsites.html">cool sites</a> or sign my <a HREF="http://www.mysite.com/guestbook.html">guest book</a></p> <div CLASS="foo"> My wonderful poetry <br> is available if you are REALLY bored. Why not give it a spin?</div> <h2 CLASS="ex1"> The Best Poetry I <em>NEVER</em> Wrote</h2> <ul> <li>'There Once Was A Man From Nantucket' - <span CLASS="class1">Anonymous</span></li>

[email protected]


<li>'Cool In Fur' - <span CLASS="class1">Harry B. Foot</span></li> <li>And My All Time Fave: <ul> <li> 'A Toast To My Toaster' - <span CLASS="class1">Me!</span></li> </ul> </li></ul> <blockquote>Brought to you by the letter <span ID="tagid2">"H"</span> and <span ID="tagid1">Joe Shmoe</span> </blockquote> <div CLASS="class5"> When you are done looking through these masterpieces, I encourage you to visit my proud sponsor!! </div> <p CLASS="special"><span CLASS="funkyclass">ADVERTISEMENT:</span> Buy Navel Lint Contemplator! Its a browser and its a sandwich spread! Go to our <a HREF="http://www.navellint.com">home page</a> without delay! Why? Because shelf life is only 8 hours unless refrigerated. We know that makes it hard to browse, but it promotes frequent upgrading to the latest and greatest version. </p> <h5>All standard disclaimers apply. Your life depends on NOT copying this document in any way. This tape will <a HREF="http://www.mysite.com/selfdestruct.html" CLASS="case1">self destruct</a> in 10 seconds...</h5> </body> </html> Simpan dengan nama : csslink.html Tampilan browser :

[email protected]


Buatlah halaman web dengan menggunakan CSS yang dibuat tersendiri

[email protected]


BAB XI PENGENALAN JAVA SCRIPT

11.1 Penulisan Java Script

Javascript adalah bahasa yang berbentuk kumpulan skrip yang pada fungsinya

berjalan pada suatu dokumen HTML. Bahasa ini adalah bahasa pemrograman

untuk memberikan kemampuan tambahan terhadap bahasa HTML dengan

mengijinkan pengeksekusian perintah perintah di sisi user, yang artinya di sisi

browser bukan di sisi server web.

Javascript bergantung kepada browser (navigator) yang memanggil halaman web

yang berisi skrip dari Javascript dan tentu saja terselip di dalam dokumen HTML.

Javascript juga tidak memerlukan kompilator atau penterjemah khusus untuk

menjalankannya (pada kenyataannya kompilator Javascript sendiri sudah

termasuk di dalam browser tersebut). Lain halnya dengan bahasa “Java” (dengan

mana JavaScript selalu di bandingkan) yang memerlukan kompilator khusus

untuk menterjemahkannya di sisi user/klien.

Bentuk script dari Java Script : Memberi komentar :

• menulis komentar dalam satu baris kita gunakan karakter dobel slash.

// semua karakter di belakang // tidak akan di

eksekusi

• menulis komentar yang terdiri dari beberapa baris kita gunakan karakter /*

dan */

/* Semua baris antara 2 tanda tersebut tidak akan di

eksekusi oleh kompilator */

<SCRIPT language="Javascript"> letakkan script anda disini </SCRIPT>

[email protected]


Aturan penulisan syntax Java Script :

Penyisipan Java Script dalam Head

<html> <head><title>penulisan dalam head</title> <script type=”teks/javascript”> ------ </script> </head> <body> ---- </body> </html>

Penyisipan Java Script dalam Body

<html> <head><title>penulisan dalam Body</title> </head> <body> <script type=”teks/javascript”> ------ </script> ---- </body> </html>

Penyisipan Java Script dalam Head dan Body

<html> <head><title>penulisan dalam head dan body</title> <script type=”teks/javascript”> ------ </script> </head> <body> <script type=”teks/javascript”> ------ </script> ---- </body> </html>

[email protected]


Penyisipan Java Script dalam bentuk File

<html> <head><title>penulisan dalam bentuk File</title> <script src=”xyz.js”> </head> <body> ---- </body> </html>

11.2 Variabel

Variabel adalah tempat menyimpan data atau informasi yang bersifat sementara di

memory komputer. Variabel yang dideklarasikan dapat di isi dengan nilai apa

saja. Dalam JavaScript pendeklarasian sebuah variabel sifatnya opsional, artinya

anda boleh mendeklarasikan atau tidak hal tersebut tidak menjadi masalah. Jika

anda memberi nilai pada variabel, maka dalam JavaScript dianggap bahwa anda

telah mendeklarasikan variabel tersebut.

Syarat membuat nama variabel :

• Harus diawali dengan karakter (huruf atau garis bawah)

• Tidak boleh menggunakan spasi

• Huruf Kapital dan kecil memiliki arti yang berbeda

• Tidak boleh menggunakan kata-kata yang merupakan reserved word.

Sintaks:

cara 1, dengan pernyataan var

var nama_variabel = nilai

cara 2, tanpa pernyataan var

nama_variabel = nilai

Latihan 1 : <html> <head> </head> <body> <script language="JavaScript" type="text/javascript"> var myFirstVariable; myFirstVariable = "Hello"; alert(myFirstVariable);

[email protected]


myFirstVariable = 54321; alert(myFirstVariable); var string1 = "Hai how a you "; var string2 = "Goodbye"; string2=string1; alert(string2); document.write("Nilai dari string1 = ",string1,"<br>"); document.write("Nilai dari string2 = ",string2,"<br>"); string1 = "Now for something different"; alert(string1); alert(string2); document.write("Hasil string1 setelah diubah ",string1,"<br>"); document.write("Hasil string2 setelah diubah ",string2,"<br>"); </script> </body> </html>

11.3. Tipe Data

Tidak seperti bahasa pemrograman lainnya, JavaScript tidak memiliki tipe data

secara explisit. Hal ini dapat dilihat dari beberapa contoh variabel diatas. Anda

mendeklarasikan variabel tapi tidak menentukan tipenya. Meskipun JavaScript

tidak memiliki tipe data secara explisit. JavaScript mempunyai tipe data implisit.

Terdapat empat macam tipe data implisit yang dimiliki oleh JavaScript yaitu :

• Numerik, seperti : 0454422531, 85000, 57, 9.146789 dan sebagainya

• String, seperti : “How are you”, “Kahitna”, “Jl. Rancamaya Blok 1 No. 7A”,

“Desember” dan sebagainya

• Boolean, bernilai true atau false

• Null, variabel yang tidak diinisilisasi

Tipe Numerik

Pada dasarnya JavaScript hanya mengenal dua macam tipe numerik, yaitu

bilangan bulat (integer) dan bilangan pecahan(real/float). Untuk bilangan bulat

dapat dipresentasikan dengan basis desimal, oktal atau heksadesimal.

[email protected]


Contoh :

var A = 400;

var B = 0x2F;

untuk pendeklarasian tipe bilangan real, dapat menggunakan tanda titik atau notasi

ilmiah (notasi E). Contoh :

var a = 3.14893567;

var b = 1.23456E+5;

Untuk mendeklarasikan tipe string dapat dilakukan dengan cara menuliskan string

diantara tanda petik tunggal (') atau tanda petik ganda (") Contoh :

var str = 'Contoh deklarasi string';

var str1 = "cara ini juga bisa untuk menulis string";

Tipe boolean hanya mempunyai nilai True atau False. Tipe ini biasanya

digunakan untuk mengecek suatu kondisi atau keadaan. Contoh :

var A = (B > 80);

contoh diatas menunjukkan bahwa jika B lebih besar dari 90 maka A akan bernilai True.

Tipe Null digunakan untuk merepresentasikan variabel yang tidak diberi nilai

awal (inisialisasi).

11.4 Jenis Operator

Jenis operator dalam Java Script ada 6 buah :

• Aritmatika

• Pemberian nilai (Assign)

• Pemanipulasian bit (bitwise)

• Pembanding

• Logika

• String

a. Operator Aritmatika

Digunakan untuk operan beripe numerik. Ada dua macam operator aritmatik,

yaitu operator numerik tunggal dan operator aritmatik biner. Perbedaan kedua

operator terletak pada jumlah operan yang harus dioperasikan.

[email protected]


b. Operator Pemberian Nilai

Digunakan untuk memberikan nilai ke suatu operan atau mengubah nilai suatu

operan.

c. Operator Manipulasi Bit

Operasi ini berhubungan dengan pemanipulasian bit pada operan bertipe bilangan

bulat.

Contoh :

var A = 12; // A = 1100b

var B = 10; // B = 1010b

var C = A & B

maka akan dihasilkan bilangan seperti berikut :

1100b

1010b AND

1000b

var A = 12;

var C = A<< 2

var D = A >> 1

maka variabel C akan bernilai 48(0011 0000b)

variabel D akan bernilai 6 (0110b)

d. Operator Pembanding

Digunakan untuk membandingkan dua buah operan. Operan yang dikenal

operator ini dapat bertipe string, numerik, maupun ekspresi lain.

e. Operator Logika

Digunakan untuk mengoperasikan operan yang bertipe boolean.

Contoh :

var A = true;

var B = false;

var C = A && B; //menghasilkan false

var D = A || B ; // true

var E = !A; //false

[email protected]


f. Operator String

Selain operator pembanding, operator string pada JavaScript juga mengenal satu

operator lagi yang bernama PENGGABUNGAN. Operator ini digunakan untuk

menggabungkan beberapa string menjadi sebuah string yang lebih panjang.

Contoh :

nama = ”Java” + ”Script”;

akan menghasilkan ”JavaScript” pada variabel nama.

Latihan 2 :

<html> <body> <script language="JavaScript" type="text/javascript"> // Equation is °C = 5/9 (°F - 32). var degFahren = prompt("Enter the degrees in Fahrenheit",50); var degCent; degCent = 5/9 * (degFahren - 32); alert(degCent); </script> </body> </html> Latihan 3 : <HTML> <HEAD><TITLE>Operasi Aritmatika</TITLE></HEAD> <BODY> <P><SCRIPT language="JavaScript">  </SCRIPT></P>

[email protected]


</BODY> </HTML> Latihan 4 : <html> <body> <script language="JavaScript" type="text/javascript"> var greetingString = "Hello"; var myName = prompt("Please enter your name", ""); var concatString; document.write(greetingString + " " + myName + "<br>"); concatString = greetingString + " " + myName; document.write(concatString); </script> </body> </html> Latihan 5 : <html> <head><title>Convert String to Number</head></title> <body> <script language="JavaScript" type="text/javascript"> var myString = "56.02 degrees centigrade"; var myInt; var myFloat; document.write("\"" + myString + "\" is " + parseInt(myString) + " as an integer" + "<BR>"); myInt = parseInt(myString); document.write("\"" + myString + "\" when converted to an integer equals " + myInt + "<BR>"); myFloat = parseFloat(myString); document.write("\"" + myString + "\" when converted to a floating point number equals " + myFloat); </script> </body> </html>

[email protected]


Latihan 6 : Buatlah kalkulator dengan menggunakan Java Script, minimal tampilan sebagai berikut :

[email protected]


BAB XII STRUKTUR KENDALI DAN FUNGSI

12.1 Struktur Kendali IF

Perintah IF ada tiga macam, yaitu :

• IF dengan satu kondisi

IF (kondisi) { ---------- }

• IF dengan dua kondisi

IF (kondisi) { ----------- } Else { ---------- }

• IF lebih dari dua kondisi

IF (kondisi) { -------- } Elseif (kondisi) { --------- } Else { --------- }

[email protected]


Latihan 1 : <script type="text/javascript">  </script> Latihan 2 : <script type="text/javascript"> //If the time is less than 10, you will get a "Good morning" greeting. //Otherwise you will get a "Good day" greeting. var d = new Date(); var time = d.getHours(); if (time < 10) { document.write("Good morning!"); } else { document.write("Good day!"); } </script> SWITCH ... CASE

switch(n) { case 1: execute code block 1 break; case 2: execute code block 2 break;

[email protected]


default: code to be executed if n is different from case 1 and 2 }

Latihan 3 : <script type="text/javascript"> var d=new Date(); var theDay=d.getDay(); switch (theDay) { case 5: document.write("Finally Friday"); break; case 6: document.write("Super Saturday"); break; case 0: document.write("Sleepy Sunday"); break; default: document.write("I'm looking forward to this weekend!"); } </script> Latihan 4: alert("What I Learned In College...") //Please change the subject ;-) var subject = "Humility" switch (subject) { case "Deep Thoughts" : alert("On Deep thoughts : A day without sunshine is like night."); break; case "Problem Solving" : alert("On Problem Solving : When the only tool you own is a hammer, every problem begins to resemble a nail. - Abraham Maslow") break; case "Materialism" : alert("On Materialism : He who dies with the most toys, is, nonetheless, still dead.") break; case "Infinity" : alert("On Infinity : If you had everything, where would you keep it?")

[email protected]


break; case "Economics" : alert("On Economics : The cost of living hasn't affected its popularity.") break; case "Revisionist History" : alert("On Revisionist History : What was sliced bread the greatest thing since?") break; case "Literature" : alert("On Literature : This is not a novel to be tossed aside lightly. It should be thrown with great force. - Dorothy Parker") break; case "Humility" : alert("On Humility : To err is human, to moo bovine.") break; case "Excuses" : alert("On Excuses : I can't complain, but sometimes I still do. - Joe Walsh") break; case "Numbers" : alert("On Numbers : 2 is not equal to 3 - not even for very large values of 2.") break; default:alert("I learnt nothing in college"); } Latihan 5 : <script type="text/javascript"> var red = 1; var result = null; switch (red) { case 1: result = 'one'; break; case 2: result = 'two'; break; default: result = 'unknown'; } document.write(result); </script>

12.2 LOOP

1. For Loop for(INITIALIZATION ; CONDITION ; NEXT) { code to be executed }

[email protected]


Latihan 6 : <html> <body> <script type="text/javascript"> var i=0; for (i=0;i<=5;i++) { document.write("The number is " + i); document.write("<br />"); } </script> </body> </html> Latihan 7 : <html> <body> <script type="text/javascript"> alert("The Student Mind During A Final Exam"); //Make an array with all the thoughts var thoughts = new Array("The prof. never covered this section!", "Actual knowledge on the subject.", "The T.A.'s kinda cute!", "I knew I should have read the book!", "Soon this will all be behind me!", "I hope the curve is really low!", "PANIC ZONE!", "Prayers for a miracle flood, fire, tornado, hurricane, earthquake...etc...", "Eeny, meeny, miny moe...", "Summer break!"); //Show all the thoughts - one by one... for(i=0;i<10;i++) { alert("Thought #"+(i+1)+" : "+thoughts[i]); } </script> </body> </html>

[email protected]


2. While while(CONDITION) { code to be executed } Latihan 8 : <html> <body> <script type="text/javascript"> var i=0; while (i<=5) { document.write("The number is " + i); document.write("<br />"); i++; } </script> </body> </html>

3. Do .. While do { code to be executed } while (variable<=endvalue); Latihan 9 : <html> <body> <script type="text/javascript"> var i=0; do { document.write("The number is " + i); document.write("<br />"); i++; } while (i<=5); </script> </body> </html>

[email protected]


BAB XIII FUNCTION DAN ARRAY

13.1. FUNCTIONS function functionname(var1,var2,...,varX) { some code } Latihan 1. <SCRIPT language="Javascript">  </SCRIPT> Latihan 2. <html> <head> <script type="text/javascript"> function product(a,b) { return a*b; } </script> </head> <body> <script type="text/javascript"> document.write(product(4,3)); </script> </body> </html>

[email protected]


13.2 Array Array dapat didefinisikan sebagai berikut : var myCars=new Array(); // regular array (add an

optional integer myCars[0]="Saab"; // argument to control array's size) myCars[1]="Volvo"; myCars[2]="BMW";

var myCars=new Array("Saab","Volvo","BMW"); // condensed array

var myCars=["Saab","Volvo","BMW"]; // literal array

Latihan 3. <html> <head><title>Contoh Array</title></head> <body> <script type="text/javascript">  </script> </body> </html> Latihan 4. <html> <body onLoad="window.defaultStatus='selamat belajar java script'"> <script language="JavaScript" type="text/javascript"> function convertToCentigrade(degFahren) { var degCent; degCent = 5/9 * (degFahren - 32); return degCent; }

[email protected]


var degFahren = new Array(212, 32, -459.15); var degCent = new Array(); var loopCounter; for (loopCounter = 0; loopCounter <= 2; loopCounter++) { degCent[loopCounter] = convertToCentigrade(degFahren[loopCounter]); } for (loopCounter = 2; loopCounter >= 0; loopCounter--) { document.write("Value " + loopCounter + " was " + degFahren[loopCounter] + " degrees Fahrenheit"); document.write(" which is " + degCent[loopCounter] + " degrees centigrade<br>"); } </script> </body> </html> Latihan 5 <html> <body> <script type="text/javascript"> var parents = ["Jani", "Tove"]; var children = ["Cecilie", "Lone"]; var family = parents.concat(children); document.write(family); </script> </body> </html> Latihan 6 <html> <body> <script type="text/javascript"> var parents = ["Jani", "Tove"]; var brothers = ["Stale", "Kai Jim", "Borge"]; var children = ["Cecilie", "Lone"]; var family = parents.concat(brothers, children); document.write(family); </script> </body> </html>

[email protected]


BAB IV KOLEKSI CODE JAVA SCRIPT

14.1 Membuat tanggal <HTML> <HEAD> <TITLE> New Document </TITLE> </HEAD> <BODY> <script type="text/javascript"> function makeArray() { for (i = 0; i<makeArray.arguments.length; i++) this[i + 1] = makeArray.arguments[i]; } var months = new makeArray('Januari','Februari','Maret','April','Mei','Juni','Juli','Augustus','September','Oktober','November','Desember'); var date = new Date(); var day = date.getDate(); var month = date.getMonth() + 1; var yy = date.getYear(); var year = (yy < 1000) ? yy + 1900 : yy; document.write(day + " " + months[month] + " " + year); </script> </BODY> </HTML> Tampilan Browser sesuai dengan tanggal dari system yang sedang aktif, misalnya : 25 anuari 2011

14.2 Teks jalan distatus bar <html> <head> <title>teks jalan</title> <script language="VBScript"> <!-- Dim Teks,Pjteks,Ambil1,Ambil2 Teks =" welcome my elearning " & Space(15)

[email protected]


Sub TeksJalan() Pjteks=Len(Teks) Ambil1=Mid(Teks, 2, Pjteks-1) Ambil2=Mid(Teks,1,1) Teks=Ambil1 & Ambil2 Window.Status=Teks Window.SetTimeOut "TeksJalan", 200 End Sub --> </script> </head> <body OnLoad=TeksJalan> </body> </html>

14.3 Animasi Kursor <html> <head> <title>Animasi Kursor</title> <script language="JavaScript"> <!-- var x,y var step=20 var flag=0 var message="my cursor" message=message.split("") var xpos=new Array() for (i=0;i<=message.length-1;i++) { xpos[i]=-50 } var ypos=new Array() for (i=0;i<=message.length-1;i++) { ypos[i]=-50 } function handlerMM(e){ x = (document.layers) ? e.pageX : event.clientX y = (document.layers) ? e.pageY : event.clientY flag=1 }

[email protected]


function textfollow() { if (flag==1 && document.all) { for (i=message.length-1; i>=1; i--) { xpos[i]=xpos[i-1]+step ypos[i]=ypos[i-1] } xpos[0]=x+step ypos[0]=y for (i=0; i<message.length-1; i++) { var thisspan = eval("document.all.span"+(i)+".style") thisspan.posLeft=xpos[i] thisspan.posTop=ypos[i] } } if (flag==1 && document.layers) { for (i=message.length-1; i>=1; i--) { xpos[i]=xpos[i-1]+step ypos[i]=ypos[i-1] } xpos[0]=x+step ypos[0]=y for (i=0; i<message.length-1; i++) { var thisspan = eval("document.span"+i) thisspan.left=xpos[i] thisspan.top=ypos[i] } } var timer=setTimeout("textfollow()",10) } file://--> </script> <STYLE> .spanstyle { position:absolute; visibility:visible; top:-50px; font-size:8pt; font-family:verdana; color:black; font-weight: bold; } a { color:FFFFCC; text-decoration:none } a:hover { color:FFFF99; text-decoration:underline } a:visited { color:FFFF99 } </STYLE> <script language="JavaScript">

[email protected]


 </script> </head> <body onLoad="textfollow()"> Gerakan Mouse ..... </body> </html>

[email protected]


DAFTAR PUSTAKA

1. http://www.w3c.org

2. Sebesta, R.W., Programming the World Wide Web, Addison Wesley, 2002

3. Internet &World Wide Web How to Program, Deitel, Deitel & Nieto

4. http://www.w3schools.com

5. Effendi, Pemrograman Dynamic HTML

6. http://en.wikipedia.org/wiki/World_Wide_Web

MODUL PEMROGRAMAN WEB 1 · PDF fileBAB I PENGENALAN WEB ... BAB II BASIC TAG HTML ... kerja...

Documents

Transcript of MODUL PEMROGRAMAN WEB 1 · PDF fileBAB I PENGENALAN WEB ... BAB II BASIC TAG HTML ... kerja...