Mga Tag na Nauugnay sa Pag-display ng Code, Mga Sipi, at Mga Listahan

Ipinaliliwanag ng artikulong ito ang mga tag na nauugnay sa pag-display ng code, mga sipi, at mga listahan.

Ipinaliwanag nito kung paano magsulat ng source code, mga sipi, anotasyon, at mga listahan sa HTML.

YouTube Video

Mga tag na may kaugnayan sa pagpapakita ng code

Tag na <code>

1Inline code example: <code>let x = 10;</code>

• Ang tag na <code> ay isang inline na elemento na ginagamit upang tukuyin ang code o mga bahagi ng programa sa loob ng isang dokumento ng HTML.
• Sa default, ito ay ipinapakita sa isang monospace na font, na nagpapahusay ng pagka-unawa sa code.

Tag na <pre>

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

1<pre>
2function hello() {
3    console.log("Hello, world!");
4}
5</pre>

• Ang <pre> na tag ay ginagamit upang ipakita ang teksto sa orihinal nitong format sa loob ng isang HTML na dokumento. Ang paggamit sa tag na ito ay nagpapanatili ng whitespace at mga line break sa teksto, pinapanatili ang orihinal nitong format. Ito ay pangunahing ginagamit para sa pagpapakita ng nilalaman na kailangang mapanatili ang format, tulad ng code ng programa, tula, o tekstong sining.

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

1    <pre>
2    function hello() {
3        console.log("Hello, world!");
4    }
5    </pre>

• Sa <pre> na tag, ang mga espasyo ay napananatili, kaya kung may espasyo bago ang closing tag, lilitaw ang isang blangkong linya sa dulo tulad ng sa halimbawang ito.

Tag na <samp>

1Sample system output: <samp>Error: Invalid input.</samp>

• Ang tag na <samp> ay isang HTML na tag na ginagamit upang katawanin ang output ng isang computer program. Ginagamit ito upang ipahiwatig ang output o mga mensahe mula sa isang programa o sistema.

Tag na <kbd>

1Keyboard input example: <kbd>Ctrl</kbd> + <kbd>C</kbd>

• Ang tag na <kbd> ay isang HTML na tag na ginagamit upang katawanin ang input ng user. Ito ay ginagamit upang tukuyin ang input mula sa keyboard o utos, tulad ng mga shortcut.

Tag na <var>

1Variable example: <var>x</var> = 5;

• Ang tag na <var> ay ginagamit upang katawanin ang mga variable sa isang programa o ekwasyon. Ito ay ginagamit upang bigyang-diin ang mga pangalan ng variable o ang mga variable sa mga pormula ng matematika.

Mga tag na ginagamit para sa mga sipi, atbp.

Tag na <blockquote>

1<blockquote>
2    This is a blockquote for longer quotations.
3</blockquote>

• Ang tag na <blockquote> ay ginagamit upang katawanin ang mahahabang sipi o teksto mula sa ibang mga pinagmulan, at kadalasang ipinapakita sa antas ng bloke.

Tag na <q>

1This is a short quote: <q>Short quote example.</q>

• Ang tag na <q> ay isang inline na elemento na ginagamit upang katawanin ang maiikling sipi. Ang tag na ito ay maaaring gamitin upang markahan ang bahagi ng teksto o isang pangungusap bilang sipi. Ang text na nakapaloob sa tag na <q> ay karaniwang ipinapakita na may panipi. Ang tag na <q> ay maaari ring ilagay sa loob ng isa pang <q>. Sa ganitong kaso, iba't ibang uri ng panipi ang karaniwang ginagamit para sa panloob na sipi.

<cite> na tag

1Reference to a book: <cite>The Great Gatsby</cite>

• Ang tag na <cite> ay isang inline na elemento na ginagamit upang tukuyin ang pinagmulan ng isang sipi o sanggunian. Ito ay pangunahing ginagamit upang tukuyin ang pinagmulan ng isang akda, tulad ng mga pamagat ng mga gawa, artikulo, papel, mga web page, o mga libro.

<address> na tag

1<address>123 Main Street, Springfield, USA</address>

• Ang <address> na tag ay ginagamit upang ipakita ang impormasyon sa pakikipag-ugnayan na may kinalaman sa may-akda o may-ari ng isang dokumento o seksyon. Ang tag na ito ay karaniwang naglalaman ng mga email address, numero ng telepono, pisikal na address, at katulad na impormasyon.

Ang <time> tag

1<time datetime="2024-12-04">December 4, 2024</time>

• Ang <time> tag ay ginagamit upang kumatawan sa isang tiyak na oras, isang panahon, o paulit-ulit na oras. Ang tag na ito ay maaaring maglaman ng mga petsa at oras upang magbigay ng semantikong kahulugan sa dokumento.

Ang <data> tag

1<data value="2024">Current Year</data>

• Ang <data> tag ay ginagamit upang maiugnay ang mga nababasang nilalaman ng tao sa mga halaga na kayang intindihin ng makina. Ang tag na ito ay kapaki-pakinabang sa pagmamarka ng datos sa paraang madaling maproseso ng mga programa.

<details> at <summary> na Mga Tag

1<details>
2    <summary>More information</summary>
3    <p>Here is some additional content.</p>
4</details>

• Ang <details> tag ay lumilikha ng isang collapsible at expandable na widget. Sa pamamagitan ng paggamit nito kasama ng <summary> tag, maaari kang mag-set up ng isang clickable na seksyon upang magpakita ng higit pang detalye, kadalasang ginagamit para sa mga interactive na pagpapakita tulad ng 'Basahin ang higit pa'.

Mga tag na ginagamit para sa pagpapakita ng listahan

<ul> na tag

1<ul>
2    <li>Item 1</li>
3    <li>Item 2</li>
4    <li>Item 3</li>
5</ul>

• Ito ay isang tag na ginagamit upang lumikha ng mga unordered list. Ang bawat item sa listahan ay tinutukoy gamit ang <li> na tag. Sa default, isang itim na tuldok ang ipinapakita sa harap ng bawat item sa listahan.

<ol> na tag

1<ol>
2    <li>Step 1</li>
3    <li>Step 2</li>
4    <li>Step 3</li>
5</ol>

• Ang tag na ito ay ginagamit upang lumikha ng isang ordered list. Ang bawat item sa listahan ay tinutukoy gamit ang <li> na tag. Sa default, mga numero ang ipinapakita upang tukuyin ang pagkakasunod-sunod ng mga item.

<dl> na tag

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>

• Ang tag na ito ay ginagamit upang lumikha ng isang listahan ng mga pares na binubuo ng mga termino at kahulugan, o mga pangalan at detalye. Ang mga item sa listahan ay tinutukoy gamit ang <dt> at <dd> na mga tag. Ang termino o pangalan ay isinusulat sa <dt> na tag, at ang kahulugan o paliwanag ay isinusulat sa <dd> na tag.

Maaari mong sundan ang artikulo sa itaas gamit ang Visual Studio Code sa aming YouTube channel. Paki-check din ang aming YouTube channel.

YouTube Video