Diseño de páginas web mediante lenguaje HTML

Introducción

El HTML no es más que una aplicación SGML
(Standard Generalized Markup Language), un sistema para 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.

A medida que nos afianzamos en el manejo de internet
cada uno de nosotros pasa por tres etapas diferentes: Al
principio solamente conocemos unas pocas paginas, luego nos damos
cuenta que existen buscadores los cual lo hace mas interesante y
por ultimo nos damos cuenta que en Internet no solamente se puede
se puede ver la información sino que también se
puede publicar. ¿y qué otra manera más
fácil y más sencilla? Si Internet tiene acceso a
todos los rincones del mundo.

Para que varias personas se comuniquen es necesario que
éstas hablen un mismo idioma. El lenguaje que utilizan las
computadoras que están conectadas a Internet es HTML. A
través de esta monografía explicaremos que es HTML,
sus orígenes y el proceso de creación de una
página web.

PRIMERA PARTE

Introducción al
HTML

CAPITULO I

¿Qué es un
HTML?

• Definición de un HTML.

El HTML no es más que el lenguaje en el que se
escriben las páginas web, o mas concretamente es el
lenguaje con el cual se crean la mayoría de las
páginas web.

Los diseñadores utilizan el lenguaje HTML para
crear sus páginas web, y nuestros servidores muestran el
contenido de las páginas web luego de haber leído
su contenido HTML.

Eguíluz dice: El lenguaje HTML es un
estándar reconocido en todo el mundo y cuyas normas define
un organismo sin ánimo de lucro llamado World Wide Web
Consortium, más conocido como W3C. Como se trata de
un estándar reconocido por todas las empresas relacionadas
el mundo del Internet, una misma página HTML se visualiza
de forma muy similar en cualquier navegador de cualquier sistema
operativo. (p. 5).

Desde su creación el HTML es definido por muchas
entidades y también por el mismo W3C, como un
lenguaje universal utilizado exclusivamente para crear documentos
electrónicos de cualquier tipo.

• Orígenes del HTML.

El origen del HTML (HiperText Markup Language) se
remonta a 1980, cuando el físico Tim Berners-Lee,
trabajador del CERN (Organización Europea para la
Investigación Nuclear) propuso un nuevo sistema de
"hipertexto" para compartir documentos.

La primera descripción para HTML disponible
públicamente fue un documento llamado HTML Tags (Etiquetas
HTML), publicado por primera vez en Internet por Tim Berners-Lee
en 1991. Describe 22 elementos comprendiendo el diseño
inicial y relativamente simple de HTML. Trece de estos elementos
todavía existen en HTML 4.

La primera propuesta oficial para convertir HTML en un
estándar se realizo en 1993 por parte del organismo IETF
(Internet Engineering Task Foce). Aunque se consiguieron avances
significativos (en esta época se definieron las etiquetas
para imágenes, tablas y formularios) ninguna de las dos
propuestas de estándar, llamadas HTML y HTML+ consiguieron
convertirse en estándar oficial. El organismo IETF
organiza un grupo se trabajo de HTML en1995 y consigue publicar,
el 22 de septiembre de ese mismo año, el estándar
HTML 2.0. A pesar de su nombre, HTML 2.0 es el primer
estándar oficial de HTML. A partir de 1996, los
estándares de HTML los publica otro organismo de
estandarización llamado W3C (World Wide Web Cosortium). El
14 de Enero de 1997 se publicó la versión HTML 3.2
y es la primera recomendación de HTML publicada por W3C.
Esta versión incorpora los últimos avances de la
páginas web desarrolladas hasta 1996, como applets de Java
y texto que fluye alrededor de las imágenes.

El HTML 4.0 fue publicado el 24 de Abril de 1998 (siendo
una versión corregida de la publicación original
del 18 de Diciembre de 1997) y supuso un gran salto desde las
versiones anteriores. Entre sus novedades más destacadas
se encuentran la posibilidad de incluir pequeños programas
o scrips en las páginas web, las hojas de estilo CSS,
mejora la accesibilidad de las páginas diseñadas,
tablas complejas y mejoras en los formularios. El HTML 4.01 (la
última especificación oficial de HTML) se
publicó el 24 de Diciembre de 1999. Se trata de una
revisión y actualización de la versión HTML
4.0, pero lo que incluye novedades significativas. Desde la
publicación de HTML 4.01, se detuvo la actividad de
estandarización de HTML y el W3C se centro en el
desarrollo del estándar XHTML. Por este motivo, las
empresas Apple, Mozila y Opera mostraron en el año 2004 su
preocupación por la falta de interés del W3C en
HTML y decidieron organizarse e una nueva asociación
llamada WHATWG (Web Hipertext Application Technology Working
Group). En la actualidad la actividad del WHATWG se centra en el
futuro estándar HTML 5, cuyo primer borrador oficial se
publico en 22 de Enero de 2008. Debido a la fuerza de las
empresas que forman el grupo WHATWG y la publicación de
los borradores de HTML 5.0, en Marzo del 2007 el W3C
decidió retomar la actividad estandarizadora de
HTML.

Paralelamente a su actividad con HTML, W3C ha continuado
con la estandarización de XHTML, que es una versión
avanzada de HTML y basada en XML. La primera versión de
XHTML se denomina XHTML 1.0 y fue publicada el 26 de Enero de
2000 (y posteriormente se revisó el 1 de Agosto del 2002).
XHTML1.0 e una adaptación de HTML 4.01 al lenguaje XML,
así que mantiene todas sus etiquetas y
características, pero añade algunas restricciones y
elementos propios de XML. La versión XHTML 1.1 ya ha sido
publicada en forma de borrador y pretende modularizar XHTML.
También ha sido el borrador de XHTML 2.0, que
supondrá un cambio muy importante respecto a las
anteriores versiones de XHTML.

CAPITULO II

Características
Básicas

2.1. Estructura fundamental de un fichero
HTML.

2.2. Etiquetas.

El proceso de indicar las diferentes partes que componen
la información se denomina marcar (markup
en inglés). Cada una de las palabras que se emplean para
marcar el inicio y el final de una sección se denominan
etiquetas.

Aunque existen alguna excepciones, en general las
etiquetas se indican por pares y se forman de la siguiente
manera:

Eguíluz dice: HTML es un lenguaje de
etiquetas (también llamado lenguaje de marcado)
y las páginas web habituales están formadas por
cientos o miles de pares de etiquetas. De hecho, las letras "ML"
de la sigla HTML significan "markup language", que es
como se denominan en inglés a los lenguajes de
marcado. Además de HTML, existen muchos otros
lenguajes de etiquetas como XML, SGML, DocBook y MathML. (p.
10).

Una de las ventajas de estas etiquetas es que son muy
sencillos de leer y escribir tanto por las personas y por los
sistemas electrónicos, pero la principal desventaja es que
estas etiquetas pueden aumentar mucho el tamaño del
documento, es por eso que se usan etiquetas con nombres muy
cortos.

Por ejemplo, podemos mostrar la palabra "¡Hola!"
en cursiva de la siguiente forma:

2.3. Atributos.

HTML define 91 etiquetas que los diseñadores
puede utilizar para marcar los diferentes componentes de una
página web.

A pesar de que se trata de un número de etiquetas
muy grande, no es suficiente para crear páginas web
complejas.

Como no es viable crear una etiqueta por cada enlace
diferente, la solución consiste en personalizar las
etiquetas HTML mediante cierta información adicional
llamada atributos.

El primer enlace del ejemplo anterior no está
completamente definido, ya que no apunta a ninguna
dirección.

No todos los atributos se pueden utilizar en todas las
etiquetas. Por ello, cada etiqueta define su propia lista de
atributos disponibles. Además, cada atributo
también indica el tipo de valor que se le puede asignar.
Si el valor de un atributo no es válido, el navegador
ignora ese atributo.

Pero algunos de estos atributos son comunes a muchos o
casi todas las etiquetas, estos se dividen en cuatro grupos
según su funcionalidad:

• a) Atributos básicos: se pueden
  utilizar prácticamente en todas las etiquetas
  HTML.

La mayoría de páginas web actuales
utilizan los atributos id y class de forma masiva. Sin embargo,
estos atributos sólo son realmente útiles cuando se
trabaja con CSS y con Javascript.

• b) Atributos para
  internacionalización: los utilizan las
  páginas que muestran sus contenidos en varios idiomas
  o aquellas que quieren indicar de forma explítica el
  idioma de sus contenidos:

En las páginas XHTML, el atributo xml:lang tiene
más prioridad que lang y es obligatorio incluirlo siempre
que se incluye el atributo lang.

Como la palabra internacionalización es muy
larga, se suele sustituir por la abreviatura i18n (el
número 18 se refiere al número de letras que
existen entre la letra i y la letra n de la palabra
internacionalización).

• c) Atributos de eventos: sólo se
  utilizan en las páginas web dinámicas creadas
  con JavaScript.

Cada vez que un usuario mueve le ratón o pulsa
cualquier botón del ratón, se produce un evento en
el navegador. Utilizando JavaScript y los atributos anteriores,
es posible responder de forma adecuada a cada evento.

• d) Atributos para los elementos que pueden
  obtener el foco:

Eguíluz dice: Cuando el usuario selecciona un
elemento de la interfaz de una aplicación, se dice que
"el elemento tiene el foco del programa". Si por ejemplo
un usuario pincha con su ratón sobre un cuadro de texto y
comienza a escribir, ese cuadro de texto tiene el foco del
programa, llamado "focus" en inglés. Si el
usuario selecciona después otro elemento, el elemento
original pierde el foco y el nuevo elemento es el que tiene el
foco del programa. (p. 16).

Los elementos de las páginas web también
pueden obtener el foco de la aplicación y HTML define
algunos atributos específicos para controlar cómo
se seleccionan estos elementos.

Cuando se pulsa repetidamente la tecla del tabulador
sobre una página web, el navegador selecciona de forma
alternativa todos los elementos de la página que se pueden
seleccionar (principalmente los enlaces y los elementos de
formulario). El atributo tabindex permite alterar el orden en el
que se seleccionan los elementos, por lo que es muy útil
cuando se quiere controlar de forma precisa cómo se
seleccionan los campos de un formulario complejo.

Por su parte, el atributo accesskey permite establecer
una tecla para acceder de forma rápida a cualquier
elemento. Aunque la tecla de acceso rápido se establece
mediante HTML, la combinación de teclas necesarias para
activar ese acceso rápido depende del navegador. En el
navegador Internet Explorer se pulsa la tecla Alt + la tecla
definida; en el navegador Firefox se pulsa Alt + Shift + la tecla
definida; en el navegador Opera se pulsa Shift + Esc + la tecla
definida; en el navegador Safari se pulsa Ctrl + la tecla
definida.

En el resto de la documentación, se
emplearán las palabras "básicos", "i18n", "eventos"
y "foco" respectivamente para referirse a cada uno de los grupos
de atributos comunes definidos anteriormente.

• Sintaxis de las etiquetas.

El leguaje HTML original era muy permisivo en su
sintaxis, por lo que era posible escribir sus etiquetas y
atributos de muchas maneras diferentes.

La flexibilidad de HTML puede parecer un aspecto
positivo, pero el resultado final páginas con un
código HTML desordenado, difícil de mantener y muy
poco profesional. Pero XHTML, ha logrado introducir ciertas
normas para el mejor orden y mayor comprensión en el
código.

A continuación se muestran las cinco
restricciones básicas que introduce XHTML respecto a HTML
en la sintaxis de sus etiquetas:

La mayoría de etiquetas HTML encierran un
contenido de texto entre la etiqueta de apertura y la etiqueta de
cierre. Sin embargo, algunas etiquetas especiales llamadas
"etiquetas vacías" no necesitan encerrar
ningún texto.

Ejemplo correcto en XHTML:

SEGUNDA PARTE

Contenidos de Documento
HTML

CAPITULO III

Textos

La mayor parte del contenido de las páginas HTML
habituales está formado por texto, llegando a ser
más del 90% del código de la página. Por
este motivo es muy importante conocer los elementos y etiquetas
que define HTML para el manejo del texto.

Y para esto los párrafos son muy importantes, por
este motivo una de las etiquetas mas usadas en HTML es

, que permite definir los párrafos que conforman
un texto de una página.

3.1 Secciones.

Es habitual que las páginas se dividan en
diferentes secciones jerárquicas.

3.2. Marcado de textos.

Una vez estructurado el texto en párrafos y
secciones, el siguiente paso es el marcado de los elementos que
componen el texto. Los textos habituales están formados
por elementos como palabras en negrita o cursiva, anotaciones y
correcciones, citas a otros documentos externos, etc. HTML
proporciona varias etiquetas para marcar cada uno de los
diferentes tipos de texto.

Entre las etiquetas más usadas en el marcado de
textos tenemos:

Ejemplo:

Ejemplo:

3.3. Espacios en blanco y nuevas
líneas.

El aspecto más sorprendente del lenguaje HTML
cuando se desarrollan los primeros documentos es el tratamiento
especial de los "espacios en blanco" del texto. HTML
considera espacio en blanco a los espacios en blanco,
los tabuladores, los retornos de carro y el carácter de
nueva línea (ENTER o Intro).

Con el siguiente ejemplo entenderemos con más
caridad:

Como podemos observar en la imagen los dos
párrafos son idénticos, a pesar de que el segundo
contiene vario espacios en blanco. Esto de debe a que HTML ignora
los espacios en blanco sobrantes, es decir, todos los espacios en
blanco que no son espacios en banco que separan las
palabras.

No obstante, HTML proporciona varias alternativas para
poder incluir tantos espacios en blanco y tantas nuevas
líneas como sean necesarias dentro del contenido textual
de las páginas.

3.3.1. Nuevas líneas.

3.3.2. Espacios en blanco.

La solución al problema de los espacios en blanco
no es tan sencilla como el de las nuevas líneas. Para
incluir espacios en blanco adicionales, se debe sustituir cada
nuevo espacio en blanco por el texto   (es importante
incluir el símbolo (&) al principio y el
símbolo (;) al final).

Y tomando en cuenta el ejemplo anterior, le adicionamos
los espacios en blanco:

Pero ha excepción de estas dos últimas
etiquetas que vimos, también podemos utilizar la
etiqueta

la cual
nos muestra el texto tal y como se ha escrito.

Ejemplo:

3.4. Color en el texto.

Para que lo que escribamos en HTML sea de un color
específico que deseemos tenemos que especificar el color
deseado, ya sea especificando el color en ingles o poner de
manera hexadecimal.

Y la etiqueta para poner color a las letras
es:

A continuación tenemos algunos de lo colores
más usuales:

Pero para ponerle fondo a la página que
realizamos se debe escribir:

Colocar mal los colores de fondo en nuestras
páginas puede provocar problemas. ¿Qué
ocurría con los links o enlaces si colocáramos un
fondo de color azul?. Puesto que los links son azules cuando
todavía no se han pulsado puede ocurrir que no se puedan
leer con claridad o incluso que no se puedan distinguir en
absoluto del fondo.

Se puede imaginar todavía un caso peor si
decidiéramos colocar un fondo demasiado oscuro, tan oscuro
que no permitiera distinguir con claridad la información
que se presenta en pantalla. Podemos remediar esto eligiendo
nosotros mismos el color que queremos que tengan los links o
enlaces e incluso el texto, las etiquetas para hacer esto son las
siguientes:

CAPITULO IV

Listas

4.1. Listas desordenadas.

Las listas no ordenadas son las más sencillas y
también las que más se utilizan.

4.2. Listas ordenadas.

Las listas ordenadas son casi idénticas a las
listas no ordenadas, salvo que en este caso los elementos
relacionados se muestran siguiendo un orden determinado. Cuando
se crea por ejemplo una lista con las instrucciones de un
producto, es importante el orden en el que se realiza cada paso.
Cuando se muestra un índice o tabla de contenidos en un
libro, es importante el orden de cada elemento del
índice.

4.3. Listas de definición.

Las listas de definición apenas se utilizan en la
mayoría de páginas HTML. Su funcionamiento es
similar al de un diccionario, ya que cada elemento de la lista
está formado por términos y
definiciones.

CAPITULO V

Tablas

5.1. Tablas básicas.

Siendo esta una tabla muy sencilla, en los siguientes
ejemplos veremos tablas de mayor complejidad.

Ejemplos tales como fusión de
columnas:

En el ejemplo anterior, para fusionar filas se utilizo
la etiqueta:

Utilizando los atributos rowspan y colspan, es posible
diseñar tablas complejas como las que se muestran en los
siguientes ejemplos.

5.2. Tablas complejas.

Algunas tablas complejas están formadas por
más elementos que filas y celdas de datos. Así, es
común que las tablas más avanzadas dispongan de una
sección de cabecera, una sección de pie y varias
secciones de datos. Además, también es posible
agrupar varias columnas de forma lógica para poder aplicar
estilos similares a un determinado grupo de columnas.

Un ejemplo clásico de tablas avanzadas es el de
las tablas utilizadas en contabilidad, como por ejemplo la tabla
que muestra el balance de una empresa:

La siguiente imagen muestra una tabla avanzada con
cabecera, pie y una sección de datos:

Y el código HTML necesario para el ejemplo
es:

El código HTML necesario para el ejemplo anterior
es:

CAPITULO VI

Enlaces

Los enlaces se utilizan para ara establecer relacione
entre dos recursos. Aunque la mayoría de enlaces
relacionan página web, también es posible enlazar
otros recursos como imágenes, documentos y
archivos.

Pero como ya e menciono la mayoría de enlaces se
hacen en relación a otras páginas web.

6.1. Definición de URL.

Eguíluz dice: Antes de empezar a crear enlaces,
es necesario comprender y dominar el concepto de URL. El
acrónimo URL (del inglés Uniform Resource
Locator) hace referencia al identificador único de
cada recurso disponible en Internet. Las URL son esenciales para
crear los enlaces, pero también se utilizan en otros
elementos HTML como las imágenes y los formularios.
(p.48).

La URL de un recurso tiene dos objetivos
principales:

• Identificar de forma única a ese
  recurso.

• Permitir localizar de forma eficiente a ese
  recurso.

En primer lugar, las URL permiten que cada página
HTML publicada en Internet tenga un nombre único que
permita diferenciarla de las demás. De esta forma es
posible crear enlaces que apunten de forma inequívoca a
una determinada página.

Si se accede a la página principal de Youtube, la
dirección que muestra el navegador es:

http://www.youtube.com

El segundo objetivo de las URL es el de permitir la
localización eficiente de cada recurso de Internet. Para
ello es necesario comprender las diferentes partes que forman las
URL.

http://www.librosweb.es/xhtml/capitulo4.html

Las partes que componen la URL anterior son:

• Protocolo (http://): el mecanismo que debe utilizar
  el navegador para acceder a ese recurso.

• Servidor (www.librosweb.es): simplificando mucho su
  explicación, se trata del ordenador en el que se
  encuentra guardada la página que se quiere
  acceder.

• Ruta (/xhtml/capitulo4.html): camino que se
  debe seguir, una vez que se ha llegado al servidor, para
  localizar el recurso específico que se quiere
  acceder.

La mayoría de URL son tan sencillas como la URL
mostrada anteriormente. No obstante, existen URL complejas
formadas por más partes.

http://www.alistapart.com/comments/webstandards2008?page=5#42

Las cinco partes que forman la URL anterior
son:

Como las URL utilizan los caracteres :, =, & y /
para separar sus partes, estos caracteres están reservados
y no se pueden utilizar libremente. Además, algunos
caracteres no están reservados pero pueden ser
problemáticos si se utilizan en la propia URL.

6.2. Enlaces internos.

Son los enlaces que apuntan a un lugar diferente dentro
de la misma página. Este tipo de enlaces son esencialmente
utilizados en páginas donde el acceso a los contenidos
puede verse dificultado debido al gran tamaño de la misma.
Mediante estos enlaces podemos ofrecer al visitante la
posibilidad de acceder rápidamente al principio o final de
la página o bien a diferentes párrafos o
secciones.

Para crear un enlace de este tipo es necesario, aparte
del enlace de origen propiamente dicho, un segundo enlace que
será colocado en el destino. Veamos más claramente
como funcionan estos enlaces con un ejemplo sencillo:

Supongamos que queremos crear un enlace que apunte al
final de la página. Lo primero será colocar nuestro
enlace origen. Lo pondremos aquí mismo y lo escribiremos
del siguiente modo:

Como podemos ver, el contenido del enlace es el texto
"Ir abajo" y el destino, abajo, es un punto de la misma
página que todavía no hemos definido. Ojo al
símbolo #; es él quien especifica al navegador que
el enlace apunta a una sección en particular.

En segundo lugar, hay que generar un enlace en el
destino. Este enlace llevara por nombre abajo para poder
distinguirlo de los otros posibles enlaces realizados dentro de
la misma página. En este caso, la etiqueta que
escribiremos será ésta:

A decir verdad, estos enlaces, aunque útiles, no
son los más extendidos de cuantos hay. La tendencia
general es la de crear páginas (archivos) independientes
con tamaños más reducidos enlazados entre ellos por
enlaces locales (los veremos enseguida). De esta forma evitamos
el exceso de tiempo de carga de un archivo y la
introducción de exceso de información que pueda
desviar la atención del usuario.

Una aplicación corriente de estos enlaces
consiste en poner un pequeño índice al principio de
nuestro documento donde introducimos enlaces origen a las
diferentes secciones. Paralelamente, al final de cada
sección introducimos un enlace que apunta al índice
de manera que podamos guiar al navegante en la búsqueda de
la información útil para él.

6.3. Enlaces locales.

Enlaces HTML con otras páginas del mismo sitio
web.

Como hemos dicho, un sitio web esta constituido de
páginas interconexas. En el capitulo anterior hemos visto
como enlazar distintas secciones dentro de una misma
página. Nos queda pues estudiar la manera de relacionar
los distintos documentos HTML que componen nuestro sitio
web.

Para crear este tipo de enlaces, hemos de crear una
etiqueta de la siguiente forma:

Por regla general, para una mejor organización,
los sitios suelen estar ordenados por directorios. Estos
directorios suelen contener diferentes secciones de la
página, imágenes, sonidos…Es por ello que en
muchos casos no nos valdrá con especificar el nombre del
archivo, sino que tendremos que especificar además el
directorio en el que nuestro archivo.html esta
alojado.

Para aquellos que no saben como mostrar un camino de un
archivo, aquí van una serie de indicaciones que os
ayudaran a comprender la forma de expresarlos. No resulta
difícil en absoluto y con un poco de práctica lo
lograremos prácticamente sin pensar.

• Hay que situarse mentalmente en el directorio en el
  que se encuentra la página con el enlace.

• Si la página destino esta en un directorio
  incluido dentro del directorio en el que nos encontramos,
  hemos de marcar el camino enumerando cada uno de los
  directorios por los que pasamos hasta llegar al archivo y
  separándolos por el símbolo barra "/". Al final
  obviamente, escribimos el archivo.

• Si la página destino se encuentra en un
  directorio que incluye el de la página con el enlace,
  hemos de escribir dos puntos y una barra "../" tantas veces
  como niveles subamos en la arborescencia hasta dar con el
  directorio donde esta emplazado el archivo
  destino.

• Si la página se encuentra en otro directorio
  no incluido ni incluyente del archivo origen, tendremos que
  subir como en la regla 3 por medio de ".." hasta encontrar un
  directorio que englobe el directorio que contiene a la
  página destino. A continuación haremos como en
  la regla 2. Escribiremos todos los directorios por los que
  pasamos hasta llegar al archivo.

6.4. Enlaces externos, de correo y hacia
archivos.

Vemos tres tipos de enlaces. Los dirigidos a otras
páginas de otros webs, a direcciones de correo y a
ficheros externos.

Para acabar con los enlaces vamos a ver los
últimos 3 tipos de enlaces que habíamos
señalado.

Enlaces remotos

Son los enlaces que se dirigen hacia páginas que
se encuentran fuera de nuestro sitio web, es decir, cualquier
otro documento que no forma parte de nuestro sitio.

• a) Enlaces a direcciones de
  correo.

Los enlaces a direcciones de correo son aquellos que al
pincharlos nos abre un nuevo mensaje de correo electrónico
dirigido a una dirección de mail determinada. Estos
enlaces son muy habituales en las páginas web y resultan
la manera más rápida de ofrecer al visitante una
vía para el contacto con el propietario de la
página.

Para colocar un enlace dirigido hacia una
dirección de correo colocamos mailto: en el
atributo href del enlace, seguido de la dirección de
correo a la que se debe dirigir el enlace.

Nota: El visitante de la página
necesitará tener configurada una cuenta de correo
electrónico en su sistema para enviar los mensajes.
Lógicamente, si no tiene servicio de correo en el
ordenador no se podrán enviar los mensajes y este sistema
de contacto con el visitante no funcionará.

• b) Enlaces con archivos

Este no es un tipo de enlace propiamente dicho, pero lo
señalamos aquí porque son un tipo de enlaces muy
habitual y que presenta alguna complicación para el
usuario novato.

El mecanismo es el mismo que hemos conocido en los
enlaces locales y los enlaces remotos, con la única
particularidad de que en vez de estar dirigidos hacia una
página web está dirigido hacia un archivo de otro
tipo.

Si pinchamos un enlace de este tipo nuestro navegador
descargará el fichero, haciendo la pregunta típica
de "Qué queremos hacer con el archivo. Abrirlo o guardarlo
en disco".

Consejo: No colocar en Internet archivos
ejecutables directamente sino archivos comprimidos. Por dos
razones:

El archivo ocupará menos, con lo que será
más rápida su transferencia.

Al preguntar al usuario lo que desea hacer con el
fichero le ofrece la opción de abrirlo y guardarlo en
disco. Nosotros generalmente desearemos que el usuario lo guarde
en disco y no lo ejecute hasta que lo tenga en su disco duro. Si
se decido a abrirlo en vez de guardarlo simplemente lo
pondrá en marcha y cuando lo pare no se quedará
guardado en su sistema. Si los archivos están comprimidos
obligaremos al usuario a descomprimirlos en su disco duro antes
de ponerlos en marcha, con lo que nos aseguramos que el usuario
lo guarde en su ordenador antes de ejecutarlo.

Si queremos enlazar hacia otro tipo de archivo como un
PDF o un mundo VRML (Realidad virtual para Internet) lo seguimos
haciendo de la misma manera. El navegador, si reconoce el tipo de
archivo, es el responsable de abrirlo utilizando el conector
adecuado para ello. Así, si por ejemplo enlazamos con un
PDF pondrá el programa Acrobat Reader en funcionamiento
para mostrar los contenidos. Si enlazamos con un mundo VRML
pondrá en marcha el plug-in que el usuario tenga instalado
para ver los mundos virtuales (Cosmo Player por
ejemplo).

Este sería un ejemplo de enlace a un
documento PDF.

CAPITULO VII

Formularios

7.1 Definición de los
formularios.

Hemos visto anteriormente que podíamos, mediante
los enlaces, contactar directamente con un correo
electrónico. Sin embargo, esta opción puede
resultar en algunos casos poco versátiles si lo que
deseamos es que el navegante nos envíe una
información bien precisa. Es por ello que el HTML propone
otra solución mucho más amplia: Los
formularios.

Los formularios son esas famosas cajas de texto y
botones que podemos encontrar en muchas páginas web. Son
muy utilizados para realizar búsquedas o bien para
introducir datos personales por ejemplo en sitios de comercio
electrónico. Los datos que el usuario introduce en estos
campos son enviados al correo electrónico del
administrador del formulario o bien a un programa que se encarga
de procesarlo automáticamente.

Usando HTML podemos únicamente enviar el
formulario a un correo electrónico. Si queremos procesar
el formulario mediante un programa la cosa puede resultar un poco
más compleja ya que tendremos que emplear otros lenguajes
más sofisticados. En este caso, la solución
más sencilla es utilizar los programas prediseñados
que nos proponen un gran número de servidores de
alojamiento y que nos permiten almacenar y procesar los datos en
forma de archivos u otros formatos. Si nuestras páginas
están alojadas en un servidor que no nos propone este tipo
de ventajas, siempre podemos recurrir a servidores de terceros
que ofrecen este u otro tipo de servicios gratuitos para
webs.

Los años transcurridos desde la
publicación de los estándares de HTML y XHTML ha
provocado que no estén disponibles todos los elementos
utilizados por los formularios más avanzados y modernos.
No obstante, HTML/XHTML incluye los suficientes elementos de
formulario para crear desde los formularios sencillos que
utilizan los buscadores hasta los formularios complejos de las
aplicaciones más avanzadas.

7.2. Formularios básicos.

Y este código muestra lo siguiente en un
navegador cualquiera, un claro ejemplo de un formulario
simple.

La mayoría de formularios utilizan
sólo los atributos action y method. El atributo action
indica la URL de la aplicación del servidor que se encarga
de procesar los datos introducidos por los usuarios. Esta
aplicación también se encarga de generar la
respuesta que muestra el navegador.

El atributo method establece la forma en la
que se envían los datos del formulario al servidor. Este
atributo hace referencia al método HTTP, por lo que no es
algo propio de HTML. Los dos valores que se utilizan en los
formularios son GET y POST. De esta forma, casi todos los
formularios incluyen el atributo method="get" o el atributo
method="post".

7.3. Elementos de los formularios.

Los elementos de formulario como botones y
cuadros de texto también se denominan "campos de
formulario" y "controles de formulario".

A continuación se muestran ejemplos
para utilizar los controles que se pueden crear con la etiqueta

7.3.1. Cuadro te texto.

Se trata del elemento más utilizado en los
formularios. En el caso más sencillo se muestra un cuadro
vacio en el cual el usuario puede escribir cualquier
texto.

Y el código necesario para este
cuadro es:

En este código solo mostraremos solo
lo que nos interesa que es la parte del formulario.

Para los cuadros de texto, su valor es text. El atributo
name es el más importante en los campos del formulario. De
hecho, si un campo no incluye el atributo name, sus datos no se
envían al servidor. El valor que se indica en el atributo
name es el nombre que utiliza la aplicación del servidor
para obtener el valor de este campo de formulario.

El atributo value se emplea para establecer el valor
inicial del cuadro de texto. Si se crea un formulario para
insertar datos, los cuadros de texto deberían estar
vacíos. Por lo tanto, o no se añade el atributo
value o se incluye con un valor vacío value="". Si por el
contrario se crea un formulario para modificar datos, lo
lógico es que se muestren inicialmente los datos guardados
en el sistema. En este caso, el atributo value incluirá el
valor que se desea mostrar: