Integrasi CSS dengan HTML

From OnnoWiki
Jump to navigation Jump to search

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: 

<!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.

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.

Pranala Menarik

Retrieved from "https://onnocenter.or.id/wiki/index.php?title=Integrasi_CSS_dengan_HTML&oldid=72405"