HTML - SPLessons

HTML Computer Code

Chapter 42

SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

HTML Computer Code

HTML Computer Code

shape 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

Computer code Formatting

shape 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.

<!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>

Result
By running the above code in a preferred browser user can get the following output as shown in below image.

kbd Element

shape 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.

<!DOCTYPE html>
<html>
	<body>
		<p>The kbd element represents keyboard input:</p>
		<p><kbd>File | Open...</kbd></p>
	</body>
</html>

Result
By running the above code in a preferred browser user can get the following output as shown in below image.

samp Element

shape 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.

<!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>

Result
By running the above code in a preferred browser user can get the following output as shown in below image.

code Element

shape 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.

<!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>

Result
By running the above code in a preferred browser user can get the following output as shown in below image.

Summary

shape Key Points

  • Code does not preserve white spaces and extra lines.
  • Computer Code elements are displayed in fixed letter size and spacing.