Modul HTML

HTML (Hypertext Markup Language)
HTML ( Hypertext Markup Language) merupakan salah satu format yang

digunakan dalam pembuatan dokumen dan aplikasi yang berjalan dihalaman web.
Oleh karena itu agar dapat membuat program aplikasi dihalaman web , anda
terlebih dahulu harus mengenal dan menguasai HTML. Walaupun sekarang telah
banyak paket aplikasi yang dapat digunakan untuk membuat halaman web secara
WYSIWYG ( What You See is What You Get) seperti Frontpage, DreamWeafer,
Netscape Composer dan masih banyak lagi , namun anda tetap harus menguasai
tag-tag HTML, terutama yang dipergunakan untuk membuat aplikasi di Internet
karena mau tidak mau anda akan bekerja dalam mode text editor bilamana hendak
menyisipkan setiap script program dalam script HTML.
DASAR-DASAR HTML
HTTP ( Hyper Text Tranfer Protocol) merupakan protocol yang digunakan
untuk mentransfer data antara web server ke web browser. Protocol ini mentranfer
dokumen-dokumen web yang ditulis atau berformat HTML.
Dikatakan Markup language karena HTML berfungsi untuk memformat
file file dokumen teks biasa untuk bisa ditampilkan pada web browser dengan
bantuan tanda-tanda yang sudah ditentukan . hal tersebut dapat dilakukan dengan
menambahkan elemen atau yang sering disebut dengan tag.
Elemen HTML biasanya berupa tag yang berpasangan dan setiap tag
ditandai dengan symbol < dan > . Pasangan dari sebuah tag ditandai dengan tanda
“/” . misalnya pasangan dari tag <contoh> adalah </contoh>. Dalam hal ini
<contoh> disebut elemen dan biasanya dalam suatu elemen terdapat atribut-atribut
untuk mengatur elemen itu . Jadi misalnya elemen <contoh> bila ditulis dengan
atributnya adalah sebagai berikut <contoh atribut=”nilai_ atribut1”
atribut2=”nilai_atribut2” …>. Dalam penulisan tag HTML tidaklah case sensitive,
artinya penggunaan huruf kecil ataupun besar tidaklah menjadi masalah.
Hal : 1
STRUKTUR DASAR HTML
Sebelum mulai mempelajari tag-tag HTML, akan terlebih dahulu dibahas
aturan penulisan dalam buku ini. Script dituliskan dalam text editor seperti
Notepad, kemudian disimpan denagn ekstensi .htm atau .html. Kemudian untuk
mencobanya dapat langsung dibuka dengan web browser, seperti Internet Explorer
atau Nescape Navigator, cukup dengan perintah File | Open, kemudian browse
nama file dan lokasi dimana file HTML tadi di simpan
Setiap dokumen HTML memiliki struktur dasar atau susunan file sebagai
berikut :
<html>
<head>
<title>berisi teks yang akan muncul pada title
bar browser</title>
</head>
<body>
Berisi tentang text, gambar, atau apapun yang
Ingin
ditampilkan pada halaman web ada pada bagian
Ini.
</body>
</html>
seperti dapat dilihat, struktur file HTML diawali dengan sebuah tag
<html> dan ditutup dengan tag </html>. Didalam tag ini terdapat dua bagian besar,
yaitu yang diapait oleh tag <head>…</head>dan yang diapit oleh tag
<body>…</body>.
Hal : 2
Gambar 1: struktur dasar HTML
Bagian yang diapit oleh tag HEAD merupakan header dari halaman
HTML dan tidak ditampilkan pada window broser. Bagian ini berisisi tag-tag header
seperti <title>…</title> yang berfungsi untuk mengeluarkan judul pada title bar
window web broser dan tag lain, misalnya <meta>.
Bagian kedua, yang diapait oleh tag BODY merupakan bagian yang akan
ditampilkan pada window web browser nantinya. Pada bagian ini anda akan
menuliskan semua jenis informasi yang berupa teks dengan bermacam format maupun
gambar yang natinya ingin anda sampaikan pada pembaca.
KODE WARNA
Sebelum lebih jauh mempelajari tag-tag HTML ada baiknya terlebih
dahulu melihat kode warna yang sering digunakan di penulisan tag-tag HTML.
Pengaturan warna di halaman HTML menggunakan mode kombinasi RGB
(red, green, blue) yang mana setiap warna ditampilkan dalam dua digit nilai
heksadesimal (0,1,2,…,F). Setiap bagian dua digit kode menunjukkan banyaknya
intensitas dari kombinasi warna merah, hijau, dan biru. Sebagai contoh 00 pada dua
digit pertama berarti tidak ada warna merah dalam kombinasi warna, dan seterusnya.
Berikut ini adalah contoh beberapa kode warna:
Hal : 3
Table 1 Tabel warna heksadesimal
Warna Warna
Aqua Navy
Black Olive
Blue Purple
Fuchsia Red
Gray Silver
Green Teal
Lime White
Maroon Yellow
PENGATURAN PROPERTI HALAMAN WEB

Property dokumen diatur melalui atribut-atribut yang terdapat dalam
elemen <body>. Sebagai contoh adalah pengeturan warna latar belakang halaman,
warna teks, warna link dan lain-lain.
Atribut elemen body:
background = lokasi dan nama file (latar belakang image dokumen)
bgcolor = warna (warna latar belakang dokumen, default putih)
text = warna (warna teks dokumen, default biru)
link = warna (warna (warna link dokumen, default biru)
vlink = warna (warna visited link dokumen, default ungu)
alink = warna (warna active link dokumen, default merah)
latihan berikut ini untuk mencoba tag body dan heading. Salin script
berikut ini dengan text editor lalu disimpan di direktori anda dengan ekstensi .htm
atau .html, misalnya html_01.html. setelah itu coba akses dengan web browser,
dengan memanggil alamat dan nama filenya.
Hal : 4
<html>
<head>
<title>body dan heading</title>
</head>
<body bgcolor=white text=black>
<h1>Heading Tingkat 1</hl>
<h2>Heading Tingkat 2</h1>
<h3>Heading Tingkat 4</h3>
</body>
</html>
Gambar 2: Penggunaan elemen body dan heading
HEADING, PARAGRAPH DAN BREAK

Tag heading <hx> digunakan untuk menformat heading (judul dan sub-judul)
dari suatu halaman web. Heading ini akan memperbesar ukuran huruf untuk setiap
jenis heading . Ada enam buah heading yang dikenal di HTML, yaitu dari <h1>
sampai <h6>.
Tag paragraph <p> berfungsi layaknya untuk pengaturan antar paragraph
dalam halaman web anda. Dalam elemen paragraph terdapat atribut : align = [ left |
center | right ] yang berfungsi sebagai pengatur perataan paragraph;jadi Anda cukup
memilih salah satu dari ketiga pilihan tanpa harus memberi kurung buka dan tutup,
dan default-nya adalah left. Anda dapat memilih perataan kiri, tengah atau kanan.
Hal : 5
Tag Break <br> berfungsi untuk memberikan baris baru suatu paragraph
dalam halaman web anda. Tag break tidak memerlukan tag penutup break.
Tag Horisontal Ruler <hr> berfungsi untuk menampilkan garis horizontal tiga
dimensi di dalam halamn web anda. Tag horizontal ruler juga tidak memerlukan
elemen penutup</hr>.
Atribut elemen horizontal rules:
Align = [left | center | right ] (perataan horizontal, default center)
Size = pixel (tebal garis, default 2)
Width = panjang (lebar garis, pixel atau persen, default 100%)
Noshade = garis solid tanpa efek 3D
Salin script HTML berikut untuk mencoba tag heading, paragraph dan
horizontal rules. Jangan lupa untuk menyimpannya dengan ekstensi .html di direktori
anda. Setelah itu coba di web browser. Silahkan untuk mencoba mengubah-ubah
atribut tiap tag dan nilainya. Setelah itu refresh web browser anda untuk melihat
perubahan yang terjadi.
<html>
<head>
<title>paragrap, break dan hr</title>
</head>
<body bgcolor= white text= Black>
<h1>TOKO BUKU SERBA ADA</h1>
<hr width=50% align=left>
<h2>Toko kami menyediakan</h2>
<h3>Alat Tulis</h3>
<p>pensil<br>ballpoint<br>penggaris<br>dll.</p>
<h3>Buku-Buku Pelajaran</h3>
<p>ilmu pasti<br>ilmu bumi<br>sejarah<br>dll.</p
<h3>Alat Kantor</h3>
<p>meja<br>kursi<br>file manager<br>dll.</p>
</body>
</html>
Hal : 6
Gambar 3: penggunaan elemen paragraph, break dan horizontal rules
PEMFORMATAN KARAKTER
Karater pada halaman HTML dapat anda format sesuai desain yang anda
tentukan, baik ukuran, jenis maupun warna, dengan menggunakan tag <font>.
Atribut elemen font:
Size = angka (ukuran huruf, default 3)
Color = warna (warna huruf, default black)
Face = jenis huruf (jenis huruf, default Times New Roman)
Elemen ragam karakter:
<b>teks disini</b> menghasikan huruf tebal
<i>teks disini</I> menghasilkan huruf miring
<u>teks disini</u> menghasilkan huruf bergaris bawah
salin script HTML berikut untuk mencoba tag font dan tag ragam karakter.
Jangan lupa untuk menyimpannya dengan ekstensi .html. Setelah ini cobalah di
web browser.
<html>
<head>
<title>format karakter</title>
</head>
<body bgcolor= #FFFFFF text= #000000>
Hal : 7
<hl align=center>
<font color= yellow face=Arial>
TOKO BUKU SERBA ADA</font>
</hl>
<hr width=360 align=center>
<h2>Toko Kami menyediakan</h2>
<h3><font color=red>Alat Tulis</font></h3>
<p align=center>
pensil<br>ballpoint<br>penggaris<br>dll.</p>
<h3><font color=red>Buku-buku Pelajaran</font></h3>
<p align=right>
ilmu pasti<br>ilmu bumi<br>sejarah<br>dll.</p>
<h3><font color=red>Alat Kantor</font></h3>
<p align=left>meja<br>kursi<br>file manager<br>dll.</p>
</body>
</html>
Gambar 4: Penggunaan elemen font
Hal : 8
Listing
Property <li> digunakan untuk menampilkan informasi dalam bentuk daftar (list).
Ada dua kenis daftar yang dikenal di HTML, yaitu daftar dalam format bullet
(unordered list <ul>) dan dalam bentuk nomor (ordered list <ol>.
Atribut elemen list
Ordered list
type = [l | a | A | i | I ] (tipe penomoran, default 1)
unordered list
type = [disc | square | circle ] (tipe bullet, default disc)
Salin script HTML berikut untuk mencoba tag listing baik yang ordered
maupun yang unordered. Jangan lupa untuk menyimpannya dengan ekstensi .html
Setelah itu cobalah di web browser
<html>
<head>
<title>listing</title>
</head>
<body bgcolor= white>
<hl>CAFÉ SERBA UENAK</HL>
<hr width=50 % align=left>
Café kami menyediakan
<h2>Makanan</h2>
<ol>
<li>Ayam Bakar
<li>Ayanm Goreng
<li>Ayam Kuk-Kuk
<li>dll.
</ol>
<h2>Minuman </h2>
<ol type=A>
<li>Serba Jus
<ul>
<li>Jus Tomat
<li>Jus Alpukat
<li>Jus Durian
Hal : 9
</ul>
<li>Minuman Panas
<li>Kopi
<li>dll.
</ol>
<h2>Shake</h2>
<ol type=i>
<li>Milk Shake
<li>Coffe Shake
<ul type=square>
<li>Ice Cream Strabery
<li>Ice Cream Coklat
<li>Ice Cream Vanilla
</ul>
<li>Makanan Ringan
<li>dll.
</ol>
</body>
</html>
Gambar 5:penggunaan elemen Listing
Hal : 10
MENEMPELKAN IMAGE
Anda dapat menampilkan gambar dalam halaman HTML dengan format
file JPG atau GIF. Untuk menampilkannya gunakan tag IMG.
<IMG SRC=namafilegambar>
atribut elemen image
src = lokasi dan nama gambar
alt = teks(teks alternatif)
width = pixel (lebar gambar)
height = pixel (tinggi gambar)
align = [top | middle | bottom | left | right ] )perataan gambar)
border = pixel (tebal garis tepi gambar
salin script HTML berikut untuk mencoba tag img. Jangan lupa untuk
menyimpannya dengan ekstensi .html di webpages Xitami dan file gambar berada
sesuai yang dideklarasikan dalam atribut src. Setelah itu cobalah di web browser.
<html>
<head>
<title>tampail gambar</title>
</head>
<body>
<h3>coba menampilkan gambar</h3>
<img src=’gambar.jpg’>
</body>
</html>
Gambar 6: Penggunaan elemen img untuk menampilkan gambar
Hal : 11
MEMBUAT LINK
Elemen link berfungsi sebgai penghubung antara suatu halaman dengan
halaman lain, atau ke URL lain, bahkan dalam satu halama untuk berpindah ke
sub judul yang lain. Format tag link adalah sebagai berikut:
<a href = URL_tujuan>hypertext</A>
URL_tujuan bernilai lokasi dan nama file yang akan dituju, sedangkan
hypertext nilainya akan ditampilkan di browser sebagai text link atau tombol
penghubung.
Salin script HTML berikut untuk mencoba membuat link. Jangan lupa
untuk menyimpannya dengan ekstensi .html, beri nama html_01.html . Setelah
itu cobalah di web browser.
<html>
<head>
<title>link I</title>
</head>
<body>
<h3>berikut ini contoh link ke file html_02.html</h3>
<a href=’html_02.html’>coba klik disini</a>
</body>
</html>
Juga salin script HTML berikut sebgai halaman tujuan file sebelumnya
dengan nama html_02.html.
<html>
<head>
<title>link 2</title>
</head>
<body>
<h3>ini halaman file html_02.html</h3>
<a href=’html_01.html’>
kembali ke halaman sebelumnya</a>
</body>
</html>
Hal : 12
Gambar 7: Halaman yg berisi Link
gambar 8 Halaman tujuan setelah Link di klik
MEMBUAT TABEL
Tabel merupakan cara untuk menampilkan informasi dalam bentuk sel
yang terdiri dari baris dan kolom. Untuk menampilkan data dalam bentuk table
pada HTML di gunakan tag <Table>……….</table>. Elemen table berisi
property <tr>…….</tr> untuk menentukan baris atau pindah ke baris baru (Table
Hal : 13
Rows) yang didalamnya terdapat property <td>……..</td> untuk menampilkan
data dalam setiap sel table /kolom table.
Struktur elemen table adalah sbb
<table>
<tr>
<td> Data Baris 1 kolom 1</td>
<td> Data baris 1 kolom 2 </td>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
Gambar 9 struktur dasar elemen tabel
Hal : 14
Atribut elemen table
width = panjang (lebar table,pixel atau persen)
height = panjang (tinggi table, pixel atau persen)
border = pixel (tebal garis tepi)
cellspacing = pixel (spasi antar sel)
cellpadding = pixel (spasi di dalam sel)
align = [ left | center | right ] (perataan table)
bgcolor = warna (warna latar belakang table)
Atribut table row:

align = [left|center|right] (perataan sebaris sel secara horizontal)
valign = [top|middle|bottom] (perataan sebaris sel secara vertical)
bgcolor = warna (latar belakang baris)
Atribut table data

rowspan = angka (baris yang di-span oleh sel)
colspan = angka (kolom yang di-span oleh sel)
align = [ left | center |right] (perataan horizontal)
valign = [ top | middle |bottom ] (perataan vertical)
width = pixel (lebar sel, pixel atau persen)
height = pixel (tinggi sel, pixel atau persen)
bgcolor = warna (warna latar belakang sel)
Salin script HTML berikut untuk mencoba tag table berikut properti kolom
dan barisnya. Jangan lupa menyimpannya dengan ekstensi .html. Setelah itu
cobalah di web brower.
<html>
<head>
<title>table</title>
</head>
<body>
berikut contoh table dengan roespan dan colspan
<table width=80 % border=2 cellspacing=0 cellpadding=0>
<tr>
Hal : 15
<td>baris l kolom 1</td>
<td>baris i kolom 2</td>
</tr>
<tr>
<td rowspan=2>baris 3 kolom 1</td>
<td>baris 3 kolom 2</td>
</tr>
<tr>
<td>baris 4 kolom 2</td>
</tr>
</table>
</body>
</html>
Gambar 10: penggunaan elemen table
Hal : 16
MEMBUAT FORM
Form HTML merupakan tag yang palaing penting, dalam pemprograman
internet khususnya dalam pembuatan aplikasi berbasis web. Form menyediakan
property masukan yang dapat berupa text box, check box, radio button, dan
button.
Untuk mendeklarasikan sebuah form digunakan tag <form> … </form>.
Di dalam tag ini didefinisikan elemen-elemen form seperti yang telah disebutkan
di atas. Selain tag, elemen form juga dapat menuliskan sembarang teks, tag,
maupun image.
Atribut elemen form :

action = lokasi dan nama file (file yang menangani form)
method = [ get | post ] (metoda HTTP untuk men-submit form)
Properti Masukan pada Elemen Form
1. Text Box <input type=”text”>
Digunakan untuk memasukkan input yang berupa text
size = ukuran dari textbox dalam karakter, default 20
maxsize = maksimal banyaknya karakter yang dapat diterima
name = nama dari variable yang dikirim ke suatu aplikasi
value = akan menampilkan isinya sebgai nilai default
2. Password <input type=”password”>
Digunkan untuk memasukkan password
size = ukuran dari textbox dalam karakter, default 20
maxsize = maksimal banyaknya karakter yang dapat di terima
name = nama dari variable yang dikirim ke suatu aplikasi
3. Hidden <input type=”hidden”>
Digunakan untuk mengirim data ke suatu aplikasi yang tidak diinginkan
untuk dilihat oleh browser
Name = nama dari variabel yang di kirim ke suatu alpilkasi
value = nilaidari variabel
4. Check Box <input type=”checkbox”>
Check box digunakan untuk dapat memilih lebih dari satu pilihan.
name = nama dari variabel yang dikirim ke suatu aplikasi
value = nilai dari variabel
Hal : 17
checked (checkbox yang sudah di tandai)
5. Radio Button<input type=”radio”>
radio button digunkan agar dapat memilih hanya salah satu pilihan
value = nilai dari variabel
checked (radio button yang sudah di tandai)
6. Push Button<input type=”button”>
Elemen ini biasanya digunkan dengan Javascript atau VBScript untuk
menghasilkan suatu aksi
value = label texs di atas tombol
7. Submit<input type=”submit”>
Setiap elemen form membutuhkan tombol submit untuk mengirimkan
nama dan nilainya ke suatu aplikasi yang ditentukan dalam atribut
ACTION dalam elemen FORM
name = nama dari variabel yang di kirim ke sutu aplikasi
value = label teks di atas tombol
8. Image Submit Button<input type=”image”src=”url”>
Digunakan untuk menggantikan tombol standar submit dengan image
name = nama dari variabel yang di kirim ke suatu aplikasi
9. Reset<input type=”reset”>
Digunakan untuk mereset semua masukan dalam form
value = teks label on the button
10. Text Area<textarea>…</textarea>
Elemen untuk memasukkan teks secara leluasa seperti Notepad
rows = panjang baris dalam karakter
cols = tinggi dalam karakter
11. Select<select>…</select>
Daftar isi dalam property selest menggunkan tag<option>
size = jumlah pilihan yang dapat di terima
Hal : 18
Salin script HTML berikut untuk mencoba tag form berikut property-
properti masukannya. Jangan lupa untuk menyimpannya dengan
ekstensi .html di direktori anda . Setelah itu cobalah di web browser.
<html>
<head><title>form</title></head>
<body>
<form action= # method=get>
<p>Nama : <input type=text name=nama>
<p>Alamat : <input type=text name=alamat>
<p> Jenis Kelamin :
<input type=radio name=sex Value=man>laki-laki
<input type=radio name= sex Value=woman>perempuan
<p>Pekerjaan :
<select name=pekerjaan>
<option value=pelajar
<option value=peg_negeri>pegawai negeri
<option value=peg_swasta>pegawai swasta
<option value=Wiraswasta>Wiraswasta
</select>
<p>Hobby :
<input type=checkbox name=hobby value=olahraga>olahraga
<input type=checkbox name hobby value=membaca>membaca
<p>
<input type=submit value=kirim data>
<input type=reset value=ulangi>
</form>
</body>
<html>
Hal : 19
Gambar 11 : Penggunaan elemen form berikut property masukannya
MEMBUAT FRAME
Frame atau bingkai berguna untuk membagi halaman web menjadi sejumlah bagian
( window). Pembuatan frame pertama-tama dapat dilakukan secara baris (row) atau
secara kolom(col). Setiap frame terbentuk dapat diisi dengan dokumen html atau
dibuat frame baru ( sub frame0, satu hal yang perlu dipahami pada pembuatan frame
adalah tidak diperlukannya tag <body>
frame dibuat dengan dua buah perintah dasar
Tag <frameset cols=…> dan <frameset rows=…> adalah perintah untuk menentukan
bentuk frame. Frame dapat dibentuk dengan dua cara secara kolom atau secara baris ,
tag penutupnya adalah </frameset>
Tag <frame src> perintah untuk menentukan dokumen sumber (source) pengisi
bagian frame. Tag <frame src> adalah tag tunggal (tidak memiliki tag penutup)
Contoh:
<html>
<frameset cols=40%,*>
<frame src=a.html>
<frame src=b.html>
</frameset>
</html
Penjelasan: bagian frame yang memiliki lebar 40% diisi dengan file a.htm,
sedangkan bagian kedua yang memiliki lebar 60% diisi dengan file b.htm
Hal : 20
CASCADING STYLE SHEET (CSS)
Pada halaman web terdapat sejumlah elemen HTML yang dapat dikendalikan dengan
script CSS. Di dalam pengaturannya , style biasanya disimpan dalam sebuah file
dengan ektensi. Css atau embedded pada tag HTML. CSS merupakan sebuah perintah
yang mampu berjalan diantara tag HTML , sehingga versi HTML berpengaruh
terhadap objek yang dihasilkan oleh CSS itu sendiri.
Kegunaan dari CSS adalah untuk menciptakan sebuah formay template agar
dipalikasikan pada setiap halaman web dengan cara mudah dan dinamis. Dengan
demikian dapat menghemat pekerjaan pengaturan halaman web
<html>
<head>
<title> CSS</title>
<style type =”text/css”>
H1 {font-family:verdana}
</style>
</head>
<body>
<h1> Diploma IV Komputerisasi Akuntansi</h1>
</body>
</html>
PEMBUATAN CSS
Terdapat tiga teknik pembuatan dokumen CSS, yaitu
1. External Style Sheet
CSS ini di buat dengan menuliskan seluruh script sebagai external file .
pemanggilan dilakukan dengan tag
<link rel =”stylesheet” type=”text/css” href=”file_css.css”>
Penjelasan
<link> adalah tag pembuka untuk pemanggilan dokumen CSS
Rel menjelaskan bahwa halaman akan dikenai efek style sheet
Type menjelaskan bahwa file yang digunakan adalah file CSS
Href digunakan untuk menuliskan alamat dan nama file yang akan dipanggil
Hal : 21
Ketik dokumen berikut simpan dengan nama body.css
Body
{color:black;
Background:lightblue;
Font-family:arial
}
Script diatas akan memberi efek warna teks hitam, warna latara belakang biru
muda dan jenis hurufnya arial. Untuk body css dapat dijelaskan dengan contoh
sbb dan simpan dengan nama dua.css:
<html>
<head><title>Ekternal CSS</title>
<link rel=”stylesheet “ type =”text/css” href=”body.css”>
</head>
<body>
</body>
</html>
2. Internal Style Sheet

Internal style sheet dikenal dengan istilah Embedding style sheet , dimana
perintah css diletakan bercampur dengan tag HTML. Contoh internal style
sheet adalah seperti pada dokumen satu.html
3. Inline Style Sheet

Adalah metode penulisan CSS yang langsung menempel pada HTML , tag
seperti pada contoh berikut dan simpan dengan nama tiga.html
<html>
<head> <title> Inline CSS </title> </head>
<body>
<body style=”color:red;background:green;font-family:arial;”>
</body>
</html>
Hal : 22
JAVA SCRIPT
Java script adalah bahasa script yang pertama kali dikembangkan oleh Netscape untuk
membuat dokumen web yang dinamis. Scriptnya sederhana dan memiliki kemiripan
dengan bahasa C . keistimewaannya adalah dapat ditambahkan pada dokumen HTML
sehingga dokumen menjadi lebih interaktif.
Java script berbeda dengan bahasa pemprograman Java walaupun keduanya memiliki
banyak persamaan. Java script menyerupai Java tetapi tidak memiliki penulisan yang
statis dan control yang kuat. Java script mendukung fungsi-fungsi tanpa tanpa
deklarasi khusus sedangkan Java adalah bahasa yang didesain untuk pemprograman
berorientasi objek dengan eksekusi yang cepat dan bertipe aman
Untuk memulai neggunakan java script , beberapa hal yang perlu diperhatikan oleh
perancang web adalah
 Perancang harus mengetahui bagaimana menggunakan HTML dan mengedit
dokumen HTML
 Perancang harus menggunakan browser yang mendukung pemprograman Java
script misalnya Netscape, IE versi 4 ke atas
 Telah menguasai salah satu bahasa pemprograman
Elemen Utama Javascript

Seperti bahasa pemprograman lain , java script juga terdiri dari sejumlah elemen
seperti variable, operator, statement fungsi dan method
Berikut elemen utama dari Javascript grammar
ELEMEN KETERANGAN
Variable 1. Label yang digunakan untuk menyimpan suatu nilai dan
nilainya dapat berubah-ubah
2. Ketentuan variable
o Boleh gabungan huruf dan angka , tetapi karakter
pertama harus huruf. Contoh x1(benar) sedangkan 1x
(salah
o Tidak b oleh mengandung spasi
o Tidak boleh menggunakan reserved word javascript
misal : var andsar=0
o Tidak boleh menggunakan symbol khusus , misalnya
Hal : 23
Total-bayar (salah) yang benar Total_bayar
o Case Sensitive atau huruf besar dan huruf kecil
berbeda . A berbeda dengan a
3. Memberi nilai variabel
Var tinggi=19,11;
Var nama = “ Nicky Caesar”
Operator Operator aritmatika
Operator Diskripsi Contoh Hasil
+ Addition x=2 4
X+2
- Subtraction X=2 3
5-x
* Multiplication X=4 20
X*5
/ Division 15/5 3
5/2 2.5
% Modulus (Division 5%2 1
remainder) 10%8 2
10%2 0
++ Increment X=5 X=6
X++
-- Decrement X=5 X=4
x--
Operator penugasan
Operator Contoh Sama dengan
= X=y X=y
+= X+=y X=x+y
-= x-=y X=x-y
*= X*=y X=x*y
/= x/=y X=x/y
Operator Pembanding
Operator Diskripsi Contoh
== Is equal to 5= =8 return false
!= Is not equal 5! =8 return true
> Is greater than 5>8 return false
< Is less than 5<8 return true
>= Is greater than or equal 5>=8 return false
to
<= Is less than or equal to 5<=8 return true
Operator Logika
Operator Diskripsi Contoh
Hal : 24
&& And X=6;y=3
(x<10 && y>1) return true
|| Or X=6;y=3
(x==5 || y==5) return false
! Not X=6;y=3
!(x==y) return true
Ekspresi Kombinasi dari sejumlah variabel , operator dan statemen yang
mengevaluasi beberapa hasil
Contoh:
Total=50;
If (total>0)
Statement Satu kalimat sempurna dari sejumlah elemen grammar. Setiap

statement harus diakhiri dengan semicolon
Contoh
If(a>b) {statement 1;} else {statement2;l}
Fungsi dan  Deklarasi fungsi

method Function myfunction()
{
statement
}
 Pemanggilan fungsi
Myfunction(argumen1, argument2, etc)
 Membuat objek
Nama_objek.nama_method()
Letak Javascript pada dokumen HTML

Bagaimana sebaiknya menempatkan javascript pada suatu halaman web?.
 Script diletakkan pada bagian <body>
Script secara otomatis akan dieksekusi saat halaman web dibuka
Contoh:
<body>
<script type=”text/javascript”>
statemen
</script>
</body>
 Script diletakkan pada bagian <head>
Hal : 25
Script akan dieksekusi ketika dipanggil
<html>
<head>
statemen
</script>
</head>
<body>
</body>
</html>
 Script diletakkan pada bagian eksternal file

Script dijalankan ketika sebuah event terjadi
<body>
<script src=”contoh.js”>
</script>
</body>
contoh.js
<body>
document.write(“this message is written when the page load”)
</script>
</body>
contoh
ketik script berikut dan simpan dengan nama java1.html
<html>
<Head><title>Java script sederhana</title></head>
<body>
var nama = “Nicky”
document.write(nama)
document.write(“<h1>”+nama+”</h1>”)
Hal : 26
</script>
<p>ini adalah contoh bagaimana mendeklarasikan variabel , memberi
nilai dan menampilkannya</p>
<p>kemudian variabel tersebut ditampilkan sekali lagi sebagai
heading</p>
</body>
</html>
Daftar Pustaka
 Sampurna, Belajar Sendiri Membuat Home Page dengan HTML, PT. Elex
Media Komputindo, Jakarta, 1998.
Hal : 27
 Purwanto, Yudhi, Pemprograman Web, PT. Elex Media Komputindo, Jakarta,
2001.
 Sunarfrihantono, Bimo, PHP dan MySql Untuk Web, Andi Offset,
Yogyakarta, 2003
Hal : 28

Modul HTML

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Modul HTML

Diunggah oleh

Hak Cipta:

Format Tersedia

HTML (Hypertext Markup Language)

HTML ( Hypertext Markup Language) merupakan salah satu format yang

PENGATURAN PROPERTI HALAMAN WEB

Gambar 2: Penggunaan elemen body dan heading

HEADING, PARAGRAPH DAN BREAK

Gambar 4: Penggunaan elemen font

Gambar 5:penggunaan elemen Listing

Gambar 6: Penggunaan elemen img untuk menampilkan gambar

gambar 8 Halaman tujuan setelah Link di klik

Gambar 9 struktur dasar elemen tabel

Atribut table row:

Atribut table data

Gambar 10: penggunaan elemen table

Atribut elemen form :

2. Internal Style Sheet

3. Inline Style Sheet

Elemen Utama Javascript

Statement Satu kalimat sempurna dari sejumlah elemen grammar. Setiap

Fungsi dan  Deklarasi fungsi

Letak Javascript pada dokumen HTML

 Script diletakkan pada bagian <head>

 Script diletakkan pada bagian eksternal file

Anda mungkin juga menyukai