Scribd
Unggah
15 tayangan9 halaman

Css

Diunggah oleh

Rahmadi Ilyass
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
15 tayangan9 halaman

Css

Diunggah oleh

Rahmadi Ilyass
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 9

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="style.css">`

- **Fungsi:** Menghubungkan dokumen HTML dengan file CSS eksternal bernama `style.css`
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/kopi3.jpg" 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 &copy; 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!

Anda mungkin juga menyukai