Subsecciones

Parte práctica

En la parte práctica vamos a profundizar de manera paulatina en el uso del lenguaje HTML. Mediante tres ejercicios diferentes nos adentraremos en el editor de HTML de Mozilla, nos bajaremos una página web de las ya existentes en Internet y jugaremos con ella realizando una serie de modificaciones y, finalmente, realizaremos una página web propia que tendremos posibilidad de poner en un servidor.

Familiarizándonos con Mozilla Composer

Mozilla, además de ser un potente navegador para el WWW, ofrece la posibilidad de editar páginas web. Esto se hace gracias a Composer, el editor de HTML de Mozilla que permite diseñar páginas web de manera bastante ágil. Existen multitud de aplicaciones para la creación de páginas HTML, unas más potentes que otras. Aunque es probable que los diseñadores profesionales utilicen otro tipo de herramientas, para nuestros propósitos, hacerlo con Composer será más que suficiente.

Una vez abierto el Composer, es importante fijarse en la parte inferior izquierda de nuestra ventana. Allí tenemos cuatro pestañas que nos ayudarán a ver nuestro contenido de diferentes formas. Apretando en la pestaña más a la derecha (la de previsualización) observaremos que todavía no tenemos nada. Veamos la siguiente hacia la derecha. Ésta nos mostrará el código fuente en HTML. La primera etiqueta arriba del todo indica que lo que viene a continuación es HTML. Vemos que se cierra al final con su etiqueta homónima $<$/html$>$. Entre medias, encontramos la cabecera (head) y el cuerpo (body). Todo lo que vemos son etiquetas (empiezan por $<$ y acaban con $>$) tal y como las hemos visto en la parte de teoría.

Empecemos introduciendo Mi primera página web entre $<$title$>$ y $<$/title$>$. Una vez que lo hemos hecho, miremos en la pestaña de previsualización. Aparentemente no ha cambiado nada. Pero si miramos en la parte superior de la ventana, veremos que nuestro título da título a la ventana. Deberíamos ver ``Mi primera página web - Composer''.

Volvamos a la ventana de edición anterior. Démosle un poco de alegría al cuerpo e introduzcamos tras el $<$br$>$ un Me llamo xxxxx y veamos los resultados en la pestaña de previsualización. Ahora ya no sólo aparece nuestro título como título de la ventana, sino que también podemos ver el texto en el cuerpo de la ventana (de hecho, es lo único que se ve, porque las etiquetas no se ven nunca). En realidad lo que estamos haciendo en la previsualización es ver el código HTML interpretado, tal y como interpreta un navegador las páginas WWW que se descarga de un servidor. En la pestaña que hemos editado tenemos la fuente, que no es otra cosa que los ficheros que contienen los servidores WWW.

El Composer de Mozilla permite crear páginas también en el modo de previsualización. Siguiendo el botón que hay en la barra de herramientas, añadamos una imagen. Probablemente antes de añadir la imagen, tendrás que descargarte una de Internet. Hazlo y una vez que la tengas en tu disco, aprieta sobre el icono de imagen en Composer. Aparecerá un diálogo en el que se nos pedirá un fichero imagen. Verás que el diálogo tiene varias pestañas para indicar las dimensiones y otras características de la imagen. Juega un poco con ellas. También es importante que veas que no te dejará introducir la imagen si no has puesto explícitamente que no quieres que la imagen tenga texto alternativo. El texto alternativo es usado por navegadores no gráficos (navegadores que sólo muestran texto) o para herramientas de ayuda a los invidentes.

Una vez que hayamos incluido la imagen, volvamos al código fuente. Veremos que hay un elemento nuevo: $<$img src="camino" alt="texto alternativo"$>$ que corresponde con la imagen (el camino es el sitio donde está localizada tu imagen en tu disco duro). La etiqueta para incluir una imagen es otra de esas etiquetas que no necesita ser cerrada y, por tanto, no hay ningún $<$/img$>$.

Sigamos con nuestro recorrido por las pestañas, viendo lo que hay en la siguiente pestaña a la derecha. En ella, podremos ver la estructura de nuestra página web. Por ahora no hay mucha cosa, pero se puede ver que de BODY emana una frase y luego una imagen.

La última pestaña (el modo normal) tiene escaso interés para nuestros objetivos, ya que se parece en definitiva a lo que podemos hacer en previsualización.

Una vez visto más o menos lo que hay en el Composer, es hora de echarle un poco de creatividad a nuestra flamante primera página. Puedes realizar los siguientes pasos en cualquiera de las pestañas; en todo caso, después de cada uno mira qué ha cambiado en las otras para ver si entiendes lo que pasa. Pregunta al profesor si tienes dudas. Los pasos que has de da dar son:

  1. Centra la imagen
  2. Añade a la línea de tu nombre y estudio en la Universidad Rey Juan Carlos, donde Universidad Rey Juan Carlos debe ser un enlace a su página web (no te olvides del http:// en el enlace)
  3. Cambia el color de fondo (ver formato casi abajo del todo)
  4. Pon un título en el cuerpo, centrado, con letra un poco más grande y en negrita (ver barra de herramientas) donde ponga Página de XXXX.
  5. A continuación de la imagen, haz una lista numerada (ver barra de herramientas). Cada elemento de la lista ha de tener un color diferente (pista: mira por Formato).

Para terminar, guárdalo como fichero index.html en la carpeta que creaste al principio y ábrelo con el navegador de Mozilla para ver cómo queda.

Inspeccionando y modificando una página web

Una de las formas de aprender a realizar páginas web, quizás la mejor, es tomar como base otras páginas ya existentes y realizar pequeñas modificaciones a nuestro gusto. Ahora que ya tenemos un poco de práctica con las etiquetas, nos descargaremos una página web bastante sencilla a nuestro disco y jugaremos un poco con ella.

Inspeccionando una página web

La página que os proponemos es http://gsyc.escet.urjc.es/docencia/asignaturas/cccom-serv-info-inet/, la página de esta asignatura. Un simple vistazo a cómo nos la muestra el navegador de Mozilla nos hará observar que hay elementos familiares (párrafos, listas, títulos, imágenes...) y otros que no lo son tanto (en especial, todavía no sabemos hacer un párrafo como el que hay entre Datos generales y Conocimientos previos).

Guárdala con imágenes en algún lugar de vuestro disco y ábrela con el Composer de Mozilla. Dedica un tiempo a inspeccionar la página desde los cuatro ángulos que ofrece Composer, sobre todo en lo que se refiere a la pestaña de edición de HTML.

Vamos a inspeccionar poco a poco el código HTML para comprender mejor cómo está hecha la página. Dentro de la cabecera daremos con unas líneas que no aparecían por ningún lado cuando hemos mirado la página con el navegador. Estas líneas se encuentran entre las etiquetas $<$!- y -$>$, lo que significa que son líneas de comentario. Los diseñadores pueden añadir comentarios a las páginas web para explicar su estructura, clarificar el diseño o, como es el caso, mostrar su autoría.

Dentro de la cabecera, también nos encontramos con las etiquetas $<$meta$>$. Estas etiquetas dan metainformación sobre la página web, o sea, otra vez información que no es mostrada. Al contrario que los comentarios, esta información va dirigida para ser procesada automáticamente por los robots que los diferentes buscadores tienen. Tener por tanto la etiqueta meta con el atributo description puede ser muy importante si queremos que nuestra página web aparezca en buscadores como Google. Muchas veces el secreto del éxito de una página en el WWW es que estos elementos estén bien indicados, ya que si no estás en los buscadores la tarea de encontrar la página puede tornarse en una tarea imposible.

Nada más entrar en el cuerpo de la página web (justo después de la etiqueta body), nos encontraremos con las siguientes etiquetas:

$<$a HREF="/index.html"$>$$<$img src="/pub/icons/gsyc.gif" ALT="GSyC" ALIGN=LEFT$>$ Grupo de Sistemas y Comunicaciones$<$/a$>$

Si vamos poco a poco, entenderemos un poco mejor qué es lo que significa. Primero tenemos un enlace que ha a http://gsyc.escet.urjc.es. Sin embargo, este enlace no es de texto, tal y como hemos visto hasta ahora, sino que incluye una imagen y un texto (todo eso es lo que está antes del $<$/a$>$). Se trata, por tanto, de un ejemplo de etiquetas anidadas: cuando hay etiquetas dentro de otras su comportamiento es, en general, aditivo.

Por último, vamos a ver brevemente el último elemento importante que desconocemos de esta página web: las tablas. El grado de complejidad de las tablas en HTML es un poco mayor, ya que requieren el uso conjunto de múltiples etiquetas. Su uso se ha popularizado, ya que permite el diseño de páginas web de forma visualmente ordenada. Sin embargo, si las etiquetas utilizadas no se usan correctamente o en el orden correcto, puede provocar que la visualización de la página no sea la deseada.

El siguiente ejemplo muestra una tabla muy simple. Observamos que la etiqueta de comienzo es $<$table$>$ y que cuenta con su etiqueta hermana de cierre de la tabla al final de la tabla. La etiqueta $<$tr$>$ se puede leer como retorno de fila, mientras $<$th$>$ y $<$td$>$ son etiquetas de celda, teniendo la primera la particularidad de que la celda es una celda cabecera (un tipo de celdas utilizadas para poner títulos).

$<$table$>$
$<$tr$>$
$<$th$>$Título:$<$/th$>$
$<$td$>$Celda$<$/td$>$
$<$/tr$>$
$<$/table$>$

Si nos fijamos bien, la tabla que vemos en la página que estamos inspeccionando contiene una tabla un poco más complicada, pero no mucho más.

Modificando la página web

A partir de ahora, vamos a ser creativos de verdad... y vamos a cumplir los sueños de muchos. Vais a poder editar la copia local de esta página web a vuestro antojo para obtener una página de la asignatura acorde a vuestros gustos. Como ejercicio te dejamos que hagas los siguientes puntos (en cualquier caso, intenta hacer las modificaciones sobre el HTML y luego observa los cambios en la pestaña de previsualización):

  1. Cambia la imagen del Grupo de Systemas y Comunicaciones por otra que encuentres por Internet
  2. Cambia el nombre de la asignatura
  3. Añade una fila de celdas más donde se pueda leer que el despacho de Gregorio Robles es el Despacho 120 en el edificio Departamental II del Campus de Móstoles
  4. Observa qué pasa cuando en una tabla introduces una etiqueta en el sitio incorrecto
  5. Cambia el enlace de primeros guiones de prácticas a tu revista favorita
  6. Cambia el texto del enlace anterior para que quede claro a dónde dirige el enlace
  7. Modifica el tamaño de Contenidos teoricoprácticos
  8. Juega con las listas encadenadas dentro del apartado de Contenidos teoricoprácticos
  9. y, por supuesto, cambia la normativa de la asignatura para que refleje lo que tú crees que debería ser

... además de lo que dentro de tus límites creativos y artísticos se te ocurra.

Crea tu propia página web

En este último apartado te pedimos que relices una página web personal y que nos la envíes por correo a la siguiente dirección: grex@gsyc.escet.urjc.es. Todas las páginas web recibidas serán expuestas en el servidor.

Piensa en no hacerla muy complicada al principio. Céntrate en lo básico para empezar y luego ya tendrás tiempo para añadirle elementos más complejos. En cualquier caso, no dudes en probar y jugar con el HTML y las diferentes formas de generar páginas web. Recuerda que hemos visto una introducción rápida al Composer y que se pueden hacer muchas más cosas con él, así que pruébalo. Y ya sabes que siempre puedes preguntar al profesor cualquier duda que tengas.


Versiones de este documento: [src.tar.gz][ps.gz][html.tar.gz][dvi.gz]
GSyC
Last updated: 2003-10-01