Master HTML Cepat: Buat Halaman Web Fungsional Dalam 85 Menit

Pelajari cara membuat halaman web fungsional dalam 85 menit! Bergabunglah dengan Master HTML Cepat dan kuasai keterampilan desain web secara menyenangkan.

By WGS INDONESIA
4.9/4.9
Indonesia
Rp 43,750.00 GRATIS
E-COURSE banner with text and icons representing Artificial Intelligence and video learning

Detail Pembelajaran

Master HTML Cepat: Buat Halaman Web Fungsional Dalam 85 Menit
  • Belajar Web, Pemrograman HTML, Tutorial Singkat, Desain Web, Pengembangan Web

Baca Online

Master HTML Cepat: Buat Halaman Web Fungsional Dalam 85 Menit

Daftar Isi

  1. Pengantar HTML dan Web
  2. Struktur Dasar HTML
  3. Elemen HTML Dasar
  4. Atribut HTML Penting
  5. Membuat Halaman Web Sederhana
  6. Formulir dan Input
  7. Menambahkan Gambar dan Media
  8. Link dan Navigasi
  9. Tips dan Best Practices
  10. Sumber Belajar dan Source Code

1. Pengantar HTML dan Web

HTML (HyperText Markup Language) adalah bahasa dasar untuk membuat halaman web. HTML berfungsi untuk mengatur struktur dan konten halaman web, seperti teks, gambar, link, dan elemen lainnya.

Dalam pembelajaran ini, Anda akan belajar membuat halaman web fungsional dengan HTML secara cepat dan mudah, dimulai dari dasar hingga membuat halaman yang bisa digunakan.

Ilustrasi komputer dengan kode HTML dan ikon web di layar

2. Struktur Dasar HTML

Setiap halaman HTML memiliki struktur dasar yang wajib dipahami. Berikut contoh struktur HTML paling sederhana: 

<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="UTF-8">
    <title>Judul Halaman</title>
  </head>
  <body>
    <h1>Halo Dunia!</h1>
    <p>Ini adalah paragraf pertama saya.</p>
  </body>
</html>

Penjelasan:

  • <!DOCTYPE html> : Menandakan dokumen ini adalah HTML5.
  • <html lang="id"> : Elemen root dengan bahasa Indonesia.
  • <head> : Bagian metadata, seperti judul dan pengaturan karakter.
  • <body> : Isi utama halaman yang terlihat pengguna.

3. Elemen HTML Dasar

Berikut beberapa elemen HTML yang sering digunakan:

  • <h1> sampai <h6> : Judul dengan tingkat heading berbeda.
  • <p> : Paragraf teks.
  • <a> : Link atau tautan.
  • <img> : Menampilkan gambar.
  • <ul> dan <ol> : Daftar tidak berurutan dan berurutan.
  • <div> : Kontainer blok untuk mengelompokkan elemen.

Contoh penggunaan elemen dasar: 

<h1>Judul Utama</h1>
<p>Ini adalah paragraf yang menjelaskan sesuatu.</p>
<a href="https://www.example.com">Kunjungi Website</a>
<img src="https://placehold.co/400x200/png?text=Contoh+Gambar" alt="Contoh gambar pemandangan gunung dengan langit biru cerah" />

4. Atribut HTML Penting

Atribut memberikan informasi tambahan pada elemen HTML. Contoh atribut penting:

  • href pada <a> untuk menentukan alamat link.
  • src pada <img> untuk menentukan sumber gambar.
  • alt pada <img> untuk deskripsi gambar (penting untuk aksesibilitas).
  • title untuk memberikan tooltip saat hover.
  • id dan class untuk identifikasi dan styling.

Contoh penggunaan atribut: 

<a href="https://www.google.com" title="Google Search">Google</a>
<img src="https://placehold.co/300x150/png?text=Logo+Perusahaan" alt="Logo perusahaan berwarna biru dengan bentuk lingkaran dan huruf G" />

5. Membuat Halaman Web Sederhana

Mari kita buat halaman web sederhana yang menampilkan judul, paragraf, gambar, dan link. 

<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="UTF-8">
    <title>Halaman Sederhana</title>
  </head>
  <body>
    <h1>Selamat Datang di Website Saya</h1>
    <p>Ini adalah halaman web pertama saya yang dibuat dengan HTML.</p>
    <img src="https://placehold.co/600x300/png?text=Gambar+Website" alt="Gambar ilustrasi halaman website dengan layout sederhana dan warna biru" />
    <p>Kunjungi <a href="https://www.w3schools.com" target="_blank" rel="noopener noreferrer">W3Schools</a> untuk belajar lebih lanjut.</p>
  </body>
</html>

Simpan kode di atas sebagai index.html dan buka di browser untuk melihat hasilnya.

6. Formulir dan Input

Formulir digunakan untuk mengumpulkan data dari pengguna. Berikut contoh form sederhana: 

<form action="/submit" method="post">
  <label for="nama">Nama:</label>
  <input type="text" id="nama" name="nama" required />
  <br /><br />
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required />
  <br /><br />
  <input type="submit" value="Kirim" />
</form>

Penjelasan:

  • <form> : Container form dengan atribut action dan method .
  • <label> : Label untuk input agar lebih mudah diakses.
  • <input> : Elemen input dengan tipe berbeda seperti text dan email.
  • required : Membuat input wajib diisi.

7. Menambahkan Gambar dan Media

Gambar dapat mempercantik halaman web dan memberikan informasi visual. Gunakan elemen <img> dengan atribut src dan alt .

Contoh gambar media website berupa pemandangan alam dengan gunung dan danau di bawah langit cerah

Selain gambar, Anda juga bisa menambahkan video dan audio menggunakan elemen <video> dan <audio> , namun pembahasan ini fokus pada HTML dasar.

9. Tips dan Best Practices

  • Selalu gunakan alt pada gambar untuk aksesibilitas.
  • Gunakan heading secara berurutan ( h1 ke h6 ) untuk struktur yang jelas.
  • Gunakan atribut lang pada elemen html untuk bahasa halaman.
  • Gunakan rel="noopener noreferrer" pada link target="_blank" untuk keamanan.
  • Validasi kode HTML Anda menggunakan W3C Validator .

10. Sumber Belajar dan Source Code

Berikut beberapa sumber belajar HTML yang direkomendasikan untuk memperdalam pengetahuan Anda:

Source Code Lengkap

Berikut contoh source code lengkap halaman web sederhana yang bisa Anda gunakan sebagai template awal: 

<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Halaman Web Sederhana</title>
  </head>
  <body>
    <h1>Selamat Datang di Website Saya</h1>
    <p>Ini adalah halaman web pertama saya yang dibuat dengan HTML.</p>
    <img src="https://placehold.co/600x300/png?text=Gambar+Website" alt="Gambar ilustrasi halaman website dengan layout sederhana dan warna biru" />
    <p>Kunjungi <a href="https://www.w3schools.com" target="_blank" rel="noopener noreferrer">W3Schools</a> untuk belajar lebih lanjut.</p>
    <form action="/submit" method="post">
      <label for="nama">Nama:</label>
      <input type="text" id="nama" name="nama" required />
      <br /><br />
      <label for="email">Email:</label>
      <input type="email" id="email" name="email" required />
      <br /><br />
      <input type="submit" value="Kirim" />
    </form>
  </body>
</html>

Anda dapat menyalin dan memodifikasi kode ini sesuai kebutuhan untuk belajar dan membuat halaman web Anda sendiri.

Edukasi Terkait