HTML5 Komplet
HTML5 Komplet Jubilee Enterprise PENERBIT PT ELEX MEDIA KOMPUTINDO
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 2017 okti@elexmedia.id 717052028 ISBN: 978-602-04-5083-4 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
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
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... 10 Tag-Tag Lain di dalam Head... 11 Fungsi Tag Heading... 11 Pengaturan Teks di dalam Browser... 11 Membuat Link... 12 Ordered List dan Unordered List... 12 Warna... 13 Latar Belakang Berbentuk Gambar... 14 Menampilkan Foto atau Gambar... 14 Membuat Sistem Navigasi... 14 Pembagian Dokumen ala HTML... 15 File Video di dalam Website... 16 File Audio di dalam Website... 16 Pembuatan Tabel... 17 Form untuk Membuat Website Interaktif... 17 vii
BAB 2 Aplikasi untuk HTML... 19 Aplikasi untuk HTML... 19 Browser... 20 Text Editor... 20 Membuat HTML "Halo Dunia"... 21 BAB 3 Paragraf dan Teks... 25 Tag Paragraf... 28 Tag <break>... 31 Tag untuk Menebalkan dan Memiringkan Teks... 32 Heading... 33 Karakter-Karakter Spesial... 35 Horizontal Line... 37 Menggunakan Warna Latar Belakang dan Latar Depan... 38 Web-Safe Color... 40 Mengatur Warna Latar Belakang... 41 Mengatur Warna Latar Depan... 42 Image untuk Latar Belakang... 43 Pengulangan Gambar Latar Belakang... 45 Indenting Paragraph... 46 Border dalam Paragraf... 48 Mengatur Ketebalan dan Warna Border... 51 Perataan Paragraf... 52 Leading... 52 Font Family... 54 Mengatur Ukuran dan Warna Font... 56 Bold dan Italic... 57 Strikethrough dan Underlining... 59 Menggunakan Text-Decoration... 60 Mengatur Jarak Antar Kata dan Huruf... 61 Code... 63 Kbd... 63 Var... 64 BAB 4 Hyperlink... 65 Membuat Hyperlink... 65 Mengenal Alamat Absolut dan Alamat Relatif... 67 Membuat Link dalam Folder yang Sama... 68 Membuat Link pada Folder di Bawahnya... 69 Membuat Link pada Folder di Atasnya... 70 Membuat Link Relatif Terhadap Root... 71 Membuat Link pada Titik Tertentu di Halaman... 71 Link pada Titik Tertentu pada Halaman Lain... 72 Menggunakan Atribut Target... 73 viii
BAB 5 Membuat List... 75 Ordered List... 75 Unordered List... 76 Atribut Style... 77 Mengatur Nomor Urut Ordered List... 80 Menggunakan Definition List... 82 BAB 6 Membuat Tabel... 85 Mengatur Ukuran Tabel... 87 Mengatur Ukuran Kolom... 87 Menggabung Beberapa Sel... 89 Mengatur Border... 91 Menentukan Garis Border Menggunakan Style... 92 Memberi Warna dan Pola Latar Depan dan Latar Belakang... 94 Mengenal Padding, Spacing, dan Alignment... 95 BAB 7 Membuat Form... 97 Membuat Form... 97 Input... 98 Textarea... 100 Select... 100 Atribut Name... 101 Form yang Utuh... 102 Form pada HTML5... 104 Datalist... 104 Fieldset dan Legend... 105 Keygen... 105 Meter... 106 Output... 106 Progress... 107 Mengenal Atribut-Atribut Baru dalam Tiap Komponen Form... 108 Autofocus... 108 Pattern... 108 Placeholder... 109 Required... 109 Atribut Baru yang Berasal dari Tag Input... 110 Color... 110 Date... 110 Datetime... 110 Datetime-local... 111 Time... 112 Month... 112 Week... 112 Email... 113 ix
Number... 113 Range... 114 Search... 114 Tel... 115 Url... 115 BAB 8 Bekerja dengan Canvas... 117 Dasar-Dasar Canvas... 117 Cara Kerja HTML5 dan Javascript... 119 Memilih Fill dan Stroke... 121 Warna... 122 Gradasi... 122 Pattern... 126 Teknik Menggambar Bentuk Objek... 128 Menggambar Persegi Empat... 128 Menggambar Teks... 129 Memberi Bayangan... 131 Menggunakan Path... 133 Membuat Arc dan Lingkaran... 135 Membuat Kurva Bezier... 137 Bekerja dengan File Image... 138 Cropping pada Image... 141 Transformasi pada Image... 144 BAB 9 Audio, Video, dan Media... 147 Memilih Format Audio dan Video... 148 Memasukkan Video ke dalam Desain Web Page... 148 Width dan Height... 150 Loop... 150 Preload... 151 Memasukkan Audio... 151 Konversi Format Video... 151 Meletakkan Video dari Youtube... 153 BAB 10 Layout Dokumen... 155 Mengenal Division... 155 Memahami Tag Baru HTML5... 155 Mengenal Pembagian Halaman Web... 156 Mengatur Ulang Posisi Division... 159 Menentukan Posisi Division... 160 Membuat Sistem Navigasi... 161 Tentang Penulis... 165 x
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) <b> atau <i> 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
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> <p>halo Dunia!</p> </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
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
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
Sebagai contoh, perhatikan sepotong kode HTML berikut : <p>hallo Dunia!</p> Pada contoh di atas, tag <p> merupakan tag pembuka untuk membuat paragraf baru, sedangkan </p> adalah tag penutup paragraf. Dengan demikian, teks yang ditulis sesudah tag </p> 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> <p>ayo kita belajar <b>html</b> atau <i>hypertext Markup Language</i> </p> </body> </html> Hasil dari kode HTML di atas akan ditampilkan oleh browser menjadi: Tampilan HTML dalam jendela browser 5
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: www.thinkjubilee.com. Catatan: Untuk melakukan pemesanan buku, hubungi Layanan Langsung PT Elex Media Komputindo: Gramedia Direct Jl. Palmerah Barat No. 29-37, Jakarta 10270 Telemarketing/CS: 021-53650110/111 ext: 3901/3902/3292 165