Author : Minarni, S.Kom.

,MM
Mata Kuliah : Internet Multimedia
Lanjut

HTML5
•
HTML Links
• Link Images
• HTML Plug-ins
• HTML Youtube
• HTML Input
• HTML Input Attribute
 HTML5
HTML Links

• Link digunakan hampir di semua halaman web. Link

berfungsi untuk berpindah dari halaman satu ke halaman
lainnnya dengan cara meng-klik objek link tersebut. Link
bisa berupa teks yang pada saat di klik bisa menuju ke
halaman lain atau bisa berupa image yang juga bisa di klik
untuk menuju halaman lainnya.
• LINK ditandai dengan tag <a> ditutup dengan </a>
• Tag <a> di ikuti atribut href untuk menunjukkan alamat
yang dituju.
 HTML5
HTML Links

• Syntax penulisan LINK

• Contoh :
 HTML5
HTML Links

• LOCAL LINK
• Jika ingin menampilkan LINK atau halaman html yang kita
punya, cukup dengan menuliskan nama file HTML nya
saja, tidak perlu menggunakan tanda slash (//) atau http.
 HTML5
HTML Link - The target Attribute
• Atribut target menentukan di mana letak atau tempat tujuan
dokumen dibuka.
• Atribut target _blank digunakan jika ingin membuka
dokumen di jendela baru atau tab baru
• Contoh :
<a href="http://www.unda.ac.id" target="_blank">
Visit WEB UNDA in new tab</a>
 HTML5
HTML Link Images
Link Images
• Digunakan untuk membuat gambar sebagai link, pada saat
gambar di klik maka akan menuju halaman lain.

<a href="link2.html">
<img src="smiley.jpg" width="42" height="42">
</a>
 HTML5
HTML Plug-ins
<embed width="400" height="50" src="bookmark.swf">

Web browser telah mendukung elemen <embed> sudah sejak lama. Namun, <embed>
belum menjadi bagian dari spesifikasi HTML sebelum HTML5.
<Object> elemen didukung oleh semua browser.
<Object> digunakan untuk memasang plug-in (seperti applet Java, PDF Readers, Flash
Players) di halaman web.

<object width="400" height="50" data="bookmark.swf"></object>

 HTML5
HTML Youtube

<iframe width="420" height="315"

src="https://www.youtube.com/embed/GOGIEc7s_6k">
</iframe>

<iframe width="420" height="315"

src="https://www.youtube.com/embed/GOGIEc7s_6k?autoplay=1">
</iframe>

<iframe width="420" height="315"

src="https://www.youtube.com/embed/GOGIEc7s_6k?
playlist=GOGIEc7s_6k&loop=1">
</iframe>
HTML5 Input
• <input type=“text”>
• <input type=“password”>
• <input type=“submit”>
• <input type=“reset”>
• <input type=“radio”>
• <input type=“checkbox”>
• <input type=“number”>
• <input type=“date”>
• <input type=“range”>
• <input type=“datetime”>
• <input type=“time”>
• <input type=“color”>
• <input type=“month”>
• <input type=“week”>
HTML5 Input
• <input type="text"> mendefinisikan
sebuah input field berupa text :
<form>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</form>
HTML5 Input
• <input type=“password"> mendefinisikan
sebuah input field berupa password :
<form>
User name:<br>
<input type="text" name="username"><br>
User password:<br>
<input type="password" name="psw">
</form>
HTML5 Input
• <input type="submit"> mendefinisikan sebuah
button untuk mengirimkan nilai atau data ke
dalam form-handler.
• Form-handler adalah script untuk memproses
data. Form-handler di tujukan untuk form action
 HTML5 Input
• <input type=“reset"> mendefinisikan sebuah button yang digunakan untuk
me-reset atau mengembalikan nilai atau data yang di inputkan, kembali ke
data awal.jima data awal kosong, tanpa nilai maka saat di klik reset input
teks kosong.

<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" value="Submit">
<input type="reset">
</form>
 HTML5 Input
• <input type=“radio"> mendefinisikan sebuah pilihan dimana diantara
semua pilihan hanya bisa dipilih satu pilihan.

<form>
<input type="radio" name="gender" value="male" checked>
Male<br>
<input type="radio" name="gender" value="female">
Female<br>
</form>
 HTML5 Input
• <input type=“checkbox"> mendefinisikan sebuah pilihan dimana diantara
semua pilihan, boleh lebih dari satu yang dipilih atau pun tidak memilih sama
sekali.
<form>
<input type="checkbox" name="vehicle1" value="Bike">
I have a bike<br>
<input type="checkbox" name="vehicle2" value="Car">
I have a car
</form>
 HTML5 Input
• <input type=“number"> mendefinisikan sebuah input berupa angka. Nilai
bisa ditentukan.
<form>
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">
</form>
 HTML5 Input
• <input type=“date"> mendefinisikan sebuah input berupa tanggal.
<form>
Birthday:
<input type="date" name="bday">
</form>
 HTML5 Input
• <input type=“range"> mendefinisikan sebuah input berupa range atau
jangkauan nilai..

<form>
<input type="range" name="points" min="0" max="10">
</form>
 HTML5 Input
• <input type=“datetime">
• <input type=“time">
• <input type=“month">
• <input type=“week">
• <input type=“color">