Pautan, Gambar & Senarai

14 minitPemulaHTML · CSS · JS

Dalam pelajaran ini

Cipta pautan dengan <a href> dan bezakan URL mutlak (absolute) dengan laluan relatif (relative)
Tambah gambar dengan src dan tulis teks alt yang betul-betul membantu
Pilih antara <ul> dan <ol> dan isikan dengan item <li>

Idea utama

Pautan dan gambar menuding kepada fail lain menggunakan alamat. Senarai mengumpulkan item yang berkaitan. Ketiga-tiganya bergantung pada attribute atau element anak untuk berfungsi.

Pautan: "hiper" dalam hiperteks

Pautan ialah element <a> (anchor). Attribute href menyatakan destinasinya, dan teks di antara tag ialah apa yang orang klik.

HTML

<!-- Absolute URL: a full address, including https:// -->
<a href="https://developer.mozilla.org">MDN Web Docs</a>

<!-- Relative path: a file next to this one in your project -->
<a href="about.html">About me</a>

<!-- Relative path into a folder -->
<a href="recipes/teh-tarik.html">Teh tarik recipe</a>

URL mutlak (absolute) bermula dengan https:// dan berfungsi dari mana-mana. Guna untuk laman web lain.
Laluan relatif (relative) dikira dari lokasi fail semasa. Guna untuk halaman dalam laman anda sendiri, supaya pautan terus berfungsi walaupun domain bertukar.
Tulis teks pautan yang bermakna dengan sendirinya: "laman web rasmi pelancongan Malaysia", bukan "klik sini". Pengguna pembaca skrin selalu melayari senarai pautan sahaja.

Anda mungkin nampak target="_blank" pada pautan. Ia membuka tab baharu, tetapi anda tidak memerlukannya, dan selalunya lebih baik biarkan pengguna memilih sendiri. Dalam pratonton WANCode, pautan dipaparkan tetapi tidak membawa anda keluar.

Gambar dan kenapa alt penting

HTML

<img src="images/nasi-lemak.jpg" alt="A plate of nasi lemak with sambal and a fried egg">

<img> ialah void element: tiada tag penutup. src ialah alamat gambar (mutlak atau relatif, sama seperti href). alt ialah penerangan teks yang digunakan apabila gambar tidak dapat dilihat:

Pembaca skrin membacakan teks alt kepada pengguna buta dan rabun.
Jika gambar gagal dimuatkan (data perlahan, laluan salah), teks alt dipaparkan sebagai ganti.
Enjin carian menggunakannya untuk memahami gambar itu.

Menulis teks alt yang baik

Terangkan apa yang ditunjukkan gambar dalam konteks ini, seolah-olah memberitahu kawan melalui telefon. Tak perlu tulis "gambar" (pembaca skrin sudah sebut ia gambar). Jika gambar itu hanya hiasan, guna alt="" yang kosong supaya ia dilangkau. Jangan tinggalkan alt langsung.

src gambar dalam kod permulaan ialah alamat data: yang panjang: lukisan kecil yang ditulis sebagai teks supaya ia berfungsi tanpa internet. Dalam laman sebenar, biasanya anda tulis sesuatu yang ringkas seperti src="images/nasi-lemak.jpg".

Senarai

Tidak tersusun: susunan tidak penting

HTML

<ul>
  <li>Roti canai</li>
  <li>Cendol</li>
</ul>

Tersusun: susunan penting

HTML

<ol>
  <li>Boil water</li>
  <li>Brew tea</li>
</ol>

<ul> memaparkan butir, <ol> memaparkan nombor. Walau apa pun, hanya element <li> yang boleh terus berada di dalamnya.

Tanya diri: kalau saya kocok susunan item, adakah ia masih masuk akal? Senarai belanja, ya, jadi <ul>. Langkah resipi atau ranking 10 teratas, tidak, jadi <ol>. Menu navigasi juga biasanya <ul> yang penuh dengan pautan.

<img> itu tiada teks alt, jadi pengguna pembaca skrin tidak mendapat apa-apa. Tambah attribute alt yang menerangkan isi gambar (lihat pratonton: nasi, sambal, telur, timun…). Biarkan src yang panjang itu seperti asal.

Semakan

Gambar masih ada src
Gambar ada penerangan alt yang berguna

Uji kefahaman

Siapa yang paling mendapat manfaat daripada attribute alt yang baik?

Tiada sesiapa, ia hanya untuk developerPengguna pembaca skrin, dan sesiapa yang gambarnya gagal dimuatkanHanya orang yang ada internet sangat laju

href yang mana satu laluan relatif?

https://wancode.my/learncontact.htmlhttps://www.google.com

Senarai mana yang patut guna <ol>?

Buah-buahan kegemaran andaLangkah-langkah memasang aplikasiKawan-kawan yang dijemput ke majlis

Apa yang anda pelajari

<a href="…"> membina pautan; URL mutlak ada https://, laluan relatif menuding kepada fail dalam projek anda sendiri.
<img> perlukan src (di mana gambar itu) dan alt (apa yang ditunjukkannya, untuk orang yang tidak dapat melihatnya).
<ul> untuk item dalam apa-apa susunan, <ol> bila susunan penting; hanya <li> boleh terus berada di dalamnya.

Pratonton

Output konsol daripada kod anda akan dipaparkan di sini.