Difference between revisions of "Integrasi CSS dengan HTML"
Onnowpurbo (talk | contribs) |
Onnowpurbo (talk | contribs) |
||
| (2 intermediate revisions by the same user not shown) | |||
| Line 29: | Line 29: | ||
2. '''Buat File HTML (`index.html`) dan Hubungkan CSS Eksternal:''' | 2. '''Buat File HTML (`index.html`) dan Hubungkan CSS Eksternal:''' | ||
| + | <pre> | ||
<!-- index.html --> | <!-- index.html --> | ||
<!DOCTYPE html> | <!DOCTYPE html> | ||
| Line 43: | Line 44: | ||
</body> | </body> | ||
</html> | </html> | ||
| + | </pre> | ||
| − | 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. | + | 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=== | ===b. CSS Internal=== | ||
| Line 56: | Line 58: | ||
'''Contoh Implementasi:''' | '''Contoh Implementasi:''' | ||
| + | <pre> | ||
<!DOCTYPE html> | <!DOCTYPE html> | ||
<html lang="id"> | <html lang="id"> | ||
| Line 79: | Line 82: | ||
</body> | </body> | ||
</html> | </html> | ||
| + | </pre> | ||
===c. CSS Inline=== | ===c. CSS Inline=== | ||
| Line 90: | Line 94: | ||
'''Contoh Implementasi:''' | '''Contoh Implementasi:''' | ||
| + | <pre> | ||
<!DOCTYPE html> | <!DOCTYPE html> | ||
<html lang="id"> | <html lang="id"> | ||
| Line 102: | Line 107: | ||
</body> | </body> | ||
</html> | </html> | ||
| + | </pre> | ||
| − | ==2. Implementasi di Ubuntu 24.04 | + | ==2. Implementasi di Ubuntu 24.04== |
| − | Untuk mempraktikkan integrasi CSS dengan HTML 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=== | ===a. Editor Teks=== | ||
| Line 142: | Line 148: | ||
bluefish | bluefish | ||
| − | ===b. Browser Web | + | ===b. Browser Web=== |
Untuk melihat hasil kode HTML dan CSS Anda, Anda memerlukan browser web. Beberapa opsi yang tersedia: | Untuk melihat hasil kode HTML dan CSS Anda, Anda memerlukan browser web. Beberapa opsi yang tersedia: | ||
Latest revision as of 12:00, 8 April 2025
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.