Unknown user: /* 5. Contoh Praktik */

2025-04-06T23:19:07Z

5. Contoh Praktik

← Older revision		Revision as of 23:19, 6 April 2025
Line 202:		Line 202:
	background-color: #f0f0f0;		background-color: #f0f0f0;
	}		}

	.judul {		.judul {
	color: blue;		color: blue;
	text-align: center;		text-align: center;
	}		}

	#paragraf1 {		#paragraf1 {
	font-size: 18px;		font-size: 18px;
	}		}

	.highlight {		.highlight {
	background-color: yellow;		background-color: yellow;

Unknown user: /* 5. Contoh Praktik */

2025-04-06T23:18:48Z

5. Contoh Praktik

← Older revision		Revision as of 23:18, 6 April 2025
Line 179:		Line 179:
	2. '''Buat File HTML (`index.html`):'''		2. '''Buat File HTML (`index.html`):'''

			<pre>
	<!DOCTYPE html>		<!DOCTYPE html>
	<html lang="id">		<html lang="id">
Line 193:		Line 194:
	</body>		</body>
	</html>		</html>
			</pre>

	3. '''Buat File CSS (`style.css`):'''		3. '''Buat File CSS (`style.css`):'''
Line 213:		Line 215:
	background-color: yellow;		background-color: yellow;
	}		}


	==Pranala Menarik==		==Pranala Menarik==

	* [[Web Programming]]		* [[Web Programming]]

Unknown user: /* 4. Menggunakan Alat di Ubuntu 24.04 */

2025-04-06T23:18:06Z

4. Menggunakan Alat di Ubuntu 24.04

← Older revision		Revision as of 23:18, 6 April 2025
Line 95:		Line 95:
	Aturan ini akan menghapus margin dan padding default dari semua elemen.		Aturan ini akan menghapus margin dan padding default dari semua elemen.

	==4. Menggunakan ~~Alat~~ di Ubuntu 24.04==		==4. Menggunakan Tool di Ubuntu 24.04==

	Untuk mempraktikkan CSS di Ubuntu 24.04, Anda memerlukan editor teks dan browser web. Berikut adalah beberapa alat yang dapat digunakan:		Untuk mempraktikkan CSS di Ubuntu 24.04, Anda memerlukan editor teks dan browser web. Berikut adalah beberapa alat yang dapat digunakan:
Line 164:		Line 164:

	google-chrome		google-chrome

	==5. Contoh Praktik==		==5. Contoh Praktik==

Unknown user: /* d. Selektor Grup (Group Selector) */

2025-04-06T23:17:41Z

d. Selektor Grup (Group Selector)

← Older revision		Revision as of 23:17, 6 April 2025
Line 79:		Line 79:
	}		}

	Aturan ini akan mengatur jenis font untuk elemen `<h1>`, `<h2>`, dan `<h3>`.		Aturan ini akan mengatur jenis font untuk elemen `< h1 >`, `< h2 >`, dan `< h3 >`.

	===e. Selektor Universal===		===e. Selektor Universal===

Unknown user: /* a. Selektor Elemen (Type Selector) */

2025-04-06T23:17:17Z

a. Selektor Elemen (Type Selector)

← Older revision		Revision as of 23:17, 6 April 2025
Line 43:		Line 43:


	Aturan ini akan membuat semua elemen `<h1>` memiliki teks yang terpusat.		Aturan ini akan membuat semua elemen `< h1 >` memiliki teks yang terpusat.

	===b. Selektor Kelas (Class Selector)===		===b. Selektor Kelas (Class Selector)===

Unknown user: Created page with "Untuk modul pengenalan sintaks dan selektor CSS dalam mata kuliah Pemrograman Web, berikut adalah panduan yang mencakup penjelasan dasar, contoh, dan cara mengimplementasikann..."

2025-04-05T05:42:42Z

Created page with "Untuk modul pengenalan sintaks dan selektor CSS dalam mata kuliah Pemrograman Web, berikut adalah panduan yang mencakup penjelasan dasar, contoh, dan cara mengimplementasikann..."

New page

Untuk modul pengenalan sintaks dan selektor CSS dalam mata kuliah Pemrograman Web, berikut adalah panduan yang mencakup penjelasan dasar, contoh, dan cara mengimplementasikannya menggunakan alat di Ubuntu 24.04.

==1. Pengenalan CSS==

'''Cascading Style Sheets (CSS)''' adalah bahasa yang digunakan untuk mendesain tampilan dan format elemen dalam dokumen HTML. Dengan CSS, Anda dapat mengontrol warna teks, jenis font, spasi antar paragraf, ukuran kolom, gambar latar belakang, dan tata letak secara keseluruhan.

==2. Sintaks Dasar CSS==

Setiap aturan CSS terdiri dari tiga bagian utama:

* '''Selektor (Selector):''' Menentukan elemen HTML mana yang akan diberi gaya.
* '''Properti (Property):''' Aspek dari elemen yang ingin Anda ubah (misalnya, warna, ukuran font).
* '''Nilai (Value):''' Spesifikasi dari properti yang dipilih.

Format umum dari aturan CSS adalah:

selektor {
properti: nilai;
}

'''Contoh:'''

p {
color: blue;
font-size: 16px;
}

Aturan di atas akan membuat semua elemen `<p>` memiliki teks berwarna biru dengan ukuran font 16 piksel.

==3. Selektor CSS

Selektor digunakan untuk "memilih" elemen HTML yang ingin Anda beri gaya. Berikut adalah beberapa selektor dasar:

===a. Selektor Elemen (Type Selector)===

Menargetkan semua elemen dari jenis tertentu.

'''Contoh:'''

h1 {
text-align: center;
}

Aturan ini akan membuat semua elemen `<h1>` memiliki teks yang terpusat.

===b. Selektor Kelas (Class Selector)===

Menargetkan elemen yang memiliki atribut `class` tertentu. Ditandai dengan tanda titik (`.`) diikuti nama kelas.

'''Contoh:'''

.highlight {
background-color: yellow;
}

Aturan ini akan memberikan latar belakang kuning pada semua elemen yang memiliki kelas `highlight`.

===c. Selektor ID===

Menargetkan elemen dengan atribut `id` tertentu. Ditandai dengan tanda pagar (`#`) diikuti nama ID.

'''Contoh:'''

#header {
font-size: 24px;
}

Aturan ini akan mengatur ukuran font menjadi 24 piksel untuk elemen dengan ID `header`.

===d. Selektor Grup (Group Selector)===

Menggunakan koma untuk menggabungkan beberapa selektor yang memiliki aturan gaya yang sama.

'''Contoh:'''

h1, h2, h3 {
font-family: Arial, sans-serif;
}

Aturan ini akan mengatur jenis font untuk elemen `<h1>`, `<h2>`, dan `<h3>`.

===e. Selektor Universal===

Menargetkan semua elemen pada halaman. Ditandai dengan tanda bintang (`*`).

'''Contoh:'''

* {
margin: 0;
padding: 0;
}

Aturan ini akan menghapus margin dan padding default dari semua elemen.

==4. Menggunakan Alat di Ubuntu 24.04==

Untuk mempraktikkan CSS 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:'''

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

sudo apt update
sudo apt install code

3. '''Jalankan VS Code:'''

code

* '''Gedit:''' Editor teks bawaan GNOME yang sederhana dan mudah digunakan.

'''Instalasi Gedit:'''

sudo apt update
sudo apt install gedit

'''Jalankan Gedit:'''

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

sudo apt update
sudo apt install firefox

'''Jalankan Firefox:'''

firefox

* '''Google Chrome:''' Browser populer dari Google.

'''Instalasi Google Chrome:'''

1. '''Unduh Paket DEB:'''

wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb

2. '''Instalasi Paket:'''

sudo apt install ./google-chrome-stable_current_amd64.deb

3. '''Jalankan Chrome:'''

google-chrome

==5. Contoh Praktik==

Setelah alat-alat di atas terinstal, Anda dapat membuat file HTML dan CSS untuk mempraktikkan konsep yang telah dipelajari.

'''Langkah-langkah:'''

1. '''Buat Folder Proyek:'''

mkdir proyek-css
cd proyek-css

2. '''Buat File HTML (`index.html`):'''

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Belajar CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 class="judul">Selamat Datang</h1>
<p id="paragraf1">Ini adalah contoh paragraf pertama.</p>
<p class="highlight">Paragraf ini disorot dengan latar belakang kuning.</p>
</body>
</html>

3. '''Buat File CSS (`style.css`):'''

body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}

.judul {
color: blue;
text-align: center;
}

#paragraf1 {
font-size: 18px;
}

.highlight {
background-color: yellow;
}

==Pranala Menarik==

* [[Web Programming]]

Sintaks dan selektor CSS - Revision history

Unknown user: /* 5. Contoh Praktik */

Unknown user: /* 5. Contoh Praktik */

Unknown user: /* 4. Menggunakan Alat di Ubuntu 24.04 */

Unknown user: /* d. Selektor Grup (Group Selector) */

Unknown user: /* a. Selektor Elemen (Type Selector) */

Unknown user: Created page with "Untuk modul pengenalan sintaks dan selektor CSS dalam mata kuliah Pemrograman Web, berikut adalah panduan yang mencakup penjelasan dasar, contoh, dan cara mengimplementasikann..."