Práctica 3. Creación de páginas web
Preparación de la sesión
En esta práctica vamos a crear un página web utilizando el servicio de páginas personales de la UJI.
Para poder hacerlo, una vez encendido el ordenador del laboratorio de prácticas, seguiremos los siguientes pasos:
- Seleccionaremos el modo Windows para entrar en red.
- Dentro del grupo de programas Microsoft TCP/IP-32 haremos doble click sobre el elemento de programa TELNET.
- Realizamos los pasos necesarios para realizar una CONEXIÓN a la máquina anubis.uji.es.
- Introducimos nuestro login que será del tipo alxxxxxx y nuestra contraseña.
Creación de una página personal
Una vez que estamos en una sesión telnet con anubis, podemos preparar los directorios y archivos necesarios para poder ofrecer nuestras páginas personales. Para ello, hemos de crear un directorio llamado www y darle permisos de lectura y de paso para todo el mundo.
Esto puede hacerse mediante los siguientes comandos Unix:
mkdir www chmod a+rx www
Para comprobar que efectivamente, hemos creado este directorio, podemos teclear:
ls -ld wwwCon lo que deberá aparecer en la pantalla:
drwxr-xr-x 2 alxxxxxx doc 512 Apr 16 19:20 www
Para que podamos conectarnos a nuestra página, además, hemos de crear un archivo que será la puerta de entrada a nuestro web. Este archivo se ha de llamar index.html
Podemos crear un archivo de prueba de la siguiente forma:
cd www echo "HOLA MUNDO" > index.html chmod a+r index.html
Con la última orden, hemos dado a nuestro fichero permisos de lectura para todo el mundo. Si no lo hiciéramos, cuando alguien intentara acceder a nuestra página, el navegador le diría que no puede acceder al mismo. Recuerda: todos los ficheros deberán tener permiso de lectura para todo el mundo; los directorios, además, deberán tener también permisos de paso.
Acceso a la página personal desde un navegador
Para comprobar que efectivamente hemos creado una página web, podemos utilizar un navegador. En el ordenador seguiremos los siguientes pasos para ver nuestra primera página (no cerraremos la sesión telnet ya que vamos a continuar trabajando con ella):- Del grupo de programas Netscape Communicator seleccionaremos el elemento de programa Netscape Navigator.
- En el cuadro de texto Go To: teclearemos la dirección: http://www4.uji.es/~alxxxxxx (Para escribir la tilde de la ñ en un ordenador con Windows mientras mantenemos pulsada la tecla ALT teclearemos 0126 en el teclado numérico).
Si hemos hecho todo correctamente, en la ventana del navegador deberá aparecer sobre fondo gris el texto: HOLA MUNDO.
El lenguaje HTML (Hyper Text Model Language)
Aunque estemos viendo en el navegador el mensaje HOLA MUNDO, el fichero index.html todavía no tiene nada escrito en HTML. De hecho, solo es un fichero de texto.
Para que sea un fichero HTML, ha de contar con una serie de elementos delimitados entre lo que se denomina etiquetas (TAGS)
Los elementos mínimos con los que debe constar un fichero HTML, son: el documento HTML, el encabezado del mismo y su cuerpo. Esto en lenguaje HTML se escribiría de la siguiente forma:
<HTML> <HEAD> </HEAD> <BODY> </BODY> </HTML>
Un documento HTML comienza con la etiqueta <HTML> y acaba con </HTML>, el encabezado está delimitado por las etiquetas <HEAD> y </HEAD>; y el cuerpo estará comprendido entre las etiquetas <BODY> y </BODY>.
En el encabezado, es donde se ponen entre otros: el título de nuestra página, la información relativa a los autores, las palabras claves por la que queremos que se encuentre nuestra página y un resumen de la misma para los buscadores.
En el cuerpo es donde escribiremos aquello que veremos en la ventana del navegador cuando seleccionemos nuestra página.
Añadiendo algunos elementos más tendríamos:
<HTML>
<HEAD>
<TITLE>El título aparece en la barra del navegador</TITLE>
</HEAD>
<BODY>
<h1>El título de una sección</h1>
<h2>El título de una subsección</h2>
<p>Un párrafo nuevo
<p>Otro párrafo
Este no es un párrafo ya que no hemos puesto la etiqueta p
</BODY>
</HTML>
Después de esta breve introducción, podemos probar a ver que aspecto presentaría este documento desde un navegador.
Para ello, editaremos el fichero index.html y copiaremos en él el ultimo ejemplo.
Desde la sesión telnet, abriremos el fichero index.html con un editor de textos. El que vamos a utilizar en esta práctica se llama joe (si estás a gusto con cualquier otro puedes utilizarlo en su lugar). Para abrir el fichero index.html utilizando joe, teclearemos en la línea de comandos:
joe index.html
Una vez dentro de joe, las combinaciones de teclas mas usuales son:
| [CTRL]K+H | Muestra un menú de ayuda |
| [CTRL]K+X | Graba lo que hallamos escrito y sale |
| [CTRL]C | Sale del editor sin grabar |
Tecleamos el ejemplo anterior y pulsamos la combinación de teclas [CTRL]K+X cuando hallamos acabado (Nota: para borrar carácteres podemos utilizar [CTRL]D).
Lo que veremos en el navegador será algo similar a:
El título de una sección
El título de una subsección
Un párrafo nuevo
Otro párrafo Este no es un párrafo ya que no hemos puesto la etiqueta p
Atributos
Las etiquetas pueden incluir etiquetas que varien la forma de actuar de las misma. Por ejemplo mediante el atributo BGCOLOR de la etiqueta BODY podemos especificar el color de fondo de nuestra página. Si en el ejemplo anterior modificamos la etiqueta:
<BODY>
de forma que ahora sea <BODY BGCOLOR="#00FF00">. Al guardar el fichero y recargar la página (reload), el color de fondo de nuestra página será azul, ya que hemos puesto a cero los colores rojo y verde y al máximo (255, FF en hexadecimal) los valores correspondientes al azul. Para conseguir que el color de fondo sea blanco, habríamos de poner <BODY BGCOLOR="#FFFFFF">.
Descarga de la plantilla para la realización de los proyectos
El trabajo de la asignatura habrás de hacerlo en un determinado formato. Para que esto no te sea costoso, tienes disponible una plantilla del mismo ya hecha, en la que puedes ver como se utilizan los elementos de HTML que vas a necesitar.
Para descargar la plantilla y los ficheros asociados desde la sesión telnet podemos hacer lo siguiente:
$ ftp lorca.act.uji.es Name (): anonymous ftp> cd pub/e08 ftp> mget * mget e08.html? y mget fondo.gif? y mget titulo.gif? y mget uji2.gif? y ftp> bye
Si ahora ejecutamos la orden ls -l, deberá aparecer algo similar a:
-rw-r----- 1 alxxxxxx doc 729 Apr 16 22:01 barra.gif -rw-r--r-- 1 alxxxxxx doc 8733 Apr 16 22:01 e08.html -rw-r----- 1 alxxxxxx doc 308 Apr 16 21:02 index.html -rw-r----- 1 alxxxxxx doc 16528 Apr 16 21:33 titulo.gif -rw-r----- 1 alxxxxxx doc 1692 Apr 16 21:33 uji2.gif
Si nos fijamos, aún debemos de dar permisos de lectura a todos los ficheros nuevos para que puedan ser vistos desde el navegador, para ello podemos utilizar la orden chmod a+r. Después de esto si en el cuadro de texto Go To: del navegador teclearemos la dirección http://www4.uji.es/~alxxxxxx/e08.html y podremos ver la copia de la plantilla desde la web personal.
Para terminar la práctica prueba a editar la plantilla y encontrar los elementos que ya conoces del HTML. Si lo deseas puedes probar a comenzar a personalizar esa plantilla con los nombres de los autores, el título, etc.
Si te surge alguna duda sobre algún elemento de HTML que aún no hayamos visto, puedes ir a la siguiente dirección: http://lorca.act.uji.es/e08/curso_1998-99/ayudas/tutorial_html/ew_000.htm.
Si quieres, también puedes utilizar los siguientes enlaces para bajarte estos ficheros y así poder trabajar sobre ellos en tu ordenador (para descargarlos en lugar de visualizarlos, habrás de pulsar el botón derecho sobre los enlaces y seleccionar una opción parecida a Guardar enlace como ... -depende del navegador-).
