Tim RPL - SMKTakhassus Al-Qur`an Wonosobo BAB II FORMAT
advertisement
BAB II
FORMAT TEKS HALAMAN WEB
Tujuan Pembelajaran
Setelah mengikuti kegiatan belajar ini Peserta Didik diharapkan dapat :
1) Memahami Dasar-dasar HTML
2) Memahami Properti Dokumen Web
3) Menyajikan teks dalam format tertentu pada halaman dokumen web
4) Memformat teks pada halaman dokumen web
Format teks halaman web digunakan untuk memanipulasi dokumen html. Misalnya untuk
mengatur paragraf, ganti baris, dan lain-lain. Format teks pada halaman web antara lain:
1. Heading
Tag Heading adalah tag yang digunakan untuk membuat judul dari isi sebuah dokumen html.
Tag heading mempunyai 6 nilai yaitu <h1> sampai dengan <h6>. Semakin tinggi nilainya akan
semakin kecil ukuran judulnya. Sama dengan kebanyakan tag lainnya, tag heading juga harus
ditutup, disesuaikan dengan tag pembukanya. Keistimewaan dari tag heading yaitu tag heading
akan membuat baris baru sebelum dan setelah judul dibuat serta judul yang dibuat akan secara
otomatis menjadi tebal.
Atribut yang ada di tag heading:
Attribute
Nilai/Value
Description
align
left
Mengatur perataan pada heading
center
right
justify
Contoh:
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3 align=”left”>This is heading 3</h3>
<h4 align=”center”>This is heading 4</h4>
<h5 align=”right”>This is heading 5</h5>
<h6 align=”justify”>This is heading 6</h6>
Hasilnya:
Latihan 2.1:
Ketikkan kode berikut dan simpan dengan nama teks1.html
<html>
<head>
<title>membuat judul dokumen</title>
</head>
<body>
<h1 align="left">Judul Dokumen berada di kiri</h1>
<h3 align="center">Judul Dokumen berada di Tengah</h3>
<h5 align="right">Judul Dokumen berada di kanan</h5>
</body>
</html>
Tim RPL - SMKTakhassus Al-Qur’an Wonosobo
1
Tugas 1:
Catatlah kode program pada lembar kerja untuk membuat tampilan berikut ini:
2. Paragraf
Tag paragraf adalah tag yang digunakan untuk membuat paragraf dari sebuah dokumen html.
Keistimewaan dari tag paragraf yaitu tag paragraf akan menambahkan baris baru sebelum dan
setelah elemen <p>. Cara penulisan tag paragraf adalah sebagai berikut:
<p [atribut/properti]>.........</p>
Atribut yang ada di tag paragraf:
Attribute
Nilai/Value
Description
Align
Left
Mengatur perataan pada paragraf
center
right
justify
Contoh:
<p>Tulisan ini secara otomatis akan rata kiri</p>
<p align=”left”> Tulisan ini juga akan rata kiri </p>
<p align=”center”> Tulisan ini akan rata tengah</p>
<p align=”right”> Tulisan ini rata kanan</p>
<p align=”justify”> Tulisan ini akan rata kiri kanan (justiy) dan akan
terlihat perbedaannya jika menuliskan tulisan yang panjang</p>
Hasilnya:
Latihan 2.2:
Ketikkan kode berikut dan simpan dengan nama teks2.html
<html>
<head>
<title>mengatur paragraf dalam html<P></title>
</head>
Tim RPL - SMKTakhassus Al-Qur’an Wonosobo
2
<body>
<p align="left">Teks ini berada di kiri</p>
<p align="center">Teks ini berada di tengah</p>
<p align="right">Teks ini berada di kanan</p>
<p align="justify">Paragraph ini bertipe justify. Dimana semua
teks akan
dibuat lurus sama dengan batas tepi halaman. Oh ya, tag &lt;p&gt;&lt;/p&gt;
merupakan default atau bentuk baku tag &lt;p&gt;&lt;/p&gt; dimana teks atau
paragraf akan berformat rata kiri. Jika anda tidak memberi atribut align pada
tag &lt;p&gt; maka browser akan menganggap rata kiri.</p>
</body>
</html>
Tugas 2:
Catatlah kode program pada lembar kerja untuk membuat tampilan berikut ini:
3. Font
Tag Font adalah tag yang digunakan untuk mengatur bentuk dan tampilan suatu huruf dalam
dokumen html. Sintaknya adalah sebagai berikut:
<font [atribut/properti]>.........</font>
Atribut yang ada di tag font:
Attribute
Nilai/Value
Description
Face
Nama font
Digunakan untuk mengubah bentuk dan nama huruf
Size
Angka
Digunakan untuk mengatur ukuran huruf
Color
Colour
Digunakan untuk memberi warna huruf
Contoh:
<font
<font
<font
<font
face="Monotype Corsiva">Belajar HTML</font><br>
size="5">Masih ingat materi sebelumnya?</font><br>
color="red">Jangan malas belajar</font><br>
face="Arial" size="4" color="#0000ff">pemrograman web</font>
Hasilnya:
Latihan 2.3:
Ketikkan kode berikut dan simpan dengan nama teks3.html
<html>
<head>
<title>font dalam html</title>
Tim RPL - SMKTakhassus Al-Qur’an Wonosobo
3
</head>
<body>
<h2><font size="3" color="00FF00">Judul dengan warna hijau</font></h2>
<font face="Monotype Corsiva">Teks ini menggunakan font Monotype
Corsiva</font>
<p align="center"><font color="red">Teks ini berada di tengah dan
menggunakan warna merah</font></p>
<p align="justify">Paragraph ini bertipe justify. Dimana semua
teks akan
dibuat lurus sama dengan batas tepi halaman. Oh ya, tag &lt;p&gt;&lt;/p&gt;
merupakan default atau bentuk baku tag &lt;p&gt;&lt;/p&gt; dimana teks atau
paragraf akan berformat rata kiri. Jika anda tidak memberi atribut align pada
tag &lt;p&gt; maka browser akan menganggap rata kiri.</p>
</body>
</html>
Tugas 3:
Catatlah kode program pada lembar kerja untuk membuat tampilan berikut ini:
4. Marquee
Marquee adalah sebuah teks yang berjalan pada dokumen html. Sintaknya adalah sebagai
berikut:
<marquee [atribut/properti]>.....tulisan/teks....</marquee>
Atribut yang ada di tag marquee:
Attribute
Nilai/Value
Description
Behavior
Slide
Cara atau teknik dari marquee dalam menjalankan teks.
Scroll
Alternate
Direction
Top
Arah teks berjalan
Left
Right
Bottom
BgColor
Colour
Digunakan untuk memberi warna latar dari marquee
Height
% atau px
Tinggi dari marquee.
Width
% atau px
Lebar dari marquee.
Contoh:
<html>
<head>
<title>Penggunaan teks berjalan</title>
</head>
<body>
<p><marquee bgcolor=”#C0C0C0”>Teks ini menggunakan marquee</marquee></p>
<p><marquee behavior=”slide” direction=”left”>penggunaan marquee dengan
arah dari kanan ke kiri</marquee></p>
<p><marquee behavior=”alternate” direction=”right”>marquee dengan behavior
alternate</marquee></p>
Tim RPL - SMKTakhassus Al-Qur’an Wonosobo
4
</body>
</html>
5. Cetak Tebal / Bold
Sintaknya adalah sebagai berikut:
<b>..... teks....</b>
Contoh:
<html>
<head>
<title>Cetak tebal</title>
</head>
<body>
<b>Tulisan ini akan tercetak tebal</b>
</body>
</html>
Hasilnya:
6. Cetak Miring / Italic
Sintaknya adalah sebagai berikut:
<i>..... teks....</i>
Contoh:
<html>
<head>
<title>Cetak miring</title>
</head>
<body>
<i>Tulisan ini akan tercetak miring</i>
</body>
</html>
Hasilnya:
7. Cetak Garis Bawah / Underline
Sintaknya adalah sebagai berikut:
<u>..... teks....</u>
Contoh:
<html>
<head>
<title>Garis bawah</title>
</head>
<body>
<u>Tulisan ini akan bergaris bawah</u>
</body>
</html>
Hasilnya:
8. Mencoret Teks / Strikethrough
Sintaknya adalah sebagai berikut:
<s>..... teks....</s>
Contoh:
<html>
<head>
<title>mencoret teks</title>
</head>
Tim RPL - SMKTakhassus Al-Qur’an Wonosobo
5
<body>
<s>Tulisan ini akan tercoret</s>
</body>
</html>
Hasilnya:
9. Subscript dan Superscript
Subscript digunakan untuk membuat tulisan kecil yang berada pada batas bawah teks.
Contohnya: H20, CO2. Sedangkan superscript digunakan untuk membuat tulisan kecil yang
berada pada atas teks. Contohnya untuk perpangkatan seperti 22, 52. Sintaknya adalah sebagai
berikut:
<sub>..... teks....</sub>
Contoh:
<html>
<head>
<title>Subscript</title>
</head>
<body>
H<sub>2</sub>SO<sub>4</sub>
</body>
</html>
Hasilnya:
<sup>..... teks....</sup>
Contoh:
<html>
<head>
<title>Superscript</title>
</head>
<body>
H<sup>2</sup>SO<sup>4</sup>
</body>
</html>
Hasilnya:
10. Preformated Text
Menampilkan teks apa adanya. Sintaknya adalah sebagai berikut:
<pre>..... teks....</pre>
Contoh:
<html>
<head>
<title>Preformated teks</title>
</head>
<body>
<pre>Tulisan akan muncul apa adanya </pre>
berbeda dengan tulisan yang ini
</body>
</html>
Hasilnya:
Tim RPL - SMKTakhassus Al-Qur’an Wonosobo
6
11. Singkatan
Untuk mendefinisikan sebuah singkatan pada dokumen html dapat menggunakan perintah / tag
<acronym>. Sintaknya adalah sebagai berikut:
<acronym [atribut/properti]>.....tulisan/teks....</acronym>
Atribut yang ada:
Attribute
Nilai/Value
Description
Title
Teks
Mendefinisikan singkatan yang digunakan.
Contoh:
<html>
<head>
<title>Penggunaan akronim</title>
</head>
<body>
<p><acronym title=”Hyper Text Markup Language”>HTML</acronym> harus
dipahami dan dipraktekan sebagai dasar dalam belajar pemrograman web tingkat
lanjut agar dapat menjadi seorang programer yang handal</p>
</body>
</html>
Hasilnya:
12. Arah Teks
Untuk mendefinisikan sebuah arah teks dalam dokumen html, digunakan perintah / tag <bdo>.
Sintaknya adalah sebagai berikut:
<bdo [atribut/properti]>.....tulisan/teks....</bdo>
Atribut yang ada:
Attribute
Nilai/Value
Description
Dir
rtl
Arah teks dari kanan ke kiri (right to left)
ltr
Arah teks dari kiri ke kanan (left to right)
Contoh:
<html>
<head>
<title>Arah teks</title>
</head>
<body>
<bdo dir=”rtl”>belajar pemrograman web itu menyenangkan</bdo>
</body>
</html>
Hasilnya:
13. List
List adalah sebuah uraian yang terdiri dari atas item-item dari suatu daftar yang dilengkapi
dengan nomor baik nomor alfabetik atau numerik. Dalam html, terdapat 3 bentuk daftar atau
list, yaitu:
Ordered List/ List bernomor
Sintaknya:
<ol>
<li>isi list</li>
<li>isi list</li>
</ol>
Tim RPL - SMKTakhassus Al-Qur’an Wonosobo
7
Contoh:
<html>
<head>
<title>Pembuatan List</title>
</head>
<body>
Rukun Islam ada 5:
<ol>
<li>Syahadat</li>
<li>Sholat</li>
<li>Puasa</li>
<li>Zakat</li>
<li>Haji bagi yang mampu</li>
</ol>
</body>
</html>
Hasilnya:
Unordered List/ List tanpa nomor
Sintaknya:
<ul>
<li>isi list</li>
<li>isi list</li>
</ul>
Contoh:
<html>
<head>
<title>Pembuatan List</title>
</head>
<body>
Rukun Islam ada 5:
<ul>
<li>Syahadat</li>
<li>Sholat</li>
<li>Puasa</li>
<li>Zakat</li>
<li>Haji bagi yang mampu</li>
</ul>
</body>
</html>
Hasilnya:
Tim RPL - SMKTakhassus Al-Qur’an Wonosobo
8
Definition List/ List Definisi
Unordered List/ List tanpa nomor
Sintaknya:
<dl>
<dt>isi list
<dd>isi list
<dt>isi list
<dd>isi list
</dl>
Contoh:
<html>
<head>
<title>Pembuatan List</title>
</head>
<body>
Sistematika penulisan laporan:
<dl>
<dt>BAB I
<dd>pendahuluan
<dt>BAB II
<dd>Isi Laporan
<dt>BAB III
<dd>Penutup
</dl>
</body>
</html>
Hasilnya:
Latihan 2.4:
Ketikkan kode html berikut dan simpan dengan nama teks4.html:
<html>
<head>
<title>Latihan Formating Teks HTML</title>
</head>
<body bgcolor="yellow">
<marquee behavior="alternate"><h3>belajar web itu
menyenangkan</h3></marquee>
<p align="center">nama: <b>Toni Eko
Mulyono</b><br>alamat:<u><i>Wonosobo</i></u><br>pekerjaan:<s>tidak
bekerja</s></p>
<p>Akan selalu <s><font color="red" face="Arial">Malas</font></s>
Bersemangat dalam belajar dan <font size="5">patuh</font> kepada orang
tua.</p>
<p align="right">3<sup>2</sup>+4<sup>2</sup>=25 atau 5<sup>2</sup></p>
<p>Rumus kimia dari air adalah <font color="#ffffff">H<sub>2</sub>O</font>
sedangkan Oksigen adalah <font color="white">O<sub>2</sub></font></p>
<pre>Tanamkan selalu semangat belajar</pre>
<acronym title="Hyper Text Markup Language">HTML</acronym><bdo
dir="rtl">apakah tulisan ini dapat dibaca</bdo>
<ol>
<li>juara satu</li>
<ul>
Tim RPL - SMKTakhassus Al-Qur’an Wonosobo
9
<li>liburan ke bali</li>
<li>voucher pulsa 50 ribu</li>
</ul>
</ol>
<dl>
<dt>Sayangi Orang Tua
<dd>karena kita tidak pernah tahu kapan mereka akan pergi
</dl>
</body>
</html>
Tugas 4:
Buatlah cerita yang menarik yang bertemakan liburan sekolah. Tampilkan cerita tersebut dalam
sebuah dokumen web yang dihias dengan formating teks agar lebih menarik. Kemudian simpan
dengan nama teksnilai.html
Tim RPL - SMKTakhassus Al-Qur’an Wonosobo
10
BAB III
HYPERLINK DAN MULTIMEDIA
Tujuan Pembelajaran
Setelah mengikuti kegiatan belajar ini Peserta Didik diharapkan dapat :
1) Memahami dasar pembuatan hyperlink
2) Memahami dasar menampilkan file multimedia pada dokumen web
3) Menyajikan file multimedia dalam format tertentu pada halaman dokumen web
4) Menyajikan komunikasi antar dokumen web dengan menggunakan hyperlink
1. Hyperlink
Hyperlink atau lebih dikenal dengan link adalah suatu metode yang digunakan dalam HTML
untuk membuat hubungan antar halaman yang terdapat dalam satu situs web. Secara umum,
fungsi link adalah untuk memudahkan pengunjung web dalam menulusuri/menjelajahi seluruh
isi atau informasi yang tersimpan dalam situs web bersangkutan. Dalam keadaan default
(normal), suatu link akan ditandari dengan teks berwarna biru yang memiliki garis bawah. Jika
kita mengarahkan kursor ke suatu link tertentu, maka penunjuk mouse akan berubah menjadi
gambar tangan dengan satu jari yang sedang menunjuk, seperti yang ada gambar di bawah ini.
Konsep atau cara kerja link dalam HTML dapat diilustrasikan melalui gambar berikut :
Untuk membuat suatu link, HTML menyediakan satu tag khusus, yaitu tag <a>, yang
berpasangan dengan </a>. Setiap teks yang diapit oleh tag ini akan ditampilkan sebagai link.
Bentuk umum pembuat link dalam dokumen HTML adalah sebagai berikut :
Atribut yang ada:
Attribute
Nilai/Value
href
halaman/dokumen/URL
Description
menentukan dokumen atau halaman mana yang akan
dipanggil saat link tersebut di klik
target
_blank/_parent/_self/_top model cara dokumen akan ditempatkan atau
ditampilkan
Jenis-jenis link dalam HTML, yaitu :
- Link absolut adalah link yang akan menunjuk ke halaman dari situs web lain
<a href=http://www.w3.org/>W3</a>
- Link relative adalah link ke dokumen internal, dan penulisan alamat tujuannya pun tidak perlu
ditulis secara lengkap, cukup nama dokumennya saja, dan nama direktorinya
<a href=”kontak.html”>Kontak</a>
Tim RPL - SMKTakhassus Al-Qur’an Wonosobo
11
- Link ke bagian dokumen tertentu atau internal link. Link seperti ini biasanya pada halaman
web yang memiliki informasi yang panjang atau pada dokumen yang memiliki daftar isi di
bagian atasnya. Tujuannya adalah agar para pengunjung tidak perlu melakukan scrolling pada
halaman tersebut untuk menuju/kembali tertentu dalam dokumen bersangkutan. Yang perlu
digunakan adalah atribut yang disebut id (identifikasi) dan simbol “#”.
Gunakan atribut id untuk menandai elemen yang ingin ditautkan/link. Sebagai contoh:
<h1 id="heading1">heading 1</h1>
Sekarang kita dapat membuat link ke elemen dengan menggunakan ”#” di atribut link. Tanda
“#” harus diikuti dengan id dari tag yang ingin ditautkan/link. Sebagai contoh:
<a href="#heading1"> Menuju ke heading 1</a>
Menjadikan Gambar sebagai Link
Selain link berupa teks, gambar juga dapat dijadikan sebagai link. Konsepnya sebenarnya sama
saja dengan link berupa teks, perbedaannya hanya perlu mengganti teks yang dijadikan sebagai
link dengan tag <img>.
Link yang berupa teks:
<a href=”dokumenlain”>teks link</a>
Link yang berupa gambar:
<a href=”dokumenlain”><img src=”NamaFileGambar” /></a>
Latihan 3.1
Ketik kode program berikut dan simpan dengan nama link-dokumen1.html
<html>
<head>
<title>Link</title>
</head>
<body>
<h2>Latihan Membuat Link</h2>
<h3><u>Dokumen 1</u></h3>
<p>Klik
link
di
bawah
ini
untuk
melihat
isi
halaman
dokumen2.html:</p>
<p><a href=”link-dokumen2.html”>Lihat Dokumen 2</a></p>
</body>
</html>
web
pada
Kemudian ketik kode program berikut dan simpan dengan nama link-dokumen2.html
<html>
<head>
<title>Link</title>
</head>
<body>
<h2>Latihan Membuat Link</h2>
<h3><u>Dokumen 2</u></h3>
<p>
Ini adalah isi halaman yang terdapat pada dokumen 2. Untuk kembali ke
dokumen 1, silahkan klik link di bawah ini.
</p>
<p>
<a href=”link-dokumen1.html”>Lihat Dokumen 1</a>
</p>
</body>
</html>
Apa yang terjadi??
Latihan 3.2:
Copy gambar ke folder Anda. Catatan: dalam contoh ini menggunakan file gambar koala.jpg
link-gambar.html
Tim RPL - SMKTakhassus Al-Qur’an Wonosobo
12
<html>
<head>
<tittle>Link</title>
</head>
<body>
<h2>Latihan Membuat Link Berupa gambar</h2>
<p>Klik gambar dibawah ini untuk melihat informasi detail:</p>
<a href="detail-sahara.html"><img src="koala.jpg" /></a>
</body>
</html>
detail-sahara.html
<html>
<head>
<title>link</title>
</head>
<body>
<h2>Latihan Membuat Link Berupa Gambar</h2>
<p>
<img src=”koala.jpg”align=”left”/>
Merk: <strong>jeep</strong><br />
Seri: <strong>Wrangler</strong><br />
Tipe: <strong>Unlimited Sahara</strong><br />
Tahun: Pembuatan: 2011<br />
Transmisi: Automatic<br />
Silinder: 3.700<br />
Kilometer: 0 km (baru) <br />
Harga: Rp 975.000.00,- <br />
Keterangan tambahan: Mewah dan Gagah (Ready Stock)
<p/>
<p>
<a href=”link-gambar.html”> Kembali ke halaman utama<a/>
<p/>
</body>
</html>
Latihan 3.3:
Ketik kode berikut dan simpan dengan nama link-bagian.html
<html>
<head>
<title>link>/title>
</head>
<body>
<h2>Latihan membuat ke bagian tertentu dalam satu dokumen</h2>
<a id= “atas”></a>
<p> pilih salah satu judul buku berikut untuk melihat deskripsi : </p>
<a href=”#c”> pemrograman C</a><br
/>
<a href=”#cpp”> pemrograman C++</a><br
/>
<a href=”#bcb”> pemrogaraman Borland C++Builder</a>
</p>
<p><a id=”c”><strong>pemrograman C</strong> </a></p>
<p>
C merupakan bahasa pemrograman yang sudah tidak digunakan lagi kehandalannya
dan
banyak digunakan untuk membuat program-progarm dalam berbagai bidang,
termasuk pembuatan kompilator (compiler) dan sistem operasi. Sampai saat ini,
C masih tetap
menjadi bahasa populer dan beribawah dalam kanca pemrograman. Sejauh ini, C
juga
telah menjadi inspirasi bagi kelahiran bahasa-bahasa pemrograman
baru,
seperti C++,
Tim RPL - SMKTakhassus Al-Qur’an Wonosobo
13
java, dan juga yang lainnya ; sehingga dari sisi sintak kontrol programnya,
ketika bahasa
ini bisa dikatakan sama.
Bahasa pemrograman C sangatlah fleksibel dan
portebel,
sehingga dapat di tempatkan dan di jalankan di dalam beragam sistem operasi.
Pada
umum nya, C banyak digunakan untuk melakukan interfacing antar perangkat
keras
(hardwere) agar dapat berkomunikasi satu sama lainnya. <br />
<a href=”atas”> kembali ke atas</ a>
</p>
<p><a id=”cpp”><strong>pemrograman C++</strong></a</p>
<p>
C++ merupakan bahasa pemrograman yang sangat populer dan telah banyak
digunakan
untuk mengembangkan perangkat lunak di berbagai bidang;
seperti :
telekomunikasi,
embedded system, bisnis, dan hiburan. Salah satu kehandalan dari C++ adalah
bahasa
ini mendukung sepenuhnya konsep pemrograman berorientasi objek, atau yang
lebih di
kenal dengan OPP (object oriented programming). (cross platform), C++ juga
telah
manjadi bagian hidup dari sebagian para pecinta linux.<br />
<a href=”#atas”>kembali ke atas</a>
</p>
<p>
<a id=”bcb”>
<strong>pemrograman borland C++builder</strong>
</a>
</p>
<p>
C++builder adalah sebuah perangkat lunak berbasis C++ yang digunakan untuk
melakukan pembuatan aplikasi (baik visual maupun non-visual) yang berjalan di
atas
platform microsoft windows. Selain itu, C++builder juga banyak di gunakan
sebagai alat untuk pengembangan file-file DLL (Dynamic Link Library ). Dengan
adanya kemudahan
dan dukungan visual
yang di tawarkan di dalamnya, C++builder banyak di
gunakan oleh
para programmer profesional untuk pengembangan aplikasi yang beraneka ragam
jenisnya, seperti : openGL, multimedia, games, database, embedded system, dan
banyak
lagi yang lainnya.<br />
<a href=”#atas”>kembali ke atas</a>
</p >
</body>
</html>
Tugas 5:
1. Tulislah tag yang menyajikan hyperlink ke dokumen-dokumen berikut :
a. profile 2.html
b. staf/guru.html
c. www.google.com
d. profile.doc
2. Untuk soal 1.a) ternyata nama file yang dituju adalah “profile 2.html”, jadi ada spasi
sebelum 2, apa yang terjadi? Apakah dokumen tetap dapat dibuka?
3. Untuk soal 1.d) apa yang terjadi jika ada file profile.doc?
4. Bagian apa yang penting dalam tag link?
Tim RPL - SMKTakhassus Al-Qur’an Wonosobo
14
Tugas 6:
Buatlah 3 buah file dokumen web yang saling saling berhubungan satu dengan yang lainnya
dengan ketentuan nama file dan isi sebagai berikut:
a. home.html
berisi tentang struktur kelas Anda.
b. siswa.html
berisi tentang cerita siswa yang pandai, bodoh, nakal, dan kreatif di kelas Anda.
c. cerita.html
berisi tentang cerita menyenangkan dan tidak menyenangkan di kelas Anda.
2. Menyisipkan Gambar
Suatu halaman web akan terlihat kaku, terkesan formal, dan sedikit menjemukan bila tidak
disertai dengan gambar. Untuk menampilkan format gambar digunakan tag <img>. Atribut
terpenting dari tag <img> adalah SRC (source atau sumber), yang berisi file gambar yang akan
ditampilkan ke dalam halaman web. Format gambar yang didukung oleh tag <img> antara lain
JPEG(.jpg atau .jpeg), GIF(.gif) dan PNG(.png)
Atribut yang ada:
Attribute
Nilai/Value
Description
src
Nama file
Sumber file gambar yang ditampilkan
align
Top/middle/bottom/left/right Mengatur posisi gambar terhadap suatu teks
width
Ukuran
Digunakan untuk mengatur lebar gambar
height
Ukuran
Digunakan untuk mengatur tinggi gambar
alt
Tulisan
Memberikan keterangan pada gambar
title
Tulisan
Memberikan keterangan pada gambar
Atribut terpenting dari tag <img> adalah SRC (source atau sumber), yang berisi file gambar
yang akan ditampilkan ke dalam halaman web.
Bentuk umum penggunaan tag <img> adalah :
<img src=”namafile”>
Jika file yang akan ditampilkan berada di direktori lain, atau bahkan berada di situs web lain,
makan perlu menyebutkan juga lokasi dari file tersebut.
Contoh:
<img src= “../image/komputer.jpg”>
Atau
<img src=http://www.abcde.com/image/kamera.jpg/>
Latihan 3.4: Memasukkan Gambar ke dalam Halaman Web
- Buat folder baru dengan nama gambar.
- Copykan file gambar yang dibutuhkan ke dalam folder tersebut.
- Catatan: pada contoh ini menggunakan file gambar Koala.jpg, Jam.gif dan Komputer.png
- Buatlah dokumen html dengan nama gambar.html dan simpan ke dalam folder gambar
- Ketikkan kode berikut
<html>
<head>
<title>Gambar</title>
</head>
<body>
<p>Latihan Menambahkan Gambar GIF,
<p>Menampilkan gambar dalam format
<img src=”Koala.jpg”/>
<p>Menampilkan gambar dalam format
<img src=”Jam.gif”/>
<p>Menampilkan gambar dalam format
<img src=”Komputer.png”/>
</body>
</html>
JPG, dan PNG</h2>
GIF:</p>
JPG:</p>
PNG:</p>
Tim RPL - SMKTakhassus Al-Qur’an Wonosobo
15
Latihan 3.5: Menggabung Gambar dan Teks (bagian 1)
- Catatan: Dalam contoh ini menggunakan file yang sama seperti pada Latihan 3.4
- Buat folder baru dengan nama image yang disimpan di dalam folder gambar
- Copykan file gambar pada folder image
- Buat dokumen html dan simpan dengan nama gambar2.html
- ketikkan kode berikut:
<html>
<head>
<title>Gambar</title>
</head>
<body>
<h2>Latihan Menggabung Gambar dan teks (bag.1)</h2>
<p>
<img src=”images/Jam.gif” align=”top”/>
Komputer 1 (menggunakan align=TOP)
</p>
<p>
<img src=”images/Koala.jpg” align=”middle”/>
Komputer 2 (menggunakan align=MIDDLE)
</p>
<p>
<img src=”images/Komputer.png” align=”bottom”/>
Komputer 3 (menggunakan align=BOTTOM)
</p>
</body>
</html>
Latihan 3.6: Menggabung Gambar dan Teks (bagian 2)
- Catatan: Dalam contoh ini menggunakan file yang sama seperti pada Latihan 3.5
- Buat dokumen html dan simpan dengan nama gambar3.html
- ketikkan kode berikut:
<html>
<head>
<title>Gambar</title>
</head>
<body>
<h2>Latihan Menggabung Gambar dan Teks (Bag. 2) </h2>
<p><u>Gambar ada di sebelah kiri teks:</u></p>
<p>
<img src=”images/Komputer.png” align”left”/>
Pada paragraf ini gambar akan ditempatkan di sebelah kiri teks. Hal ini
disebabkan atribut ALIGN diisi dengan nilai LEFT. Pada paragraf ini gambar
akan ditempatkan di sebelah kiri teks. Hal ini disebabkan atribut ALIGN diisi
dengan nilai LEFT. Pada paragraf ini gambar akan ditempatkan di sebelah kiri
teks. Hal ini disebabkan atribut ALIGN diisi dengan nilai LEFT. Pada paragraf
ini gambar akan ditempatkan di sebelah kiri teks. Hal ini disebabkan atribut
ALIGN diisi dengan nilai LEFT. Pada paragraf ini gambar akan ditempatkan di
sebelah kiri teks. Hal ini disebabkan atribut ALIGN diisi dengan nilai LEFT.
</p>
<p><u>Gambar ada di sebelah kanan teks:</u></p>
<p>
<img src=”images/Komputer.png” align”right”/>
Pada paragraf ini gambar akan ditempatkan di sebelah kanan teks. Hal ini
disebabkan atribut ALIGN diisi dengan nilai RIGHT. Pada paragraf ini gambar
akan ditempatkan di sebelah kanan teks. Hal ini disebabkan atribut ALIGN
diisi dengan nilai RIGHT. Pada paragraf ini gambar akan ditempatkan di
sebelah kanan teks. Hal ini disebabkan atribut ALIGN diisi dengan nilai
RIGHT. Pada paragraf ini gambar akan ditempatkan di sebelah kanan teks. Hal
ini disebabkan atribut ALIGN diisi dengan nilai RIGHT. Pada paragraf ini
Tim RPL - SMKTakhassus Al-Qur’an Wonosobo
16
gambar akan ditempatkan di sebelah kanan teks. Hal ini disebabkan atribut
ALIGN diisi dengan nilai RIGHT.
</p>
</body>
</html>
Latihan 3.7:Memperkecil gambar
Ketikan kode berikut dan simpan dengan nama gambarkecil.html
Catatan: pada contoh ini menggunakan file Komputer.png
<html>
<head>
<title>gambar</title>
<head>
<body>
<h2>Latihan memperkecil gambar</h2>
<p>
<u>gambar ukuran asli (500X375 pixel ):</u><br />
<img src=”images/Komputer.png” />
</p>
<p>
<u> gambar yang diperkecil (320X230 pixel) :</u><br />
<img src=”images/Komputer.png” width =”320” height=”230” />
<p>
<body>
<html>
Latihan 3.8: Memperbesar gambar
Ketikan kode berikut dan simpan dengan nama gambarbesar.html
Catatan: pada contoh ini menggunakan file Komputer.png
<html>
<head>
<title>gambar</title>
<head>
<body>
<h2>Latihan memperbesar gambar</h2>
<p>
<u>gambar ukuran asli (500X375 pixel ):</u><br />
<img src=”images/Komputer.png” />
</p>
<p>
<u> gambar yang diperbessar (800X630 pixel) :</u><br />
<img src=”images/Komputer.png” width =”800” height=”630” />
<p>
<body>
<html>
Tugas 7:
Buatlah dokumen halaman web yang berisi tentang pariwisata di daerah tempat tinggalmu.
Kemudian simpan dengan nama pariwisata.html. Lengkapi juga dengan gambar dan
keterangan tentang tempat wisata tersebut.
3. Menyisipkan Audio
Untuk memasukkan suara pada html bisa menggunakan tag <audio>. Format suara yang telah
didukung hingga saat ini adalah MP3, Ogg dan WAP. File-file Audio yang didukung HTML5
adalah MP3,WAV, dan OGG.
Tidak semua tipe file audio tersebut didukung oleh browser.
OGG merupakan format audio yang didukung oleh Mozilla firefox, opera, dan google
chrome.
Tim RPL - SMKTakhassus Al-Qur’an Wonosobo
17
MP3 merupakan format audio yang didukung oleh Google Chrome dan safari.
WAV merupakan format audio yang didukung oleh Mozilla Firefox dan Opera.
Jenis file audio untuk dukungan pada web browser bisa dilihat pada tabel berikut ini.
Browser
MP3
WAV
OGG
Yes
No
No
Internet Explorer
Yes
Yes
Yes
Chrome
No, Kecuali versi 21 keatas
Yes
Yes
Firefox
Yes
Yes
No
Safari
No
Yes
Yes
Opera
Bentuk umum penggunaan tag <audio>
<audio>
<source src="nama_file_audio">
</audio>
Atribut yang ada:
Attribute
Nilai/Value
autoplay <audio autoplay=”autoplay”>
controls
<audio controls=”controls”>
loop
<audio loop="loop">
muted
preload
<audio muted =”muted” >
<audio preload="preload">
Description
Mulai audio secara otomatis
menampilkan kontrol seperti volume, audio,
dan juga tombol untuk memulai/pause
mengulang audio kembali setelah pemutaran
awal selesai
mematikan suara
memuat ulang audio ketika halaman dimuat
ulang
Latihan 3.9:
- Buat folder dengan nama audio.
- Copykan file audio ke folder tersebut.
- Catatan: file audio yang digunakan dalam contoh ini adalah house.mp3
- Ketik kode berikut dan simpan dengan nama musik.html
<html>
<head>
<title>cek suara</title>
</head>
<body>
<audio controls = "controls" autoplay="autoplay" loop="loop" >
<source src="house.mp3" type="audio/mp3">
<source src="house.ogg" type="audio/ogg">
</audio>
</body>
</html>
Tampilan ketika audio dimainkan
Tugas 8:
Buatlah sebuah halaman web yang bisa memainkan audio secara otomatis namun tidak terlihat
media kontrol dari audio.
Tim RPL - SMKTakhassus Al-Qur’an Wonosobo
18
4. Menyisipkan Video
Tag yang digunakan untuk menampilkan video adalah <video> </video>. Namun tidak semua
format videonya dapat ditampilkan di web. Sementara ini, hanya beberapa format video yang
bisa diproses, di antaranya adalah WebM ,OGG , MP4. Berikut daftar ke kompabilitasan dari
masing-masing browser terhadap file video.
Browser
MP4
WebM
Ogg
Yes
No
No
Internet Explorer
Yes
Yes
Yes
Chrome
No, Kecuali versi 21 keatas
Yes
Yes
Firefox
Yes
No
No
Safari
No
Yes
Yes
Opera
Bentuk umum penggunaan tag <video>
<video>
<source src="nama_file_video">
</video>
Atribut yang ada:
Attribute
Nilai/Value
autoplay <video autoplay=”autoplay”>
controls
<video controls=”controls”>
loop
<video loop="loop">
muted
preload
<video muted =”muted” >
<video preload="preload">
height
width
poster
<video height=”240”>
<video width=”360”>
<video poster="anak.gif">
Description
Memutar video secara otomatis
menampilkan kontrol video
mengulang video kembali setelah pemutaran
awal selesai
mematikan suara
memuat ulang video ketika halaman dimuat
ulang
mengatur tinggi frame video
mengatur lebar frame video
memunculkan poster/gambar pada saat video
buffer atau diunduh.
Latihan 3.10:
- Buat folder dengan nama video.
- Copykan file video ke folder tersebut.
- Catatan: file video yang digunakan dalam contoh ini adalah bola.mp4, bola.WebM, dan
bola.ogg
- Ketik kode berikut dan simpan dengan nama clip.html
<html>
<head>
<title>cek video</title>
</head>
<body>
<video width="320" height="240" controls>
<source src="bola.mp4" type="video/mp4">
<source src="bola.ogg" type="video/ogg">
<source src="bola.WebM " type="video/WebM">
browser anda tidak mendukung format video ini.
</video>
</body>
</html>
Tugas 9:
Buatlah sebuah halaman web yang bisa memainkan 5 video secara otomatis namun tidak
terlihat media kontrol dari videonya.
Tim RPL - SMKTakhassus Al-Qur’an Wonosobo
19
5. Menyisipkan Animasi
File animasi juga dapat ditampilkan pada halaman web dengan cara di embed-kan. Embed
digunakan untuk melampirkan file dari eksternal seperti *.swf, *.gif dan lain sebagainya.
Perintah yang digunakan adalah
<embed src="nama_file_animasi">
Atribut yang ada:
Attribute
height
Pixel
width
Pixel
src
URL
Nilai/Value
Description
mengatur tinggi frame media
mengatur lebar frame media
memberikan sumber media yang dilampirkan
Latihan 3.11:
- Buat folder dengan nama animasi.
- Copykan file animasi ke folder tersebut.
- Catatan: file animasi yang digunakan dalam contoh ini adalah siboy.swf, rose.gif
- Ketik kode berikut dan simpan dengan nama gambarbergerak.html
<html>
<head>
<title>animasi</title>
</head>
<body>
<embed src="siboy.swf">
<p></p><--file animasi flash siboy.swf--></p>
<embed src="rose.gif">
</body>
</html>
Tugas 10:
Buatlah 4 buah file dokumen web yang saling saling berhubungan satu dengan yang lainnya
dengan ketentuan nama file dan isi sebagai berikut:
a. home.html
berisi tentang biodata Anda.
b. gambar.html
berisi tentang 10 gambar galeri yang Anda miliki.
c. audio.html
berisi tentang 5 audio lengkap dengan kontrol audio.
d. video.html
berisi tentang 5 video lengkap dengan kontrol video.
Tim RPL - SMKTakhassus Al-Qur’an Wonosobo
20
BAB IV
TABLE
Tujuan Pembelajaran
Setelah mengikuti kegiatan belajar ini Peserta Didik diharapkan dapat :
1) Memahami dan Menyajikan Pembuatan Tabel
2) Memahami dan Menyajikan Teknik Spanning Tabel
3) Memahami dan Menyajikan Tabel di dalam Tabel
4) Memahami Desain Layout Halaman Web
5) Memahami dan Menyajikan Desain Web dengan Konsep Tabel
Tabel merupakan cara untuk menampilkan informasi dalam bentuk sel yang terdiri atas baris
dan kolom. Tabel digunakan untuk membuat tampilan agar terlihat lebih rapi dan teratur.
1. Pembuatan Table
Untuk membuat table kita harus menggunakan tag <table> </table>. Sedangkan untuk
mendefiniskan baris (table row) pada table menggunakan tag <tr> </tr> yang ditulis diantara tag
tag <table>. Sedangkan untuk menampilkan kolom atau table data (table data) menggunakan
tag <td> </td> yang ditulis diantara tag <tr>.
Sehingga perintah yang digunakan untuk membuat 1 baris dan 1 kolom pada table adalah
sebagai berikut:
<table>
<tr>
<td>data pada kolom 1</td>
</tr>
</table>
Untuk mendefinisikan kolom judul (table heading) pada setiap kolom dapat menggunakan tag
<th> </th> yang ditulis diantara tag <tr>.
Atribut yang ada tag <table>:
Attribute
Nilai/Value
Description
height
Pixel /persen
mengatur tinggi tabel
width
Pixel / persen
mengatur lebar tabel
border
Pixel
mengatur garis tepi tabel
cellspacing Pixel
mengatur jarak antar cell
cellpadding Pixel
mengatur jarak di dalam cell
align
Left/Center/Right
mengatur perataan letak tabel
bgcolor
Color/Kode
mengatur warna latar belakang tabel
Atribut yang ada tag <tr>:
Attribute
Nilai/Value
valign
Top/Middle/Bottom
align
Left/Center/Right
bgcolor
Color/Kode
Description
Mengatur perataan sebaris secara vertikal
mengatur perataan sebaris secara horisontal
mengatur warna latar belakang baris
Atribut yang ada tag <td>:
Attribute
Nilai/Value
height
Pixel /persen
width
Pixel / persen
align
Left/Center/Right
bgcolor
Color/Kode
Description
mengatur tinggi sel
mengatur lebar sel
mengatur perataan sel
mengatur warna latar sel
Latihan 4.1:
- Ketik kode berikut dan simpan dengan nama tabel.html.
Tim RPL - SMKTakhassus Al-Qur’an Wonosobo
21
<html>
<head>
<title>tabel</title>
</head>
<body>
<table border=”1”>
<tr>
<td>Nama</td>
<td>Nilai</td>
</tr>
<tr>
<td>Ani</td>
<td>90</td>
</tr>
<tr>
<td>Bambang</td>
<td>80</td>
</tr>
</table>
</body>
</html>
Tugas 11:
- Buatlah kode program untuk membuat tampilan tabel berikut
No
Nama
Tinggi
1
Desi
150 cm
2
Kintan
155 cm
3
Evita
156 cm
- Kemudian simpan dengan nama tugas11.html.
Berat
45 kg
50 kg
50 kg
2. Teknik Spanning
Teknik spanning digunakan untuk menggabungkan baris atau menggabungkan kolom.
Pengunaan teknik spanning hanya dapat digunakan di dalam tag <td> yakni dengan
menambahkan atribut colspan untuk menggabungkan kolom dan rowspan untuk
menggabungkan baris.
Perintah yang digunakan adalah
<td colspan="jumlah_kolom_yang_di_span"> .....</td>
<td rowspan="jumlah_baris_yang_di_span"> .....</td>
Latihan 4.2:
- Ketik kode berikut dan simpan dengan nama colspan.html.
<html>
<head>
<title>tabel</title>
</head>
<body>
<table border=”1”>
<tr>
<td>Benua</td>
<td colspan=”4”>EROPA</td>
</tr>
<tr>
<td>Negara</td>
<td>Belanda</td>
<td>Italia</td>
<td>Inggris</td>
<td>Jerman</td>
</tr>
</table>
Tim RPL - SMKTakhassus Al-Qur’an Wonosobo
22
</body>
</html>
-
Gambarkan hasilnya pada kotak berikut.
Latihan 4.3:
- Ketik kode berikut dan simpan dengan nama rowspan.html.
<html>
<head>
<title>tabel</title>
</head>
<body>
<table border=”1”>
<tr>
<td>Benua</td>
<td>Negara</td>
</tr>
<tr>
<td rowspan=”4”>ASIA</td>
<td>Arab Saudi</td>
</tr>
<tr>
<td>India</td>
</tr>
<tr>
<td>Indonesia</td>
</tr>
<tr>
<td>Singapura</td>
</tr>
</table>
</body>
</html>
-
Gambarkan hasilnya pada kotak berikut.
Tugas 12:
- Buatlah kode program untuk membuat tampilan tabel berikut
1
2
5
4
8
7
9
11
- Kemudian simpan dengan nama tugas12.html.
3
6
10
12
Tim RPL - SMKTakhassus Al-Qur’an Wonosobo
23
3. Pembuatan Tabel di dalam Tabel (Tabel bersarang)
Teknik tabel bersarang adalah salah satu cara untuk menghasilkan layout tabel yang kompleks
tanpa membuat tabel yang sangat kompleks. Sehingga ketika harus membuat tabel yang
kompleks, maka cara sederhananya adalah membuat tabel di dalam sebuah sel (<td></td>).
Latihan 4.4:
Berikut adalah contoh tabel bersarang.
Baris 1 Kolom 1
Baris 2 Kolom 1
-
Baris 1 Kolom 2
Baris 1 Kolom 1
Baris 2 Kolom 1
Baris 1 Kolom 2
Baris 2 Kolom 2
Ketik kode berikut dan simpan dengan nama nestedtabel.html.
<html>
<head>
<title>tabel</title>
</head>
<body>
<table border=”1”>
<tr>
<td>Baris 1 Kolom 1</td>
<td>Baris 1 Kolom 2</td>
</tr>
<tr>
<td>Baris 2 Kolom 1</td>
<td>
<table border=”2”>
<tr>
<td>Baris 1 Kolom 1</td>
<td>Baris 1 Kolom 2</td>
</tr>
<tr>
<td>Baris 2 Kolom 1</td>
<td>Baris 2 Kolom 2</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Tabel yang
dimasukkan
ke dalam sel
Tugas 13:
- Buatlah kode program untuk membuat tampilan tabel berikut
-
Kemudian simpan dengan nama tugas13.html.
Tim RPL - SMKTakhassus Al-Qur’an Wonosobo
24
4. Pembuatan Desain Halaman Web denganTabel
Tabel pada umumnya digunakan untuk menampilkan data tabular dalam bentuk baris dan
kolom. Pengorganisasian data yang baik dan benar pada sebuah tabel HTML akan sangat
membantu dalam mengembangkan aplikasi web, terutama jika tabel yang ingin dibangun harus
bersifat dinamis. Secara garis besar anatomi atau susunan dari suatu halaman web terdiri dari
containing block, Logo, navigation, content, white space dapat digambarkan sebagai berikut
Containing Block.
Containing block merupakan bagian dari halaman web yang membungkus semua komponen
halaman web. Umumnya dibuat dengan tag <body>, <div> atau <table>.
Logo.
Identitas perusahaan, organisasi, pemilik situs.
Navigation.
Navigasi atau menu merupakan bagian penting dari situs yang memudahkan pengunjung
berpindah-pindah halaman.
Content.
Content atau isi adalah segalanya, karena disinilah sebagian besar informasi disajikan.
Footer.
Footer merupakan bagian bawah dan berisi informasi singkat pemilik situs (copyright) dan
beberapa link.
Whitespace.
Whitespace merupakan area kosong yang membatasi antar-komponen. Whitespace menjadi
penting agar pengunjung mempunyai ruang berhenti di antara bagian-bagian situs yang lain.
Whitespace dapat juga diisi dengan banner atau animasi.
Desain layout suatu halaman web meliputi penyusunan:
- pembagian tempat pada halaman
- pengaturan jarak sepasi
- pengelompokan teks dan grafik
- serta penekanan pada suatu bagian tertentu
Beberapa model layout yang biasa digunakan dalam mendesain suatu halaman web, diantaranya
adalah:
top index digunakan untuk menampilkan link yang banyak ke situs lain, seperti search
engine
Tim RPL - SMKTakhassus Al-Qur’an Wonosobo
25
bottom index Biasanya digunakan apabila isi dari halaman banyak berhubungan dengan
topik tunggal
left index Digunakan untuk layar dengan resolusi yang lebar sehingga mudah dalam
penyediaan navigasi, tanpa menimbulkan kekacauan penyajian pada halaman utama
layout split Merupakan model yang banyak dipakai, karena terjaga keseimbangan dalam
halaman web
alternating index digunakan untuk halaman yang banyak menampilkan grafik, foto dan
produk yang disertai dengan teks berupa keterangan, harga, jumlah, dan lain - lain.
Tugas 14:
- Buat desain layout halaman web yang dengan tema web sekolah dengan menggunakan
salah satu model layout tabel. Kemudian simpan dengan nama desaintabel.html.
Tim RPL - SMKTakhassus Al-Qur’an Wonosobo
26
BAB V
FORM
Tujuan Pembelajaran
Setelah mengikuti kegiatan belajar ini Peserta Didik diharapkan dapat :
1) Memahami penggunaan form HTML
2) Memahami anatomi dan cara kerja form
3) Menyajikan komponen entri teks
4) Menyajikan komponen entri pilihan
5) Menyajikan hasil dari format formulir halaman web
1. Form
Form merupakan formulir yang digunakan sebagai perantara untuk memasukan data inputan ke
server. Form dibuat dengan menggunakan tag <form></form>.
Atribut yang ada tag <form>:
Attribute
Nilai/Value
Description
Action
URL
lokasi file yang memproses data dari form
application/x-www-form-urlencoded bagaimana data form dikirim ke server
Enctype
multipart/form-data
text/plain
Name
Autocomplete
Method
Target
Text
On/off
Get/post
_blank
_self
_parent
_top
memberi nama pada form
membaca data isian form sebelumnya
metode untuk pengiriman data ke tujuan
mengindikasikan dimana respon dari
form akan ditampilkan
Novalidate
memperintahkan bahwa data form tidak
divalidasi saat di submit.
Untuk membuat tampilan dari sebuah form menjadi lebih tertata dengan rapi, umumnya
digunakan elemen HTML <table> untuk memformat form tersebut.
2. Komponen Entri Teks
a. Inputan satu baris
Digunakan untuk membuat masukan satu baris
<input type=”text”>
Atribut yang dimiliki:
Attribute
Nilai/Value
Description
Name
Text
Memberi nama elemen
Value
Text
Memberikan isian data
Size
Pixel/persen
Mengatur panjang kotak masukan
Maxlength
Integer
Mengatur panjang karakter maksimum
b. Inputan multibaris
Digunakan untuk membuat masukan banyak baris
<textarea></textarea>
Atribut yang dimiliki:
Attribute
Nilai/Value
Description
Name
Text
Memberi nama elemen
rows
Integer
Mengatur tinggi textarea
cols
Integer
Mengatur lebar textarea
disabled
disabled
Textarea tidak dapat diubah/tidak aktif
Maxlength
Integer
Mengatur panjang karakter maksimum
Placeholder
Text
Memberikan gambaran singkat tentang
Tim RPL - SMKTakhassus Al-Qur’an Wonosobo
27
Readonly
Required
Readonly
Required
nilai pada textarea
Textarea tidak dapat diubah nilainya
Menentukan text area tersebut harus diisi
atau tidak.
c. Inputan password
Digunakan untuk membuat masukan kata sandi
<input type=”password”>
Atribut yang dimiliki:
Attribute
Nilai/Value
Description
Name
Text
Memberi nama elemen
Value
Text
Memberikan isian data
Size
Pixel/persen
Mengatur panjang kotak masukan
Maxlength
Integer
Mengatur panjang karakter maksimum
d. Inputan tersembunyi
Digunakan untuk membuat masukan yang tidak terlihat dan hanya dapat diisi secara
langsung dari kode program.
<input type=”hidden”>
Atribut yang dimiliki:
Attribute
Nilai/Value
Description
Name
Text
Memberi nama elemen
Value
Text
Memberikan isian data
3. Komponen Entri Pilihan
a. Pilihan Checkbox
Digunakan untuk membuat pilihan lebih dari satu opsi pilihan yang dapat dipilih/dibatalkan.
<input type=”checkbox”>
Atribut yang dimiliki:
Attribute
Nilai/Value
Description
Name
Text
Memberi nama elemen
Value
Text
Memberikan isian data
Bentuk pilihannya: checkbox checkbox
atau checkbox checkbox
b. Pilihan Radio
Digunakan untuk membuat pilihan yang hanya dapat dipilih atau diganti.
<input type=”radio”>
Atribut yang dimiliki:
Attribute
Nilai/Value
Description
Name
Text
Memberi nama elemen
Value
Text
Memberikan isian data
Bentuk pilihannya: radio radio
c. Pilihan Combo
Digunakan untuk membuat pilihan dengan fitur dropdown.
<select name=”text”>
<option value=”nilai1”>Pilihan 1</option>
<option value=”nilai2”>Pilihan 2</option>
.......
</select>
Bentuk pilihannya:
Tim RPL - SMKTakhassus Al-Qur’an Wonosobo
28
Atribut yang dimiliki oleh tag <option>:
Attribute
Nilai/Value
selected
Description
Memilih opsi pada awal ditampilkan
d. Pilihan File
Digunakan untuk membuat pilihan file yang ada di dalam komputer. Agar data dapat
diproses oleh server maka gunakan form dengan atribut method=”POST” dan
enctype=”multipart/form-data”
<input type=”file”>
Atribut yang dimiliki:
Attribute
Nilai/Value
Description
Name
Text
Memberi nama elemen
Bentuk pilihannya:
4. Komponen Tombol
a. Tombol Pengirim Data (submit)
<input type=”submit”>
Atribut yang dimiliki:
Attribute
Nilai/Value
Name
Text
Value
Text
Bentuk pilihannya:
b. Tombol Penghapus Data (reset)
<input type=”reset”>
Atribut yang dimiliki:
Attribute
Nilai/Value
Name
Text
Value
Text
Bentuk pilihannya:
Description
Memberi nama elemen
Digunakan untuk mengganti label tombol
Description
Memberi nama elemen
Digunakan untuk mengganti label tombol
c. Tombol Multifungsi (button)
Aksi yang dapat dilakukan oleh inputan type button bergantung dari si pembuat kode
program, biasanya digabungkan dengan javascript.
<input type=”button”>
Atribut yang dimiliki:
Attribute
Nilai/Value
Description
Name
Text
Memberi nama elemen
Value
Text
Digunakan untuk mengganti label tombol
Bentuk pilihannya:
5. Cara Membuat Daftar Form
Semua komponen yang akan digunakan harus diletakkan diantara tag <form></form>. Setiap
komponen yang akan dikirimkan harus memiliki atribut name. Semua data yang akan
dikirimkan oleh form mengacu pada komponen entri yang memiliki atribut name. Jika suatu
komponen entri tidak memiliki name, maka data yang ada dalam komponen tersebut
tidak dikirimkan kepada server. Data akan dapat dikirimkan ke server dengan menekan
tombol pengirim (submit).
Tim RPL - SMKTakhassus Al-Qur’an Wonosobo
29
Latihan 5.1:
Untuk membuat tampilan formulir seperti di atas kodenya adalah sebagai berikut:
<html>
<head>
<title>tabel</title>
</head>
<body>
<form method="post" action="" enctype="multipart/form-data">
Nama : <input type="text" name="nama"><br>
password : <input type="password" name="sandi"><br>
Alamat :
<textarea name="almt"></textarea><br>
Agama :
<select name="agm">
<option value="Islam">Islam</option>
<option value="Kristen">Kristen</option>
<option value="Hindu">Hindu</option>
</select><br>
Hobi :
<input type="checkbox" name="pil1" value="voli"> voli
<input type="checkbox" name="pil2" value="basket"> basket<br>
Foto : <input type="file" name="foto"><br>
<input type="submit"> <input type="reset">
</form>
</body>
</html>
Tugas 15:
1. Buatlah tampilan formulir berikut dan simpan dengan nama tugas15A.html:
2. Buatlah tampilan formulir berikut dan simpan dengan nama tugas15B.html:
Tim RPL - SMKTakhassus Al-Qur’an Wonosobo
30
BAB VI
DIV DAN CASCADING STYLE SHEETS
Tujuan Pembelajaran
Setelah mengikuti kegiatan belajar ini Peserta Didik diharapkan dapat :
1) Memahami dan menyajikan tag DIV
2) Memahami anatomi dan cara kerja CSS
3) Menyajikan CSS untuk memformat tampilan
1. DIV
Konsep div sebenarnya hampir mirip dengan penggunaan tabel. DIV lebih cocok digunakan
untuk membuat desain halaman web dibandingkan dengan menggunakan tabel. Sifat div sendiri
adalah dinamis, yakni apabila kita melakukan desain halaman web dengan menggunakan div
akan lebih mudah dan leluasa dalam mengatur peletakkan bagian-bagian dengan menggunakan
model layout tertentu. Satu sel dalam sebuah tabel dapat kita ibaratkan sebagai satu div
(bagian/division). Untuk menamai dari setiap bagian (div) kita dapat menggunakan atribut id
atau class.
Contoh penggunaan:
<div id=”atas”>
</div>
<div id=”kiri”>
</div>
<div id=”kanan”>
</div>
<div id=”bawah”>
</div>
Jika ditampilkan pada browser, tidak akan terlihat apa-apa karena tag div tidak akan
menampilkan efek visual. Tag ini hanya digunakan untuk membuat dokumen HTML lebih
terstruktur dengan membagi-bagi dokumen ke dalam bagian-bagian yang lebih spesifik.
Penggunaan atribut ID dan CLASS
Atribut ID digunakan untuk penamaan elemen HTML yang memiliki karakteristik
unik/berbeda. Tidak boleh ada dua atau lebih elemen yang mempunyai ID yang sama.
Atribut Class digunakan untuk penamaan elemen yang memiliki karakteristik/struktur sama dan
dapat digunakan berulang kali dalam markup (Kode HTML).
Contoh:
<div id=”wraper”>
<div id=”atas”>
</div>
<div class=”menu”>
</div>
<div class=”menu”>
</div>
<div id=”bawah”>
</div>
</div>
Dalam mengatur tata letak dan tampilan tag div harus digabungkan dengan penggunaan
Cascading Style Sheets (CSS).
Tim RPL - SMKTakhassus Al-Qur’an Wonosobo
31
2. CSS
Cascading Style Sheet atau lebih sering disebut dengan istilah CSS merupakan salah satu
dokumen website yang bertujuan untuk mengatur gaya (style) tampilan website. CSS bukanlah
sebuah bahasa pemrograman, melainkan sebuah aturan untuk mengendalikan beberapa
komponen pada web sehingga akan lebih terstruktur, seragam dan mudah dalam pengaturan
saat pendesain sebuah halaman web.
Manfaat pengunaan CSS:
Kode HTML menjadi lebih sederhana dan lebih mudah diatur.
Ukuran file menjadi lebih kecil sehingga load file lebih cepat.
Mudah untuk mengubah tampilan, hanya dengan mengubah file CSS saja.
Dapat berkolaborasi dengan JavaScript dan merupakan pasangan setia HTML.
Dapat digunakan dalam hampir semua jenis web browser.
Format penulisan kode CSS:
Selector { Property : Value; }
Selector adalah elemen/tag HTML yang ingin diberi style. Cukup menuliskan nama tag tanpa
perlu menambahkan tanda <>. Jika tag HTML memiliki atribut ID kita dapat menuliskan
selector nama ID tersebut dengan diawali tanda kress (#). Apabila tag HTML memiliki atribut
Class kita dapat menuliskan selector nama Class tersebut dengan diawali tanda titik (.)
Property adalah sifat-sifat yang ingin diterapkan pada selector, seperti warna text, warna
background, jarak antar elemen, garis pinggir dan lain sebagainya. Nama property bersifat case
sensitive.
Value adalah hasil yang ingin didapatkan dari property yang ada. Nilai untuk property tidak
boleh dalam tanda petik.
Contoh 61:
body {
color: white;
background: #000000;
}
Maksud CSS di atas adalah bagian/elemen/tag yang akan diberi style adalah tag <body>. Sifat
yang akan terjadi pada tag <body> adalah warna tulisan (color) menjadi warna putih (white)
dan warna latar belakang dokumen (background) menjadi warna hitam (#000000).
Contoh 62:
#wrapper {
width: 800px;
margin: auto auto;
}
.menu{
height: 30px;
align: center;
background: red;
}
Maksud CSS di atas adalah bagian/elemen/tag yang akan diberi style adalah tag dengan nama
ID wrapper dan tag dengan nama class menu. Untuk tag dengan nama ID wrapper akan
mempunyai sifat lebar 800px dan ditampilkan pada tengah layar. Untuk tag dengan nama Class
menu akan mempunyai sifat tinggi 30px dengan perataan paragraf di tengah dan mempunyai
warna latar belakang dokumen berwarna merah.
Tim RPL - SMKTakhassus Al-Qur’an Wonosobo
32
Ketika anda mempunyai dua atau lebih tag dengan property dan value yang sama :
h1{ background-color: #666666; }
p { background-color: #666666; }
a { background-color: #666666; }
Anda dapat menggabungkan selector dengan menambahkan tanda koma pada nama selector:
h1, p, a { background-color: #666666; }
Cara penggunaan CSS:
Ada 3 cara/metode dalam penulisan kode CSS, yaitu inline, internal/embedded dan external
style sheets.
A. Inline Style Sheets
Penulisan kode CSS dengan metode inline ini bisa dilakukan langsung pada tag yang ingin
diberi style dengan menggunakan atribut style. Jadi Anda tidak perlu menuliskan selector.
<h1 style="color : red; "> Judul Situs </h1>
<p align="center" style="color:#303; font-size:24px; ">SMK Takhassus</p>
Cara ini sangat tidak dianjurkan karena akan menyulitkan pengaturan style jika terjadi
perubahan tampilan website dikemudian hari.
B. Internal/Embedded Style Sheets
Metode CSS internal ditulis di dalam tag style yang ditempatkan pada tag head.
<html>
<head>
<title>Belajar CSS</title>
<style>
h1{
color : red;
}
p{
text-align : center;
color : #303;
font-size : 24px;
}
</style>
</head>
<body>
<h1> Judul Situs </h1>
<p>SMK Takhassus</p>
</body>
</html>
Metode kedua ini sangat dianjurkan untuk pengujian style, atau ketika anda hanya memiliki
satu halaman web.
C. External Style Sheets
Metode ini dilakukan dengan membuat file CSS secara terpisah (tersendiri) dan dipanggil di
dalam tag head pada dokumen html yang ingin diberi gaya/style. File css harus memiliki
ekstensi (akhiran) *.css misalnya namafile.css. Pemanggilan file css dilakukan dengan
menggunakan tag link yang diletakkan pada tag head.
<head>
<link rel="stylesheet" type="text/css" href="namafile.css">
</head>
Cara ini umumnya digunakan pada satu aplikasi berbasis web sehingga tampilan antar
halaman akan terlihat konsisten.
Tim RPL - SMKTakhassus Al-Qur’an Wonosobo
33
3. Menyajikan CSS untuk Format Tampilan
A. Margin
Property margin digunakan untuk memberikan jarak antar elemen/tag HTML. Misalnya
jarak antar <div> dan tag-tag HTML lainnya.
Latihan 6.1
- Ketikkan kode html berikut dan simpan dengan nama latihan61.html.
<div class=”box”>
Box ke satu
</div>
<div class=”box”>
Box ke dua
</div>
-
Jangan lupa tambahkan kode tersebut pada struktur dasar HTML yang memiliki tag
<html>, <head> dan seterusnya.
Tambahkan tag style pada tag head, dan ketikkan kode CSS berikut:
.box{
background-color:green;
color: yellow;
width:100px;
height:100px;
margin-bottom:50px;
}
-
Tampilan yang didapatkan
Kita juga dapat memberikan jarak dari kanan (right), kiri (left) dan atas (top). Misalnya
margin-top:20px;
margin-right:30px;
margin-bottom:50px;
margin-left:40px;
B. Padding
Pada latihan sebelumnya, kita telah memberikan jarak antar elemen HTML dalam contoh
sebelumnya jarak antar <div>, namun coba perhatikan antara text (Box ke x) dengan garis
pinggir kotak, tidak ada jarak sama sekali, merapat ke sisi box tersebut.
Untuk itu property paddinglah yang akan memberikan jarak antara konten elemen dengan
elemen tersebut.
Tambahkan kode CSS berikut, pada class box yang kita buat sebelumnya:
.box{
background-color:green;
color: yellow;
width:100px;
Tim RPL - SMKTakhassus Al-Qur’an Wonosobo
34
height:100px;
margin-bottom:50px;
padding-left:20px;
}
Maka hasilnya akan seperti pada gambar di bawah ini:
Dan sekarang, anda dapat melihat jarak antara text
yang berada di dalam box.
Perlu diperhatikan juga, bahwa ketika kita
menambahkan padding, ukuran .box juga akan
berubah.
Misalnya kita menentukan ukuran lebar dari .box
sebesar 100px. Ketika kita menambahkan
padding-left sebesar 20px, maka total lebar dari
.box tersebut menjadi 120px.
Jadi jika anda ingin ukuran .box tetap 100px, kita
harus menghitung ulang width dari box tersebut.
Misalnya kita ubah menjadi 80px. Dengan begitu,
80px + 20px menjadi 100px.
C. CSS Shorthand
Pada pembahasan sebelumnya, bisa kita simpulkan bahwa setiap property dapat memiliki
lebih dari satu jenis, misalnya margin dapat memiliki 4 jenis. margin-top, margin-right,
margin-bottom, dan margin-left.
margin-top:20px;
margin-right:30px;
margin-bottom:50px;
margin-left:40px;
Daripada menuliskan seluruh property tersebut, kita bisa menggunakan CSS-Shorthand
yaitu menggabungkan seluruh value (top, right, bottom, dan left) ke dalam satu property.
Sebagai contoh, kita akan menggunakan CSS-shorthand untuk Property margin menjadi
seperti berikut :
margin : 20px 30px 50px 40px;
Masing-masing dari nilai tersebut adalah:
margin : top right bottom left;
bisa kita simpulkan bahwa nilai dari CSS-shorthand margin ini memiliki urutan searah
jarum jam dan dimulai dari margin-top.
o Ketika kita memberikan satu nilai pada property margin, ini artinya kita
memberikan nilai tersebut pada seluruh sisi.
margin : 20px;
maka nilai dari margin-top, right, bottom dan left adalah 20px.
o Ketika kita memberikan dua nilai pada property margin, berarti nilai selanjutnya
mengikuti nilai sebelumnya.
margin : 20px 30px;
maka nilai dari margin-top dan margin-bottom adalah 20px sedangkan nilai dari
margin-right dan margin-left adalah 30px
o Dan ketika kita menuliskan tiga nilai, maka nilai yang tidak diisi akan mengikuti
nilai yang diisi, sama halnya ketika kita memberi 2 nilai.
margin : 20px 30px 40px;
Pada contoh di atas, kita memberikan nilai untuk top, right dan bottom. Sedangkan
untuk left akan disamakan dengan right.
Penggunaan nilai seperti ini juga berlaku pada padding, dan property-property sejenis
lainnya.
Tim RPL - SMKTakhassus Al-Qur’an Wonosobo
35
D. Border
Property border digunakan untuk memberikan garis pinggir pada elemen, setidaknya ada
tiga property yang harus anda set, yaitu color, style dan width.
border-color : black;
border-style : solid;
border-width : 5px;
namun anda juga dapat menggunakan CSS shorthand sehingga menjadi seperti format
berikut :
border : width style color;
border : 5px solid black;
Cobalah tambahkan kode tersebut pada latihan sebelumnya dan yang akan anda dapatkan
adalah seperti berikut :
Sama halnya dengan Padding, penambahan
property border juga akan merubah ukuran dari
.box.
Kali ini perhatikan bahwa kita memberikan border
pada seluruh sisi .box, artinya jika kita tentukan
ukuran border sebesar 5px, maka 10px (untuk
width, karena 5px untuk left, dan 5px untuk right)
akan ditambahkan pada ukuran .box tersebut.
Sehingga ukuran .box berubah kembali menjadi
110px.
Untuk itu kita kurangi width dari .box tersebut
menjadi 70px sehingga : 70px (width) + 20px
(padding) + 10px (border) = 100px.
E. Typhography
Merubah font dengan property font-family
font-family: calibri;
font-family: calibri, arial, tahoma, verdana, sans-serif;
font-family: “segoe ui”;
Merubah ukuran font dengan property font-size
font-size: 12px;
Merubah ketebalan font dengan property font-weight. Nilai yang bisa dipakai pada property
ini adalah normal, bold, bolder.
font-weight: bold;
Merubah jarak antar huruf dengan property letter-spacing. Semakin besar nilai pixel yang
diberikan semakin jauh jarak antar huruf. Andapun dapat menggunakan nilai negatif untuk
memperdekat jarak antar huruf.
letter-spacing: 12px;
Mengatur jarak antar baris
line-height: 12px;
Membuat text menjadi rata kiri, tengah atau kanan, kita gunakan property text-align. Nilai
yang dapat digunakan adalah left, center, right, dan justify untuk rata kiri-kanan.
text-align: center;
Latihan 6.2
Buatlah dokumen html dan isi dengan beberapa paragraf beserta headingnya dan terapkan
property-property yang telah anda pelajari di atas dan simpan dengan nama latihan62.html.
Tim RPL - SMKTakhassus Al-Qur’an Wonosobo
36
F. Background
Untuk memberikan gambar sebagai latar belakang dokumen web.
background: url(nama_file_background);
atau
background-image: url(nama_file_background);
Ketika anda menggunakan gambar dengan ukuran kecil maka anda akan melihat
background ditampilkan secara berulang untuk memenuhi seluruh element tersebut.
Gunakan property background-repeat untuk mengatur pengulangan gambar
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: no-repeat;
Mengatur letak posisi gambar background dari sumbu x (dari kiri)
background-position-x: 50px;
Tim RPL - SMKTakhassus Al-Qur’an Wonosobo
37
Mengatur letak posisi gambar background dari sumbu y (dari atas)
background-position-y: 50px;
menggunakan CSS-shorthand untuk background-position :
background-position : nilaiX
nilaiY;
misalnya
background-position: 50px 50px;
G. Image Sprite
Image Sprite adalah sekumpulan gambar berbeda yang disatukan dalam satu file gambar.
Teknik ini dilakukan untuk mempercepat loading website tanpa harus memanggil beberapa
file gambar yang banyak. Cukup satu gambar dan kita tentukan lokasi gambar yang ingin
ditampilkan.
Contoh gambar sprite
Contoh penggunaan:
<html>
<head>
<title>Belajar CSS</title>
<style>
#del{
width:100px;
background:url(gb.gif);
background-repeat: no-repeat;
background-position: -80px -60px;
}
</style>
</head>
<body>
contoh penggunaan sprite<br>
<input type="button" value="hapus" id="del">
</body>
</html>
Hasil yang didapat:
Tim RPL - SMKTakhassus Al-Qur’an Wonosobo
38
H. Floating
Float berarti melayang. Ketika kita memberikan float pada elemen maka elemen tersebut
seolah-olah melayang dan elemen di atasnya (parent) menganggap tidak ada elemen
didalamnya (child).
Latihan 6.3:
- Ketikkan kode berikut dan simpan dengan nama latihan63.html
<img src=”logo.png” alt=”gambar” />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas
porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus
lectus malesuada libero, sit amet commodomagna eros quis urna.</p>
-
Lalu tambahkan css berikut:
img {
float: left;
}
-
Hasil yang didapat:
Style diatas akan meratakirikan elemen gambar dan membuat paragraf naik keatas.
Ada satu permasalahan ketika anda menambahkan floating pada suatu elemen,
permasalahan ini bisa anda temui pada latihan 6.4 berikut:
Latihan 6.4:
- Ketikkan kode berikut dan simpan dengan nama latihan64.html
<div id=”wrapper”>
<div id=”header”></div>
<div id=”content”>
<div id=”artikel”></div>
<div id=”sidebar”></div>
</div>
<div id=”footer”></div>
</div>
-
Kemudian tambahkan style berikut
#wrapper{
width : 960px;
margin : 0 auto; /*agar wrapper tetap berada ditengah */
}
#header {
width:100%;
height:50px;
background: orange;
margin-bottom: 10px;
}
#content{
padding:20px;
background : green;
margin-bottom : 10px;
}
#artikel{
width : 600px;
height : 700px;
float : left;
background: orange;
}
#sidebar {
width : 300px;
Tim RPL - SMKTakhassus Al-Qur’an Wonosobo
39
height: 200px;
float : right;
background: orange;
}
#footer{
width : 100%;
height: 50px;
background: green;
}
-
Apabila dibuka dalam browser, maka tampilan yang akan didapat seperti ini:
Ada yang janggal? Ya.. #content tidak memenuhi isi dari #artikel dan #sidebar. Seharusnya
tinggi #content otomatis sama dengan tinggi dari elemen tertinggi di dalamnya, dalam kasus
ini adalah artikel dengan tinggi 700px. Dengan begitu seharusnya tinggi dari #content
adalah 740px (ditambah dengan padding-top dan padding-bottom). Jika anda tidak mengerti
cobalah untuk membuang property float yang ada, dan perhatikan bahwa #artikel dan
#sidebar berada di dalam #content. Hal ini dikarenakan kita menambahkan floating pada
#artikel dan #sidebar, sehingga #content menganggap tidak ada element didalamnya. Ada
dua cara untuk menyelesaikan kasus ini :
1. Menambahkan style overflow:hidden pada #content
#content{
…
overflow:hidden;
}
2. Menambahkan div kosong dengan style clear:both; sebelum penutup content
…
<div id=”sidebar”></div>
<div style=”clear:both;”></div>
</div>
-
Maka hasil yang akan didapat menjadi seperti berikut:
I. CSS Reset
CSS Reset berfungsi untuk mereset atau mengatur ulang seluruh property-property yang
telah disetting oleh browser, seperti margin, padding, warna huruf (link) ukuran huruf
heading dan lain sebagainya. Perhatikan CSS contoh berikut :
* {
margin:0;
padding:0;
}
Selector bintang (*) digunakan untuk memberikan style pada Seluruh elemen/Tag HTML.
Tim RPL - SMKTakhassus Al-Qur’an Wonosobo
40
BAB VII
JAVASCRIPT
Tujuan Pembelajaran
Setelah mengikuti kegiatan belajar ini Peserta Didik diharapkan dapat :
1) Memahami dasar-dasar pengunaan Javascript
2) Menyajikan halaman dokumen web dengan menggunakan Javascript
Javascript merupakan bahasa pemrograman berbasis web dan berorientasi objek atau sering
juga isebut OOP (Object Oriented Programming). Dimana dianggap sebuah objek memiliki metode,
properti dan event yang berbeda.
1. Keuntungan menggunakan javascript
Javascript sering digunakan oleh para programmer karena javascript mempunyai keunggulan,
antara lain:
a. Menciptakan halaman web yang lebih interaktif dan menarik.
b. Dapat memberikan text/content yang dinamis kedalam halaman HTML.
c. Dapat memberikan reaksi tertentu pada suatu event.
d. JavaScript bisa digunakan untuk validasi data pada form HTML sebelum dikirim ke server.
Contoh pada validasi e-mail.
e. Mendeteksi banyaknya pengunjung pada browser.
f. JavaScript juga sering digunakan sebagai trik, misalnya memberikan efek mouseover pada
suatu image atau link. Dengan efek ini, suatu gambar dapat berubah ketika mouse
didekatkan ke gambar tersebut dan masih banyak lagi.
2. Cara Penulisan Javascript:
Javascript sendiri mempunyai sifat khusus, yakni bersifat Case Sensitive yaitu besar kecil huruf
yang digunakan mempengaruhi proses yang ada. Beberapa sintaks/cara penulisan kode
program, yaitu:
Cara 1:
<SCRIPT>
JavaScript statements................
</SCRIPT>
Cara 2:
<SCRIPT LANGUAGE="JavaScript">
JavaScript statements................
</SCRIPT>
3. Peletakkan Kode Javascript:
Kode javascript juga memiliki aturan cara peletakkan yang hampir sama dengan CSS, yaitu:
Cara 1:
Umumnya tag <script> diletakan diantara bagian kepala dari dokumen HTML, yaitu
bagian antara tag <head> dan </head>. Pemanggilan fungsi JavaScript (atau disebut
juga event) diletakkan di bagian badan dokumen HTML atau bisa kita sebut diantara tag
<body> dan </body>.
Cara 2:
Menuliskan kode program JavaScript dalam suatu file teks dan kemudian file teks yang
berisi kode JavaScript disimpan dengan ekstensi *.js kemudian dipanggil dari dalam
dokumen HTML dengan mengetikkan kode berikut:
<SCRIPT language="JavaScript" SRC="lokasi_file.js"> </SCRIPT>
tag <script> tersebut juga diletakan diantara bagian kepala dari dokumen HTML,
yaitu bagian antara tag <head> dan </head>.
Tim RPL - SMKTakhassus Al-Qur’an Wonosobo
41
4. Event Handler
Seperti yang sudah kita ketahui, dengan menggunakan JavaScript, kita dapat membuat halaman
web yang interaktif dan dinamis. Event adalah kejadian/aksi dari user yang bisa terdeteksi oleh
JavaScript yang didefinisikan pada tag HTML. Beberapa contoh event handler yang sering
digunakan antara lain :
Event
Event akan dijalankan ketika...
onMouseover User meletakkan kursor mouse diatas suatu elemen.
User memberikan focus kepada suatu elemen.
onFocus
Elemen kehilangan fokus, artinya user melakukan klik diluar elemen itu.
onBlur
User memodifikasi isi dari data dalam satu field data.
onChange
User melakukan klik mouse terhadap satu elemen yang berhubungan dengan
onClick
event.
Navigator user meload/memanggil suatu halaman.
onLoad
Melakukan klik tombol submit.
onSubmit
onMouseout Kursor mouse meninggalkan posisinya dari atas suatu elemen.
Menghapus data pada suatu form dengan bantuan satu tombol reset.
onReset
Contoh 7.1:
<html>
<head>
<title>SMK Takhassus</title>
<script language="javascript">
function tampil(){
window.alert("selamat datang di website saya");
}
</script>
</head>
<body onload="tampil();">
sebelum ini ditampilkan akan muncul pesan dulu
</body>
</html>
Hasilnya:
Latihan 7.1:
Mengimplementasikan Event Handler, simpan dengan nama "js_event.html"
<html>
<head></head>
<body>
<input type="text" size="30" onFocus="window.status='Silakan mengisi
kotak';"><br>
<input type="button" value="Lihat tanggal"
onMouseover="window.status='Lihat tanggal hari ini'; return true;"
onClick="alert('Anda menekan tombol');">
</body>
</html>
Hasilnya yang diharapkan:
Tim RPL - SMKTakhassus Al-Qur’an Wonosobo
42
Saat mouse focus pada input text
Saat mouse berada di atas tombol
Event saat tombol di klik
Tim RPL - SMKTakhassus Al-Qur’an Wonosobo
43
Latihan 7.2:
- Javascript untuk Validasi Form, simpan dengan nama "js_validasi.html"
<html>
<head>
<title>SMK Takhassus</title>
<script language="javascript">
function validasi(){
if(document.getElementById("nm").value==""){
window.alert("nama harus diisi!");
return false;
}
if(document.getElementById("em").value==""){
window.alert("email harus diisi!");
return false;
}
return true;
}
</script>
</head>
<body>
<form method="post" action="tampil.php" onsubmit="return validasi();">
<table>
<tr>
<td>Nama</td>
<td><input type="text" name="nm" id="nm"></td>
</tr>
<tr>
<td>email</td>
<td><input type="text" name="em" id="em"></td>
</tr>
<tr>
<td>Komentar</td>
<td><textarea name="komen"></textarea></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Kirim"></td>
</tr>
</table>
</form>
</body>
</html>
-
Jalankan kode
Tim RPL - SMKTakhassus Al-Qur’an Wonosobo
44
