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

• 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.

HTML5HTML Links

• Syntax penulisan LINK

• Contoh :

HTML5HTML 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.

HTML5HTML Links

• 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 :

HTML5

HTML Link - The target Attribute

<a href="http://www.unda.ac.id" target="_blank">Visit WEB UNDA in new tab</a>

Link Images

• Digunakan untuk membuat gambar sebagai link, pada saat

gambar di klik maka akan menuju halaman lain.

HTML5

HTML Link Images

<a href="link2.html"><img src="smiley.jpg" width="42" height="42">

</a>

HTML5

HTML Plug-ins

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

<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.

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

• <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.

HTML5 Input

<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>

• <input type=“radio"> mendefinisikan sebuah pilihan dimana diantara

semua pilihan hanya bisa dipilih satu pilihan.

HTML5 Input

<form><input type="radio" name="gender" value="male" checked>

Male<br><input type="radio" name="gender" value="female">

Female<br></form>

• <input type=“checkbox"> mendefinisikan sebuah pilihan dimana diantara

semua pilihan, boleh lebih dari satu yang dipilih atau pun tidak memilih sama

sekali.

HTML5 Input

<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>

• <input type=“number"> mendefinisikan sebuah input berupa angka. Nilai

bisa ditentukan.

HTML5 Input

<form>Quantity (between 1 and 5):<input type="number" name="quantity" min="1" max="5">

</form>

• <input type=“date"> mendefinisikan sebuah input berupa tanggal.

HTML5 Input

<form>Birthday:<input type="date" name="bday">

</form>

• <input type=“range"> mendefinisikan sebuah input berupa range atau

jangkauan nilai..

HTML5 Input

<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">