Daftar Isi
Sebagai desainer, kamu mungkin lebih sering bergelut dengan warna, font, dan layout. Tapi ketika kamu mulai terjun ke dunia web, sedikit pengetahuan tentang HTML bisa jadi senjata tambahan yang sangat berharga.
Artikel ini adalah panduan singkat untuk kamu, desainer pemula, yang ingin memahami dasar-dasar HTML tanpa harus menjadi programmer.
Baca juga: Dipulangkan RI, Terpidana Mati Serge Atlaoui Bebas Bersyarat di Prancis
Kenapa Desainer Perlu Tahu HTML?
- Bisa komunikasi lebih lancar dengan developer
- Paham batasan dan potensi desain di web
- Bisa bikin prototipe langsung di browser
- Lebih mandiri saat revisi atau testing desain
Struktur Dasar HTML
Setiap halaman web dibuat dengan struktur seperti ini:
htmlCopyEdit<!DOCTYPE html>
<html>
<head>
<title>Judul Halaman</title>
</head>
<body>
<h1>Halo, ini judul utama!</h1>
<p>Ini adalah paragraf teks.</p>
</body>
</html>
Penjelasan cepat:
<html>: Elemen utama halaman<head>: Tempat metadata (judul, link font, dll.)<body>: Semua isi visual halaman ditaruh di sini
Tag-Tag HTML yang Sering Digunakan Desainer
| Tag | Fungsi |
|---|---|
<h1> – <h6> | Judul dari besar ke kecil |
<p> | Paragraf teks |
<a href=""> | Link ke halaman lain atau eksternal |
<img src="" alt=""> | Menampilkan gambar |
<div> | Container umum, sering dipakai untuk layout |
<span> | Inline container, cocok untuk styling teks |
<section>, <header>, <footer> | Struktur semantik untuk layout |
Contoh Halaman Mini untuk Portofolio Desainer
htmlCopyEdit<!DOCTYPE html>
<html>
<head>
<title>Portofolio Saya</title>
</head>
<body>
<header>
<h1>Portofolio Desain</h1>
</header>
<section>
<h2>Halo, Saya Aira</h2>
<p>Saya seorang desainer grafis yang sedang belajar web!</p>
<img src="desain1.jpg" alt="Contoh desain karya saya" width="300">
</section>
<footer>
<p>Hubungi saya di <a href="mailto:aira@example.com">aira@example.com</a></p>
</footer>
</body>
</html>
Tips untuk Desainer Pemula
- Belajar langsung dari desainmu sendiri: Buat versi HTML dari mockup yang kamu desain di Figma, Photoshop, atau Canva.
- Gunakan tools seperti CodePen atau JSFiddle: Bisa langsung lihat hasilnya tanpa install apa pun.
- Fokus ke struktur, bukan styling dulu: Styling nanti bisa pakai CSS — yang juga bisa kamu pelajari pelan-pelan.
Sumber Belajar HTML Singkat & Gratis
Kesimpulan
Kamu nggak harus jadi coder untuk memahami HTML. Tapi dengan sedikit pengetahuan dasar, kamu akan lebih percaya diri dalam mendesain, berdiskusi dengan developer, dan bahkan bisa mulai mengubah desainmu jadi web sungguhan.
Jadi, kalau kamu seorang desainer pemula, HTML bukan hal yang menakutkan — malah justru bikin kamu satu langkah lebih unggul.
Penulis: Indra