Belajar HTML CSS


Apa Itu HTML?

HTML (HyperText Markup Language) adalah bahasa standar untuk membuat halaman website. HTML bekerja dengan cara memberi tanda (tag) pada setiap elemen yang ingin kita tampilkan, seperti teks, gambar, link, dan lainnya.

HTML tidak bisa berdiri sendiri untuk menghasilkan tampilan yang cantik, tapi ia adalah pondasi dari semua website. Tanpa HTML, tidak akan ada struktur halaman web.


🧱 Struktur Dasar HTML

Setiap halaman HTML memiliki struktur umum seperti in


Penjelasan:

  • <!DOCTYPE html>: Menandakan bahwa ini adalah dokumen HTML5.

  • <html>: Elemen paling luar, membungkus seluruh dokumen.

  • <head>: Tempat untuk metadata, seperti judul dan link CSS.

  • <title>: Judul halaman, tampil di tab browser.

  • <body>: Isi utama halaman (yang ditampilkan di layar pengguna).

  • <h1>: Heading utama.

  • <p>: Paragraf teks.

✍️ Tag Teks Dasar

HTML menyediakan berbagai tag untuk menampilkan teks:


Contoh:


🔗 Membuat Link & Menampilkan Gambar

  • Link (Tautan)

keterangan:
  • href: alamat tujuan
  • target="_blank": membuka di tab baru
  • Gambar

Keterangan:
    • src: sumber gambar
    • alt: teks alternatif
    • width: lebar gambar (dalam pixel)

🧾 Daftar (List)

  • Unordered List (Bullet)
  • Ordered List (Angka)


📋 Bagian 5: Tabel di HTML

Tabel digunakan untuk menampilkan data dalam bentuk baris dan kolom. Dalam HTML, tabel dibuat menggunakan tag seperti <table>, <tr>, <td>, dan <th>.


keterangan:

💡 Tips Tambahan:

  • Hindari penggunaan border manual di HTML. Gunakan CSS untuk styling.

  • Tabel bisa digabung dengan colspan, rowspan untuk mengatur sel yang melebar.



📝 Bagian 6: Formulir HTML

Formulir digunakan untuk mengambil input dari pengguna, seperti login, pendaftaran, pemesanan tiket, dan lainnya.

🔧 Struktur Dasar Formulir


keterangan :

💡 Tips:

  • Gunakan atribut name pada input agar data bisa dikirim.

  • Gunakan label agar form lebih ramah pengguna.

  • Gunakan CSS untuk mempercantik tampilan form.





Sekarang kamu sudah memahami dasar dari HTML:

  • Struktur dokumen

  • Menampilkan teks, link, dan gambar

  • Membuat daftar


👉 Latihan:
Buatlah halaman HTML sederhana yang menampilkan:

  • Judul “Selamat Datang di (Nama Wisata)”

  • Paragraf tentang tempat wisata

  • Gambar (sesuaikan dengan tempat wisatanya)

  • Tautan ke akun media sosial


Komentar

Posting Komentar

Postingan Populer