Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > HTML-Tutorial > HTML-Code-Tag

HTML-Code-Tag

PHPz
Freigeben： 2024-09-04 16:28:53
Original
844 Leute haben es durchsucht

HTML or Hyper Text Markup Language is a web development programming language that uses tag for defining, declaring, and performing operations on any web page element. Tags are defined using the symbols < and >, and a closing tag should have ‘/’ in front of it. A code tag is a type of tag that allows the programmer to write their chunk of code in between, like ……. , as every tag in HTML must have a close tag.

Syntax with Explanation:

The basic syntax is shown below, where the element comes with a pair and the fragments of code are written between these tags. Tag omission is not performed here as both the starting and closing tag is mandatory by default.

<pre class="brush:php;toolbar:false">
<code>
….
….
</code>
Nach dem Login kopieren

How does Code Tag Work in HTML?

By default, the content of the tag font is displayed using monospace, which means all the characters in a given content of the same width. It is specified in both HTML 5 and HTML4 standards.

HTML uses various text sizes and more properties with fonts and indent. There comes a scenario where it is necessary to display some content in the browser with both text and code of snippets, and then we shall make use of this tag. The code tag is paired together with the preformatted tag 

, which preserves the exact format of the text written in the source document.</p>
<p>To begin the text in the exact same line, this tag has been used, which literally removes the white space. To represent the code in a font style, it is preferred to use a code selector in the CSS style and to give a visual weight. To pick a font, it is beautiful to have CSS with already been set font-family to monospace. Coming to browser compatibility, it is supported in chrome, edge, opera, safari, Firefox. Even this element supports both the event and global attributes. Code tags make use of class attribute for a predefined language and also <id>, <style>, <title>.</p>
<p>This code tag makes use of some elements while implementation.</p>
<ul>
<li>
<strong><Code>:</strong> Defines code fragment</li>
<li>
<strong><var>:</strong> Explains variables</li>
<li>
<strong><samp></strong>: Throws computer Output</li>
<li>
<strong><kbd></strong>: Helps to display keyboard input</li>
</ul>
<h3>Examples to Implement HTML Code Tag</h3>
<p>Here is an example with different styles on the code tag.</p>
<h4>Example #1</h4>
<p>Here the first example program is to display the code, which forms a basic inline concept.</p>
<p><strong>Code:</strong></p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html>
<body>
<em># Display the sum</em><br>
<strong>program adds two numbers</strong><br>
<pre class="brush:php;toolbar:false">
<code>
nu1 = 2.5
nu2 = 5.3
sum = float(nu1) + float(nu2)
print('The sum of two num {0} and {1} is {2}'.format(nu1, nu2, sum))</code>

output from a program
input
Variable declaration
Nach dem Login kopieren

The generated output is given below as it displays the content of the program code and the output using the tag on the web page. To wrap multiple lines of a fragment, computer code 

 element has been used below.</p>
<p><strong>Output:</strong></p>
<p><img  src="https://img.php.cn/upload/article/000/000/000/172543853827005.png" alt="HTML-Code-Tag" ></p>
<p>Using Multiple <code> element in the same program.</p>
<p><strong>Code:</strong></p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html>
<body>
<h1>Various Programming language</h1>
<h2> Java</h2>
<code>
import java.io.*;<br>
System.out.println();
</code>
<h2>C programming</h2>
<code>
#include <stdio.h><br>
void main()<br>
printf()
</code>
</body>
</html>
Nach dem Login kopieren

We have a small code snapshot that displays java and C programming samples on a web page for the above code.

Output:

HTML-Code-Tag

Example #2

The second example shows a sample program that displays the code in the center aligned.

Code:

<!DOCTYPE html>
<html>
<body>
<code>
<center>
x = 3;
y = 2;
c = "To add a program";
</center>
</code>
</body>
</html>
Nach dem Login kopieren

Output:

HTML-Code-Tag

Example #3

Here additionally, I have included

concept to display the program along with the description content(to give semantic information). Even we can add any function code in between them to give the benefits of programs.

Code:

<!DOCTYPE html>
<h1>Demo of article tag</h1>
<p>The <code> fact()</code> this method is used to calculate a factorial of a given number.</p>
Nach dem Login kopieren

Code:

code {
background-color: #8A2BE2;
border-radius: 2px;
font-family: "Courier New", monospace;
padding: 0 4px;
}
Nach dem Login kopieren

Output:

HTML-Code-Tag

Example #4

html code format using href linkOutput.

Code:

<!DOCTYPE html>
<h1>Demo of code tag</h1>
<p>This is an implementaion of a <a href="http://www.educba.com" title="online tutorial"><code>link to edu</code></a> displayed with code tag.</p>
Nach dem Login kopieren

Code:

code {
background-color: #6495ED;
border-radius: 5px;
font-family: "italic", monospace;
padding: 1 5px;
}
Nach dem Login kopieren

Output:

HTML-Code-Tag

Example #5

To make a code properly and to look and read fashion, we have to use