UNI VERSID AD NACIONA L EX PE RIMENT AL VICE RREC TO RADO ACAD M ICO DEC ANA TO

DE

DEL

TCH IR A

DOCENCIA
DE

DEP ARTAM ENTO MULT IM EDIA

INGENIE RA

EN

INFORMT ICA

ENLACES E IMGEN
Una gua para su correcta implementacin

Bermdez ngel y Ordoez Jhon 08/03/2013

8-3-2013

NDICE

INTRODUCCIN INGREDIENTES: DEFINICIONES Y TERMINOLOGA. ENLACES: ..

2 3 3 3 3 4 4 5 6 12 15

ATRIBUTO TARGET ATRIBUTO NAME PSEUDO-CLASES . ESTADOS.

IMGENES RECETAS ENLACES . RECETAS IMGENES . REFERENCIAS.

8-3-2013

INTRODUCCIN
Uno de las propiedades ms importantes de Internet, es la posibilidad de conectarse los unos con los otro s. Los enlaces o links (en ingls) nos permiten conectarnos con otros documentos , ya sea una imagen, un video, un archivo de sonido, siti os en la web u a otra web, mandar un correo electrnico en otros. A continuacin veremos la correcta implementacin de las sentencias que nos permiten crear dichos enlaces, el cambio de sus propiedades por defecto y el uso de otros efectos.

8-3-2013

INGREDIENTES : DEFINICIONES Y TERMINOLOGA .

ENLACES
Estos se especifican en HTML con la etiqueta <a> que proviene de la primera letra de la palabra anchor (ancla). La etiqueta tiene como cierre </a>. Para su modificacin basta con escribir una a en la Hoja de Estilo y modificar sus propiedades entre los corchetes. Todas las caractersticas que definamos para los enlaces, sern aplicados a todos ellos sin importar sea cual sea su estado. Su sintaxis:
<a class=a href="dir _http" atributo=>Texto del Enlace</a>

Atributo Target: Define donde queremos que se abra el documento

al presionar sobre el enlace. Este ejemplo abre un documento en una nueva pgina del navegador.

body> < <a href="direccin_http" target="_blank" >La home de Virtualnauta</a> </body> Atributo Name: Define una determinada ubicacin dentro de la
pgina. 1) Definimos el destino del vnculo el cual podra ser un ttulo por ejemplo.
<a name="destino-uno">Captulo 1</a>

2) Definimos el enlace en otro parte de la pgina, ya sea del mismo sitio o de otro sitio. Para ello utilizamos el signo # seguido del nombre del enlace.
<a href="http://www.misitio.com/uno.html#destino-uno">Ir al Captulo 1</a>

En caso de que el enlace est definido dentro del mismo documento

<a href="/#destino-uno">Ir al Captulo 1</a>

8-3-2013

Pseudo-Clases:
Controlan las diferentes condiciones, estilos y eventos definidos para una etiqueta <a>. En este ejemplo usaremos a a como selector de la pseudo-clase para modificar las caractersticas de los enlaces.
a{ }

color: #0000FF;

Estados:
Todo enlace posee varios estados como pueden ser el visitado y el no visitado. Por medio de una pseudo-clase podemos asignar diferentes estilos usando el selector descrito anteriormente. a) Link: Para los enlaces que aun no han sido vistos.
a:link { color: #0000FF; }

Muestra un enlace que no ha sido visitado en color azul. b) Visited: Para los enlaces que han sido visitados anteriormente. a:visited { color: #660099; } Muestra los enlaces visitados en color morado. c) Hover: Remarca el enlace cuando el mouse para por encima de l con un fondo verde y el color del texto en blanco.
a:hover { background: #00FF00; color: #FFF; }

d) Active: Remarca el enlace con un fondo rojo y el tipo de letra cambia a cursiva cuando un enlace est siendo presionado por el ratn y mientras no se suelta el dedo.
a:active { background: #FF0000; font-style: italic; }

8-3-2013

Si aplicamos diferentes Pseudo-Clases sobre un mismo enlace y no queremos provocar una colisin entre estilos, de forma que al pasar el ratn por encima de un enlace visitado se aplique hover y visted a la vez, debemos seguir el siguiente orden: a:link, a:visited{} a:hover, a:active{}

Algo muy importante y que no debemos nunca de olvidar, es que las Pseudo-Clases no pueden separarse de los dos puntos iniciales.

I MGENES
Se invocan utilizando la etiqueta HTML <IMG>, esta no necesita una etiqueta de cierre y su sintaxis es: <IMG SRC="immagine.gif">

Donde SRC es la direccin donde se encuentra la imagen (en este caso "immagine.gif")..

ALT: Se utiliza para comentar una imagen.

<IMG SRC="immagine.gif" ALT="Obra de K. Haring">

WIDTH y HEIGHT: Define la anchura y la altura de la imagen.

<IMG SRC="immagine.gif" WIDTH=178 HEIGHT=180 ALT="Obra de K.Haring">

BORDER: Permite aplicar un borde a la imagen.

<IMG SRC="immagine.gif" ALT="Obra de K. Haring">

WIDTH=178

HEIGHT=180

BORDER=2

8-3-2013

HSPACE y VSPACE: Establece la distancia en pxeles de la imagen

a un objeto, ya sea de sus lados laterales como superiores e inferiores.

<IMG SRC="immagine.gif" WIDTH=178 HEIGHT=180 VSPACE=3 HSPACE=3 ALT="Obra de K. Haring">

BORDER=2

ALIGN: Define la posicin de la imagen respecto al texto colocado inmediatamente antes o despus. ALIGN=top: Alinea la primera lnea de texto con la parte superior de la imagen.

ALIGN=middle: Alinea la primera lnea del texto con el centro de la imagen.

ALIGN=bottom: Alinea la primera lnea de texto con la parte inferior de la imagen. ALIGN=left: El texto se coloca a la derecha de la imagen empezando desde la parte superior de la misma.

ALIGN=right: El texto se coloca a la izquierda de la imagen empezando desde la parte superior de la misma.

RECETAS

ENLACES

Para la realizacin de los enlaces ms creativos, es solo cuestin de combinar efectos de texto y color en los diferentes estados que puede tomar un enlace. A continuacin se muestran algunos ejemplos para dar una idea de las posibles combinaciones. Receta 1: Efecto de enlace en una palabra Paso 1: Crear el archivo HTML con el enlace al cual le haremos los ajustes.

8-3-2013

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Ejemplos enlaces</title> <link href="prueba.css" rel="stylesheet" type="text/css" /> </head> <body> <a class="a" href="#">Muestra</a> </body> </html> Paso 2: Creamos la hoja de estilo CSS. Paso 3: Definimos los estados del enlace. A continuacin mostramos varios formatos que se le pueden dar a un enlace usando distintas propiedades de cajas, colores y textos. Comando font-size: background-color: text-decoration: color: font-family: font-weight: border: border-color: border-top-width: border-bottomwidth: border-left-width: border-top-style: Funcin Define el tamao de la letras Define el color del fondo Subraya el texto Define el color de las letras Define el tipo de letra que se desea usar Establece el grosor de cada letra Establece propiedades para el borde del fondo Establece color para el borde Establece tamao al borde superior del fondo Muestra

border-right-width: Establece tamao al borde derecho del fondo Establece tamao al borde inferior del fondo Establece tamao al borde izquierdo del fondo Establece el estilo del borde superior del fondo
7

8-3-2013

border-right-style: border-bottomstyle: border-left-style: border-top-color: border-right-color: border-bottomcolor: border-left-color:

Establece el estilo del borde derecho del fondo Establece el estilo del borde inferior del fondo Establece el estilo del borde izquierdo del Establece el color del borde superior del fondo Establece el color del borde derecho del fondo Establece el color del borde inferior del fondo Establece el color del borde izquierdo del fondo Establece tamao que tendr el fondo de la imagen

background-image: Establece una imagen de fondo para del texto padding:

Receta 2: Ejemplo de un enlace con un botn. Paso 1: Crear el archivo HTML con el enlace al cual le haremos los ajustes.

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Ejemplos enlaces</title> <link href="prueba.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="cuatro"> <a href="#"> Enviar </a></div> </body></html> Paso 2: Creamos la hoja de estilo CSS. Paso 3: Le damos formato al botn para antes de ser oprimido.

8-3-2013

.cuatro a:link { font-family:Arial Black; font-size:19px; font-weight:bold; background-color:#9dce2c; text-decoration: none; color:#ffffff; display:inline-block; padding:10px 39px; border-radius:27px; border:8px solid #83c41a; text-shadow:1px 1px 24px #689324; } Paso 4: Efecto para cuando el mouse este sobre el botn. .cuatro a:hover { font-family:Arial Black; font-style:italic; font-size:19px; font-weight:bold; background-color:#9dce2c; text-decoration: none; color:#268A16; display:inline-block; padding:10px 39px; border-radius:27px; border:8px solid #83c41a; text-shadow:1px 1px 24px#689324; } Como resultado obtendremos: Botn.

Botn cuando se pasa el mouse por encima de l.

8-3-2013

Receta 3: Ejemplo de un men en la barra superior. Paso 1: Crear el archivo HTML con el enlace al cual le haremos los ajustes. Usaremos listas para crear el cuerpo del men.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Ejemplo Men&uacute;</title> <link href="styles.css" rel="stylesheet" type="text/css"> <div id='cssmenu'> <ul> <li class='active '><a href='#'><span>Inicio</span></a></li> <li class='has-sub '><a href='#'><span>Productos</span></a> <ul> <li><a href='#'><span>Producto 1</span></a></li> <li><a href='#'><span>Producto 2</span></a></li> </ul> </li> <li><a href='#'><span>Soporte tcnico</span></a></li> <li><a href='#'><span>Contactenos</span></a></li> </ul> </div> </head> </html>

Paso 2: Creamos la hoja de estilo CSS. Y definimos el comportamiento que tendrn los enlaces del men.

10

8-3-2013

#cssmenu{ border:none; border:0px; margin:0px; padding:0px; fontfamily:verdana,geneva,arial,helve tica,sans-serif; font-size:14px; font-weight:bold; color:8e8e8e; } #cssmenu ul{ background:url(menubg.gif) top left repeat-x; height:43px; list-style:none; margin:0; padding:0; } #cssmenu li{ float:left; padding:0px 8px 0px 8px; } #cssmenu li a{ color:#666666; display:block; font-weight:bold; line-height:43px; padding:0px 25px; text-align:center; text-decoration:none; } #cssmenu li a:hover{ color:#000000; text-decoration:none; } #cssmenu li ul{ background:#e0e0e0; border-left:2px solid #f68618; border-right:2px solid #f68618; border-bottom:2px solid #f68618; display:none; height:auto; filter:alpha(opacity=95); opacity:0.95; position:absolute; width:225px; z-index:200; /*top:1em; /*left:0;*/

} #cssmenu li:hover ul{ display:block; }

#cssmenu li li { display:block; float:none; padding:0px; width:225px; } #cssmenu li ul a{ display:block; font-size:12px; font-style:normal; padding:0px 10px 0px 15px; text-align:left; } #cssmenu li ul a:hover{ background:#949494; color:#000000; opacity:1.0; filter:alpha(opacity=100); } #cssmenu p{ clear:left; } #cssmenu .active > a{ background:url(currentbg.gif) top left repeat-x; color:#ffffff; } #cssmenu .active > a:hover { color:#ffffff; }

11

8-3-2013

Como resultado obtendremos:

RECETAS IMA GENES

Receta 1: Construccin de mens y bordes utilizando la propiedad Repeat. Paso 1: Crear el archivo HTML con el enlace al cual le haremos los ajustes.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Funcion Repeat</title> <link href="estilo.css" rel="stylesheet" type="text/css" /> </head> <body> <a class="a" href="#">Muestra</a> </body> </html> Paso 2: Colocar los elementos del men dentro de un contenedor div en el body del HTML y crear contenedores div para cada borde. <body> <div class="contenedor"> <div class="menu"> <ul> <li><a href="" title="">Inicio</a></li> <li><a href="" title="">Enlace 1</a></li> <li><a href="" title="">Enlace 2</a></li> <li><a href="" title="">Enlace 3</a></li> <li><a href="" title="">Enlace 4</a></li> <li><a href="" title="">Enlace 5</a></li> </ul> </div> <div class="Borde1"> <div class="Borde2"> </div> </body> </div> </div>

Paso 3: Crear una Hoja de Estilos. Paso 4: Personalizar la posicin y tamao del men. estilo.css .menu { height: 65px; /*Altura del men*/ width:1091px;/*Ancho del men*/ position: absolute;/*Posicin del men*/ top:150px; left: 110px; } .menu ul { liststyle:none;}/*Elimina las vietas de la lista*/

Paso 5: Si se desea establecer el men horizontalmente. estilo.css .menu ul li { float: left; } Paso 6: Convertir cada opcin del men en un bloque, cargar la imagen para cada bloque yrepetirla horizontalmente con la propiedad background-repeat.

estilo.css .menu ul li a { display: block;/*Se convierte cada enlace en un bloque*/ background: url('imagen1.jpg');/*Carga la imagen de fondo del men*/ background-repeat: repeat-x;/*Repite la imagen horizontalmente*/ margin-top:auto;/*Alinea los bloques en el centro del contenedor*/ line-height:35px;/*Alinea el texto verticalmente*/ width: 170px;/*Ancho de cada bloque*/

height: 37px;/*Alto de cada bloque*/ text-decoration: none;/*Elimina el subrayado*/ text-align:center;/*Alinea los enlaces en el centro de cada bloque*/ text-transform: uppercase;/*Enlaces en mayscula*/ font-size: 14px;/*Tamao de la letra*/ font-weight: bold;/*Tipo de letra*/ color:#000000;/*Color de la letra*/ }

Paso 7: Personalizar el tamao y posicin de los bordes, cargar la imagen para cada uno y repetirla en x y/o en y. estilo.css .Borde1{ height:1025px; width:40px; background:url(imagen2.jpg); background-repeat:repeat; position:absolute; left:50px; } .Borde2{ height:1025px; width:50px; background:url(imagen2.jpg); background-repeat:repeat; position:absolute; right:50px; } .contenedor { background:url(body.jpg); height: 1024px; widht: 768px; }

Como resultado obtendremos:

Receta 2: Imagen con doble borde y un ttulo. Paso 1: Crear el archivo HTML con el enlace al cual le haremos los ajustes.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Imagen con Doble Borde y Titulo</title> <link id="estilocss" type="text/css" href="estilo2.css" rel="stylesheet" media="screen" /> </head> <body> </body> </html> Paso 2: Creamos la hoja de estilo CSS. Paso 3: Dentro del body del HTML, cargar la imagen. Paso 4: Dentro del body del HTML, crear una citacin. <div class="img-desc"> <img src="imagen.jpg" alt="" width="442" height="487" class="double-border"/> <cite>Crisantamo</cite> </div>}

<div class="img-desc"> <img src="imagen1.jpg" alt="" width="442" height="487" class="double-border"/> </div>

Paso 5: Aadir hoja de estilos para el doble borde. Estilo2.css @charset "utf-8"; /* CSS Document */ img.double-border { border: 8px solid #FF0000; padding: 8px; background: #fff; }

Paso 6: hoja de estilo para la citacin. Estilo2.css div.img-desc { position: relative; display: block; height:335px; width: 575px; } div.img-desc cite { background: #111; filter:alpha(opacity=55); opacity:.55; color: #fff; position: absolute; bottom: -168px; left: 16px; width: 422px; padding: 10px; border-top: 1px solid #999; }

Como resultado obtendremos:

REFERENCIAS

1

Modulo de CSS3: http://www.w3schools.com/css/css_link.asp Tutorial de CSS3: http://es.html.net/tutorials/css/lesson6.php Propiedades de texto: http://www.librosweb.es/referencia/css/textalign.html Enlaces en HTML: http://www.virtualnauta.com/html-enlaces