Integrasi CSS dengan HTML - Revision history

Unknown user: /* a. CSS Eksternal */

2025-04-08T05:00:05Z

a. CSS Eksternal

← Older revision		Revision as of 05:00, 8 April 2025
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===

Unknown user at 23:20, 6 April 2025

2025-04-06T23:20:56Z

← Older revision		Revision as of 23:20, 6 April 2025
Line 56:		Line 56:
	'''Contoh Implementasi:'''		'''Contoh Implementasi:'''

			<pre>
	<!DOCTYPE html>		<!DOCTYPE html>
	<html lang="id">		<html lang="id">
Line 79:		Line 80:
	</body>		</body>
	</html>		</html>
			</pre>

	===c. CSS Inline===		===c. CSS Inline===
Line 90:		Line 92:
	'''Contoh Implementasi:'''		'''Contoh Implementasi:'''

			<pre>
	<!DOCTYPE html>		<!DOCTYPE html>
	<html lang="id">		<html lang="id">
Line 102:		Line 105:
	</body>		</body>
	</html>		</html>
			</pre>

	==2. Implementasi di Ubuntu 24.04 ~~Tanpa Perangkat Lunak dari Microsoft~~==		==2. Implementasi di Ubuntu 24.04==

	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:		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===

Unknown user: /* a. Editor Teks */

2025-04-05T08:05:58Z

a. Editor Teks

← Older revision		Revision as of 08:05, 5 April 2025
Line 142:		Line 142:
	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:

Unknown user: /* a. CSS Eksternal */

2025-04-05T08:05:37Z

a. CSS Eksternal

← Older revision		Revision as of 08:05, 5 April 2025
Line 46:		Line 46:
	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===

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

Unknown user at 08:05, 5 April 2025

2025-04-05T08:05:16Z

Show changes

Unknown user: 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..."

2025-04-05T06:06:21Z

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

New page

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

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>
<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:**

```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;">
<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 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

Integrasi CSS dengan HTML - Revision history

Unknown user: /* a. CSS Eksternal */

Unknown user at 23:20, 6 April 2025

Unknown user: /* a. Editor Teks */

Unknown user: /* a. CSS Eksternal */

Unknown user at 08:05, 5 April 2025

Unknown user: 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..."

Unknown user: 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..."