Unknown user at 08:18, 5 April 2025

2025-04-05T08:18:46Z

← Older revision		Revision as of 08:18, 5 April 2025
Line 1:		Line 1:
	Untuk modul '''Praktik: Mendesain Halaman Profil dengan CSS''' dalam mata kuliah Pemrograman Web, berikut adalah panduan langkah demi langkah untuk membuat halaman profil sederhana menggunakan HTML dan CSS. Panduan ini mencakup penjelasan konsep, contoh kode, dan implementasi menggunakan ~~alat~~ di Ubuntu 24.04 ~~tanpa menggunakan perangkat lunak dari Microsoft.~~		Untuk modul '''Praktik: Mendesain Halaman Profil dengan CSS''' dalam mata kuliah Pemrograman Web, berikut adalah panduan langkah demi langkah untuk membuat halaman profil sederhana menggunakan HTML dan CSS. Panduan ini mencakup penjelasan konsep, contoh kode, dan implementasi menggunakan tool di Ubuntu 24.04

	==1. Persiapan Lingkungan Pengembangan==		==1. Persiapan Lingkungan Pengembangan==

Unknown user at 07:49, 5 April 2025

2025-04-05T07:49:00Z

Show changes

Unknown user: Created page with "Untuk modul Praktik: Mendesain Halaman Profil dengan CSS dalam mata kuliah Pemrograman Web, berikut adalah panduan langkah demi langkah untuk membuat halaman profil sederh..."

2025-04-05T06:10:04Z

Created page with "Untuk modul **Praktik: Mendesain Halaman Profil dengan CSS** dalam mata kuliah Pemrograman Web, berikut adalah panduan langkah demi langkah untuk membuat halaman profil sederh..."

New page

Untuk modul **Praktik: Mendesain Halaman Profil dengan CSS** dalam mata kuliah Pemrograman Web, berikut adalah panduan langkah demi langkah untuk membuat halaman profil sederhana menggunakan HTML dan CSS. Panduan ini mencakup penjelasan konsep, contoh kode, dan implementasi menggunakan alat di Ubuntu 24.04 tanpa menggunakan perangkat lunak dari Microsoft.

## 1. Persiapan Lingkungan Pengembangan

Sebelum memulai, pastikan Anda memiliki alat-alat berikut yang telah diinstal pada sistem Ubuntu 24.04 Anda:

- **Editor Teks:**
- **Gedit:** Editor teks bawaan GNOME yang sederhana dan mudah digunakan.
- **Instalasi Gedit:**
```bash
sudo apt update
sudo apt install gedit
```
- **Menjalankan Gedit:**
```bash
gedit
```

- **Browser Web:**
- **Firefox:** Browser default di Ubuntu.
- **Instalasi Firefox:**
```bash
sudo apt update
sudo apt install firefox
```
- **Menjalankan Firefox:**
```bash
firefox
```

## 2. Struktur Proyek

Buat struktur direktori untuk proyek Anda:

```bash
mkdir profil-saya
cd profil-saya
```

Di dalam folder `profil-saya`, buat dua file berikut:

- `index.html`: File HTML utama.
- `style.css`: File CSS untuk mendesain halaman.

## 3. Membuat File HTML

Buka Gedit dan buat file `index.html` dengan konten berikut:

```html
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Profil Saya</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="profile">
<img src="foto-profil.jpg" alt="Foto Profil" class="profile-img">
<h1 class="name">Nama Anda</h1>
<p class="bio">Deskripsi singkat tentang diri Anda. Misalnya, profesi, hobi, atau minat.</p>
<ul class="social-links">
<li><a href="https://twitter.com/username" target="_blank">Twitter</a></li>
<li><a href="https://www.linkedin.com/in/username" target="_blank">LinkedIn</a></li>
<li><a href="https://github.com/username" target="_blank">GitHub</a></li>
</ul>
</div>
</div>
</body>
</html>
```

**Penjelasan:**

- **`<link rel="stylesheet" href="style.css">`**: Menghubungkan file HTML dengan file CSS eksternal.
- **Struktur `<div class="container">`**: Membungkus seluruh konten untuk memudahkan pengaturan tata letak.
- **Elemen `<img>`**: Menampilkan foto profil. Pastikan Anda memiliki file gambar dengan nama `foto-profil.jpg` di direktori yang sama.
- **Elemen `<ul class="social-links">`**: Daftar tautan ke media sosial Anda.

## 4. Membuat File CSS

Selanjutnya, buat file `style.css` dengan konten berikut:

```css
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
}

.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

.profile {
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
text-align: center;
width: 300px;
}

.profile-img {
width: 100px;
height: 100px;
border-radius: 50%;
object-fit: cover;
}

.name {
font-size: 24px;
margin: 10px 0;
}

.bio {
font-size: 14px;
color: #666;
}

.social-links {
list-style: none;
padding: 0;
}

.social-links li {
display: inline;
margin: 0 10px;
}

.social-links a {
text-decoration: none;
color: #0366d6;
}
```

**Penjelasan:**

- **`body`**: Mengatur font dasar, warna latar belakang, margin, dan padding.
- **`.container`**: Menggunakan Flexbox untuk memusatkan konten secara vertikal dan horizontal.
- **`.profile`**: Mengatur tampilan kartu profil dengan latar belakang putih, padding, border radius, dan bayangan.
- **`.profile-img`**: Mengatur ukuran dan bentuk gambar profil menjadi lingkaran.
- **`.name`**: Mengatur ukuran dan margin untuk nama.
- **`.bio`**: Mengatur ukuran dan warna teks untuk deskripsi singkat.
- **`.social-links`**: Mengatur daftar tautan media sosial agar tampil horizontal dan tanpa bullet points.

## 5. Menambahkan Gambar Profil

Pastikan Anda memiliki gambar profil dengan nama `foto-profil.jpg` dan letakkan di direktori `profil-saya`. Jika Anda tidak memiliki gambar, Anda dapat mengunduh gambar contoh dari internet atau menggunakan gambar placeholder.

## 6. Menjalankan Halaman Profil

Setelah semua file siap:

1. Buka terminal dan navigasikan ke direktori proyek:

```bash
cd ~/profil-saya
```

2. Buka file `index.html` menggunakan browser Firefox:

```bash
firefox index.html
```

Halaman profil Anda sekarang akan ditampilkan di browser, menampilkan desain sesuai dengan kode CSS yang telah Anda buat.

## 7. Sumber Belajar Tambahan

Untuk memperdalam pemahaman Anda tentang HTML dan CSS, berikut beberapa sumber belajar yang dapat Anda manfaatkan:

- **Tutorial Video:**
- [Cara Membuat Profile Website Sederhana HTML CSS Bootstrap](https://www.youtube.com/watch?v=PAhOIyLDTy8): Video ini memberikan panduan langkah demi langkah dalam membuat halaman profil sederhana menggunakan HTML dan CSS.
- [Membuat Halaman About Responsive untuk Website Company Profile](https://www.youtube.com/watch?v=Uk5S5CoN5oo): Video ini membahas cara membuat halaman "About" yang responsif menggunakan HTML dan CSS.

- **Dokumentasi dan Referensi:**
- [Mozilla Developer Network (MDN) Web Docs](https://developer.mozilla.org/en-US/docs/Web): Sumber dokumentasi resmi untuk teknologi web seperti HTML, CSS, dan JavaScript.
- [W3Schools](https://www.w3schools.com/): Situs tutorial yang menyediakan

Praktik: Mendesain halaman profil dengan CSS - Revision history

Unknown user at 08:18, 5 April 2025

Unknown user at 07:49, 5 April 2025

Unknown user: Created page with "Untuk modul **Praktik: Mendesain Halaman Profil dengan CSS** dalam mata kuliah Pemrograman Web, berikut adalah panduan langkah demi langkah untuk membuat halaman profil sederh..."

Unknown user: Created page with "Untuk modul Praktik: Mendesain Halaman Profil dengan CSS dalam mata kuliah Pemrograman Web, berikut adalah panduan langkah demi langkah untuk membuat halaman profil sederh..."