Created by potrace 1.14, written by Peter Selinger 2001-2017 YAN's Site

Belajar HTML Dari Pemula Hingga Ahli

 
  • 13 Feb, 2024

g

Diagram Alur Belajar HTML

  1. Pemula: Dasar-dasar HTML
  2. Menengah: Form, Table, Video, Audio
  3. Ahli: Responsive Design, Progressive Enhancement, Accessibility

1. Dasar-dasar HTML

Langkah 1: Installasi Editor HTML

Pertama, Anda perlu memiliki editor HTML yang baik. Rekomendasi editor HTML yang umum digunakan adalah:

  • Visual Studio Code: Gratis, open source, dan multiplatform. Didukung oleh ekosistem plugin yang luas dan aktif.
  • Sublime Text: Pay what you want, cross-platform, dan minimalis. Cepat dan ringan.
  • Atom: Gratis, open source, dan multiplatform. Designed and developed by GitHub.

Langkah 2: Membuat File HTML Baru

Buat file HTML baru dengan ekstensi .html. Misalnya: index.html.

Langkah 3: Struktur Basis HTML

File HTML terdiri dari empat bagian: doctype declaration, element HTML, element head, dan element body.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document Title</title>
  </head>
  <body>
    <!-- Content goes here -->
  </body>
</html>

Langkah 4: Judul Document

Judul dokumen dituliskan didalam elemen <title>.

<title>Document Title</title>

Langkah 5: Paragraf

Paragraf dituliskan didalam elemen <p>.

<p>Lorem ipsum dolor sit amet...</p>

Langkah 6: Header dan Subheading

Header dan subheading dituliskan didalam elemen <h1> hingga <h6>.

<h1>Header level one</h1>
<h2>Header level two</h2>
...
<h6>Header level six</h6>

Link internal dan eksternal dituliskan didalam elemen <a>. Atribut href digunakan untuk menentukan target URL.

<!-- Link internal -->
<a href="#internal-target">Internal Target</a>

<!-- Link eksternal -->
<a href="http://external-site.com">External Site</a>

Langkah 8: Gambar

Gambar dituliskan didalam elemen <img>. Atribut src digunakan untuk menentukan path image file. Atribut alt digunakan untuk menjelaskan konten image.

<img src="/path/to/image.jpg" alt="Image description" />

Langkah 9: List

List unorden dan ordered dituliskan didalam elemen <ul> dan <ol>. List item dituliskan didalam elemen <li>.

<!-- List unordered -->
<ul>
  <li>Item One</li>
  ...
</ul>

<!-- List ordered -->
<ol>
  <li>First Item</li>
  ...
</ol>

2. Form, Table, Video, Audio

Langkah 1: Form

Form digunakan untuk input data dari pengguna. Form terdiri dari beberapa komponen: label, input field, button, dan validation.

<form action="/submit" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required />
  
  <button type="submit">Submit</button>
</form>

Langkah 2: Table

Table digunakan untuk presentasi data tabular. Table terdiri dari beberapa komponen: heading, row, cell, dan colspan.

<table>
  <thead>
    <tr>
      <th>Column One</th>
      <th>Column Two</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row One, Cell One</td>
      <td>Row One, Cell Two</td>
    </tr>
    <tr>
      <td colspan="2">Row Two, Spanning Columns</td>
    </tr>
  </tbody>
</table>

Langkah 3: Video

Video dituliskan didalam elemen <video>. Atribut src digunakan untuk menentukan path video file. Atribut controls digunakan untuk menampilkan tombol play/pause dan seekbar.

<video controls src="/path/to/video.mp4"></video>

Langkah 4: Audio

Audio dituliskan didalam elemen <audio>. Atribut src digunakan untuk menentukan path audio file. Atribut controls digunakan untuk menampilkan tombol play/pause dan seekbar.

<audio controls src="/path/to/audio.mp3"></audio>

3. Responsive Design, Progressive Enhancement, Accessibility

Langkah 1: Responsive Design

Responsive design digunakan untuk memastikan website dapat diakses dengan baik pada berbagai ukuran layar. Metode yang biasa digunakan adalah mobile-first approach dan flexible grid layout.

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-4">Content One</div>
    <div class="col-xs-12 col-sm-6 col-md-4">Content Two</div>
    <div class="col-xs-12 col-sm-6 col-md-4">Content Three</div>
  </div>
</div>

Langkah 2: Progressive Enhancement

Progressive enhancement digunakan untuk memastikan website dapat diakses dengan baik pada berbagai browsers dan device. Cara yang biasa digunakan adalah feature detection dan polyfill.

if ('querySelector' in document && 'addEventListener' in window) {
  // Modern code here
} else {
  // Fallback code here
}

Langkah 3: Accessibility

Accessibility digunakan untuk memastikan website dapat diakses oleh semua orang, termasuk orang dengan disabilitas. Cara yang biasa digunakan adalah ARIA attributes dan keyboard navigation.

<button aria-haspopup="true" aria-expanded="false">Menu</button>
<nav role="menu" aria-label="Main Menu">
  <ul>
    <li><a href="#home">Home</a></li>
    ...
  </ul>
</nav>

Referensi

Semoga bermanfaat :)

Mencari