Pengenalan HTML dan CSS
Pengenalan HTML dan CSS Jubilee Enterprise PENERBIT PT ELEX MEDIA KOMPUTINDO
Pengenalan HTML dan CSS Jubilee Enterprise 2016, PT Elex Media Komputindo, Jakarta Hak cipta dilindungi undang-undang Diterbitkan pertama kali oleh Penerbit PT Elex Media Komputindo Kelompok Gramedia, Anggota IKAPI, Jakarta 2016 anindita@elexmedia.co.id 716051977 ISBN: 978-602-02-9693-7 Dilarang keras menerjemahkan, memfotokopi, atau memperbanyak sebagian atau seluruh isi buku ini tanpa izin tertulis dari penerbit. Dicetak oleh Percetakan PT Gramedia, Jakarta Isi di luar tanggung jawab percetakan
DAFTAR ISI Kata Pengantar... v Daftar Isi... vi BAB 1 Memulai Pembuatan Website... 1 Tool yang Dibutuhkan... 1 Browser... 1 Text Editor... 2 Halo Dunia dan Langkah-Langkah Awal yang Sebaiknya Dilakukan... 3 Simpan File HTML... 4 Pengujian Script... 6 BAB 2 Pengenalan HTML... 7 Apa Itu HTML?... 7 HTML... 8 Apakah HTML Adalah Bahasa Pemrograman?... 9 Struktur Dasar HTML... 9 Tag DTD atau DOCTYPE... 10 Menguji Quirk Mode... 10 Tag HTML... 12 Tag HEAD... 12 Tag <body>... 12 Jadi, Apa Itu Tag dalam HTML?... 13 Tidak Semua Tag Berpasangan... 14 Case Sensitive... 14 vi
Elemen dalam HTML... 15 Mengenal Atribut... 15 Gambaran Umum HTML... 16 Referensi 1: Jadi, Apa Itu HTML?... 16 Tag Menjadi Senjata Penting dalam Dunia HTML... 16 Mulailah dengan Mengetik Document Type... 17 Struktur Script HTML Paling Sederhana... 17 Tag-Tag Lain yang Bisa Diletakkan di dalam Head... 18 Heading Digunakan untuk Menulis Struktur Dokumen... 18 Mengelola Tampilan Teks di dalam Browser... 19 Ordered List dan Unordered List... 19 Tentang Warna... 20 Latar Belakang Berbentuk Gambar... 20 Pusat dari Segala Jenis Website Adalah Link... 20 Dunia Website Cantik Berkat Foto atau Gambar... 21 Membuat Sistem Navigasi... 21 Pembagian Dokumen Ala HTML... 22 Memasang File Video ke dalam Website... 23 Memasang File Audio ke dalam Website... 23 Pembuatan Tabel... 23 Form untuk Membuat Website Interaktif... 23 BAB 3 Paragraf dan Teks... 25 Tag Paragraf... 25 Tag <break>... 27 Tag untuk Menebalkan dan Memiringkan Teks... 28 Heading... 29 BAB 4 Membuat List... 32 Ordered List... 32 Membuat Unordered List... 33 Style untuk List... 34 Mengatur Urut-Urutan Numbered List... 35 vii
Menggunakan Definition List... 37 Karakter-Karakter Spesial... 38 Menggunakan Horizontal Line... 39 Menggunakan Warna Latar Belakang dan Latar Depan... 40 Mengatur Warna Latar Belakang... 43 Mengatur Warna Latar Depan... 44 Foto atau Gambar sebagai Latar Belakang... 45 Pengulangan Gambar Latar Belakang... 46 BAB 5 Link dalam HTML... 49 Mengenal Alamat Absolute dan Alamat Relatif... 50 Atribut Target... 51 BAB 6 Memasukkan Gambar... 54 Atribut Alt... 55 Width dan Height... 56 Memilih Format Graphic... 57 Menyiapkan File Graphic... 58 Variasi Memasukkan Gambar... 59 Hyperlink Menggunakan Graphic... 62 Menggunakan Figure... 64 BAB 7 Membuat Tabel... 66 Mengatur Ukuran Tabel... 67 Mengatur Ukuran Kolom... 68 Menggabung Beberapa Sel... 69 Bekerja dengan Border... 70 Menentukan Garis Border Menggunakan Style... 72 Memberi Warna dan Pola Latar Belakang dan Depan. 73 Mengenal Padding, Spacing, dan Alignment... 74 viii
BAB 8 Membuat Form... 76 Membuat Form... 76 Input... 77 Textarea... 78 Select... 78 Atribut Name... 79 Form yang Utuh... 80 Form pada HTML5... 81 Datalist... 82 Fieldset... 82 Keygen... 83 Meter... 83 Output... 84 Progress... 85 Mengenal Atribut-Atribut Baru dalam Tiap Elemen Form... 85 Autofocus... 85 Pattern... 86 Placeholder... 86 Required... 86 Form Baru yang Berasal dari Tag Input... 87 Color... 87 Date... 87 Datetime... 87 Datetime-local... 89 Time... 89 Month... 89 Week... 89 Email... 90 Number... 90 Range... 91 Search... 91 Tel... 92 ix
url... 92 BAB 9 Pengenalan CSS... 93 Memasukkan CSS ke dalam HTML... 96 Metode Inline... 96 Metode Internal Style Sheet... 97 Metode External Style Sheet... 99 BAB 10 Aturan Dasar CSS... 102 Mengenal Selector... 102 Mengenal Property... 102 Value CSS... 103 Aturan Menulis Kode CSS... 103 Jenis-Jenis Selector CSS... 106 Universal Selector... 106 Element Type Selector... 106 Class Selector... 107 ID Selector... 107 Attribute Selector... 109 BAB 11 Panduan Menggunakan CSS Selector... 111 BAB 12 Lebih Dalam tentang CSS... 115 Prioritas pada Selector... 117 Aturan Nilai untuk Memilih Selector Paling Spesifik... 119 Menggunakan!Important... 120 Inheritance di dalam CSS... 121 Mengenal Nilai Property: Inherit... 122 BAB 13 Satuan Nilai pada CSS... 125 Nilai Absolut... 125 Nilai Relatif... 126 Nilai Persentase... 126 x
BAB 14 Warna pada CSS... 128 Format Warna Hexadecimal... 128 Format #RGB... 128 Penulisan Desimal... 129 Nama Warna... 129 Mengenal Nilai Property Transparent... 129 BAB 15 Teks pada CSS... 131 Jenis-Jenis Font Standar CSS... 131 Mengubah Jenis Font... 132 Aturan Pemberian Nilai untuk Nama Font... 132 Menggunakan @font-face... 134 Format dan Jenis Font dalam CSS... 135 Google Font... 138 Mengenal Font-Size... 141 Menggunakan Satuan Ukur Persentase... 141 Satuan Ukur Font em... 142 Mengatur Spasi dalam Paragraf... 143 Memiringkan Huruf... 144 Menebalkan Huruf... 144 Cara Mengubah Huruf Kapital... 145 Mengubah Huruf Menjadi Small Caps... 145 Variasi Penulisan Property untuk Font... 146 Underline, Overline, dan Line-Through... 147 Mengubah Warna Teks... 148 Mengatur Spasi Antarhuruf... 150 Mengatur Spasi Antarkata... 151 Mengatur Rata Teks... 151 xi
BAB 16 Bekerja dengan Box... 152 Property Pembentuk Box Model... 153 Cara Mengatur Lebar Element HTML... 154 Menggunakan Ukuran Relatif... 155 Mengatur Tinggi Elemen CSS... 156 Membuat Border... 156 Border untuk Setiap Sisi... 158 Menggunakan Padding... 159 Mengenal Shorthand Notation Property Padding... 160 Menggunakan Margin... 161 Tentang Penulis... 163 xii
Memulai Pembuatan Website HTML dan CSS merupakan kode paling dasar yang perlu dikuasai oleh siapa pun yang ingin belajar desain website dari nol. Memang, desainer web zaman sekarang bisa membuat situs dengan menggunakan alat bantu yang dilengkapi editor visual seperti Dreamweaver, namun jika tidak menguasai dasar-dasar HTML dan CSS, maka rasanya kurang afdal. Buku ini membantu Anda mempelajari dunia HTML dan CSS secara cepat dan praktis. Segmen yang dipilih untuk pembaca buku ini adalah segmen pemula yang baru ingin mempelajari teknik desain website dari nol. Tool yang Dibutuhkan Agar Anda bisa mengikuti buku ini secara efisien, ada beberapa tool yang harus diinstal atau dimiliki terlebih dahulu. Ada dua tool penting yang harus ada, yaitu: Browser Text Editor Browser Browser atau peramban digunakan untuk membuka file HTML dan CSS yang nanti akan kita buat. Jadi, hasil desain yang kita buat akan terlihat di dalam jendela browser. Anda bisa menggunakan salah satu atau beberapa browser berikut ini: Mozilla Firefox 1
Google Chrome Microsoft Edge Ada juga alternatif lain seperti Opera, Safari, atau lainnya. Namun, di dalam buku ini, Google Chrome menjadi browser utama yang akan digunakan untuk pengujian HTML dan CSS. Text Editor HTML dan CSS pada dasarnya hanyalah teks biasa yang tidak membutuhkan software khusus. Anda bisa menggunakan text editor sederhana seperti Notepad untuk menulis script HTML dan CSS. Namun, kami menyarankan untuk menggunakan Notepad++ karena memiliki fitur lebih lengkap untuk penulisan script, misalnya dilengkapi dengan penomoran baris, pewarnaan tag, dan sebagainya. Notepad++ dapat diunduh dari situs berikut: https://notepad-plusplus.org/. Notepad++ adalah text editor sederhana yang sudah mendukung lingkungan pemrograman 2
Jika Anda menulis kode HTML dan CSS menggunakan Notepad++, maka Anda akan mendapatkan berbagai kemudahan, misalnya munculnya hint untuk melengkapi penulisan kode, pewarnaan pada kode-kode untuk memudahkan kita membedakan teks biasa dan kode HTML/CSS, dan lain sebagainya. Jadi, direkomendasikan untuk memanfaatkan Notepad++ ketika ingin belajar HTML dan CSS. Menulis kode HTML dan CSS akan terasa lebih mudah saat menggunakan Notepad++ Halo Dunia dan Langkah-Langkah Awal yang Sebaiknya Dilakukan Jika Anda sudah menginstal Notepad++, maka Anda telah siap mempelajari HTML dan CSS dengan baik. Sekarang, pastikan Notepad++ telah Anda luncurkan. Selanjutnya, ketik script pendek HTML berikut ini. 3
<!DOCTYPE html> <html> <head> <title>belajar HTML (Jubilee)</title> </head> <body> <p>halo Dunia!</p> </body> </html> HTML yang dibuat menggunakan Notepad++ Simpan File HTML Apabila sudah selesai membuat script HTML, Anda harus menyimpannya dalam bentuk file. File yang dimaksud haruslah berekstensi HTML, misalnya.html atau.htm. Berikut langkah-langkah menyimpan ke dalam file HTML: 1. Pilih menu File > Save As. 2. Pilih folder untuk penyimpanan file-file HTML (dan CSS) yang nanti akan Anda buat. Sebagai contoh, klik drive C:. 3. Klik ikon Create a New Folder. 4. Buat folder dengan nama yang spesifik, misalnya: HTMLBaru. 5. Masuklah ke dalam folder tersebut. 4
Folder baru yang akan digunakan untuk menyimpan file-file HTML dan pendukung lainnya 6. Di dalam kotak teks File Name, ketik nama file yang diinginkan. Misalnya: Halo Dunia. 7. Lantas, di dalam menu kombo Save as Type, pilih Hypertext Markup Language File. 8. Tekan tombol Save. Menyimpan file HTML Mulai dari sini, file-file HTML, CSS, dan juga file pendukung lainnya seperti gambar diletakkan di dalam satu folder yang sama agar memudahkan pengarsipan file website. 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 163