Las páginas web son documentos que tienen la propiedad de
poder ser visualizados en cualquier ordenador sea cual sea su sistema
operativo (Windows, Macintosh, Linux, MS-Dos, etc.). Esto se consigue
creando un lenguaje estándar compatible con todos estos sistemas.
Este lenguaje se llama HTML (HiperText Markup Language, traducido,
lenguaje de etiquetas para hipertexto). Este lenguaje evoluciona
continuamente siendo el responsable de sus normas de uso el W3C, World
Wide Web Consortium. La versión de referencia actual es la
4.01, que es la que trataremos en estas lecciones. A partir de enero de
2000 entró en vigor el XHTML (eXtended HiperText Markup
Language) prácticamente igual al HTML aunque con algunas normas
más estrictas como por ejemplo el uso de mayúsculas y
minúsculas en las etiquetas.
Las páginas escritas en HTML (o XHTML) son documentos de texto
basados en juego de caracteres ASCII reconocido por todas estas
plataformas.
Los distintos formatos que podemos dar a nuestra página
(fuentes, párrafos, tablas, listas, etc.) se definen mediante
unas etiquetas entre los
símbolos <
y >. La mayoría de las etiquetas
necesitan otra etiqueta de cierre que indique hasta donde se aplica la
etiqueta y va precedida de /.
Por ejemplo, la etiqueta <B> indica
letra en negrita (del inglés Bold). Si queremos escribir Mi
web en negrita lo indicaremos:
<B>Mi web</B>Cada etiqueta tiene una serie de parámetros que la definen
por defecto y
que pueden variarse asignándoles otro valor. Estos
parámetros o atributos se escriben sólo dentro de la
etiqueta de inicio, antes del símbolo >,
y no es necesario repetirlos en la etiqueta de cierre. Por ejemplo <a> es la etiqueta para crear un
vínculo. La dirección del vínculo se indica en el
atributo href. Así un vínculo
al periódico El País lo escribiríamos de la
siguiente manera <a href="http://www.elpais.es">El
País</a> obteniendo El País
Para facilitar la comprensión del código html en este tutorial se indicarán las etiquetas en color azul, sus atributos en color rojo y las propiedades de las hojas de estilo, que se explicarán más adelante, en verde. La mayoría de editores utilizan también diferentes colores para mejorar la edición de páginas web.
Hay una serie de importantes factores que debemos tener en cuenta a la hora de crear nuestra página web. Vamos a conocerlos.
Antes de crear la página es importante tener clara su estructura. Está estudiado que la mayoría de navegantes buscan rapidez y simplicidad en las páginas que visitan. Si el visitante de nuestra página ve que esta no tiene una estructura clara, que la navegación entre las distintas páginas no es sencilla, o que hay demasiados recursos inútiles que hacen muy lenta la navegación, se irá a buscar otro sitio. Estos son algunos consejos para conseguirlo:
La estructura de las carpetas y ficheros de nuestro sitio web debe estar bien estructurada, sobretodo para facilitarnos las actualizaciones posteriores. Estos son algunos aspectos a tener en cuenta:
mi_pagina.html. Si
no podemos prescindir de los espacios tendremos que sustituirlos por %20
al escribir el código del vínculo, por ejemplo <a href="mi%20pagina.html">..html
estén juntos en el directorio raíz, y los recursos
(imágenes, sonidos, etc.) en una subcarpeta. Si tenemos una
"subpágina" independiente del resto, también es
recomendable separarla en otra subcarpeta. No obstante tampoco es bueno
complicar mucho la estructura del sitio con demasiadas carpetas. La
imagen siguiente muestra un ejemplo de una estructura simple para una
página web.
.html
en la carpeta web,
las imágenes en fotos,
y los sonidos en sonidos.Cuando estemos diseñando nuestra página web trabajaremos con varios archivos al mismo tiempo. Para facilitar el trabajo es recomendable que el Explorador de Windows muestre las extensiones de los archivos, opción que por defecto está desactivada. Esto nos permitirá comprobar que el nombre y la extensión de nuestros archivos son correctos, pues en ocasiones pueden producirse errores.
Como ya hemos dicho el lenguaje XHTML es más estricto que el HTML en algunos aspectos. Con HTML existe una cierta flexibilidad a la hora de escribir el código lo que en ocasiones provoca que distintos navegadores puedan interpretar la misma página de maneras diferentes.
Estas son algunas de las normas que conviene que empecemos a tener en cuenta.
| incorrecto | <h1><i>Encabezado</h1></i> |
| correcto | <h1><i>Encabezado</i></h1> |
<BODY> o <Body> no serán interpretadas
correctamente, se escribirá <body>| incorrecto | <p>Párrafo |
| correcto | <p>Párrafo</p> |
| incorrecto | <table rows=3> |
| correcto | <table rows="3"> |
Las páginas web son, como ya hemos dicho, documentos de texto
sin ningún formato especial, es decir, documentos escritos con
caracteres ASCII, y por tanto pueden editarse y crearse desde cualquier
editor de textos. Así pues podríamos empezar a crear
nuestras páginas web simplemente con el Bloc de notas de
Windows, o incluso con el antiguo EDIT de MS-Dos.
Si usamos el Bloc de notas o cualquier otro editor de textos sencillo
nos fijaremos a la hora de guardar las páginas en la
extensión del archivo. Por defecto el Bloc de notas asigna la
extensión .TXT a los archivos creados, si no
cambiamos esto no
funcionarán nuestras páginas. Al guardar seleccionaremos
en el cuadro Guardar como... - Todos los archivos (*.*)
y escribiremos el nombre del archivo seguido de .htm o .html.
A continuación comprobaremos el resultado en el Explorador de
Windows.
Existen editores de texto que reconocen el formato de las páginas web y presentan con colores distintos las etiquetas y el resto de elementos del código facilitando el trabajo. Un buen editor es Ultraedit disponible en Internet en http://www.ultraedit.com
Una buena opción es el editor del Mozilla, programa GNU de libre distribución disponible en Internet en http://www.mozilla.org. Este editor permite trabajar directamente en código o en dos modos de previsualización de la página, con o sin las etiquetas.
Otro buen programa que automatizan la inserción de etiquetas con botones, es el Homesite, también disponible en Internet en http://www.macromedia.com. Este ya permite la inserción de los últimos elementos como applets de Java, Javascript y dhtml, y permite escribir el código directamente o que lo cree el propio programa. Esta característica introduce el otro tipo de programas de edición de páginas web, en los que creamos la página como si de un documento de un procesador de textos se tratara y el programa se encarga de generar el código.
Uno de los mejores y más completos programas de este tipo es el Dreamweaver de Macromedia, del que puede descargarse una versión de prueba en http://www.macromedia.com.
Otros editores a señalar son:
Aunque procesadores de texto como el Microsoft Word o OpenOffice.org permitan crear páginas web, no es en absoluto recomendable por la enorme cantidad de código inútil que generan que llega a cuadruplicar el tamaño de los archivos.
Mi recomendación para empezar a crear páginas web es aprender el código y probar a crear algunas páginas de este modo antes de probar los programas que lo generan automáticamente. Con esto conseguiremos entender que estamos haciendo, y sabremos interpretar y añadir a nuestras páginas diseños y efectos que veamos en otras webs.
Para el seguimiento de estas páginas basta utilizar el Bloc
de notas, si bien se recomienda utilizar un editor de textos como
Ultraedit que resalta las etiquetas, o editores de html como Mozilla o
Homesite que a pesar de su sencillez resultan muy útiles a la
hora de escribir, y cuya única dificultad suele ser que
están en inglés.
En estas lecciones se darán pequeñas indicaciones para realizar las actividades con el editor del Mozilla. Si vas a utilizarlo has de tener en cuenta algo importante. Si escribes el código html en el editor de código fuente y luego lo visualizas en cualquiera de los otros modos de edición, Mozilla corrige y adapta el código que has escrito para validarlo, con lo que un error de escritura puede significar que se elimine parte del código que hemos introducido.
Plantilla inicial  |