HTML5 Komplet. Jubilee Enterprise PENERBIT PT ELEX MEDIA KOMPUTINDO

Transkripsi

1

2 HTML5 Komplet

3 HTML5 Komplet Jubilee Enterprise PENERBIT PT ELEX MEDIA KOMPUTINDO

4 HTML5 Komplet Jubilee Enterprise 2017, PT. Elex Media Komputindo, Jakarta Hak cipta dilindungi undang-undang Diterbitkan pertama kali oleh Penerbit PT Elex Media Komputindo Kelompok Gramedia, Anggota IKAPI, Jakarta ISBN: Dilarang keras menerjemahkan, memfotokopi, atau memperbanyak sebagian atau seluruh isi buku tanpa izin tertulis dari penerbit. Dicetak oleh Percetakan PT. Gramedia, Jakarta Isi di luar tanggung jawab percetakan

5 Kata Pengantar HTML adalah kode pemrograman paling dasar untuk membuat halaman web. Walaupun saat ini amat sulit mencari halaman web yang dibangun hanya dengan menggunakan HTML, namun tanpa memahami bagaimana kode-kode HTML bekerja, para desainer web akan menemui kesulitan untuk mempelajari bahasa pemrograman tingkat lanjut seperti PHP atau Javascript. Buku ini memfokuskan pembahasan pada HTML versi terbaru, yaitu HTML5. Kupasan serta ulasan di dalam buku ini dirasa lengkap untuk membuat Anda yang benar-benar buta tentang HTML5 menjadi tahu dan dapat mengembangkan keterampilan desain web secara mandiri. Semoga dengan membaca buku ini, Anda bisa mendesain website dengan teknik coding (menulis kode-kode HTML) yang caranya akan diajarkan di dalam buku ini. Akhir kata, selamat membaca! Yogyakarta, 9 Oktober 2017 Jubilee Enterprise We Make Bestseller Book Thinkjubilee.com v

6 Daftar Isi Kata Pengantar... v Daftar Isi... vii BAB 1 Pengenalan HTML... 1 Mengenal HTML...1 Struktur Dasar HTML...1 Tag DTD atau DOCTYPE...2 Tag HTML...3 Tag HEAD...3 Tag Body...3 Mengenal Tag dan Fungsinya...4 Aturan dalam Penulisan HTML...6 Case Sensitive...6 Tidak Semua Tag Berpasangan...6 Simpan dalam Bentuk File HTML...7 Dokumen HTML untuk Homepage Disimpan dengan Nama Index.html...7 Mengenal Elemen dalam HTML...7 Mengenal Atribut...8 Ringkasan...9 Sekilas tentang HTML...9 Tag dalam Dunia HTML...9 Document Type...9 Struktur Dasar HTML Tag-Tag Lain di dalam Head Fungsi Tag Heading Pengaturan Teks di dalam Browser Membuat Link Ordered List dan Unordered List Warna Latar Belakang Berbentuk Gambar Menampilkan Foto atau Gambar Membuat Sistem Navigasi Pembagian Dokumen ala HTML File Video di dalam Website File Audio di dalam Website Pembuatan Tabel Form untuk Membuat Website Interaktif vii

7 BAB 2 Aplikasi untuk HTML Aplikasi untuk HTML Browser Text Editor Membuat HTML "Halo Dunia" BAB 3 Paragraf dan Teks Tag Paragraf Tag <break> Tag untuk Menebalkan dan Memiringkan Teks Heading Karakter-Karakter Spesial Horizontal Line Menggunakan Warna Latar Belakang dan Latar Depan Web-Safe Color Mengatur Warna Latar Belakang Mengatur Warna Latar Depan Image untuk Latar Belakang Pengulangan Gambar Latar Belakang Indenting Paragraph Border dalam Paragraf Mengatur Ketebalan dan Warna Border Perataan Paragraf Leading Font Family Mengatur Ukuran dan Warna Font Bold dan Italic Strikethrough dan Underlining Menggunakan Text-Decoration Mengatur Jarak Antar Kata dan Huruf Code Kbd Var BAB 4 Hyperlink Membuat Hyperlink Mengenal Alamat Absolut dan Alamat Relatif Membuat Link dalam Folder yang Sama Membuat Link pada Folder di Bawahnya Membuat Link pada Folder di Atasnya Membuat Link Relatif Terhadap Root Membuat Link pada Titik Tertentu di Halaman Link pada Titik Tertentu pada Halaman Lain Menggunakan Atribut Target viii

8 BAB 5 Membuat List Ordered List Unordered List Atribut Style Mengatur Nomor Urut Ordered List Menggunakan Definition List BAB 6 Membuat Tabel Mengatur Ukuran Tabel Mengatur Ukuran Kolom Menggabung Beberapa Sel Mengatur Border Menentukan Garis Border Menggunakan Style Memberi Warna dan Pola Latar Depan dan Latar Belakang Mengenal Padding, Spacing, dan Alignment BAB 7 Membuat Form Membuat Form Input Textarea Select Atribut Name Form yang Utuh Form pada HTML Datalist Fieldset dan Legend Keygen Meter Output Progress Mengenal Atribut-Atribut Baru dalam Tiap Komponen Form Autofocus Pattern Placeholder Required Atribut Baru yang Berasal dari Tag Input Color Date Datetime Datetime-local Time Month Week ix

9 Number Range Search Tel Url BAB 8 Bekerja dengan Canvas Dasar-Dasar Canvas Cara Kerja HTML5 dan Javascript Memilih Fill dan Stroke Warna Gradasi Pattern Teknik Menggambar Bentuk Objek Menggambar Persegi Empat Menggambar Teks Memberi Bayangan Menggunakan Path Membuat Arc dan Lingkaran Membuat Kurva Bezier Bekerja dengan File Image Cropping pada Image Transformasi pada Image BAB 9 Audio, Video, dan Media Memilih Format Audio dan Video Memasukkan Video ke dalam Desain Web Page Width dan Height Loop Preload Memasukkan Audio Konversi Format Video Meletakkan Video dari Youtube BAB 10 Layout Dokumen Mengenal Division Memahami Tag Baru HTML Mengenal Pembagian Halaman Web Mengatur Ulang Posisi Division Menentukan Posisi Division Membuat Sistem Navigasi Tentang Penulis x

10 BAB 1 Pengenalan HTML Mengenal HTML HTML merupakan singkatan dari Hypertext Markup Language. Dari definisi tersebut, kita dapat mengetahui ciri-ciri dari HTML, yaitu sebagai berikut: Hypertext: di dalam kode HTML, Anda bisa membuat teks menjadi link yang fungsinya untuk berpindah dari satu halaman ke halaman lainnya atau dari satu halaman ke alamat situs lain hanya dengan meng-klik teks tersebut. Markup Language: HTML menggunakan tanda (dalam Bahasa Inggris disebut mark ) untuk menandai bagian-bagian dari teks agar teks itu memiliki tampilan/fungsi tertentu. Misalnya, teks yang berada di antara tanda (mark) atau akan menjadi tebal serta miring. Dalam prakteknya, tanda atau mark tersebut disebut dengan istilah Tag. Struktur Dasar HTML HTML merupakan dokumen yang terstruktur. HTML setidaknya memiliki struktur dasar yang terdiri dari: 1

11 Tag DTD atau DOCTYPE Tag HTML Tag HEAD Tag BODY Struktur di atas merupakan struktur HTML paling dasar. Lihat script berikut. <!DOCTYPE html> <html> <head> <title>html5 Komplet by Jubilee Enterprise</title> </head> <body> halo Dunia! </body> </html> Struktur HTML akan dijelaskan satu demi satu dalam uraian di bawah ini. Tag DTD atau DOCTYPE Tag paling awal dari struktur dokumen HTML adalah DTD atau biasa disebut DOCTYPE. DTD sendiri adalah singkatan dari Document Type Declaration yang berfungsi untuk memberi tahu browser bahwa dokumen yang akan ditampilkan adalah dokumen HTML. DTD memiliki berbagai versi cara penulisan yang umumnya dipengaruhi oleh versi HTML yang Anda gunakan. Pada contoh di atas, cara penulisan DTD mengikuti DTD versi HTML5. <!DOCTYPE html> 2

12 Tag HTML Setelah menulis tag DTD atau DOCTYPE, tag berikutnya yang harus Anda buat adalah tag <html>. Tag ini merupakan tag pembuka dari seluruh halaman web yang akan dibuat. Selanjutnya, semua kode HTML yang menandai bagian-bagian dalam dokumen serta membentuk desain sebuah halaman website harus berada setelah tag <html>. Tag <html> harus ditulis berpasangan sehingga dimulai dengan <html> dan diakhiri dengan </html>. Kode-kode HTML lainnya ada di antara tag pembuka dan penutup tersebut. Tag HEAD Tag yang ditulis dengan bentuk <head> ini berfungsi secara teknis. Bagian atau elemen yang ditulis pada tag <head> umumnya berbentuk keterangan teknis, seperti definisi dan judul halaman, kode-kode CSS, JavaScript, deskripsi halaman, dan kode-kode lainnya yang tidak terlihat sebagai salah satu desain di dalam sebuah halaman. Judul halaman website ditulis menggunakan tag <title> sesudah Anda menulis tag <head>. Title ini biasanya ditampilkan pada bagian paling atas jendela browser atau di bagian Tab. Title akan ditampilkan di dalam Tab pada jendela Google Chrome Tag Body Tag <body> digunakan untuk meletakkan semua isi elemen yang akan terlihat di dalam halaman website pada saat HTML itu diakses oleh 3

13 browser. Sama seperti dokumen biasa yang mengandung beberapa isi elemen, seperti paragraf, tabel, link, gambar, dan lain sebagainya, kemunculan isi elemen itu ditulis di antara tag <body> dan </body>. Konsentrasi seorang web designer tertuju pada elemen di antara tag <body> dan </body>. Mengenal Tag dan Fungsinya Saat mendesain website menggunakan HTML, kita membutuhkan metode agar browser mengenali tanda yang ditulis di awal atau mengapit teks sehingga teks itu ditampilkan sebagai sebuah paragraf, ordered list, tabel, link, dan seterusnya. Dalam HTML, tanda-tanda ini dikenal dengan sebutan tag. Tag di dalam dunia HTML memiliki ciri, dan cara menggunakan sebagai berikut: Sebagian besar ditulis berpasangan yang kemudian disebut tag pembuka dan tag penutup. Penulisan tag ditandai dengan dua kurung siku, yaitu < dan >. Khusus untuk tag penutup, diberi tambahan tanda garis miring seperti />. Di antara tag pembuka dan penutup bisa Anda letakkan isi elemen, seperti teks untuk membuat paragraf, memanggil gambar, membuat list, dan sebagainya. Teks di antara tag pembuka dan penutup itu sering disebut dengan istilah isi elemen. Berikut merupakan contoh format dasar penulisan tag HTML: <tag_pembuka>tulis teks di sini</tag_penutup> 4

14 Sebagai contoh, perhatikan sepotong kode HTML berikut : hallo Dunia! Pada contoh di atas, tag merupakan tag pembuka untuk membuat paragraf baru, sedangkan adalah tag penutup paragraf. Dengan demikian, teks yang ditulis sesudah tag tidak lagi dianggap sebagai paragraf. Perbedaan tag penutup dengan tag pembuka terletak dari tanda garis miring (/). Contoh lainnya adalah sebagai berikut: <!DOCTYPE html> <html> <head> <title>belajar HTML (Jubilee)</title> </head> <body> ayo kita belajar html atau hypertext Markup Language </body> </html> Hasil dari kode HTML di atas akan ditampilkan oleh browser menjadi: Tampilan HTML dalam jendela browser 5

15 Tentang Penulis Jubilee Enterprise, telah dipercaya oleh penerbit dan pembaca buku tanah air dalam satu dasawarsa ini. Hingga sekarang, tulisantulisannya yang diterbitkan dalam bentuk buku telah mencapai hampir 400 judul, sebagian besar bertema teknologi informasi dan kemudian disusul dengan tema psikologi & parenting, manajemen, fotografi, anak-anak, dan tema umum lainnya. Salah satu imprint Jubilee Enterprise adalah Jubilee Authors Companion yang merupakan sahabat bagi para penulis-penulis profesional yang ingin tetap berkarya. Anda dapat memperoleh informasi lebih lanjut tentang Jubilee Enterprise lewat situs: Catatan: Untuk melakukan pemesanan buku, hubungi Layanan Langsung PT Elex Media Komputindo: Gramedia Direct Jl. Palmerah Barat No , Jakarta Telemarketing/CS: /111 ext: 3901/3902/