Integrasi CSS dengan HTML
Untuk modul **Integrasi CSS dengan HTML** dalam mata kuliah Pemrograman Web, berikut adalah penjelasan mengenai tiga metode utama untuk menghubungkan CSS ke dalam dokumen HTML, disertai contoh implementasi menggunakan alat di Ubuntu 24.04.
- 1. Metode Integrasi CSS dengan HTML
- a. CSS Eksternal
Metode ini melibatkan pembuatan file CSS terpisah yang dihubungkan ke file HTML menggunakan tag `<link>` dalam bagian `<head>`.
- Keuntungan:**
- Memudahkan pemeliharaan dan pengelolaan kode. - Dapat digunakan oleh beberapa halaman HTML, sehingga konsistensi desain terjaga.
- Contoh Implementasi:**
1. **Buat File CSS (`style.css`):**
```css
/* style.css */
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h1 {
color: blue;
text-align: center;
}
```
2. **Buat File HTML (`index.html`) dan Hubungkan CSS Eksternal:**
```html
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Integrasi CSS Eksternal</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
Selamat Datang!
Ini adalah contoh integrasi CSS eksternal.
</body> </html> ```
Pastikan file `style.css` dan `index.html` berada dalam direktori yang sama. Jika file CSS berada dalam folder berbeda, sesuaikan atribut `href` pada tag `<link>` sesuai dengan path yang benar. citeturn0search3
- b. CSS Internal
Metode ini menuliskan kode CSS langsung di dalam file HTML, tepatnya di dalam tag `<style>` pada bagian `<head>`.
- Keuntungan:**
- Cocok untuk halaman tunggal dengan gaya khusus yang tidak digunakan di halaman lain.
- Contoh Implementasi:**
```html
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Integrasi CSS Internal</title>
<style>
body {
background-color: #e0e0e0;
font-family: Verdana, sans-serif;
}
h1 {
color: green;
text-align: left;
}
</style>
</head> <body>
Selamat Datang!
Ini adalah contoh integrasi CSS internal.
</body> </html> ```
- c. CSS Inline
Metode ini menerapkan gaya langsung pada elemen HTML melalui atribut `style`.
- Keuntungan:**
- Berguna untuk penyesuaian cepat atau gaya unik pada elemen tertentu.
- Contoh Implementasi:**
```html
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Integrasi CSS Inline</title>
</head> <body style="background-color: #d0d0d0; font-family: Tahoma, sans-serif;">
Selamat Datang!
Ini adalah contoh integrasi CSS inline.
</body> </html> ```
- 2. Implementasi di Ubuntu 24.04
Untuk mempraktikkan integrasi CSS dengan HTML di Ubuntu 24.04, Anda memerlukan editor teks dan browser web. Berikut adalah beberapa alat yang dapat digunakan:
- a. Editor Teks
- **Visual Studio Code (VS Code):** Editor kode sumber yang populer dengan dukungan untuk berbagai bahasa pemrograman.
**Instalasi VS Code:**
1. **Tambahkan Repository Microsoft:**
```bash
sudo apt update
sudo apt install wget gpg
wget -qO- https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor > packages.microsoft.gpg
sudo install -o root -g root -m 644 packages.microsoft.gpg /usr/share/keyrings/
sudo sh -c 'echo "deb [arch=amd64 signed-by=/usr/share/keyrings/packages.microsoft.gpg] https://packages.microsoft.com/repos/vscode stable main" > /etc/apt/sources.list.d/vscode.list'
```
2. **Instalasi VS Code:**
```bash
sudo apt update
sudo apt install code
```
3. **Jalankan VS Code:**
```bash
code
```
- **Gedit:** Editor teks bawaan GNOME yang sederhana dan mudah digunakan.
**Instalasi Gedit:**
```bash
sudo apt update sudo apt install gedit ```
**Jalankan Gedit:**
```bash
gedit ```
- b. Browser Web
Untuk melihat hasil kode HTML dan CSS Anda, Anda memerlukan browser web. Beberapa opsi yang tersedia:
- **Firefox:** Browser default di Ubuntu.
**Instalasi Firefox:**
```bash
sudo apt update sudo apt install firefox ```
**Jalankan Firefox:**
```bash
firefox ```
- **Google Chrome:** Browser populer dari Google.
**Instalasi Google Chrome:**
1. **Unduh Paket DEB:**
```bash
wget https://dl.google.com/linux/direct/google-chrome-stable_current