• Acceso a nuestras páginas.
• ¿Qué es el HTML?.
• Tutoriales HTML.
• Algunas recomendaciones.
• Programas para editar HTML.

Todas las páginas personales de cada usuario se guardan el la carpeta user_web y las del laboratorio en lab_web dentro de la carpeta de info_services tal y como se vé en la estructura de la cuenta de cada usuario.

Una vez estemos en la carpeta dónde deseemos crear la página, solo tenemos que crear el fichero principal que se llamará index.html. Ese fichero (abajo veremos con que herramientas lo podemos crear) será el que por defecto se cargue cuando no especifiquemos ninguna página desde el web dentro de nuestra carpeta.

Por ejemplo, si somos el usuario Pepito Grillo con nombre de usuario pgrillo, cuando entremos en nuestra página personal:

http://www2.iib.uam.es/~pgrillo

HTML (HyperText Markup Language) es el formato para documentos de hypertexto que se utiliza en el web. Son muchos los programas capaces de manejar este formato, tanto programas de edición de HTML específicos, como programas de edición de textos o bases de datos que permiten exportar estos textos y datos una página en formato HTML.

De todos modos, los ficheros en formato HTML (generalmente con extensión html) a diferencia de por ejemplo los ficheros en formato Word, son ficheros que se pueden leer y modificar con cualquier editor de texto sencillo, pues son ficheros ASCII en los que el texto se encuentra en claro, rodeado de etiquetas (TAGs o también traducido como marcas) de formato que son las que indican dónde el texto se encuentra en cursiva, o dónde el texto está en negrita, donde comienza o termina una tabla de datos, cual es cada uno de estos, etc...

No es mi intención describir cómo es una y cada una de estas etiquetas, pues ya existen muchos tutoriales en la internet acerca de esto. Solo pretendo introducir al usuario en cómo editar y modificar estos ficheros, y por tanto me voy a centrar en los aspectos que me parecen importantes del HTML, incluso para aquellos usuarios que no quieran editar las etiquetas HTML a mano.

Una característica que me parece básica y distintiva de un hipertexto respecto a un texto normal con gráficos, es la posibilidad de crear enlaces, ya sea dentro del texto o en las imágenes y/o botones. Estos enlaces (hiperenlaces o hipervinculos, o cómo se les quiera llamar) nos van a permitir navegar dentro de una página web entre los recursos a los que esta página tiene enlaces, que pueden ser imágenes, videos, sonidos, ficheros, programas... o muy habitualmente otras páginas web.

Estos enlaces pueden ser absolutos (una URL completa) o relativos al servidor dónde tenemos las páginas, relativos al directorio dónde está la página abierta o incluso dentro de la propia página, según omitamos parte de la información de su localización. No me voy a extender más en esto, pero es un concepto clave si queremos mantener una o más páginas sin que nos den problemas, y se explica un poco mejor en el apartado de estilo. Así pues, si estamos editando la página:

http://www2.iib.uam.es/~pgrillo/index.html

... y dentro de ella hacemos referencia a la página info.html y al gráfico fotos/pinocho.gif, se supone que en la misma carpeta en la que editamos index.html, se encontrara otro fichero llamado info.html con otra página web, y una carpeta llamada fotos dónde a su vez al menos habrá un fichero gráfico con el nombre pinocho.gif. Podemos también hacer referencia a un recurso con la dirección (URL) completa, como por ejemplo si hacemos referencia a http://www2.iib.uam.es/~pgrillo/fotos/pinocho.gif o http://www.rediris.es/correo/index.html, aunque se deben evitar referencias absolutas si, como en el primer caso, se puede hacer una referencia relativa.

También es importante tener en cuenta que los nombres de los ficheros y carpetas solo deben contener caracteres alfanuméricos (sin tildes ni eñes que no son ASCII) sin espacios y con la extensión apropiada (.gif, .html, .txt ...). Es usual poner todos los nombres de los ficheros en minúsculas, pero si deseamos utilizar mayúsculas debemos tener en cuenta que son diferentes los ficheros pepe.txt, Pepe.txt y Pepe.TXT y por tanto los debemos diferenciar al referenciarlos.

• Del World Wide Web Consortium.
  Son las páginas oficiales. Tiene un bues "Getting Started"
• Tejedores de Web.
  Una buena referencia en castellano.
• Web Maestro.
  Páginas también en castellano y con acceso algo más rápido.
• Una cutre referencia rápida que tenemos por aqui.

Algunas recomendaciones

• En una página no comercial en principio se debe dar importancia a los contenidos más que a la forma, aunque esta última es importante para hace atractiva una página, realzar los contenidos importantes y hacer que la lectura de una pagina no sea un ... aburrimiento (como estas ;-)
• Es importante que la página sea ligera. Quiero decir, que sea rápida de cargar para no aburrir al personal esperando. Esto se consigue por varios métodos:
  • No cargando en exceso la página con gráficos, programas en Java y JavaScript.
  • Dando de antemano las medidas de los gráficos en la página. De este modo, el navegador puede mostrar el texto antes de cargar los gráficos ya que sabe qué espacio debe dejar para estos.
  • Repitiendo los mismos gráficos varias veces, incluso entre distintas páginas. Con esto conseguimos que una vez cargados los gráficos en la cache del navegador no se tengan que cargar cada vez que estos aparecen.
  • Depurando las páginas a mano para eliminar códigos sobrantes que puedan haber introducido los editores. Esto puede suponer hasta un 30% del código de una página HTML y por tanto un 30% de penalización en la carga de esta.
• Se deben utilizar referencias relativas a la página en la que nos encontramos en la medida de lo posible. Con esto conseguimos que si en un momento dado deseamos cambiar la localización de un conjunto de páginas (moverlas a otra carpeta o a otro servidor), nos baste con moverlas de lugar sin perder la relación que tienen unas con otras.
• El código ASCII no contempla muchos de los caracteres que utilizamos en castellano como las vocales con tilde, las eñes o la apertura de interrogación. Aunque en nuestro navegador veamos correctamente las páginas creadas en nuestro propio ordenador, es posible que otros navegadores y/u otros sistemas no vean correctamente estos caracteres. Existen códigos espaciales para representar estos caracteres que están en la tabla de arriba.
• Para alinear datos en HTML no existen los tabuladores. Debemos utilizar listas, definiciones y tablas para hacer esto. Es muy útil ver el código de páginas bien elaboradas para ver las posibilidades que nos ofrecen estas herramientas.
• Los gráficos incluidos en las páginas mediante la etiqueta <img src=xxx> siempre serán de tipos que reconozcan todos los navegadores. En concreto los tipo JPEG (extensión .jpg) se utilizan para fotografías y los GIF o PNG (.gif) se utilizan para logotipos y gráficos con colores más o menos uniformes.
• Por último, para aquellos interesados de verdad en el estilo, existen definiciones de estilo para definir márgenes, colores, tipos de letra, interlineados, etc... utilizando la etiqueta <style>.