RudihartoDalam era digital, memiliki website pribadi bukan lagi sekadar kebutuhan pelengkap, melainkan identitas profesional yang dapat menunjang karier dan bisnis Anda secara nyata. Dengan website portofolio, Anda bisa menampilkan karya, keahlian, dan profil diri yang dapat diakses kapan saja melalui internet. Pada seri ini, Anda akan belajar cara membuat website dengan HTML untuk Personal branding dari nol.
Di Part 1 ini, kita fokus pada pondasinya terlebih dahulu, yaitu struktur HTML dasar, pembuatan file pertama, dan membangun bagian header website. Sebelum mulai belajar membuat website dengan HTML, terlebih dahulu kami akan menjelaskan kenapa website personal itu penting.
Kenapa Web Pribadi Penting untuk Personal Branding?
Website memberi ruang bagi Anda untuk menampilkan:
- Portofolio pekerjaan
- Branding diri & CV profesional
- Proyek yang sedang atau telah dikerjakan
- Blog pribadi atau catatan akademik
Kapan saja seseorang mencari nama Anda, website tersebut dapat menjadi referensi utama yang meningkatkan kredibilitas dan profesionalitas Anda.
Tools yang Dibutuhkan
Untuk membuat website berbasis HTML, Anda hanya membutuhkan:
- Text editor digunakan untuk menulis code-code HTML
- Browser digunakan untuk mengakses project tersebut
Anda bisa menggunakan text editor dan browser apapun yang biasa atau sering digunakan. Sebagai informasi dalam project ini kami menggunakan text editor VC Code dan Google Chrome.
Memahami Struktur Dokumen HTML
Sebelum mulai membuat layout website, Anda perlu memahami kerangka dokumennya:
<!DOCTYPE html> <!-- Deklarasi HTML 5 -->
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio Website</title>
</head>
<body>
<!-- Konten Website -->
</body>
</html>Penjelasan elemen penting:
| Elemen | Fungsi |
|---|---|
| <!DOCTYPE html> | Menandakan dokumen menggunakan HTML5 |
| <html lang=”id”> | Menentukan bahasa situs adalah Bahasa Indonesia |
| <head> | Informasi SEO, CSS, meta, dan judul tab |
| <body> | Semua konten yang tampil di browser |
Wireframe Website HTML untuk Personal Branding
Pada tutorial ini, kita akan membuat website portofolio berdasarkan desain wireframe yang telah disiapkan. Desain dapat mengalami penyesuaian seiring kebutuhan pengembangan konten pada seri membuat website dengan HTML untuk personal branding.
Membuat Website dengan HTML Untuk Personal
Pada langkah ini, kita akan mulai memasuki pembuatan website HTML dari awal. Pada saat memulai membuat kode HTML dari awal hingga akhir, ditekankan menggunakan Elemen semantik seperti <header>, <nav>, <section>, dan <article>, yang membuat kode ini lebih mudah dibaca dan dikelola, baik oleh manusia maupun mesin.
Dalam contoh ini kami membuatnya di Laragon, sehingga akan mulai dari membuat folder dan file HTML.
- Buat folder porfolio untuk menempatkan file HTML, dan folder asset untuk menempatkan file CSS dan gambar di dalam folder Document/portfolio. Anda bebas ingin menempatkan project HTML ini di mana.
- Buat file index.html di dalam folder portfolio sebagai file index website HTML-nya. Lalu, isi dengan kode berikut ini:
<!DOCTYPE html>
<html lang="id">
<head>
<!-- Berisi meta website -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<footer>
<!-- Footer informasi -->
</footer>
</body>
</html>Keerangan:
- <!DOCTYPE html> Ini adalah tag deklarasi yang menyatakan format dokumen html dengan versi HTML 5
- <html lang=”id”> Menyatakan dokumen ini dibuat menggunakan Bahasa Indonesia
- <meta charset=”UTF-8″> Encoding karakter untuk halaman web, yang mendukung hampir semua karakter di dunia. Untuk menerjemahkan karakter khusus menjadi karakter teks yang bisa dibaca manusia.
- <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> Mengontrol tampilan website diperangkat ponsel, agar tampil proposional. Sehingga akan mendapatkan user experiencen. Jika tidak menggunakan tag ini, tampilan diponsel akan menjadi tampilan desktop yang dikecilkan.
- Tahap nomor 2 kita akan membuat logo gambar dan menu di header terlebih dahulu, dengan menambahkan script ini setelah tag <body>.
<header>
<!-- Logo/Gambar dan Navigasi -->
<div class="header-container">
<div class="logo">
<img src="asset/images/logo-header.png" alt="Logo Header Portfolio" width="75 " height="auto">
</div>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</div>
</header>Buat folder images didalam asset untuk menempatkan file logo-header.png. Kemudian membuat menu home hingga contact yang berada dibawah logo.
Keterangan:
- <header> Menandai area header website. Ini adalah tag semantik HTML5, menggantikan <div id=”header”> yang biasa ada di HTML sebelumnya.
- <div class=”header-container”> Sebagai wadah mengelompokan logo dan menu navigasi, untuk memudahkan styling CSS mengatur (mengatur posisi, padding, margin secara keseluruhan).
- <img src=”” > tag HTML untuk memanggil file gambar. Untuk lebih jelasnya dapat mengunjungi journal Belajar HTML Part 2: Menambahkan Gambar.
- <nav> Tag semantik untuk navigasi utama website
- <ul> Unordered List (daftar tidak berurutan) – struktur terbaik untuk menu
- <li> List Item (item daftar) – setiap menu item
Script lengkap:
<!DOCTYPE html>
<html lang="id">
<head>
<!-- Berisi meta website -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<!-- Logo/Gambar dan Navigasi -->
<div class="header-container">
<div class="logo">
<img src="asset/images/logo-header.png" alt="Logo Header Portfolio" width="75 " height="auto">
</div>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</div>
</header>
<footer>
<!-- Footer informasi -->
</footer>
</body>
</html>Hasil:
Sampai tahap ini, kita sudah berhasil membuat file HTML serta menambahkan elemen gambar sebagai logo dan menu navigasi dasar. Untuk sementara, tampilan masih menggunakan gaya default bawaan browser.
Pada tahap berikutnya, kita akan mulai menerapkan styling dengan CSS agar seluruh elemen pada halaman terlihat lebih rapi, menarik, dan sesuai desain wireframe.
Penutup
Pada tahap ini, kita telah mempelajari kembali struktur dasar HTML, membuat wireframe, menyiapkan struktur folder dan file, serta mulai membangun bagian header website. Pada pembahasan berikutnya, kita akan melanjutkan proses pengembangan dengan menambahkan konten utama pada bagian body sesuai rancangan wireframe.
Demikian seri belajar HTML part 1 tentang cara membuat website dengan HTML untuk personal branding, semoga bermanfaat.
