Modul FrontEnd Web Dasar
  • Pengenalan Penulis
  • Muqadimah
  • Tujuan Pembelajaran
  • Prasyarat Pembelajaran
  • Persiapan & Pendahuluan
    • Tools Yang Dibutuhkan
    • Cara Kerja Internet: Bagaimana Website Sampai ke Pengguna
    • Web Statis & Dinamis
    • Peranan Web Server & Web Browser
    • Anatomi Website (HTML, CSS, JavaScript)
    • Referensi Tambahan
  • Belajar HTML
    • Pengenalan HTML
    • Elemen, Tag, dan Atribut
    • Strukur Dasar HTML
    • Menjalankan File HTML di Browser
    • Semantic HTML
    • Tag Dasar HTML
      • Tag Heading (h1-h6)
      • Tag Paragraf (p)
      • Tag Untuk Pemformatan Teks Dasar
      • Tag Anchor/Link (a)
      • Tag Image (img)
      • Tag List (ul, ol, li)
      • Tag Table (table)
      • Tag Form (form, input, select, textarea)
      • Tag Div
      • Tag Audio & Video
      • iframe
      • Tag Untuk Citation, Quotation dan Definisi
      • Tag Untuk Hasil Kode Komputer
    • Simbol/Karakter Khusus
  • Belajar CSS
    • Pengenalan CSS
    • Menambahkan CSS ke HTML
    • Selektor CSS
    • Properti CSS
      • Teks Formatting
      • Warna dan Background
      • Pengenalan Box Model
      • Box Model: Konten
      • Box Model: Padding dan Margin
      • Box Model: Border
      • Box Shadow
      • Box Sizing
      • Positioning
      • Display
      • Pengenalan Flexbox
      • Flexbox: Properti Pada Container
      • Flexbox: Properti Item
      • Flexbox: Gap
      • Pengenalan Grid
      • Grid: Grid Struktur
      • Grid: Gap
      • Grid: Alignment
      • Grid: Grid Auto Flow
      • Grid: Item Placment
      • Grid: Functions in Grid Layout
    • Media Queries Untuk Responsifitas Pada Website
    • Media Queries: Media Types
    • Media Queries: Media Features
  • Belajar JavaScript
    • Pengenalan JavaScript
    • Menghubungkan JavaScript ke HTML
    • Variable
    • Tipe Data
    • Operator & Ekspresi
    • Perkondisian
    • Perulangan
    • Fungsi
    • Debugging
    • JavaScript BOM (browser Object Model)
      • Pengenalan JavaScript BOM
      • Akses ke Objek Window
      • Akses ke Objek Document
      • Akses Ke Navigator Object
      • Akses ke Screen Object
      • Akses ke Histori Object
    • JavaScript DOM (Document Object Model)
      • Pengenalan JavaScript DOM
      • Menarget Element HTML
      • Menambah, Menghapus, dan Mengedit Element
    • Events Handler
      • Pengenalan Event Handler Untuk Interaktifitas
      • Windows Events
      • Form Events
      • Keyboard Events
      • Clipboard Events
      • Mouse Events
    • Web Storage
      • Pengenalan Web Storage
      • Local Storage
      • Session Storage
  • Framework CSS
    • Pengenalan Framework CSS (Bootstrap)
    • Menambahkan Bootstrap ke Project
    • Penggunaan Utility Classes
    • Penggunaan Komponen Bootstrap
    • Customizing Bootstrap
    • Responsive dengan Bootstrap
  • Belajar Figma Untuk Slicing
    • Pengenalan dan Peran Figma
    • Membuat Desain Website
    • Melakukan Slicing
  • Pengenalan Framework FrontEnd
  • Hosting (Web Statis)
Powered by GitBook
On this page
  1. Belajar HTML

Pengenalan HTML

HTML (Hypertext Markup Language) adalah bahasa markah yang digunakan untuk membuat struktur dasar sebuah halaman web. Dengan HTML, kita dapat menentukan konten, tautan, gambar, dan elemen-elemen lainnya yang akan ditampilkan di halaman web.

HTML terdiri dari serangkaian elemen atau "tags" yang menandakan fungsi atau arti dari bagian-bagian tertentu di dalam halaman web. Setiap tag HTML dibungkus oleh tanda kurung siku < >, dan sebagian besar tag memiliki pasangan tag penutup yang sama dengan tanda garis miring di depan tag penutup, misalnya </>.

Contoh Kode HTML Sederhana:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contoh Halaman HTML</title>
</head>
<body>
    <h1>Selamat Datang di Dunia HTML</h1>
    <p>Ini adalah sebuah paragraf sederhana dalam HTML. Anda dapat menambahkan konten apapun di sini.</p>
    <a href="https://www.contohlink.com">Ini adalah contoh tautan</a>
    <img src="gambar.jpg" alt="Ini adalah contoh gambar">
</body>
</html>

Penjelasan singkat tentang kode di atas:

  • <!DOCTYPE html>: Mendefinisikan tipe dokumen sebagai dokumen HTML5.

  • <html lang="en">: Mulai elemen HTML dan menentukan bahasa dokumen (dalam hal ini bahasa Inggris).

  • <head>: Bagian kepala dokumen yang berisi meta-informasi tentang dokumen, seperti karakter set, viewport, dan judul halaman.

  • <meta charset="UTF-8">: Mendefinisikan set karakter dokumen sebagai UTF-8.

  • <meta name="viewport" content="width=device-width, initial-scale=1.0">: Mengatur tampilan halaman agar sesuai dengan lebar perangkat dan skala awal.

  • <title>Contoh Halaman HTML</title>: Menetapkan judul halaman.

  • <body>: Bagian utama dari dokumen HTML yang berisi konten yang akan ditampilkan di halaman web.

  • <h1>, <p>, <a>, <img>: Contoh dari beberapa elemen HTML yang umum digunakan untuk judul, paragraf, tautan, dan gambar.

  • href="https://www.contohlink.com": Atribut href pada elemen tautan (<a>) menentukan URL yang akan dihubungkan.

  • src="gambar.jpg": Atribut src pada elemen gambar (<img>) menentukan sumber gambar.

Pengenalan HTML menjadi langkah awal yang penting dalam mempelajari pengembangan web, karena ini adalah fondasi dari setiap situs web yang kita lihat di internet. Dalam modul ini, kita akan membahas berbagai tag HTML, struktur dasar sebuah dokumen HTML, serta konsep-konsep dasar dalam pembuatan halaman web yang efektif dan efisien. Yuk mulai memahami HTML lebih dalam!

PreviousBelajar HTMLNextElemen, Tag, dan Atribut

Last updated 11 months ago