Praktik: Mendesain halaman profil dengan CSS

From OnnoWiki
Jump to navigation Jump to search

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

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:
sudo apt update
sudo apt install gedit
      • Menjalankan Gedit:
gedit
  • Browser Web:
    • Firefox: Browser default di Ubuntu.
      • Instalasi Firefox:
sudo apt update
sudo apt install firefox
      • Menjalankan Firefox:
firefox

2. Struktur Proyek

Buat struktur direktori untuk proyek Anda: 

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: 

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

Penjelasan:

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

    4. Membuat File CSS

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

    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: 

      cd ~/profil-saya

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

      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:


    Pranala Menarik

Retrieved from "https://onnocenter.or.id/wiki/index.php?title=Praktik:_Mendesain_halaman_profil_dengan_CSS&oldid=72302"