Buku ini diharapkan dapat menambah ilmu pengetahuan dan menjadi bahan bacaan bagi mahasiswa dan masyarakat umum yang ingin memperdalam ilmu pemrograman dalam bahasa HTML dan CSS. Pada kesempatan ini, penulis ingin mengucapkan terima kasih yang sebesar-besarnya kepada semua pihak yang telah mendukung terselesaikannya buku ini.
Apa itu HTML ?
Semua yang ditampilkan di browser dari kode HTML yang kita tulis adalah default, baik warna maupun ukurannya. Jika kita menambahkan kode CSSnya, tampilannya seperti ini, sesuai dengan kode CSS yang kita tulis.
HTML Headings
Element Image Self Closing
Tables, Unordered List dan Ordered List
Element Input dan Break Element <br>
Formulir adalah potongan HTML yang dapat digunakan untuk membuat elemen formulir pada halaman web. Elemen tombol ini digunakan untuk membuat tombol sehingga pengguna dapat melakukan suatu tindakan. Ketika kita menulis Meta Author, Keyword dan Description, ketiga meta tersebut berkaitan dengan SEO (Search Engine Optimization) yang digunakan untuk memudahkan mesin pencari seperti Google mendapatkan informasi dari website yang kita buat.
Meta tag robot digunakan untuk memberikan pesan kepada mesin pencari bagaimana halaman web akan diproses, jika nilai atribut konten adalah “index, follow” maka mesin pencari akan mengindeks halaman tersebut (termasuk dalam hasil pencarian). Break Element adalah elemen yang dapat menutup sendiri dengan tulisan yang digunakan untuk membuat baris baru. Penggaris Horizontal adalah elemen yang dapat menutup sendiri dengan tulisan
yang digunakan untuk membuat garis datar.
Elemen paragraf tertulis digunakan untuk membuat paragraf pada halaman web. Atribut ini digunakan untuk mengatur format paragraf, dengan nilai: kiri, kanan, tengah, atau rata.
Pengertian dan Fungsi CSS
Contoh Penerapan CSS
Jika belum tahu maka belum paham, yuk perhatikan cara menggunakan CSS pada file HTML pada kode di bawah ini.
Selector, Declaration, Property dan Value CSS
Cara Penulisan Selector, Declaration, Property dan Value CSS
Penulisan property
Kemudian, setelah menulis properti background-color, diberikan karakter ":" untuk memisahkan properti dan nilai. Setelah tanda “:” akan ditulis nilai atau nilai dari properti itu sendiri, nilainya tergantung pada jenis properti yang digunakan.
Antara satu property dengan property lain
Case Sensitivity
White Space
Contoh selector pertama akan mencari semua paragraf yang mempunyai atribut class=first, sedangkan contoh kedua akan mencari semua tag HTML yang memiliki class=first dan berada di dalam paragraf. Kemudian penulisan angka dan satuan juga tidak boleh mengandung spasi, kecuali nilai yang tidak memerlukan nilai satuan, misalnya nilai 0. Properti adalah atribut yang diperlukan untuk mengatur jenis gaya CSS atau bagian mana yang akan digunakan. diubah dari tag HTML.
Cara Penulisan Selector, Declaration, Property dan Value CSS
Penulisan property dilakukan dengan cara menuliskan property mana yang sebaiknya digunakan di dalam kurung kurawal, misalnya kita akan menuliskan property background-color pada atribut body HTML, maka kita cukup menuliskan “background-color” di antara kurung kurawal. Khusus untuk penulisan atribut terakhir, titik koma " ; " tidak boleh ditulis, namun tetap sangat disarankan untuk ditambahkan.
Inline CSS
Internal CSS
External CSS
External style CSS dengan <link> element
External style CSS dengan @import
Tag di atas memberi tahu perangkat yang mengakses halaman web (apa pun itu) bahwa kode CSS "style.css" hanya untuk layar media.
Universal Selector
The point of using Lorem Ipsum is that it has a more or less normal distribution of letters, unlike using 'Content. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will reveal many sites that are still in their infancy. It has its roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
Porsi standar Lorem Ipsum yang digunakan sejak tahun 1500-an direproduksi di bawah ini bagi yang berminat. Element selector atau disebut juga dengan tag selector atau type selector adalah istilah untuk selector yang nilainya adalah tag HTML itu sendiri. Tag HTML apa pun dapat digunakan sebagai pemilih dan semua tag tersebut akan ditangkap oleh pemilih ini.
Jika tag
berisi tag , maka panjang tag tersebut juga akan menjadi 14 piksel, hingga bertemu dengan tag penutup
. Finibus Bonorum et Malorum" (Extremes of Good and Evil) karya Cicero, ditulis pada tahun 45 SM. Pada kode di atas, tag h1 akan memiliki garis bawah dan tag p akan memiliki ukuran font 14px.Class Selector
Kemudian kelas judul memberikan ukuran font 30px dan garis bawah untuk hurufnya. Jika kita menjalankannya di web browser maka akan muncul tampilan seperti pada gambar berikut.
ID Selector
Font External
The point of using Lorem Ipsum is that it has a more or less normal distribution of letters, as opposed to using "Content here, content here" which makes it look like.
Normal Document Flow
Pada gambar di atas, elemen HTML akan ditampilkan secara berurutan, elemen tersebut akan menempati halaman kosong, sehingga hingga tidak ada lagi ruang pada halaman HTML, elemen tersebut akan ditampilkan pada baris baru halaman HTML. Kemudian pada gambar di atas, ketika halaman web browser diminimalkan, maka akan menyesuaikan juga layout elemen HTML yang ada.
Property Position
The point of using Lorem Ipsum is that it has a more or less normal distribution of letters, as opposed to using 'Content here, content here' which makes it look like readable English. Different versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humor and the like). It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
The point of using Lorem Ipsum is that it has a more or less normal distribution of letters, as opposed to using it. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text and a search for 'lorem ipsum' will turn it up. Over the years, different versions have developed, sometimes by accident, sometimes on purpose (injected with .. humor and the like). It is a long established fact that the reader will be distracted by the readable content of the page when looking at its layout.
Various versions have emerged over the years, sometimes by accident, sometimes on purpose (inserted humor and the like). Over the years, different versions have emerged, sometimes by accident, sometimes on purpose (inserted humor and the like). It is a long known fact that a reader is distracted by the readable content of a page when looking at its layout. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model.
The point of using Lorem Ipsum is that it has a more or less normal distribution.
Multiple Box Shadow
Komentar
CSS Media Type
Universal Selector
Jika di pastekan ke dalam file HTML, maka kode tersebut akan mewarnai seluruh tag HTML yang ada. Untuk lebih jelasnya tulis kode di bawah ini dan beri nama index.html.
Soal-soal Latihan
There are many versions of Lorem Ipsum passages available, but most have undergone alterations of some form, with injected humor or random words that don't look the least bit plausible. It uses a dictionary of over 200 Latin words combined with a handful of sample sentence structures to create Lorem Ipsum that looks reasonable. College in Virginia, looked up one of the more obscure Latin words, consectetur, from a passage of Lorem Ipsum and examined the occurrences of the word in classical literature, discovered an unmistakable source.
Silahkan buat kode cssnya dengan menggunakan properti font-size, color, dan usage important agar hasilnya seperti gambar di bawah ini. Ada banyak variasi bagian Lorem Ipsum yang tersedia, namun sebagian besar telah mengalami beberapa bentuk perubahan karena disuntikkan. Semua generator Lorem Ipsum di internet cenderung mengulangi bagian yang telah ditentukan sebelumnya sesuai kebutuhan, menjadikannya generator pertama yang sebenarnya.
The generated Lorem Ipsum is therefore always free of repetition, injected humor, or non-characteristic words, etc. All the Lorem Ipsum generators on the Internet tend to repeat predefined pieces as needed, making this the first true generator on the Internet. Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and go.
Lorem Ipsum has been the standard dummy text in the industry since the 16th century, when an unknown printer took a galley of letters and scrambled them to make a book of type samples. It was popularized in the 1960s with the release of Letraset sheets containing passages of Lorem Ipsum, and more recently with desktop publishing software such as Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text. It was popularized in the 1960s with the release of Letraset sheets containing passages of Lorem Ipsum, and more recently with desktop publishing software such as Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simple dummy text of the printing and typesetting industry.
Ini dipopulerkan pada tahun 1960an dengan dirilisnya lembaran Letraset yang berisi bagian-bagian Lorem Ipsum, dan baru-baru ini dengan perangkat lunak desktop publishing seperti Aldus PageMaker yang menyertakan versi Lorem Ipsum. Silakan buat halaman web dengan template bootstrap css yang telah dipelajari sebelumnya sehingga hasilnya seperti gambar di bawah ini.
