Curso de Diseño y Programación de Páginas Web: Introducción a la creacion de paginas web usando HTML

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

Para empezar cabría plantearse, en esta época de medios sociales y mensajería instantánea, si merece la pena conocer el lenguaje que se usa en todos ellos, ya que todos o bien no permiten usarlo o dejan que se hagan páginas web desde editores gráficos que esconden la estructura de las páginas y de su lenguaje. Es perfectamente posible trabajar en la web hoy en día sin saber HTML. Pero ¿es la mejor forma de hacerlo?

Sin duda, no. Para empezar, conocer el lenguaje HTML permite saber las capacidades del mismo y de qué es capaz (y de qué no). Permite conocer qué se puede hacer para que la página web sea lo más visible y usable posible. Y finalmente, teniendo en cuenta que se siguen usando buscadores y que estos determinan si los visitantes van a llegar a tu sitio o no, conocer HTML permite saber cómo componer una página para que los buscadores entiendan la estructura de la mejor forma posible y puedan presentar tu página entre los primeros resultados

En todo caso, incluso hoy en día es imprescindible trabajar con HTML en una multitud de casos: para editar plantillas de un blog, para crear mini-sitios de un producto o servicio, o simplemente para editar una entrada de un blog de forma ágil y original. Por no mencionar el hecho de que hay muchas aplicaciones que crean contenido HTML y, para los programadores que las crean, es imprescindible conocerlo.

Por otro lado, no es complicado crear páginas web; 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 o el OpenOffice Writer), 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 Kompozer, el NVu, el Frontpage, o el DreamWeaver, que hace unas páginas web fenomenales. Los dos primeros son gratuitos y además software libre, el resto son de pago o, más habitualmente, piratas.

Sin embargo, en la mayor parte de estos programas no quedan las páginas exactamente como uno quiere, sacrificando la simplicidad por la flexibilidad y hay que meterse en el código. En este tutorial enseñaremos como hacerlo 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.

2 Lenguaje de marcas hipertexto: HTML #

El lenguaje que se usa para todas las páginas web se denomina HTML , es decir, Hypertext Markup Language, o lenguaje de marcas hipertexto. Eso implica primero que es un lenguaje de programación, es decir, una forma de contarle al ordenador como hacer las cosas; en este caso se trata de contarle al ordenador cómo está estructurada una página. No debe pensarse que el HTML explica la apariencia de la página, aunque también cabe esa posibilidad. El HTML moderno tiende a usarlo sólo para describir qué papel juega cada parte de la página con respecto a las otras, y su jerarquía. De hecho, está diseñado para crear estructuras de árbol, que se verán más adelante. Por lo tanto, al usar una marca o etiqueta HTML se debe pensar más en el papel de lo que se marca que de cómo va a aparecer en la pantalla; cómo aparecerá se decidirá más adelante usando el lenguaje CSS.

La segunda parte es que se denomina lenguaje de marcas o etiquetas. Mientras que muchos lenguajes de programación habituales son imperativos: haz esto, haz lo otro, aquí lo que se le ponen son una serie de marcas a los elementos del texto para decir qué hacen o cómo deben comportarse. Las marcas están rodeadas de < y > y cada marca tiene su contra-marca o anti-marca correspondiente, que comienza con </ . Por ejemplo, todos los documentos HTML tienen que comenzar con la marca <html> y terminar con </html>. Estas marcas llevan a su vez una serie de atributos, que son valores que modifican alguna propiedad de la marca o le añaden información. Los atributos se ponen de la forma variable='valor'. Por ejemplo, la etiqueta html puede llevar el atributo lang, de esta forma: <html lang='en'. Los atributos pueden ir sin comillas si son una sola palabra sin espacios, pero es buena costumbre ponerle siempre comillas; las comillas pueden ser dobles o simples de forma indistinta. Se usan comillas simples si dentro del valor hay comillas dobles, y viceversa.

Salvo excepciones, toda marca tiene su contramarca, y tienen que cerrarse en orden inverso a como se han abierto. Como la primera etiqueta que se abre es html, será la última que se cierre. A partir de ahí, el resto de las etiquetas se abrirá y cerrará de la misma forma. Por ejemplo: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15"> <title></title> </head> <body> <h1></h1> <hr> <address></address> <!-- hhmts start -->Last modified: Mon Jul 5 10:30:06 CEST 2010 <!-- hhmts end --> </body> </html> Este sería el esqueleto mínimo de una página web, donde vemos que todas las etiquetas se cierran en orden inverso a como se han abierto: después de html se abre head, luego hay etiquetas que no tienen correspondiente cierre (meta y hr, sucede en algunos casos), y finalmente se cierra todo con body y html.

¿Qué sucede si no se abren y cierran las cosas en el orden correcto? Normalmente, nada. Los navegadores están diseñados para que se presente la página sin importar qué. A veces pueden suponer lo que pretende el creador de la página. Por ejemplo, si se abre una nueva etiqueta puede suponerse que eso cierra la anterior del mismo tipo. Aunque no dé errores, eso no quiere decir que esté bien, y es una buena práctica usar editores que te permitan ver el código pero te corrigan estos errores sobre la marcha. Las páginas mal escritas son más lentas y sobre todo se comportan de forma diferente dependiendo del navegador que se use.

Por último, se denomina lenguaje de marcas hipertexto, lo que se refiere al hecho de que el texto tenga una dimensión más, aparte de las líneas y columnas: los saltos a otras direcciones a base de enlaces. Aparte del hecho de que lo que se crea en una página web es una descripción estructural y no visual de la misma, la principal diferencia con el texto normal es el hecho de que cada página se pueda crear en el contexto de otras páginas y puedan usarse para navegación marcas que nos lleven a otra parte del texto o a otro punto diferente de la web. Para poder especificar con precisión estas direcciones se usa una sintaxis uniforme para todos ellos denominada URL, uniform resource locator, cuya estructura veremos más adelante. La idea del URL es que puedas referirte a cualquier cosa que se pueda encontrar en internet, desde una página web hasta una dirección de correo electrónico pasando por los resultados de una búsqueda. El concepto de URL es uno de los conceptos más interesantes de la web: el hecho de que se pueda localizar un recursos de forma uniforme, sin indicar la ruta necesaria para llegar hasta él (que va, casi siempre, implícita en el dominio).

Aparte de lo anterior, HTML tiene otro tipo de órdenes, las denominadas entidades. 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;); en general, representan símbolos independientemente del alfabeto, e incluye tanto símbolos conocidos como otros más esotéricos como la letra Ψ o el símbolo de las picas ♦. No todos tienen nombre; algunos se usan con el símbolo & seguido de la almohadilla y un número. Las mismas letras con acento, por ejemplo, se pueden insertar de esa forma si el teclado que usemos no lo permite (o simplemente, nos apetece). Por ejemplo, la á se representa por &aamp;.

Como cualquier lenguaje, HTML tiene diferentes versiones. Las versiones indican qué etiquetas se pueden usar o no, y cuál es su comportamiento. Hoy en día hay principalmente dos versiones en uso: la 4.01, que ya tiene más de 10 años, y XHTML, que es similar, pero más estricto: por ejemplo, no se pueden usar letras mayúsculas y minúsculas en las etiquetas y toda etiqueta debe ir cerrada, incluso las "desemparejadas" como br o hr. Los dos son igualmente populares, aunque el primero ligeramente más; ese será el que veamos, aunque de vez en cuando apuntaremos a cómo se haría una cosa de forma diferente con el XHTML. Finalmente, muchos navegadores obedecen ya a HTML5 aunqeu se encuentra todavía en desarrollo. La principal novedad de esta versión es la inclusión de la etiqueta CANVAS que permite crear imágenes en movimiento (sustituyendo al Flash) y posibilidad de hacer drag-and-drop de ficheros desde el escritorio. Hay, sin embargo, muchas más tecnologías que todavía no se han terminado de especificar ni de implementar. Se hará más popular en el futuro, cuando alcance su implementación, sin duda, pero por lo pronto es mejor esperar a que esté más extendido.

Para visualizar HTML están los navegadores; un navegador permite visualizar un fichero HTML local igual que los ficheros HTML remotos, que no es otra cosa lo que son las páginas web. Normalmente se pueden abrir desde la carpeta que los contiene o cargándolos desde el navegador; de la misma forma, tratándose de texto se puedene editar con el Notepad, Notepad++, Geany o cualquier otro programa. Conviene siempre usar alguno que tenga coloreado con sintaxis y facilidades similares, para que sea más fácil distinguir los errores de sintaxis. Los editores mencionados anteriormente tienen un modo de edición de HTML que tiene estas facilidades, así que no hay que usar ninguna herramienta adicional. La mayoría de los editores online de blogs y demás también suelen tener una solapa que deja editar directamente el HTML, aunque en este caso sin ningún tipo de colores o indentados.

Bloque 1

  1. Comprobar qué editor hay instalado en el sistema, copiar y pegar el esqueleto de página web vista anteriormente y visualizarlo.
  2. Instalar algún editor de programación más avanzado, y probarlo para ver qué facilidades ofrece.

3 Nuestra primera página web #

Antes de continuar con las demás características del lenguaje, vamos a empezar a hacer y publicar nuestra primera página web sin necesidad de 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: 260 MB, Tripod y ServersFree. En todos ellos conviene que te des de alta con paciencia, porque requieren que se confirme el email y tienen interfaces que no siempre son intuitivos. 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. El mismo Google Docs permite crear colaborativamente documentos de texto, hojas de cálculo y presentaciones y posteriormente publicarlos en la web. De forma posiblemente poco amigable, pero usable.

Bloque 2

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

4 Anatomía de una dirección de Internet #

Como hemos visto anteriormente, todo lo que hay en Internet tiene una dirección única, que se suele denominar URL (Universal Resource Locator, localizador universal de recursos), y tiene una pinta como esta: http://unacosa.otracosa.com/dir1/dir2/fichero.html, pero que en su forma más general, se puede complicar bastante más. La forma completa de un URL es:

protocolo://usuario:clave@direccion:puerto/directorios/fichero.html#fragmento?variable=valor&variable2=valor

Vamos a analizarlo por partes

Protocolo
le indica al navegador cómo tiene que hacer la petición. Un protocolo es una forma que usan un ordenador-cliente y un ordenador-servidor para comunicarse. El nombre del protocolo indica también que tiene que hacer el programa-cliente para presentar esa información. http es el protolo habitual para las páginas web, aunque las páginas seguras (que usan comunicación cifrada entre cliente y servidor) llevan el protocolo HTTPS o HTTP seguro. Se usa, por ejemplo, en los bancos. Otros protocolos son el ftp, de transferencia de ficheros, o el mailto, que le indica al navegador que tiene que lanzar el programa por correo que tenga configurado.
Usuario:password@
No se suele encontrar habitualmente, salvo en páginas "trampa", que engañan al usuario pensando que se encuentran en otra. Por ejemplo, http://www.microsoft.com:loquesea@sitiomarrullero.com no llevaría a nuestro querido monopolio, sino a una página de un sitio llamado sitiomarrullero.com
Dirección/sitio
Los sitios siguen sus propias reglas, que veremos a continuación
Directorio/fichero
Internet surgió en el mundo Linux, luego la forma de expresar los directorios y ficheros es como en ese mundo. Especialmente tenéis que tener en cuenta dos cosas: mayúsculas y minúsculas se consideran diferentes (no como en Windows), y las barras están inclinadas hacia la derecha. Aunque si el cliente o el servidor es Windows puede entender la otra opción, en general no es así.
Puerto
Cada protocolo está asociado a un servicio en la máquina que sirve, y cada servicio está asociado a una dirección, que es simplemente un número que es generalmente único o específico de un servicio. A este número se le suele llamar puerto. Generalmente no se ve, porque se usan los valores por defecto; por ejemplo, 80 para HTTP; pero en algunos casos interesa usar puertos fuera de estos valores convencionales, porque no se tenga privilegios para usarlos (sólo el superusuario o administrador puede usar puertos por debajo del 1000), o, simplemente, porque ya haya un servicio ejecutándose en ese puerto; en ese caso, hay que decir específicamente qué puerto es el que va a contestar las peticiones (en el que esté ejecutándose el servicio), y se podrán ver cosas como http://chiringuito.com:8080/directorio/fichero.
Fragmento
Se refiere a una parte de un documento. Por ejemplo, este mismo tutorial tiene al lado de cada sección una almohadilla que contiene un enlace a la misma, para hacer más fácil copiarla/pegarla. De esta forma, puedes referirte por ejemplo a la siguiente sección y navegar directamente hasta ella, del mismo o de otro documento.
Variables
La mayor parte del contenido de Internet no son páginas estáticas, sino generadas dinámicamente; una de las forma de pasarle órdenes al servidor es usando estas variables y valores. Lo veréis en muchísimos sitios web. Ahora mismo no tenéis que preocuparos demasiado, pero en el momento que se escriban programas para contestar al cliente y generar páginas sobre la marcha habrá que tener en cuenta e interpretar estas variables y su valor

Vamos a ver la parte de los dominios, es decir, la dirección del sitio, la tercera de las que hemos visto anteriormente. En Internet, todas las cosas suelen tener un nombre (no siempre; lo sí tienen siempre es un número del tipo 150.214.30.30), tal como www.michiringuito.com. Y esos nombres no crecen en los árboles, ni salen haciendo encantamientos: valen un dinero. Pero no todos valen igual, y, además, puede uno librarse de pagar a veces.

El nombre ese dichoso está dividido en más de dos partes, separadas por puntos. Empecemos a mirarlo por la derecha:

Encontrar un nombre no siempre es fácil, aunque nada más fácil que coger la palabra que se te ocurra y añádele "alia" al final, y ya lo tienes. En algunos casos se trata de un verdadero arte, sobre todo si quieres que el nombre sea parte de la imagen del sitio. Pero tratar de eso es demasiado extenso para este tutorial.

Bloque 3

  1. Conseguir una dirección gratuita .tk en Dot.tk que apunte al sitio web que hemos creado anteriormente en Google Sites o en algún otro sitio gratuito.

5 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 o plantilla 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. Precisamente, Google Sites tiene ese mismo enfoque: se crean sitios con temas comunes, en vez del desaparecido Google Pages, que sólo estaba enfocado a crear páginas web.

Atención: se está usted adentrando en una zona de acrónimos. Si no sabe qué significa alguno, por favor pregunte a su profesor o monitor más próximo.

En Linux, hay diferentes opciones. Como en el caso anterior, se puede usar Bluefish, NVu o KompoZer, estos dos últimos mencionados anteriormente. En el mundo Mac, posiblemente haya una opción que le da mil vueltas a todas las demás, iHTML o algo así. Pero como es un mundo ignoto para mí, no digo nada. Si alguien sabe algo, que me escriba. Todos estos editores permiten insertar enlaces sin, por lo pronto, necesidad de teclear código. Por lo pronto lo único que pretendemos es que, antes de ponerse a crear un sitio web, se tenga clara su estructura y se plasme en los enlaces de unas páginas a otras.

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. En algunos sitios gratuitos y en todos los de pago se usan programas que trabajan con un protocolo llamado FTP (por 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 cinco ficheros o más de una sola vez. La siguiente opción es usar programas clientes específicos para transferir ficheros usando 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.webcindario.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. Hay otras formas de subir ficheros, pero suelen ser específicas de programas de edición, y, en muchos casos, transparentes al usuario.

Bloque 4

  1. Usando algún editor, crear un sitio web con una página por cada bloque de ejercicios de este tutorial (al menos las que hemos hecho hasta ahora) y subirlas usando o bien el propio mecanismo que ofrezca el cliente, el sistema de gestión de ficheros a través de la web u otro programa tal como FileZilla para transferirlos. También se puede hacer con Dropbox, Google Sites o Google Drive, pero se valorará que se haya usado un sitio que permita publicación flexible y al que se puedan subir ficheros creados por el usuario.

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

Durante el año 2001, se comenzaron a hacer 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. Todas ells están basadas en sistemas de gestión de contenidos (CMS), en algunos casos libres (como en Wordpress) o propietarios (Blogspot u otros como Blogia).

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 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. Blogspot pertenece a Google, y por tanto siempre es una buena opción. También Wordpress.com ofrece alojamiento basados en este programa

Una vez creada la bitácora, conviene darla de alta en sitios tales como Bitacoras.com, 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.

Las bitácoras forman parte de un gran ecosistema social, y la tendencia hoy en día es a conectarlas con sistemas de microblogging como Twitter o redes sociales como Facebook. En cualquier caso permiten crear fácilmente sitios web, siempre que nuestra intención sea actualizarlos periódicamente a base de apuntes cortos y recibir comentarios sobre los mismos, en vez de crear páginas más extensas y estáticas. En general, si lo que quieres es crear presencia personal o profesional en Internet un blog es la mejor forma de hacerlo.

Bloque 5

  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.

7 La percha es lo que importa: la estructura de una página web #

La estructura de una página web es siempre la misma: tiene una cabecera y un cuerpo. En la cabecera va información relacionada con la página que no se va a presentar salvo en el título de la ventana, aunque puede ser leído (y lo es) por el navegador y por los buscadores y usada para indexarla. En el cuerpo va la información que realmente va a ser presentada dentro de la ventana del navegador. Conviene distinguir entre lo que vamos a poner en un sitio y en otro, aunque en realidad lo único imprescindible es el cuerpo (si es que queremos que en la página ponga algo, claro).

El código HTML que corresponde a esta estructura lo vemos a continuación (esqueleto.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15"> <title>Esqueleto de una página web</title> </head> <body> <h1>Título de la página web</h1> <hr> <address>JJ Merelo Avenida Da Granada</address> <!-- hhmts start -->Last modified: Mon Jul 5 10:30:06 CEST 2010 <!-- hhmts end --> </body> </html>

Es bastante similar a la estructura que hemos visto anteriormente, salvo que le hemos añadido una poca más información. En todo caso, está generado automáticamente por un editor (el emacs, en este caso). Veamos por partes lo que contiene.

La primera línea, antes incluso de la declaración HTML, es una declaración de tipo de documento. No es estrictamente necesaria, pero dada la cantidad de versiones de HTML en existencia, el navegador tiene que intentar averiguar de qué versión se trata usando algunos trucos. Eso enlentece la presentación de la página, y puede causar ambigüedades en diferentes navegadores. En esta línea se hace precisamente eso: se dice que se va a usar la versión 4.01 Transitional. La sintaxis es un poco críptica, pero normalmente no es del tipo de cosas que hay que escribir a mano. La parte última que incluye un URL se puede suprimir, sólo es necesario hasta donde se declara la versión.

La declaración de tipo de documento no forma parte en sí del mismo; éste empieza a continuación con la etiqueta html, que envuelve el documento entero. A continuación viene head, que declara la cabecera del documento. Dentro de head es donde se pone el title o título del mismo, que es una cadena de texto que aparecerá en el título de la ventana habitualmente. Como tal, es sólo texto sin ningún tipo de estructura ni formato. En esta zona es también donde van las etiquetas meta, que sirven para dar información al navegador y a buscadores. Por ejemplo, en este caso usamos los atributos http-equiv para poner información como si la hubiera enviado el propio servidor web; en este caso se declara que el documento es HTML. Así, aunque el servidor esté despistado el navegador sabrá qué tipo de página es.

Dentro de estas etiquetas meta se mete información también que describe el documento usando los atributos name y content, para asignar valores a variables de esta forma:<meta name="keywords" content="html, web, www, creacion, diseño"> que asigna a la variable keywords, o palabras clave, los valores indicados, lo que permite también indexarlo en los buscadores usándolas. Más etiquetas pueden ser description, author, y generator, donde se suele poner el programa que se ha usado o se inserta automáticamente por parte del mismo. En cualquier caso, conviene conocer cuales son las prácticas habituales sobre el uso de las mismas mismo

Aunque caben más elementos en la cabecera, vamos a pasar al body o cuerpo. Aquí es donde está el documento en sí, el texto y los elementos de descripción del mismo. Por lo pronto incluimos sólo la etiqueta h1, o header (cabecera) de primera clase, que suele ser única y es entendida como el título del documento. Es opcional, pero es conveniente. Especialmente es conveniente que se use en vez de resaltes simplemente estéticos. h1 afirma categóricamente cuál es el título del documento; es conveniente que sea el mismo que se ha incluido en code title, pero no estrictamente necesario; de la misma forma, es conveniente que sea único.

El resto de los elementos son más opcionales todavía: hr es una línea horizontal, que sirve para separar el documento en sí del último elemento, la dirección o adress de la persona que lo ha creado. Aparece en cursiva pero se comprende perfectamente cuál es el cometido que tiene dentro del documento. Evidentemente, esto va más destinado a los programas y aplicaciones que al ser humano, que sabe distinguir una dirección a la legua, pero hay que tener en cuenta que mucho de los que se incluye en una página web tiene ese cometido.

Bloque 6

  1. Usando el lenguaje HTML, crear una página web con un título, guardarla, subirla a alguno de los sitios que se han creado y visualizarla.

Se puede consultar adicionalmente un tutorial en inglés que explica como usar las etiquetas meta para optimizar la encontrabilidad de nuestras páginas por parte de los motores de búsqueda.

8 Mejorando lo presente: colores, resaltes e imágenes #

Las páginas con letras negras sobre fondo gris como las que hemos visto anteriormente 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 <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 (un navegador para Linux, basado en el mismo motor que el Safari para Mac) se ve a la derecha del mismo. En esta página incluimos una serie de etiquetas que sirven para resaltar parte del texto. Conste en todo caso que el ejemplo anterior no es la mejor forma de presentar el texto, sino un simple ejemplo de etiquetas HTML básicas y cómo usarlas. La forma correcta de hacer estas cosas es usando las hojas de estilo CSS que se verán más adelante.

Lo primero que se ha hecho es cambiar los colores que salen habitulamente en la página, poniendo los nuestros 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 algún otro de los colores admitidos por el W3C) 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 a menos que sea por algo similar: subrayado discontinuo, por ejemplo. También esto se verá en otra parte del curso.

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 sería un negro negruzco, de bastante mal gusto. De hecho, #000000 correspondería al negro, mientras que #ffffff sería color blanco. Para conseguir un color puro, por ejemplo, el rojo, habría que escribir #ff0000. Cuando aparecen números hexadecimales repetidos se pueden reducir a una sola cifra, de esta forma #f00.

El resultado del código anterior 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). No perder nunca de vista que la selección de colores de una página no es arbitraria, conviene consultar manuales tales como este o éste de la Webera.

A continuación de la selección de colores, usamos otra etiqueta: 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á si no se especifica de otra forma 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), aunque, en la práctica, en la mayoría de los navegadores ambas 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 primera indica que el texto es importante, tiene énfasis, mientras que la segunda simplemente indica que las letras deben aparecer tumbditas. 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). El equivalente semántico es strong, que habitualmente se comporta de la misma forma, pero indica con más claridad que se trata de un texto que se desea resaltar. 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 o PNGs, mientras que para imágenes grandes, fotos escaneadas, y cosas por el estilo se suelen usar los JPGs. También se admiten formatos de fichero sin comprimir, tal como el BMP o el TIFF, pero nadie en su sano juicio los usaría (son demasiado pesados). 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; una vez más, es mejor que se deje eso a quien se encargue de la presentación). Finalmente, conviene siempre añadir una etiqueta alt con una pequeña descripción de la imagen; que aunque normalmente no se ve (sólo para que algunos navegadores 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 si las opciones de la carpeta no incluye mostrar las extensiones no nos daremos cuenta; 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, si este es Linux o Unix, no las encontrará, si en el nombre de fichero las hemos puesto en minúsculas. En general, cuando se trabaje en un fichero habrá que tener cuidado y poner siempre en las opciones de carpeta la visualización de la extensió para que se pueda ver correctamente.

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. Por otro lado, 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 el atributo valign 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 o conjunto de tipos 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). Por otro lado, el atributo face permite especificar familias de tipos de letra, con prioridad decreciente. Si decimos Verdana,Helvetica,sans serif tratará primero de buscar una fuente que se llame como la primera, luego como la segunda, y finalmente un tipo genérico de fuentes, las fuentes sans-serif.

El principal objetivo de enseñaros la etiqueta font es que aprendáis a evitarla como la peste. Una buena página web no debe usarla; hay métodos más serios y eficientes de cambiar el tipo de letra, pero explicarlos excede el nivel de este tutorial. De hecho, se se desaconseja su uso a partir del HTML4 y se sustituye por especificación usando hojas de estilo. Sin embargo, todavía es común encontrársela en código HTML generado por procesadores de textos y en todo caso se puede usar para crear prototipos iniciales de páginas que más adelante se maquetarán usando CSS, como mandan los cánones.

Bloque 7

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

9 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 (aunque no se debe) 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 (porque es un lenguaje de descripción de la estructura, no de la apariencia de una página). 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 cuatro 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 cero, para que no se visualicen las líneas, salvo que uno pretenda crear algún tipo de efecto estético (lo que tampoco se debe). Las celdas no tienen por qué 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, hay también opciones para agrupar celdas y crear cabeceras que agrupen varias columnas, o datos que ocupen varias filas, lo que se consigue 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 hasta ocupar el 99% de la anchura. Es bastante aconsejable hacerlo así, aunque también se puede poner un valor absoluto (en puntos o píxeles) poniendo simplemente un número.

Como resulta habitual en este tutorial, se deben evitar las etiquetas que especifiquen la apariencia en HTML. Existen, pero no se tocan. La apariencia se debe delegar a las hojas de estilo CSS, que están para eso.

Otra estructura compleja que necesita varias etiquetas son las listas. 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-4.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.

El último tipo de lista se ha usado más arriba, y es aquella en la que cada elemento tiene un título. Se usa dl para abarcar la lista, dt como título de cada elemento, y dd para desarrollar el elemento, como vemos en el ejemplo contenido en el fichero ej5-5.html.

<dl type='disc'> <dt>Título ítem 1</dl> <dd>Contenido ítem 1</dd> <dt>Título ítem 2</dl> <dd>Contenido ítem 2</dd> </dl>

Este tipo de listas no se usan tanto como las anteriores, y también se suelen formatear de forma extraña, pero son la mejor opción si lo que queremos representar es algo como un diccionario, glosario o lista de definiciones. Como se ve, el comportamiento por omisión es poner los títulos en negrita y la definición indentada hacia la derecha.

[Ejercicio de tablas]

Bloque 8

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

10 La H del HTML: enlaces hipertexto #

Poco hemos visto hasta ahora sobre los enlaces, limitándonos a hablar de los demás elementos estructurales de la página. Sin embargo, los enlaces son los que hacen hipertexto al lenguaje HTML y por lo tanto hay que aprender a usarlos. Los enlaces usan dos tipos de etiquetas, a y link, pero aquí hablaremos sobre todo de la primera. a significa anchor o ancla, e indica un punto de navegación (imagino, si no, no sé por dónde va la metáfora).

Esa navegación puede ser hacia fuera, lo que se denota con el atributo href: <a href='http://un.url'> es un enlace a un URL determinado, que sigue las reglas que se han indicado anteriormente. Si se trata de una dirección completa, habrá que incluir el nombre de dominio; para las direcciones del mismo sitio se puede usar un camino absoluto (que comience por /) o relativo (comienza por cualquier letra, y se desarrolla a partir del directorio en el que se encuentra uno; siguen las mismas normas que los directorios, inclusive uso de .. para directorio superior). Los enlaces a un fragmento del mismo documento se indican con la almohadilla; por ejemplo, un enlace a esta sección será <a href='#href'>

Aunque la mayor parte de los navegadores no son demasiado delicados con que se pongan comillas o no, conviene ponerlas. La mayor parte de los URLs no incluyen espacios en blanco, pero si los incluyeran ahí se consideraría que ha acabado la dirección.

Los enlaces aparecerán resaltados en la página con un color que habitualmente es azul y subrayados, aunque esto último ha pasado de moda últimamente. Y el comportamiento es lo seguramente conocéis: al situar el ratón sobre ellos y pulsar el botón izquierdo vamos a la página destino (si es que es una pa ina, que también hay otras posiblidades).

Por otro lado, el mismo símbolo a sirve también para declarar puntos de destino de un enlace dentro del mismo documento, los fragmentos que hemos visto anteriormente. En vez del atributo href, se usa name de esta forma <a name='nombre_fragmento'>título del fragmento</a>. El título del fragmento puede estar vacío, pero no es aconsejable. Se puede poner, por ejemplo, alrededor de las etiquetas h2 u otras a las que se quiera enlazar (una imagen, o un título de sección, o el principio de un párrafo, o el párrafo entero, en realidad da igual). A diferencia de su hermano con el atributo HREF, no hay ninguna forma de revelar la existencia de este destino de enlace, una vez más por omisión, así que es conveniente acompañarlo de un a href que enlace al mismo para poder "recogerlo" y poder enlazar fácilmente (como sucede en este tutorial, por ejemplo; se suele usar la almohadilla para señalarlos).

Otros dos atributos más se pueden usar en esta etiqueta acompañando al href.

Hay comportamientos bastante habituales en enlaces que se deben evitar. Primero es usar frases o nombres genéricos dentro del enlace tales como "pincha aquí" o "esta página". Conviene decir qué es lo que hace esa página. Por supuesto, también es muy mala costumbre meter la propia dirección URL, salvo que queramos especificar algo sobre ella o cualificarla. Finalmente, el hacer que se cree una página nueva al pulsar sobre un enlace hace que no podamos usar una de las funciones más útiles del navegador: el botón que te lleva a los anteriores sitios visitados. Si alguien quiere abrir una ventana nueva, ya la abrirá, no vas a perder clientes por eso (y sí por imponerle comportamientos).

Bloque 9

  1. Crear una página o entrada en el blog con enlaces a otras páginas, y a las de algunos de los compañeros de clase o gente conocida.

11 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="mostrar.cgi" 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 el formulario anterior, 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 y hemos usado un URL relativo, que tendréis que convertir en absoluto si lo queréis usar en otra página que no esté en el mismo servidor. 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 la persona que lo rellena no lo tiene instalado; lo más útil es usar, simplemente, un CGI. Si decidimos que se envíe por correo, aparte de la action indicada se debe usar como method POST y añadir como atributo enctype='text/plain'.

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, ShowIP 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). También es una buena opción usar las hojas de cálculo de Google docs, que te permiten crear un formulario en nada y enviar los resultados a una hoja de cálculo que se puede manipular fácilmente.

En cuanto al method, hay dos valores posibles: post y get; en este momento, no vale la pena preocuparse mucho por la diferencia entre ambos, 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 (aunque, por supuesto, no es la mejor opción). 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

Bloque 10

  1. Realizar un formulario que corresponda a un examen de respuesta múltiple, en el cual cada pregunta tenga diferentes opciones, 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.

12 Marcas semánticas #

Como se ha indicado, HTML es un lenguaje de descripción estructural, por eso tiene muchas etiquetas que se usan para describir el contenido de lo que están marcando, es decir, qué papel ejercen. No todas se usan en una página habitual, y además, es del tipo de cosas que no suelen generar ni los procesadores de textos ni los editores visuales. Sin embargo, son imprescindibles para la comprensión del texto sobre todo de forma automática; por eso se llaman semánticas, porque añaden significado a la palabra que marcan, indicando de qué se trata. Vamos a ver algunas de ellas, sin ningún orden en particular.

blockquote
Sirve para insertar citas dentro del texto, de esta forma
A quien madruga Dios le ayuda
acronym, abbr
Para acrónimos y abreviaturas, con el atributo title para indicar qué es lo que significan: Excmo. Sr. Rector de la UGR. Si se pasa el ratón sobre las palabras anteriores aparecerá en un cuadro el significado de los mismos.
code, var
La primera es para insertar código dentro del texto, y la segunda para indicar el nombre de una variable tal como $este. code se usa en este tutorial para casi todos los ejemplos.

Uno de los problemas que tiene el HTML es que no tiene etiquetas para decidir cuándo empieza y acaba un bloque estructural. Por ejemplo, h2 indica dónde empieza un capítulo o sección, pero el final del mismo está implícito en la siguiente aparición de la etiqueta. Por eso, hay dos etiquetas que visualmente no hacen nada (salvo que se modifique la apariencia, claro), pero que permiten agrupar estructuras. Una, div, se suele usar para agrupar partes grandes del texto; por ejemplo, para la zona de navegación, para cuadros de texto; en general, cualquier cosa que abarque otras estructuras de nivel inferior. span, sin embargo, se usa para agrupar varias palabras. Cualquiera de ellos se puede modificar de forma que tenga una apariencia determinada, aunque se aconseja que se haga con hojas de estilo.

Bloque 11

  1. Crear un pequeño diccionario de citas, con cada autor de la cita calificado por su título correcto. Usad marcas semánticas de las anteriores, y usar div para agrupar citas que tengan algo en común.

Contenido de esta sección

13 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:

Sin embargo, llegado a este punto, quizás lo más conveniente es dejar que haya un sistema que se ocupe automáticamente de la navegación por el sitio. Lo más simple es usar un sistema de gestión de contenidos o CMS (Content Management System), de los cuales los más simples son las bitácoras comentadas anteriormente.

Bloque 12

  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 o bien añadirlo a Google, esperar que esté indexado y añadir la casilla de búsqueda correspondiente.

14 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.

15 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 5, de A. Álvarez García de la editorial Anaya Multimedia, o bien la HTML y XHTML (Paso a Paso), de Faithe Wempen, editado por Microsoft. La guía definitiva de Musciano y Kennedy sigue siendo una buena referencia, pero es difícil de encontrar en castellano.


Este material está disponible bajo los términos de la licencia GNU FDL.
¡CSS Válido! Valid HTML 4.01 Transitional
Juan J. Merelo