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 tanpa menggunakan perangkat lunak dari Microsoft.
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`):
/* 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:
<!-- index.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> <h1>Selamat Datang!</h1> <p>Ini adalah contoh integrasi CSS eksternal.</p> </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.
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:
<!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>
<h1>Selamat Datang!</h1>
<p>Ini adalah contoh integrasi CSS internal.</p>
</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:
<!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;"> <h1 style="color: red; text-align: right;">Selamat Datang!</h1> <p style="font-size: 14px;">Ini adalah contoh integrasi CSS inline.</p> </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 tool yang dapat digunakan:
a. Editor Teks
- Gedit: Editor teks bawaan GNOME yang sederhana dan mudah digunakan.
Instalasi Gedit:
sudo apt update sudo apt install gedit
Menjalankan Gedit:
gedit
- Nano: Editor teks berbasis terminal yang ringan dan mudah digunakan.
Instalasi Nano:
sudo apt update sudo apt install nano
Menjalankan Nano:
nano nama_file.html
- Bluefish: Editor teks yang ditujukan untuk pemrograman dan pengembangan web.
Instalasi Bluefish:
sudo apt update sudo apt install bluefish
Menjalankan Bluefish:
bluefish
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:
sudo apt update sudo apt install firefox
Menjalankan Firefox:
firefox
- Chromium: Versi sumber terbuka dari Google Chrome.
Instalasi Chromium:
sudo apt update sudo apt install chromium-browser
Menjalankan Chromium:
chromium-browser
Dengan menggunakan alat-alat di atas, Anda dapat membuat dan mengedit file HTML serta CSS.