Fundamentos Esenciales de HTML: Estructura y Etiquetas Clave para el Desarrollo Web

El Esquema General de una Página Web

El desarrollo de una página web se basa en la correcta utilización de las sentencias y etiquetas de HTML. A continuación, se presenta un listado de las etiquetas más comunes y sus atributos.

Configuración del Cuerpo del Documento (<body>)

La etiqueta <body> define el contenido visible de la página. Se le pueden aplicar los siguientes atributos (aunque muchos están obsoletos y se recomienda usar CSS):

• bgcolor="color": Color de fondo de página (usando nombre o código RGB).
• background="imagen": Poner una imagen de fondo. Importante: Utilizar rutas relativas y no absolutas.
• text="color": Indica el color del texto para todo el documento (usando nombre o código hexadecimal).

Para asegurar que los caracteres especiales (como acentos y la ñ) se muestren correctamente, se debe configurar la codificación en la cabecera del documento (<head>).

Listado de Etiquetas de Formato de Texto

<b> o <strong>

Texto en negrita. (Se recomienda <strong> por su valor semántico).

<i> o <em>

Texto escrito en cursiva. (Se recomienda <em> por su valor semántico).

<h1> a <h6>

Etiquetas de encabezado. <h1> es el tamaño más grande posible y <h6> es el tamaño más pequeño posible.

<br>

Esta etiqueta no tiene etiqueta de cierre (es vacía) y realiza un salto de línea.

<p>

Indica que todo el texto pertenece a un párrafo. Podemos dar atributos a la etiqueta como align, que tomará los valores left, center, right o justify.

<font size="7"> (Obsoleto)

Toma la fuente mayor posible.

<blockquote>

Realiza una sangría al texto por la derecha y la izquierda (utilizado semánticamente para citas).

<u>

Para que el texto esté subrayado.

<s> o <del>

Tacha el texto.

<sub>

Para subíndices.

<sup>

Para superíndices.

<center> (Obsoleto)

Para centrar el texto.

Elementos Multimedia y Estructurales

Inserción de Imágenes (<img>)

La etiqueta <img> se utiliza para poner una imagen en nuestro documento. Es una etiqueta vacía y requiere el atributo src. Podemos darle las siguientes características:

• width = [número | número%]: Toma valores numéricos (píxeles) o porcentuales.
• height = [número | número%]: Toma valores numéricos (píxeles) o porcentuales.
• alt="texto": Sirve para poner un texto alternativo si la imagen no se carga. Es fundamental para la accesibilidad y el SEO.

Línea Horizontal (<hr>)

Etiqueta para dibujar una línea en pantalla. Podemos darle las siguientes características:

• Color: Define el color.
• Size: Define el grosor de la línea.
• Width: Define la longitud horizontal, en número o porcentaje.
• Align: Posicionamiento (left, center y right).

Interactividad: Hipervínculos y Movimiento

Creación de Hipervínculos (<a>)

La etiqueta <a> se utiliza para realizar un hipervínculo a un documento de internet o a un recurso propio. Si el enlace es externo, es obligatorio incluir el protocolo http o https. El atributo principal es href.

Características:

• Target: Para indicarle dónde abrir la página. Por defecto, sustituye nuestra página. Los valores que podemos poner son:
  • _top: Abre el enlace en la ventana completa (saliendo de cualquier frame).
  • _blank: Abre el enlace en una pestaña o ventana nueva.
  • _parent: Abre el enlace en el marco padre.
  • _self: Abre el enlace en la misma ventana o marco. (Valor por defecto).

Marquesina (<marquee> - Obsoleto)

La etiqueta <marquee> se utiliza para escribir un letrero en movimiento en la pantalla. Esta etiqueta está obsoleta y no debe usarse en desarrollo moderno.

Características:

• Bgcolor: Pone color de fondo en lo que ocupa la marquesina.
• Direction: El sentido en que se mueve el texto (left, right, up, down).
• Behavior: Define el efecto sobre el texto. Los valores posibles son:
  • Alternate: Tiene un efecto rebote.
  • Slide: Se para al llegar al final de la pantalla.
  • Scroll: El movimiento es cíclico (es el valor por defecto).
• Height: La altura de la marquesina (número o porcentaje).
• Hspace: Realiza una sangría horizontal (espacio a la izquierda y derecha del contenido).
• Loop: Indicamos el número de veces a repetir.
• Scrolldelay: Indica la velocidad de las letras al moverse. Va más rápido si el valor numérico es más pequeño.
• Width: Define el ancho de la marquesina.