Difference between revisions of "Integrasi CSS dengan HTML"

From OnnoWiki
Jump to navigation Jump to search
(Created page with "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...")
 
Line 1: Line 1:
−
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.
+
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
+
==1. Metode Integrasi CSS dengan HTML==
  
−
### a. CSS Eksternal
+
===a. CSS Eksternal===
  
−
Metode ini melibatkan pembuatan file CSS terpisah yang dihubungkan ke file HTML menggunakan tag `<link>` dalam bagian `<head>`.
+
Metode ini melibatkan pembuatan file CSS terpisah yang dihubungkan ke file HTML menggunakan tag `<link>` dalam bagian `<head>`.
  
−
**Keuntungan:**
+
'''Keuntungan:'''
  
−
- Memudahkan pemeliharaan dan pengelolaan kode.
+
* Memudahkan pemeliharaan dan pengelolaan kode.
−
- Dapat digunakan oleh beberapa halaman HTML, sehingga konsistensi desain terjaga.
+
* Dapat digunakan oleh beberapa halaman HTML, sehingga konsistensi desain terjaga.
  
−
**Contoh Implementasi:**
+
'''Contoh Implementasi:'''
  
−
1. **Buat File CSS (`style.css`):**
+
1. '''Buat File CSS (`style.css`):'''
  
−
  ```css
+
/* style.css */
−
  /* style.css */
+
body {
−
  body {
+
  background-color: #f0f0f0;
−
    background-color: #f0f0f0;
+
  font-family: Arial, sans-serif;
−
    font-family: Arial, sans-serif;
+
}
−
   }
+
 +
h1 {
 +
  color: blue;
 +
   text-align: center;
 +
}
  
−
  h1 {
+
2. '''Buat File HTML (`index.html`) dan Hubungkan CSS Eksternal:'''
−
    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>
  
−
  ```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.
−
  <!-- 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. citeturn0search3
+
===b. CSS Internal
  
−
### b. CSS Internal
+
Metode ini menuliskan kode CSS langsung di dalam file HTML, tepatnya di dalam tag `<style>` pada bagian `<head>`.
  
−
Metode ini menuliskan kode CSS langsung di dalam file HTML, tepatnya di dalam tag `<style>` pada bagian `<head>`.
+
'''Keuntungan:'''
  
−
**Keuntungan:**
+
* Cocok untuk halaman tunggal dengan gaya khusus yang tidak digunakan di halaman lain.
  
−
- Cocok untuk halaman tunggal dengan gaya khusus yang tidak digunakan di halaman lain.
+
'''Contoh Implementasi:'''
  
−
**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===
  
−
```html
+
Metode ini menerapkan gaya langsung pada elemen HTML melalui atribut `style`.
−
<!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 {
+
'''Keuntungan:'''
−
      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
+
* Berguna untuk penyesuaian cepat atau gaya unik pada elemen tertentu.
  
−
Metode ini menerapkan gaya langsung pada elemen HTML melalui atribut `style`.
+
'''Contoh Implementasi:'''
  
−
**Keuntungan:**
+
<!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>
  
−
- Berguna untuk penyesuaian cepat atau gaya unik pada elemen tertentu.
+
==2. Implementasi di Ubuntu 24.04 Tanpa Perangkat Lunak dari Microsoft==
  
−
**Contoh Implementasi:**
+
Untuk mempraktikkan integrasi CSS dengan HTML di Ubuntu 24.04 tanpa menggunakan perangkat lunak dari Microsoft, Anda memerlukan editor teks dan browser web. Berikut adalah beberapa alat yang dapat digunakan:
  
 +
===a. Editor Teks===
  
−
```html
+
* '''Gedit:''' Editor teks bawaan GNOME yang sederhana dan mudah digunakan.
−
<!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
+
'''Instalasi Gedit:'''
  
−
Untuk mempraktikkan integrasi CSS dengan HTML di Ubuntu 24.04, Anda memerlukan editor teks dan browser web. Berikut adalah beberapa alat yang dapat digunakan:
+
sudo apt update
 +
sudo apt install gedit
  
−
### a. Editor Teks
+
'''Menjalankan Gedit:'''
  
−
- **Visual Studio Code (VS Code):** Editor kode sumber yang populer dengan dukungan untuk berbagai bahasa pemrograman.
+
gedit
  
−
  **Instalasi VS Code:**
+
* '''Nano:''' Editor teks berbasis terminal yang ringan dan mudah digunakan.
  
−
  1. **Tambahkan Repository Microsoft:**
+
'''Instalasi Nano:'''
  
−
    ```bash
+
sudo apt update
−
    sudo apt update
+
sudo apt install nano
−
    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:**
+
'''Menjalankan Nano:'''
  
−
    ```bash
+
nano nama_file.html
−
    sudo apt update
 
−
    sudo apt install code
 
−
    ```
 
  
−
  3. **Jalankan VS Code:**
+
* '''Bluefish:''' Editor teks yang ditujukan untuk pemrograman dan pengembangan web.
  
−
    ```bash
+
'''Instalasi Bluefish:'''
−
    code
 
−
    ```
 
  
−
- **Gedit:** Editor teks bawaan GNOME yang sederhana dan mudah digunakan.
+
sudo apt update
 +
sudo apt install bluefish
  
−
  **Instalasi Gedit:**
+
'''Menjalankan Bluefish:'''
  
−
 
+
bluefish
−
```bash
 
−
  sudo apt update
 
−
  sudo apt install gedit
 
−
  ```
 
−
 
−
 
 
−
  **Jalankan Gedit:**
 
  
−
 
+
===b. Browser Web
−
```bash
 
−
  gedit
 
−
  ```
 
−
 
  
−
### 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:
+
* '''Firefox:''' Browser default di Ubuntu.
  
−
- **Firefox:** Browser default di Ubuntu.
+
'''Instalasi Firefox:'''
  
−
  **Instalasi Firefox:**
+
sudo apt update
 +
sudo apt install firefox
  
 +
'''Menjalankan Firefox:'''
 
    
 
    
−
```bash
+
firefox
−
  sudo apt update
 
−
  sudo apt install firefox
 
−
  ```
 
−
 
  
−
  **Jalankan Firefox:**
+
* '''Chromium:''' Versi sumber terbuka dari Google Chrome.
  
 +
'''Instalasi Chromium:'''
 
    
 
    
−
```bash
+
sudo apt update
−
  firefox
+
sudo apt install chromium-browser
−
  ```
+
 
−
+
'''Menjalankan Chromium:'''
  
−
- **Google Chrome:** Browser populer dari Google.
+
chromium-browser
  
−
  **Instalasi Google Chrome:**
+
Dengan menggunakan alat-alat di atas, Anda dapat membuat dan mengedit file HTML serta CSS.
  
−
  1. **Unduh Paket DEB:**
+
==Pranala Menarik==
  
−
    ```bash
+
* [[Web Programming]]
−
    wget https://dl.google.com/linux/direct/google-chrome-stable_current
 

Revision as of 15:05, 5 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: 

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

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: 

<!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 Tanpa Perangkat Lunak dari Microsoft

Untuk mempraktikkan integrasi CSS dengan HTML di Ubuntu 24.04 tanpa menggunakan perangkat lunak dari Microsoft, Anda memerlukan editor teks dan browser web. Berikut adalah beberapa alat 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=72297"