Objetivo: Crear una página html simple sin marcos con imágenes, texto html y enlaces.
* Esta explicación vale para Dreamweaver CS3 de OS X y de XP.
Hoy vamos a aprender cómo se hace una página simple en html. Hemos hablado en otras ocasiones de los servidores web Apache, y lo fácil que resulta tener nuestro propio servidor. Como las conexiones caseras suelen ser bastante lentas (sobretodo en la subida), la ligereza de la página es una aliada para nuestros objetivos.
Para la explicación usaremos el Adobe Dreamweaver CS3.
1. Lo primero de todo es abrir un nuevo documento HTML. Usaremos el diseño visual (hay otras dos opciones de visualización: como código o una mezcla). Aquí, aunque no vamos a trabajar con lenguaje html conviente ir mirando como se articula. Es un lenguaje bastante sencillo y no tardaremos en encontrarle su lógica.
El elemento clave para trabajar con el dreamweaver es este:
Permite configurar los elementos que tengamos seleccionados en la página (ya sea texto, una imagen, una tabla, etc).
- Al nuevo documento le asignamos un título (el nombre por el cual será reconocido por la web, y que saldrá siempre) y acudimos a “propiedades de página”. Ahí tenemos las opciones de personalización; lo más interesante es determinar una tipografía adecuada, adecuar los márgenes a nuestras necesidades y determinar el comportamiento de los links. (modify/page properties).
2. A continuación determinaremos la estructura de la web e insertaremos sus elementos. Para ello utilizaremos los denominados “tablas” (insert/table). En nuestro caso vamos a hacer una página con un título y un subtítulo en la parte superior, una imagen en la parte central izquierda, una área de texto en la parte central derecha y un pequeño texto con las características de la página e información de contacto.
- Primero creamos una tabla con dos filas y una sola columna. Debemos comprobar que el grosor de la línea exterior de la tabla es igual a 0. Si no saldrá un marco (entendido como línea) alrededor de la tabla. En nuestro caso también alinearemos la página con el centro, para que se mantenga centrada aunque se usen distintos tamaños en el navegador web (aling/center). En el hueco superior escribiremos el título de nuestra web, y en el inferior el subtítulo. Para finalizar ajustaremos el tamaño de la tabla exactamente a la extensión del subtítulo (en este caso no nos interesa hacer dos renglones de subtítulo).
- Nos situamos debajo de la tabla superior, y creamos una nueva tabla, esta vez con dos columnas y una sola fila. La centramos. Nos situamos en el lado izquierdo y le damos a insertar imagen (insert/image). Seleccionamos la imagen que queremos poner y aceptamos. En el lado derecho de la tabla escribimos un texto. Si queremos añadir un link a la imagen solo tenemos que seleccionarla y usar el menú para añadirle la dirección correspondiente (hacia Internet o hacia otro archivo nuestro, por ejemplo, otra página web con información más detallada.
* El Dreamweaver viene configurado por defecto para dejar dos renglones si utilizas el “enter”. Para que solo baje un renglón deberás usar el “enter”+”shift”.
** Antes de introducir una imagen para la web deberemos encargarnos de que ocupe lo mínimo de espacio. Lo normal es utilizar formas específicas de grabar imágenes para web (como en el photoshop), pero podemos hacerlo nosotros. Como consejo decirte que para imagenes con pocos colores, si puedes usar GIF mejor que JPG (recuerda que las GIF son imágenes con un máximo de 256 colores, por lo que para blanco y negro o imágenes con menos colores viene mejor que la JPG). También atento a su tamaño en pixeles (La resolución de la pantalla empleada, normalmente, suele ser de 1024 x 768 – 1024 x 864 – 800 x 600. Para garantizarnos que todo el mundo pueda ver nuestra página sin que salte el scroll (columna de desplazamiento) usaremos un tope de 800 x 600 (quizás estoy siendo demasidado conservador; hoy en día casi todo el mundo usa ya resoluciones mayores). El tamaño final de la página se ajustará a los elementos que pongamos en ella.
- Por último introduciremos una última tabla individual para poner datos de la web e información de contacto. También centrado y sin márgenes.
3. Queda hacer un enlace. Para ello seleccionaremos el elemento (sea texto o imagen) que queremos convertir en un link (el texto lo seleccionamos), en nuestro caso, un texto en la tabla central derecha que ponga “enlace a google”, y que nos lleve a la página correspondiente. Como queremos que abra una nueva página (es decir, que no nos mueva de la que ya hay), en “target” introduciremos el comando “blank“. Si quisiéramos que el enlace fuera en la misma pestaña deberíamos poner “self“.
* Recuerda que el formato para escribir una página empieza siempre con un html://
4. Por último solo queda guardar el archivo con el nombre de index.html y colocarlo en la carpeta correspondiente de nuestro servidor Apache (o el que quieras usar claro). A partir de entonces, y si tienes bien configurado el puerto 80 (puerto web por defecto) hacia tu ordenador, la gente podrá acceder a tu página escribiendo tu IP externa. Solo te quedará hacerte con un nombre de domino y coordinar IP con nombre de dominio.
Espero más adelante seguir con mis explicaciones de cómo hacer una página web html un poco más compleja (con marcos).
