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.
