Inicio / Directorio / Informática y Telecomunicaciones /

Fundamentos de HTML y Estructura de Documentos Web

Informática y Telecomunicaciones7,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:

  • ¡ : &iexcl;
  • ¿ : &iquest;
  • “ : &quot;
  • > : &gt;
  • < : &lt;
  • ® : &reg;
  • ñ : &ntilde;
  • Ñ : &Ntilde;
  • á : &aacute;
  • Á : &Aacute;
  • é : &eacute;
  • É : &Eacute;

Descargar

PDF Word HTML