Scribd
Unggah
17 tayangan47 halaman

Dasar HTML, CSS, dan JavaScript untuk Web

Modul ini membahas tentang dasar-dasar web development meliputi HTML, CSS, dan JavaScript. Modul ini juga menjelaskan struktur dasar dokumen HTML dan cara membuat dokumen HTML sederhana.

Diunggah oleh

Sahabat Bacod Official
Hak Cipta
© All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
17 tayangan47 halaman

Dasar HTML, CSS, dan JavaScript untuk Web

Modul ini membahas tentang dasar-dasar web development meliputi HTML, CSS, dan JavaScript. Modul ini juga menjelaskan struktur dasar dokumen HTML dan cara membuat dokumen HTML sederhana.

Diunggah oleh

Sahabat Bacod Official
Hak Cipta
© All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd

MODUL

Web
Development
Pelajari komponen-komponen dasar HTML,
CSS, dan JavaScript yang merupakan fondasi
utama untuk menjadi web developer.

By Ricky Septiandy

Web Development
Pelajari komponen-komponen dasar HTML,
CSS, dan JavaScript yang merupakan fondasi
utama untuk menjadi web developer.

By Ricky Septiandy

© Ricky Septiandy

• Di akhir pembelajaran, siswa dapat membuat sebuah


website sederhana menggunakan kode pemrograman
yang sesuai standar global.
• Membangun website menggunakan HTML dan CSS.
• Menerapkan struktur website yang baik menggunakan
standar semantic HTML.
• Mendemonstrasikan penyusunan layout website
menggunakan teknik oat atau exbox.

Ricky Septiandy
+628979993899
[Link]/rickyspph
[Link]/in/rickyseptiandypph

fl

fl

Failure is an option here. If things are not failing, you are not
innovating enough. - Elon Musk

Persiapan
Peralatan Belajar:
• RAM 1 GB.
• Sistem Operasi Windows, Linux, MacOS.
• Layar 1366 x 768 (Rekomendasi Full HD 1920 x 1080).
• Prosesor Intel Celeron (Rekomendasi Core i3 ke atas).
• Web Browser Microsoft Edge, Google Chrome, Mozilla
Firefox.
• Teks Editor Notepad, Notepad++, Brackets, Atom,
Sublime, VSCode.

Mekanisme Belajar:
• Project-based Learning
• Materi bacaan elektronik : Materi akan disajikan dalam
bentuk teks dan bacaan
• Forum diskusi : WhatsApp dan Discord
• Evaluasi pembelajaran : Ujian akhir pembelajaran dan
Submission

HTML

H
TML (HyperText Markup Language) merupakan
sebuah bahasa markup, bukan bahasa
pemrograman. Bahasa markup (Indonesia:
markah) adalah bahasa yang mengombinasikan teks dan
informasi tambahan mengenai teks tersebut. HTML
merupakan dokumen standar yang digunakan untuk
mendesain halaman web.
Pada awal tahun 2000, konsorsium W3C (World Wide
Web Consortium) membuat perubahan besar melalui
XHTML (eXtensible Hypertext Markup Language). Ide
dasarnya, dalam upaya meningkatkan kompatibilitas
dokumen HTML, W3C menambahkan struktur dan
ekstensibilitas XML (eXtensible Markup Language) ke
HTML.

Perkembangan HTML semakin pesat seiring


diperkenalkannya HTML5 pada tahun 2009. HTML5
dibangun oleh konsorsium W3C untuk dimasukkan sebagai
perubahan besar berikutnya pada standar HTML. Atas
dasar ini, maka penting sekali untuk mengenal dan
memahami HTML5 dengan baik.

STRUKTUR DOKUMEN HTML


Setiap dokumen HTML harus diawali dengan tag <html>
dan diakhiri dengan komplemennya, yakni tag </html> tag.
Dokumen HTML juga menyertakan tiga pasang tag.
• Tag <head> dan </head>: digunakan untuk menyatakan
informasi mengenai dokumen HTML.
• Tag <title> dan </title>: digunakan untuk menambahkan
title di title bar browser.
• Tag <body> dan </body>: digunakan untuk melingkupi
semua teks yang terdapat di halaman HTML.

Bentuk struktur dokumen HTML yang standar sebelum


versi HTML5 diperlihatkan sebagai berikut:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0


Transitional//EN" "[Link]
xhtml1- [Link]">
<html xmlns="[Link]
xml:lang="en" lang="en">
<head>
<!-- Ini baris komentar, tidak diproses -->
<title>Ini judul dokumen HTML4</title>
</head>
<body>
Ini adalah teks di body
</body>
</html>

Pada HTML5, struktur penulisan lebih diringkas dengan


bentuk sebagai berikut:

<!DOCTYPE html>
<html>
<head>
<!-- Ini baris komentar, tidak diproses -->
<title>Ini judul dokumen HTML5</title>
</head>
<body>
Ini adalah teks di body
</body>
</html>

Di samping elemen utama di atas, masih terdapat


berbagai jenis elemen yang dapat digunakan di dalam
dokumen HTML. Salah satu elemen yang perlu
diperhatikan adalah untuk penulisan komentar. Di HTML,
komentar dinyatakan dengan tag <!-- dan diakhiri dengan
tag —>.

LATIHAN
Membuat Dokumen HTML

Secara garis besar, struktur dokumen HTML terdiri dari


dua bagian: header dan body. Di mana header
mende nisikan informasi mengenai dokumen, sedangkan
body mende nisikan tubuh atau isi dokumen.
Langkah-langkah pembuatan dokumen HTML
diperlihatkan sebagai berikut:
1. Buka text editor
2. Ketikkan teks (kode-kode HTML) berikut:

fi

fi

<!DOCTYPE html>
<html>
<head>
<!-- Ini baris komentar, tidak diproses -->
<title>Ini judul dokumen</title>
</head>
<body>
Ini adalah teks di body
</body>
</html>

3. Simpan dokumen HTML dengan nama [Link]


dan letakkan di lokasi direktori web, misal di
Documents. Perhatikan, Documents merupakan
direktori web dan sebaiknya buat subdirektori di
dalamnya.

Bagaimanapun, dokumen HTML memang bisa


ditampilkan dengan double click di mana pun lokasinya.
Namun perlu diperhatikan, langkah ini bukanlah cara
untuk menjalankan halaman web di server lokal.

Publikasi Halaman Web

Untuk menguji aplikasi web, kita mempublikasikannya ke


web server, baik secara lokal maupun Internet. Lingkungan
lokal tentu merupakan pilihan yang e sien, khususnya
ketika aplikasi masih dalam tahap pengembangan.

fi

Langkah yang diperlukan untuk publikasi ini sangat


sederhana.
1. Pastikan bahwa le dokumen sudah diletakkan di
direktori web, misalnya untuk Documents/Nama-web.
2. Buka web browser, kemudian ketikkan alamat URL
yang merujuk ke lokasi dokumen.

Format Teks

HTML menyediakan beragam elemen yang dapat


dimanfaatkan untuk pemformatan teks.
1. Heading
Heading merupakan salah satu elemen penting di dalam
dokumen HTML. Heading dide nisikan menggunakan tag
<hn> dan diakhiri dengan </hn>, di mana n menyatakan tipe
dengan nilai 1 6. Untuk mengetahui bentuk semua jenis
heading, buat kode HTML seperti di bawah ini. Perhatikan,
kode HTML ini sengaja diringkas guna memudahkan
penulisan. Jadi, dalam implementasinya harus
mendeklarasikan semua elemen-elemen dasar.
Untuk mengetahui bentuk semua jenis heading, buat
kode HTML seperti di bawah ini. Perhatikan, kode HTML
ini sengaja diringkas guna memudahkan penulisan. Jadi,
dalam implementasinya harus mendeklarasikan semua
elemen-elemen dasar.

<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>

-
fi

fi

Elemen heading menyediakan atribut ali gn yang dapat


digunakan untuk mengatur posisi teks.

<body>
<h1 align="right">Heading 1</h1>
<h2 align="left">Heading 2</h2>
<h3 align="center">Heading 3</h3>
</body>

2. Paragraph
Sebagaimana teks pada umumnya, dokumen HTML
dapat terdiri dari kumpulan paragraf. Dalam konteks

HTML, paragraf direpresentasikan melalui tag <p>, Tag <p>


sebenarnya merupakan tag pasangan, meski dalam
implementasinya kerap kali diabaikan.

<p>Ini paragraf pertama</p>


<p>
Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea
commodo consequat.
</p>
<p>Ini paragraf ketiga</p>

Sebagaimana heading, kita juga bisa mengatur posisi


paragraf dengan memanfaatkan atribut align. Sebagai
contoh, dokumen berikut akan menghasilkan paragraf rata
tengah, kiri kanan, dan kanan.

<p align="center">Ini paragraf rata tengah</p>

<p align="justify">
Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea
commodo consequat.
</p>

Secara normal, baris baru akan ditambahkan di antara


dua paragraf. Adapun jika kita hanya ingin membuat baru,
kita tidak harus menggunakan paragraf. Sebagai gantinya,
gunakan tag line break <br>.

Membuat baris baru <br />


Membuat baris baru <br />
<p>
<!-- break di dalam paragraf -->
Lorem ipsum dolor sit amet, consectetur
adipisicing elit,
<br />
sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.
<br />
Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</p>

3. Fontase
HTML menyediakan sejumlah elemen yang dapat
dimanfaatkan untuk mengatur font, seperti huruf tebal,
huruf miring, garis bawah, dan masih banyak lagi. Sebagai

tambahan, di sini juga akan dijelaskan mengenai cara


mencetak tag. Seperti diketahui, tag <p> di dokumen secara
otomatis akan diterjemahkan sebagai paragraf. Adapun
untuk mencetak karakter <p> di layar, kita perlu
menggunakan nama entitas. Sebagai contoh, karakter <
dinyatakan dengan nama entitas &lt; dan karakter >
dinyatakan dengan &gt;.

<b>Menggunakan tag &lt;b&gt;...&lt;/b&gt;</b> <br />


<strong>Menggunakan tag &lt;strong&gt;...&lt;/
strong&gt;</strong>
<br />
<i>Menggunakan tag &lt;i&gt;...&lt;/i&gt;</i>
<br />
<em>Menggunakan tag &lt;em&gt;...&lt;/em&gt;</
em> <br />
<u>Menggunakan tag &lt;u&gt;...&lt;/u&gt;</u>
<br />
<strike>Menggunakan tag &lt;strike&gt;...&lt;/
strike&gt;</strike> <br />

4. Special Character
Di HTML, kita juga bisa menampilkan karakter-karakter
khusus dengan memanfaatkan nama entitas. Tabel berikut

memperlihatkan beberapa jenis karakter khusus yang


dapat digunakan beserta nama entitasnya.
Karakter Deskripsi Nama Entitas

¢ Cent &cent;

£ Pound &pound;

¥ Yen &yen;

€ Euro &euro;

© Copyright &copy;

® Registered &reg;

™ Trademark &trade;

<body>
&pound; Pound <br />
&euro; Euro <br />
&copy; Copyright <br />
&reg; Registered <br />
&trade; Trademark <br />
</body>

Preformatted Text

Adakalanya kita menginginkan agar teks yang tertulis di


editor teks dapat ditampilkan apa adanya. Pada kasus
seperti ini, kita bisa memanfaatkan keberadaan tag <pre>.
Tag ini akan menampilkan teks dengan font Courier dan
tetap mempertahankan spasi serta baris baru.

<body>
<pre>

------------------------------------------------
No | Nama | Alamat

------------------------------------------------
1 | PT. Bintang | Jl. Terusan Surabaya
2 | PT. Sinar Jaya | Jl. Tidar
3 | PT. Mitra | Jl. Galunggung
4 | PT. Harapan | Jl. Jombang
5 | PT. Barokah | Jl. Bondowoso

------------------------------------------------
</pre>
</body>

Untuk melihat perbedaannya, hilangkan tag <pre>


kemudian perhatikan hasilnya.

Garis Horizontal

Di HTML, garis horizontal direpresentasikan melalui tag


<hr> Meskipun kebanyakan browser me-render elemen ini
dengan visualisasi yang sedikit berbeda, namun pada
hakekatnya mencerminkan sebuah bentuk garis horizontal.

<body>
Membuat garis horizontal
<hr />
<p>
Lorem ipsum dolor sit amet, consectetur
adipisicing elit,
<br />
sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.
<br />
Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</p>

<hr />
</body>

Menggunakan List

HTML mendukung list dalam bentuk terurut (ordered),


tak terurut (unordered), dan de nisi (de nition). Untuk
setiap bentuk list ini, terdapat list item dinyatakan melalui
tag <li> berpasangan yang merepresentasikan item-item list.

fi

fi

<body>
Ordered List
<ol>
<li>Satu</li>
<li>Dua</li>
</ol>
<hr />
Unordered List
<ul>
<li>Satu</li>
<li>Dua</li>
</ul>
<hr />
Definition List
<dl>
<dt>Satu</dt>
<dd>Satu Satu</dd>
<dt>Dua</dt>
<dd>Dua Dua</dd>
</dl>
</body>

Pewarnaan

Untuk memberikan warna background, HTML


menyediakan atribut bgcolor di tag <body>. Atribut ini
dapat diisi dengan nama warna misalnya red atau kode
heksadesimal misalnya #FFFFFF. Khusus untuk elemen-
elemen lain tertentu, tersedia atribut color yang
memungkinkan kita melakukan pewarnaan. Sama seperti
bgcolor, nilai atribut ini juga dapat berupa nama warna
atau kode heksadesimal.

<!-- memberi warna aqua di body -->


<body bgcolor="aqua">
<h3 align="center">Heading 3</h3>
<font color="red">Font berwarna merah</font> <br
/>
<font color="#FF0000"> Font berwarna merah
(menggunakan nilai heksa)</font>
</body>

Bekerja dengan Gambar

Tak hanya teks, kita juga bisa menyisipkan gambar di


dalam dokumen HTML. Untuk keperluan ini, HTML
menyediakan tag <img> yang didukung dengan sejumlah
atribut.

<body>
<p>
<!-- menggunakan path relative -->
<img
src="[Link]
[Link]"
/>
Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna
aliqua.
</p>

<hr />
<p>
<!-- menggunakan path absolute -->
<img
src="[Link]
[Link]"
align="right"
/>
Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna
aliqua.
</p>
</body>

STUDI KASUS
1. Buat halaman web sederhana yang melibatkan elemen
teks, garis, warna, dan gambar. Di mana terdapat
minimal sebuah heading dan garis berwarna, gambar
dengan garis tepi (border), dan halaman utama dengan
latar belakang gambar sembarang.



HTML LANJUT

P
ada pertemuan sebelumnya telah dijelaskan
mengenai elemen-elemen fundamental dari HTML/
XHTML dan implementasinya. Selain elemen-
elemen tersebut, masih terdapat elemen-elemen lain yang
juga memiliki peran cukup penting di dalam menghasilkan
dokumen HTML.
Di bagian ini akan dijelaskan mengenai dasar-dasar dan
cara penggunaan elemen-elemen yang nantinya akan
sering kita gunakan. Secara garis besar, elemen-elemen ini
mencakup:
• Link: Untuk mengaitkan satu dokumen dengan
dokumen-dokumen lainnya (atau bisa juga menautkan
blok-blok di dalam satu dokumen).
• Tabel: Untuk menghasilkan data dalam bentuk tabular.
• Form: Untuk menghasilkan form masukan data.

LATIHAN
1. Menggunakan Link

Fitur fundamental dari hypertext adalah hyperlink


dokumen-dokumen; kita dapat menunjuk lokasi-lokasi lain.
Sebagaimana diketahui, hyperlink merupakan teks yang
memungkinkan kita untuk melakukan navigasi dari satu
halaman ke halaman lainnya.
HTML menyediakan tag <a> (atau disebut anchor) untuk
mende nisikan sebuah link. Dalam implementasinya,
pembuatan link memerlukan atribut href yang menyatakan
lokasi tujuan. Lokasi ini bisa berupa alamat lengkap
(absolut) atau singkat (relatif ). Untuk mengetahui cara
membuat dan mengaitkan dokumen, ikuti langkah-langkah
berikut:
1. Buka text editor
2. Ketikkan teks (kode-kode HTML) berikut:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Demo Link</title>
</head>
<body>
<a href="[Link]">Klik di sini</a>
</body>
</html>
fi

3. Simpan dokumen HTML dengan nama [Link] dan


letakkan di lokasi direktori web.
4. Langkah selanjutnya, buat halaman kedua
([Link]) yang nantinya akan ditautkan.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Demo Link 2</title>
</head>
<body>
Untuk kembali ke halaman pertama
<a href="[Link]">Klik di sini</a>
</body>
</html>

5. Simpan dengan nama [Link].


6. Untuk menguji hasilnya, buka browser dan arahkan
ke alamat [Link]
7. Klik link yang ada secara bergantian.

Atribut Link

Elemen anchor menyediakan sejumlah atribut guna


mendukung fungsionalitasnya, dua di antaranya yang kerap
digunakan adalah target dan title. Atribut target digunakan
untuk mengatur apakah link akan di buka di window yang
sama (default) atau di window (atau tab) baru. Di sisi lain,

title berfungsi untuk menampilkan teks manakala kursor


mouse berada di atas link.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Demo Atribut Link</title>
</head>
<body>
<a href="[Link]" target="_blank"
title="Title link">Klik di sini</a>
</body>
</html>

Link Internal

Elemen anchor juga memungkinkan kita untuk


melakukan navigasi di dalam satu dokumen (layaknya
bookmark). Untuk mengimplementasikan hal ini, kita
memerlukan atribut id. Langkah pertama untuk
mengimplementasikan link internal adalah dengan
mende nisikan lokasi di atribut href yang diberi pre ks #.
Langkah berikutnya adalah menetapkan nilai atribut id di
blok yang akan dituju, di mana nilainya sama dengan href
namun tanpa pre ks #. Untuk lebih jelasnya, perhatikan
dokumen berikut:
fi

fi

fi
<!DOCTYPE html>
<html lang="en">
<head>
<title>Demo Link Internal</title>
</head>
<body>
Menu
<ul>
<li><a href="#pendahuluan">Pendahuluan</a></
li>
<li><a href="#pembahasan">Pembahasan</a></li>
<li><a href="#kesimpulan">Kesimpulan</a></li>
</ul>
<h3 id="pendahuluan">Pendahuluan</h3>
<p>
Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea
commodo consequat.
</p>

<h3 id="pembahasan">Pembahasan</h3>
<p>
Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea
commodo consequat.
</p>

<h3 id="kesimpulan">Kesimpulan</h3>
<p>
Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea
commodo consequat.
</p>
</body>
</html>

Perlu diperhatikan, nilai atribut id tidak boleh sama atau


harus unik di dalam lingkupnya.

Link Email

Link tak hanya sebatas pada dokumen, tetapi juga bisa


dimanfaatkan untuk menunjuk ke suatu alamat email.
Adapun dalam implementasinya, kita tinggal mengubah
alamat URL dengan alamat email yang terlebih dahulu
diberi pre ks mailto.
fi

<!DOCTYPE html>
<html lang="en">
<head>
<title>Demo Link Email</title>
</head>
<body>
<a
href="[Link]
>rickyseptiandypph at smkn2malang dot sch dot
id</a
>
</body>
</html>

Link Gambar

Link tidak hanya direpresentasikan dalam bentuk teks,


tetapi juga bisa berupa gambar. Langkah pembuatan link
gambar pun sangat sederhana, cukup mengapit tag <img>
di antara tag <a>.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Demo Link Gambar</title>
</head>
<body>
<a href="[Link] title="Search with
Google">
<img src="./img/[Link]" border="0"
width="64" />
</a>
</body>
</html>

2. Tabel

Pada umumnya, tabel digunakan untuk menampilkan


data tabular dalam bentuk baris dan kolom. Perpotongan
baris dan kolom di dalam tabel disebut sebagai sel.
Pada prinsipnya, pembuatan tabel sangat sederhana
sekali, hanya masalah pengorganisasian. Semua tabel harus
diawali dengan tag <table>, kemudian ada tiga tag dasar
yang mengikutinya, meliputi:
• Tag <th> atau table heading yang berfungsi
mende nisikan header.
• Tag <tr> atau table row yang berfungsi mende nisikan
baris.
• Tag <td> atau table data yang berfungsi mende nisikan
sel.

fi

fi
fi

Struktur pembentuk tabel dapat dilihat seperti pada


gambar berikut.

Contoh pembuatan tabel diperlihatkan sebagai berikut:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Demo Tabel</title>
</head>
<body>
<table border="1">
<caption>
Label dari tabel
</caption>
<!-- Header -->
<tr>
<th>No</th>
<th>Nama</th>
<th>Alamat</th>
</tr>
<!-- Baris data pertama -->
<tr>
<td>1</td>
<td>Ibnu</td>
<td>Jl. Jombang</td>
</tr>
</table>
</body>
</html>



Pemformatan Tabel

Elemen tabel menyediakan sejumlah atribut yang dapat


digunakan untuk memformat visualisasi tabel. Tiga atribut
pertama yang sering digunakan adalah align (untuk
mengatur posisi), cellspacing (untuk mengatur spasi
antarsel) dan cellpadding (untuk mengatur spasi antara
border sel dengan isinya).

<!DOCTYPE html>
<html lang="en">
<head>
<title>Demo Spasi Tabel</title>
</head>
<body>
<table border="1" align="center" cellspacing="0"
cellpadding="10">
<!-- Header -->
<tr>
<th>No</th>
<th>Nama</th>
<th>Alamat</th>
</tr>
<!-- Baris data pertama -->
<tr>
<td>1</td>
<td>Ibnu</td>
<td>Jl. Jombang</td>
</tr>
</table>
</body>
</html>

Atribut lain yang juga cukup penting adalah width (untuk


menentukan lebar tabel atau sel).

<!DOCTYPE html>
<html lang="en">
<head>
<title>Demo Ukuran Tabel</title>
</head>
<body>
<table border="1" align="center" cellspacing="0"
cellpadding="5">
<tr>
<!-- Mengatur lebar kolom -->
<th width="50">No</th>
<th width="150">Nama</th>
<th width="200">Alamat</th>
</tr>
<!-- Baris data pertama -->
<tr>
<td>1</td>
<td>Ibnu</td>
<td>Jl. Jombang</td>
</tr>
</table>
</body>
</html>

Perhatikan, pengaturan lebar sel tidak perlu dilakukan


untuk semua baris, tetapi cukup salah satu saja.
Bagaimanapun, lebar sel akan selalu sama antara satu
dengan lainnya.



Desain Tabel

Sebuah tabel tidak selalu memiliki ukuran dan jumlah sel


yang sama dalam setiap baris ataupun kolomnya. Sebagai
contoh, mungkin kita perlu melakukan penggabungan
(merge) sel. Dalam konteks elemen tabel, penggabungan sel
dapat dilakukan berdasar baris (rowspan) atau kolom
(colspan).

<!DOCTYPE html>
<html lang="en">
<head>
<title>Demo Span/Merge Sel</title>
</head>
<body>
<table border="1" align="center" cellspacing="0"
cellpadding="5">
<tr>
<th width="50">No</th>
<!-- Gabung kolom nama dan alamat -->
<th width="350" colspan="2">Span Nama dan
Alamat</th>
</tr>
<!-- Baris data pertama -->
<tr>
<!-- Gabung baris 1 dan 2 -->
<td rowspan="2">Span baris 1 dan 2</td>
<td>Ibnu</td>
<td>Jl. Jombang</td>
</tr>
<!-- Baris data kedua -->
<tr>
<td>Vita</td>
<td>Jl. Jakarta</td>
</tr>
</table>
</body>
</html>

3. Form

Form HTML merupakan suatu media untuk memasukkan


data. Di sini form juga terdiri dari komponen-komponen
seperti text eld, button, check box, radio button, dan
sejenisnya. Pembuatan form dapat dilakukan secara
langsung atau memanfaatkan tabel guna memperoleh hasil
yang rapi. Contoh pembuatan form yang melibatkan tabel
diperlihatkan sebagai berikut:

fi

<!DOCTYPE html>
<html lang="en">
<head>
<title>Template Desain Form</title>
</head>
<body>
<h3>Formulir Pendaftaran</h3>
<form action="" method="post">
<table border="0">
<tr>
<td>NIK</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>Nama</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>Jenis Kelamin</td>
<td><input type="radio" />Pria <input
type="radio" />Wanita</td>
</tr>
<tr>
<td>Pekerjaan</td>
<td>
<select name="job">
<option>Guru</option>
<option>Wiraswasta</option>
<option>Lainnya</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="submit" value="simpan" />
<input type="submit" value="batal" />
</td>
</tr>
</table>
</form>
</body>
</html>

Bagian ini hanya menjelaskan secara garis besar bentuk


form sederhana dan cara pembuatannya. Pembahasan
lebih lanjut termasuk pemrosesan datanya akan dijelaskan
di bab pemrograman server-side.

STUDI KASUS
1. Buat desain tabel perbandingan item dengan
memanfaatkan tur pengelompokan. Contoh hasilnya
diperlihatkan seperti gambar berikut.

fi

HTML5

S
ebagaimana diketahui, HTML (Hypertext Markup
Language) merupakan model dokumen yang statis,
artinya begitu dokumen HTML ditampilkan, maka
tidak akan berubah hingga terdapat aktivitas navigasi.
Adapun untuk menjadikan HTML sebagai halaman dinamis
atau aktif, kita dapat memanfaatkan HTML5.
DHTML (Dynamic Hypertext Markup Language) bukan
merupakan suatu bahasa pemprograman, melainkan suatu
istilah untuk membuat halaman web yang dinamis dan
interaktif dengan mengkombinasikan HTML, JavaScript,
DOM (Document Object Model), dan CSS (Cascading Style
Sheet).
Pada modul ini, akan dibahas sebatas web interaktif
dengan menggunakan HTML5 sebagai validasi dari sisi
client, karena validasi sisi client dapat digunakan untuk
menekan overload tra c yang dapat terjadi pada server.

ffi

Mulanya, validasi sisi client memerlukan dukungan


JavaScript, namun HTML5 telah mendukung validasi input
secara built-in yang dapat langsung digunakan tanpa
menggunakan script.
HTML5 dikembangkan oleh W3C (World Wide Web
Consortium) dan WHATWG (Web Hypertext Application
Technolo y Working Group) sejak tahun 2009 setelah W3C
mengakhiri Kelompok Kerja Pengembangan xHTML 2.0.
HTML5 merupakan bahasa markah yang digunakan
untuk menstrukturkan dan menampilkan isi dari World
Wide Web yang merupakan sebuah teknologi inti dari
internet. HTML5 merupakan revisi ke-5 dari HTML dan
hingga bulan Juni 2011 masih dalam pengembangan.
HTML5 merupakan salah satu karya W3C untuk
mende nisikan sebuah bahasa markah tunggal yang dapat
ditulis dengan cara HTML ataupun xHTML. HTML5
merupakan jawaban atas pengembangan HTML 4.01 dan
xHTML 1.1 yang selama ini berjalan terpisah dan
diimplementasikan secara berbeda-beda oleh banyak
perangkat lunak web.
Meski HTML5 dikenal luas oleh para pengembang web
sejak lama, namun HTML5 mulai populer pada April 2010
setelah CEO Apple Inc., Steve Jobs, mengatakan bahwa
dengan pengembangan HTML5, “Adobe Flash sudah tidak
dibutuhkan lagi untuk menyaksikan video atau
menyaksikan konten apapun di web”.
Tujuan utama dari pengembangan HTML5 adalah untuk
memperbaiki teknologi HTML agar mendukung teknologi
multimedia terbaru, mudah dibaca, dan mudah dimengerti
oleh engine. Selain itu, tujuan dari HTML5, antara lain:
• Fitur baru didasarkan pada HTML, JavaScript, DOM,
dan CSS,
fi

• Mengurangi kebutuhan untuk plugin eksternal (seperti


ash),
• Penanganan kesalahan yang lebih baik,
• Lebih banyak markup untuk menggantikan scripting,
• HTML5 merupakan perangkat mandiri.
Banyak web browser yang telah mendukung HTML5,
seperti chrome, safari v.4+, opera, mozilla refox 4+, dan
lain sebagainya. Selain telah didukung oleh banyak web
browser, HTML5 juga memiliki tur baru, antara lain:
• Unsur kanvas untuk menggambar,
• Video dan elemen audio untuk media pemutaran,
• Dukungan yang lebih baik untuk penyimpanan secara
o ine,
• Elemen konten yang lebih spesi k, seperti artikel,
footer, header,
• navigation, section, dan sebagainya,
• Bentuk kontrol form seperti kalender, tanggal, waktu,
e-mail, URL, search, telepon, dan sebagainya.
Berikut ini merupakan kelebihan yang tedapat pada
HTML5, antara lain:
• Dapat ditulis dalam sintaks HTML (dengan tipe media
text/HTML)
• dan XML,
• Integrasi yang lebih baik dengan aplikasi situs dan
pemrosesannya,
• Integrasi (‘inline’) dengan DOCTYPE yang lebih
sederhana,
• Penulisan koden yang lebih e sien,
• Konten yang ada di situs lebih mudah terindeks oleh
search engine.
fl
ffl

fi
fi
fi

fi

LATIHAN
Memberikan Keterangan pada Input-an

Buatlah tampilan form sebagai berikut ini:

Agar form yang dibuat user friendly, maka perlu adanya


keterangan pada input-an. Dengan demikian, user
mengetahui apa yang harus diisikan.
Untuk memberikan keterangan pada input-an, perlu
adanya atribut “placeholder”, contohnya:

<input type="text" name="nama" placeholder="Masukkan


Nama Lengkap Anda" />

Dengan menggunakan atribut “placeholder”, maka


tampilan form akan berubah menjadi seperti berikut ini:



Validasi untuk Input yang harus diisi

Untuk melakukan validasi pada input di atas, perlu


adanya atribut “required” pada input tag, contohnya:

<input type="text" name="nama" placeholder="Masukkan


Nama Lengkap Anda" required>

Apabila atribut “required” telah ditambahkan, maka


input text yang kosong (wajib diisi) tersebut, akan
menampilkan keterangan sebagai berikut:

Dengan menggunakan atribut “required”, maka user


diwajibkan untuk mengisi input-an tersebut (input tidak
boleh null/kosong).

Validasi untuk Menentukan Jumlah Karakter Maksimal

Untuk menentukan jumlah karakter maksimal, perlu


adanya atribut “maxlength”, contohnya:

<input type="text" name="no_hp" maxlength="12"


placeholder="Masukkan Nomor HP" required/>

Apabila atribut “maxlength” telah ditambahkan, maka


tambahkan nilai untuk atribut “maxlength” (pada contoh di
atas, karakter maksimal yang dapat diketikkan pada input-
an nomor telepon adalah sebanyak 12 karakter):

Perhatikan hasil di atas, bahwa terdapat 12 karakter


angka yang telah diketikkan. Ketika mengetik karakter
selanjutnya, maka karakter ke-13 tidak dapat diketikkan.

Validasi Input Tanggal

Untuk memudahkan user sekaligus sebagai validasi


untuk memasukkan tanggal lahir, maka input type dapat
menggunakan “date”, contohnya:

<input type="date" name="tgl_lahir" required />

Dengan menggunakan input type “date” di atas, maka


akan menampilkan tampilan form sebagai berikut:

Validasi Input Email

Untuk melakukan validasi pada input-an email, maka


input type dapat menggunakan “email”, contohnya:

<input type="email" name="email"


placeholder="Masukkan Email" required />

Dengan menggunakan input type “email” di atas, maka


ketika user tidak memasukkan format email yang sesuai,
tampilan form akan menampilkan peringatan sebagai
berikut:

STUDI KASUS
1. Buat form validasi sederhana dengan memanfaatkan
tur build-in HTML5!

Keterangan: Pada input-an nama, input-an hanya dapat


diketikkan huruf dan spasi, sehingga angka dan karakter
lainnya tidak diperbolehkan.
fi



About the Author

Ricky Septiandy (Ricky) is the Teacher of Computer


Systems Networking and Telecommunications at SMK
Negeri 2 Malang. Ricky received his dual jobs as a Teacher
and Full Stack Developer. Currently, Ricky Coding on PHP
and dreaming on PHP. Help school to build complex web
applications serving 2,000+ users with PHP and modern
technologies.

Anda mungkin juga menyukai