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>
<img src="foto-profil.jpg" alt="Foto Profil" class="profile-img">
Nama Anda
Deskripsi singkat tentang diri Anda. Misalnya, profesi, hobi, atau minat.
</body>
</html>
```
- **`<link rel="stylesheet" href="style.css">`**: Menghubungkan file HTML dengan file CSS eksternal.
- **Struktur `
`**: 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 `
`**: 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;
}
```
- **`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