HTML Computer Code Tags
Sometimes we have to show the computer programming codes over web pages. Most often this is required when we want to develop the computer programming tutorial websites or webpages.
Why use HTML Computer Code Tags?
HTML Computer Code Tags are use to express the simplest font style or look without any extra formatting. Usually this elements display the fragments of computer codes in the browser’s defaults monospace font.
<code>
var a = 9;<br />
var b = 16;<br />
c = a + b;<br />
</code>
In Chapter we will learn about four Computer Code Tags which are mentioned below:
1. Code Element - <code>
2. Key Board Element - <kbd>
3. Sample Element - <samp>
4. Variable Element - <var>
5. Output Element - <output>
Code Element for computer codes
The Code Element is an inline element that displays its contents styled in a fashion intended to indicate that the text is a short fragment of computer code. By default, the content text is displayed using the user agent's default monospace font.
<!DOCTYPE html>
<html>
<title>HTML5 Tutorial - HTML Computer Code Element.</title>
<body>
<h1>This is the Example of Computer Code Element.</h1>
<p>Use of Code Element.</p>
<code>
var a = 9;
var b = 16;
c = a + b;
</code>
</body>
</html>
Code Element doesn’t preserve the whitespace. Code Element can be nested inside the <pre> element also to preserve the whitespace like given in below example.
<code>
var a = 9;<br />
var b = 16;<br />
c = a + b;<br />
</code>
Keyboard Element for Keyboard inputs
The HTML Keyboard Input element <kbd> represents a span of inline text denoting textual user input from a keyboard, voice input or any other text entry devices. By default, the content text is displayed using the user agent's default monospace font. Also custom style can defined to override the browser defaults. Although this is not mandated by the HTML standard.
<p>Use of kbd Element.</p>
<p>Use the <kbd>Alt + F4</kbd> key to execute the shut down menu in Windows 10.</p>
Sample Element for sample output
The HTML Sample Element <samp> is used to enclose inline text which represents sample (or quoted) output from a computer program. Its contents are typically rendered using the browser's default monospaced font.
<pre>
<code>
var a = "6";
var b = 5;
a + b = <samp>Error.</samp>
</code>
</pre>
Variable Element for variables
The HTML Variable element <var> represents the name of a variable in a mathematical expression or a programming context. It's typically presented using an italicized version of the current typeface. This element is not supported by all the browsers.
<p>Use of var Element.</p>
<code>
<var>var a</var> = 6;
<var>var b</var> = 7;
<var>a + b</var> = 13;
</code>
<h2>Another Example</h2>
<pre>
<code>
<var>var a</var> = 6;
<var>var b</var> = 7;
<var>a + b</var> = 13;
</code>
</pre>
Output Element for result output
The HTML Output element <output> is a container element into which a website or app can inject the results of a calculation or the outcome of a user action.
<form oninput = "result.value = parseInt(x.value)+parseInt(y.value)">
<input type = "range" name = "x" value = "50" /> +
<input type = "number" name = "y" value = "100"/> =
<output name = "result">150</output>
</form>
Related Topics
Post A Comment:
0 comments: