La computadora tiene un formato y estilo de texto únicos para mostrar los mensajes relacionados con los códigos. La etiqueta <code> se utiliza para mostrar el código de la computadora en el sitio web. Hay una serie de elementos disponibles para marcar código de computadora usando HTML.
Etiqueta <code> : La etiqueta <code> en HTML se usa para definir la pieza de código de computadora. Durante la creación de páginas web, a veces es necesario mostrar el código de programación de la computadora. Se puede hacer con cualquier etiqueta de encabezado básico de HTML, pero HTML proporciona una etiqueta separada que es la etiqueta <code>.
La etiqueta de código es un tipo específico de texto que representa la salida de la computadora. HTML proporciona muchos métodos para dar formato al texto, pero la etiqueta <code> se muestra con un tamaño de letra, fuente y espaciado fijos.
Sintaxis:
<code> Computer code contents... </code>
Ejemplo 1:
html
<pre>
<code>
#include<stdio.h>
int main() {
printf("Hello Geeks");
}
</code>
</pre>
Producción:
Ejemplo 2:
html
<pre>
<code>
class GFG
{
// Program begins with a call to main()
// Print "Hello, World" to the terminal window
public static void main(String args[])
{
System.out.println("Hello, World");
}
}
</code>
</pre>
Producción:
Nota: El programa que está escrito dentro de la etiqueta <code> tiene un tamaño de fuente y tipo de fuente diferente al de la etiqueta de encabezado básico y la etiqueta de párrafo. La etiqueta <pre> se usa para mostrar fragmentos de código porque siempre mantiene el formato del texto tal como está.
Algunos puntos sobre la etiqueta <code>:
- Se utiliza principalmente para mostrar el fragmento de código en el navegador web.
- Esta etiqueta diseña su elemento para que coincida con el formato de texto predeterminado de la computadora.
- Los navegadores web utilizan de forma predeterminada una familia de fuentes monoespaciadas para mostrar el contenido de los elementos de las etiquetas <code>.
Etiqueta <kbd> : es una etiqueta de frase y se usa para definir la entrada del teclado. El texto entre la etiqueta <kbd> representa un texto similar que debe escribirse en el teclado.
Sintaxis:
<kbd> Contents... </kbd>
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>The kbd tag</title>
<style>
body {
text-align:center;
}
</style>
</head>
<body>
<div class = "gfg">GeeksforGeeks</div>
<kbd>A computer</kbd>
<kbd>science</kbd>
<kbd>portal</kbd>
</body>
</html>
Producción:
Algunos puntos sobre la etiqueta <kbd>:
- El texto encerrado por la etiqueta <kbd> normalmente se muestra en la fuente monoespaciada predeterminada del navegador.
- Es posible lograr un efecto más rico con CSS
- No hay atributos específicos de etiqueta.
Etiqueta <pre> : La etiqueta <pre> en HTML se utiliza para definir el bloque de texto preformateado que conserva los espacios de texto, los saltos de línea, las tabulaciones y otros caracteres de formato que los navegadores web ignoran. El texto en el elemento <pre> se muestra en una fuente de ancho fijo, pero se puede cambiar usando CSS. La etiqueta <pre> requiere una etiqueta inicial y otra final.
Sintaxis:
<pre> Contents... </pre>
Ejemplo 1:
html
<!DOCTYPE html> <html> <head> <title>pre tag</title> </head> <body> <pre> GeeksforGeeks A Computer Science Portal For Geeks </pre> </body> </html>
Producción:
Ejemplo 2:
html
<!DOCTYPE html>
<html>
<head>
<title>pre tag with CSS</title>
<style>
pre {
font-family: Arial;
color: #009900;
margin: 25px;
}
</style>
</head>
<body>
<pre>
GeeksforGeeks
A Computer Science Portal For Geeks
</pre>
</body>
</html>
Producción:
Etiqueta <samp> : es una etiqueta de frase y se usa para definir el texto de salida de muestra de un programa de computadora. El elemento de muestra HTML se utiliza para encerrar texto en línea que representa la salida de muestra (o citada) de un programa de computadora.
Sintaxis:
<samp> Contents... </samp>
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>samp tag</title>
</head>
<style>
body {
text-align:center;
}
.gfg {
font-size:40px;
font-weight:bold;
color:green;
}
.geeks {
font-size:25px;
font-weight:bold;
}
</style>
<body>
<div class ="gfg">GeeksForGeeks</div>
<div class = "geeks"><samp> Tag</div>
<samp>A computer science portal for Geeks</samp>
</body>
</html>
Producción:
Etiqueta <var> : Es una etiqueta de frase y se usa para especificar la variable en una ecuación matemática o en un programa de computadora. El contenido de esta etiqueta se muestra en cursiva en la mayoría de los navegadores.
Sintaxis:
<var> Contents... </var>
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>var tag</title>
</head>
<style>
body {
text-align:center;
}
.gfg {
font-size:40px;
font-weight:bold;
color:green;
}
.geeks {
font-size:25px;
font-weight:bold;
}
</style>
<body>
<div class ="gfg">GeeksForGeeks</div>
<div class = "geeks"><var> Tag</div>
<var>GeeksforGeeks Variable</var>
</body>
</html>
Producción:
Navegador compatible:
- Google Chrome
- Borde de Microsoft
- Firefox
- Ópera
- Safari
Publicación traducida automáticamente
Artículo escrito por namankedia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA