Introduction
This chapter demonstrates about the HTML Computer Code which is normally used for the variable letter size and spacing, following are the concepts covered in this chapter.
- Computer code Formatting
Description
HTML Computer Code uses variable letter size and spacing in order to display the elements in a fixed size. Following are few elements listed below.
The code below demonstrates the computer code elements.
[html]
<!DOCTYPE html>
<html>
<body>
<p>Some programming code:</p>
<code>
var x = 10;<br>
var y = 16;<br>
document.getElementById("demo").innerHTML = x + y;
</code>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
- kbd Element
- samp Element
- code Element
Description
kbd element is known as the Keyboard Input element and is defined by the <kbd> element. The code below demonstrates the use of the <kbd> element is as shown.
[html]
<!DOCTYPE html>
<html>
<body>
<p>The kbd element represents keyboard input:</p>
<p><kbd>File | Open...</kbd></p>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Description
samp element is used to get the sample output from a computer program and is defined as the <samp> element. The code below demonstrates the using of the <samp> element.
[html]
<!DOCTYPE html>
<html>
<body>
<p>The samp element represents the sample output from a program:</p>
<samp>
demo.example.com login: JUL 26 04:19:17
html 1.1.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v1.1
</samp>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Description
code element is used to get the piece of a programming code and does not preserve the extra white spaces and line breaks. User can also put the <code> element inside a <pre> element. The code below demonstrates the use of the <code> element.
[html]
<!DOCTYPE html>
<html>
<body>
<p>Programming code example:</p>
<code>
var x = 10;
var y = 16;
document.getElementById("demo").innerHTML = x + y;
</code>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Key Points
- Code does not preserve white spaces and extra lines.
- Computer Code elements are displayed in fixed letter size and spacing.