Menstruktur laman kecil asal dengan HTML semantik

Laman semantik menggunakan setiap teg mengikut apa kandungan itu sebenarnya: tajuk untuk tajuk, perenggan untuk perenggan, senarai untuk senarai. Kemahiran ini muncul apabila tugasan meminta anda membina atau menyunting laman web daripada teks yang dibekalkan, dan ia menjadi asas kepada setiap kemahiran lain dalam pembinaan laman web.

Bagaimanakah rupa kerangka laman yang betul?

Setiap laman mempunyai bentuk luar yang sama. head menyimpan maklumat tentang laman, dan body menyimpan apa yang dilihat pembaca.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Demo Photo Club</title>
</head>
<body>
  <h1>Demo Photo Club</h1>
  <p>We meet every Thursday after school.</p>
</body>
</html>

Kebanyakan teg berpasangan: teg pembuka seperti <p> dan teg penutup seperti </p>. Beberapa teg, seperti <meta>, berdiri sendiri.

Bagaimanakah anda membina laman langkah demi langkah?

1. Tulis kerangka dengan doctype, html, head dan body.
2. Tambah title dalam head, bersama baris set aksara.
3. Tambah satu h1 dalam body untuk tajuk utama.
4. Pecahkan teks kepada bahagian, setiap satu dengan h2 dan perenggannya.
5. Jadikan sebarang senarai item sebagai ul (bulet) atau ol (langkah bernombor).
6. Tutup setiap teg dan inden elemen anak, supaya teg penutup yang tertinggal mudah dikesan.

Contoh berlangkah

Tugasan rekaan membekalkan teks ini untuk Demo Photo Club: nama kelab, satu ayat tentang waktu perjumpaan, dan tiga aktiviti: potret, landskap dan penyuntingan.

Langkah 1, kerangka dan title: seperti dalam blok di atas.

Langkah 2, tajuk utama: <h1>Demo Photo Club</h1>.

Langkah 3, bahagian pertama: <h2>When we meet</h2> diikuti <p>Thursday, 3:30 pm in Room 4.</p>.

Langkah 4, bahagian kedua: <h2>What we do</h2>, kemudian tiga aktiviti sebagai senarai:

<ul>
  <li>Portraits</li>
  <li>Landscapes</li>
  <li>Editing</li>
</ul>

Aktiviti ialah sekumpulan item tanpa urutan, maka ul sesuai. Jika ia langkah bernombor, ol pilihan yang lebih baik.

Kesilapan yang perlu diawasi

Kesilapan lazim ialah memilih aras tajuk kerana saiznya.

<h1>Demo Photo Club</h1>
<h4>When we meet</h4>
<p>Thursday, 3:30 pm in Room 4.</p>

Pelajar itu mahukan tajuk yang lebih kecil, lalu menggunakan h4. Namun bahagian itu terletak terus di bawah tajuk utama, jadi ia ialah h2, dan struktur kini melangkau aras.

Pembetulannya <h2>When we meet</h2>. Jika saiz tidak sesuai, ubah kemudian dengan peraturan helaian gaya, bukan dengan menukar teg.

Semak sendiri

1. Elemen manakah menyimpan teks pada tab pelayar, dan di manakah letaknya?

2. Sebuah laman mempunyai langkah “Open the file, edit the text, save it” yang mesti dibaca mengikut urutan. Teg senarai manakah yang sesuai?

3. Cari kesalahan: <p>Meet at the hall. diikuti terus <p>Bring a camera.</p>

Ke mana selepas ini

Apabila struktur sudah kukuh, pelajari cara menyampaikannya secara konsisten dalam Menggunakan helaian gaya untuk persembahan konsisten. Kembali ke panduan modul untuk laluan penuh, dan gunakan penyemak tugasan praktikal dan bukti untuk mengesahkan setiap keperluan dipenuhi.

Pelajar sering mengikuti setiap langkah di sini tetapi kehilangan markah apabila tugasan yang lebih panjang menyembunyikan kesilapan sama dalam beberapa laman. Guru kami mencari corak itu dalam tuisyen ICT dalam talian satu dengan satu.