home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> HTML

HTML Computer Code Elements

เพื่อแสดงโค้ดคอมพิวเตอร์บนหน้าเว็บ มี elements บางตัวใน HTML มาดูทีละตัว:

  • <kbd>
  • <pre>
  • <code>
  • <var>
  • <samp>

<kbd> element ใน HTML

แท็ก <kbd> ใช้กำหนด keyboard input ใช้เมื่อต้องการให้ผู้ใช้พิมพ์บนคีย์บอร์ด เช่น shortcut keys Ctrl+C สำหรับ copy, Esc สำหรับ exit ฯลฯ

มาดูตัวอย่างการใช้ <kbd> tag:

ตัวอย่าง

<!DOCTYPE html>
<html>
<body>
<h2>Shortcut Keys</h2>
<p>Use the following shortcut keys -</p>
<p><strong>Cut</strong> - <kbd>CTRL</kbd>+<kbd>X</kbd></p>
<p><strong>Copy</strong> - <kbd>CTRL</kbd>+<kbd>C</kbd></p>
<p><strong>Paste</strong> - <kbd>CTRL</kbd>+<kbd>V</kbd></p>
<p><strong>Undo</strong> - <kbd>CTRL</kbd>+<kbd>Z</kbd></p>
</body>
</html>

ผลลัพธ์

HTML Computer Code Elements

<pre> element ใน HTML

แท็ก <pre> ใน HTML ใช้ตั้งค่า preformatted text ข้อความในมัน preserve spaces และ line breaks นั่นคือ ข้อความปรากฏเหมือนในโค้ด HTML มาดูตัวอย่าง:

ตัวอย่าง

<!DOCTYPE html>
<html>
<body>
<h2>Demo Heading</h2>
<pre>
  This is a demo text
  and will appear
  in the same format as
  it is visible
  here. The pre tag displays
  the text in a fixed-width
  font. It preserves
  both spaces and
  line breaks as you can see
  here.
</pre>
</body>
</html>

ผลลัพธ์

HTML Computer Code Elements

<code> element ใน HTML

แท็ก <code> ใช้จัดรูปแบบโค้ดในเอกสาร HTML ตัวอย่างเช่น หากคุณต้องการเขียนโค้ด Java และจัดรูปแบบให้เหมาะสม ใช้ <code> element ใน HTML

ตัวอย่าง

<!DOCTYPE html>
<html>
<body>
<h1>Header Files</h1>
<h2>C++</h2>
<code>#include <iostream></code>
<h2>C</h2>
<code>#include <stdio></code>
</body>
</html>

ผลลัพธ์

HTML Computer Code Elements

<var> element ใน HTML

องค์ประกอบ <var> ใน HTML ใช้แสดง mathematical expression สำหรับการคำนวณ

ตัวอย่าง

<!DOCTYPE html>
<html>
<body>
<h2>Mathematical Equation</h2>
Sample equation - <var>2x</var> - <var>2z</var> = <var>3y</var> + 9
</body>
</html>

ผลลัพธ์

HTML Computer Code Elements

<samp> element ใน HTML

แท็ก <samp> ใน HTML เป็น phrase tag เหมือน <em>, <code>, <strong> ฯลฯ และใช้จัดรูปแบบข้อความในเอกสาร HTML

ตัวอย่าง

<!DOCTYPE html>
<html>
<body>
<h2>Exam Results</h2>
<p><s>Result would be announced on 6th June.</s></p>
<samp>New date for results are 7th June.</samp>
</body>
</html>

ผลลัพธ์

HTML Computer Code Elements