Diseño Web

Elaboración de páginas web: Lenguaje HTML

Arquitectura cliente/servidor -Introducción al lenguaje HTML - Principales elementos del lenguaje html - Creación de documentos HTML - Cabecera del documento - Creación de encabezados, estilos y párrafos - Creación de enlaces y vínculos - Creación de listas - Creación de tablas - Añadir imágenes

HTML AVANZADO:

Creación de páginas basadas en marcos o frames - Creación de formularios y scripts CGI - Envío y gestión de información

Arquitectura cliente/servidor

Antes de comenzar a explicar la estructura de las páginas web y el lenguaje html, es importante tener claro en que consiste la arquitectura cliente/servidor en la que se basan tanto las redes locales como la propia Internet

Pensar en una red clásica de pescadores es bastante gráfico para comprender la estructura de la Red. En ella, se pueden

diferenciar a simple vista dos elementos que se repiten: los nudos y los segmentos de malla que unen los distintos nudos.

Al hablar de Internet estamos hablando también de una red y los elementos que componen esa red son los nodos y los enlaces. La estructura de Internet no es tan regular como una red de pescadores, si bien se pretende tener conectividad entre todos los nodos, es decir, lo ideal es tener la posibilidad de encontrar al menos dos rutas o caminos (path en inglés) entre dos nodos cualesquiera. Uno de ellos será el nodo origen de los mensajes mientras que el otro será el nodo destino.

Los nodos no son más que ordenadores dedicados a encaminar los paquetes hacia su destino, eligiendo el enlace más

adecuado en cada momento. Estos nodos reciben el nombre de enrutadores (ROUTERS), y serían algunos de los nudos de

la parte interna/central de la red de pesca. Igualmente, nosotr@s al conectarnos utilizamos un ordenador, que si bien también

es un nodo de la red se le denomina HOST (tu ordenador).

Los enlaces son las conexiones físicas entre nodos y están formados por un conjunto de circuitos de datos en forma de hilos

telefónicos, fibras ópticas, microondas y demás soportes propios de Telecomunicaciones. La información, se divide en trozos

de un número determinado de caracteres. A cada trozo de estos, denominado paquete, se le asocia información de

enrutamiento, y se envía por un enlace. Es decir, cuando se establece una conexión internet, tu equipo queda conectado por un enlace a la red.

Existen una serie de ordenadores que están conectados a la red con el objeto de ofrecer y proporcionar alguna clase de

servicio a todo aquel que se lo pida. Estos ordenadores son también nodos de la red y se denominan servidores

(SERVERS).

Para poder acceder a los recursos que ofrece un servidor se necesita un tipo de programa específico, denominado programa

cliente, que debes ejecutar en tu ordenador y que es el encargado de mantener el diálogo con el programa servidor. Se dice

que estamos en una arquitectura cliente / servidor, en la que el programa servidor corre en el ordenador que ofrece algúnrecurs o (server) y el programa cliente en el ordenador de aquél que lo reclama (host). Los programas navegadores (Netscape, Explorer) son clientes que piden páginas a diversos servidores que existen en la red.

Introducción al HTML

Cuando tu programa navegador (cliente) pide una página web al servidor, éste le envía un fichero de texto (con extensión htm o html) en lenguaje html que tu programa (netscape o explorer) se encarga de "traducir" para que puedas visualizar correctamente en el navegador la página web solicitada incluyendo texto, fondos, gráficos, etc.

El HTML (HipertText Markup Language) ó Lenguaje de enlaces hipertexto es un sistema que se encarga de definir tipos de documentos estructurados y lenguajes de marcas para representar esos mismos documentos. El término HTML se suele referir a ambas cosas, tanto al tipo de documento como al lenguaje de marcas.

Como cualquier página web está soportada por un fichero de texto, se pueden elaborar, editar o modificar directamente con el bloc de notas o el wordpad de Windows 95, aunque existen programas editores de páginas web a la venta como HotDog ó Front Page y programas gratuitos de edición básica como Netscape Composer, que permiten editarlas con algunas funciones automatizadas a través de botones y menús.

Elementos del lenguaje HTML

Caracteres :

• Cualquier cadena de caracteres imprimibles que no represente un marcado se representa literalmente, aunque los espacios y tabuladores se reducen a un solo carácter cuando no están dentro de un bloque preformateado.

Marcadores, marcas o etiquetas (tags) :

• Los marcadores delimitan elementos de un documento como cabeceras, párrafos, etc. La mayoría de los marcadores constan de una marca inicial < ...> , que da el nombre y atributos del elemento, seguida del contenido ó secuencia de caracteres y una marca final</...>.

• Las marcas iniciales se escriben entre los símbolos "<" y ">" (menor y mayor) y las finales entre "</" y ">" (menor barra y mayor). Por ejemplo, <H1>Contenido</H1>, indica que "Contenido" es una cabecera de nivel uno.

• Algunos elementos sólo tienen una marca inicial (por ejemplo la marca <HR> que representa una línea horizontal) y otros, aunque disponen de ambas, se suelen expresar sólo con la inicial.

Nombres de etiquetas :

• Los nombres consisten en una letra seguida de letras, dígitos, puntos o guiones. Los ejemplos H1 y HR anteriores son ejemplos de nombres de etiquetas. La longitud de un nombre esta limitada a 72 caracteres en la definición del HTML. Los nombres de elementos y atributos no distinguen entre mayúsculas y minúsculas, pero los nombres de entidades (la representación alternativa de los caracteres) sí.

• En las marcas, el nombre del elemento debe comenzar inmediatamente después del <.

Atributos :

• Cuando una marca inicial admite atributos, éstos se escriben a continuación del nombre del elemento. Generalmente los atributos tienen la forma nombre, signo igual, valor del atributo aunque en algunos casos basta con el nombre del atributo. Se pueden poner espacios en blanco antes y después del signo igual.

• El valor de un atributo puede ser una cadena de caracteres entre comillas (simples o dobles) que no contenga el símbolo de fin de marca ">" o un nombre como los definidos en el apartado anterior. Por ejemplo, en <img src="foto.gif">, img src es el nombre de la marca que se refiere a insertar una imagen en la página web; y "foto.gif" es el atributo que hace referencia al fichero específico de imagen que queremos incluir.

Comentarios :

• Para incluir comentarios en HTML se emplea la declaración de comentarios. Una declaración de comentarios comienza con <!, le siguen uno o varios comentarios y termina con >. Cada comentario comienza con -- e incluye todo el texto hasta la siguiente aparición de -- . Dentro de una declaración de comentarios, se pueden poner espacios en blanco después de cada uno de ellos, pero no antes del primero. Toda la declaración del comentario se ignora. En páginas web complejas, con abundante código html, se utilizan estos comentarios para señalar partes de la página web que sirvan de orientación para ubicarse dentro del documento. Por ejemplo, en <!--Aquí empieza el texto--> está señalando una parte de la página web en la que empieza el grueso del texto de la página.

• Esta etiqueta se visualiza dentro del código html pero no tiene una traducción hacia el formato final. Es decir, no se visualiza en el navegador cliente y sólo se puede ver si utilizamos la opción Ver/Origen de la Página (en Netscape)

Creación de documentos HTML

• Los documentos HTML son archivos de texto legibles ASCII con códigos de composición especiales embebidos o incorporados en el texto. Esto significa que los archivos HTML contienen letras, números, signos de puntuación, etc., más los códigos de composición HTML. Insistimos, se pueden leer o modificar directamente desde el bloc de notas.

• Aunque no es obligatorio, es muy útil utilizar la extensión .HTM al archivar el documento HTML desde el bloc de notas. Así podrás saber luego de que tipo de documento se trata. Si utilizas un procesador de texto normal debes utilizar la opción Guardar como texto ASCII.

Aspecto de documentos HTML:

• Lo que distingue a un archivo HTML de cualquier otro archivo de texto es la presencia de códigos de composición, denominados marcadores HTML. Estos códigos se incluyen en el documento y sirve para controlar el formato y la presentación del documento final. Los códigos también sirven para crear hipervínculos con otros documentos.

• Los códigos de composición se acotan con unos caracteres especiales, que permiten diferenciarlos del texto del documento propiamente dicho. Estos símbolos son los corchetes angulares < y >. Estos códigos no distinguen entre mayúsculas y minúsculas aunque la mayoría de los autores utilizan mayúsculas para distinguirlos del resto del texto.

• Los distintos navegadores muestran sus documentos de formas distintas: varía el color, el tipo de fuente, el tamaño, etc. Por lo tanto debes

...