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 poder acceder a la red.
- Dentro del grupo de programas Microsoft TCP/IP-32 haremos doble click sobre el elemento de programa TELNET.
- Realizamos una conexión a anubis.uji.es.
- Introducimos nuestro login, alxxxxxx, y nuestra contraseña.
Creación de una página personal
Una vez que estamos en una sesión telnet con anubis, debemos preparar los directorios y archivos necesarios para poder ofrecer nuestras páginas personales. Para ello, hemos de crear un directorio llamado www al que deberá poder acceder cualquier usuario.
Esto puede hacerse mediante los siguientes comandos Unix:
mkdir www chmod a+rx www chmod go+x ~/
(La tilde de la ñ en Windows se obtiene manteniendo pulsada la tecla ALT mientras se teclea 0126 en el teclado numérico)
Para comprobar que efectivamente, hemos creado este directorio, podemos teclear:
ls -ld wwwCon lo que deberá aparecer en la pantalla algo similar a:
drwxr-xr-x 2 alxxxxxx iif 512 Apr 16 19:20 www
Para que anubis permita el acceso web a nuestra cuenta, debe de existir en el directorio ~/www/ un archivo llamado index.html. De momento crearemos 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 tiene permisos para consultar la página. 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 del laboratorio podemos seguir los siguientes pasos para ver nuestra primera página (no es necesario cerrar 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.
Si hemos seguido correctamente todos los pasos, en la ventana del navegador deberá aparecer sobre fondo gris el texto: HOLA MUNDO.
El lenguaje HTML (Hyper Text Markup 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, sólo 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. Estos en HTML se delimitan de la siguiente forma:
<HTML> <HEAD> </HEAD> <BODY> </BODY> </HTML>
Un documento HTML comienza con la etiqueta <HTML> y acaba con </HTML>, el encabezado se encuentra entre las etiquetas <HEAD> y </HEAD>; y el cuerpo entre las etiquetas <BODY> y </BODY>.
En la parte correspondiente al encabezado, aparecen entre otros: el título de la 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 la parte correspondiente al cuerpo es donde se escribe aquello que será mostrado por el navegador al visualizar la página.
Completando un poco el esqueleto anterior tenemos:
<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 introducción, podemos ver que aspecto presenta el documento anterior desde un navegador.
Para ello, editamos el fichero index.html y copiamos en él el ultimo ejemplo.
Desde la sesión telnet, abrimos 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
Las combinaciones de teclas de joe más interesantes son:
| [CTRL]K+H | Muestra un menú de ayuda |
| [CTRL]K+D | Graba lo que hallamos escrito |
| [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 se puede utilizar [CTRL]D o Backspace según el sentido).
Si recargamos nuestra página desde el navegador, aparecerá en pantalla 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
Algunas etiquetas pueden tener atributos que definan el comportamiento de las mismas. Por ejemplo si ponemos el atributo BGCOLOR en 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á verde, ya que hemos puesto a cero los colores rojo y azul y al máximo (255, FF en hexadecimal) los valores correspondientes al verde. Es decir, de los seis digitos hexádecimales los 2 primeros indican la cantidad de rojo, los dos siguientes la de verde y los dos últimos la de azul. Por ejemplo, si queremos que el color de fondo sea blanco, deberemos poner <BODY BGCOLOR="#FFFFFF">.
Descarga de la plantilla para la realización de los trabajos
Antes de proseguir con la introducción a HTML, veremos como crear en tu cuenta una copia de la plantilla a utilizar en el trabajo.
Para descargar la plantilla y los ficheros asociados desde la sesión telnet podemos hacer lo siguiente:
$ mkdir e08 $ cd e08 $ ftp lorca.act.uji.es Name (xxxxx): anonymous 331 Guest login ok, send your complete e-mail address as password. Password: tu_dirección_de_correo 230 Guest login ok, access restrictions apply. ftp> cd pub/e08 ftp> mget * mget fotokde.jpg? y mget plantilla.html? y ftp> bye $ cp plantilla.html index.html
Si ahora ejecutamos la orden ls -l, deberá aparecer algo similar a:
-rw-r----- 1 alxxxxxx iif 29776 Apr 10 19:05 fotokde.jpg -rw-r----- 1 alxxxxxx iif 13934 Apr 10 19:07 index.html -rw-r----- 1 alxxxxxx iif 13934 Apr 10 19:05 plantilla.html
Si nos fijamos, para que la página html que acabamos de descargar pueda ser vista desde un navegador debemos de dar permisos de lectura a todos los usuarios, para ello utilizamos la orden chmod a+r *.
Una vez completados los pasos anteriores podemos comprobar que al teclear en en el cuadro de texto Go To: del navegador la dirección http://www4.uji.es/~alxxxxxx/e08/index.html vemos una copia de la plantilla desde nuestra web.
Para terminar la práctica, prueba a editar el fichero index.html y encontrar los elementos que ya conoces del HTML. Si lo deseas puedes comenzar a personalizarlo con los nombres de los autores, el título, etc. Recuerda que si algo sale mal tienes el archivo plantilla.html como copia de la plantilla original y siempre puedes volver a ella.
Para ampliar la información sobre HTML, puedes acudir a la siguiente dirección: http://lorca.act.uji.es/e08/ayudas/tutorial_html/ew_000.htm.
Alternativamente, puedes utilizar los siguientes enlaces para bajar los ficheros y poder trabajar en el ordenador de casa (para descargarlos, mantén pulsada la tecla MAYÚSCULAS a la vez que pulsas el botón derecho del ratón sobre los enlaces correspondientes).
