Belajar HTML

code
code

Belajar HTML5

Pelajari dasar-dasar HTML dengan pendekatan modern dan interaktif. Cocok untuk pemula yang ingin memulai perjalanan programming.

5
Topik Utama
15
Contoh Kode
100%
Gratis

school Pendahuluan

Kalian ingin belajar ngoding tapi masih belum paham konsep dasarnya? Tenang! Kali ini saya akan ajarkan kalian cara menulis kode HTML dengan mudah dan menyenangkan.

list Daftar Isi Tutorial

help Basic HTML

Pertama, siapkan dulu alat untuk ngoding kalian. Saya rekomendasikan beberapa pilihan:

computer
Desktop/Laptop

VS Code open_in_new

phone_android
Smartphone

Acode open_in_new

💡 Tips: Ngoding di HP memang bisa, tapi untuk pengalaman terbaik saya sarankan menggunakan PC atau laptop.

code Tag HTML

Langkah pertama yang perlu kalian lakukan adalah mengetik kode html:5 (khusus pengguna Visual Studio Code). Dengan mengetik itu, editor akan secara otomatis menghasilkan struktur dasar HTML: 

<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Website Saya</title>
  </head>
  <body>
    <!-- Konten website di sini -->
  </body>
</html>

Penjelasan Struktur:

  • description
    <!DOCTYPE html> - Memberitahu browser bahwa ini adalah HTML5
  • language
    <html lang="id"> - Root element dengan bahasa Indonesia
  • settings
    <head> - Berisi metadata dan konfigurasi
  • visibility
    <body> - Berisi konten yang terlihat di browser

article Membuat Paragraf

Di dalam HTML, kalian bisa membuat teks dengan berbagai jenis tag:

title Heading

Tag <h1> sampai <h6> untuk judul

notes Paragraf

Tag <p> untuk teks paragraf

keyboard_return Line Break

Tag <br> untuk baris baru

Contoh penggunaan:

<body>
  <h1>Judul Utama</h1>
  <h2>Sub Judul</h2>
  <p>Ini adalah paragraf pertama.
    <br>Dan ini baris baru dalam paragraf yang sama.
  </p>
  <p>Ini paragraf kedua yang terpisah.</p>
</body>

preview Hasil Preview:

Judul Utama

Sub Judul

Ini adalah paragraf pertama.
Dan ini baris baru dalam paragraf yang sama.

Ini paragraf kedua yang terpisah.

image Memasukkan Gambar

Untuk menambahkan gambar, gunakan tag <img> dengan atribut src dan alt: 

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

link Atribut src

Menentukan lokasi file gambar

accessibility Atribut alt

Deskripsi untuk aksesibilitas

font_download Mengatur Font

Kalian bisa mengatur tampilan teks menggunakan CSS inline dengan atribut style:

  • palette
    color - Mengatur warna teks (contoh: color: blue;)
  • format_size
    font-size - Mengatur ukuran teks (contoh: font-size: 20px;)
  • font_download
    font-family - Mengatur jenis font (contoh: font-family: Arial;) 
    • <p style="font-family: Arial; font-size: 20px; color: blue;">
  Teks dengan styling
</p>

    preview Hasil:

    Teks dengan styling

    💡 Pro Tips: Untuk font yang lebih menarik, kunjungi open_in_new Google Fonts