View source for Praktik: Mendesain halaman profil dengan CSS

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

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


==Pranala Menarik==

* [[Web Programming]]