Lab Blog HTML
Loading...
</> HTML Blog Lab
Studio desain web 01 dari 04
Presenter mode

LAB BLOG HTML · 01

Bangun halaman blog dengan HTML.

HTML memberikan rumah bagi setiap ide. Hari ini kita akan mengubah ide blog menjadi halaman yang jelas dan ramah — satu elemen bermakna dalam satu waktu.

✦

Semua orang bisa berkontribusi: membuat sketsa, berbicara, mengetik, menunjuk, mengajukan pertanyaan, atau berpasangan.

01RencanakanPilih apa yang paling dibutuhkan pembaca.
02BangunGunakan tag untuk membentuk halaman.
03PeduliBuat agar dapat digunakan oleh lebih banyak orang.
HTML
+
IDEAS

Halaman adalah sebuah percakapan dengan pembaca.

LANGKAH 1 · STRUKTUR

Mulai dengan { kerangka.

Tag HTML mendeskripsikan fungsi dari setiap bagian. Kerangka semantik membantu browser, pembaca layar, dan teman sekelas memahami halaman Anda.

Coba iniTunjuk setiap tag dan sebutkan apa tanggung jawabnya.
<header><nav><main><article><footer>
blog.htmlHTML
<!DOCTYPE html>
<html>
  <body>
    <header>
      <h1>Catatan Lapangan</h1>
      <nav>Tentang · Arsip</nav>
    </header>
    <main>
      <article>
        <h2>Apa yang membuat halaman menjadi baik?</h2>
      </article>
    </main>
  </body>
</html>
Tag yang bermakna membuat halaman lebih mudah dinavigasi.

LANGKAH 2 · KONTEN

Beri halaman tersebut { suara.

Tag menampung konten, tetapi oranglah yang membawa sudut pandang. Tambahkan judul, tautan yang berguna, dan gambar dengan kata-kata yang menceritakan kisahnya.

✓Judul yang menetapkan ekspektasi
✓Paragraf dengan satu ide yang jelas
✓Tautan yang menjelaskan tujuannya
Saran pasanganBaca judul Anda dengan lantang. Apakah itu menarik minat seseorang?
our-blog.local / journal•••

JURNAL BERSAMA

Seperti apa rasanya
halaman web yang baik?

Kumpulan observasi kecil, dari studio kami untuk Anda.

Baca entri↗

LANGKAH 3 · KEPEDULIAN & AKSES

Beri ruang untuk semua orang.

HTML yang baik bukan hanya tentang tampilan yang benar. Ini memberikan kesempatan yang adil bagi lebih banyak orang untuk membaca, memahami, dan bergabung dalam percakapan.

AaTajukBuat jalur yang jelas.
↗TautanJelaskan tujuannya.
▧GambarTambahkan teks alt yang bermanfaat.
Giliran AndaSketsa satu bagian blog, lalu pilih tag HTML yang memberinya tempat.
Saya perhatikan…
Saya bertanya-tanya…
Saya bisa mencoba…
←Kembali
Berikutnya→