PERTEMUAN 2

HTML (HYPERTEXT MARKUP LANGUAGE)

1. Tujuan Pembelajaran
Pada pertemuan ini akan dijelaskan tentang form,frameset. Setelah menyelesaikan
materi pada pertemuan ini, mahasiswa mampu Mahasiswa mampu menjelaskan HTML
5 dan implementasinya

2. Materi
Form merupakan tempat penginputan data sebelum diproses oleh sistem. salah satunya
adalah form login, form comment, form data user, dan lain sebagainya. untuk proses
penginputan data dari form akan kita bahas di materi PHP, MYSQL, dan JavaScript. tag
yang digunakan untuk membuat form ini adalah tag <form> yang didalamnya bisa
berupa <input>, <textarea>, <option> dan <select>.

Form memiliki atribut berupa action dan method. Atribut action menentukan
URL yang akan dijalankan dan menerima semua masukan pada formulir. Jika action
tidak disebutkan akan dikirim ke URL yang sama dengan halaman web itu sendiri,
sedangkan atribut method berisikan metode form melakukan proses pengiriman
(GET/POST).
 GET→informasi dikirim dengan URLnya
 POST→informasi dikirim terpisah dengan URLnya.

Sintaks :
<form action="action" method="GET|POST">
......
</form>

Elemen INPUT
Elemen input berfungsi untuk mendefinisikan input yang akan dimasukkan pengguna.
Elemen ini mempunyai atribut yaitu name, size, type, value, checked.

1
Atribut name mendefinisikan nama dari input kontrol form, atribut size mendefinisikan
ukuran teks pada input kontrol, type mendefinisikan bentuk-bentuk input kontrol, value
mendefinisikan nilai awal/reset/submit, checked mendefinisikan pilihan terpilih pada
type radio/checkbox. Element ini tidak mempunyai tag penutup dan harus berada di dalam
elemen FORM.

Sintaks :

<input name="name"
size="number" type="value" value="isi yang ditampilkan di browser"
checked >

Atribut type dapat berisi :

Value Deskripsi
button Mendefinisikan sebuah tombol yang bisa diklik (biasanya
digunakan dengan sebuah script Javascript)
checkbox Mendefinisikan sebuah checkbox
color (HTML5) Mendefinisikan color picker
date (HTML5) Mendefinisikan pengaturan tanggal (year, month, day(no time))
datetime-local Mendefinisikan sebuah pengaturan tanggal dan waktu (year,
(HTML5) month, day, time (no timezone))
email (HTML5) Mendefinisikan sebuah tempat untuk sebuah alamat email.
file Mendefinisikan sebuah area untuk memilih sebuah file dan sebuah
tombol “Browse” (untuk upload file)
hidden Mendefinisikan sebuah area input yang disembunyikan
image Mendefinisikan sebuah gambar sebagai tombol
month (HTML5) Mendefinisikan sebuah pengaturan bulan dan tahun (no timezone)
number (HTML5) Mendefinisikan sebuah area untuk memasukkan sebuah angka
password Mendefinisikan sebuah area password
radio Mendefinisikan sebuah radio button
range (HTML5) Mendefinisikan sebuah pengaturan range (seperti slide control)
reset Mendefinisikan tombol reset
search (HTML5) Mendefinisikan sebuah text area untuk memasukkan string
pecarian
submit Mendefinisikan tombol submit
tel (HTML5) Mendefinisikan text area untuk memasukkan sebuah nomor
telepon
text Default. Mendefinisikan sebuah text area satu baris.
time (HTML5) Mendefinisikan sebuah pengaturan untuk memasukkan waktu (no
timezone)
url (HTML5) Mendefinisikan sebuah area untuk memasukkan alamat URL
week Mendefinisikan sebuah pengaturan minggu dan tahun (no
timezone)

2
Elemen SELECT
atribut SELECT berfungsi untuk mendefinisikan opsi pilihan pada form kontrol. Element ini
mempunyai attribute yaitu name, size, multiple(diizinkan banyak pilihan). Element
ini harus berada di dalam element FORM.

Sintaks :
<select name="name" size="number" multiple >
......
</select>

Elemen OPTION
Elemen OPTION mendefinisikan opsi pilihan pada menu SELECT. Elemen ini mempunyai
atribut selected dan value. Atribut Selected berisi opsi terpilih dan atribut
value berisi nilai elemen option.
Sintaks :
<option selected value="number" >
.....................
</option>

Elemen TEXTAREA
Elemen TEXTAREA berfungsi sebagai input kontrol form untuk memasukkan teks lebih
dari satu baris. Elemen ini mempunyai attribute yaitu name, cols, rows. Attribute
name mendefinisikan nama input kontrol form elemen textarea, atribut cols
mendefinisikan jumlah kolom textarea yang terlihat, dan attribute rows mendefinisikan
jumlah baris textarea yang terlihat. Element ini harus berada di dalam element FORM
Sintaks:

<textarea name="name" cols="number" rows="number" >
.....................
</textarea>

3
Langkah-langkah praktikum :
Langkah Keterangan
Pertama pada praktikum ini akan membuat form dengan elemen-elemen seperti pada
gambar :

2 Buat sebuah file bernama buatForm.html dan simpan file tersebut di dalam folder
dasarWeb yang telah dibuat pada Praktikum 1.
3 Ketikkan kode di bawah ini dalam buatForm.html

Simpan file tersebut kemudian buka browser Anda lalu ketikkan alamat :
5 localhost/dasarWeb/buatForm.html
6 Amati apa yang tampil pada browser.
7 Catat hasil pengamatan dan pemahamanmu
Tambahkan satu input text yang akan digunakan untuk memasukkan alamat, letakkan di
bawah elemen input text untuk memasukkan nama.
8
Simpan file lalu jalankan melalui browser :
localhost/dasarWeb/buatForm.html

4
9 Amati apa yang berubah pada tampilan
Catat kode program yang anda tambahkan pada langkah 7
10

Tambahkan kode program berikut ini di bawah radio button yang terakhir, di atas tombol
submit dan clear.

11

Apakah tampilan pada browser menjadi seperti di bawah ini ?.

12

Jawab :

Dari kode yang anda ubah di soal no 32, tambahkan satu input checkbox yang akan
13 menampilkan pilihan berisi “I have a plane” dan tanda  pindah dari opsi “I have a bike”
ke opsi chexbox “I have a plane.
Simpan pekerjaan anda lalu jalankan kembali pada browser alamat berikut :
14 localhost/dasarWeb/buatForm.html
Tuliskan di sini kode seluruh pengaturan checkbox termasuk kode pengaturan checkbox
15
yang baru saja anda tambahkan .
Tambahkan kode program di langkah ke 17 ke dalam kode program yang anda ubah di
16
langkah 13, tempatkan di bawah pengaturan checkbox dan di atas pengaturan tombol.

5
17

Simpan pekerjaan anda lalu jalankan kembali pada browser alamat berikut :
18 localhost/dasarWeb/buatForm.html
Catat di sini apa yang dimaksud dengan potongan program (cara kerja) pada langkah 17.
19

Dari kode program yang anda ubah pada langkah 17, tambahkan satu pilihan negara yaitu
19
Indonesia dan default pilihan berada di negara Indonesia.
Simpan pekerjaan anda lalu jalankan kembali pada browser alamat berikut :
20 localhost/dasarWeb/buatForm.html
20 Catat di sini perubahannya.
21 Dari kode program pada langkah 17, ubah nilai size=1 menjadi size=2.
Simpan pekerjaan anda lalu jalankan kembali pada browser alamat berikut :
22 localhost/dasarWeb/buatForm.html
23 Catat di sini perubahannya.
24 Dari kode program yang anda ubah pada langkah 21, kembalikan nilai size=1.
Simpan pekerjaan anda lalu jalankan kembali pada browser alamat berikut :
25 localhost/dasarWeb/buatForm.html
Dari kode program yang anda ubah pada langkah 24, tambahkan sebuah single text area
untuk memasukkan password, menggunakan input dengan tipe password, sehingga
26
tampilan akan menjadi seperti ini :

6
 Simpan pekerjaan anda lalu jalankan kembali pada browser alamat berikut :
27 localhost/dasarWeb/buatForm.html
28 Catat di sini kode yang anda tambahkan pada langkah 26.
Dari kode program pada langkah 28, tambahkan sebuah text area untuk mengetik
komentar panjang dengan menggunakan tag <textarea> dan </textarea>,
sehingga tampilan akan menjadi seperti di bawah ini :

29

7
 Simpan pekerjaan anda lalu jalankan kembali pada browser alamat berikut :
30 localhost/dasarWeb/buatForm.html
Catat di sini kode yang Anda tambahkan pada langkah 29. (soal no 31)
31

Perhatikan pada tag <form> terdapat atribut method=”POST”. Jalankan kembali

pada browser alamat berikut : localhost/dasarWeb/buatForm.html,isi
32
form, lalu klik pada tombol Send. Perhatikan pada alamat URL di halam an
yang di tuju setelah tombol S end diklik.
Buka kembali kode program buatForm.html, ubah method dari POST menjadi
GET. Simpan dan jalankan kembali pada browser alamat berikut :
33 localhost/dasarWeb/buatForm.html,isi form, lalu klik pada tombol
Send. Perhatikan pada alamat URL di halaman yang di tuju setelah tombol
send diklik. Amati dan bandingkan perbedaan antara method GET dan POST.
34 Catat hasil pengamatanmu di sini.

HTML5 adalah bahasa markup yang digunakan untuk penataan dan konten menyajikan di
World Wide Web. Ini adalah versi kelima dan saat ini standar HTML. Diterbitkan bulan
Oktober 2014 oleh World Wide Web Consortium (W3C) untuk meningkatkan bahasa
dengan dukungan untuk multimedia terkini, sambil menjaga kedua dengan mudah dibaca
oleh manusia dan konsisten dipahami oleh komputer dan perangkat seperti web browser,
parser, dll HTML5 dimaksudkan untuk menggolongkan tidak hanya HTML 4, tetapi juga
XHTML 1 dan DOM Level 2 HTML.

Unsur-unsur baru yang paling menarik adalah:

▪ Elemen semantik baru seperti <header> , <footer> , <article> , dan <section> .
▪ Kontrol bentuk baru atribut seperti nomor, tanggal, waktu, kalender, dan
jangkauan.
▪ Unsur-unsur baru grafis: <svg> dan <canvas> .
▪ Unsur-unsur baru multimedia: <audio> dan <video>
Yang paling menarik baru API adalah:
• Geolocation HTML
• Drag HTML dan Drop
• HTML Penyimpanan Lokal
• HTML Aplikasi Cache
• Pekerja Web HTML
• HTML SSE

8
Mendefinisikan HTML5 Elemen sebagai Blok Elements
HTML5 mendefinisikan delapan elemen HTML semantik baru. Semua ini adalah unsur-
unsur blok-tingkat.
Untuk mengamankan perilaku yang benar di browser lama, Anda dapat mengatur properti
tampilan CSS untuk memblokir:

Langkah Keterangan
1 Buatlah dengan menambahkan elemen baru yang disebut <myHero> untuk
HTML, dan mendefinisikan gaya tampilan untuk itu

2 Simpan pekerjaan anda lalu jalankan Kembali pada browser dan simpan
dengan nama myhero.html
3 Amati perubahannya dan catat hasilnya

HTML Geolocation API digunakan untuk mendapatkan posisi geografis pengguna.

Metode getCurrentPosition()ini digunakan untuk mengembalikan posisi pengguna.

9
 Property Returns

coords.latitude The latitude as a decimal number (always

returned)

coords.longitude The longitude as a decimal number (always

returned)

coords.accuracy The accuracy of position (always returned)

coords.altitude The altitude in meters above the mean sea

level (returned if available)

coords.altitudeAccuracy The altitude accuracy of position (returned if

available)

coords.heading The heading as degrees clockwise from

North (returned if available)

coords.speed The speed in meters per second (returned if

available)

timestamp The date/time of the response (returned if

available)

Contoh di bawah ini mengembalikan garis lintang dan garis bujur dari posisi pengguna:
Langkah Keterangan
1 Buatlah program berikut ini

10
 2 Simpan pekerjaan anda lalu jalankan Kembali pada browser dan simpan
dengan nama location.html
3 Amati perubahannya dan catat hasilnya
Latihan
iFrame adalah singkatan dari Inline Frame, sebuah komponen dari file HTML yang
memungkinkan Anda menyematkan video, dokumen, dan file lainnya ke dalam sebuah
halaman website.
Proses untuk menyematkan file dengan teknik ini disebut sebagai embed iFrame. Pada
sebuah file HTML, penggunaan iFrame ditandai dengan adanya tag <iframe>.
Ketika menggunakan iFrame HTML, file yang disematkan bisa berasal dari halaman lain
website Anda. Namun, bisa juga dari website lain. Contoh yang paling umum dari
penggunaan iFrame adalah penyematan video YouTube.
Langkah Keterangan
1 Iframe pada HTML dibuat dengan menggunakan tag <iframe>. Lalu
diberi atribut src untuk menentukan lokasi halaman yang ditampilkan.
Untuk mengatur lebar dan tinggi iframe dapat menggunakan
atribut height dan width

2 Buat sebuah file bernama buatForm.html dan simpan file tersebut di

dalam folder dasarWeb yang telah dibuat
3 Amati perubahannya dan catat hasilnya
4 Membuka link pada iframe yang kita inginkan dengan menggunakan
atribut target. Nah, inilah perbedaan antara link biasa dan iframe. Pada
tag <a> ditambahkan atribut target, pada tag <iframe> ditambahkan
atribut name
5 Pertama, buat file login.html dan isi dengan kode di bawah ini:

11
Kedua, buat file daftar.html dan isi dengan kode di bawah ini:

Ketiga, buat file index.html lalu isi dengan kode di bawah ini:

Simpan dan Amati perubahannya dan catat hasilnya

Hasilnya untuk halaman login berikut ini

12
 Untuk tampilan Daftar

Referensi :
1) Jason Beaird, The principles of Beautiful Web Design
2) Rian Ariona, Belajar HTML dan CSS ( Tutorial Fundamental dalam mempelajari
HTML dan CSS)
3) Adi Hadisaputra, HTML dan CSS Fundamental dari Akar menuju Daun John
Duckett,HTML dan CSS design and build websites

13