Scribd
Unggah
7 tayangan5 halaman

HTML CSS Explanation

Diunggah oleh

Irfan Muhammad Yusuf
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
7 tayangan5 halaman

HTML CSS Explanation

Diunggah oleh

Irfan Muhammad Yusuf
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/ 5

Penjelasan Struktur HTML dan CSS

Berikut adalah penjelasan lebih detail dan rinci dari setiap bagian kode HTML dan CSS:

### Struktur Dasar HTML

Bagian pertama dari kode ini adalah deklarasi struktur dasar HTML5.

```html

<!DOCTYPE html>

<html lang="en">

<head> ... </head>

<body> ... </body>

</html>

```

- `<!DOCTYPE html>`: Deklarasi ini menginformasikan kepada browser bahwa dokumen ini

menggunakan HTML5.

- `<html lang="en">`: Tag `<html>` adalah elemen utama yang membungkus seluruh konten.

`lang="en"` memberi tahu browser dan pembaca layar bahwa halaman ini dalam bahasa Inggris.

- `<head>`: Bagian ini berisi metadata yang tidak ditampilkan langsung pada halaman, tetapi

penting untuk konfigurasi.

- `<body>`: Semua konten yang akan ditampilkan pada halaman berada di dalam tag ini.
### Bagian `<head>`

Bagian ini berisi beberapa tag penting:

```html

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Irfan Muhammad Yusup Jajuli Personal Website</title>

<style type="text/css"> ... </style>

```

1. **`<meta charset="UTF-8">`**: Mengatur jenis karakter menjadi UTF-8, yang mendukung hampir

semua karakter bahasa.

2. **`<meta name="viewport" content="width=device-width, initial-scale=1.0">`**: Pengaturan ini

penting untuk tampilan mobile; mengatur agar lebar halaman sesuai dengan lebar perangkat.

3. **`<title>`**: Memberikan judul halaman yang muncul di tab browser.

4. **`<style type="text/css"> ... </style>`**: Memuat gaya (CSS) untuk mempercantik tampilan.

### CSS: Pengaturan Tampilan Halaman

Bagian berikutnya adalah CSS. Ini adalah bagian yang mengatur gaya dan tampilan elemen-elemen

di halaman.
#### Reset Style

Bagian ini membersihkan gaya dasar dari browser:

```css

*{

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: Arial, sans-serif;

```

- `*`: Selector universal yang mempengaruhi semua elemen di halaman.

- `margin: 0;` dan `padding: 0;`: Menghapus jarak default dari elemen agar lebih mudah diatur.

- `box-sizing: border-box;`: Mengatur elemen agar ukuran border dan padding termasuk dalam

`width` dan `height` elemen.

- `font-family: Arial, sans-serif;`: Mengatur font halaman menggunakan Arial atau sans-serif sebagai

alternatif.

#### Animasi Bayangan pada Kotak

Bagian ini menciptakan animasi bayangan (shadow) pada elemen `header`:


```css

@keyframes boxShadowAnimation {

0% { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); }

50% { box-shadow: 15px 15px 30px rgba(0, 0, 0, 0.3); }

100% { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); }

```

- `@keyframes`: Mendefinisikan animasi.

- `0%`, `50%`, `100%`: Mengatur perubahan bayangan dari awal, tengah, hingga akhir.

#### `.container`: Pengaturan Kontainer Utama

Bagian ini membungkus seluruh isi halaman dengan batas margin di kiri dan kanan.

```css

.container {

width: 90%;

margin: 0 auto;

padding-top: 20px;

```
- `width: 90%`: Mengatur lebar container menjadi 90% dari layar.

- `margin: 0 auto`: Mengatur margin otomatis di kiri dan kanan agar berada di tengah.

- `padding-top: 20px`: Memberi jarak di atas agar konten tidak terlalu menempel ke atas.

#### `.header`: Gaya Bagian Header

Header adalah bagian paling atas yang berisi foto profil, nama, dan profesi.

#### Tabel dan Container Tabel

Menata tabel agar tampil rapi dan estetis.

#### Bagian Footer

Menambahkan hak cipta di bagian bawah halaman.

#### Media Queries: Desain Responsif

Mengatur ukuran elemen untuk tampilan mobile.

Kode ini membangun situs web yang estetis, responsif, dan informatif dengan animasi sederhana

untuk membuat tampilan lebih dinamis.

Anda mungkin juga menyukai