You are currently viewing Computer Code in HTML | Lesson 26 HTML Tutorial
HTML Compute Code Image

Computer Code in HTML | Lesson 26 HTML Tutorial

this lesson explain how to insert code to your website and print that code as it is in side editor.
there is 3 type of code tags in HTML which is: kbd, samp and code.

This Visual Explain Could Help You Better Understand:

Computer Code in HTML Video

Here we will take 4 types of code tags in html which are: <kbd> <samp> <code> <var>.

First <kbd> Tag For Keyboard Input

The HTML <kbd> element represents user input, like keyboard input or voice commands. Text surrounded by <kbd> tags is typically displayed in the browser’s default monospace font with little attention .

Example:

 <p>Save this Web Page by pressing <kbd>Ctrl + S</kbd></p> 

Second <samp> Tag For Program Output

The HTML <samp> element represents output from a program or computing system. Text surrounded by <samp> tags is typically displayed in the browser’s default monospace font with little attention.

Example:

 <p>If you made problem, your debuger will return <samp>Error!</samp></p> 

Third <code> Tag For Computer Code

The HTML <code> element defines a fragment of computer code like the ones we use to show the code inside. Text surrounded by <code> tags is typically displayed in the browser’s default monospace font too.

Example:

 <code>
x = 5;
y = 6;
z = x + y;
</code> 

Note: that code will be printed in inline(horizontally) so to solve that we could use <pre> tag to save the spaces and newlines.

Example:

 <pre>  
 <code>
x = 5;
y = 6;
z = x + y;
</code> 
  </pre>

Fourth <var> Tag For Variables

The HTML <var> element defines a variable. The variable could be a variable in a mathematical expression or a variable in programming context like the html content of javascript.

Example:

 Einstein wrote: <var>E</var> = <var>mc</var><sup>2</sup>. 



This post is one of the HTML5 for deep understanding course. where we will learn every common elements from basic to the advanced element.

In addition each lesson has a video which you could visit and watch for more practicing and for deep understanding.

We hope that we could give the best for you and for the deep and easy understanding.

You could follow the series from our website SAFHATECH.com and go to categories and then programming and then Choose the course you want then just click next post to go step by step.

Finally we hope every thing is works as you suspect.


Consequently You could follow us at :

Website URL: https://www.safhatech.com/

Youtube: https://www.youtube.com/channel/UCIVzh6iykNowNcOUT5Gfasw

Twitter: http:// https://twitter.com/safhatech

Instegram: https://www.instagram.com/safhatech

Facebook: http:// https://www.facebook.com/Safhatech-487171875443687

Phone:967772223681

References:w3schools.com

Leave a Reply