Elemen Esensial HTML

Di pertemuan kita kedua ini kita akan membahas lebih lanjut mengenai tag yang ada di HTML. Semua hal disini lebih lanjut aku jelaskan di video rekaman live class kemarin.

Heading (h1, h2, h3, h4, h5, h6)

Dipakai buat judul dan subjudul. h1 paling gede, h6 paling kecil.

<h1>Judul Utama Halaman</h1>
<h2>Bagian Besar</h2>
<h3>Sub Bagian</h3>
<h4>Detail Kecil</h4>
<h5>Catatan</h5>
<h6>Catatan Super Kecil</h6>

Judul Utama Halaman

Bagian Besar

Sub Bagian

Detail Kecil

Catatan

Catatan Super Kecil

Paragraf (p)

Teks biasa taruhnya di paragraf. Enter berbaris di HTML nggak ngaruh, jadi pakai tag <p> buat bikin paragraf baru.

<p>Ini paragraf pertama. Isinya cerita pembuka.</p>
<p>Ini paragraf kedua. Lanjutan ceritanya di sini.</p>

Ini paragraf pertama. Isinya cerita pembuka.

Ini paragraf kedua. Lanjutan ceritanya di sini.

Link / Anchor (a)

Buat nge-link ke halaman lain, file, atau website lain. Kuncinya ada di atribut href.

<a href="https://frontend.madebydap.my.id">Website Belajar Frontend</a>

Website Belajar Frontend

Kalau kalian mau link-nya dibuka di tab baru. Kalian tambahin atribut target dengan value _blank.

<a href="https://frontend.madebydap.my.id" target="_blank">Buka di tab baru</a>

Buka di tab baru

Kalian bisa naruh a di dalam paragraf p seperti ini.

<p>Follow: <a href="https://instagram.com/daffaramn_">Instagramku</a></p>

Follow: Instagramku

List (ul, ol, li)

Kalian bisa membuat unordered list menggunakan ul

<h3>Belanja (unordererd list)</h3>
<ul>
  <li>Telur</li>
  <li>Susu</li>
  <li>Roti</li>
</ul>

Kalian juga bisa bikin ordered list misal 1, 2, 3 menggunakan ol

<h3>Langkah-langkah (angka)</h3>
<ol>
  <li>Buka editor</li>
  <li>Tulis kode</li>
  <li>Save & jalankan</li>
</ol>

Belanja (unordered list)

Telur
Susu
Roti

Langkah-langkah (ordered list)

Buka editor
Tulis kode
Save & jalankan

Tabel (table, tr, th, td)

Buat data yang kotak-kotak. Sederhananya: table berisi baris (tr). Di baris ada column judul (th) atau column data (td).

<table>
  <tr>
    <th>Nama</th>
    <th>Umur</th>
  </tr>
  <tr>
    <td>Ani</td>
    <td>20</td>
  </tr>
  <tr>
    <td>Budi</td>
    <td>22</td>
  </tr>
</table>

Nama	Umur
Ani	20
Budi	22

Gambar (img)

Tag yang “sendirian” (nggak punya penutup). Minimal butuh src (alamat gambar) dan alt (teks alternatif kalau gambarnya gagal tampil).

<img src="images/kucing.jpg" alt="Kucing oren lagi tidur" />

Opsional:

<img src="images/logo.png" alt="Logo Situs" width="120" />

Garis pemisah (hr)

Buat ngasih pemisah antar bagian. Simpel banget.

<p>Bagian atas konten.</p>
<hr />
<p>Bagian bawah konten.</p>

Bagian atas konten.

Bagian bawah konten.

Penugasan

Penugasan untuk week 2 sudah ada di classroom. Kalian bisa coba membuat website sederhana sekali dengan isi bebas mau ngenalin diri kalian atau apa bebas. Dengan memanfaatkan tag yang sudah kalian pelajari di sini. Aku ingin kalian explore dan sekreatif kalian. Kalau kalian mau nambahin tag lain yang belum kuajarin di sini, bagus banget malah.

Selamat mengerjakan dan see you guys next week.

Heading (h1, h2, h3, h4, h5, h6)​