HTML Uncover Duniailkom ©2015 Duniailkom

Contents 1. Berkenalan Dengan HTML (Contoh Bab 1) . . . . . . . . . . . . . . . . . . . . . . . 1.1 Pengertian HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1.2 Fungsi HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

1 1 2

2. Struktur Dasar HTML (Contoh Bab 4) . . . . . . . . . . . . . . . . . . . . . . . . . . 2.1 Pengertian Tag, Atribut dan Element HTML . . . . . . . . . . . . . . . . . . . . 2.2 Struktur Dasar HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

4 4 6

3. Audio dan Video Element (Contoh Bab 9) 3.1 Audio Element . . . . . . . . . . . . 3.2 Atribut Scr . . . . . . . . . . . . . . . 3.3 Atribut Controls . . . . . . . . . . . . 3.4 Atribut Autoplay . . . . . . . . . . . 3.5 Atribut Loop . . . . . . . . . . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

8 8 8 9 10 10

4. HTML5 Form Element (Contoh Bab 12) 4.1 Validasi Form . . . . . . . . . . . . 4.2 Input Element Type Color . . . . . 4.3 Input Element Type Email . . . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

11 11 11 13

. . . .

1. Berkenalan Dengan HTML (Contoh Bab 1) HTML adalah dasar dari seluruh halaman web yang ada di Internet. Dalam bab pembuka buku HTML Uncover ini saya akan mengajak anda untuk berkenalan dengan HTML. Kita akan mempelajari apa itu HTML, fungsi HTML, serta melihat sekilas cara penggunaan HTML dalam situs online.

1.1 Pengertian HTML Walaupun saya yakin sebagian besar dari anda telah mengenal apa itu HTML, atau sudah pernah membuat beberapa kode HTML, tidak ada salahnya kita membahas sekilas tentang pengertian HTML. Barangkali butuh untuk tugas / bahan presentasi :) HTML merupakan singkatan dari Hypertext Markup Language. Singkatan ini terdiri dari 3 komponen kata, yakni: Hypertext, Markup dan Language. Kata Hypertext dari HTML menekankan pengertian: text yang lebih dari sekedar teks (‘hyper’text). Maksudnya selain berfungsi sebagai teks biasa, sebuah teks di dalam HTML juga bisa berfungsi sebagai penghubung ke halaman lain atau dikenal dengan istilah link. Nantinya kita juga akan melihat bahwa tidak hanya teks saja yang bisa digunakan sebagai link, tetapi bisa berupa gambar. Link inilah yang menjadi inti dari HTML. Kata kedua dari singkatan HTML adalah Markup. Markup dapat diterjemahkan sebagai tanda atau penanda (bahasa inggris: mark). Di dalam HTML, kita akan menggunakan tanda-tanda khusus seperti

, , atau

. Tanda ini diperlukan untuk mengatur format dan membuat struktur halaman web. Bagian terakhir dari HTML adalah Language. Istilah language jika diterjemahkan berarti: bahasa. Khusus bagi anda yang pernah berkenalan dengan bahasa pemrograman komputer, disini HTML tidak menggunakan ‘Programming Language’, tetapi hanya ‘Language’ saja. Hal ini secara tidak langsung menyatakan bahwa HTML bukanlah sebuah bahasa pemrograman. HTML tidak memiliki struktur dasar seperti variabel, kondisi IF, function, atau class seperti layaknya sebuah bahasa pemrograman komputer. Walaupun menyebut HTML sebagai sebuah bahasa pemrograman secara teknis tidaklah ‘pas’, namun untuk menyederhanakan konsep belajar, istilah tersebut masih saya gunakan di dalam buku ini.

Merangkum penjelasan diatas, dapat disimpulkan bahwa HTML adalah sebuah bahasa khusus yang ditulis menggunakan tanda-tanda (mark) untuk membuat halaman web. 1

Berkenalan Dengan HTML (Contoh Bab 1)

2

Agar lebih lengkap, mari kita lihat defenisi HTML dari wikipedia¹: “HTML or HyperText Markup Language is the standard markup language used to create web pages.” Terjemahan bebasnya: “HTML atau HyperText Markup Language adalah bahasa markup standar yang digunakan untuk membuat halaman web.” Ternyata lebih sederhana dari penjelasan saya diatas.

1.2 Fungsi HTML Seperti yang kita ketahui bahwa HTML digunakan untuk membuat halaman web. Tetapi apa sebenarnya fungsi dari HTML? Dalam proses web development (proses pembuatan web), HTML berfungsi untuk membuat struktur dari sebuah website. HTML digunakan untuk menandai bagian mana yang akan menjadi judul artikel, bagian mana yang berfungsi sebagai isi artikel, atau bagian mana yang butuh disajikan dalam bentuk tabel. Mengenai tampilan dari website tersebut (misalnya apakah akan menggunakan warna background biru atau merah), diserahkan kepada teknologi web lain yang dikenal dengan CSS (Cascading Style Sheet). Saat ini, untuk membuat sebuah web modern, tidak bisa hanya menggunakan HTML + CSS saja, tetapi juga memerlukan bantuan bahasa pemrograman web lain seperti JavaScript. Di sini saya menggunakan istilah ‘web modern’, karena kita memang bisa membuat website dengan menggunakan HTML saja (tanpa CSS dan JavaScript), tetapi web yang dihasilkan akan terkesan ‘jadul’ karena tidak memiliki tampilan yang cantik (sesuai standar saat ini). Sama seperti HTML, CSS sebenarnya juga bukan bahasa pemrograman, tetapi adalah ‘bahasa kode’ yang mirip dengan HTML.

Beberapa pertanyaan yang sering muncul ketika baru pertama kali mempelajari HTML adalah bagaimana cara menampilkan bingkai (border) dari gambar atau bagaimana cara membuat menu bar yang muncul sendiri ketika mouse berada diatasnya (menu rollover)? Semua efek tampilan dan interaksi seperti ini tidak bisa dilakukan dengan HTML saja (terutama untuk menu rollover), tetapi dibuat dengan gabungan HTML + CSS + JavaScript. Dilihat dari sisi fungsinya, ketiga teknologi web ini berbagi peran masing-masing. HTML digunakan untuk membuat struktur konten atau isi dari halaman web. CSS berfungsi untuk memperindah tampilan, sedangkan JavaScript berperan untuk membuat interaksi. ¹http://en.wikipedia.org/wiki/HTML

Berkenalan Dengan HTML (Contoh Bab 1)

3

Sebutan kerennya: HTML for content, CSS for presentation and JavaScript for behavior. Ketiga teknologi inilah yang mendasari semua website yang ada di internet saat ini. Walaupun HTML sepertinya tidak terlalu powerful, tetapi ia adalah dasar dari semuanya. Baik CSS maupun JavaScript harus memiliki struktur HTML untuk dapat bekerja. Bahasa pemrograman web lain seperti PHP atau ASP juga digunakan untuk menghasilkan HTML. Sehingga HTML memiliki peran paling penting dan mutlak harus dikuasai sebelum masuk kedalam teknologi web lain seperti CSS, JavaScript, atau PHP. Dalam buku ini saya akan fokus membahas tentang HTML, namun seperti yang dijelaskan diatas, HTML sangat berkaitan dengan CSS dan JavaScript. Oleh karena itu, saya juga akan menggunakan CSS dan JavaScript ketika membahas beberapa fitur HTML. Sebagai bahan perkenalan dengan kedua teknologi ini, saya juga menyertakan bab khusus di akhir buku yang membahas sekilas tentang cara penggunaan CSS dan JavaScript.

Saya juga berencana membuat ebook khusus yang akan membahas secara mendalam tentang CSS dan JavaScript. Mudah-mudahan buku tersebut telah tersedia ketika anda selesai mempelajari buku HTML Uncover ini.

.

2. Struktur Dasar HTML (Contoh Bab 4) Dalam bab keempat ini akan dibahas tentang cara penulisan HTML. Kita akan mulai dengan mempelajari pengertian tag, element, dan atribut pada HTML, melihat struktur dasar dari kode HTML, mengenal aturan penulisan HTML, serta melakukan validasi kode HTML agar memenuhi standar W3C.

2.1 Pengertian Tag, Atribut dan Element HTML Tag, atribut dan element adalah 3 bagian inti yang membangun HTML. Mari kita bahas sejenak pengertian ketiga aspek ini.

Pengertian Tag Dari file hello_world.html yang telah kita jalankan dalam bab sebelumnya, tentunya anda sudah mengetahui bahwa file HTML ditulis dengan menggunakan tanda-tanda seperti , , atau

. Tanda-tanda ini dikenal dengan sebutan HTML tag. Tag di dalam HTML berfungsi untuk memberi tahu web browser apa dan bagaimana sebuah teks harus ditampilkan. Sebagaimana yang telah kita pelajari, file HTML hanyalah sebuah file text biasa. Web browser lah yang akan memproses file tersebut dan menampilkan hasilnya. Sebagian besar tag-tag HTML ditulis secara berpasangan, yang terdiri dari tag pembuka dan tag penutup. Tag pembuka ditulis menggunakan kurung siku, seperti

. Sedangkan tag penutup ditulis dengan menambahkan tanda garis miring/backslash seperti

. Tanda p disini berarti paragraf, dimana kita memberitahukan kepada web browser bahwa seluruh teks yang berada diantara tag pembuka

dan tag penutup

adalah sebuah paragraf. Sebagai contoh, jika saya ingin membuat struktur teks yang terdiri dari 2 paragraf, maka saya menulisnya sebagai berikut:

Ini adalah paragraf pertama

Ini adalah paragraf kedua

Ketika web browser membaca kode diatas, teks diantara tag

dan tag

akan ditampilkan sebagai paragraf yang terpisah. Setiap tag memiliki fungsi dan peran masing-masing. Secara total, terdapat sekitar seratusan tag di dalam HTML. Walaupun HTML memiliki banyak tag, tidak semuanya harus digunakan. Sebagai contoh, tag

akan sangat sering kita jumpai, tetapi tag relatif jarang ditemukan. 4

Struktur Dasar HTML (Contoh Bab 4)

5

Dalam buku ini kita akan mempelajari sebagian besar tag-tag yang ada di dalam HTML, terutama tag-tag yang sering digunakan dan memiliki peran penting untuk membuat struktur halaman. Dalam menjalankan tugasnya, tag HTML memerlukan atribut.

Pengertian Atribut Atribut adalah informasi tambahan yang ditulis pada tag pembuka. Fungsi dari atribut ini bermacam-macam tergantung nilai dan pada tag mana ia ditempatkan. Beberapa atribut bersifat umum dan bisa digunakan dalam seluruh tag (dikenal sebagai global atribut), tetapi kebanyakan hanya berfungsi untuk tag tertentu saja. Atribut terdiri dari pasangan nama atribut dan nilai atribut. Sebagai contoh, untuk menambahkan atribut class dengan nilai pertama kedalam tag

, cara penulisannya adalah sebagai berikut:

Ini adalah paragraf pertama

Penulisan nilai dari atribut boleh menggunakan tanda kutip dua ( “ ) seperti diatas, atau boleh juga menggunakan tanda kutip satu ( ‘ ) seperti contoh berikut:

Ini adalah paragraf pertama

Dalam HTML, penulisan nilai atribut diantara tanda kutip sebenarnya bersifat opsional (boleh tidak ditulis). Contoh diatas juga bisa dibuat sebagai berikut:

Ini adalah paragraf pertama

Penulisan nilai atribut tanpa tanda kutip seperti diatas tidak salah dan tetap valid di dalam HTML. Akan tetapi, jika nilai dari atribut terdiri dari 2 kata atau lebih, maka kita harus menggunakan tanda kutip, seperti contoh berikut:

Ini adalah paragraf pertama dan penting

Penggunaan tanda kutip untuk nilai atribut berasal dari format XHTML, dimana setiap atribut harus ditutup dengan tanda kutip. HTML5 tidak mengharuskan cara penulisan tanda kutip ini. Walaupun demikian, kebanyakan programmer tetap menambahkannya.

Struktur Dasar HTML (Contoh Bab 4)

6

Pengertian Element Istilah ketiga yang masih berkaitan dengan tag dan atribut adalah element. Di dalam HTML, element adalah satu bagian utuh yang terdiri dari tag, atribut, dan seluruh teks yang berada di antara tag pembuka dan penutup. Agar lebih jelas, konsep dari element ini dapat anda lihat dalam gambar dibawah ini.

Gambar: Bagian tag, atribut dan element dari HTML

Dari gambar diatas kita dapat melihat bahwa element mencakup tag, atribut dan seluruh isi dari tag tersebut, termasuk jika didalamnya juga terdapat tag lain. Dalam pembahasan HTML, istilah tag dan element kadang saling dipertukarkan. Beberapa referensi lebih banyak menyebut tag

, tetapi ada pula yang mengebutnya sebagai element p. Dalam buku ini saya akan menggunakan keduanya secara bergantian. Untuk penulisan judul, saya cenderung menggunakan istilah element, dan menggunaan istilah tag dalam pembahasan.

Tag, atribut dan element adalah inti dari HTML. Kita akan mempelajarinya sepanjang buku ini.

2.2 Struktur Dasar HTML File hello_world.html yang kita jalankan sebelum ini sebenarnya telah memenuhi struktur dasar dari sebuah file HTML. Mari kita lihat kembali kode HTML tersebut: hello_world.html

1 2 3 4 5 6 7 8

<meta charset="UTF-8">

Belajar HTML

Struktur Dasar HTML (Contoh Bab 4)

9 10 11

7

Hello World…

Jika anda perhatikan, sebagian besar tag-tag diatas saling berpasangan, kecuali tag dan <meta charset="UTF-8">. Beberapa tag juga berada di dalam tag lain. Mari kita bahas mulai dari baris pertama.

3. Audio dan Video Element (Contoh Bab 9) Pada awalnya, HTML hanya digunakan sebagai sarana berbagi hasil penelitian antar ilmuwan, dimana sebagian besar konten terdiri dari teks, tabel, dan gambar. Saat ini berbagai situs web saling berlomba menampilkan konten multimedia untuk menarik perhatian pengunjung. Salah satunya dengan menambahkan file multimedia seperti audio dan video. Sebelum kehadiran HTML5, untuk menjalankan file multimedia, kita harus bergantung kepada aplikasi pihak ketiga seperti adobe flash. Oleh karenanya, setiap komputer harus terinstall adobe flash player. Jika pengunjung tidak memiliki aplikasi adobe flash player, video tidak bisa dijalankan. Keterbatasan inilah yang membuat berbagai pihak mendesak agar HTML dapat mendukung audio dan video tanpa bantuan aplikasi lain. W3C dan WHATWG menjawab masalah ini dengan menyediakan tag