Widget HTML #1

Beranda / HTML / Learn HTML5

Belajar HTML5 untuk Pemula: Pengenalan Dasar yang Mudah Dipahami

Posting Komentar

Hai teman-teman! Selamat datang di artikel belajar HTML5 buat kalian yang baru mulai petualangan di dunia web development. Di artikel kali ini, kita bakal bahas rencana belajar HTML5 untuk pemula, terutama minggu pertama, di mana kita akan kenalan dulu dengan HTML5, tag dasar, dan struktur HTML. Biar belajarnya makin asik, mari kita mulai dari hal yang paling sederhana, ya.

Hari 1-2: Apa Itu HTML dan Bagaimana Cara Kerjanya?

Teman-teman, HTML (HyperText Markup Language) itu ibarat fondasi dari semua halaman web. Setiap kali kalian buka sebuah website, di belakang layar ada kode HTML yang membentuk dan mengatur konten yang tampil di browser kalian. Nah, HTML ini bukan bahasa pemrograman, ya. HTML itu bahasa markup, artinya tugasnya memberi "label" atau "markup" pada konten seperti teks, gambar, tautan, dan elemen-elemen lain di sebuah halaman web.

Ketika belajar HTML5, teman-teman bakal sering ketemu istilah "tag." Tag ini fungsinya menandai elemen-elemen yang ingin kita tampilkan di halaman web. Misalnya, untuk membuat paragraf, kita pakai tag <p>. Setiap elemen HTML punya tag pembuka dan tag penutup, yang ditulis seperti ini:

<p>Ini adalah paragraf pertama saya!</p>

Sekarang, buat teman-teman yang baru banget mulai, coba buka text editor seperti VS Code atau Notepad. Tulis kode HTML sederhana, seperti ini:

<!DOCTYPE html>
<html>
  <head>
    <title>Halaman Pertama Saya</title>
  </head>
  <body>
    <h1>Halo, Dunia!</h1>
    <p>Ini adalah halaman HTML pertama saya. Seru banget, kan?</p>
  </body>
</html>

Simpan file ini dengan ekstensi .html (misalnya, index.html), lalu buka file tersebut di browser. Kalian akan lihat halaman sederhana dengan judul "Halo, Dunia!" dan satu paragraf teks. Gimana? Sudah terasa jadi developer, belum?

Hari 3-4: Mengenal Tag Dasar HTML

Oke, setelah mengenal sedikit tentang apa itu HTML dan gimana cara kerjanya, sekarang kita masuk ke elemen-elemen dasar yang sering digunakan.

1. Tag Heading (Judul)

HTML punya 6 level judul, dari <h1> sampai <h6>. Semakin kecil angkanya, semakin besar ukuran teksnya. Biasanya, <h1> dipakai buat judul utama, sedangkan <h6> buat subjudul kecil. Contohnya:

<h1>Ini Judul Utama</h1>
<h2>Ini Subjudul</h2>
<h3>Ini Sub-Subjudul</h3>

2. Tag Paragraf

Untuk menulis paragraf, kita gunakan tag <p>. Ini adalah tag yang paling sering dipakai buat teks biasa:

<p>Ini adalah paragraf pertama saya. Belajar HTML ternyata seru, ya!</p>

3. Tag Gambar

Nah, kalau mau menampilkan gambar di halaman HTML, kita pakai tag <img>. Tapi ingat, gambar butuh atribut src untuk menentukan URL atau lokasi file gambar tersebut:

<img src="gambar.jpg" alt="Deskripsi gambar">

Jangan lupa tambahkan atribut alt, ya. Ini penting buat accessibility dan SEO. Atribut ini bakal menampilkan deskripsi gambar kalau misalnya gambar gagal dimuat.

4. Tag Tautan (Link)

Kalau mau membuat tautan (hyperlink), kita bisa pakai tag <a> dengan atribut href yang menentukan URL tujuan:

<a href="https://teknomaven.com">Kunjungi Teknomaven</a>

Ketika pengunjung mengklik teks "Kunjungi Teknomaven," mereka akan diarahkan ke URL yang ditentukan. Gampang, kan?

5. Tag Daftar

HTML juga punya tag buat membuat daftar. Ada dua jenis daftar: ordered list (berurutan) dan unordered list (tidak berurutan). Contoh penggunaannya:

Daftar tidak berurutan (bullet points):

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Daftar berurutan (dengan angka):

<ol>
  <li>Belajar HTML</li>
  <li>Belajar CSS</li>
  <li>Belajar JavaScript</li>
</ol>

Sekarang teman-teman bisa coba gabungkan semua tag di atas untuk membuat halaman web kecil yang terdiri dari judul, paragraf, gambar, dan tautan!

Hari 5-7: Mengenal Atribut HTML

Setelah mengenal tag dasar, sekarang saatnya teman-teman belajar tentang atribut. Atribut ini memberikan informasi tambahan ke elemen HTML. Misalnya, pada tag <img>, atribut src menunjukkan sumber gambar, dan alt memberikan deskripsi gambar.

Berikut beberapa atribut yang sering dipakai:

1. Atribut href

Digunakan pada tag <a> untuk menentukan URL tujuan dari sebuah tautan. Contoh:

<a href="https://teknomaven.com">Kunjungi Blog Saya</a>

2. Atribut src

Ini biasanya dipakai pada tag <img> untuk menentukan lokasi gambar. Jangan lupa tambahkan atribut alt untuk deskripsi gambarnya:

<img src="logo.png" alt="Logo Perusahaan">

3. Atribut target

Ini atribut buat menentukan di mana tautan akan dibuka. Biasanya, kita pakai _blank untuk membuka tautan di tab baru:

<a href="https://teknomaven.com" target="_blank">Kunjungi Teknomaven</a>

4. Atribut title

Memberikan keterangan tambahan ketika kita mengarahkan kursor ke elemen. Contoh pada gambar:

<img src="gambar.jpg" alt="Gambar Contoh" title="Ini adalah gambar contoh">

5. Atribut style

Kalau mau menambahkan gaya CSS langsung ke elemen HTML, kita bisa pakai atribut style:

<p style="color: blue;">Teks ini berwarna biru.</p>

Tapi biasanya, untuk proyek yang lebih besar, teman-teman disarankan untuk menulis CSS di file terpisah, ya. Jangan khawatir, kita bakal bahas CSS nanti.

Tips Praktis Belajar HTML5

Sebelum kita tutup minggu pertama ini, berikut ada beberapa tips belajar HTML5 buat teman-teman:

  • Praktik Langsung! Belajar HTML itu paling efektif kalau langsung dipraktikkan. Coba eksperimen dengan berbagai tag dan atribut yang sudah kita bahas. Jangan takut salah, karena kita semua belajar dari kesalahan, kok.
  • Gunakan Developer Tools di Browser Teman-teman bisa memanfaatkan Developer Tools di browser (biasanya tekan F12 atau klik kanan lalu pilih "Inspect") untuk melihat struktur HTML dari website yang kalian kunjungi. Ini cara yang bagus untuk belajar dari situs yang sudah jadi.
  • Belajar dari Sumber Gratis Ada banyak sekali sumber gratis di internet yang bisa teman-teman pakai buat belajar HTML, seperti tutorial, video di YouTube, atau artikel blog.
  • Jangan Terburu-buru Belajar HTML5 itu proses. Jangan terburu-buru pengen bisa semuanya sekaligus. Pelajari satu topik per satu waktu dan coba pahami betul-betul sebelum lanjut ke topik berikutnya.

Nah, teman-teman, itulah rencana belajar HTML5 untuk minggu pertama. Semoga artikel ini membantu kalian yang baru mulai belajar HTML5. Tetap semangat dan terus berlatih, ya! Di minggu depan, kita akan lanjut dengan belajar form, tabel, dan media. Siap-siap belajar lebih banyak lagi!

List Part Artikel

Posting Komentar untuk "Belajar HTML5 untuk Pemula: Pengenalan Dasar yang Mudah Dipahami"

Posting Komentar