Halaman HTML Pertama Anda

12 minitPemulaHTML · CSS · JS

Dalam pelajaran ini

Tulis rangka standard halaman HTML tanpa melihat contoh
Terangkan beza antara tag, element dan attribute
Susun element bersarang (nesting) dengan betul dan tinggalkan nota menggunakan komen

Idea utama

Setiap halaman HTML ada rangka yang sama: doctype, kemudian <html> yang memegang <head> (maklumat tentang halaman) dan <body> (apa yang orang lihat). Semua benda lain duduk di dalamnya.

Dalam pelajaran lepas, anda menyunting halaman yang ditulis orang lain. Sekarang anda akan tulis sendiri. Berita baiknya: hampir setiap halaman HTML di internet bermula dengan sepuluh baris yang sama.

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My Page</title>
  </head>
  <body>
    <h1>Hello!</h1>
    <p>This is my first page.</p>
  </body>
</html>

Rangka standard HTML. Belajar sekali, guna selama-lamanya.

<!DOCTYPE html> memberitahu pelayar "ini halaman HTML moden". Ia bukan tag, cuma pengisytiharan, dan sentiasa diletakkan pada baris paling atas.
<html lang="en"> membalut keseluruhan halaman. lang memberitahu pembaca skrin dan alat terjemahan bahasa halaman itu (guna ms untuk Bahasa Melayu).
<head> menyimpan maklumat tentang halaman: set aksara (utf-8 membolehkan anda taip apa-apa bahasa dan emoji) dan <title> yang dipaparkan pada tab pelayar.
<body> menyimpan semua yang kelihatan: tajuk, teks, gambar, pautan.

Tag, element dan attribute

Tiga perkataan ini selalu tertukar, jadi ini bezanya dalam satu baris: Hi ialah satu element, terdiri daripada tag pembuka, kandungan dan tag penutup. Bahagian class="intro" ialah attribute: maklumat tambahan yang duduk di dalam tag pembuka.

Tag: Label dalam kurungan sudut. Pembuka: . Penutup:  (perhatikan garis miring).
Element: Keseluruhannya: tag pembuka + kandungan + tag penutup. Inilah yang sebenarnya dibina oleh pelayar.
Attribute: Pasangan nama="nilai" di dalam tag pembuka yang menambah butiran, seperti lang="en".
Void element: Element tanpa kandungan dan tanpa tag penutup, seperti <meta> atau  .

Nesting: kotak di dalam kotak

Element boleh duduk di dalam element lain. Bayangkan mangkuk tingkat: yang dibuka terakhir, ditutup dahulu. Kalau  bermula di dalam , ia mesti tamat di dalam  itu juga.

Berselirat (salah)

HTML

<p>Open <strong>every day</p></strong>

Nesting yang betul

HTML

<p>Open <strong>every day</strong></p>

Tutup tag mengikut susunan terbalik daripada cara anda membukanya. Inden baris yang bersarang supaya mudah dilihat.

Pelayar sangat pemaaf (terlalu pemaaf)

Kalau anda terlupa <head> atau <body>, pelayar akan meneka dan membetulkannya secara senyap. Sebab itu halaman permulaan masih dipaparkan. Tetapi tekaan boleh silap, dan alat lain (enjin carian, pembaca skrin, diri anda pada masa depan) bergantung pada struktur yang kemas. Sentiasa tulis rangka penuh.

Komen: nota untuk manusia

Apa-apa di antara  ialah komen. Pelayar melangkaunya, jadi ia tidak akan muncul pada halaman. Guna komen untuk melabel bahagian atau meninggalkan peringatan. Cuma ingat, sesiapa pun masih boleh membacanya melalui View Source, jadi jangan sekali-kali letak kata laluan atau rahsia di situ.

HTML

<!-- Opening hours -->
<p>Open <strong>every day, 7am to 6pm</strong>.</p>

Kod permulaan ada kandungan tetapi tiada rangka. Balut dengan betul:

1. Letak <!DOCTYPE html> pada baris pertama.

2. Tambah <html lang="en"> … </html> di sekeliling semuanya.

3. Di dalamnya, tambah <head> dengan <meta charset="utf-8"> dan <title>.

4. Pindahkan <h1> dan  ke dalam <body>.

Semakan

Halaman bermula dengan doctype
Halaman ada tag <html>, <head> dan <body>
<html> ada attribute lang
Halaman ada <title>

Uji kefahaman

Bahagian mana dalam halaman yang menyimpan kandungan yang betul-betul dilihat orang?

<head><body><!DOCTYPE html>

Baris mana yang bersarang dengan betul?

HiHiHi

Apa yang berlaku kepada  dalam HTML anda?

Ia dipaparkan sebagai teks kelabu kecilIa tersembunyi daripada halaman, tetapi sesiapa pun boleh membacanya dalam kod sumberIa dipadam apabila halaman dimuatkan

Apa yang anda pelajari

Setiap halaman bermula dengan <!DOCTYPE html>, kemudian <html> yang mengandungi <head> dan <body>.
Element ialah tag pembuka, kandungan dan tag penutup; attribute menambah butiran pada tag pembuka.
Element bersarang ditutup mengikut susunan terbalik: yang dalam dahulu, kemudian yang luar.
 ialah nota untuk manusia, tersembunyi pada halaman tetapi kelihatan dalam kod sumber.

Pratonton

Output konsol daripada kod anda akan dipaparkan di sini.