Berikut adalah penjelasan mengenai semua tag HTML dan aturan CSS tanpa simbol-simbol "*", agar
lebih mudah untuk disalin ke dalam Word:
Penjelasan HTML
HTML (HyperText Markup Language) adalah bahasa standar untuk membuat dan menyusun
halaman web. Berikut adalah rincian dari setiap elemen HTML dalam kode Anda:
1. `<!DOCTYPE html>`
Fungsi: Mendefinisikan tipe dokumen dan versi HTML yang digunakan. Pada kasus ini, `<!DOCTYPE
html>` menunjukkan bahwa dokumen ini menggunakan HTML5.
### 2. `<html lang="en">`
- **Fungsi:** Elemen root dari dokumen HTML yang membungkus semua konten halaman. Atribut
`lang="en"` menyatakan bahwa bahasa utama halaman adalah Bahasa Inggris.
### 3. `<head>`
- **Fungsi:** Berisi informasi meta tentang dokumen, seperti judul, karakter set, dan link ke file CSS
atau JavaScript eksternal.
- `<meta charset="UTF-8">`
- **Fungsi:** Menetapkan karakter encoding ke UTF-8, yang mendukung sebagian besar
karakter dari berbagai bahasa.
- `<meta name="viewport" content="width=device-width, initial-scale=1.0">`
- **Fungsi:** Mengontrol tampilan halaman pada perangkat mobile, memastikan responsivitas
dengan mengatur lebar viewport ke lebar perangkat dan skala awal ke 1.
- `<title>Website Responsive</title>`
- **Fungsi:** Menetapkan judul halaman yang muncul di tab browser.
- `<link rel="stylesheet" href="[Link]">`
- **Fungsi:** Menghubungkan dokumen HTML dengan file CSS eksternal bernama `[Link]`
untuk menerapkan gaya pada halaman.
### 4. `<body>`
- **Fungsi:** Berisi semua konten yang ditampilkan kepada pengguna, seperti teks, gambar, tautan,
dll.
- `<div class="container">`
- **Fungsi:** Elemen pembungkus utama yang menampung seluruh konten halaman. Kelas
`container` digunakan untuk menerapkan gaya CSS tertentu.
- `<div class="header">`
- **Fungsi:** Bagian header dari halaman yang biasanya berisi judul atau logo.
- **Konten:**
- `<h1 align="center">Selamat datang Diperpustakaan XYZ</h1>`
- **Fungsi:** Judul utama halaman dengan teks yang diatur rata tengah menggunakan
atribut `align="center"`.
- `<div class="main">`
- **Fungsi:** Bagian utama halaman yang dibagi menjadi beberapa kolom atau bagian.
- `<div class="left">`
- **Fungsi:** Sidebar kiri yang berisi menu navigasi.
- **Konten:**
- `<h3 align="center">Menu</h3>`
- **Fungsi:** Subjudul untuk menu, diatur rata tengah.
- `<ul>`
- **Fungsi:** Daftar tidak berurutan yang berisi item menu.
- `<li><a href="#">Login</a></li>`
- **Fungsi:** Item daftar dengan tautan yang mengarah ke "#" (placeholder).
- `<div class="middle">`
- **Fungsi:** Bagian konten utama tengah.
- **Konten:**
- `<h3 align="center">Berita</h3>`
- **Fungsi:** Subjudul untuk bagian berita, diatur rata tengah.
- `<p align="center"><strong><a href="#">Membuat Design Web
Responsive</a></strong></p>`
- **Fungsi:** Paragraf yang diatur rata tengah, menampilkan teks tebal dengan tautan.
- `<p><img src="/images/[Link]" alt=""></p>`
- **Fungsi:** Menampilkan gambar yang diapit oleh paragraf.
- `<p><a href="#">Baca Selengkapnya</a></p>`
- **Fungsi:** Tautan untuk membaca lebih lanjut, diapit oleh paragraf.
- `<div class="right">`
- **Fungsi:** Sidebar kanan yang menampilkan buku terpopuler.
- **Konten:**
- `<h3 align="center">Buku Terpopuler</h3>`
- **Fungsi:** Subjudul untuk bagian buku terpopuler, diatur rata tengah.
- `<p>`
- **Fungsi:** Pembungkus paragraf yang berisi daftar.
- `<ul>`
- **Fungsi:** Daftar tidak berurutan untuk menampilkan buku terpopuler.
- `<li><a href="#">Web Design</a></li>`
- **Fungsi:** Item daftar dengan tautan.
- `<div class="footer">`
- **Fungsi:** Bagian footer halaman.
- **Konten:**
- `<p align="center">Copright © 2018 Belajar CSS Responsive</p>`
- **Fungsi:** Paragraf yang diatur rata tengah menampilkan hak cipta.
---
## Penjelasan CSS
CSS (Cascading Style Sheets) digunakan untuk mengatur tampilan dan tata letak halaman web.
Berikut adalah rincian dari setiap aturan CSS dalam kode Anda:
### 1. Selektor Universal
```css
*{
padding: 0;
margin: 0;
box-sizing: border-box;
```
- **Fungsi:** Mengatur semua elemen agar tidak memiliki padding atau margin bawaan dan
menetapkan `box-sizing` ke `border-box`.
### 2. Elemen `body`
```css
body{
background: #dedede;
font-family: 'Verdana', arial ,sans-serif;
font-size: 15px;
```
- **Fungsi:** Mengatur latar belakang halaman dengan warna abu-abu terang, menetapkan jenis
huruf utama ke 'Verdana', dan mengatur ukuran font dasar ke 15 piksel.
### 3. Elemen `p` (Paragraf)
```css
p{
margin-bottom: 20px;
line-height: 1.5em;
```
- **Fungsi:** Memberikan margin bawah sebesar 20 piksel untuk setiap paragraf, dan mengatur
jarak antar baris menjadi 1.5 kali tinggi font.
### 4. Elemen `h3`
```css
h3{
margin-bottom: 20px;
border-bottom: 1px solid #aaa;
```
- **Fungsi:** Memberikan margin bawah sebesar 20 piksel dan menambahkan garis bawah dengan
warna abu-abu terang.
### 5. Elemen `a` (Tautan)
```css
a{
text-decoration: none;
color: #333;
a:hover{
color: #666;
```
- **Fungsi:** Menghapus garis bawah dari tautan, mengatur warna teks tautan ke abu-abu tua, dan
mengubah warna teks saat pengguna mengarahkan kursor ke atas (hover).
### 6. Kelas `.container`
```css
.container{
max-width: 1080px;
margin: 2px auto;
background: #fff;
overflow: hidden;
padding: 10px;
```
- **Fungsi:** Menetapkan lebar maksimum kontainer ke 1080 piksel, menambahkan margin dan
padding, serta mengatur latar belakang menjadi putih.
### 7. Kelas `.header`
```css
.header{
border: 1px solid #dedede;
padding: 10px;
margin: 10px;
background: #9e9afb;
```
- **Fungsi:** Menambahkan border, padding, dan margin dengan latar belakang berwarna ungu
muda.
### 8. Kelas `.left`
```css
.left{
width: 250px;
border: 1px solid #dedede;
padding: 10px;
margin: 10px;
float: left;
.left ul li a:hover{
color: #461AF3;
```
- **Fungsi:** Sidebar kiri diatur lebar 250 piksel, dengan hover pada tautan mengubah warna
menjadi ungu tua.
### 9. Kelas `.middle`
```css
.middle{
width: 500px;
border: 1px solid #dedede;
padding: 10px;
margin: 10px;
float: left;
.middle img{
max-width: 100%;
height: auto;
.middle a{
font-weight: bold;
```
- **Fungsi:** Bagian konten utama diatur lebar 500 piksel, gambar responsif, dan teks tautan diatur
tebal (bold).
### 10. Kelas `.right`
```css
.right{
width: 250px;
border: 1px solid #dedede;
padding: 10px;
margin: 10px;
float: left;
}
.right ul{
list-style-type: none;
.right ul li{
display: block;
.right ul li a{
display: block;
border-bottom: 1px solid #dedede;
margin-bottom: 10px;
padding: 10px 5px;
.right ul li a:hover{
color: #461AF3;
```
- **Fungsi:** Sidebar kanan diatur lebar 250 piksel, meng
hapus tanda bullet pada daftar, dan mengatur hover pada tautan untuk berubah warna menjadi
ungu tua.
### 11. Kelas `.footer`
```css
.footer{
border: 1px solid #dedede;
padding: 10px;
margin: 10px;
clear: both;
background: #9e9afb;
```
- **Fungsi:** Menambahkan border dan padding, serta latar belakang ungu muda pada footer.
---
Itu adalah penjelasan elemen-elemen HTML dan aturan CSS untuk desain web yang responsif. Jika
ada bagian yang ingin diubah atau diperjelas lebih lanjut, silakan beri tahu!