HTML avanzado
Introducción al Comercio Electrónico
Página principal del grupo GeNeura

Introducción a la creación de páginas web usando HTML

Crear páginas web es bastante simple; no hay más que ver el montón de ellas que hay, y la calidad media. Para crear una página web no hay más que meterse en un procesador de textos cualquiera (como el Lyx), y salvar el documento usando la opción "exportar a HTML", o "publicar página web". Si quieres meterte en más follones, búscate un editor de páginas web tal como el Netscape Composer, el Frontpage, o el DreamWeaver, que hace unas páginas web fenomenales. Sin embargo, en la mayor parte de los casos no quedan las páginas exactamente como uno quiere, y hay que meterse en el código. En este tutorial enseñaremos como meternos en ese código para tener un control completo sobre la apariencia de la página, cómo y donde publicarla, qué tipos de páginas web hay y cómo hacérselas por todo el morro, cómo atraer visitas, y, en fin, todos los trucos de un buen webmaster, es decir, un amo de la web.

Este tutorial no pretende ser una guía exhaustiva sobre todas las posibilidades que ofrece el HTML; específicamente, incluso evita la mención de ciertos elementos cuyo uso en un sitio no recomiendo. Sólo menciona algunos atributos y elementos necesarios para crear páginas web decentes. Si se quieren hacer cosas más avanzadas, es mejor mirar manuales de referencia, o directamente mirar el código de las páginas que incluyan algo que consideremos importante; la mejor forma de aprender es reutilizar el código de gente que tenga más experiencia que uno. Al final de este tutorial, si se han hecho todos los ejercicios, se sabrá crear una página web, y publicarla en un sitio para que todo el mundo pueda verla.

Contenido de esta sección
  • Buscar espacio web gratuito
  • Hacer nuestra primera página web sin programar

Introducción: nuestra primera página web

Para hacer nuestra primera página web, no tenemos que saber absolutamente nada de ningún lenguaje de programación: simplemente saber usar el ratón y la Internet. Es suficiente con ir a algún sitio que dé espacio gratuito, y realizar una serie de pasos simples:

Hay otros muchos servidores que te permiten alojar las páginas de forma gratuita: IEspaña, Galeón, Pobladores.com o Terra. Una lista más completa está en el manual de cómo publicar en internet; en cualquiera de ellos se pueden crear páginas gratis con más o menos servicios, no todos ellos incluyen constructores fáciles de página.

Ejercicios
1. Conseguir una identidad en alguno de los sitios mencionados anteriormente (especialmente Geocities. o Tripod, y crear una página rápidamente usando las facilidades que ofrecen.

Contenido de esta sección
  • Hiperenlaces
  • Editores WYSIWYG
  • Publicación de las páginas

Sitios web

[Captura de
pantalla del Netscape Composer versión 6]

La principal diferencia entre las páginas hechas con un procesador de textos y las páginas web son los hiperenlaces: zonas del texto o de la página que relacionan una página con otra (o con otra zona de la misma página) y tales que, al pulsar el botón izquierdo del ratón sobre ellas, van a la página apuntada. Los hiperenlaces aparecen resaltados con un color (habitualmente azul) o "decoración" (habitualmente subrayado) diferente al resto del texto. Los sitios web son grupos de páginas web, con un tema común y creados habitualmente por el mismo autor, que están relacionados entre sí a base de hiperenlaces. La relación puede tomar muchas formas diferentes, pero lo normal es que haya enlaces de la página principal (que habitualmente tiene el nombre de fichero index.html o index.htm) a las demás páginas, o de que haya una relación jerárquica de una página principal a otras que presenten subtemas, y de estas a páginas hoja que expongan el contenido. Evidentemente, éstas no son las únicas formas de organizar un sitio web. [Captura de
pantalla del CuteSITE Builder versión 3]

Hay programas que nos ayudan a crear páginas web de una forma sencilla y, con ellas, crear sitios web completos. Por ejemplo, el Netscape viene acompañado por el Composer, un programa que nos permite crear páginas web como si se tratara de un procesador de textos (tal como se puede ver en la imagen, un poco más arriba).

Otra alternativa es el GlobalScape CuteSITE Builder 3.0, otro editor WYSIWIG (un pantallazo se puede ver aquí a la derecha), con muchas más opciones, que te permite crear sitios web completos a partir de patrones predefinidos, o usando un wizard que te va guiando en la construcción del sitio. No es gratuito, pero hay una versión de prueba de 30 días que se puede descargar del sitio web anterior, y de otros sitios de software, tales como TUCOWS. Otros programas funcionan de una forma similar: HotDog PageWiz (que a mí se me quedaba colgado, hasta tener que resetear la máquina, cada dos por tres), y WebEasy Express, de ixla, que te permite también crear sitios interactivamente, e incluso tiene una lista predeterminada de películas favoritas y sitios de vacaciones. Ambos son programas de pago, que se ofrecen en demos limitadas a treinta días. Cualquiera de las alternativas indicadas son válidas, pero si se quieren crear sitios web completos, con un patrón común de colores y fondos, es mejor usar alguna de las tres últimas.

En Linux, hay diferentes opciones. Como en el caso anterior, se puede usar el editor del Netscape y del Mozilla [Captura de
pantalla del Mozilla para Linux]; pero también el Quanta Plus 2.0, un excelente editor disponible para el entorno KDE, que además, permite depurar programas insertados dentro de las páginas Web, tales como los hechos con PHP (de hecho, parte de este tutorial está hecho usándolo, aunque, finalmente, me quedo con el XEmacs).

Una vez realizadas las páginas web, comprobados los enlaces y visto que todas las páginas están a gusto del consumidor, llega el momento de subirlas al sitio web donde queremos que se publiquen, que será habitualmente uno de los sitios mencionados en la sección anterior. Para esto se usa un protocolo llamado FTP (por [Botón
      de publicación de CuteSITE] File Transfer Protocol, protocolo de transferencia de ficheros), que se puede usar de formas muy variadas. Lo más fácil, en muchos casos, es simplemente usar la opción Publish o Publicar. Al pulsar sobre esta opción, sale un cuadro de diálogo que pide el sitio FTP al que se va a publicar, el subdirectorio, el nombre de usuario y la clave. Cada sitio tiene sus propios valores, y es mejor consultar la página correspondiente para poder configurarlo correctamente.

Hay otras dos opciones: los sitios de publicación web gratuita ofrecen administradores de ficheros, desde los cuales puedes indicar el fichero que quieres subir al sitio, y subirlo al directorio correspondiente; en algunos casos se pueden subir hasta 5 ficheros o más de una sola vez. La siguiente opción es usar programas para hacer FTP; los más populares son el CuteFTP y el WS_FTP; estos programas tienen un interfaz parecido al Explorer de Windows; no hay más que pinchar sobre los ficheros que se quieren subir, indicar a qué directorio se quieren subir y listo. Estos dos programas se tienen que configurar de forma similar a los "publicadores" indicados más arriba, es decir, indicando el sitio de FTP, nombre de usuario, claves y directorio al que se quieren subir. Sin embargo, no hace falta tanto para enviar ficheros; cualquier sistema operativo tiene una orden ftp, y no hay más que escribir


c:\> ftp ftp.es.geocities.com
[introducir el nombre de usuario y clave que se haya elegido]
ftp>cd midirectorio
ftp>put nombrefichero.html
[... o bien ... ]
ftp>mput *.html
[Para subir muchos ficheros a la vez]

para subir todos los ficheros que se quieran al servidor web. A partir de ese momento, y si todo ha ido bien, estarán disponibles para que todo el universo mundo los contemple y disfrute.

Ejercicios
1. Localizar en Internet y bajarse alguno de los programas de creación y publicación de sitios web indicados anteriormente. Usar los buscadores genéricos o bien los buscadores de software.
2. Usándolos, crear un sitio web con diferentes páginas enlazadas entre sí, y publicarlo en la dirección que se ha elegido en el apartado anterior.

Contenido de esta sección
  • Estructura básica de una página web
  • Lenguaje HTML
  • Mi primera página HTML

Lenguaje HTML

Hasta ahora, hemos tratado las páginas web como si de un texto cualquiera se tratara; lo que ocurre es que, en la mayoría de los casos, las páginas web no van a salir exactamente como uno lo desea. Esto se debe a que las páginas web están escritas usando un lenguaje, el HTML (hypertext markup language, lenguaje de anotación hipertexto), que no permite describir de forma exacta cómo se distribuye el texto en la página, sino que es un lenguaje de descripción estructural: describe cuál es el papel de cada trozo de texto dentro de la página, y, en algunos casos, permite controlar la apariencia del mismo. El lenguaje HTML está diseñado para que sea presentado en muchos tipos de navegadores diferentes, desde navegadores gráficos como el Netscape o el Konqueror hasta navegadores sólo texto como el Página de prueba vista con el navegador Lynx Lynx. Por eso conviene conocer el lenguaje HTML. Si se quiere v er cuál es la pinta real de una página web en este lenguaje, hay una opción del menú, Ver -> Código Fuente, que te permite verlo.

El HTML se puede editar con cualquier editor de texto, tal como el Notepad de Windows, o editores mejores como el XEmacs; si se usa un procesador de textos, se tendrá que salvar como texto (aunque con la extensión HTML.

El HTML se compone de dos tipos de órdenes: etiquetas y entidades. Las etiquetas son, en sí, órdenes; se presentan entre paréntesis angulares (< y >); van habitualmente emparejadas, cada <etiqueta> va acompañada de su correspondiente antietiqueta </etiqueta> y sirven para controlar cómo se va apresentar el texto. Las etiquetas contienen atributos: <etiqueta atributo='valor' > que pueden tener diferentes valores; cada etiqueta tiene sus atributos característicos, que controlan diferentes aspectos de la presentación del contenido de la etiqueta. Las antietiquetas nunca tienen atributos. En cuanto a las entidades, van precedidas del símbolo & (ampersand) y terminadas por un ;, y representan caracteres o símbolos que no se pueden obtener fácilmente con el teclado, tales como el ¥ (&yen;) o el ø (&oslash;).

Después de esta introducción floreada, vamos al turrón: cómo es, de verdad, la estructura de una página HTML. Si hemos usado lo indicado anteriormente para ver los fuentes de la página, nos [Página HTML
	de prueba usando OPERA] habremos encontrado con algo así:


<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
  <head>
    <title>Título</title>
  </head>
  <body>
    <h1>Título</h1>
	<p>Texto</p>
  </body>
</html>

Como se puede ver, todas las órdenes HTML (aunque más bien cabría hablar de anotaciones HTML) se hacen a base de etiquetas. Lo importante de las etiquetas es que estén siempre emparejadas, y que terminen en orden inverso a como han empezado, es decir, <a><b> tendrán que ser cerradas de esta forma </b><a>. En este caso, salvo la etiqueta en la primera línea, que no es realmente necesaria y que es insertada automáticamente por el editor (en este caso el XEmacs), el resto de las etiquetas están todas emparejadas (aunque no siempre es así, se verá más adelante). El resultado de presentar la página en el navegador se ve en la figura adjunta.

El código fuente anterior refleja la estructura típica de una página web (un documento HTML, que es lo mismo): toda la página está incluida dentro de la etiqueta HTML (y su antietiqueta correspondiente). Dentro de esa etiqueta hay dos partes: la cabecera (head) y el cuerpo (body). En la cabecera, por el momento, habrá sólo una etiqueta: la title, que indicará el título de la ventana donde se presentará la página. La mayoría de la información se pone dentro del cuerpo; por lo pronto sólo se han usado dos etiquetas: h1, que contiene el título de la página, y que en este caso se ha puesto al principio, pero que puede aparecer las veces que se quiera a lo largo del documento, y la marca de párrafo, p que indica el principio y final de un párrafo.

Para introducir un hiperenlace se usa la etiqueta a enlace con el atributo href, de esta forma


<a href='prueba.html'>texto dentro del enlace</a>

Los enlaces se pueden incluir en cualquier punto del texto, y pueden apuntar a cualquier fichero dentro del mismo ordenador (siempre que sea "visible" desde fuera), o, en general, a cualquier recurso en internet, en particular cualquier página web, por ejemplo:


<a href='http://www.google.com'>peaso de buscador de tó lo del mundo </a>

Una característica no demasiado conocida de la etiqueta a es el atributo title, que permite añadir una descripción al enlace; esta descripción puede ser útil para que los buscadores la encuentren, y para que el usuario elija o no el título, complementando a la descripción incluida dentro de la etiqueta. La podemos usar de esta forma (se puede ver en el ejemplo ej3-2.html:

enlace con título

<a href='prueba.html' 
  title='Un ejemplo que tiene 
         la estructura básica de un texto HTML'>
  texto dentro del enlace </a>

Esta característica no está disponible en las versiones antiguas de los navegadores, pero en las nuevas, aparecerá algo parecido a lo que hay en la imagen.

Ejercicios
[Todos los ejercicios tendrán que ser publicados en el sitio web creado anteriormente]
1. Modificar algunas de las páginas creadas en secciones anteriores, cambiándoles el título, o los encabezamientos (h1).
2. Crear tres páginas web, una página índice que apunte a las otras dos, que a su vez contendrán un enlace a la página índice.

Contenido de esta sección
  • Bitácoras: descripción
  • Creando una bitácora

Mi querido diario: tu página de anotaciones en internet

Durante el año 2001, se han hecho bastante populares las bitácoras, weblogs o blogs, páginas en las que un usuario va introduciendo apuntes, generalmente acompañados de algún enlace, donde describe lo que le gusta, o lo que le ha pasado, o simplemente lo que le apetece. La página principal de la bitácora presenta una serie de entradas diarias, a veces con algún icono que identifique el tema; las entradas más modernas hacen que las más antiguas se oculten. Hay herramientas gratuitas en internet para hacerlos, pero también sitios donde se alojan gratuitamente.

Para crear una bitácora, en el idioma que queramos, no tenemos más que ir a alguno de esos sitios, por ejemplo, BlogSpot, donde se puede creat una bitácora tal como la bitácora de El Pardillo, otra página más de El Pardillo en pitas, alojada en Pitas.com, que permite poner enlaces y texto relacionado de forma muy simple; o, finalmente, mi bitácora personal (la que uso de verdad) en Blogalia. Fijémonos, por ejemplo, en BlogSpot: simplemente, bajo el título Start your own, se introduce un nombre (el que queremos que aparezca delante de Blogspot.com), una clave, y p'alante con la bitácora.

Una vez creada la bitácora, conviene darla de alta en sitios tales como Bitácoras.net, donde hay listas, todos los días, de las bitácoras que se actualizan. Y, por supuesto, si se quieren atraer visitas, habrá que trabajar en ella, como si de un diario público se tratara.

Ejercicios
1. Crear una bitácora en alguno de los sitios indicados anteriormente, e ir introduciendo enlaces a los ejercicios que se realicen, así como cualquier otro material que se considere interesante.

Contenido de esta sección
  • Atributos básicos
  • Resaltes
  • Imágenes

Mejorando lo presente: colores, resaltes e imágenes

Las páginas con letras negras sobre fondo gris nos recuerdan inevitablemente los primeros tiempos de la Web, donde el navegador Mosaic era lo único que había. afortunadamente, las cosas han mejorado un tanto desde entonces, y podemos poner fondos y letras de diferentes colores, así como incluir una serie de etiquetas que nos permiten resaltar partes del texto; también se pueden incluir imágenes, como en el ejemplo siguiente:

Ejemplo 4.1 visto con el Konqueror

  <body bgcolor='darkblue' text='lightyellow' link='darkgreen' vlink='lightgreen' alink='green'>
  <h1>Ejercicio 4.1, tutorial de HTML</h1>
  <P>Esto es texto normal.</p>
  <P>Esto es texto <i>texto en cursiva</i>,
  mientras que <em>esto es texto con énfasis</em>.</p>
  <p>Esto es <b>texto en negrita</b>,
  y esto es <a href='prueba.html'>texto dentro del enlace</a>.</p>
<img src='tuxbaby.png' align='center' alt='[TuxBaby]' >

El resultado de visualizar el fichero (ej4-1.html) usando el Konqueror se ve a la derecha del mismo. En esta página incluimos una serie de etiquetas que sirven para resaltar parte del texto.

Lo primero que se ha hecho es cambiar los colores que salen habitulamente en la página, poniendo los nuesros propios: azul oscuro para el fondo, amarillo claro para las letras, verde oscuro para los enlaces, verde claro para los enlaces que ya se han seguido (vlink), y verde para los enlaces que se están pulsando, en el momento que se pulsan (alink). Los colores se pueden indicar poniendo su nombre en inglés (green, blue, red) o bien su valor en hexadecimal, de esta forma:


<body bgcolor='#001122'>
El que se puedan cambiar los colores de los enlaces y enlaces seguidos no significa que se deba hacer; la mayoría de la gente identifica "texto subrayado en color azul" con "enlace", y poner cualquier otro color puede despistar un poco; por eso los fondos suelen ponerse compatibles con ese color azul. Se puede usar cualquier otro color, pero debe quedar bien claro qué color se usa para los enlaces. Igualmente, se pueden sustituir los subrayados, pero tampoco se debe.

las dos primeras cifras hexadecimales corresponden al color rojo (en este caso, nada de color rojo), las segundas a la componente azul (un poquito) y la última, al verde (un poco más). El resultado se ve en la imagen de abajo. Ejemplo 4.1 visto con el Konqueror Para hallar el color que uno quiere poner, lo mejor es usar alguna herramienta de selección de paleta, tal como la herramienta de seleccionar color del KDE, mostrada en la imagen; o el gcolorsel del entorno de trabajo GNOME; la mayoría de los editores de HTML vienen también con una herramienta de selección de color, que te da el nombre y las coordenadas RGB del color correspondiente. Esta forma de indicar el color es común a todas las etiquetas en las que se pueda indicar el color (más adelante veremos alguna más).

Para empezar está la ya conocida y usada h1, que corresponde al tículo principal de la página; el "1" puede ser sustituido por n=2,...,5 para indicar títulos de secciones de jerarquía cada vez inferior; h2 correspondería a un título de capítulo, por ejemplo, y sucesivamente sección, subsección... en realidad, el texto dentro de esas etiquetas aparecerá en tamaños decrecientes de letra, hasta llegar al

h4

, por ejemplo.

En las líneas siguientes se usan una serie de etiquetas para resaltar el texto: em e i sirven, respectivamente, para enfatizar y para poner el texto en cursivas (itálicas), aunqe, en la práctica, en la mayoría de los navegadores aparezcan como texto en cursiva. Conceptualmente, sin embargo, son diferentes, y los programas que interpretan texto automáticamente (tales como los buscadores) así lo entienden. La siguiente etiqueta, b, sirve, efectivamente, para poner negritas (boldface) (aunque en algunos navegadores, como el Lynx, aparezca como texto con fondo de otro color, por ejemplo). A continuación se incluye un enlace hipertexto simplemente para que se vea como los colores definidos en la etiqueta body los afectan.

Lo siguiente que nos encontramos es una imagen, que se inserta usando la etiqueta img con una serie de atributos; el que no puede faltar es el atributo src, que indica el fichero que contiene la imagen que vamos a presentar, en este caso el simpático pingüino Tux, la mascota de Linux. El fichero que se ha usado en este caso tiene la extensión .png (Portable Network Graphics, una alternativa libre de formato gráfico) Ejemplo de uso de la etiqueta ALT, pero también se pueden usar archivos GIF (comprimidos, usan sólo 256 colores) y JPG (comprimidos, usan toda la gama de colores). En general, para imágenes pequeñas (iconos, por ejemplo), se suelen usar los GIFs, mientras que para imágenes grandes, fotos escaneadas, y cosas por el estilo se suelen usar los JPGs. Las imágenes se pueden alinear a derecha o izquierda del texto en el que están insertas usando el atributo align (center, left o right). Finalmente, conviene siempre añadir una etiqueta alt con una pequeña descripción de la imagen; que aunque normalmente no se vé (sólo navegadores como el Netscape la muestran cuando se pasa el cursor sobre la imagen), es útil para diferentes cosas:

Hay que tener cuidadito con las extensiones de las imágenes: algunos programas de Windows, las ponen en mayúsculas, y en realidad, a Windows les dará igual mayúsculas que minúsculas, por lo que en Windows se verán bien; sin embargo, cuando las pasemos al servidor, no las encontrará, si en el nombre de fichero las hemos puesto en minúsculas. .

Las imágenes pueden estar dentro de cualquier etiqueta, e incluso dentro de enlaces, de forma que, pulsando sobre la imagen, se acceda a la página indicada. Sin embargo, la alineación de la imagen se indica con el atributo ALIGN; según sea center, right, left se alineará en el centro de la página, a la derecha, o a la izquierda; también se puede usar top, middle, bottom si queremos que el texto comience en lo alto, en medio o en lo bajo de la imagen.

No es muy aconsejable cambiar el color de las letras ni el tipo cada dos por tres, pero en caso de que sea absolutamente necesario hacerlo, para eso está la etiqueta font. Esta etiqueta tiene un par de atributos importantes: face, que indica el tipo de letra, y size, que indica el tamaño de la letra, absoluto o relativo al tamaño del resto de las letras del documento (indicado con +/-). Por ejemplo, aquí se está usando face='times,Times Roman' size='+2', mientras que aquí estamos usando font face='gatsby' size='-1'. El uso de fuentes diferentes no es demasiado aconsejable: para empezar, pueden no estar disponibles en el sistema operativo que tenga el cliente (seguramente, la fuente gatsby anterior habrá aparecido en algunos navegadores como la fuente por defecto); y el problema no es que no se presente el texto en el tipo que uno quiera, sino que a veces aparece directamente como cuadrados vacíos (sobre todo caracteres particulares como ñs y acentos). Se pueden usar tipos de letra diferentes para diferentes apartados dentro de una misma página, por ejemplo. En cuanto al tamaño, tres cuartos de lo mismo: en vez de cambiar el tamaño arbitrariamente con la etiqueta font, se pueden usar de la misma forma las etiquetas big (que deja las cosas así) o la small (para letras chiquitillas).

Ejercicios
1. Modificar las páginas web creadas anteriormente para que incluyan imágenes, resaltes, diferentes tipos de títulos.

Contenido de esta sección
  • Tablas
  • Listas

Etiquetas anidadas: tablas y listas

No siempre las etiquetas tienen sentido por sí solas; a veces sólo tienen sentido dentro de otras etiquetas (aunque el navegador se esfuerce en hacer algo cuando se las encuentre. Este es el caso de las dos estructuras que vamos a ver en esta sección: tablas y listas. Las tablas no sólo permiten hacer eso, tablas, sino que permiten distribuir la información sobre la página de forma un poco más ajustada; recordemos que HTML no te permite situar cosas en la página como uno quiere. Veamos el siguiente ejemplo (ej5-1.html)

Ejemplo de table

<table border='1'>
	  <tr><th>Cabecera 1</th><th>Cabecera 2</th></tr>
	  <tr><td>Celda 1.1</td><td>Celda 1.2</td></tr>
	  <tr><td>Celda 2.1</td><td>Celda 2.2</td></tr>
</table>

Hacen falta 4 etiquetas para crear una tabla: table, que sirve para definir la estructura de la tabla y alguna cosa general (por ejemplo, el color de fondo), tr, para definir las filas, y th y td, para definir las celdas. Uno puede definir tantas celdas como uno quiera; y el navegador tratará de ajustar la estructura de la tabla; pero si quiere, se puede poner


<table cols='x' rows='x'>

También se le puede embellecer de varias formas: se puede poner un color diferente de borde (bordercolor, un grosor de borde diferente (border), y como fondo una imagen (Background). Además, se puede definir la separación entre celdas (cellspacing) y el espacio que va a haber dentro de cada celda(cellpadding). De la misma forma, se pueden definir los colores de alguna celda. Se haría de esta forma ejemplo (ej5-2.html)

Ejemplo de table

<table border='3' bordercolor='lightblue' 
    background='tux.png' cellspacing='3' 
    cellpading='5'>
	  <tr><th bgcolor='yellow'>Cabecera 1</th><th>Cabecera 2</th></tr>
	  <tr><td>Celda 1.1</td><td bgcolor='white'>Celda 1.2</td></tr>
      <tr bgcolor='blue'><td>Celda 2.1</td><td>Celda 2.2</td></tr>
</table>

Lo más aconsejable es poner el borde a 0, para que no se visualicen las líneas, salvo que uno pretenda crear algún tipo de efecto estético. Las celdas no tienen porqué tener el mismo tamaño, con el atributo width se puede regular el porcentaje de espacio que ocupan, por ejemplo td width='33%', aunque eso no te garantiza que ocupen el espacio que uno quiere; la anchura de la columna dependerá de la anchura del navegador, la de esa celda, y la del resto. Asimismo se pueden usar los atributos align y valign para indicar la alineación del texto dentro de la celda.

Para terminar con las tablas, a veces conviene distribuir el contenido de una página de forma original, y por eso se pueden agrupar celdas usando los atributos colspan y rowspan, tal como se muestra en el ejemplo (ej5-3.html)


<table width='99%'>
	  <tr><td bgcolor='yellow' rowspan='3' width='25%'>Columna izquierda</td>
		<td>Cabecera 2</td>	<td>Cabecera 3</td></tr>
	  <tr><td>Celda 1.1</td><td bgcolor='white'>Celda 1.2</td></tr>
      <tr bgcolor='blue'><td colspan='2'>Celda 2.1</td></tr>
</table>

En este ejemplo, además, hemos introducido la etiqueta width para indicar el tamaño de la tabla; la tabla cambiará de tamaño con la ventana del navegador en este caso. Es bastante aconsejable hacerlo así, aunque también se puede poner un valor absoluto (en puntos o píxels) poniendo simplemente un número.

En cuanto a las listas, funcionan de forma similar. Hay varios tipos de lista, pero los más utilizados son las listas en las que cada elemento tiene un numerito de orden delante (listas enumeradas), que usan la etiqueta ol, y las desordenadas, con la etiqueta ul. Cada uno de los elementos de la lista se indican en ambos casos con la etiqueta li (list item, fácil de recordar para los aficionados al LaTeX). Un ejemplo de ambos tipos de listas se puede ver en el ejemplo (ej5-3.html)


<ul type='disc'>
	  <li>Item 1</li>
	  <li>Item 2</li>
</ul>
<ol type='I'>
	  <li>Item 1</li>
	  <li>Item 2</li>
</ol>

Con el atributo type se indica lo que se va a insertar delante de cada artículo de la lista; por defecto serán puntos y números; en este caso los hemos cambiado a discos y números romanos; también se pueden usar cuadrados (type='square'), y, en el otro caso, números romanos en minúscula, y letras mayúsculas o minúsculas, respectivamente (type='A,a,i'). También se pueden usar cosas más curiosas: iconos, por ejemplo, de esta forma ul dingbat='folder' (para iconos internos) o ul src='img.gif' (para iconos en un ficheroe externo). Sin embargo, ninguna de las dos funciona en el Netscape ni en el Opera.

Ejercicios
1. Hacer una tabla como la que se ve en la imagen.[Ejercicio de tablas]
2. Hacer una lista, cada uno de cuyos elementos sea, a su vez, otra lista. Combinar listas de diferentes tipos.




Contenido de esta sección
  • Formularios
  • Procesando formularios

Páginas interactivas: formularios

La mayor parte de las páginas web comerciales ofrecen algún tipo de interacción, aunque sea sólo un libro de visitas o una página de búsqueda. En algunos casos, simplemente nos interesa que el usuario nos suministre información de una forma determinada. Para ello se han inventado los formularios, tales como los que vienen en el siguiente ejemplo (ej6-1.html)


<form action="http://geneura.ugr.es/cgi-bin/gustavo/mostrar.pl?" method="post">
	  <input type="hidden" name="subject" value="Formulario por email">
	  <table>
	  <tr><td>¿Tu nombre?</td><td><input type="text" name="nombre"></td></tr>
		<tr><td>¿Tu equipo?</td><td><select name="equipo">
			  <option>El Madrí</option>
			  <option>El Barça</option>
			  <option>El Alavés</option>
			</select>
 </td></tr>	
		<tr>
		  <td>¿Ganará el Villareal la liga?</td>
		  <td>Sí <input type="radio" name="ganador" value="Sí" checked="checked"> 
          No <input type="radio" value="No" name="ganador" ></td>
		</tr>
		<tr>
		  <td colspan="2" align="center"><input type="submit"
	          name="Enviar información" value="Enviar Información"><
          input type="reset"></td>
		</tr>
</table>
	</form>

En lo de antes, no se incluyen todos los elementos posibles de un formulario, sino simplemente una selección variada. Un tutorial mucho más completo de formularios está en el tutorial de formularios de Gustavo Romero López. Todos los formularios empiezan con la etiqueta form, y termina con la antietiqueta correspondiente; si no la cerramos, los elementos del formulario ni siquiera saldrán. Dentro hay dos atributos, uno de los cuales es imprescindible: action, que indica cómo se va a procesar el formulario. La acción es el URL de un programa, generalmente un CGI (Common Gateway Interface) que procesa los datos del formulario y hace algo al respecto; en este caso, el programa indicado simplemente muestra los valores de las variables del formulario. En vez de eso, se puede indicar un URL que comience por mailto, tal como mailto:elpardillo2002@yahoo.es, en cuyo caso los contenidos del formulario se enviarán por correo electrónico a esa dirección; sin embargo, este URL requiere que haya un cliente de correo instalado; así que, por ejemplo, no funcionaría si se rellena el formulario desde el cibercafé; lo más útil es usar, simplemente, un CGI. Si no se tiene acceso, se puede acceder a servicios gratuitos que te envían los contenidos del formulario por correo electrónico, tales como FreedBack o bien una alternativa en español, el servicio de formularios de MelodySoft. Después de darse uno de alta, en este sitio se pueden directamente crear los formularios, cuyo resultado se envía por correo electrónico a la dirección que se indique (eso sí, con publicidad). En cuanto al method, hay dos valores posibles: post y get; en este momento, no vale la pena preocuparse mucho por el tema, sólo que, si usamos get, las variables del formulario y sus valores aparecerán en el URL de la página a la que vamos a acceder.

Dentro del formulario, organizamos los diferentes elementos en una tabla, para que aparezcan bien distribuidos por la página; es lo habitual. Cada elemento del formulario representa una variable, que tiene un nombre (que hay que indicar en cada uno usando la etiqueta name, y un valor, que será el que le introduzca el que lo rellene.

La mayoría de los elementos del formulario usan la etiqueta input; por ejemplo,input type='text' como este: presenta una caja de una sola línea donde se puede introducir texto; input type=radio' presenta un radio button tal como éste , que normalmente se agrupan, de forma que, cuando se active uno, se desactiva otro; una alternativa es usar input type='checkbox' , similar al anterior, pero con la diferencia de que se pueden activar tantas opciones como se quiera.

También se pueden usar menús de diferente tipo, sobre todo si la información no se puede presentar de forma compacta con botones. Uno de ellos se usa en el ejemplo de arriba, con las etiqueta select/option. Estos elementos funcionan de forma similar a las listas indicadas anteriormente: se abren y cierran con select, y cada elemento se indica con option.

Finalmente, tiene que haber alguna forma de enviar la información al servidor: para ello se usan los botones submit, que se indican con el código input type="submit"; como a cualquier otro elemento, le puedes asignar un nombre y un valor; la única diferencia es que el contenido de la etiqueta value será el que aparezca dentro del botón en la página. No viene tampoco mal otro botón que sirva para limpiar los valores, y restituir los valores originales; eso es lo que hace el input type="reset" , que planta en la página web resultante un botón de reset.

Junto con estos elementos del formulario pueden ir otros que no son visibles: el atributo tipo será hidden, es decir, input type="hidden"; asimismo, hay unos campos especiales que permiten introducir claves sin que el que mire por encima del hombro se de cuenta, input type="password", apareciendo asteriscos en vez de las letras, de esta forma

Ejercicios
1. Realizar un formulario que corresponda a un examen de respuesta múltiple, en el cual cada pregunta tenga diferentes respuestas, algunas de las cuales se puedan contestar con una sola opción, y otras con varias opciones. Usar los elementos que se quieran, siempre que se cumplan las restricciones anteriores.

Contenido de esta sección
  • Diseño de sitios web
  • Elementos de un sitio web

Las cosas en su sitio: diseño de un sitio web

Los sitios web comienzan habitualmente siendo una página o un par de páginas, y luego poquito a poquito, les van creciendo páginas aquí y allá, hasta que al final hay páginas que necesitan un mapa para ser alcanzadas, mientras que otras se convierten en callejones sin salida, y otras están por ahí, sin estar enlazadas con ninguna otra cosa. Por eso conviene, antes de ponerse a escribir un sitio web, aunque sea algo tan simple como una página personal, planificarlo con antelación.

Diseño de un sitio web tipo estrella

Lo más normal es que un sitio tenga un diseño tipo estrella, con una página inicial que apunta al resto de las páginas, que a su vez apuntan a la página inicial. Este diseño es simple, y relativamente fácil de navegar. A veces se pueden añadir también enlaces entre las páginas, siempre que se trate de temas relacionados; en algunos casos, si hay pocas páginas, puede haber enlaces de cada página a todas las demás. Pero lo más normal es que este tipo de diseño evolucione hacia otros un poco más complicados, cuando hay muchas páginas: por ejemplo, un diseño tipo árbol Diseño de un sitio web
					tipo árbol con páginas de índice, que se enlazan entre sí y con la página principal, y que enlazan a las páginas "hoja". Generalmente, cada subárbol será un apartado o tema diferente dentro del mismo sitio, y las "hojas" del árbol tendrán poca relación entre sí. En este caso, la navegación es también relativamente fácil, pero es difícil llegar de una página hoja a otra página hoja, si se encuentran dentro de diferentes subárboles. Por eso, en algunos casos, conviene insertar algún enlace, siempre que los temas estén relacionados.

Diseño de un sitio web secuencial

Por último, en algunos casos, si el sitio web se parece más a un documento tradicional, conviene leerlo una página tras de otra; por eso, la página inicial apunta al "primer capítulo, éste al siguiente, y así sucesivamente, hasta llegar al final. Este tipo de organización no es aconsejable para material que no sea, intrínsecamente, secuencial, porque para llegar a la última página hay que pasar por todas las demás.

El elegir alguna de las configuraciones anteriores, u otra totalmente diferente, dependerá no sólo de la intención inicial del programador, sino también de lo que pretenda hacer en el futuro; en muchos casos, el diseño final no se parecerá en nada al original, pero lo que hay que tener en cuenta siempre es que el diseño de la navegación regulará el flujo de usuarios por el sitio, y será determinante para que los usuarios encuentren la información que buscan y visiten más o menos páginas. También hay que tener en cuenta que los usuarios no siempre van a entrar al sitio por su página principal; en la mayor parte de los casos llegarán desde buscadores, y comenzarán por cualquier página; por eso es conveniente que, en cada momento, el usuario sepa dónde está, la estructura del sitio y dónde puede ir.

En todo caso, no deben de faltar algunas páginas en un sitio, que estén referenciadas, si es posible, desde todas las páginas:

Ejercicios
1. Realizar un sitio web que cuente un cuento en cuatro capítulos; incluir las páginas "canónicas", inclusive búsqueda; para ello hará falta darse de alta en Atomz.

Adonde ir desde aquí

Ya que sabes todo lo básico, no necesitas nada más; pero sería conveniente que pensaras en como sacarle provecho a tu página, y cómo dar los pasos para una publicación profesional. En el tutorial publicando en Internet explica cómo diseñar las páginas, qué poner en ellas y cómo sacarle partido.

La mayoría de los sitios con éxito son interactivos, y hay que instalar, y muchas veces programar, programas en el servidor que te ayuden a procesarlos, accediendo, por ejemplo, a bases de datos o algún otro tipo de utilidad. En el curso de comercio electrónico del grupo GeNeura te explica todos los pasos necesarios para hacer esa conexión entre el navegador y el servidor. Y ya metidos en harina de programación, un poco de programación en el cliente, y añadido de algún dinamismo a las páginas tampoco viene mal: en este curso de HTML dinámico de GeNeura viene lo necesario para hacerlo.

Por último, si se quiere hacer programación de contenido independiente del navegador, que pueda verse, por ejemplo, en pantallas grandes como las de un ordenador o pequeñas como las de un teléfono móvil, porqué no aprender XML en este curso? XML sirve para crear contenido, y dejar al servidor que decida como presentarlo. Por ejemplo, sirve también para crear contenido para teléfonos WAP.

Bibliografía y enlaces relacionados con HTML

Ahí van una serie de enlaces donde se pueden encontrar cursos, artículos, y manuales de referencia para complementar al tutorial de arriba. Empecemos por las referencias

Sigamos con los cursos: cada cual tiene su enfoque, así que se puede elegir entre varios. Además, cada uno se concentra en algún aspecto:

Para terminar, hay una serie de libros recomendables sobre el tema, tanto en castellano como en inglés:

[KillerSites front page] Para diseñar bien un sitio web, el libro Creating Killer Web Sites, de David Siegel está lleno de consejos.


[KillerSites front page] Otro libro muy interesante, enfocado a incrementar la usabilidad de los sitios, es decir, la comodidad que siente un usuario al navegar por un sitio web y la facilidad para llevar a cabo una tarea determinada, es Designing Web Usability : The Practice of Simplicity, aunque, la verdad, está un tanto obsoleto.

En castellano se puede encontrar en cualquier librería HTML 4.1, de A. Álvarez García y J. A. Morales Grela, de la editorial Anaya Multimedia, o bien la La guía definitiva de HTML y XHTML, de Musciano y Kennedy, editado por O'Reilly/Anaya Multimedia, que como todos los libros de O'Reilly, tiene una calidad exceptional.

Creative Commons License
Este trabajo tiene una licencia Creative Commons.

Valid HTML 4.01!

Last modified: Mon Nov 15 13:47:24 CET 2004