pengenalan html dan css - s3.amazonaws.com · mengatur warna latar belakang ..... 43 mengatur warna...
TRANSCRIPT
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
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
vi
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
vii
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
viii
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
ix
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
x
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
xi
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
xii
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
1
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
2
• 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-plus-plus.org/.
Notepad++ adalah text editor sederhana yang sudah mendukung
lingkungan pemrograman
3
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.
4
<!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.
5
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.
Menyimpan file HTML 8. Tekan tombol Save. 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.
163
Tentang Penulis
Jubilee Enterprise, telah dipercaya oleh penerbit dan pembaca buku
tanah air dalam satu dasawarsa ini. Hingga sekarang, tulisan-
tulisannya 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