Computer code text in html

Computer Code in HTML

Computer Code Elements in HTML with Examples

In this article, I am going to discuss Computer Code Elements in HTML with Examples. Please read our previous article where we discussed Entities in HTML with Examples. At the end of this article, you will learn everything about HTML Computer Code Elements with Examples.

Computer Code Elements in HTML

Sometimes it is necessary to display code while developing a website. If we consider text formatting to match the code’s presentation, this could be a time-consuming process.

In an HTML document, computer codes are displayed in a different text style and formatting. HTML has a number of elements for displaying computer code. The most commonly used element is the tag. Computer codes are useful in providing output results, error messages, or coding parts to users on a webpage. For better understanding, please have a look at the below image.

This is how text inside the code element gets displayed on the screen.

HTML For Keyboard Input

The HTML tag describes the text as user input from a keyboard, such as the Enter or Ctrl keys. Browsers typically display the text enclosed within the tag in the default monospace font. This tag is also known as the element. For better understanding, please have a look at the below example code.

   
The Kbd Element
 
Press Enter to continue
 
Press Ctrl + S to Save
   

When you run the above HTML code, you will get the following output in the browser.

HTML For Program Output

The sample element is used to specify the sample output for a particular program on the screen. In the example below we have shown the sum of two numbers as output.

   
The samp Element
 
The samp element is used to define sample output from a computer program.
 
Message from my computer:
 
File not found.
Press F1 to continue
   

When you run the above HTML code, you will get the following output in the browser.

HTML For Computer Code

The HTML Code Element is used to represent some programming code on our webpage. The content written between the code tag will be displayed in default monospace font.

As you can see in the output below, the code element inside the pre-tag is formatted whereas the code element outside the pre-tag is not. Because the pre-tag inserts line breaks and space into each line to format the text. In the example below we have used the element to insert code into the webpage.

   
The code Element inside pre tag
 
 #include int main()
 
The code Element without pre tag
 
 #include int main()  
 
When you run the above HTML code, you will get the following output in the browser.
 
 
 
HTML For Variables 
 
The HTML var element is used to define a variable in an HTML document. By default, the text inside a var element is italicized. Var elements are normally used in a mathematical expression. In the example below we have used var elements to define variables in mathematical expressions.
 
   
The var Element
 
The area of a rectangle is: l x b, where b is the base, and l is the length.
 
A simple equation: x = y + 2
   
 
When you run the above HTML code, you will get the following output in the browser.
 
 
 
HTML element 
 
The element defines the preformatted text, which displays the content within it in a fixed-width font. It keeps the content in its original format and ignores all formatting. For better understanding, please have a look at the below example.
 
   
Example of pre tag
 
This is content written within pre tag, and pre tag will ignore all spaces, break lines, and will display the content as in original format.
 
  
 
When you run the above HTML code, you will get the following output in the browser.
 
 
 
In the next article, I am going to discuss Header Elements in HTML with Examples. Here, in this article, I try to explain Computer Code Elements in HTML with Examples and I hope you enjoy this HTML Computer Code Elements with Examples article.
 
Источник
 
HTML Computer Code Elements
 
The computer has a special formatting and text style for displaying the messages that are connected to codes. There exist different computer code elements in HTML.
 
The HTML tag
 
Example of the HTML tag:
 
html> html> head> title>Title of the document title> head> body> p>This is an ordinary text. p> code>This is a program code. code> p>This is the continuation of the ordinary text. p> body> html>
 
The HTML tag:
 
Example of the HTML tag:
 
html> html> head> title>Title of the document title> head> body> p>var>x var> = var>y var> + 5 p> body> html>
 
The HTML tag:
 
Example of the HTML tag:
 
html> html> head> title>Title of the document title> head> body> h2>The kbd example h2> p>You can paste the document by pressing kbd>Ctrl + V kbd>. p> body> html>
 
The HTML tag
 
Example of the HTML tag:
 
html> html> head> title>Title of the document title> head> body> p>This is an ordinary text. samp>But this is a sample text. samp> Here is another ordinary text. p> body> html>
 
Источник
 
HTML Computer Code Elements
 
HTML contains several elements for defining user input and computer code.
 
Example
 
HTML For Keyboard Input
 
The HTML element is used to define keyboard input. The content inside is displayed in the browser’s default monospace font.
 
Example
 
Define some text as keyboard input in a document:
 
Save the document by pressing Ctrl + S
 
HTML For Program Output
 
The HTML element is used to define sample output from a computer program. The content inside is displayed in the browser’s default monospace font.
 
Example
 
Define some text as sample output from a computer program in a document:
 
Message from my computer:
 
 
File not found.
Press F1 to continue
 
File not found.
Press F1 to continue
 
HTML For Computer Code
 
The HTML element is used to define a piece of computer code. The content inside is displayed in the browser’s default monospace font.
 
Example
 
Define some text as computer code in a document:
 
Notice that the element does not preserve extra whitespace and line-breaks.
 
To fix this, you can put the element inside a element:
 
Example
 
HTML For Variables
 
The HTML element is used to define a variable in programming or in a mathematical expression. The content inside is typically displayed in italic.
 
Example
 
Define some text as variables in a document:
 
The area of a triangle is: 1/2 x b x h, where b is the base, and h is the vertical height.
 
Chapter Summary
 
 
The element defines keyboard input
 
The element defines sample output from a computer program
 
The element defines a piece of computer code
 
The element defines a variable in programming or in a mathematical expression
 
The element defines preformatted text
 
 
HTML Exercises
 
HTML Computer Code Elements
 
 
 
Tag
 
Description
 
 
 
 
Defines programming code
 
 
 
 
Defines keyboard input
 
 
 
 
Defines computer output
 
 
 
 
Defines a variable
 
 
 
 
Defines preformatted text
 
 
 
For a complete list of all available HTML tags, visit our HTML Tag Reference.
 
Источник
 
HTML COMPUTER CODE
 
There are few tags in HTML which let us represent computer codes, programs or outputs on the webpage. Since computer codes are different from simple texts so these tags are used to differentiate between simple text and computer codes.
 
The HTML tags that are used for these purposes are as follows:
 
1). HTML code tag
 
Sometimes we need to show computer code or programs on the screen which could be done by another tag also but we have a special tag for this purpose .
 
The is used to display computer codes on the webpage.
 
The tag contents are displayed by fixed width,spacing and font-size.
 
 var a = 10; 
/*This is javascript code.*/ var b = 12; 
/*You can learn javascript in our javascript section*/ var c = a + b; 
console.log(c); 
 
var a = 10; var b = 12; var c = a + b; console.log(c); 
 
2). HTML kbd tag
 
The kbd is used to display keyboard inputs.
 
The kbd tag is generally monospaced.
 
This tag has no specific attribute.
 
The tag can be given a better look using CSS.
 
3). HTML samp tag
 
The samp is used to display computer output or any kind of result or error.
 
The samp tag display content monospaced.
 
 error 
successful 
run time error 
 
 error successful run time error 
 
4). HTML var tag
 
The var is used to define any variable in mathematics or in computers.
 
It can be given CSS properties for better look.
 
And god said: f = m*a E = MC2 
 
Источник