Fundamentos de la World Wide Web y Creación de Documentos HTML

1. Introducción a Internet y la Web

Términos Fundamentales en el Diseño Web

World Wide Web (WWW)

Sistema de presentación de la información más utilizado en Internet. Sus características principales son:

Hipertexto: Texto o imagen que se muestra en la pantalla y está vinculado a otras páginas del mismo sitio o de sitios externos. Al situar el puntero del ratón sobre él, este toma el aspecto de una mano. Al hacer clic, se mostrará la página enlazada. Estos elementos son conocidos como enlaces.
Multimedia: Permite la integración de diversos formatos, incluyendo texto, imágenes, vídeos, audios y animaciones.
Universalidad: Permite el acceso desde cualquier tipo de equipo o sistema operativo (como Windows, Linux o Mac), utilizando cualquier navegador y desde cualquier parte del mundo.
Pública: La información está distribuida en miles de ordenadores (servidores) que ofrecen su espacio para almacenarla. Es información pública y normalmente accesible por cualquier usuario.
Dinámica: Gran cantidad de información puede ser actualizada por el público que la consulta sin que el usuario necesite conocer detalles técnicos. Esto se logra mediante páginas activas o dinámicas (ejemplos: ASP, PHP o JSP).

Navegador

Programa que se utiliza para acceder a los contenidos de Internet. Debe ser capaz de comunicarse con un servidor y comprender el lenguaje de todas las herramientas que manejan la información de la Web. Algunos navegadores populares son: Mozilla Firefox, Google Chrome, Internet Explorer, Opera y Safari.

Servidor

Ordenador encargado de proporcionar al cliente los documentos y medios que este solicita.

HTTP (HyperText Transfer Protocol)

Protocolo de comunicación utilizado para transmitir las peticiones y archivos a través de Internet entre el servidor y el navegador. El esquema http:// se indica al inicio de la dirección; si no se teclea este prefijo, el navegador lo añade automáticamente.

URL (Uniform Resource Locator)

Dirección única donde se encuentra un recurso específico en Internet (Ejemplo: www.google.es/index.html). Si no se indica la página HTML específica a la que se desea acceder, el servidor enviará la página índice (index) o la página configurada por defecto (default).

El Proceso de Navegación por Internet

Durante la navegación, se siguen los siguientes pasos:

El usuario teclea la URL en la casilla de dirección del navegador y pulsa Enter.
La petición se dirige a los servidores DNS (Domain Name System) que traducen esta URL a una dirección IP. Por ejemplo: www.ejemplo.com se traduce a 195.53.123.85. Es posible escribir la dirección IP directamente en el navegador y obtener el mismo resultado.
La petición llega al servidor que tiene asignada esa dirección IP.
El servidor devuelve la página solicitada.
El archivo HTML y los elementos multimedia asociados se almacenan temporalmente en la carpeta caché del equipo cliente. Una vez descargados estos archivos, el usuario puede visualizar la página y todos sus elementos.

2. Fundamentos del Lenguaje HTML

HTML y su Estructura

HTML (HyperText Markup Language): Lenguaje en el que se diseñan las páginas que se visualizan a través del navegador. Se basa en etiquetas (instrucciones que le indican al navegador cómo deben mostrarse los elementos) y atributos (parámetros que dan valor o modifican el comportamiento de la etiqueta). Una página HTML contiene texto con un formato específico y referencias a archivos externos que contienen imágenes, sonidos, animaciones, etc.
Archivo HTML: El lenguaje HTML se utiliza para definir un documento que se visualizará a través del navegador. Este documento se guarda en un archivo con extensión .htm o .html. Los documentos escritos en HTML constan de texto y etiquetas, las cuales permiten definir el formato del texto, el título que se mostrará en la barra de título del navegador, los elementos multimedia que aparecerán incrustados en el documento pero que se almacenan en archivos externos, etc. Todo documento HTML tiene la siguiente estructura básica: cabecera y cuerpo del documento.

Estructura Básica de Etiquetas

<html>: Indica el inicio del documento HTML.
<head>: Incluye la cabecera del documento, donde se define el título de la página (mediante la etiqueta <title>...</title>) y otra información meta.
<body>: Contiene la información visible y el contenido principal que el usuario verá en la ventana del navegador.

Mi Primer Documento HTML

A continuación, se detallan los pasos para crear y visualizar un documento HTML básico:

Abre el Bloc de Notas de Windows mediante: Inicio > Todos los programas > Accesorios > Bloc de Notas. En Ubuntu, puedes utilizar el procesador de textos mediante: Aplicaciones > Accesorios > Procesador de textos.
En un documento nuevo, escribe el código HTML necesario (Nota: El código fuente a escribir debe ser proporcionado aquí).
Selecciona Archivo > Guardar como. Se mostrará el cuadro de diálogo de guardado.
En la lista desplegable Guardar en:, elige la carpeta donde deseas almacenar este documento.
Introduce el nombre del archivo, asegurándote de añadirle la extensión .htm. Ejemplo: prueba.htm.
Pulsa el botón Guardar.
Cierra la ventana del Bloc de Notas.
Dirígete a la carpeta donde has guardado tu archivo HTML (por ejemplo, Documentos). Encontrarás un archivo con el icono de un documento HTML y el nombre que has elegido.
Haz doble clic sobre el icono de este archivo. Se abrirá el navegador configurado por defecto en tu equipo, mostrando el contenido de esta página HTML.
Observa que en la barra de título del navegador aparece el texto que has encerrado entre las etiquetas <title> y </title>, y en el documento en blanco, el texto que has incluido entre las etiquetas <body> y </body>.