1. Pengenalan HTML
HTML adalah suatu bahasa yang dipergunakan untuk mendeskripsikan halaman web. HTML merupakan singkatan dari Hyper Text Markup Language. HTML bukan merupakan bahasa pemrograman, HTML adalah suatu MARKUP LANGUAGE (bahasa markah).Suatu markup language berupa serangkaian MARKUP TAGS. HTML menggunakan MARKUP TAGS untuk
mendeskripsikan halaman web.
2. HTML vs. XHTML
a. Tag harus ditulis dengan huruf kecil
b. Terdapat penutup untuk setiap tag
c. Membuka dan menutup tag pada sarang yang benar
d. Atribut tag ditulis dengan huruf kecil dan memakai tanda petik
3. HTML Element
a. Komponen penyusun terkecil dari sebuah dokumen HTML
4. HTML Basic Structure
5. Formatting HTML Document
a. Heading
Tag heading <hx> digunakan untuk memformat heading (judul dan sub judul ) dari suatu halaman web. Heading ini akan memperbesar ukuran huruf untuk setiap jenis heading.Ada enam buah heading yang dikenal HTML, yaitu dari <h1> sampai dengan <h6>. Tag heading mempunyai atribut: [ left | center | right ] default left.Sebagai latihan, ketiklah latihan berikut dan jalankan dibrowser Anda.
5.1 Paragraph
Tag paragraph <p> berfungsi layaknya untuk pengaturan antar paragraf dalam halaman web Anda. Dalam elemen paragraf terdapat atribut : align=[ left | center | right ] yang berfungsi sebagai pengatur perataan paragraf, jadi Anda cukup memilih salah satu dari ketiga pilihan tanpa harus memberi kurung buka dan tutup, dan defaultnya adalah left. Anda dapat memilih perataan kiri, tengah dan kanan. Bukalah latihan4.html yang sudah Anda buat, kemudian tambahkan script-script berikut dan simpan dengan nama latihan5.html.
5.2 TABLE
Tag <TABLE> digunakan untuk membuat table dalam document HTML. Bagian pokok dari table adalah cell yang didefinisikan dengan menggunakan tag <TD>. anda bisa menambahkan beberapa cell untuk membuat satu baris cell.
a. <table> mendefinisikan sebuah tebel
b. <tr> mendefinisikan baris tabel
c. <th> mendefinisikan judul kolom
d. <td> mendefinisikan isi tiap kolom
berikutnya jika ingin membuat beberapa baris cell dalam table gunakan tag <TR>.
5.3 Image
Ada banyak format image, tapi ada tiga jenis format yang paling sering digunakan :
a. GIF (Graphical Interchange Format) (.GIF)
b. JPEG (Joint Photographic Expert Image) (.JPG)
c. PNG (Portable Network Graphics)
Tag IMG di gunakan untuk menginsertkan image ke document HTML. Syntaxnya: <IMG SRC = “URL”>
5.4 LINK
Dokumen HTML menggunakan hyperlink (anchor) untuk menghubungkan kepada dokumen lain. Dokumen ini bisa berupa teks dan / atau gambar yang saling menghubungkan menuju ke dokumen atau bagian lain dalam suatu dokumen. Browser web akan menyorot teks atau gambar yang di identifikasi sebagai link dengan warna atau garis bawah untuk menunjukkan bahwa itu adalah hyperteks link sering di singkat hyperlink atau link saja. Atribut pada tag <a> diantaranya: href="uri" untuk mendefinisikan lokasi link, name="name" untuk mendefinisikan nama link. target="_blank"|"_parent"|"_top"|"_self" untuk _blank akan membuka pada window baru. _parent/_top akan keluar dari frame. _self akan tetap di window browser. Contoh Penulisan : <a href="http://www.amcc.or.id" target="_blank" name="web amcc">Link web Amcc </a>
6. HTML 5
What is HTML5?
a. New standard for HTML
b. Cross-platform ( tablet ,smartphone, a netbook, notebook or a Smart TV).
c. Webapplications that still work when you are not online.
6.1 Minimum HTML5 Document
6.2 New Features
1. Teknik deteksian
Ketika anda membuat halaman web dibrowser, berarti sedang membangun sebuah Dokumen Object Model (DOM), mengumpulkan objek yang mewakili elemen HTML pada halaman web tersebut. Seperti Setiap elemen <p>, <div> dan <span>. Cukupdi wakili dalam DOM dengan objek yang berbeda. (Ada juga objek global, seperti jendela dan dokumen, yang tidak terikat dengan unsur-unsur tertentu.)
2. Canvas
HTML5 mendefinisikan elemen <canvas> sebagai " bitmap kanvas tergantung resolusi yang dapat digunakan untuk rendering grafik , grafis game, atau gambar visual lainnya dengan cepat. kanvas disebutjugaelement yang digunakan untuk menggambar grafik, object di website yang umumnya melalui script javascriptataudisebutjugasebuah kode HTML dengan atribut tinggi dan atribut lebardalam halaman websitedi mana Anda dapat menggunakan JavaScript untuk mebuat apa pun yang Anda inginkan. HTML5 mendefinisikan satu set fungsi ( " kanvas API " ) untuk menggambar bentuk , mendefinisikan jalan , menciptakan gradien , dan menerapkan transformasi .Ada 2 carauntukmemeriksa kanvas API menggunakan teknik deteksi, yaitu:
Jika browser Anda mendukung kanvas API , objek DOM itu menciptakan untuk mewakili elemen <canvas> akan memiliki metode getContext ( ) . Jika browser Anda tidak mendukung kanvas API , objek DOM itu menciptakan untuk elemen <canvas> hanya akan memiliki seperangkat sifat umum, tetapi tidakkanvas yang spesifik .
3. Canvas Text
Bahkan jika browser Anda mendukung kanvas API , itu mungkin tidak mendukung kanvas teks API . Kanvas API tumbuh dari waktu ke waktu , dan fungsi teks yang ditambahkan di akhir permainan . Beberapa browser dikirimkan dengan dukungan kanvas sebelum teks API selesai. Jika browser Anda mendukung kanvas API , objek DOM itu menciptakan untuk mewakili elemen <canvas> akan memiliki metode getContext ( ) . Jika browser Anda tidak mendukung kanvas API , objek DOM itu menciptakan untuk elemen <canvas> hanya akan memiliki seperangkat sifat umum, tetapi tidak apa-apa kanvas - spesifik .
4. Video
HTML5 mendefinisikan sebuah elemen baru yang disebut <video> untuk embedding video dalam halaman web Anda . Embedding video yang digunakan tidak mungkin tanpa plugin pihak ketiga seperti Apple QuickTime ® atau Adobe Flash ® .Unsur <video> dirancang untuk dapat digunakan tanpa script deteksi . Anda dapat menentukan beberapa file video , dan browser yang mendukung video HTML5 akan memilih salah satu berdasarkan format video yang mereka dukun.Browser yang tidak mendukung video HTML5 akan mengabaikan unsur <video> sepenuhnya , tetapi Anda dapat menggunakan ini untuk keuntungan Anda dan memberitahu mereka untuk bermain video melalui plugin pihak ketiga sebagai gantinya. Kroc Camen telah merancang solusi yang disebut Video untuk Semua yang menggunakan HTML5 video di mana tersedia, tetapi jatuh kembali ke QuickTime atau Flash di browser lama . Solusi ini tidak
menggunakan JavaScript apapun dan bekerja di hampir setiap browser , termasuk browser mobile.Jika Anda ingin melakukan lebih dengan video dari celepuk pada halaman Anda dan memainkannya , Anda harus menggunakan JavaScript .. Jika browser Anda mendukung HTML5 video, objek DOM itu menciptakan untuk mewakili elemen <video> akan memiliki canPlayType ( ) method . Jika browser Anda tidak mendukung video HTML5 , DOM objek itu menciptakan untuk elemen <video> akan hanya memiliki seperangkat sifat umum untuk semua elemen .
5. Video Formats
Format video seperti bahasa tertulis . Sebuah surat kabar Inggris dapat menyampaikan informasi yang sama seperti surat kabar Spanyol , tetapi jika Anda hanya bisa membaca bahasa Inggris , hanya satu dari mereka akan berguna bagi Anda ! Untuk memutar video , browser Anda perlu memahami " bahasa " di mana video itu ditulis .Browser Anda bisa bermain game secara Ogg Theora dan H.264 video. Hei , Anda dapat memutar video WebM , juga!"Bahasa" dari video yang disebut " codec " - ini adalah algoritma yang digunakan untuk mengkodekan video ke dalam aliran bit . Ada puluhan codec yang digunakan di seluruh dunia . Mana yang harus Anda gunakan ? Realitas malang HTML5 video adalah bahwa browser tidak bisa setuju pada codec tunggal . Namun, mereka tampaknya telah mempersempitnya ke dua . Salah satu codec biaya uang ( karena lisensi paten ) , tetapi bekerja di Safari dan pada iPhone . ( Yang satu ini juga bekerja di Flash jika Anda menggunakan solusi seperti Video untuk Semua! ) Codec lain adalah gratis dan bekerja di browser open source seperti Chromium dan Mozilla Firefox .
Memeriksa format video yang support menggunakan teknik deteksi # 3 . Jika browser Anda mendukung HTML5 video, objek DOM itu menciptakan untuk mewakili elemen <video> akan memiliki canPlayType ( ) method . Metode ini akan memberitahu Anda apakah browser mendukung format video tertentu .Pemeriksaan fungsi ini
untuk format yang dibatasi oleh paten yang didukung oleh Mac dan iPhone .
6. Local Storage
Storage HTML5 menyediakan cara untuk situs web untuk menyimpan informasi di komputer Anda dan mengambilnya nanti. Konsep ini mirip dengan kue, tapi itu dirancang untuk jumlah yang lebih besar dari informasi. Cookies yang terbatas dalam ukuran, dan browser Anda mengirimkannya kembali ke server web setiap kali meminta halaman baru (yang membutuhkan waktu ekstra dan bandwidth berharga). Storage HTML5 tetap pada komputer Anda, dan situs web dapat mengaksesnya dengan JavaScript setelah halaman dibuka. Memeriksa dukungan storage HTML5. Jika browser Anda mendukung penyimpanan HTML5, akan ada properti localStorage pada objek window global. Jika browser Anda tidak mendukung penyimpanan HTML5, properti localStorage akan terdefinisi. Karena bug disayangkan dalam versi Firefox, tes ini akan meningkatkan perkecualian jika cookie dinonaktifkan, sehingga seluruh tes
7. Geolocation
Geolocation adalah seni mencari tahu di mana Anda berada di dunia dan (opsional) berbagi informasi dengan orang-orang yang Anda percaya. Ada lebih dari satu cara untuk mencari tahu di mana Anda berada - alamat IP Anda, koneksi jaringan nirkabel, yang menara ponsel Anda sedang berbicara dengan, atau GPS hardware khusus yang menghitung garis lintang dan bujur dari informasi yang dikirim oleh satelit di langit.Memeriksa dukungan geolocation menggunakan teknik deteksi # 1. Jika browser Anda mendukung geolocation API, akan ada properti geolocation pada objek navigator global. Jika browser Anda tidak mendukung geolocation API, properti geolocation tidak akan hadir dalam navigator.
8. Input Types
Anda tahu semua tentang bentuk web , kan? Membuat <form> , tambahkan beberapa elemen type="text"><input dan mungkin sebuah type="password"><input , dan menyelesaikannya dengan tombol <input type="submit"> .Anda tidak tahu setengah dari itu . HTML5 mendefinisikan lebih dari selusin jenis masukan baru yang dapat Anda gunakan dalam bentuk Anda .
a. <input type="search">untuk kotak pencarian
b. <input type="number">untuk spinboxes
c. <input type="range">untuk slider
d. <input type="color">untuk pemetik warna
e. <input type="tel">untuk nomor telepon
f. <input type="url">untuk alamat web
g. <input type="email">untuk alamat email
h. <input type="date">untuk tanggal kalender pemetik
i. <input type="month">untukbulan
j. <input type="week">untukselama seminggu
k. <input type="time">untuk timestamps
l. <input type="datetime">untuk tepat , tanggal mutlak +waktu stamps
m. <input type="datetime-local">untuk tanggal dan waktu lokal
6.3 New Elements in HTML5
Pertama kali belajar HTML5, banyak sekali hal hal baru yang belum saya ketahui termasuk elemen – elemen apa saja yang baru,Dibawah ini dapat anda lihat elemen apa saja yang baru terdapat pada HTML5 yang saya ambil dari w3schools.
Tag
Description
<article>
Mendefinisikan sebuah artikel
<aside>
Mendefinisikan isi selain dari konten halaman
<bdi>
Mengisolasi bagian dari teks yang dapat diformat dalam arah yang berbeda dari teks lain di luar itu
<command>
Mendefinisikan sebuah tombol perintah bahwa pengguna dapat memanggil
<details>
Mendefinisikan detail yang dapat di tampilkan dan disembunyikan
<summary>
Mendefinisikan sebuah visible heeding untuk elemen <details>
<figure>
Menentukan sebuah konten seperti foto, grafik, diagram dan lain – lain
<figcaption>
Mendefinisikan sebuah caption untuk sebuah <figure>
<footer>
Mendefinisikan footer untuk sebuah dokuken
<header>
Mendefinisikan header untuk sebuah dokumen
<hgroup>
Merupakan sebuah elemen grup dari <h1> sampai <h6>
<mark>
Membuat mark pada tulisan
<meter>
Membuat sebuah pengukuran skalar
<nav>
Mendefinisikan sebuah navigasi
<progress>
Represents the progress of a task
<ruby>
Defines a ruby annotation (for East Asian typography)
<rt>
Defines an explanation/pronunciation of characters (for East Asian typography)
<rp>
Defines what to show in browsers that do not support ruby annotations
<section>
Mendefinisikan section pada sebuah dolumen
<time>
Mendefinisikan waktu / tanggal
<wbr>
Mendefinisikan line-break
<audio>
Elemen yang digunakan untuk audio
<video>
Mendefinisikan video atau movie
<source>
Mendefinisikan media <video> dan <audio>
<embed>
Mendefinisikan sebuah tempat untuk memaasang plugin
<track>
Mendefinisikan text track untuk <video> dan <audio>
<canvas>
DIgunakan untuk enggambar sebuah grafik melalui JavaScript
<datalist>
Menentukan daftar pilihan standar untuk kontrol input
<keygen>
Defines a key-pair generator field (for forms)
<output>
Mendefinisikan hasil perhitungan
Selain terdapat beberapa elemen – elemen baru, terdapat juga beberapa elemen yang sudah tidak digunakan lagi pada HTML5 seperti
• <acronym>
• <applet>
• <basefont>
• <big>
• <center>
• <dir>
• <font>
• <frame>
• <frameset>
• <noframes>
• <strike>
• <tt>
• <u>

Sumber :
MODUL DIVISI PEMROGRAMAN WEBSITE AMIKOM COMPUTER CLUB “HTML”
Disusun Oleh: Tim Divisi Pemrograman Website 2013
http://diveintohtml5.info/
http://ms.wikibooks.org/wiki/Menyelami_HTML5/Mengesan_Ciri-ciri_HTML5:_Amat_Mudah,_Wahai_Watson
W3schools.com