Vamos a ver qué son los hiperenlaces, para qué sirven y cómo crearlos, ya que son un elemento esencial para cualquier página web.

Introducción Un hiperenlace, hipervínculo, o vínculo, no es más que un enlace, que al ser pulsado lleva de una página o archivo a otra página o archivo. Es posible asignar un vínculo a un texto, a una imagen, o a parte de una imagen.

Tipos de enlaces 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, http://www.aulaclic.com, http://www.misitio.com/pagina/pagina1.html.

por

ejemplo, o

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 ../secciones/seccion1.html.

ruta

sería

el

siguiente:

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 a http://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.

Crear enlaces La forma más sencilla de crear un enlace es a través del inspector de propiedades. Para ello es necesario seleccionar el texto o el objeto que va a servir de enlace, y seguidamente establecer el Vínculo en el inspector. Por ejemplo, aquí hay un enlace a www.elpais.es, que es de referencia absoluta, por eso contiene HTTP://

Es posible crear también vínculos vacíos, que pueden ser útiles cuando se utilizan comportamientos, etc. Para ello es necesario escribir en Vínculo únicamente una almohadilla #. Otra forma de crear un enlace es a través del menú Insertar, opción Hipervínculo.

Crear vínculos de esta forma es muy sencillo, sólo deberás rellenar los campos que explicaremos a continuación y el enlace se colocará en el lugar en el que estaba situado el cursor. Texto: es el texto que mostrará el enlace Vínculo: es la página a la que irá redirigida el enlace, si se trata de un enlace externo deberás escribirla empezando siempre por HTTP://. Haz clic sobre el icono de carpeta para buscar los archivos que existan dentro del sitio. Por defecto dramweaver te creará un enlace relativo al documento. Si quieres que los enlaces sean relativos al sitio visita este avanzado . Destino: la página donde se abrirá la página, este campo se explica en el siguiente apartado. Título: se trata de la ayuda contextual del vínculo, es equivalente al atributo ALT de las imágenes. Tecla de acceso: atributo que facilita la accesibilidad a las páginas, habilita el acceso al enlace mediante la pulsación de la tecla Alt más la tecla de acceso indicada. Índice de tabulador : Como habrás podido observar puedes saltar a través de los enlaces pulsando la tecla Tabulador. En este campo podrás establecer un índice indicando la prioridad del enlace y así configurar el modo en el que actuará el Tabulador es sus diferentes saltos.

Destino del enlace El destino del enlace determina en qué ventana va a ser abierta la página vinculada, puede variar dependiendo de los marcos de que disponga el documento actual. Puede especificarse en el inspector de propiedades a través de Dest, o en la ventana que aparece a través del menú Insertar, opción Hipervínculo. _blank: Abre el documento vinculado en una ventana nueva del navegador. _parent:

Abre el documento vinculado en la ventana del marco que contiene el vínculo o en el conjunto de marcos padre. _self: Es la opción predeterminada. Abre el documento vinculado en el mismo marco o ventana que el vínculo. _top: Abre el documento vinculado en la ventana completa del navegador.

Estructura CSS Un archivo CSS (por suerte) tiene una estructura muy bien definida, por lo que bastará con que nos aprendamos unas cuantas reglas para poder empezar a familiarizarnos con su creación. Su estructura siempre es la siguiente: selector { propiedad:valor; }

Esto es lo que podríamos llamar una regla CSS. Podemos escribir tantas reglas CSS como queramos, siempre una después de otra. Entre llaves se encierra la definición del estilo, que viene dada por una lista de propiedades y sus valores separados por puntos y comas.

Los selectores son aquellos sobre los que se aplica la definición del estilo CSS. Hay 3 tipos de selectores: Etiqueta HTML Clase Identidad Cualquier etiqueta HTML es un selector (eliminando los < y >). Por lo que cualquier elemento de una página puede ser modificado genéricamente para que tome un mismo aspecto, por ejemplo: p {font: 13px bold Arial;} Hace que todos los párrafos (la etiqueta P) tendrán la fuente de un tamaño de 13 píxeles, estará en negrita y será del tipo Arial.

Una clase es un selector que afectará sólo a aquellas etiquetas que nosotros decidamos, por ejemplo: .rojo {color: red;} Hemos creado una clase que hace que el color de la letra que tenga asociada esta clase sea rojo. Como puedes ver, la clase se define porque tiene un punto delante. Ahora podríamos aplicar este estilo sobre cualquier etiqueta que queramos.

Este es un texto en rojo

En este ejemplo estaríamos creando un párrafo o un bloque y ambos tendrían el texto de color rojo por habérseles aplicado la misma regla CSS.

Los selectores de clase deben estar siempre escritos con carácteres alfanuméricos y sin utilizar espacios (utiliza el subrayado _ para separar palabras).

Por último encontraríamos los selectores de identidad. Estos sólo se aplican una vez y se asocian a una etiqueta. #contenedor {width: 600px;} Más tarde en el código podremos encontrar: Las clases de identidad se identifican por empezar el selector con un signo #. En el código deberá establecerse la regla CSS asociándosela al atributo ID. Este atribudo (id) recoge el nombre del elemento que se ha creado con la etiqueta HTML. A partir de ese momento se podría referenciar a ese cuadro de texto como contenedor utilizando JavaScript. Selectores CSS Aunque sólo hay tres tipos de selectores diferentes hay diversas formas de combinarlos para producir hojas de estilo más complejas. Ahora veremos estos tipos de combinación: Agrupación: Los selectores se pueden agrupar separados por comas, por lo que: p { background-color: #000033; } .azul_oscuro { background-color : #000033; } #cabecera { background-color: #000033; } Puede escribirse como: p, .azul_oscuro, #cabecera { background-color: #000033; }

Descendencia: Podemos obligar que un estilo sólo se aplique sobre un elemento que esté dentro de otro. Por ejemplo: h1 { color: #0000FF; font-weight: bold; } b { color: #0000FF; } Esto hará que todos los encabezados H1 de la página sean de color azul y en negrita, y que los textos en negrita se muestren azules. Pero, ¿qué pasa si queremos resaltar texto en los encabezados, no podremos utilizar la negrita?

Título: El uso de la Negrita

En este caso deberemos hacer uso de la descendencia: h1 b { color: red; } Ahora los textos marcados con la etiqueta B en los encabezados H1 serán de color rojo.

Al escribir dos selectores seguidos obligamos a que el segundo tenga que estar dentro del anterior. Puedes utilizar todas las anidaciones que quieras y mezclar los selectores, por ejemplo: #contenedor p .derecha { float: right; } En este caso todas las etiquetas con la clase derecha que se encuentren dentro de un párrafo del elemento definido como contenedor flotarán a la derecha.

Selectores de Atributo Hasta ahora hemos visto que los selectores se pueden combinar de bastantes formas. Veamos que el poder de CSS no sólo se queda ahí sino que avanza un poco más para ayudarnos a establecer estilos según el tipo de atributos que tenga una etiqueta.

Un atributo es una parte de la descripción de un selector HTML. Por ejemplo, en: Enlace A es el selector de la etiqueta, mientras que href y target son atributos.

CSS permite entrar en el contenido de las etiquetas para cambiar sus estilos. Veamos cómo hacerlo: Nombre de Atributo: Podemos establecer estilos para etiquetas con determinados atributos definidos, por ejemplo: a[href] { font-family: Arial, Helvetica; } En esta línea estamos estableciendo que cualquier etiqueta a que tenga el atributo href cambie su tipo de letra a Arial o Helvética.

Valor de Atributo: Podemos aplicar estilos a etiquetas que tengan determinado valor en un atributo, por ejemplo: a[target="_blank"] { font-weight: bold;