Crea tu Web: Indice de diseño

El manual completo HTML en formato PDF
¡ sólo
4 €!
Tras confirmar el pago recibirá
el archivo en su email
  • Introducción al curso
    • Introducción
    • Requisitos
    • Agradecimiento
  • El HTML
    • Versiones de HTML
    • HTML 2.0
    • HTML 3.0 y 3.2
    • HTML 4.0
    • Estándares en este curso
  • Mi primera página
    • La primera página
    • El código
    • La explicación
    • El cuerpo del documento
  • El documento HTML
    • La página
    • La cabecera
    • El cuerpo
  • Formato del texto
    • Formato básico
    • Formato del párrafo
    • Las 6 cabeceras
    • Cambiando el tipo de letra
    • Formato de frase
    • Otros elemento
  • Tipos de letras
    • Formateo de texto
    • Cambio de color
    • Tamaños del texto
    • Tipo de letra
  • Caracteres especiales
    • Caracteres especiales
    • Caracteres extendidos
    • Caracteres de control
  • Enlaces web
    • Los enlaces
    • La etiqueta <A>
    • Las URLs
    • Anclas
  • Listas
    • Listas
    • Listas desordenadas
    • Listas ordenadas
    • Listas de definiciones
  • Imágenes
    • Imágenes
    • Imágenes y enlaces
    • Alineación respecto al texto
  • Formularios
    • Formularios
    • Cajas de texto
    • Opciones
    • Botones del formulario
    • Otros elemento
  • Formularios avanzados
    • Controles avanzados
    • Etiquetas
    • Agrupación de elementos
    • Desactivación de elementos
  • Mapas
    • Mapas
    • Mapas lado cliente
    • Cómo usar un mapa
  • Tablas
    • Tablas
    • Definir las filas
    • Definir las celdas
    • Título de la tabla
  • Marcos
    • Marcos
    • Etiqueta <FRAMESET>
    • Etiqueta <FRAME>
    • Acceso a otros marcos
  • Hojas de estilo (1)
    • Estilos CSS
    • Clases
    • Etiquetas <SPAN> y <DIV>
  • Hojas de estilo (2)
    • Referencia CSS
    • Propiedades de bloque
    • Propiedades de tipo de letra
    • Propiedades de formato del texto
    • Propiedades de color y fondo
    • Propiedades de clasificación
  • Los scripts
    • Los Scripts
    • Javascript
  • Capas
    • Las capas
    • Definición
    • Propiedades
  • Sonido
    • Sonido en la página
    • Sonido manual
    • Sonido de fondo
  • Trucos
    • Guía de estilo
      • Guía de estilo
      • Contenido
      • Navegación
      • Estructura de las páginas
      • Accesibilidad
      • Diseño
      • Mantenimiento y prueba
    • Enlaces de interés
      • Más HTML
      • Más JavaScript
      • HTML dinámico
      • Otras tecnologías
      El documento HTML
      Estructura del documento

      La estructura de un documento HTML se puede resumir así:

      tipo de documento
      <HTML>
      <HEAD>
        <TITLE>titulo de la página</TITLE>
        cosas que afectan a la página pero no a su contenido
      </HEAD>
      <BODY parámetros>
        contenido de la página
      </BODY>
      </HTML>

      En el tipo de documento deberemos especificar a que estándar del HTML responde nuestra página entre una de las siguientes opciones:

      <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
      Cumple el estándar HTML 2.0
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
      Cumple el estándar HTML 3.2
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
              "http://w3.org/TR/REC-html40/loose.dtd">
      Cumple el estándar HTML 4.0
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
              "http://w3.org/TR/REC-html40/strict.dtd">
      Cumple el estándar HTML 4.0 y no contiene además elementos desaconsejables
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"
              "http://w3.org/TR/REC-html40/frameset.dtd">
      Es una definición de marcos que cumple el estándar HTML 4.0

      El HTML 4.0 considera desaconsejables aquellos elementos que, aún siendo soportados, han sido sustituidos por otros más potentes y, por ello, es posible que sean eliminados del estándar HTML en el futuro.

      arriba


      La cabecera

      Suele ser el lugar más indicado para colocar aquellos elementos de la página que no alteren el contenido de la misma, aunque si la forma de presentarlo y su comportamiento. Es por eso que es el lugar más recomendable para colocar los scripts y las hojas de estilo, como veremos en los capítulos correspondientes.

      Hay también otro elemento interesante que podremos incluir en nuestras cabeceras. Cuando especificamos una URL relativa en un enlace, en principio es para acceder a una página situada en nuestro mismo servidor. Sin embargo, si especificamos:

      <BASE HREF="http://www.misitio.com/">

      Ahora todas nuestras URLs relativas se encontrarán dentro del servidor http://www.misitio.com

      arriba


      Meta Name

      Además del título de la página, uno de los elementos que se pueden incluir aquí son los META. Entre otras cosas, sirven para indicar propiedades de la página como pueda ser el nombre de su autor. Por ejemplo,

      <META NAME="GENERATOR" CONTENT="Mozilla/4.03 [es] (Win95; I) [Netscape]">

      nos indicaría la herramienta con que hemos creado la página (en este caso la versión 4.03 en español para Windows 95 del Composer de Netscape). Como veréis el uso es muy simple, en NAME colocamos el nombre de la etiqueta y en CONTENT colocamos su valor, ambos entre comillas y con el signo igual por delante.
      Estas son las propiedades más comunes:

      Name Content
      AUTHOR Autor de la página.
      CLASSIFICATION Palabras que permite clasificar la página dentro de un buscador jerárquico (como Yahoo).
      KEYWORDS Palabras clave por las que encontrarán la página en los buscadores. Google no le hace mucho caso.
      GENERATOR Herramienta utilizada para hacer la página.
      DESCRIPTION Descripción del contenido de la página. Google le hace algún caso.
      arriba


      Meta http-equiv

      Son etiquetas usadas también para dar información al navegador y complementan las etiquetas Meta vistas en el apartado anterior. En algunos casos existen etiquetas Meta Name y http-equiv similares. Su uso es similar a las etiquetas Meta Name, por ejemplo:

      <META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">

      La única diferencia está en que en lugar de NAME usamos HTTP-EUIV, el resto es igual. Cuando el contenido conste de más de varios valores, estos se separan con ; (punto y coma). Veamos algunos tipos:

      HTTP-EQUIV CONTENT
      expires Fecha desde la que la página debe ser recargada por los navegadores
      pragma El contenido debe ser no-cache y sirve para que el navegador no guarde la página en el ordenador del internauta.
      Content-Language Idioma en el que está escrita la página. Se usan las iniciales como: es_ES: español España, en_US: ingles americano...
      Refresh Indica al navegador el tiempo (en segundos) que debe esperar para recargar la página automáticamente y la página a la que debe ir. Ambos datos se separan con un punto y coma.
      Content-Type Tipo de documento y juego de caracteres usado. Lo habitual es colocar el valor:
      text/html; charset=iso-8859-1
      Si n o se usa los caracteres especiales (letras acentuadas, ñ) pueden quedar ilegibles .
      arriba


      El cuerpo

      El cuerpo es el contenido de la página propiamente dicho, o sea, lo que se ve, en el es donde colocarán prácticamente todos los elementos que vamos a ir viendo por este manual. Los atributos que admite esta etiqueta <BODY>:

      BACKGROUND Coloca una imagen como fondo de la página.
      BGCOLOR Define el color de fondo de la página.
      BGPROPERTIESexplorer Cuando es igual a FIXED el gráfico definido como fondo de la página permanecerá inmóvil aunque utilicemos las barras de desplazamiento.
      TEXT Color del texto.
      LINK Color de un enlace no visitado (por defecto azul).
      VLINK Color de un enlace ya visitado (por defecto púrpura).
      ALINK Color que toma un enlace mientras lo estamos pulsando (por defecto rojo).
      LEFTMARGIN y TOPMARGINexplorer Número de pixels que dejará de margen entre el borde de la ventana y el contenido de la página.
      MARGINWIDTH y MARGINHEIGHTNetscape Equivalentes a los anteriores, pero éstos funcionan en Netscape.

      No resulta recomendable cambiar los colores del texto y enlaces a no ser que exista alguna dificultad al leerlos por haber cambiado el fondo, ya que en muchas ocasiones el usuario ha podido cambiarlos en las opciones de su navegador y estarán ya a su gusto.

      arriba


      Comunidad Virtual. Alojamiento gratis