Frontend Academy · Pelajaran

Teks, Imej, Pautan dan Senarai

Formatkan teks dengan tajuk dan perenggan, benamkan imej dengan teks alt, cipta pautan hiper serta bina senarai bernombor dan tidak bernombor.

Pelajaran 3 daripada 413 langkah

Teks, Imej, Pautan dan Senarai ialah pelajaran Frontend Academy percuma di CoddyKit. Ini ialah pelajaran 3 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Frontend Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Frontend Academy merangkumi sejumlah 4 pelajaran.

Pengepala: h1 hingga h6

HTML menyediakan enam aras pengepala. Gunakannya untuk membentuk rangka dokumen, bukan untuk mengubah saiz teks. <h1> ialah tajuk halaman (sekali bagi setiap halaman), <h2> untuk bahagian utama, <h3> untuk subseksyen dan seterusnya.

<h1>Frontend Development Guide</h1>
<h2>HTML Basics</h2>
<h3>Headings</h3>

Perenggan dan <br>

Elemen <p> membungkus perenggan teks. Pelayar menambah jarak di atas dan di bawah secara automatik. Gunakan <br> secara berhemat — hanya untuk pemisah baris yang bermakna, seperti dalam alamat atau puisi, bukan untuk jarak antara perenggan.

Elemen Teks Sebaris

Gunakan elemen sebaris untuk memberikan makna kepada teks: <strong> untuk teks penting (tebal), <em> untuk penegasan (italik), <code> untuk coretan kod, <mark> untuk teks yang diserlahkan dan <small> untuk tulisan kecil.

<p>Press <kbd>Ctrl+S</kbd> to save. The <code>console.log()</code> function outputs to the <strong>Console</strong> panel.</p>

Imej: Elemen <img>

Elemen <img> membenamkan imej. Atribut src memberikan URL, manakala alt menyediakan teks alternatif untuk pembaca skrin dan keadaan apabila imej gagal dimuatkan. Sentiasa sertakan nilai alt yang bermakna.

<img src="/images/hero.webp"
     alt="A developer typing code on a laptop"
     width="800"
     height="450">

Menulis Teks Alt yang Baik

Teks alt hendaklah menyampaikan kandungan dan tujuan imej. Imej hiasan (pemisah, ikon yang semata-mata untuk hiasan) menggunakan alt="" (rentetan kosong) supaya pembaca skrin melangkaunya. Jangan sekali-kali menulis alt="imej bagi" — huraikan sahaja perkara yang ditunjukkannya.

Hiperpautan: Elemen <a>

Elemen <a> (sauh) mencipta hiperpautan. Atribut href menetapkan URL destinasi. Teks pautan hendaklah menerangkan destinasi — jangan sekali-kali menulis "klik di sini".

<!-- External link -->
<a href="https://mdn.mozilla.org" target="_blank" rel="noopener noreferrer">
  MDN Web Docs
</a>

<!-- Internal link -->
<a href="/courses">Browse Courses</a>

<!-- Email link -->
<a href="mailto:hello@example.com">Email Us</a>

Nota Keselamatan target=_blank

Apabila membuka pautan dalam tab baharu menggunakan target="_blank", sentiasa tambahkan rel="noopener noreferrer". Tanpanya, halaman yang dibuka boleh mengakses objek tetingkap halaman pembuka — kelemahan keselamatan yang dipanggil tabnapping songsang.

Senarai Tidak Tersusun: <ul>

Gunakan <ul> (senarai tidak tersusun) apabila susunan item tidak penting — ciri, ramuan atau pautan navigasi. Setiap item ialah <li>. Pelayar memaparkan bulet secara lalai, tetapi anda hampir selalu akan menggayakannya dengan CSS.

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Senarai Tersusun: <ol>

Gunakan <ol> (senarai tersusun) apabila susunan penting — langkah dalam tutorial, kedudukan atau arahan. Item dinomborkan secara automatik. Gunakan atribut start dan reversed untuk mengawal penomboran.

<ol>
  <li>Install Node.js</li>
  <li>Create a new project</li>
  <li>Run npm install</li>
</ol>

Senarai Huraian: <dl>

<dl> (senarai huraian) mengumpulkan istilah bersama takrif atau huraiannya. Gunakannya untuk glosari, data meta (pengarang/tarikh) dan pasangan kunci-nilai. <dt> ialah istilah, manakala <dd> ialah huraian.

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language — the structure layer.</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets — the presentation layer.</dd>
</dl>

Senarai Bersarang

Senarai boleh disarang untuk mewakili hierarki. Letakkan <ul> atau <ol> anak di dalam elemen <li> induk. Jangan bersarang semata-mata untuk menghasilkan inden — gunakan CSS sebagai ganti.

Semakan Pantas

Atribut manakah yang menyediakan huraian teks bagi imej untuk pembaca skrin?

Jawab dalam pelajaran interaktif

Imbas Kembali: Teks Imej Pautan dan Senarai

Gunakan elemen pengepala untuk struktur dokumen, p untuk perenggan, img dengan teks alt yang bermakna untuk imej, a dengan teks pautan deskriptif untuk navigasi dan ul/ol/dl untuk kandungan senarai. Semantik menjadikan HTML boleh diakses dan dibaca oleh mesin.

Percuma untuk bermula

Pelajari HTML dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 41
Pelajaran: 163

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Teks, Imej, Pautan dan Senarai” percuma?

Ya — teks penuh “Teks, Imej, Pautan dan Senarai” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus Frontend Academy, tingkat taraf kepada CoddyKit PRO. Kursus Frontend Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Teks, Imej, Pautan dan Senarai”?

Formatkan teks dengan tajuk dan perenggan, benamkan imej dengan teks alt, cipta pautan hiper serta bina senarai bernombor dan tidak bernombor. Anda berlatih Frontend Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Frontend Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Frontend Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 3 daripada 4.

Berapa lamakah pelajaran “Teks, Imej, Pautan dan Senarai” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Frontend Academy ini?

Ya. Setiap pelajaran Frontend Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

Struktur Dokumen: DOCTYPE html head body
Tag Semantik: header nav main article footer
Teks, Imej, Pautan dan Senarai
Borang: input label button

← Kembali ke Frontend Academy