PUBLICAR

Una vez tenemos terminada nuestra página web sólo queda publicarla en Internet para hacerla accesible a los millones de internautas de todo el mundo. Hoy en día nos parece normal que cualquier persona del planeta pueda ver nuestras páginas web en Internet pero hasta la década de 1990 a nadie se le hubiera ocurrido soñar que sería tan fácil y tan barato poder comunicarse con tanta gente.

Básicamente para publicar hace falta tener acceso a un servidor de Internet y disponer de una forma de subir los archivos al servidor. También es conveniente saber lo que es un dominio de Internet y cómo hacer que nuestra página sea encontrada por los buscadores.

También podemos publicar en un servidor local instalado en nuestro ordenador, de esta forma podremos probar las páginas dinámicas sin subirlas a Internet, por ejemplo, mediante WAMP o XAMPP podemos instalar un entorno con el servidor APACHE, PHP, MySQL en Windows. Para Linux XAMPP o LAMP.

Como ya dijimos en la unidad 1, si lo que te interesa es simplemente escribir en Internet y no te atrae la parte técnica o informática, lo más adecuado es utilizar los blogs gratuitos como Blogger o WordPress.com.

 Servidores

Para que tu página se vea desde Internet simplemente tiene que estar almacenada en un servidor de Internet. Es decir, debes disponer de espacio en un servidor para poder subir tus archivos, donde cualquiera pueda verlos.

Cualquiera puede tener un servidor de Internet, sólo hace falta un ordenador, una dirección IP fija, una conexión telefónica y un software adecuado, como el servidor Apache, que además es gratuito. Esto explica el gran crecimiento inicial de Internet. Han surgido miles de servidores que comparten su información por el simple gusto de aprender y enseñar. Y muchos más que esperan hacer negocio en la red.

De todas formas, crear un servidor tiene cierta complejidad y se sale del ámbito de este curso, además necesitarías una conexión permanente a Internet y un ordenador con el servidor web en funcionamiento las 24 horas del día. Sí es más accesible instalar en servidor local como WAMP, en el curso de Dreamweaver de aulaClic lo tienes explicado.

Para acceder a un servidor de Internet hay dos alternativas, buscar un servidor gratuito o contratar uno de pago. Para empezar puede servir un servidor gratuito pero para cosas más serias es conveniente utilizar un servidor de pago.

• a) Servidores gratuitos.

Podemos diferenciar dos alternativas gratuitas:

• Sitios especializados. Existen algunos sitios web especializado en ofrecer espacio gratuito como Fortunecity, Tripod, iEspaña, Galeon, etc. La mayoría colocarán publicidad en las páginas alojadas. Los servidores gratuitos pueden imponer restricciones en el uso de ciertas instrucciones de programación web y no te permiten cambiar la configuración del servidor. Cada vez es más difícil encontrar servidores gratuitos con un mínimo de calidad. Google Sites es un caso aparte.

Algunos proveedores anuncian servidores gratuitos pero al leer el contrato con detalle podemos encontrar condiciones como que sólo es gratuito el primer mes, que hay que tener un número mínimos de visitas, etc.

También hay que destacar que la mayoría de servidores gratuitos no admiten el uso de páginas dinámicas ni bases de datos.

• Proveedores de acceso. Cuando contratas un servicio de conexión a Internet a través de un proveedor, suelen ofrecer de forma gratuita un espacio web en sus servidores. Por ejemplo ya.com, Orange, Telefónica, etc. Si ya tienes contratada una conexión a Internet, revisa las condiciones porque probablemente tienes derecho a un espacio gratuito en el servidor.

• b) Servidores de pago.

Si quieres tener un lugar más profesional donde colocar tus páginas o las de tu empresa puedes utilizar los servicios de empresas especializadas que por menos dinero de lo que piensas te ofrecen muchos servicios, prueba a visitar Arsys , Acens o Alojalia y ver sus condiciones y tarifas.

Los servidores pueden ser de dos tipos básicos, compartidos o dedicados. Un servidor compartido (shared hosting) es aquel que comparte máquina física con otros servidores compartidos. En un servidor dedicado una máquina física soporta un solo servidor dedicado.

En un servidor compartido no se te permiten cambiar completamente la configuración del servidor, ni hacer reinicios físicos de la máquina, mientras que un servidor dedicado puedes hacer todo lo que quieras puesto que el servidor está completamente a tu disposición. Inicialmente es preferible un servidor compartido ya que es más asequible y ofrece prácticamente todos los servicios que son necesarios para un uso particular o profesional. Un servidor dedicado es conveniente para un sitio web con muchas visitas o si se requiere una configuración muy especial del servidor.

Los servidores ubicados en EE.UU. ofrecen más recursos por el mismo precio pero con el inconveniente de la atención al cliente en inglés: lista de los mejores.

En este buscador de alojamiento o Hosting puedes encontrar servidores con las características que desees: BuscaHost.

A la hora de contratar un servidor ten en cuenta que es importante la velocidad con la que las páginas se cargan en Internet y no todos ofrecen la misma velocidad de transferencia o ancho de banda. Algunos servidores ofrecen "espacio ilimitado" pero en realidad quieren decir "espacio suficiente" para la mayor parte de los usuarios.

También es importante fijarse en las condiciones del servicio de atención al cliente que ofrecen los distintos proveedores.

Dominios de Internet

http://www.nombre_dominio.com

Un servidor web necesita disponer de un dominio de Internet para que se pueda acceder a él en la forma http://www.nombre_dominio.com. Por ejemplo, si quieres disponer del sitio web http://www.dibujosdemotos.com deberás contratar el registro del dominio "dibujosdemotos.com" (siempre que alguien no lo haya registrado antes).

Los dominios hay que contratarlos en un registrador autorizado por un periodo de tiempo determinado, por ejemplo, un dominio .com por un año vale sobre 25 euros. Las empresas que ofrecen alojamiento también suelen ofrecer registro de dominios: Arsys o Acens

Los servidores gratuitos suelen ofrecer subdominios de la forma http://www.servidor_gratuito.com/tu_subdominio, de forma que no necesitas registrar ningún dominio ya que los subdominios no se registran.

Subir archivos al servidor

Lo normal es desarrollar nuestro sitio de forma local, es decir, en nuestro propio equipo. Pero una vez conseguimos un servidor, gratuito o de pago, tenemos que subir a él todos nuestros archivos.

Hay varias opciones a la hora de subir los archivos al servidor:

a) Utilizar un programa específico para ello como el Filezilla.

Se trata de un cliente FTP. Para transferir ficheros por FTP se necesita tener instalado un programa cliente de FTP en nuestro ordenador y conocer la dirección del servidor FTP con el que queremos conectar. Nuestra dirección nos la proporcionará la empresa con la que tengamos el alojamiento.

Una vez conectado, los programas FTP tienen un interfaz bastante simple. Básicamente, nos muestran los archivos de nuestro equipo a un lado, y los del servidor a otro. Con lo que no tenemos más que arrastrar y soltar archivos de un lado a otro.

La principal ventaja del FTP, a parte de su comodidad, es que nos permite subir varios archivos y carpetas enteras a la vez, sin tener que ir uno por uno.

b) Utilizar un editor de páginas web que incorpore esta funcionalidad. Por ejemplo, el Dreamweaver.

Algunos editores profesionales incorporan el acceso FTP. Esto que nos permite subir y descargar los archivos cómodamente usando el interfaz del editor. Además, nos permiten tenerlos sincronizados, e ir subiendo automáticamente aquellos archivos que vayamos actualizando.

Puedes encontrar más información sobre esto en el Curso de Dreamweaver en aulaClic.

c) Utilizar las facilidades proporcionadas por la empresa de hosting.

Realmente no necesitamos ninguno de los programas anteriores, aunque casi siempre sean de mejor calidad. Toda empresa de hosting nos proporciona un interfaz a través del que subir archivos al servidor. Este interfaz depende de la empresa. Los de alojamientos gratuitos suelen ser bastantes simples, permitiéndonos subir unos pocos archivos cada vez a través de un formulario web. Esto resulta muy tedioso si tenemos que subir un sitio completo de tamaño medio. Los alojamientos de pago suelen tener un mejor servicio. Algunos implementan un interfaz muy completo (WebFTP) que realmente puede sustituir al cliente FTP.

FUNCIONES EXTRA

En este tema vamos a ver algunas de las posibilidades gratuitas que nos ofrece la red para dotar a nuestras páginas web de mayores posibilidades.

Existen multitud de aplicaciones y librerías de código gratuito y de gran calidad, listas para usar, es muy interesante conocer que existen. En cualquier momento se puede presentar la ocasión adecuada para utilizarlas. A continuación vamos a dar un breve repaso a las que consideramos más interesantes.

 APIs

Aunque si combinamos HTML, JavaScript y PHP podemos hacer muchas cosas con nuestras páginas, existen aún otras fuentes de datos que residen fuera de nuestra página y que podemos incorporar a nuestra web mediante las APIs.

Para añadir funcionalidades complejas a nuestra página web o para acceder a información, podemos comunicarnos con otro software, ofrecido por sitios web especializados, utilizando una Interfaz de Programación de Aplicaciones (API).

Lo que nos ofrece una API es una serie de procedimientos para acceder e interactuar con aplicaciones o datos realizadas por terceros. Es decir, en vez de desarrollar esas funciones con un lenguaje de programación y almacenarlas en nuestro sitio, creamos una "ventana", a través de la cual mostramos esa aplicación. Además, nos ofrece una serie de funciones, normalmente en JavaScript con las que podemos interactuar con esa ventana.

Internet nos ofrece una gran cantidad de añadidos que nos permiten ampliar la funcionalidad de nuestras páginas, muchos de ellos sin necesidad de tener demasiados conocimientos de programación ni de HTML. Podemos encontrar desde sitios que nos ofrecen un código fuente listo para copiar y pegar en nuestra web, hasta otros con APIs más avanzadas, que nos permiten una gran personalización de la aplicación.

Por ejemplo, si tenemos una cuenta en Photoshop On-line, podemos añadir diapositivas de nuestras imágenes, sólo copiando y pegando el código que nos proporcionan:

O si hemos creado una presentación desde Google Docs, podemos incrustarla (embeberla) en nuestra página. Estos son sólo unos pocos ejemplos, pero hay una gran cantidad de sitios web que nos permiten utilizar sus datos.

Normalmente, estos sitios nos ofrecen un fragmento de código incluídos en etiquetas <objet>, <embed> o <iframe>.

Existen multitud de APIs con diferentes objetivos, por ejemplo, Flickr y Panoramio para usar sus amplios catálogos de imágenes, Google Maps para usar mapas de cualquier rincón del mundo, Digg y Meneame para comentarios y noticias, etc. Estas y otras APIs se pueden utilizar para añadir ciertas funcionalidades a nuestra web, pero es tal la cantidad y calidad de APIS, que existen sitios web que se basan únicamente en las funciones y datos suministrados por las APIs y que son conocidas como "Mashup" o aplicaciones híbridas. Hay listas de las mejores Mashup.

Nota: Al utilizar APIs o aplicaciones de terceros, es importante leer las condiciones de uso. Ya que muchas imponen algunas restricciones para uso comercial, o exigen ciertas condiciones de uso, como enlaces a la página propietaria de los datos.

Google Maps

Una API muy utilizada es la de Google Maps. Vamos a incluir en nuestra página nosotros.html un mapa con la ubicación de la asociación.

En la página, hemos añadido otra división con las esquinas redondeadas, después de la que ya había. Dentro, hemos añadido un texto y reservado un párrafo centrado para el mapa.

Para añadir el mapa, solo hemos de ir a http://maps.google.es/ y buscar la dirección que queramos. Cuando la tengamos, pulsamos Enlazar, y nos aparece una ventana con dos tipos de enlace:

 

Seleccionamos el contenido de Pegar HTML para insertar en un sitio web, lo copiamos y lo pegamos en el párrafo que habíamos reservado.

Por ejemplo, éste es un mapa de la zona del puerto de Valencia, en España. Puedes hacer zoom, moverlo, etc, tal y como si estuvieras en Google Maps.

Esta es la forma más simple de utilizar Google Maps, en la que simplemente mostramos una dirección. Pero podemos ofrecer una versión más avanzada, en la que los usuarios puedan, por ejemplo, buscar direcciones, o utilizar todas las opciones de Google Maps. En este caso, encontramos más opciones a través de la API de Google Maps.

FORMULARIOS Y PHP

Hemos visto como crear una página web, darle formato y añadirle funcionalidades con JavaScript, pero esto es sólo el comienzo. Una página web puede hacer muchas más cosas, puede mostrar los datos que obtiene es ese instante de una Base de Datos que reside en un servidor de Internet, puede comunicarse con otras webs, puede utilizar mapas, información del tiempo, etc.

En definitiva, una página web puede mostrar información actualizada cada vez que se ejecuta. Es lo que se conoce como páginas dinámicas, en contraposición a las páginas estáticas, que siempre muestran la misma información. Un ejemplo de página dinámica sería un foro de Internet, como el que hay en aulaClic. Esta página que estás leyendo sería un ejemplo de página estática.

Para crear páginas dinámicas hay que emplear un lenguaje de programación web, como Java, .NET, o PHP. Si quieres ver las diferencias entre estos lenguajes visita este tema avanzado Avanzado.

Nosotros hemos elegido PHP por ser gratuito y fácil de aprender. Para explicar PHP necesitaríamos un curso completo, así que sólo vamos a dar las nociones básicas para que puedas empezar a programar en PHP.

 Formularios

En nuestro ejemplo tenemos una página de Contacto que recoge datos mediante un formulario y los envía a una dirección de correo electrónico. Para enviar dicho correo electrónico vamos a utilizar PHP.

Hay varias formas de recoger datos y enviar un correo, nosotros vamos a emplear la más didáctica utilizando dos páginas. Luego en un ejercicio la mejoraremos (con una sola página).

Necesitamos una primera página escrita en HTML que contiene el formulario para recoger los datos y llamar a una segunda página escrita en PHP que realiza el envío del correo.

PHP. Código de ejemplo

Una vez creado el formulario, necesitamos la página a la que se envían los datos, y que se encarga de recogerlos, comprobarlos y procesarlos. En nuestro caso, la hemos llamado enviar _mail.php,

JAVASCRIPT

. Introducción

Vamos a añadir algunos comportamientos extra a nuestro sitio. Por ejemplo, vamos a crear un menú desplegable, para que al ponernos sobre la pestaña Flores, se muestren las categorías existentes. Por otra parte, vamos a hacer que al pulsar sobre las imágenes, en las páginas de las categorías, se abra una nueva ventana, pero con el nombre de la flor, una imagen, y un enlace que permita cerrar la ventana. Pero todo esto no podemos hacerlo sólo con HTML y CSS.

JavaScript es un lenguaje de programación que el navegador es capaz de interpretar y ejecutar sobre la página web.

Utilizando este lenguaje podemos crear comportamientos que no están disponibles en el html, por ejemplo mostrar un mensaje pulsando aquí, abrir una ventana, cerrarla...

O también podemos utilizarlo para cambiar la página. Por ejemplo, pulsando en los colores, la división toma ese color como color de fondo.

Verde Rojo Azul

Podremos crear desde los compartimentos más simples, hasta otros realmente complejos.

Puedes ver algunas cosas que se pueden lograr con JavaScript en la web Chrome Experiments.

IMÁGENES

 Introducción

Ya hemos visto que podemos incluir imágenes en nuestra página web utilizando la etiqueta <img src="imagen.png" alt="texto alternativo" />, y que estas imagen deben de ser del formato jpg, gif o png, dependiendo del tipo de imagen, para obtener la mejor relación calidad-tamaño.

En nuestro sitio de ejemplo, vamos a utilizar imágenes para mostrar fotografías, pero también como parte del diseño.

Por ejemplo, vamos a crear una galería fotográfica para las imágenes de las distintas flores que queremos colgar en nuestro sitio. La idea es tener cuatro páginas, una para cada categoría de flores (silvestres, ornamentales, exóticas y plantas), desde las que podamos acceder a las fotografías de las flores, que son de gran tamaño.

Como la mecánica es la misma, sólo haremos la galería de flores silvestres. Pero te invitamos a que intentes hacer alguna otra sin ayuda al acabar el tema.

 Galería con miniaturas

Las fotografías que utilizaremos puedes encontrarlas en la carpeta fotos_flores que habrás descargado con los archivos del sitio.

La idea es simple: mostrar imágenes en una página. En principio, bastaría con ir poniendo las etiquetas img para cada imagen. Esto bastaría si fuesen imágenes de pequeño tamaño. Pero imagina una página con 15 o 20 imágenes, donde cada una ocupa toda la pantalla. La página tardaría mucho en cargarse, por el peso de las imágenes, y sería muy larga.

Por eso, lo normal cuando creamos una galería es crear miniaturas (o thumnails) de las imágenes. Se trata toda o parte de la imagen original, de menor tamaño, que al pulsar sobre ella muestra la imagen original.

La forma más simple de hacer esto es crear un enlace hacia el archivo de la imagen. Por ejemplo:

<a href="imagen_grande.jpg"><img src="miniatura.jpg" alt="Descripción" /></a>.

También se suele utilizar javascript para abrir la imagen, consiguiendo efectos más vistosos.

Para crear una miniatura de una fotografía, podríamos poner un valor menor en los atributos width y height de la etiqueta img. Y aunque esto hace que se muestre más pequeña, el archivo sigue siendo el mismo, por lo que la página tardaría lo mismo en cargar. La solución es crear un nuevo archivo de imagen, reduciendo el original.

Para trabajar con imágenes debemos de emplear algún programa especializado. Nosotros hemos elegido GIMP, por ser un potente programa de retoque fotográfico totalmente gratuito y libre. Puedes descargar su última versión desde http://www.gimp.org.es/modules/mydownloads/. Si necesitas ayuda para instalarlo, consulta este básico Básico. También puedes utilizar otros programas, como Photoshop. Incluso, si sólo vamos a redimensionar alguna foto puntualmente, puedes utilizar programas más simples, como Paint, preinstalado en Windows.

 Utilizando este programa, nos resultará sencillo crear las miniaturas. Si no conoces los programas de retoque fotográfico, puedes realizar el ejercicio paso a paso Recortar y redimensionar imágenes con GIMP.

En nuestro sitio de ejemplo, tendremos todas las fotografías de las flores en la carpeta fotos, dentro de la carpeta flores. Para cada foto, tendremos la fotografía que queremos mostrar, de un tamaño mayor, y la miniatura, que se llamará igual, pero terminado en _mini. La mayoría de las fotos, ya están redimensionadas y tienen la miniatura, por lo que sólo tienes que copiarlas de la carpeta fotos_flores, en la carpeta de ejercicios, que habrás descargado a la carpeta del sitio, sitio_flores/flores/fotos. La foto buganvilla.jpg es mucho mayor que las demás. Debes reducirla al 50% y obtener la miniatura tal y como se explica en el ejercicio anterior.

Organizar las miniaturas

Una vez que tenemos las miniaturas, hemos de plantearnos cómo las vamos a organizar en la página. Esto dependerá del número de miniaturas que queramos mostrar, de su tamaño, del diseño de la página, etc.

En nuestro ejemplo, vamos a simular una ficha para cada flor. En cada ficha estará la miniatura que enlaza con la imagen (hay flores que tienen dos imágenes), el nombre de la flor y su nombre científico.

Vamos a comenzar por crear la galería de las flores silvestres. Partiendo del archivo base.html, crea la página silvestres.html, guardándola dentro de la carpeta flores.

Si pruebas la página en el navegador, comprobarás que no se muestra el estilo, y los enlaces no funcionan. Esto se debe a que ni la hoja de estilo ni las otras páginas están en la misma carpeta. Para solucionarlo, podemos indicar delante del nombre del archivo ../, para indicar que se encuentra en un nivel superior. Por ejemplo href="../estilo.css".

Pondremos la pestaña Flores siempre como activa.

En el título (h2) hemos escrito Galería de flores silvestres.

Después del título, en un párrafo (p), hemos escrito Las flores silvestres son aquellas que crecen en nuestra región. Para verlas, basta con acercarnos a un parque o dar un agradable paseo por los alrededores de nuestra ciudad..

A partir de aquí, vamos a comenzar a añadir las fichas de las flores silvestres que tenemos. Vamos a ver como estructuramos la ficha. Como ejemplo, vamos a utilizar la flor del Agret (Oxalis pes-caprae):

Para delimitar las distintas fichas, lo más cómodo es crear un div para cada una. Como a este div le definiremos ciertas propiedades de estilo, podemos pensar ya que necesitará ser identificado. Y como habrá varios, y en varias páginas, vamos a asignarle la clase ficha.

Dentro de este div.ficha, colocamos la imagen de la miniatura:

<img alt="Agret" title="Agret" src="fotos/agret_mini.jpg" height="75" width="100" />.

Como al pulsar sobre la miniatura, hay que abrir el original, debemos de colocar un enlace con la imagen dentro. Por tanto quedará:

<a href="fotos/agret.jpg"><img ... /></a>.

Junto a la imagen, tenemos que colocar dos elementos de texto. En la primera línea el nombre de la flor, y en el segunda el nombre científico. Podríamos colocar el texto en un párrafo, y separar los nombres con un salto de línea (<br />). Pero como queremos diferenciar un poco el nombre científico, lo más cómodo será ponerlo en otro párrafo con una clase, por ejemplo class="cien". Por lo tanto, el texto nos ha quedado así:

<p>Agret</p>

<p class="cien">Oxalis pes-caprae</p>.

Si te fijas en el resultado final del ejemplo, verás que hay una página con un listado de las flores, y enlaces a cada una de ellas. Para poder enlazar, vamos a asignarle in ID al div.ficha. Para no liarnos, seguiremos una nomenclatura fácil de recordar. Por ejemplo, utilizaremos el nombre de la flor en minúsculas, y si tiene espacios, los cambiaremos por guiones bajos.

Por tanto, la ficha de la flor de Agret nos ha quedado así:

<div id="agret" class="ficha">

 <a href="fotos/agret.jpg"><img alt="Agret"

  title="Agret - Oxalis pes-caprae" src="fotos/agret_mini.jpg" height="75"

  width="100" /></a>

 <p>Agret</p>

 <p class="cien">Oxalis pes-caprae</p>

</div>

EL HTML DEL MENÚ

El menú es un elemento fundamental de nuestra web, y hemos de dedicarle una atención especial.

Básicamente, el menú es un conjunto de enlaces a las distintas partes de nuestro sitio, y lo más habitual es encontrarlo en el html de la página, o en un archivo javascript. De momento, vamos a ver cómo crearlo desde el HTML.

La estructura puede ser cualquiera: podemos hacer un menú con divs, con tablas, etc. Pero lo más común, por ser una estructura sencilla de manejar, es utilizar una lista (<ul></ul>), y está forma es la que explicaremos. Si desactivamos los estilos del navegador (en Firefox, menú Ver → Estilo de página → Sin estilo; IE no tiene esta opción) o vemos el código fuente de webs como www.elpais.es o www.marca.es, podremos encontrar que en el lugar del menú aparece una lista.

Por tanto, cada elemento del menú es un elemento de la lista <li></li>. El elemento, contendrá normalmente un enlace (<a href=""></a>) a una página del sitio.

Observa que hemos el menú de nuestro ejemplo, siguiendo esta estructura:

<ul>

  <li><a href="index.html">Inicio</a></li>

  <li><a href="flores/index.html">Flores</a></li>

  <li><a href="nosotros.html">Nosotros</a></li>

  <li><a href="contacto.html">Contacto</a></li>

  <li><a href="noticias.html">Noticias</a></li>

</ul>

 Estilo básico del menú

Una vez creado el menú, todo lo referente a su aspecto lo haremos utilizando estilos CSS. Lo más cómodo será darle un id, por ejemplo id="menu". De esta manera podremos referirnos la menú como ul#menu, y a sus elementos como ul#menu li.

Las listas se muestran casi igual en IE que en Firefox, pero en el primero se desplazan hacia la derecha utilizando margin, y en el segundo padding. Para no liarnos, podemos comenzar por poner ambos a 0, y ya les daremos algún valor si lo creemos necesario.

Otra cosa característica de las listas son las viñetas. Podemos quitarlas con la propiedad list-style-type: none;, o utilizar una imagen con la propiedad list-style-image: url(imagen.png);.

Al final los elementos de la lista tendrán el aspecto de botones que se pueden pulsar. Pero esto no es cierto, ya que el enlace sólo está en el texto, porque la etiqueta <a> es un elemento en línea que se ajusta a su contenido. Podemos cambiar este comportamiento con aplicándole a los enlaces del menú la regla display: block. Esto lo convierte en un elemento de bloque, y hace que ocupe todo su contenedor.

Daremos un formato apropiado al texto, a los enlaces, y añadiremos un borde a los elementos para diferenciarlos. Todo esto en función del diseño que queramos conseguir.

Distintos estilos del elemento

Es habitual que los elementos de un menú tengan varios estilos distintos: el estilo normal; el estilo que muestra cuando tiene el cursor encima, que transmite al usuario la sensación de que se puede pulsar ése elemento; y un tercer estilo que diferencia el elemento "en el que estamos", es decir el que lleva a la página en la que el usuario está en ese momento, lo que le ayuda a situarse. Para esto podemos utilizar clases y pseudoclases.

Si no sabes cómo cambiar el estilo de un elemento al pasar el cursor sobre él, consulta este básico Básico en el que te explicamos las pseudoclases.

• También puede seguir el ejercicio paso a paso Utilizar pseudoclases CSS, en el que creamos un estilo para nuestro sitio de ejemplo.

Utilizar uno o varios de estos estilos dependerá del diseño que queramos conseguir.

 Puedes practicar cómo crear algunos menús con el ejercicio paso a paso Crear menús básicos.

Maquetar una página web

La maquetación es la distribución de los elementos en nuestra página. Piensa en una página web cualquiera. Seguro que distingues algunos elementos, como encabezados, columnas, menús laterales, etc.

Hace unos años, la maquetación de las páginas web se realizaba utilizando tablas (<table>). Una vez entendido este proceso podía resultar sencillo, aunque si no se dominaban las tablas, podía convertirse en algo tedioso. El problema de las tablas es que generaban un página muy encorsetada, y el código se volvía complejo de entender. Además, algunos buscadores encontraban problemas al analizar la estructura de la página.

Actualmente, la maquetación con tablas ha caído en desuso, y se realiza utilizando capas (<div>), también llamadas divisiones o contenedores. La colocación de las capas en la página se realiza a través de CSS. Esto permite, por ejemplo, que podamos pasar de un diseño con un menú lateral a otro con el menú en la parte superior, sólo cambiando la hoja de estilos.

En esta unidad veremos las técnicas de maquetación más comunes, aunque hay que decir que existen diversas formas de conseguir una misma maquetación.

Las capas pueden estar anidadas unas dentro de otra. Básicamente, lo que haremos será definir cómo se posiciona en la página, su colocación y su tamaño.

Nota: Lo aquí explicado funciona para webs con el DTD XHTML Transitional o Strict. Al declarar otro DTD, o no hacerlo, puede que el resultado no sea el esperado.

Tamaño

Por lo general, la maquetación se realiza sobre elementos en bloque. Normalmente divisiones, pero también lo podemos hacer con párrafos, listas, o con el propio body. Por defecto los elementos de bloque ocupan todo el ancho del elemento que lo contiene, y su alto se ajusta al contenido.

Lados y tamaño

Cualquier elemento HTML de bloque, tiene dos atributos que pueden definir su tamaño: ancho (width) y alto (height).

Los valores para estas medidas, pueden ser expresados en las medidas habituales:

Tamaños absolutos, utilizando px, cm, etc...

Tamaños relativos al elemento que lo contiene, utilizando porcentajes (%).

Tamaños relativos a la fuente, utilizando em.

El valor auto es el valor por defecto. Por ejemplo, un párrafo, por defecto, tienen un ancho del 100% y un alto ajustado al contenido.

Por ejemplo, hemos definido el tamaño para el siguiente párrafo:

 

<p style="width:200px; height:100px; border: red 2px solid">

Por defecto, al no ocupar todo el ancho, el elemento queda alineado a la izquierda, como en el ejemplo anterior. Una forma sencilla de centrarlo es dándole al margen (margin) derecho e izquierdo el valor auto.

<p style="width:200px; height:100px; border: red 2px solid; margin: auto;">

Con sólo esto, podríamos maquetar una página web que contenga una columna central, con un ancho fijo o relativo. En el siguiente ejemplo, hemos contenido todo el texto en una capa, a la que le hemos asignado el id="contenido", y en la hoja de estilo le hemos asignado un ancho fijo y la hemos centrado.