bb0a6 modul 2 praktikum pemrograman berbasis web
MODUL 2
HTML
(HyperText Mark-Up Language)
Laboratorium Komputer
(2)
Pertemuan 2
2.1 Tujuan :
1. Mahasiswa dapat memahami dan mengenai
perintah
perintah HTML
2. Mahasiswa dapat membuat beberapa halaman
website sederhana
2.2 Materi :
1. Tabel
2. List
3. Form
4. Semantic HTML
2.3
Teori
2.3.1 Semantic HTML
Semantik adalah studi tentang makna kata-kata dan frase dalam
bahasa. Unsur semantik = elemen dengan makna. Unsur semantik jelas
menggambarkan artinya untuk kedua
belah pihak yaitu
browser dan
pengembang. Contoh elemen non-semantik: <div> dan <span> - tidak
menceritakan apa-apa tentang isinya. Contoh elemen semantik: <form>,
<table>, dan <article> - Jelas mendefinisikan isinya. Banyak situs
web berisi kode HTML seperti: <div id = "nav"> <div class =
"header"> <div id = "footer"> untuk menunjukkan navigasi, header,
dan footer.
HTML5 menawarkan unsur-unsur
semantik baru untuk
menentukan bagian-bagian yang berbeda dari suatu halaman web:
<article> = mendefinisikan sebuah artikel
<aside> =Mendefinisikan konten selain dari konten halaman
<details> = Mendefinisikan rincian tambahan bahwa pengguna dapat melihat atau
menyembunyikan
<figcaption> = Mendefinisikan sebuah caption untuk elemen <figure>
<figure> = Menentukan konten mandiri, seperti ilustrasi, diagram, foto, daftar kode, dll
<footer> = Mendefinisikan untuk dokumen atau bagian footer
<header> = Menentukan untuk dokumen atau bagian header
<main> = Menentukan isi utama dokumen
<mark> = Mendefinisikan teks yang ditandai / disorot
<nav> = Mendefinisikan link navigasi
<section> = Mendefinisikan sebuah bagian dalam sebuah dokumen
<summary> = Mendefinisikan sebuah judul terlihat untuk <details> elemen
(3)
Elemen <section>
elemen mendefinisikan bagian dalam sebuah dokumen.
Sebuah halaman rumah bisa normal dibagi menjadi beberapa bagian
untuk pengenalan, konten, dan informasi kontak.
Skrip
Hasil
<section> <h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p> </section>
elemen <Article>
menentukan independen, konten mandiri. Contoh di
mana elemen <article> dapat digunakan: posting forum, blog post.
Artikel koran
Skrip
Hasil
<article>
<h1>What Does WWF Do?</h1>
<p>WWF's mission is to stop the degradation of our planet's natural environment, and build a future in which humans live in harmony with nature.</p>
</article>
elemen <header>
menentukan header untuk dokumen atau bagian. Elemen
<header> harus digunakan sebagai
wadah untuk konten pengantar.
Contoh berikut mendefinisikan header untuk sebuah artikel:
Skrip
Hasil
<article> <header>
<h1>What Does WWF Do?</h1> <p>WWF's mission:</p> </header>
<p>WWF's mission is to stop the degradation of our planet's natural environment, and build a future in which humans live in harmony with nature.</p>
</article>
elemen <footer>
menentukan footer untuk dokumen atau bagian. Sebuah
footer biasanya berisi penulis informasi dokumen, hak cipta, link ke
persyaratan penggunaan, informasi kontak, dll
Skrip
Hasil
<footer>
<p>Posted by: Hege Refsnes</p>
<p>Contact
information:
<a
href="mailto:someone@example.com">
someone@example.com</a>.</p>
</footer>
(4)
elemen <nav>
mendefinisikan satu set link navigasi. Perhatikan bahwa
tidak semua link dari dokumen harus di dalam elemen <nav>. elemen
<nav> dimaksudkan hanya untuk blok utama link navigasi.
Skrip
Hasil
<nav>
<a href="/html/">HTML</a> | <a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> | <a href="/jquery/">jQuery</a> </nav>
elemen <aside>
mendefinisikan beberapa konten selain dari konten itu
ditempatkan di (seperti sidebar).Samping konten harus terkait dengan
konten sekitarnya.
Skrip
Hasil
<p>My family and I visited The Epcot center this summer.</p>
<aside>
<h4>Epcot Center</h4>
<p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>
Tujuan dari sosok caption adalah menambahkan penjelasan visual untuk
gambar.
<Img> elemen mendefinisikan gambar, <figcaption> mendefinisikan judul.Dalam HTML5, gambar dan keterangan dapat dikelompokkan bersama
dalam sebuah
elemen <figure>:
Skrip
Hasil
<figure>
<img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
<figcaption>Fig.1 - The Pulpit Rock, Norway.</figcaption>
</figure>
2.3.2 Tabel
Untuk menambahkan sebuah table yang baris dan kolomnya dapat anda
sesuaikan kebutuhan table yang anda buat. Elemen table terdiri dari
<tr>, <td> dan <th>. Dimana fungsi masing
masing berbeda, <tr>
digunakan untuk membuat baris, <th> untuk membuat header, <td>
digunakan untuk membuat kolom. <Td> elemen adalah wadah data tabel.
Mereka dapat berisi segala macam elemen HTML; teks, gambar, daftar,
tabel lain, dll. Atribut elemen Tabel pada HTML 5 sebagai berikut :
Tag
Definisi
<table>
elemen untuk mendefinisikan tabel <tr> elemen untuk menentukan baris tabel <td> elemen untuk menentukan data tabel <th> elemen untuk menentukan tabel pos<caption> elemen untuk mendefinisikan judul tabel CSS border property Untuk menentukan jarak garis
CSS border-collapse Untuk menjadikan satu garis CSS padding property Untuk menambah padding untuk sel CSS text-align Untuk menyelaraskan teks sel
(5)
Tag
Definisi
colspan untuk membuat rentang sel banyak kolom
rowspan untuk membuat rentang sel banyak baris
id untuk mendefinisikan identitas satu tabel
Contoh :
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
Pada elemen
Table
HTML 5, Untuk menambahkan
sebuah
border
menggunakan property CSS :
Skrip
hasil
<style>
table, th, td {
border: 1px solid black; (1) border-collapse: collapse; (2) }
th, td {
padding: 15px; (3) }
th {
text-align: left; (4) }
table {
border-spacing: 15px;(5) }
(6)
Jika Anda ingin
garis batas
jadi
dalam satu
garis, tambahkan
properti CSS border-collapse. Sel Padding menentukan ruang antara
isi sel dan perbatasannya. Jika Anda tidak menentukan bantalan,
sel-sel tabel akan ditampilkan tanpa padding. Untuk mengatur padding,
menggunakan properti CSS padding. HTML Table
align kiri. Secara
default, judul tabel yang ada adalah tebal dan berada di tengah.
Untuk menyelaraskan tajuk tabel
maka align berada di
kiri,
menggunakan properti text-align CSS. jarak Padding Border Spacing
Border menentukan ruang antara sel-sel. Untuk mengatur jarak antar
garis, menggunakan properti CSS border-spacing, jika garisnya Cuma
satu maka jaraknya tidak terlihat.
Untuk membuat merger atau
merekatkan beberapa kolom kita membutuhkan atribut colspan
dan
rowspan untuk merekatkan beberapa baris.
Skrip
Hasil
<table style="width:100%"> <tr>
<th>Name</th>
<th colspan="2">Telephone</th> </tr>
<tr>
<td>Bill Gates</td> <td>55577854</td> <td>55577855</td> </tr>
</table>
<h2>Cell that spans two rows:</h2> <table style="width:100%">
<tr>
<th>Name:</th> <td>Bill Gates</td> </tr>
<tr>
<th rowspan="2">Telephone:</th> <td>55577854</td>
</tr> <tr>
<td>55577855</td> </tr>
</table>
Untuk menambahkan keterangan pada
tabel kita menggunakan tag
<caption>, tag <caption> harus ditulis setelah tag <table>
Skrip
Hasil
<table style="width:100%">
<caption>Monthly savings</caption> <tr>
<th>Month</th> <th>Savings</th> </tr>
(7)
<td>January</td> <td>$100</td> </tr>
<tr>
<td>February</td> <td>$50</td> </tr>
</table>
Untuk menentukan gaya khusus untuk
tabel
khusus,
maka perlu
menambahkan atribut id ke tabel, contoh:
Skrip
Hasil
<!DOCTYPE html> <html>
<head> <style>
table, th, td {
border: 1px solid black; border-collapse: collapse; }
th, td {
padding: 5px; text-align: left; }
table#t01 { width: 100%;
background-color: #f1f1c1; }
</style> </head> <body>
<table style="width:100%"> <tr>
<th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr>
<tr>
<td>Jill</td> <td>Smith</td> <td>50</td> </tr>
<tr>
<td>Eve</td> <td>Jackson</td> <td>94</td> </tr>
<tr>
<td>John</td> <td>Doe</td> <td>80</td> </tr>
</table> <br>
<table id="t01"> <tr>
<th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr>
<tr>
(8)
<td>Smith</td> <td>50</td> </tr>
<tr>
<td>Eve</td> <td>Jackson</td> <td>94</td> </tr>
<tr>
<td>John</td> <td>Doe</td> <td>80</td> </tr>
</table> </body> </html>
table#t01 tr:nth-child(even) { background-color: #eee; }
table#t01 tr:nth-child(odd) { background-color:#fff; }
table#t01 th {
background-color: black; color: white;
}
2.3 LITS
List Item (LI) : digunakan untuk mengelompokkan data baik berurutan
(ordered list) maupun yang tidak berurutan (unordered list). Daftar
dapat bersarang di dalam daftar. Daftar item dapat berisi elemen
HTML lainnya
Atribut/elemen Definisi
<ul>
untuk mendefinisikan daftar unordered (tidakberurutan)
CSS
list-style-type
untuk menentukan item daftar penanda<ol>
untuk mendefinisikan daftar berurutantype
menentukan jenis penomoran<li>
untuk menentukan item daftar<dl>
untuk mendefinisikan daftar deskripsi<dt>
untuk mendefinisikan istilah deskriptif<dd>
untuk menggambarkan istilah dalam daftar deskripsiSkrip
Hasil
<!DOCTYPE html> <html>
<body>
<h2>An Unordered HTML List</h2> <ul>
<li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>
<h2>An Ordered HTML List</h2> <ol>
(9)
<li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>
</body> </html>
Unordered (Tidak berurutan) List HTML Dan List unordered dimulai
dengan tag <ul>. Setiap item daftar dimulai dengan tag <li>. Daftar
item akan ditandai dengan peluru (lingkaran hitam kecil) secara
default. Unordered List mempunyai Pilihan penanda dengan menggunakan
Properti CSS list-style-type.
Skrip
<h2>Unordered List with Disc Bullets</h2>
<ul style="list-style-type:disc"> <li>Coffee</li>
<li>Tea</li> <li>Milk</li> </ul>
1. Disc = Menetapkan item daftar penanda dengan peluru (default)
2. Circle = Menetapkan item daftar penanda dengan lingkaran
3. Square = menetapkan item daftar penanda dengan persegi
4. None = tidak menggunakan penanda
Ordered
List
atau
Daftar
HTML
yang
berurutan.Daftar
ini
memerintahkan dengan tag <ol>. Setiap item daftar dimulai dengan tag
<li>. Daftar item akan ditandai dengan angka secara default:
Skrip
<h2>Ordered List with Numbers</h2> <ol type="1">
<li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>
1. Type = 1 : Daftar item diberi
nomor dengan angka (default)
2. Type = A : Daftar item diberi
nomor dengan huruf capital
3. Type = a : Daftar item diberi
nomor dengan huruf kecil
4. Type = I : Daftar item diberi
nomor dengan huruf romawi besar
5. Type = i : Daftar item diberi
nomor dengan huruf romawi kecil
HTML juga mendukung daftar deskripsi.Sebuah daftar deskripsi adalah
daftar
istilah,
dengan
deskripsi
setiap
istilah.
Tag
<dl>
mendefinisikan daftar deskripsi,
tag
<dt> mendefinisikan istilah
(nama), dan Tag <dd> menjelaskan setiap istilah:
Skrip
Hasil
<h2>A Description List</h2> <dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd> <dt>Milk</dt>
<dd>- white cold drink</dd> </dl>
List atau daftar juga bisa
bersarang,
Daftar item dapat berisi
daftar baru, dan elemen HTML lainnya, seperti gambar dan link, dll
(10)
<h2>A Nested List</h2> <ul>
<li>Coffee</li> <li>Tea
<ul>
<li>Black tea</li> <li>Green tea</li> </ul>
</li>
<li>Milk</li> </ul>
Daftar HTML bisa ditata dalam berbagai cara dengan CSS.
Salah satu cara
yang populer adalah gaya daftar horizontal, untuk membuat menu:
Skrip
Hasil
<!DOCTYPE html> <html>
<head> <style> ul {
list-style-type: none; margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333; }
li {
float: left; }
li a {
display: block; color: white;
text-align: center; padding: 16px;
text-decoration: none; }
li a:hover {
background-color: #111111; }
</style> </head> <body> <ul>
<li><a href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a
href="#contact">Contact</a></li> <li><a
href="#about">About</a></li> </ul>
</body> </html>
(11)
2.4. HTML Forms
Pada saat membuat form anda bisa meletakkan kontrol - kontrol pada
form untuk memperbolehkan inputan dari user. Semua kontrol biasanya
di letakkan di antara tag <FORM></FORM>
tapi anda juga bisa
meletakkan kontrol diluar tag tersebut. Untuk menambahkan kontrol
gunakan tag <input>.
Kegunaan Form
Berikut ini beberapa contoh kegunaan Form dalam web:
1. memperoleh data-data user baik nama, alamat dan data lainnya
2. memperoleh informasi pembelian secara online
3. memperoleh feedback dari user mengenai website anda
Pada dasarnya tag <Form> dan <Input> digunakan bersama
sama untuk
meminta masukan dari user kemudian dikirimkan ke server. Tag <Form>
menyediakan kerangkanya. Tag <Input> menyediakan elemennya.
Standar penulisan form adalah sebagai berikut:
<Form Method = POST / GET Action = URL >
...
</Form>
Attribute
Method
memiliki dua nilai, yaitu
POST
dan
GET.
Method
GET
berfungsi untuk mengirimkan data pada server dengan cara meletakkan
data pada bagian akhir
URL
(
Uniform Resource Locator
) yang ditunjuk.
Method
POST
berfungsi untuk mengirimkan datanya secara terpisah.
Jika data masukkan terlalu banyak, disarankan menggunakan method
POST
.
Attribut ACTION berisi URL dari program / dokumen yang berisi
scripting yang dipanggil oleh form tersebut.
Atribut
Keterangan
Name
nama untuk form yang berlaku
Method
GET = data yang dikirim melalui URL address
POST = data yang dikirimkan bersama HTTP header
Action
URL / File yang digunaka untuk menangkap dan
mengolah nilai
2.4.1 Elemen Input
Bentuk elemen yang paling penting adalah
elemen
<input>.
elemen
<Input> dapat ditampilkan dalam beberapa cara, tergantung pada jenis
atribut. Macam
macam elemen input:
<Input type = "text">
mendefinisikan satu baris kolom input teks.
<Input type = "password">
mendefinisikan sebuah kolom password
dengan karakter yang ditampilkan lingkaran atau bintang.
<Input type = "submit">
mendefinisikan tombol untuk mengirimkan data
formulir ke bentuk-handler. Bentuk-handler biasanya halaman server
dengan script untuk memproses input data.
<Input type = "reset">
mendefinisikan sebuah tombol reset yang akan
(12)
<Input type = "radio">
mendefinisikan tombol radio. Tombol radio
hanya bisa di[ilih HANYA SATU dari sejumlah pilihan
<Input type = "checkbox">
mendefinisikan sebuah kotak
yang bisa
dicentang. Pengguna bisa tidak memilih atau memilih lebih dari satu.
Skrip Hasil
<form action="/action_page.php"> First name:<br>
<input type="text" name="firstname"> <br>
Last name:<br>
<input type="text" name="lastname"> <br><br>
<input type="submit"> </form>
User password:<br>
<input type="password" name="psw"> <input type="submit" value="Submit"> <form action="/action_page.php">
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other<br><br>
<input type="submit"> </form>
<form action="/action_page.php">
<input type="checkbox" name="vehicle1" value="Bike">I have a bike
<br>
<input type="checkbox" name="vehicle2" value="Car">I have a car
<br><br>
<input type="submit"> </form>
Elemen
<Select>
mendefinisikan daftar drop-down.
<Option> elemen
mendefinisikan opsi yang bisa dipilih. Secara default, item pertama
dalam daftar drop-down yang dipilih. Untuk menentukan pilihan
pra-dipilih, menambahkan atribut
selected
untuk pilihan:
Skrip
Hasil
<select name="cars">
<option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select>
<br><br>
<input type="submit">
elemen <textarea>
mendefinisikan field input multi-line (text area).
Atribut
rows
menentukan jumlah terlihat baris dalam area teks.
Atribut
cols
menentukan lebar terlihat dari area teks.
(13)
<form >
<textarea name="message" rows="10" cols="30"> The cat was playing in the garden.</textarea> <br>
<input type="submit"> </form>
elemen <button> mendefinisikan sebuah tombol diklik
Skrip
Hasil
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
Pada HTML 5 tabel terdapat beberapa element baru yaitu : elemen
<datalist> menentukan daftar pilihan yang telah ditentukan untuk
elemen <input>. Pengguna akan melihat daftar drop-down pilihan
pra-didefinisikan sebagai mereka input data. Daftar atribut dari elemen
<input>, harus mengacu pada atribut id dari elemen <datalist>.
Skrip
Hasil
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist>
<input type="submit"> </form>
Tujuan dari elemen <keygen> adalah untuk menyediakan cara yang aman
untuk mengotentikasi pengguna. elemen <keygen> menentukan bidang key
generator-pair dalam formulir.Ketika formulir dikirimkan, dua tombol
dihasilkan, satu pribadi dan satu publik. Kunci pribadi disimpan
secara lokal, dan kunci publik dikirim ke server.Kunci publik dapat
digunakan untuk menghasilkan sertifikat klien untuk mengotentikasi
pengguna di masa depan.
Skrip
Hasil
Username: <input type="text" name="user"> <br><br>
Encryption: <keygen name="security"> <br><br>
<input type="submit">
elemen <output> merupakan hasil perhitungan (seperti yang dilakukan
oleh
script). melakukan perhitungan dan menampilkan hasil dalam elemen <output>.<form action="/action_page.php"
oninput="x.value=parseInt(a.value)+parseInt(b.valu e)">
0
(14)
100 +
<input type="number" id="b" name="b" value="50"> =
<output name="x" for="a b"></output> <br><br>
<input type="submit"> </form>
Elemen Inputan baru di HTML 5,
jenis
inputan
baru yang tidak
didukung oleh browser web yang lebih lama, akan tetapi cara kerjanya
seperti <input type = "text">. Berikut elemen inputan yang baru di
HTML 5 :
<Input type = "color">
digunakan untuk field input yang harus berisi
warna.
<Input type = "date">
digunakan untuk field input yang harus berisi
tanggal.
Tergantung pada dukungan browser, tanggal pemetik dapat
muncul di bidang masukan
<Input type = "datetime-local">
menentukan field input tanggal dan
waktu, dengan tidak ada zona waktu.
<Input type = "email">
digunakan untuk field input yang harus berisi
alamat email. Tergantung pada dukungan browser, alamat e-mail dapat
secara otomatis divalidasi ketika disampaikan. Beberapa smartphone
mengenali jenis email, dan menambahkan ".com" ke keyboard untuk
mencocokkan masukan email.
<Input type = "month">
memungkinkan pengguna untuk memilih bulan dan
tahun.
<Input type = "angka">
mendefinisikan sebuah field input numerik.
Anda juga dapat mengatur pembatasan apa nomor yang diterima. Contoh
berikut menampilkan field input numerik, di mana Anda dapat
memasukkan nilai dari 1 sampai 5:
<input type = "range">
mendefinisikan kontrol untuk memasukkan nomor
yang nilainya sebenarnya tidak penting (seperti kontrol slider).
Kisaran default adalah 0 sampai 100. Namun, Anda dapat mengatur
pembatasan nomor apa yang diterima dengan min, max, dan value.
<Input type = "search">
digunakan untuk bidang pencarian (kolom
pencarian berperilaku seperti kolom teks biasa).
<Input type = "tel">
digunakan untuk field input yang harus berisi
nomor telepon.
<input type = "waktu">
memungkinkan pengguna untuk memilih waktu
(tidak ada zona waktu)
<Input type = "url">
digunakan untuk field input yang harus berisi
alamat URL.Tergantung pada dukungan browser, bidang url dapat secara
otomatis divalidasi ketika disampaikan.Beberapa smartphone mengenali
jenis url, dan menambahkan ".com" ke keyboard untuk mencocokkan
masukan url.
<input type = "week">
memungkinkan pengguna untuk memilih satu
minggu dan tahun.
Skrip Hasil
<form action="/action_page.php"> Select your favorite color: <input type="color"
name="favcolor" value="#ff0000"> <input type="submit">
(15)
Skrip Hasil <form action="/action_page.php">
Birthday:
<input type="date" name="bday"> <input type="submit">
</form>
<form action="/action_page.php"> Enter a date before 1980-01-01:<br> <input type="date" name="bday" max="1979-12-31"><br><br>
Enter a date after 2000-01-01:<br> <input type="date" name="bday" min="2000-01-02"><br><br> <input type="submit"> </form>
<form action="/action_page.php"> Birthday (date and time): <input type="datetime-local" name="bdaytime">
<input type="submit" value="Send"> </form>
<form action="/action_page.php"> E-mail:
<input type="email" name="email"> <input type="submit">
</form>
<form action="/action_page.php"> Birthday (month and year): <input type="month"
name="bdaymonth">
<input type="submit"> </form>
<form action="/action_page.php"> Quantity (between 1 and 5): <input type="number"
name="quantity" min="1" max="5"> <input type="submit">
</form>
Aturan masukan/ Inputan pada HTML5.
Berikut adalah daftar dari beberapa aturan masukan umum:
Atribut
Deskripsi
disabled
Menentukan bahwa sebuah field input harus dinonaktifkanmax
Menentukan nilai maksimum untuk sebuah field input maxlength Menentukan jumlah maksimum karakter untuk sebuah fieldinput
Min Menentukan nilai minimum untuk sebuah field input pattern untuk Menentukan ekspresi reguler dan memeriksa nilai
terhadap masukan
readonly Menentukan bahwa sebuah field input hanya bisa dibaca saja (tidak dapat diubah)
Required Menentukan bahwa sebuah field input diperlukan (harus diisi)
Size Menentukan lebar (dalam karakter) dari sebuah field input Step Menentukan interval nomor hukum untuk sebuah field input Value Menentukan nilai default untuk field input
(16)
3.4 LATIHAN PRAKTIKUM
3.4.1 PENGGUNAAN TABEL
1. Membuat garis tabel menjadi satu garis.
<!DOCTYPE html> <html>
<head> <style>
table, th, td {
border: 1px solid black;
border-collapse: collapse; }
th, td {
padding: 5px; text-align: left; }
</style> </head> <body>
<table style="width:100%"> <tr>
<th>First Name</th> <th>Last Name</th> <th>Points</th> </tr>
<tr>
<td>Jill</td> <td>Smith</td> <td>50</td> </tr>
<tr>
<td>Eve</td> <td>Jackson</td> <td>94</td> </tr>
</table> </body> </html>
2.
Membuat meja lebar 300 piksel
<!DOCTYPE html> <html>
<head> <style>
table, th, td {
border: 1px solid black; border-collapse: collapse; }
th, td {
padding: 5px; text-align: left; }
</style> </head> <body>
<table style="width:300px">
<tr>
<th>First Name</th> <th>Last Name</th>
(17)
<th>Points</th> </tr>
<tr>
<td>Jill</td> <td>Smith</td> <td>50</td> </tr>
<tr>
<td>Eve</td> <td>Jackson</td> <td>94</td> </tr>
</table> </body> </html>
3. Menambahkan keterangan dengan huruf "Nama" ke Tabel
<!DOCTYPE html> <html>
<head> <style>
table, th, td {
border: 1px solid black; border-collapse: collapse; }
th, td {
padding: 5px; text-align: left; }
</style> </head> <body>
<table style="width:100%">
<caption>Names</caption>
<tr>
<th>First Name</th> <th>Last Name</th> <th>Points</th> </tr>
<tr>
<td>Jill</td> <td>Smith</td> <td>50</td> </tr>
<tr>
<td>Eve</td> <td>Jackson</td> <td>94</td> </tr>
</table> </body> </html>
4. Ubah garis tabel menjadi 5 piksel, dan berwarna merah.
<!DOCTYPE html> <html>
<head> <style>
(18)
table, th, td {
border: 5px solid red;
}
th, td {
padding: 5px; text-align: left; }
</style> </head> <body>
<table style="width:100%"> <tr>
<th>First Name</th> <th>Last Name</th> <th>Points</th> </tr>
<tr>
<td>Jill</td> <td>Smith</td> <td>50</td> </tr>
<tr>
<td>Eve</td> <td>Jackson</td> <td>94</td> </tr>
</table> </body> </html>
5.
menyelaraskan teks dalam tabel disebelah kiri
<!DOCTYPE html> <html>
<head> <style>
table, th, td {
border: 1px solid black; border-collapse: collapse; padding: 5px;
text-align: left;
}
</style> </head> <body>
<table style="width:100%"> <tr>
<th>First Name</th> <th>Last Name</th> <th>Points</th> </tr>
<tr>
<td>Jill</td> <td>Smith</td> <td>50</td> </tr>
<tr>
<td>Eve</td> <td>Jackson</td>
(19)
<td>94</td> </tr>
</table> </body> </html>
6. Menambahkan warna latar belakang hitam dengan teks putih untuk
semua baris tabel.
<!DOCTYPE html> <html>
<head> <style>
table, th, td {
border: 1px solid black; text-align: left;
} tr {
background-color : black; color : white;
}
</style> </head> <body>
<table style="width:100%"> <tr>
<th>First Name</th> <th>Last Name</th> <th>Points</th> </tr>
<tr>
<td>Jill</td> <td>Smith</td> <td>50</td> </tr>
<tr>
<td>Eve</td> <td>Jackson</td> <td>94</td> </tr>
</table> </body> </html>
2. Penggabungan sel dengan tag <ROWSPAN> dan <COLSPAN>
a. Atribut ROWSPAN ditempatkan pada tag <TD>
(20)
b. Atribut COLSPAN bisa ditempatkan pada tag <TD> atau <TH>
3. Pengaturan jarak dalam tabel :
CELLSPACING mengatur jarak bagian sel terhadap tepi dalam bingkai
tabel.
CELLPADDING mengatur jarak teks terhadap tepi kiri.
3.4.2 PENGGUNAAN FORM
1. Input data dengan input
(21)
2. Penggunaan tipe checkbox
3. Penggunaan tombol radio dan komentar
(22)
3.5 TUGAS
1.Buatlah seperti tampilan dibawah ini
Nb : untuk kolom Negara isi dengan 1. USA, 2.Australia, 3. Germany
2.Buatlah Tabel
(1)
<th>Points</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table> </body> </html>
3. Menambahkan keterangan dengan huruf "Nama" ke Tabel
<!DOCTYPE html><html> <head> <style>
table, th, td {
border: 1px solid black; border-collapse: collapse; }
th, td {
padding: 5px; text-align: left; } </style> </head> <body> <table style="width:100%"> <caption>Names</caption> <tr> <th>First Name</th> <th>Last Name</th> <th>Points</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table> </body> </html>
4. Ubah garis tabel menjadi 5 piksel, dan berwarna merah.
<!DOCTYPE html><html> <head> <style>
(2)
table, th, td {
border: 5px solid red; }
th, td {
padding: 5px; text-align: left; } </style> </head> <body> <table style="width:100%"> <tr> <th>First Name</th> <th>Last Name</th> <th>Points</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table> </body> </html>
5.
menyelaraskan teks dalam tabel disebelah kiri
<!DOCTYPE html><html> <head> <style>
table, th, td {
border: 1px solid black; border-collapse: collapse; padding: 5px; text-align: left; } </style> </head> <body> <table style="width:100%"> <tr>
(3)
<td>94</td> </tr>
</table> </body> </html>
6. Menambahkan warna latar belakang hitam dengan teks putih untuk
semua baris tabel.
<!DOCTYPE html> <html>
<head> <style>
table, th, td {
border: 1px solid black; text-align: left;
} tr {
background-color : black; color : white;
} </style> </head> <body> <table style="width:100%"> <tr> <th>First Name</th> <th>Last Name</th> <th>Points</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table> </body> </html>
2. Penggabungan sel dengan tag <ROWSPAN> dan <COLSPAN>
a. Atribut ROWSPAN ditempatkan pada tag <TD>
(4)
b. Atribut COLSPAN bisa ditempatkan pada tag <TD> atau <TH>
3. Pengaturan jarak dalam tabel :
CELLSPACING mengatur jarak bagian sel terhadap tepi dalam bingkai
tabel.
CELLPADDING mengatur jarak teks terhadap tepi kiri.
3.4.2 PENGGUNAAN FORM
1. Input data dengan input
(5)
2. Penggunaan tipe checkbox
3. Penggunaan tombol radio dan komentar
(6)