HTML

Introducción

HTML representa Hyper Text Markup Language.Es un lenguaje de formato que se utiliza para definir la apariencia y el contenido de una página web. Nos permite organizar texto, gráficos, audio y video en una página web.

Key Points:

  • La palabra hipertexto se refiere al texto que actúa como enlace.

  • El marcado de palabras se refiere a los símbolos que se utilizan para definir la estructura del texto. Los símbolos de marcado le indican al navegador cómo mostrar el texto y, a menudo, se denominan etiquetas.

  • La palabra Idioma se refiere a la sintaxis similar a cualquier otro idioma.

HTML fue creado por Tim Berners-Lee a CERN.

Versiones HTML

La siguiente tabla muestra las distintas versiones de HTML:

Versión Año
HTML 1.0 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.0 1999
XHTML 2000
HTML5 2012

Etiquetas HTML

Tag es un comando que le dice al navegador web cómo mostrar el texto, audio, gráficos o video en una página web.

Key Points:

  • Las etiquetas se indican con un par de paréntesis angulares.

  • Comienzan con un carácter menor que (<) y terminan con un carácter mayor que (>).

  • El nombre de la etiqueta se especifica entre paréntesis angulares.

  • La mayoría de las etiquetas suelen aparecer en pares: la etiqueta inicial y la etiqueta de cierre.

  • La etiqueta de inicio es simplemente el nombre de la etiqueta entre corchetes angulares, mientras que la etiqueta de cierre se especifica con una barra inclinada (/).

  • Algunas etiquetas están vacías, es decir, no tienen la etiqueta de cierre.

  • Las etiquetas no distinguen entre mayúsculas y minúsculas.

  • El nombre de la etiqueta inicial y final debe ser el mismo. Por ejemplo, <b> hola </i> no es válido porque ambos son diferentes.

  • Si no especifica los corchetes angulares (<>) para una etiqueta, el navegador tratará el nombre de la etiqueta como un texto simple.

  • La etiqueta también puede tener atributos para proporcionar información adicional sobre la etiqueta al navegador.

Etiquetas básicas

La siguiente tabla muestra las etiquetas HTML básicas que definen la página web básica:

Etiqueta Descripción
<html> </html> Especifica el documento como una página web.
<head> </head> Especifica la información descriptiva sobre los documentos web.
<title> </title> Especifica el título de la página web.
<body> </body> Especifica el cuerpo de un documento web.

El siguiente código muestra cómo utilizar etiquetas básicas.

<html>
   <head> Heading goes here…</head>
   <title> Title goes here…</title>
   <body> Body goes here…</body>
</html>

Etiquetas de formato

La siguiente tabla muestra las etiquetas HTML utilizadas para formatear el texto:

Etiqueta Descripción
<b> </b> Especifica el texto en negrita. P.ej.this is bold text
<em> </em> Es un texto de frase. Especifica el texto enfatizado. P.ej. Texto enfatizado
<strong> </strong> Es una etiqueta de frase. Especifica un texto importante. P.ej. this is strong text
<i> </i> El contenido de la etiqueta en cursiva se muestra en cursiva. P.ej. Texto en cursiva
<sub> </sub> Especifica el texto con subíndice. P.ej. X 1
<sup> </sup> Define el texto en superíndice. P.ej. X 2
<ins> </ins> Especifica el texto insertado. P.ej. El precio de la pluma es ahora2015.
<del> </del> Especifica el texto eliminado. P.ej. El precio de la pluma es ahora2015.
<mark> </mark> Especifica el texto marcado. P.ej. Eslloviendo

Etiquetas de tabla

La siguiente tabla describe las etiquetas de tabla comúnmente utilizadas:

Etiqueta Descripción
<tabla> </tabla> Especifica una tabla.
<tr> </tr> Especifica una fila en la tabla.
<th> </th> Especifica la celda de encabezado en la tabla.
<td> </td> Especifica los datos en una celda de la tabla.
<caption> </caption> Especifica el título de la tabla.
<colgroup> </colgroup> Especifica un grupo de columnas en una tabla para formatear.

Etiquetas de lista

La siguiente tabla describe las etiquetas de lista comúnmente utilizadas:

Etiqueta Descripción
<ul> </ul> Especifica una lista desordenada.
<ol> </ol> Especifica una lista ordenada.
<li> </li> Especifica un elemento de la lista.
<dl> </dl> Especifica una lista de descripción.
<dt> </dt> Especifica el término en una lista de descripción.
<dd> </dd> Especifica la descripción del término en una lista de descripción.

Marcos

Framesayúdanos a dividir la ventana del navegador en múltiples regiones rectangulares. Cada región contiene una página web html separada y cada una de ellas funciona de forma independiente.

Un conjunto de marcos en todo el navegador se conoce como conjunto de marcos. Le dice al navegador cómo dividir la ventana del navegador en marcos y las páginas web que cada uno tiene que cargar.

La siguiente tabla describe las diversas etiquetas utilizadas para crear marcos:

Etiqueta Descripción
<frameset> </frameset> Es un reemplazo de la etiqueta <body>. No contiene las etiquetas que se utilizan normalmente en el elemento <body>; en su lugar, contiene el elemento <frame> utilizado para agregar cada marco.
<frame> </frame> Especifica el contenido de diferentes marcos en una página web.
<base> </base> Se utiliza para establecer el marco de destino predeterminado en cualquier página que contenga enlaces cuyo contenido se muestre en otro marco.

Formularios

Formsse utilizan para ingresar los valores. Estos valores se envían al servidor para su procesamiento. Los formularios utilizan elementos de entrada como campos de texto, casillas de verificación, botones de opción, listas, botones de envío, etc. para introducir los datos en ellos.

La siguiente tabla describe las etiquetas de uso común al crear un formulario:

Etiqueta Descripción
<form> </form> Se utiliza para crear formularios HTML.
<input> </input> Especifica el campo de entrada.
<textarea> </textarea> Especifica un control de área de texto que permite ingresar texto de varias líneas.
<label> </label> Especifica la etiqueta de un elemento de entrada.