Saat ini, memiliki situs web pribadi adalah langkah penting untuk membangun kehadiran online, baik untuk berbagi portofolio, CV, atau sekadar sebagai wadah untuk mengekspresikan diri.
Dengan memahami dasar HTML (Hypertext Markup Language), kalian bisa membuat web pribadi yang sederhana namun efektif. Berikut langkah-langkah untuk memulai.
1. Persiapan Awal
Alat yang Dibutuhkan
- Code Editor: Gunakan editor teks seperti Visual Studio Code, Atom, atau Sublime Text.
- Browser: Untuk melihat hasil kode HTML, kalian bisa menggunakan browser apapun (Chrome, Firefox, atau Safari).
Struktur Dasar HTML
HTML memiliki struktur dasar yang terdiri dari beberapa tag penting, seperti <html>, <head>, dan <body>. Berikut adalah contoh template HTML dasar:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Pribadi Saya</title>
</head>
<body>
<h1>Selamat Datang di Web Pribadi Saya</h1>
<p>Ini adalah situs web pribadi yang dibangun dengan HTML dasar.</p>
</body>
</html>Keterangan:
<!DOCTYPE html>: Deklarasi untuk mendefinisikan bahwa dokumen ini menggunakan HTML5.<html>: Tag utama yang menampung seluruh isi halaman.<head>: Berisi informasi meta, judul, dan tautan CSS atau JavaScript.<body>: Berisi konten utama halaman yang akan ditampilkan di browser.
2. Menambahkan Konten Dasar
Header dan Footer
Untuk membuat struktur halaman yang rapi, kalian bisa menambahkan header dan footer. Contoh:
<header>
<h1>Nama Anda</h1>
<nav>
<a href="#tentang">Tentang</a> |
<a href="#portfolio">Portfolio</a> |
<a href="#kontak">Kontak</a>
</nav>
</header>
<footer>
<p>© 2023 Nama Anda</p>
</footer>Menambahkan Bagian “Tentang” dan “Portofolio”
Gunakan tag <section> untuk membagi halaman menjadi beberapa bagian.
<section id="tentang">
<h2>Tentang Saya</h2>
<p>Deskripsi singkat tentang diri Anda.</p>
</section>
<section id="portfolio">
<h2>Portfolio</h2>
<p>Daftar proyek atau karya yang ingin Anda tampilkan.</p>
</section>3. Memasukkan Gambar dan Link
Untuk menambahkan gambar, gunakan tag <img>. Untuk menambahkan tautan eksternal atau internal, gunakan tag <a>.
<section id="kontak">
<h2>Kontak</h2>
<img src="foto-profil.jpg" alt="Foto Profil" width="150">
<p>Hubungi saya di <a href="mailto:email@domain.com">email@domain.com</a></p>
</section>Pastikan kalian sudah memiliki file gambar yang ingin ditampilkan dalam folder yang sama atau mengarahkan tautan sesuai lokasi file gambar kalian.
4. Menambahkan CSS untuk Tampilan yang Menarik
CSS (Cascading Style Sheets) akan membantu menambah gaya pada halaman HTML kalian. Buat file CSS terpisah (misalnya style.css) dan hubungkan di bagian <head>.
Contoh Dasar CSS
Buat file style.css dan tambahkan kode berikut:
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header, footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 1em 0;
}
section {
padding: 20px;
}
h1, h2 {
color: #333;
}
nav a {
color: #fff;
text-decoration: none;
margin: 0 10px;
}Kemudian hubungkan file CSS ini ke HTML dengan menambahkan <link rel="stylesheet" href="style.css"> di bagian <head>.
5. Menyimpan dan Menjalankan Halaman Web
Simpan file HTML dengan ekstensi .html (misalnya index.html) dan file CSS sebagai .css (misalnya style.css). Buka file HTML di browser untuk melihat hasilnya.
Berikut adalah contoh lengkap kode HTML untuk membuat proyek web pribadi sederhana dengan struktur dasar yang telah dibahas (admin modifikasi sedikit):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Analiswinter - Web Pribadi</title>
<style>
/* CSS Internal */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: Arial, sans-serif;
line-height: 1.6;
background-color: #f4f4f9;
color: #333;
}
header {
background-color: #007acc;
color: #fff;
padding: 20px 0;
text-align: center;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}
header h1 {
font-size: 2.5em;
margin-bottom: 5px;
}
nav a {
color: #fff;
text-decoration: none;
margin: 0 15px;
font-weight: bold;
}
nav a:hover {
color: #ffeb3b;
text-decoration: underline;
}
section {
padding: 50px;
max-width: 800px;
margin: auto;
background-color: #ffffff;
border-radius: 8px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
margin-top: 20px;
}
h2 {
color: #007acc;
margin-bottom: 15px;
font-size: 1.8em;
text-align: center;
}
.profile-info {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 10px;
}
.profile-info img {
width: 150px;
height: 150px;
border-radius: 50%;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}
.profile-info p {
margin-bottom: 5px;
font-size: 1em;
}
ul {
list-style-type: none;
padding: 0;
}
ul li {
background: #e3f2fd;
padding: 15px;
margin-bottom: 10px;
border-radius: 5px;
font-weight: bold;
}
#kontak a {
color: #007acc;
text-decoration: none;
font-weight: bold;
}
#kontak a:hover {
text-decoration: underline;
}
footer {
text-align: center;
padding: 15px;
background-color: #007acc;
color: #fff;
margin-top: 30px;
font-size: 0.9em;
box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body>
<!-- Header -->
<header>
<h1>Analiswinter</h1>
<nav>
<a href="#tentang">Tentang</a>
<a href="#portfolio">Portfolio</a>
<a href="#kontak">Kontak</a>
</nav>
</header>
<!-- Bagian Tentang -->
<section id="tentang">
<h2>Tentang Saya</h2>
<div class="profile-info">
<img src="https://cdn-icons-png.flaticon.com/128/219/219970.png" alt="Foto Profil">
<p><strong>Nama:</strong> Analiswinter</p>
<p><strong>Tanggal Lahir:</strong> 15 Januari 1995</p>
<p><strong>Alamat:</strong> Jalan Teknologi No. 123, Jakarta</p>
<p><strong>Nomor Handphone:</strong> +62 812 3456 7890</p>
<p><strong>Lulusan Terakhir:</strong> S1 Teknik Informatika, Universitas Teknologi</p>
<p>Halo! Saya Analiswinter, seorang profesional dalam bidang teknologi dan pengembangan web. Saya menyukai tantangan dalam membuat proyek-proyek kreatif dan inovatif untuk membantu orang lain memanfaatkan teknologi secara maksimal.</p>
</div>
</section>
<!-- Bagian Portfolio -->
<section id="portfolio">
<h2>Portfolio</h2>
<p>Berikut adalah beberapa proyek yang pernah saya kerjakan:</p>
<ul>
<li><strong>Proyek A</strong> - Website portfolio profesional untuk klien.</li>
<li><strong>Proyek B</strong> - Sistem pengelolaan data menggunakan teknologi terbaru.</li>
<li><strong>Proyek C</strong> - Aplikasi mobile untuk monitoring kesehatan harian.</li>
</ul>
</section>
<!-- Bagian Kontak -->
<section id="kontak">
<h2>Kontak</h2>
<p>Hubungi saya di <a href="mailto:analiswinter@domain.com">analiswinter@domain.com</a></p>
</section>
<!-- Footer -->
<footer>
<p>© 2023 Analiswinter. All rights reserved.</p>
</footer>
</body>
</html>Kesimpulan
Dengan mengikuti langkah-langkah di atas, kita sekarang telah berhasil membuat web pribadi sederhana menggunakan HTML dan CSS. Kalian bisa terus mengembangkan proyek ini dengan menambah fitur interaktif menggunakan JavaScript atau memperindah tampilannya dengan CSS lebih lanjut.
Semoga berhasil membangun web pribadi! Sekian dari analiswinter.com, terimakasih.