Difference between revisions of "Praktik: Mendesain halaman profil dengan CSS"
Jump to navigation
Jump to search
Onnowpurbo (talk | contribs) (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...") |
Onnowpurbo (talk | contribs) |
||
| Line 1: | Line 1: | ||
| − | Untuk modul | + | 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: | 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: | Buat struktur direktori untuk proyek Anda: | ||
| − | + | mkdir profil-saya | |
| − | mkdir profil-saya | + | cd profil-saya |
| − | cd profil-saya | ||
| − | |||
Di dalam folder `profil-saya`, buat dua file berikut: | 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: | Buka Gedit dan buat file `index.html` dengan konten berikut: | ||
| − | + | <!DOCTYPE html> | |
| − | <!DOCTYPE html> | + | <html lang="id"> |
| − | <html lang="id"> | + | <head> |
| − | <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> | |
| − | </head> | + | <body> |
| − | <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> | |
| − | </body> | + | </html> |
| − | </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: | Selanjutnya, buat file `style.css` dengan konten berikut: | ||
| − | + | body { | |
| − | body { | + | font-family: Arial, sans-serif; |
| − | + | background-color: #f0f0f0; | |
| − | + | margin: 0; | |
| − | + | padding: 0; | |
| − | + | } | |
| − | } | + | |
| − | + | .container { | |
| − | .container { | + | display: flex; |
| − | + | justify-content: center; | |
| − | + | align-items: center; | |
| − | + | height: 100vh; | |
| − | + | } | |
| − | } | + | |
| − | + | .profile { | |
| − | .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 { | |
| − | .profile-img { | + | width: 100px; |
| − | + | height: 100px; | |
| − | + | border-radius: 50%; | |
| − | + | object-fit: cover; | |
| − | + | } | |
| − | } | + | |
| − | + | .name { | |
| − | .name { | + | font-size: 24px; |
| − | + | margin: 10px 0; | |
| − | + | } | |
| − | } | + | |
| − | + | .bio { | |
| − | .bio { | + | font-size: 14px; |
| − | + | color: #666; | |
| − | + | } | |
| − | } | + | |
| − | + | .social-links { | |
| − | .social-links { | + | list-style: none; |
| − | + | padding: 0; | |
| − | + | } | |
| − | } | + | |
| − | + | .social-links li { | |
| − | .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. | 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: | Setelah semua file siap: | ||
1. Buka terminal dan navigasikan ke direktori proyek: | 1. Buka terminal dan navigasikan ke direktori proyek: | ||
| − | + | ||
| − | |||
cd ~/profil-saya | cd ~/profil-saya | ||
| − | + | ||
| − | |||
2. Buka file `index.html` menggunakan browser Firefox: | 2. Buka file `index.html` menggunakan browser Firefox: | ||
| − | + | ||
| − | |||
firefox index.html | firefox index.html | ||
| − | + | ||
| − | |||
Halaman profil Anda sekarang akan ditampilkan di browser, menampilkan desain sesuai dengan kode CSS yang telah Anda buat. | 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: | 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]] | |
| − | |||
| − | |||
Revision as of 14:49, 5 April 2025
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:
- Gedit: Editor teks bawaan GNOME yang sederhana dan mudah digunakan.
sudo apt update
sudo apt install gedit
- Menjalankan Gedit:
gedit
- Browser Web:
- Firefox: Browser default di Ubuntu.
- Instalasi Firefox:
- Firefox: Browser default di Ubuntu.
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:
- [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