Fundamentos de HTML y Estructura de Documentos Web

Enviado por Chuletator online y clasificado en Informática y Telecomunicaciones

Escrito el 1 de Febrero de 2026 en español con un tamaño de 7,24 KB

Introducción al Lenguaje HTML

HTML (HyperText Markup Language) es un lenguaje que permite describir hipertexto, es decir, texto estructurado en el que se incluyen hiperenlaces, objetos multimedia u otros elementos de información relacionados.

Estructura Básica de una Página Web

El código mínimo para escribir una página web será:

<html>
  <head>
    (Elementos de la cabecera)
  </head>
  <body>
    (Contenido del documento)
  </body>
</html>

Etiquetas de Estructura Global

<html></html>: Abre y cierra un documento HTML.
<head></head>: Encabezado de la página. Aquí se coloca el título, metatags e información para buscadores, entre otras cosas. Esta información no es visible (no es estrictamente necesario para la visualización).
<body></body>: Dentro de esta etiqueta va toda la parte visible de la página web.

Etiquetas del Encabezado (<head>)

<title></title>: Define el título de la página web que aparece en la pestaña del navegador.

Atributos de la Etiqueta <body>

<body bgcolor=?>: Configura el color de fondo de la página, usando el valor del código de color hexadecimal o nombre.
<body background=?>: Incluye una imagen de fondo.
<body text=?>: Configura el color por defecto del texto, usando el valor del código de color hexadecimal o nombre.
<body link=?>: Configura el color de los enlaces.
<body vlink=?>: Configura el color de los enlaces visitados.
<body marginwidth=?>: Configura los márgenes horizontales en píxeles.
<body marginheight=?>: Configura los márgenes verticales en píxeles.

Etiquetas HTML de Texto

<h1></h1>: Título de mayor jerarquía (más grande).
<h6></h6>: Título de menor jerarquía (más pequeño).
<b></b>: Aplica formato de negrita.
<u></u>: Aplica subrayado.
<i></i>: Aplica cursivas.
<s></s>: Aplica tachado.
<font face=?></font>: Permite definir el tipo de letra.
<font size=?></font>: Permite definir el tamaño de la letra (en una escala de 1 a 7).
<font color=?></font>: Configura el color de la fuente.

Enlaces e Hipervínculos

<a href="URL"></a>: Permite crear un hipervínculo o enlace hacia otra dirección.

Formato y Presentación

<p></p>: Define un nuevo párrafo.
<div align=?></div>: Alinea el párrafo (izquierda, derecha o justificado).
<center></center>: Permite centrar todo el contenido que engloba.
<br>: Inserta un salto de línea.
<hr>: Inserta una línea horizontal divisoria.

Listas

<ol></ol>: Lista ordenada. Puede tener atributos como type, start o value.
<ul></ul>: Lista con viñetas (sin ordenar). Atributos type (circle, disc o square).
<dl></dl>: Lista de definiciones.
<li></li>: Define una entrada o ítem dentro de una lista.

Elementos Gráficos

<img src="nombre">: Incorpora una imagen al documento.
<img src="nombre" align=?>: Permite definir la alineación de la imagen.

Tablas

<table></table>: Crea una tabla.
<tr></tr>: Crea las filas de una tabla.
<td></td>: Crea una celda dentro de una fila.

Atributos de las Tablas

<table border=#>: Coloca el contorno en las celdas de una tabla.
<table cellspacing=#>: Define el espacio entre las celdas de una tabla.
<table cellpadding=#>: Define el espacio entre el contorno de una celda y su contenido.
<table width=# or %>: Define el ancho de la tabla.
<table height=# or %>: Define el alto de la tabla.
<tr align=?> o <td align=?>: Define la alineación horizontal para las celdas (izquierda, derecha...).
<tr valign=?> o <td valign=?>: Define la alineación vertical de las celdas (arriba, abajo...).
<td colspan=#>: Expansión de una celda en número de columnas.
<td rowspan=#>: Expansión de una celda en número de filas.
<td nowrap>: Mantiene el texto continuo dentro de la celda sin saltos automáticos.

Ejemplos de Imagen, Video y Sonido

Incorpora una imagen.
Inserta un video que se visualiza al hacer clic con el ratón.
Inserta un sonido y lo reproduce dos veces.
Inserta un video desde plataformas externas como YouTube o Vimeo.

Otros Elementos

Inserta comentarios no visibles en la página web.

Caracteres Especiales

Para mostrar ciertos caracteres, se utilizan las siguientes entidades:

¡ : ¡
¿ : ¿
“ : "
> : >
< : <
® : ®
ñ : ñ
Ñ : Ñ
á : á
Á : Á
é : é
É : É

Entradas relacionadas:

Etiquetas: