MODUL 2 HTML (HyperText Mark-Up Language) Laboratorium

Praktikum Pemrograman Berbasis Web
MODUL 2
HTML
(HyperText Mark-Up Language)
STIMIK
STMIK Pradnya Paramita 2017
Laboratorium
Komputer
PPKIA Pradnya Paramita Malang
[email protected]
Praktikum Pemrograman Berbasis Web
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
 <time> = Mendefinisikan tanggal / waktu
STMIK Pradnya Paramita 2017
[email protected]
Praktikum Pemrograman Berbasis Web
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:[email protected]">
[email protected]</a>.</p>
</footer>
STMIK Pradnya Paramita 2017
[email protected]
Praktikum Pemrograman Berbasis Web
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
<table>
<tr>
<td>
<th>
<caption>
CSS border property
CSS border-collapse
CSS padding property
CSS text-align
CSS border-spacing
STMIK Pradnya Paramita 2017
Definisi
elemen untuk mendefinisikan tabel
elemen untuk menentukan baris tabel
elemen untuk menentukan data tabel
elemen untuk menentukan tabel pos
elemen untuk mendefinisikan judul tabel
Untuk menentukan jarak garis
Untuk menjadikan satu garis
Untuk menambah padding untuk sel
Untuk menyelaraskan teks sel
Untuk mengatur jarak antara sel- sel
[email protected]
Praktikum Pemrograman Berbasis Web
Tag
colspan
rowspan
id
Definisi
untuk membuat rentang sel banyak kolom
untuk membuat rentang sel banyak baris
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
menggunakan property CSS :
Skrip
5,
<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)
}
</style>
STMIK Pradnya Paramita 2017
Untuk
menambahkan
sebuah
border
hasil
[email protected]
Praktikum Pemrograman Berbasis Web
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, selsel 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
<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>
Hasil
Untuk menambahkan keterangan pada tabel kita menggunakan
<caption>, tag <caption> harus ditulis setelah tag <table>
Skrip
Hasil
tag
<table style="width:100%">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
STMIK Pradnya Paramita 2017
[email protected]
Praktikum Pemrograman Berbasis Web
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
Untuk menentukan gaya khusus untuk tabel
menambahkan atribut id ke tabel, contoh:
Skrip
Hasil
khusus,
maka
perlu
<!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>
<td>Jill</td>
STMIK Pradnya Paramita 2017
[email protected]
Praktikum Pemrograman Berbasis Web
<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
untuk mendefinisikan daftar unordered (tidak
<ul>
CSS list-style-type
<ol>
type
<li>
<dl>
<dt>
<dd>
Skrip
berurutan)
untuk menentukan item daftar penanda
untuk mendefinisikan daftar berurutan
menentukan jenis penomoran
untuk menentukan item daftar
untuk mendefinisikan daftar deskripsi
untuk mendefinisikan istilah deskriptif
untuk menggambarkan istilah dalam daftar deskripsi
<!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>
STMIK Pradnya Paramita 2017
Hasil
[email protected]
Praktikum Pemrograman Berbasis Web
<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>
1. Type =”1” : Daftar item diberi
nomor dengan angka (default)
<ol type="1">
2. Type = “A” : Daftar item diberi
<li>Coffee</li>
nomor dengan huruf capital
<li>Tea</li>
3. Type = “a” : Daftar item diberi
<li>Milk</li>
nomor dengan huruf kecil
</ol>
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
<h2>A Description List</h2>
Hasil
<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
Skrip
Hasil
STMIK Pradnya Paramita 2017
[email protected]
Praktikum Pemrograman Berbasis Web
<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
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}
li {
}
Hasil
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>
STMIK Pradnya Paramita 2017
[email protected]
Praktikum Pemrograman Berbasis Web
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
mengatur ulang semua nilai bentuk ke nilai standar.
STMIK Pradnya Paramita 2017
[email protected]
Praktikum Pemrograman Berbasis Web
<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
<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">
Hasil
<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 pradipilih, menambahkan atribut selected untuk pilihan:
Skrip
<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">
Hasil
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.
Skrip
Hasil
STMIK Pradnya Paramita 2017
[email protected]
Praktikum Pemrograman Berbasis Web
<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 pradidefinisikan 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
Username: <input type="text" name="user">
<br><br>
Encryption: <keygen name="security">
<br><br>
<input type="submit">
Hasil
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
<input type="range" id="a" name="a" value="50">
STMIK Pradnya Paramita 2017
[email protected]
Praktikum Pemrograman Berbasis Web
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
<form action="/action_page.php">
Select your favorite color:
<input type="color"
name="favcolor" value="#ff0000">
<input type="submit">
</form>
STMIK Pradnya Paramita 2017
Hasil
[email protected]
Praktikum Pemrograman Berbasis Web
Skrip
<form action="/action_page.php">
Birthday:
<input type="date" name="bday">
<input type="submit">
</form>
Hasil
<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
Menentukan bahwa sebuah field input harus dinonaktifkan
disabled
Menentukan nilai maksimum untuk sebuah field input
max
maxlength
Min
pattern
readonly
Required
Size
Step
Value
Menentukan jumlah maksimum karakter untuk sebuah field
input
Menentukan nilai minimum untuk sebuah field input
untuk Menentukan ekspresi reguler dan memeriksa nilai
terhadap masukan
Menentukan bahwa sebuah field input hanya bisa dibaca
saja (tidak dapat diubah)
Menentukan bahwa sebuah field input diperlukan (harus
diisi)
Menentukan lebar (dalam karakter) dari sebuah field input
Menentukan interval nomor hukum untuk sebuah field input
Menentukan nilai default untuk field input
STMIK Pradnya Paramita 2017
[email protected]
Praktikum Pemrograman Berbasis Web
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>
STMIK Pradnya Paramita 2017
[email protected]
Praktikum Pemrograman Berbasis Web
<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>
STMIK Pradnya Paramita 2017
[email protected]
Praktikum Pemrograman Berbasis Web
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>
STMIK Pradnya Paramita 2017
[email protected]
Praktikum Pemrograman Berbasis Web
<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>
STMIK Pradnya Paramita 2017
[email protected]
Praktikum Pemrograman Berbasis Web
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
File info.htm yang dituju oleh web diatas.
STMIK Pradnya Paramita 2017
[email protected]
Praktikum Pemrograman Berbasis Web
2. Penggunaan tipe checkbox
3. Penggunaan tombol radio dan komentar
4. Pemilihan dengan select
STMIK Pradnya Paramita 2017
[email protected]
Praktikum Pemrograman Berbasis Web
3.5 TUGAS
1.Buatlah seperti tampilan dibawah ini
Nb : untuk kolom Negara isi dengan 1. USA, 2.Australia, 3. Germany
2.Buatlah Tabel
STMIK Pradnya Paramita 2017
[email protected]