html

Dasar Struktur HTML

Panduan komprehensif untuk memahami struktur fundamental dari sebuah halaman web. Siap membangun fondasi digital pertama Anda!

school Apa Itu HTML?

HTML (HyperText Markup Language) adalah fondasi utama dari setiap halaman web. Melalui HTML, kita menyusun struktur konten seperti teks, gambar, tombol, hingga layout dasar yang akan diperindah menggunakan CSS dan dihidupkan oleh JavaScript.

code

Struktur Utama

Menyusun kerangka halaman dengan elemen yang terorganisir.

layers

Fondasi Web

Bekerja berdampingan dengan CSS & JavaScript untuk membangun pengalaman web modern.

language

Universal

Dipahami oleh seluruh browser di dunia tanpa perlu instalasi tambahan.

tips_and_updates

Pelajari struktur HTML terlebih dahulu—ini akan membuat perjalanan belajar web jauh lebih mudah.

html Basic HTML

HTML membangun fondasi halaman web. Berikut contoh kode sederhana:


<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contoh Basic HTML</title>
</head>
<body>
    <h1>Halo Dunia!</h1>
    <p>Ini paragraf pertama saya.</p>
</body>
</html>

visibility Hasilnya:

Halo Dunia!

Ini paragraf pertama saya.

tag Apa Itu Tag HTML?

Tag HTML adalah elemen dasar yang digunakan untuk memberi struktur pada sebuah halaman web. Setiap tag memiliki fungsi tertentu, misalnya menandai judul, paragraf, link, atau gambar.

<h1> - Heading

Digunakan untuk menampilkan judul atau heading. Ada <h1> sampai <h6>.

Judul Halaman

<p> - Paragraf

Digunakan untuk menampilkan teks paragraf.

Ini adalah paragraf contoh.

<a> - Link

Digunakan untuk membuat tautan (hyperlink) ke halaman lain atau ke bagian dalam halaman.

Klik di sini

<img> - Gambar

Digunakan untuk menampilkan gambar.

article Membuat Paragraf

Paragraf di HTML digunakan untuk menampilkan teks dalam blok terpisah. Tag yang digunakan adalah <p>. Setiap paragraf dimulai dengan <p> dan diakhiri dengan </p>.

code Contoh Kode Paragraf


<p>Ini adalah paragraf pertama.</p>
<p>Ini paragraf kedua.</p>

visibility Hasilnya:

Ini adalah paragraf pertama.

Ini paragraf kedua.

image Memasukkan Gambar

Tag <img> digunakan untuk menampilkan gambar di halaman web. Atribut pentingnya adalah src untuk sumber gambar dan alt untuk deskripsi.

code Contoh Kode Gambar


<img src="https://placehold.co/150" alt="Contoh Gambar" width="150" height="150">

visibility Hasilnya:

Ubah ukuran gambar:
Contoh Gambar

format_size Mengatur Font

Kamu bisa mengubah ukuran, jenis, dan gaya font menggunakan CSS. Contohnya:

code Contoh CSS Mengatur Font


<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      font-family: 'Arial', sans-serif;
      font-size: 20px;
      font-weight: bold;
      color: #2b2b2b;
    }
    h1 {
      font-family: 'Georgia', serif;
      font-size: 32px;
      color: #1a73e8;
    }
  </style>
</head>
<body>
  <h1>Judul Utama</h1>
  <p>Ini paragraf dengan font yang sudah diatur.</p>
</body>
</html>

visibility Hasilnya:

Judul Utama

Ini paragraf dengan font yang sudah diatur.