Menulis HTML
Diperkenalkan| English | Makna |
|---|---|
| HTML/ˌeɪtʃ tiː em ˈel/ | HTML |
| attribute/ˈætrɪbjuːt/ | atribut |
| element/ˈelɪmənt/ | elemen |
| semantic elements/səˈmæntɪk ˈelɪmənts/ | elemen semantik |
Terlihat seperti tautan, tetapi Tab melewatinya
- Kotak bergaya bertuliskan "Bergabung" tidak otomatis menjadi tautan yang berfungsi. Anchor asli dengan tujuan memiliki perilaku browser yang tidak disediakan oleh styling semata.
- HTML memberikan struktur dan makna konten. CSS mengendalikan presentasi; memilih HTML yang bermakna juga mendukung penggunaan keyboard dan teknologi bantu.
Mengapa menggunakan elemen heading asli untuk judul halaman?
Difficulty 1/5 · 100 coins + a small bonus on first completion today
Heading mendeskripsikan struktur dokumen. Tampilan kemudian dapat dikontrol dengan CSS.
Bacalah tag dan atributnya
- Sebuah elemen sering kali memiliki tag pembuka, konten, dan tag penutup:
<p>Meet on Thursday.</p>. Sebuah atribut menyediakan informasi dalam tag pembuka:<a href="join.html">Join</a>. - Elemen void HTML seperti
imgtidak memiliki tag penutup atau konten anak. Elemen ini tidak "menutup dirinya sendiri"; garis miring di akhir tidak diperlukan dalam HTML. Sisipkan tag berpasangan tanpa menyilangkannya.
Atribut manakah yang menentukan tujuan navigasi dari sebuah tautan?
Difficulty 1/5 · 100 coins + a small bonus on first completion today
Tautan seperti Cara Bergabung menggunakan href.
Tandai wilayah halaman berdasarkan tujuannya
- Elemen semantik mencakup
navuntuk navigasi utama danmainuntuk konten utama halaman. Gunakan heading untuk mendeskripsikan bagian dandivuntuk pengelompokan generik ketika tidak ada elemen yang lebih spesifik cocok. - Native
adenganhrefmelakukan navigasi; nativebuttonmelakukan aksi. Penandaan semantik membantu, tetapi label, perilaku, dan fokus tetap perlu diuji.
Elemen mana yang memiliki makna HTML spesifik ini? Pilih semua yang berlaku.
Difficulty 2/5 · 140 coins + a small bonus on first completion today
div bersifat umum. Gunakan elemen yang lebih spesifik jika tujuan yang didefinisikan sesuai.
Cocokkan tujuan yang dimaksud dengan elemen bawaan yang sesuai.
Difficulty 2/5 · 140 coins + a small bonus on first completion today
Elemen bawaan menyediakan makna dan perilaku default, yang tetap memerlukan label yang dapat digunakan dan pengujian.
Bangun halaman kecil yang lengkap
- Simpan contoh ini sebagai
index.htmlberdampingan dengan filejoin.htmlnyata. Buka di browser dan ikuti tautan menggunakan Tab dan Enter. langmengidentifikasi bahasa halaman;titlemenamai tab browser. Pengaturan viewport memungkinkan gaya responsif menggunakan lebar perangkat.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Robotics club</title>
</head>
<body>
<nav aria-label="Main"><a href="join.html">How to join</a></nav>
<main>
<h1>Robotics club</h1>
<p>Meet Thursday at 4 pm in room 12.</p>
</main>
</body>
</html>
<a href="join.html">How to join</a> menggabungkan tujuan dan label yang berguna. <div class="link">Click here</div> tidak menyediakan navigasi native maupun tujuan.
Pilih alternatif sesuai tujuan gambar
- Gambar informatif memerlukan alternatif yang menyampaikan maknanya yang relevan. Gambar yang bersifat hiasan semata-mata biasanya menggunakan
alt=""supaya teknologi bantu dapat melewatinya. - Untuk gambar yang digunakan sebagai pautan, terangkan fungsi pautan tersebut apabila maklumat itu tidak disediakan dengan cara lain. Carta yang kompleks juga memerlukan data pentingnya dijelaskan dalam teks.
Jangan gunakan tajuk semata-mata untuk membesarkan teks, atau ulangi perkataan "gambar" sebagai setiap alternatif. Sama ada, jangan berikan deskripsi panjang kepada gambar hiasan yang mengganggu halaman.
alt="image" adalah alternatif berguna untuk grafik informatif.
Difficulty 1/5 · 100 coins + a small bonus on first completion today
Alternatif harus menyampaikan informasi yang relevan. Grafik yang kompleks juga memerlukan data pentingnya dalam teks.
Sebuah berita klub menggunakan foto untuk menunjukkan siswa menanam pohon di halaman sekolah. Tulis teks alternatif yang berguna.
Difficulty 3/5 · 200 coins + a small bonus on first completion today
Contoh: "Siswa menanam pohon di halaman sekolah." Jangan membuat jumlah yang tidak disebutkan.
Hiasan kecil di samping judul tidak menambah informasi. Alternatif gambar manakah yang biasanya sesuai?
Difficulty 1/5 · 100 coins + a small bonus on first completion today
Alternatif kosong memungkinkan teknologi bantu melewati gambar yang murni dekoratif.
Sahkan struktur dan tingkah laku
- Periksa urutan tajuk, label pautan yang bermakna, penggunaan papan kekunci, dan alternatif gambar. Pengesah HTML boleh mengesan ralat tandakan, tetapi tidak boleh menilai sama ada penulisan anda berguna.
- Pastikan halaman mesyuarat boleh digunakan walaupun gaya dimatikan. Kemudian gaya kandungan tanpa menukar tajuk menjadi pintasan penampilan semata-mata.
Pilih HTML berdasarkan tujuan. Gunakan pautan asli dan butang, pengkepingan yang sah, dan alternatif gambar yang sepadan dengan peranan gambar.
Sumber: sintaks HTML dan W3C gambar hiasan.
Dalam HTML, img adalah elemen void dan tidak boleh memiliki tag penutup.
Difficulty 1/5 · 100 coins + a small bonus on first completion today
Elemen void tidak memiliki konten anak atau tag penutup. Slash di akhir tidak diperlukan; hal itu tidak memberikan perilaku self-closing pada elemen HTML.