Es necesario diseñar y planificar el sitio web antes de crear las páginas que va a contener.

La forma habitual de crear un sitio consiste en crear una carpeta en el disco local. Los documentos HTML normalmente se crean dentro de dicha carpeta, mientras que para contener las imágenes, las animaciones, las hojas de estilo, etc., se deben crear nuevas carpetas dentro de ésta, con el objetivo de tener una mejor organización de los archivos a la hora de trabajar. Esto es lo que se conoce como sitio local.

Después se podrán copiar los archivos en un servidor web, en el denominado sitio remoto, lo que equivale a publicar el sitio, de modo que la gente podrá verlo en Internet.

La organización de los archivos en un sitio permite administrar y compartir archivos, mantener los vínculos de forma automática, utilizar FTP para cargar el sitio local en el servidor, etc.

Es conveniente que la página inicial del sitio tenga el nombre index.htm o index.html, ya que los navegadores buscan una página con ese nombre cuando se intenta acceder a una URL genérica.

Las características del texto seleccionado pueden ser definidas a través del menú Texto, y a través del inspector de propiedades. Vamos a ver las posibilidades que se nos ofrecen a través del inspector de propiedades, aunque sean menos que las que se nos ofrecen a través del menú Texto.

Existen diferentes clases de rutas de acceso a la hora de definir los vínculos.

Referencia absoluta:

Conduce al sitio en el que se encuentra el documento utilizando la ruta completa del archivo.

La ubicación es en Internet, por ejemplo, http://www.aulaclic.com, o http://www.misitio.com/pagina/pagina1.html.

Referencia relativa al documento:

Conduce a un documento situado dentro del mismo sitio que el documento actual, pero partiendo del directorio en el que se encuentra el documento actual.

Si queremos referinos a carpetas que están por encima del nivel donde nos encontramos deberemos utilizar ../

Por ejemplo, imagina que estamos en la siguiente dirección http://www.misitio.com/pagina/informacion/index.html. En esta página queremos mostrar una imagen que se encuentra en la carpeta http://www.misitio.com/pagina/secciones/seccion1.html, ¿cómo podemos hacerlo? Fácil. Deberemos llamarla haciendo referencia al nivel superior (http://www.misito.com/pagina/) para poder ir luego a la carpeta secciones.

El resultado de la ruta sería el siguiente: ../secciones/seccion1.html.

De esta forma, mientras nos encontramos en la carpeta informacion, subimos un nivel y luego nos movemos dentro de la carpeta secciones para mostrar el archivo seccion1.html.

Referencia relativa al sitio:

Conduce a un documento situado dentro del mismo sitio que el documento actual.

En este método los enlaces se crean indicando la ruta a partir de la raíz del sitio.

En el ejemplo anterior si tuviesemos definido como sitio la carpeta http://www.misitio.com/, un enlace en cualquier página del sitio ahttp://www.misitio.com/pagina/secciones/seccion1.html se crearía como /pagina/secciones/seccion1.html.

Como puedes ver ahora el vínculo a un archivo en todas las páginas es igual porque se define dependiendo del sitio raíz y no de la ubicación donde se encuentra.

Puntos de fijación:

Conduce a un punto dentro de un documento, ya sea dentro del actual o de otro diferente. Para ello el vínvulo debe ser nombre_de_documento.extension#nombre_de_punto.

El punto se define dentro de un documento a través del menú Insertar, opción Anclaje con nombre.

Podríamos referenciar de este modo a un anclaje llamado parte2 de la siguiente forma: ../secciones/seccion1.html#parte2

Estos tipos de enlace que hemos visto son válidos tanto para referenciar páginas (para crear hiperenlaces) o incluso imágenes u otro tipo de objetos (como veremos en temas posteriores).

Deberás tener siempre en cuenta que los nombres de las rutas se correspondan perfectamente a los nombres de los archivos y carpetas en el servidor (local o remoto).

Por ello, es muy recomendable que utilices siempre minúsculas para evitar fallos en los enlaces.

También deberás evitar utilizar caracteres especiales como acentos o espacios, así no tendrás problemas a la hora de referenciar tus objetos.

Todas las páginas web acostumbran a tener un cierto número de imágenes, que permiten mejorar su apariencia, o dotarla de una mayor información visual.

Si por algún motivo se desea insertar un BMP, este no aparecerá a no ser que en Tipo se seleccione Todos los archivos.

En Relativa a es posible especificar si la imagen será relativa al documento o a la carpeta raíz del sitio. Es preferible que sea relativa al Documento, ya que si se mueve todo el sitio a una ubicación diferente, la imagen puede no verse al estar siendo buscada en la ubicación anterior.

Lo mismo ocurre cuando se selecciona un documento para crear un vínculo.

La ruta en la que se encuentra la imagen aparecerá representada de una u otra forma en el campo URL de la ventana y en el campo Origen del inspector de propiedades, dependiendo de si ha sido insertada como relativa a la carpeta raíz del sitio o relativa al documento.

Por ejemplo, imagina que dentro de la carpeta raíz del sitio (la carpeta del sitio) se encuentran la carpeta imagenes y el documento en el que deseamos insertar la imagen. Dicha imagen, llamada aulaclic.jpg, se encuentra dentro de la carpeta imagenes.

En el caso de insertar la imagen como relativa al Documento la ruta sería:

imagenes/aulaclic.jpg

Mientras que en el caso de ser insertada como relativa a la Raíz del sitio la ruta sería:

/imagenes/aulaclic.jpg

Todos los objetos se alinean por defecto a la izquierda de las páginas web, pero gracias a las tablas es posible distribuir el texto en columnas, colocar imágenes al lado de un bloque de texto, y otra serie de cosas que sin las tablas serían imposibles de realizar.

Hoy en día, la mayoría de las páginas web se basan en tablas, ya que resultan de gran utilidad al mejorar notablemente las opciones de diseño.

Las tablas están formadas por un conjunto de celdas, distribuidas en filas y columnas.

En la nueva ventana habrá que especificar el número de Filas y Columnas que tendrá la tabla, así como elAncho de la tabla .

El Ancho puede ser definido como Píxeles o como Porcentaje. La diferencia de uno y otro es que el ancho enPíxeles es siempre el mismo, independientemente del tamaño de la ventana del navegador en la que se visualice la página, en cambio, el ancho en Porcentaje indica el porcentaje que va a ocupar la tabla dentro de la página y se ajustará al tamaño de la ventana del navegador, esto permite que los usuarios que tengan pantallas grandes, aprovechen todo el ancho de pantalla.

Grosor del Borde indica el grosor del borde de la tabla en píxeles, por defecto se le asigna uno (1).

Relleno de celda indica la distancia entre el contenido de las celdas y los bordes de éstas.

Espacio entre celdas indica la distancia entre las celdas de la tabla.

También se puede establecer si se quiere un encabezado para la tabla es recomendable utilizar encabezados en el caso de que los usuarios utilicen lectores de pantalla. Los lectores de pantalla leen los encabezados de tabla y ayudan a los usuarios de los mismos a mantener un seguimiento de la información de la tabla.

Si queremos incluir un título, lo indicamos en Texto, el título aparecerá fuera de la tabla.

En alinear texto indicamos dónde queremos alinear el título con respecto a la tabla.

En Resumen: indicamos una descripción de la tabla, los lectores de pantalla leen el texto del resumen pero dicho texto no aparece en el navegador del usuario.

Los marcos o frames sirven para distribuir mejor los datos de las páginas, ya que permiten mantener fijas algunas partes, como pueden ser el logotipo y la barra de navegación, mientras que otras sí pueden cambiar. Además de mejorar la funcionalidad, pueden mejorar también la apariencia.

Cada uno de los marcos de una página, contiene un documento HTML individual. Por ejemplo, en la imagen de la derecha puedes ver una página con dos marcos. El marco izquierdo contiene el documento menu.htm y el derecho el documento quienes.htm. Para poder visualizar la página de este modo, hemos tenido que abrir en el navegador el documento marcos.htm, que es la página que contiene los marcos agrupados.

Es posible editar los documentos contenidos en los marcos desde la página que contiene el grupo de marcos. Esto facilita el trabajo, ya que es más fácil hacerse una idea de cómo quedará la página al final, cosa que no es posible si se editan individualmente cada uno de los documentos que contiene el marco.

El trabajar con marcos puede resultar una tarea algo complicada, sobretodo al principio, por lo que no vamos a profundizar muchoen el tema, y veremos solamente algunos conceptos básicos y ejemplos sencillos.

Crear Marcos.-Existen varias formas de crear un marco. Nosotros vamos a ver solamente una de ellas.

Para crear un marco, primero hay que abrir algún documento. Puede ser uno nuevo o uno ya existente.

Después, dirigirse al menú Insertar, HTML, Marcos. A través de esta opción puede elegirse el tipo de marco que va a crearse.

Vamos a ver el marco a la Izquierda.

Si pulsamos sobre Izquierda se creará un nuevo marco a la izquierda del documento actual.

Como puedes ver en la imagen, aparece una línea que divide el documento en dos. El documento de partida era uno nuevo.

En este caso tendremos tres documentos: el de la izquierda, el de la derecha, y el que contiene el grupo de marcos. El de la derecha es el documento que teníamos inicialmente, que está en el marco conocido como marco padre (MainFrame).

Para seleccionar el documento que contiene el grupo de marcos hay que pulsar sobre la línea que separa los marcos. Esto solo es posible mientras dicho documento no se haya guardado.

Si en lugar de insertar un marco a la izquierda lo insertamos a la Derecha, el marco vacío aparecerá a la derecha del documento original.

En esta imagen puedes ver un ejemplo de marco a la derecha.

Sobre un documento ya existente, menu.htm, se ha insertado un marco a la derecha.

Al igual que en el caso anterior, tenemos tres documentos: el de la izquierda, el de la derecha, y el que contiene el grupo de marcos. En este caso, el documento que teníamos inicialmente es el de la izquierda, mientras que antes era el de la derecha. Por ello, en este caso el marco padre será el de la izquierda.

El marco padre siempre es el marco en el que se encuentra el documento inicial, sobre el que se han insertado el resto de marcos.