Dari Zero ke Hero, Kuasai Dasar-Dasar HTML dalam Sehari!

Dimas Novianto Agustus 08, 2025

 Dari Zero ke Hero

Kuasai Dasar-Dasar HTML Dalam Sehari

Halo semuaa, balik lagi nih sama sayaa, bagi yang baru datang saya akan memperkenalkan diri, nama saya DImas Novianto Dwi Prasetyo. pada kesempatan kali ini saya mempelajari beberapa dasar dasar HTML dan saya akan memaparkan materi tentang HTML pada blog kali ini, nahh pasti penasaran kan apa itu HTML, dan pengaplikasian nya yukk mari di simak.


Apa Itu HTML? Kenapa Harus Belajar?

HTML (HyperText Markup Language) itu seperti kerangka manusia kalau kita analogikan website sebagai tubuh. Tanpa HTML, website cuma akan jadi halaman kosong yang membosankan!

Fakta Keren:

  • 💡 98% website di dunia pake HTML
  • 🕒 Dibuat pertama kali tahun 1991 oleh Tim Berners-Lee
  • ✨ Versi terbarunya adalah HTML5 (yang punya fitur super keren!)

Contoh Sederhana dan mudah nya!
<!DOCTYPE html>
<html>
<head>
    <title>Website Pertamaku!</title>
</head>
<body>
    <h1>Halo Dunia Digital! 🌍</h1>
    <p>Aku sedang belajar HTML dan ini sangat menyenangkan!</p>
</body>
</html>
Alat yang Kamu Butuhkan
Sebelum mulai, siapkan:
  1. Text Editor (VS Code, Sublime Text, atau Notepad++)
  2. Web Browser (Chrome, Firefox, Edge)
  3. Semangat Belajar! 💪
Pro Tip: Pakai VS Code karena ada fitur auto-complete yang bikin coding lebih mudah!
Tag-Tag HTML Penting yang Wajib Kamu Tahu
1. Struktur Dasar HTML
<!DOCTYPE html>
<html>
<head>
    <!-- Ini area untuk meta informasi -->
    <title>Judul Website</title>
</head>
<body>
    <!-- Ini area konten yang akan ditampilkan -->
</body>
</html>

2. Tag Heading (h1-h6)
<h1>Ini Heading Level 1 (Paling Besar)</h1>
<h2>Ini Heading Level 2</h2>
...
<h6>Ini Heading Level 6 (Paling Kecil)</h6>

3. Paragraph dan Format Text
<p>Ini adalah paragraph biasa.</p>
<p><b>Teks tebal</b>, <i>miring</i>, <u>underline</u></p>
<p><mark>Teks highlight</mark> dan <small>teks kecil</small></p>
4. List (Daftar)
<!-- Unordered List (bullet) -->
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

<!-- Ordered List (angka) -->
<ol>
    <li>Pertama</li>
    <li>Kedua</li>
</ol>

5. Gambar dan Link
<!-- Gambar -->
<img src="foto-saya.jpg" alt="Deskripsi Foto" width="200">

<!-- Link -->
<a href="https://google.com">Kunjungi Google</a>
Implementasi HTML dalam Projek Nyata
1. Membuat Website Biodata
<!DOCTYPE html>
<html>
<head>
    <title>Biodata Bima</title>
</head>
<body>
    <h1>👋 Halo, Aku Bima!</h1>
    <img src="foto-bima.jpg" alt="Foto Bima" width="150">
    
    <h2>📚 Tentang Aku</h2>
    <p>Aku siswa kelas 11 yang suka coding, gaming, dan makan bakso!</p>
    
    <h2>🎮 Hobi</h2>
    <ul>
        <li>Bermain Valorant</li>
        <li>Membuat website</li>
        <li>Nonton anime</li>
    </ul>
    
    <h2>📱 Kontak</h2>
    <p>Email: <a href="mailto:bima@example.com">bima@example.com</a></p>
</body>
</html>

2. Membuat Blog Sederhana
<!DOCTYPE html>
<html>
<head>
    <title>Blog Petualangan Bima</title>
</head>
<body>
    <header>
        <h1>🌍 Petualangan Coding Bima</h1>
        <nav>
            <a href="#home">Home</a> |
            <a href="#about">About</a> |
            <a href="#contact">Contact</a>
        </nav>
    </header>
    
    <article>
        <h2>📝 Belajar HTML Hari Pertama</h2>
        <p>Hari ini aku belajar membuat struktur HTML...</p>
        <img src="coding.jpg" alt="Sedang Coding">
    </article>
    
    <footer>
        <p>© 2023 Blog Bima. All rights reserved.</p>
    </footer>
</body>
</html>

Tips & Trik Keren HTML
  1. Shortcut Emoji di HTML: Tinggal copy-paste emoji langsung dari keyboard atau pakai kode seperti &#128512; untuk 
  2. Comments berguna untuk mencatat: <!-- Ini komentar -->
  3. Pratikkan langsung di platform seperti CodePen.io atau JSFiddle
  4. Inspect Element di browser (Ctrl+Shift+I) untuk belajar dari website lain
Apa Selanjutnya?
Setelah menguasai HTML, kamu bisa lanjut ke:
  1. CSS → Bikin website cantik
  2. JavaScript → Bikin website interaktif
  3. Bootstrap → Framework untuk bikin website cepat
Kesimpulan
HTML itu MUDAH dan MENYENANGKAN! Dengan dasar-dasar yang sudah kita pelajari,
 kamu sudah bisa:
 Membuat website sederhana
 Membuat blog pribadi
 Membuat portofolio keren
Jangan lupa untuk terus berlatih!  "Every expert was once a beginner" - jadi jangan 
menyerah ya! Yuk diskusi di komentar! Ada pertanyaan? Atau mau kasih ide untuk 
tutorial selanjutnya? 
Dimas Novianto

Diposting oleh Dimas Novianto

Posting Komentar

1 Komentar