Scribd Logo
Upload

Welcome to Scribd!

  • Computer Code in HTML

    Uploaded by

    Jeronimo
    3 views22 pages
    lesson

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    lesson

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    3 views22 pages

    Computer Code in HTML

    Uploaded by

    Jeronimo
    lesson

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 22

    Computer Code in HTML

    Dot Net Tutorials

    Back to: HTML Tutorials

    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.

    While programming, it is necessary to show the Output result, the error messages, or the coding
    part to the user on a webpage. In order to solve this issue, HTML uses different tags for the user
    inputs, codes, programs, etc. With the help of these tags, we will be able to write codes to display
    on our webpage. Following is the list of tags or computer codes that are used in HTML for this
    task.

    <code>

    <kbd>

    <samp>

    <var>

    <pre>
    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 <code> 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 <kbd> For Keyboard Input


    The HTML <kbd> 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 <kbd> tag in the default monospace
    font. This tag is also known as the <kbd> element. For better understanding, please have a look
    at the below example code.

    <p>Press <kbd>Enter</kbd> to continue</p>

    <p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to Save</p>

    <!DOCTYPE html> <html> <body> <h2>The Kbd Element</h2> <p>Press <kbd>Enter</kbd>


    to continue</p> <p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to Save</p> </body> </html>

    <!DOCTYPE html>
    <html>
    <body>

    <h2>The Kbd Element</h2>


    <p>Press <kbd>Enter</kbd> to continue</p>
    <p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to Save</p>

    </body>
    </html>

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

    HTML <samp> 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.

    <h2>The samp Element</h2>

    <p>The samp element is used to define sample output from a computer program.</p>

    <p>Message from my computer:</p>

    <p><samp>File not found.<br>Press F1 to continue</samp></p>

    <!DOCTYPE html> <html> <body> <h2>The samp Element</h2> <p>The samp element is
    used to define sample output from a computer program.</p> <p>Message from my
    computer:</p> <p><samp>File not found.<br>Press F1 to continue</samp></p> </body>
    </html>

    <!DOCTYPE html>
    <html>
    <body>
    <h2>The samp Element</h2>

    <p>The samp element is used to define sample output from a computer program.</p>

    <p>Message from my computer:</p>


    <p><samp>File not found.<br>Press F1 to continue</samp></p>

    </body>
    </html>

    When you run the above HTML code, you will get the following output in the browser.
    HTML <code> 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 <code> element to insert
    code into the webpage.

    <h2>The code Element inside pre tag</h2>

    printf("Hello Learners");

    <h2>The code Element without pre tag</h2>

    printf("Hello Learners");

    <!DOCTYPE html> <html> <body> <h2>The code Element inside pre tag</h2> <pre> <code>
    #include<stdio.h> int main() { printf("Hello Learners"); } </code> </pre> <h2>The code
    Element without pre tag</h2> <code> #include<stdio.h> int main() { printf("Hello Learners");
    } </code> </body> </html>

    <!DOCTYPE html>
    <html>
    <body>

    <h2>The code Element inside pre tag</h2>

    <pre>
    <code>
    #include<stdio.h>
    int main() {
    printf("Hello Learners");
    }
    </code>
    </pre>

    <h2>The code Element without pre tag</h2>


    <code>
    #include<stdio.h>
    int main() {
    printf("Hello Learners");
    }
    </code>

    </body>
    </html>

    When you run the above HTML code, you will get the following output in the browser.
    HTML <var> 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.

    <p>The area of a rectangle is: <<var>l</var> x <var>b</var>, where <var>b</var> is the base,
    and <var>l</var> is the length.</p>

    <var>x</var> = <var>y</var> + 2 </p>

    <!DOCTYPE html> <html> <body> <h2>The var Element</h2> <p>The area of a rectangle is:
    <<var>l</var> x <var>b</var>, where <var>b</var> is the base, and <var>l</var> is the
    length.</p> <p>A simple equation: <var>x</var> = <var>y</var> + 2 </p> </body> </html>

    <!DOCTYPE html>
    <html>
    <body>

    <h2>The var Element</h2>

    <p>The area of a rectangle is: <<var>l</var> x <var>b</var>, where <var>b</var> is the base,
    and <var>l</var> is the length.</p>

    <p>A simple equation:


    <var>x</var> = <var>y</var> + 2 </p>

    </body>
    </html>

    When you run the above HTML code, you will get the following output in the browser.
    HTML <pre> element

    The <pre> 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.

    <h3>Example of pre tag</h3>

    within pre tag, and pre tag will ignore all


    spaces, break lines, and will display the content

    <!DOCTYPE html> <html> <body> <h3>Example of pre tag</h3> <pre> 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. </pre> </body> </html>

    <!DOCTYPE html>
    <html>
    <body>
    <h3>Example of pre tag</h3>
    <pre>
    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.
    </pre>
    </body>
    </html>

    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.

    About the Author: Pranaya Rout


    Pranaya Rout has published more than 3,000 articles in his 11-year career. Pranaya Rout has
    very good experience with Microsoft Technologies, Including C#, VB, ASP.NET MVC, ASP.NET
    Web API, EF, EF Core, ADO.NET, LINQ, SQL Server, MYSQL, Oracle, ASP.NET Core, Cloud
    Computing, Microservices, Design Patterns and still learning new technologies.

    You might also like