Tutorial HTML dasar

Praktikum

Disain Web – HTML Tujuan :

1. Memahami tentang konsep HTML

2. Memahami fitur-fitur baru pada HTML5

3. Memahami aturan penulisan HTML khususnya HTML5

4. Membuat dokumen web dengan HTML khususnya HTML5

A. Pengenalan HTML

Hypertext Markup Language merupkan standard bahasa yang di gunakan untuk

menampilkan document web, yang bisa anda lakukan dengan HTML yaitu:

Mengontrol tampilan dari web page dan contentnya.

Mempublikasikan document secara online sehingga bisa di akses dari seluruh dunia.

Membuat online form yang bisa di gunakan untuk menangani pendaftaran, transaksi

secara online.

Menambahkan object-object seperti image, audio, video dan juga java applet dalam

document HTML.

B. HTML Version

Berikut versi HTML :

Deklarasi <!DOCTYPE> membantu browser untuk menampilkan sebuah halaman web

dengan benar. Browser hanya dapat menampilkan halaman HTML 100% dengan benar jika

browser tahu tipe dan versi yang digunakan.

Berikut deklarasi umum dari tiap versi :

C. HTML5

HTML 5 adalah standard baru dari HTML.

Sumber :

Fitur baru dalam HTML5: Unsur <canvas> untuk menggambar 2D.

<video> dan elemen <audio> untuk media pemutaran.

Dukungan yang lebih baik untuk penyimpanan secara offline.

Elemen konten yang lebih spesifik, seperti <artikel>, <footer>, <header>,

<nav>,< section>.

Bentuk kontrol form seperti kalender, tanggal, waktu, e-mail, URL, search.

Menampilkan posisi (Geolocation)

Web Storage : localStorage(stores data with no expiration date) and sessionStorage(stores

data for one session)

Application Cache

Offline browsing – User bisa menggunakan aplikasi walaupun offline

Speed - cached resources load faster

Reduced server load - the browser will only download updated/changed resources from

the server

Web Workers

HTML SSE(Server-Sent Event Notifications)

1. HTML5 Canvas

elemen <canvas> digunakan untuk menggambar grafis, biasanya menggunakan Java Script.

Unsur <canvas> hanyalah sebuah tempat untuk menggambar grafis, sedangkan grafis dibuat

menggunakan script.

Berikut pendeklarasian umumnya

Sedangkan untuk menambahkan border , gunakan atribut style :

Semua gambar dikanvas harus dilakukan menggunakan Java Script, Berikut menggambar di

kanvas menggunakan JavaScript :

a. Menggambar object 2D dengan satu warna

b. Canvas – Gradients

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

// Create gradient

var grd=ctx.createLinearGradient(0,0,200,0);

grd.addColorStop(0,"red");

grd.addColorStop(1,"white");

// Fill with gradient

ctx.fillStyle=grd;

ctx.fillRect(10,10,150,80);

c. Canvas –Text

2. HTML5 SVG (Scalable Vector Graphics)

SVG digunakan untuk mendefinisikan grafis berbasis vektor untuk Web

SVG mendefinisikan grafis dalam format XML

SVG grafis TIDAK kehilangan kualitas apa pun jika mereka diperbesar atau diubah

ukurannya

Setiap elemen dan setiap atribut dalam file SVG dapat dianimasikan

3. HTML5 Drag and Drop example

Pada HTML5 drag and drop merupakan bagian dari standard HTML5. Elemen apapun bisa

di drag ke lokasi yang berbeda.

4. HTML5 Video

HTML5 mendefinisikan elemen baru dengan meng-embed video/film pada suatu halaman

web. Sehingga tidak memerlukan plug-in tambahan untuk memutarnya.

Menambahkan button Play/Pause, Big, small dan Normal <!DOCTYPE html>

<html>

<body>

<div style="text-align:center">

<button onclick="playPause()">Play/Pause</button>

<button onclick="makeBig()">Big</button>

<button onclick="makeSmall()">Small</button>

<button onclick="makeNormal()">Normal</button>

<br>

<video id="video1" width="420">

<source src="video.mp4" type="video/mp4">

Your browser does not support HTML5 video.

</video>

</div>

<script>

var myVideo=document.getElementById("video1");

function playPause()

{

if (myVideo.paused)

myVideo.play();

else

myVideo.pause();

}

function makeBig()

{

myVideo.width=560;

}

function makeSmall()

{

myVideo.width=320;

}

function makeNormal()

{

myVideo.width=420;

}

</script>

</body>

</html>

5. HTML5 Audio

HTML5 mendefinisikan elemen baru dengan meng-embed audio pada suatu halaman web.

Sehingga tidak memerlukan plug-in tambahan untuk memutarnya.

6. HTML5 Input Types

HTML5 memiliki beberapa jenis type input baru untuk suatu form. Fitur baru ini

memungkinkan kontrol input yang lebih baik dan validasi selain itu juga memudahkan

programmer. Jenis input baru tersebut antara lain :

7. HTML5 Form elements

HTML5 <datalist> Element

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

HTML5 <keygen> Element <form action="demo_keygen.asp" method="get">

Username: <input type="text" name="usr_name">

Encryption: <keygen name="security">

<input type="submit">

</form>

HTML5 <output> Element

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0

<input type="range" id="a" value="50">100 +

<input type="number" id="b" value="50">=

<output name="x" for="a b"></output>

</form>

8. HTML5 Form Attributes

<form> / <input> autocomplete Attribute <form action="demo_form.asp" autocomplete="on">

First name:<input type="text" name="fname"><br>

Last name: <input type="text" name="lname"><br>

E-mail: <input type="email" name="email" autocomplete="off"><br>


</form>

<form> novalidate Attribute

Data yang diinputkan tidak akan divalidasi ketika di submit <form action="demo_form.asp" novalidate>

E-mail: <input type="email" name="user_email">


</form>

<input> autofocus Attribute <form action="demo_form.asp">

First name:<input type="text" name="fname" autofocus><br>



</form>

<input> form Attribute <form action="demo_form.asp" id="form1">

First name: <input type="text" name="fname"><br>

<input type="submit" value="Submit">

</form>

<p>The "Last name" field below is outside the form element, but

still part of the form.</p>

Last name: <input type="text" name="lname" form="form1">

<input> formmethod Attribute <form action="demo_form.asp" method="get">

First name: <input type="text" name="fname"><br>


<input type="submit" value="Submit">

<input type="submit" formmethod="post" formaction="demo_post.asp"

value="Submit using POST">

</form>

<input> min and max Attributes Enter a date before 1980-01-01:

<input type="date" name="bday" max="1979-12-31">

Enter a date after 2000-01-01:

<input type="date" name="bday" min="2000-01-02">

Quantity (between 1 and 5):

<input type="number" name="quantity" min="1" max="5">

<input> multiple Attribute Select images: <input type="file" name="img" multiple>

<input> required Attribute Username: <input type="text" name="usrname" required>

9. HTML5 Semantic

Semantic element menjelaskan maknanya baik untuk browser maupun developer.

Merupakan tag-tag baru pada HTML5. HTML5 semantic digunakan untuk mendukung

struktur halaman yang lebih rapi. Elemen-elemen ini digunakan untuk mengurangi

pemakaian tag <div>

<header>

Merupakan bagian atas dokumen

<article>

<header>

<h1>Internet Explorer 9</h1>

<p><time pubdate datetime="2011-03-15"></time></p>

</header>

<p>Windows Internet Explorer 9 (abbreviated as IE9) was released to

the public on March 14, 2011 at 21:00 PDT.....</p>

</article>

<nav>

Mendefinisikan suatu set link navigasi. Namun tidak semua link harus didalam element

<nav>. Untuk membentuk bagian navigasi atau menu

<nav>

<a href="/html/">HTML</a> |

<a href="/css/">CSS</a> |

<a href="/js/">JavaScript</a> |

<a href="/jquery/">jQuery</a>

</nav>

<section>

Mendefinisikan sebuah bagian pada suatu dokumen. Digunakan untuk mengelompokan

content yang sejenis

<section>

<h1>WWF</h1>

<p>The World Wide Fund for Nature (WWF) is....</p>

</section>

<article>

Digunakan untuk menampilkan suatu artikel pada halaman HTML. Digunakan Untuk

Konten eksternal, seperti artikel, blog, forum, atau konten lain dari sumber external

<article>

<h1>Internet Explorer 9</h1>

<p>Windows Internet Explorer 9 (abbreviated as IE9) was released to

the public on March 14, 2011 at 21:00 PDT.....</p>

</article>

<aside>

Mendefinisikan konten yang berkaitan pada konten yang ada, biasanya ditempatkan

disamping konten.

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

<footer>

Merupakan bagian bawah dokumen. Biasanya berisi copyright, author, contact

information dsb.

<footer>

<p>Posted by: Hege Refsnes</p>

<p><time pubdate datetime="2012-03-01"></time></p>

</footer>

PRAKTIKUM :

1. Buat halaman web DATA ENTRY mengenai data pribadi seseorang menggunakan HTML5, Gunakan Tag-Tag yang telah diajarkan, gunakan table, dan canvas untuk memperindah halaman tampilan anda. Halaman Data Entry Dilengkapi dengan button simpan dan button

reset. Harus diisi (Nama, jenis kelamin, tempat/tgl lahir, riwayat pendidikan, email, homepage,

hobby)

2. Buat halaman html5 untuk video, audio dan drag and drop, kemudian masukkan link-link

tersebut kedalam elemen <nav>

***Selamat Mengerjakan ***

Sumber

http://w3schools.com/html/ http://lecturer.eepis-its.edu/~idris/files/prog_web/Praktek/day-2.pdf

http://w3schools.com/html/

http://lecturer.eepis-its.edu/~idris/files/prog_web/Praktek/day-2.pdf

Tutorial HTML dasar

Documents