Praktik: Membuat halaman profil pribadi menggunakan HTML

Berikut adalah modul praktikum yang dirancang untuk membantu mahasiswa membuat halaman profil pribadi menggunakan HTML di sistem operasi Ubuntu 24.04. Modul ini akan memandu Anda melalui proses pembuatan halaman web sederhana dengan memanfaatkan alat-alat yang tersedia di lingkungan Linux.

Tujuan

Setelah menyelesaikan praktikum ini, mahasiswa diharapkan mampu:

Memahami struktur dasar dokumen HTML.
Menggunakan editor teks di Linux untuk menulis kode HTML.
Membuat dan menampilkan halaman profil pribadi yang mencakup informasi dasar, foto, dan tautan.

Prasyarat

Sebelum memulai praktikum, pastikan Anda telah:

Menggunakan sistem operasi Ubuntu 24.04.
Memiliki akses ke terminal Linux.
Memahami dasar-dasar navigasi file dan direktori di Linux.

Langkah-langkah Praktikum

1. Membuka Terminal

Buka terminal di Ubuntu dengan menekan `Ctrl + Alt + T` atau melalui menu aplikasi.

2. Membuat Direktori Proyek

Untuk mengorganisir file proyek, buat direktori baru bernama `profil_pribadi` di dalam direktori `Documents`:

mkdir ~/Documents/profil_pribadi

Navigasikan ke direktori tersebut:

cd ~/Documents/profil_pribadi

3. Membuat File HTML

Gunakan editor teks seperti `nano` untuk membuat file HTML baru bernama `index.html`:

nano index.html

Tambahkan kode berikut ke dalam file tersebut:

 <!DOCTYPE html>
 <html lang="id">
 <head>
     <meta charset="UTF-8">
     <title>Profil Pribadi</title>
 </head>
 <body>
     <header>
         <h1>Nama Anda</h1>
         <p>Alamat: Jalan Contoh No. 123, Kota Contoh</p>
         <p>Email: email@contoh.com</p>
     </header>
     <section>
         <h2>Tentang Saya</h2>
         <p>Saya adalah mahasiswa yang memiliki minat dalam pengembangan web dan desain grafis.</p>
     </section>
     <section>
         <h2>Hobi</h2>
         <ul>
             <li>Membaca</li>
             <li>Menulis</li>
             <li>Fotografi</li>
         </ul>
     </section>
     <section>
         <h2>Media Sosial</h2>
         <ul>
             <li><a href="https://www.linkedin.com/in/username" target="_blank">LinkedIn</a></li>
             <li><a href="https://twitter.com/username" target="_blank">Twitter</a></li>
             <li><a href="https://github.com/username" target="_blank">GitHub</a></li>
         </ul>
     </section>
 </body>
 </html>

Setelah selesai, simpan perubahan dengan menekan `Ctrl + O`, lalu tekan `Enter`, dan keluar dari editor dengan menekan `Ctrl + X`.

4. Menambahkan Foto Profil (Opsional)

Jika Anda ingin menambahkan foto profil, salin file gambar (misalnya `foto.jpg`) ke dalam direktori `profil_pribadi`. Kemudian, tambahkan elemen `<img>` di dalam elemen `<header>` pada file `index.html`:

 <header>
     <img src="foto.jpg" alt="Foto Profil" width="150">
     <h1>Nama Anda</h1>
     <p>Alamat: Jalan Contoh No. 123, Kota Contoh</p>
     <p>Email: email@contoh.com</p>
 </header>

5. Menampilkan Halaman Web di Browser

Setelah membuat file `index.html`, Anda dapat membukanya langsung di browser tanpa memerlukan server web. Gunakan perintah berikut di terminal untuk membuka file tersebut di browser default:

xdg-open index.html

Jika perintah `xdg-open` tidak tersedia, Anda dapat membuka file tersebut dengan menggandanya ke dalam browser atau menggunakan perintah spesifik untuk browser tertentu, seperti `firefox index.html` atau `google-chrome index.html`.

6. Menggunakan Server Web Lokal (Opsional)

Untuk mensimulasikan lingkungan server web, Anda dapat menggunakan server HTTP sederhana yang disediakan oleh Python. Pastikan Python telah terinstal di sistem Anda. Jalankan perintah berikut di direktori `profil_pribadi`:

python3 -m http.server

Setelah server berjalan, buka browser dan akses `http://localhost:8000` untuk melihat halaman profil Anda.

Tugas Tambahan

Untuk memperkaya halaman profil Anda, coba tambahkan elemen berikut:

Pengalaman Pendidikan: Gunakan elemen `` untuk menampilkan riwayat pendidikan Anda.
Pengalaman Kerja: Tambahkan daftar pengalaman kerja atau proyek yang pernah Anda kerjakan.
Gaya dengan CSS: Buat file `style.css` untuk menambahkan gaya pada halaman Anda, seperti warna latar belakang, jenis font, dan tata letak.

Kesimpulan

Dengan mengikuti langkah-langkah di atas, Anda telah berhasil membuat halaman profil pribadi menggunakan HTML di Ubuntu 24.04. Praktikum ini memberikan pemahaman dasar tentang pembuatan halaman web dan penggunaan tool yang tersedia di lingkungan Linux. Anda dapat mengembangkan lebih lanjut halaman ini dengan menambahkan elemen dan gaya sesuai kreativitas Anda.

Pranala Menarik

Web Programming