Articles
Pengenalan kepada HTML
Tag Berkaitan dengan Paparan Kod, Petikan, dan Senarai

Tag Berkaitan dengan Paparan Kod, Petikan, dan Senarai

Artikel ini menerangkan tag berkaitan dengan paparan kod, petikan, dan senarai.

Ini menerangkan cara menulis kod sumber, petikan, anotasi, dan senarai dalam HTML.

YouTube Video

Tag Berkaitan Paparan Kod

Tag <code>

Inline code example: let x = 10; 
1Inline code example: <code>let x = 10;</code>
  • Tag <code> adalah elemen sebaris yang digunakan untuk menunjukkan kod atau petikan program dalam dokumen HTML.
  • Secara lalai, ia dipaparkan dalam huruf monospace, meningkatkan kebolehbacaan kod.

Tag <pre> 

function hello() {
    console.log("Hello, world!");
}

1<pre>
2function hello() {
3    console.log("Hello, world!");
4}
5</pre>
  • Tag <pre> digunakan untuk memaparkan teks dalam format asalnya dalam dokumen HTML. Penggunaan tag ini mengekalkan ruang kosong dan baris dalam teks, mengekalkan format asalnya. Ia terutamanya digunakan untuk memaparkan kandungan yang perlu mengekalkan format, seperti kod program, puisi, atau seni teks.
    function hello() {
        console.log("Hello, world!");
    }
    
1    <pre>
2    function hello() {
3        console.log("Hello, world!");
4    }
5    </pre>
  • Dalam tag <pre>, ruang dikekalkan, jadi jika terdapat ruang sebelum tag penutupan, satu baris kosong akan muncul pada akhir seperti dalam contoh ini.

Tag <samp>

Sample system output: Error: Invalid input. 
1Sample system output: <samp>Error: Invalid input.</samp>
  • Tag <samp> adalah tag HTML yang digunakan untuk mewakili output program komputer. Ia digunakan untuk menunjukkan keluaran atau mesej dari program atau sistem.

Tag <kbd>

Keyboard input example: Ctrl + C 
1Keyboard input example: <kbd>Ctrl</kbd> + <kbd>C</kbd>
  • Tag <kbd> adalah tag HTML yang digunakan untuk mewakili input pengguna. Ia digunakan untuk menunjukkan input papan kekunci atau input arahan, seperti pintasan.

Tag <var>

Variable example: x = 5; 
1Variable example: <var>x</var> = 5;
  • Tag <var> digunakan untuk mewakili pembolehubah dalam program atau persamaan. Ia digunakan untuk menekankan nama pembolehubah atau pembolehubah dalam formula matematik.

Tag yang digunakan untuk petikan, dll.

Tag <blockquote>

This is a blockquote for longer quotations. 
1<blockquote>
2    This is a blockquote for longer quotations.
3</blockquote>
  • Tag <blockquote> digunakan untuk mewakili petikan panjang atau teks dari sumber lain, dan biasanya dipaparkan di peringkat blok.

Tag <q>

This is a short quote: Short quote example. 
1This is a short quote: <q>Short quote example.</q>
  • Tag <q> adalah elemen sebaris yang digunakan untuk mewakili petikan pendek. Tag ini boleh digunakan untuk menandakan sebahagian teks atau ayat sebagai petikan. Teks yang dilampirkan dalam tag <q> biasanya dipaparkan dengan tanda petikan. Tag <q> juga boleh bersarang. Dalam kes ini, jenis tanda petikan yang berbeza biasanya digunakan untuk petikan dalaman.

Tag <cite>

Reference to a book: The Great Gatsby 
1Reference to a book: <cite>The Great Gatsby</cite>
  • Tag <cite> adalah elemen sebaris yang digunakan untuk menunjukkan sumber rujukan atau petikan. Ia digunakan terutamanya untuk menunjukkan sumber sesuatu karya, seperti tajuk karya, artikel, kertas kerja, halaman web, atau buku.

Tag <address>

123 Main Street, Springfield, USA
1<address>123 Main Street, Springfield, USA</address>
  • Tag <address> digunakan untuk mewakili maklumat hubungan yang berkaitan dengan pengarang atau pemilik dokumen atau bahagian. Tag ini biasanya mengandungi alamat emel, nombor telefon, alamat fizikal, dan maklumat serupa.

Tag <time> 

1<time datetime="2024-12-04">December 4, 2024</time>
  • Tag <time> digunakan untuk mewakili titik masa tertentu, tempoh masa, atau masa berulang. Tag ini boleh merangkumi tarikh dan masa untuk memberikan makna semantik kepada dokumen.

Tag <data>

Current Year 
1<data value="2024">Current Year</data>
  • Tag <data> digunakan untuk mengaitkan kandungan yang boleh dibaca manusia dengan nilai yang boleh ditafsirkan oleh mesin. Tag ini berguna untuk menandakan data dengan cara yang dapat diproses dengan mudah oleh program.

Tag <details> dan <summary>

More information

Here is some additional content.

1<details>
2    <summary>More information</summary>
3    <p>Here is some additional content.</p>
4</details>
  • Tag <details> menghasilkan widget yang boleh dilipat dan diperluaskan. Dengan menggunakannya bersama tag <summary>, anda boleh menyediakan bahagian yang boleh diklik untuk mendedahkan lebih banyak butiran, sering digunakan untuk paparan interaktif seperti 'Baca lebih lanjut'.

Tag yang digunakan untuk paparan senarai

Tag <ul>

  • Item 1
  • Item 2
  • Item 3
1<ul>
2    <li>Item 1</li>
3    <li>Item 2</li>
4    <li>Item 3</li>
5</ul>
  • Ini adalah tag yang digunakan untuk membuat senarai tidak berurutan. Setiap item dalam senarai ditentukan dengan tag <li>. Secara lalai, satu titik hitam dipaparkan di hadapan setiap item senarai.

Tag <ol>

  1. Step 1
  2. Step 2
  3. Step 3
1<ol>
2    <li>Step 1</li>
3    <li>Step 2</li>
4    <li>Step 3</li>
5</ol>
  • Tag ini digunakan untuk membuat senarai berurutan. Setiap item dalam senarai ditentukan dengan tag <li>. Secara lalai, nombor dipaparkan untuk menunjukkan urutan item.

Tag <dl>

Term 1
Definition of Term 1
Term 2
Definition of Term 2
1<dl>
2    <dt>Term 1</dt>
3    <dd>Definition of Term 1</dd>
4    <dt>Term 2</dt>
5    <dd>Definition of Term 2</dd>
6</dl>
  • Tag ini digunakan untuk membuat senarai pasangan yang terdiri daripada istilah dan definisi, atau nama dan perincian. Item dalam senarai ditentukan dengan tag <dt> dan <dd>. Istilah atau nama ditulis dalam tag <dt>, dan definisi atau penjelasan ditulis dalam tag <dd>.

Anda boleh mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Sila lihat juga saluran YouTube kami.

YouTube Video

Tag berkaitan teksTag Berkaitan Jadual