Pengenalan HTML dan CSS

Ukuran: px

Mulai penontonan dengan halaman:

Download "Pengenalan HTML dan CSS"

Siska Tan
7 tahun lalu
Tontonan:

2 Pengenalan HTML dan CSS

3 Pengenalan HTML dan CSS Jubilee Enterprise PENERBIT PT ELEX MEDIA KOMPUTINDO

4 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 ISBN: 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

5 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 Menguji Quirk Mode Tag HTML Tag HEAD Tag <body> Jadi, Apa Itu Tag dalam HTML? Tidak Semua Tag Berpasangan Case Sensitive vi

6 Elemen dalam HTML Mengenal Atribut Gambaran Umum HTML Referensi 1: Jadi, Apa Itu HTML? Tag Menjadi Senjata Penting dalam Dunia HTML Mulailah dengan Mengetik Document Type Struktur Script HTML Paling Sederhana Tag-Tag Lain yang Bisa Diletakkan di dalam Head Heading Digunakan untuk Menulis Struktur Dokumen Mengelola Tampilan Teks di dalam Browser Ordered List dan Unordered List Tentang Warna Latar Belakang Berbentuk Gambar Pusat dari Segala Jenis Website Adalah Link Dunia Website Cantik Berkat Foto atau Gambar Membuat Sistem Navigasi Pembagian Dokumen Ala HTML Memasang File Video ke dalam Website Memasang File Audio ke dalam Website Pembuatan Tabel Form untuk Membuat Website Interaktif BAB 3 Paragraf dan Teks Tag Paragraf Tag <break> Tag untuk Menebalkan dan Memiringkan Teks Heading BAB 4 Membuat List Ordered List Membuat Unordered List Style untuk List Mengatur Urut-Urutan Numbered List vii

7 Menggunakan Definition List Karakter-Karakter Spesial Menggunakan Horizontal Line Menggunakan Warna Latar Belakang dan Latar Depan Mengatur Warna Latar Belakang Mengatur Warna Latar Depan Foto atau Gambar sebagai Latar Belakang Pengulangan Gambar Latar Belakang BAB 5 Link dalam HTML Mengenal Alamat Absolute dan Alamat Relatif Atribut Target BAB 6 Memasukkan Gambar Atribut Alt Width dan Height Memilih Format Graphic Menyiapkan File Graphic Variasi Memasukkan Gambar Hyperlink Menggunakan Graphic Menggunakan Figure BAB 7 Membuat Tabel Mengatur Ukuran Tabel Mengatur Ukuran Kolom Menggabung Beberapa Sel Bekerja dengan Border Menentukan Garis Border Menggunakan Style Memberi Warna dan Pola Latar Belakang dan Depan. 73 Mengenal Padding, Spacing, dan Alignment viii

8 BAB 8 Membuat Form Membuat Form Input Textarea Select Atribut Name Form yang Utuh Form pada HTML Datalist Fieldset Keygen Meter Output Progress Mengenal Atribut-Atribut Baru dalam Tiap Elemen Form Autofocus Pattern Placeholder Required Form Baru yang Berasal dari Tag Input Color Date Datetime Datetime-local Time Month Week Number Range Search Tel ix

9 url BAB 9 Pengenalan CSS Memasukkan CSS ke dalam HTML Metode Inline Metode Internal Style Sheet Metode External Style Sheet BAB 10 Aturan Dasar CSS Mengenal Selector Mengenal Property Value CSS Aturan Menulis Kode CSS Jenis-Jenis Selector CSS Universal Selector Element Type Selector Class Selector ID Selector Attribute Selector BAB 11 Panduan Menggunakan CSS Selector BAB 12 Lebih Dalam tentang CSS Prioritas pada Selector Aturan Nilai untuk Memilih Selector Paling Spesifik Menggunakan!Important Inheritance di dalam CSS Mengenal Nilai Property: Inherit BAB 13 Satuan Nilai pada CSS Nilai Absolut Nilai Relatif Nilai Persentase x

10 BAB 14 Warna pada CSS Format Warna Hexadecimal Format #RGB Penulisan Desimal Nama Warna Mengenal Nilai Property Transparent BAB 15 Teks pada CSS Jenis-Jenis Font Standar CSS Mengubah Jenis Font Aturan Pemberian Nilai untuk Nama Font Format dan Jenis Font dalam CSS Google Font Mengenal Font-Size Menggunakan Satuan Ukur Persentase Satuan Ukur Font em Mengatur Spasi dalam Paragraf Memiringkan Huruf Menebalkan Huruf Cara Mengubah Huruf Kapital Mengubah Huruf Menjadi Small Caps Variasi Penulisan Property untuk Font Underline, Overline, dan Line-Through Mengubah Warna Teks Mengatur Spasi Antarhuruf Mengatur Spasi Antarkata Mengatur Rata Teks xi

11 BAB 16 Bekerja dengan Box Property Pembentuk Box Model Cara Mengatur Lebar Element HTML Menggunakan Ukuran Relatif Mengatur Tinggi Elemen CSS Membuat Border Border untuk Setiap Sisi Menggunakan Padding Mengenal Shorthand Notation Property Padding Menggunakan Margin Tentang Penulis xii

Memulai Pembuatan Website HTML dan CSS merupakan kode paling dasar yang perlu dikuasai oleh siapa pun yang ingin belajar desain website dari nol.

12 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

13 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: 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

14 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

15 <!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.

16 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

17 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/

dokumen-dokumen yang mirip

HTML5 Komplet. Jubilee Enterprise PENERBIT PT ELEX MEDIA KOMPUTINDO

HTML5 Komplet. Jubilee Enterprise PENERBIT PT ELEX MEDIA KOMPUTINDO 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