Etiquetas básicas de HTML
En este artículo y video, veremos todo lo básico de la codificación HTML. Hay varias etiquetas que debemos considerar e incluir al comenzar a codificar HTML. Estas etiquetas ayudan en la organización y el formato básico de los elementos de nuestras páginas web.
Títulos en mi página HTML
Cualquier documento HTML comienza con un encabezado. Puedes usar diferentes tamaños para tus encabezados. HTML tiene seis niveles de encabezados, para los cuales puedes utilizar las siguientes etiquetas <h1></h1>, <h2></h2>, <h3></h3>, <h4></h4>, <h5></h5> y <h6></h6>.
Estas etiquetas tienen una etiqueta de apertura (<h1>) y una de cierre (</h1>). Así, el texto que se encuentra entre estas etiquetas se visualizará con un tamaño de texto concreto, siendo <h1> el tamaño más grande y <h6> el más pequeño.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de título</title>
</head>
<body>
<h1> Ejemplo de título h1</h1>
<h2> Ejemplo de título h2</h2>
<h3> Ejemplo de título h3</h3>
<h4> Ejemplo de título h4</h4>
<h5> Ejemplo de título h5</h5>
<h6> Ejemplo de título h6</h6>
</body>
</html>
Etiqueta de párrafo HTML
Estas etiquetas nos ayudan a escribir declaraciones de párrafos en una página web. Comienzan con la etiqueta de apertura <p> y terminan con la etiqueta de cierre </p> .
<!DOCTYPE html>
<html>
<head>
<title>EstradaWebGroup</title>
</head>
<body>
<h1>Hola EstradaWebGroup </h1>
<p>Curso de desarrollo web en EstradaWebGroup 1</p>
<p>Curso de desarrollo web en EstradaWebGroup 2</p>
<p>Curso de desarrollo web en EstradaWebGroup 3</p>
</body>
</html>
Etiqueta de salto de línea en HTML
Cada vez que utilizamos la etiqueta <br />, lo siga después de esta etiqueta comienza desde la siguiente línea. Esta etiqueta es un ejemplo de una etiqueta vacía, la cual no se necesita abrir y cerrar, ya que no hay nada entre ellas.
La etiqueta <br /> tiene un espacio entre los caracteres br y la barra diagonal. Si omites este espacio, los navegadores más antiguos tendrán problemas para identificar la etiqueta y por lo tanto no mostrará el salto de línea.
<!DOCTYPE html>
<html>
<head>
<title>Salto de Línea</title>
</head>
<body>
<p>Hola<br />
Este ejemplo es un salto de línea en el curso<br />
de HTML gratis<br />
en EstradaWebGroup</p>
</body>
</html>
Centrar contenido en HTML
Puedes usar la etiqueta <center> para colocar cualquier contenido en el centro de la página o dentro de algún contenedor, los contenedores los veremos más adelante.
<!DOCTYPE html>
<html>
<head>
<title>Centrar contenido</title>
</head>
<body>
<p> Este texto no está en el centro.</p>
<center>
<p>Este texto está en el centro del párrafo usando la etiqueta “p” en el curso de Estrada Web Group .</p>
</center>
</body>
</html>
Líneas horizontales en HTML
La etiqueta <hr> se usa para dividir la página en varias partes, creando márgenes horizontales con la ayuda de una línea horizontal que se extiende desde el lado izquierdo al lado derecho de la página. Esta también es una etiqueta vacía y no acepta ninguna declaración adicional.
<!DOCTYPE html>
<html>
<head>
<title>Curso gratuito de HTML - Ejemplo de línea horizontal </title>
</head>
<body>
<p> Este es el primer párrafo y debería estar arriba </p>
<hr />
<p> Este es el párrafo dos y debería estar al final, enseguida de la línea horizontal </p>
</body>
</html>
De nuevo, la etiqueta <hr /> es un ejemplo del elemento vacío, en el que no es necesario abrir y cerrar etiquetas, ya que no hay nada entre ellas.
El elemento <hr /> tiene un espacio entre los caracteres hr y la barra diagonal. Si omites este espacio, los navegadores más antiguos tendrán problemas para renderizar la línea horizontal, mientras que si omites el carácter de barra diagonal y solo usa <hr>, no es válido en XHTML.
Conservar formato HTML
A veces, deseas que el texto siga el formato exacto de cómo está escrito en el documento HTML. En estos casos, puedes utilizar la etiqueta preformateada <pre>.
Cualquier texto entre la etiqueta de apertura <pre> y la etiqueta de cierre </pre> mantendrá el formato del documento de origen. Es decir, el navegador web no interpretara este texto como HTML.
<!DOCTYPE html>
<html>
<head>
<title> Ejemplo conservar el formato</title>
</head>
<body>
<pre>
function testFunction( strText ){
alert (strText)
}
</pre>
</body>
</html>
Intenta usar el mismo código sin mantenerlo dentro de las etiquetas <pre> ... </pre>
Imágenes HTML
La etiqueta de imagen se utiliza para insertar una imagen en nuestra página web. La fuente de la imagen que se insertará se coloca dentro de la etiqueta <img src = "ruta_de_la_imagen"/>.
<!DOCTYPE html>
<html>
<head>
<title>EstradaWebGroup</title>
</head>
<body>
<img src="http://www.estradawebgroup.com//Content/images/logo@2x.png"/>
</body>
</html>
También hay otras etiquetas en HTML para insertar enlaces, audios y otras etiquetas de formato que aprenderemos en las secciones posteriores.
Si tienes observaciones o dudas envíanos tus comentarios, o si desea compartir más información sobre el tema tratado anteriormente.
Compartir:
Cargando...
Artículos recientes
-
-
¿Cuál es la estructura Básica de un documento html5?
06 febrero 2015 -
El elemento DOCTYPE de html5
26 enero 2015 -
.jpg)
Cómo dar formato a texto en HTML
12 abril 2019 -
Aprende HTML5 en 16 lecciones (Introducción)
11 marzo 2020
