HTML นั้นมีหลากหลาย Elements ที่ใช้สำหรับกำหนดในการป้อนข้อมูลและ Computer Code
ตัวอย่างรูปแบบของ HTML Computer Code
<!DOCTYPE html>
<html>
<body>
<h2>Computer Code</h2>
<p>ตัวอย่าง:</p>
<code>
x = 5;
y = 6;
z = x + y;
</code>
</body>
</html>
การป้อนข้อมูลผ่านทาง Keyboard ด้วยคำสั่ง HTML <kbd>
HTML Element <kbd> ใช้เพื่อระบุการป้อนข้อมูลผ่านทาง Keyboard ซึ่งเนื้อหาภายในจะแสดงเป็นตัวอักษร Monospace ตามค่าเริ่มต้นของเบราว์เซอร์ที่ตั้งไว้
<!DOCTYPE html>
<html>
<body>
<h2>The kbd Element</h2>
<p>The kbd Element ใช้เพื่อระบุการป้อนข้อมูลผ่านทาง Keyboard:</p>
<p>บันทึกเอกสารให้กดปุ่ม <kbd>Ctrl + S</kbd></p>
</body>
</html>
แสดงผลของโปรแกรมด้วยคำสั่ง HTML <samp>
HTML Element <samp> ใช้เพื่อกำหนดการแสดงผลของโปรแกรมคอมพิวเตอร์ โดยข้อความที่แสดงนั้น จะแสดงเป็นตัวอักษร Monospace ตามค่าเริ่มต้นของเบราว์เซอร์ที่ตั้งไว้
<!DOCTYPE html>
<html>
<body>
<h2>samp Element</h2>
<p>Element samp ใช้เพื่อกำหนดการแสดงผลของโปรแกรมคอมพิวเตอร์</p>
<p>ข้อความจาก Computer ของฉัน:</p>
<p><samp>ไม่พบไฟล์<br> กด F1 เพื่อดำเนินการต่อ</samp></p>
</body>
</html>
HTML <code> สำหรับ Computer Code
HTML Element <code> จะใช้ในกรณีที่มีการกำหนดในส่วนของ Computer Code ซึ่งข้อความที่แสดงนั้น จะแสดงเป็นตัวอักษร Monospace ตามค่าเริ่มต้นของเบราว์เซอร์ที่ตั้งไว้
<!DOCTYPE html>
<html>
<body>
<h2>The code Element</h2>
<p>ตัวอย่างโค้ดโปรแกรม:</p>
<code>
x = 5;
y = 6;
z = x + y;
</code>
</body>
</html>
จะสังเกตได้ว่า ผลลัพธ์จากการใช้คำสั่ง <code> นี้จะไม่มีช่องว่างและอยู่บนบรรทัดเดียวกันทั้งหมด ซึ่งหากต้องการที่จะให้อยู่คนละบรรทัด แนะนำให้วางคำสั่ง <code> ลงใน <pre>
<!DOCTYPE html>
<html>
<body>
<p>เนื่องด้วยคำสั่ง code ไม่มีการแบ่งช่องว่างและข้อความอยู่บรรทัดเดียวกันหมด</p>
<p>เพื่อแก้ปัญหานี้ให้ใส่ code ลงใน pre:</p>
<pre>
<code>
x = 5;
y = 6;
z = x + y;
</code>
</pre>
</body>
</html>
HTML <var> สำหรับตัวแปร
HTML Element <var> จะใช้เพื่อกำนหดตัวแปรในการเขียนโปรแกรมหรือนิพจณ์ทางคณิตศาสตร์ โดยข้อความที่แสดงนั้นจะเป็นตัวเอียง
<!DOCTYPE html>
<html>
<body>
<h2>The var Element</h2>
<p>สูตรพื้นที่สามเหลี่ยมคือ: 1/2 x <var>b</var> x <var>h</var>, โดยที่ <var>b</var> เป็นค่าความยาวของฐาน, และ <var>h</var> เป็นค่าความสูง</p>
</body>
</html>
สรุป
- Element <kbd> กำหนดการป้อนข้อมูลผ่านทาง Keyboard
- Element <samp> กำหนดการแสดงผลลัพธ์จากโปรแกรมคอมพิวเตอร์
- Element <code> กำหนดส่วนของ Computer Code
- Element <var> กำหนดค่าตัวแปรของโปรแกรมหรือนิพจณ์ทางคณิตศาสตร์
- Element <pre> กำหนดรูปแบบของข้อความ