INFORMATICA II

Imgenes y Fondos Vinculos

Ing. William Len Velsquez williamleon20@yahoo.com

CLASE 2

IMGENES
<img> Es una etiqueta que nos permite incluir imgenes en nuestras

pginas Web Se debe indicar el nombre y la localizacin de un archivo que contiene una imagen. La estructura bsica de la etiqueta es: <img src="nombre_imagen"> Ejemplo : <img src="imagen.gif"> Con el atributo src (image source, fuente de la imagen) se indica que se quiere cargar una imagen llamada imagen.gif (o el nombre que tenga el archivo).

<IMG>
Atributo alt= Parmetros "descripcin" Descripcin Sirve para incluir una palabra o frase breve indicativa de la imagen (se ver cuando no se cargue la imagen; til cuando se trabaja con el navegador en forma de texto). Tambin se ver al poner sobre la imagen el puntero del ratn. Pone una lnea de texto junto a la parte superior de la imagen. Pone una lnea de texto a media altura de la imagen. Pone una lnea de texto junto a la parte inferior de la imagen (en estos tres casos, si el texto ocupa ms de una lnea, contina en la parte inferior de la imagen). Alinea una imagen a la derecha. Alinea una imagen a la izquierda (en estos dos casos, el texto rodea completamente la imagen).
Ajustan el tamao de la imagen a x pixels de ancho e y pixels de alto. Esto es til ya que, de este modo, al cargar la pgina el navegador reserva espacio para la imagen y distribuye el texto de la forma apropiada, sin interrupcin, a la vez que va rellenando el espacio reservado a las imgenes.
Indican el espacio horizontal y vertical, respectivamente, de separacin entre la imagen y el texto que la rodea.

align=

top
middle bottom

align=

right left
X Y

width= height=

hspace= vspace=

X y

Posicin del texto

Posicin del titulo con respecto a la imagen (si es que

quiere colocar un titulo). Se puede colocar arriba, en medio o abajo del lado de la imagen. Para ello se aade el atributo align a la etiqueta, de la siguiente manera: <img src="filmar.gif" align=top> Titular alineado arriba <img src="filmar.gif" align=middle> Titular alineado en medio <img src="filmar.gif" align=bottom> Titular alineado abajo

Posicin del texto

Alineacin de las imgenes

los atributos right (derecha) y left (izquierda). "estudia1.gif", alineada a la derecha, se obtiene con la etiqueta: <img src="estudia1.gif" align=right> "estudia2.gif", alineada a la izquierda, se ha obtiene con la etiqueta: <img src="estudia2.gif" align=left>

Alineacin de las imgenes

Alineacin de las imgenes

Ejemplo: <img src="alumna.gif" align=left> Este texto esta a

un lado de la imagen. <br> Este tambin esta a un lado de la imagen, en la lnea siguiente. <br clear=left> Este otro texto, en cambio, ha buscado el primer margen libre a la izquierda. Que resulta:

Dimensionando la imagen
Los atributos son width (ancho) y height (alto). Por ejemplo, para la imagen alumna.gif : <img src="alumna.gif" width=120 height=94> Es conveniente hacer esto con todas las imgenes, incluso con las ms pequeas (iconos, botones, etc), para que no haya ninguna interrupcin en el proceso de carga del documento.

INSERTAR IMGENES CON Dw

INSERTAR IMGENES CON Dw

Modificar las caractersticas de la imagen

APLICACIONES CON IMGENES

Como Vieta Las listas no ordenadas permiten insertar automticamente una figura circular o cuadrada, pero a travs de las imgenes se puede crear listas mucho mas vistosas Por ejemplo Si tenemos la imagen de un botn con el nombre bgold.gif que se puede utilizar como una vieta Para utilizarlo en el comienzo de una lnea, se debe escribir en el sitio correspondiente:
<IMG SRC="bgold.gif> Esta lnea esta precedida por un botn

APLICACIONES CON IMGENES

Como barra separadora La etiqueta hr permite insertar una lnea horizontal en la pgina, si bien en cierto las nuevas versiones permiten controlar el tamao, la alineacin y el espesor, mediante la utilizacin de imgenes apropiadas se pueden insertar lneas mucho mas vistosas Ejemplo Tambin podemos hacer lo mismo con la barra separadora que esta en el archivo bargold.gif. Entonces escribimos:
<CENTER> <IMG SRC="bargold.gif> <BR>Esta lnea esta debajo de una barra separadora dorada. </CENTER>

EJERCICIOS
En la pgina llamada ejer0201.html mostrar tres imgenes y

deber colocar a la derecha el nombre de la imagen. La primera deber estar en la parte superior derecha de la imagen, la segunda en el centro y a la derecha y el tercero en la parte inferior derecha

EJERCICIOS
En la pgina llamada ejer0202.html contendr dos imgenes, la

primera estar alineada a la izquierda y la segunda estar alineada a la derecha, deber ir acompaada con el texto que se muestra a continuacin y deber ser copiada dos veces: El texto es el siguiente:
Tanto el formato GIF como el formato JPEG pueden ser vistos con casi la prctica

totalidad de los navegadores. Sin embargo Cundo es conveniente usar uno y cuando es conveniente usar el otro?, Puedo convertir las imgenes de un tipo a otro?, Qu ventajas ofrece cada uno?. Conocer las respuestas a estas preguntas nos permitir usar de una manera mucho ms eficiente y profesional las imgenes en nuestras pginas. En este apartado nos dedicaremos a responderlas y veremos las ltimas novedades del formato GIF que permite crear imgenes transparentes e imgenes con movimiento. Para terminar comentaremos algunos consejos para aprovechar al mximo y eficientemente las posibilidades del HTML en lo que a las imgenes se refiere

EJERCICIOS
La pgina ejer0204.html tendr una el siguiente texto Verduras
Apio Lechuga

. Frutas
Manzana Pia Platano

luego se insertar una lnea divisoria al inicio y al final de los grupos Los smbolos de las listas desordenadas y los separadores deben ser imgenes

FONDOS CON UN COLOR UNIFORME

Se consigue aadiendo el atributo bgcolor a la etiqueta <body> (situada al principio del documento), de la siguiente manera: <body bgcolor="#XXYYZZ"> Donde: XX es un nmero indicativo de la cantidad de color rojo YY es un nmero indicativo de la cantidad de color verde ZZ es un nmero indicativo de la cantidad de color azul Estos nmeros estn en numeracin hexadecimal.

FONDOS CON UN COLOR UNIFORME

Esta numeracin se caracteriza por tener 16 dgitos (en lugar de los diez de

la numeracin decimal habitual). Estos dgitos son: 0123456789ABCDEF Es decir, que en nuestro caso, el nmero menor es el 00 y el mayor el FF. As, por ejemplo, el color rojo es el #FF0000, porque tiene el mximo de rojo y cero de los otro dos colores. Los colores primarios son: Otros colores son: #FFFFFF - Blanco #FF0000 - Rojo #000000 - Negro #00FF00 - Verde #FFFF00 - Amarillo #0000FF - Azul Para hacer un color ms oscuro, hay que reducir el nmero de su componente, dejando los otros dos invariables. As, el rojo #FF0000 se puede hacer ms oscuro con #AA0000, o an ms oscuro con #550000.

FONDOS CON UNA IMAGEN

El fondo de una pgina puede ser tambin una imagen, ya sea en formato GIF o JPEG. Esta imagen se repite por toda la pgina, de una manera anloga al tapiz de Windows, es decir en forma de mosaico.

La estructura de la etiqueta es:

<body background="imagen.gif"> o bien: <body background="imagen.jpg">

FONDOS DE PAGINAS CON Dw

EJERCICIOS
1. Modifique la pgina ejer0201.html colocando como fondo de un determinado color y tambin asigne un color al texto, de tal forma que haga un buen contraste

2.Modifique la pgina ejer0202.html colocando como fondo una determinada imagen y tambin asigne un color al texto de tal forma, que haga un buen contraste

3. Modifique la pgina ejer0203.html colocando como fondo un color uniforme y una determinada imagen, el color seleccionado debe ser parecido al de la imagen, y tambin asigne un color al texto de tal forma que haga un buen contraste

ENLACES
La principal caracterstica de HTML

viene de su habilidad para conectar a otras porciones de documentos, e incluso a imgenes. Los enlaces de hipertexto o hipermedia (en ingls links) no son ms que unas zonas (palabras o imgenes) especiales de nuestro documento que ofrecen la posibilidad de pulsar sobre ellas para ir a otras pginas u otro archivo.
William Len Velsquez

CLASIFICACIN
Los enlaces pueden clasificarse en dos tipos, los internos o

locales y los externos: Los enlaces internos son aquellos que enlazan las pginas que componen un mismo sitio web (web site). Todas estas pginas estarn (generalmente) en el mismo servidor WWW, y por tanto estarn tambin en el mismo computador
/hobbies/index.html Los enlaces externos permiten saltar desde una pgina hasta otra puede estar en cualquier otro lugar del mundo en otro servidor http://www.otroservidor.com/hobbies/index.html.

William Len Velsquez

LA ETIQUETA ANCHOR <a>... </a>

En general, los enlaces tienen la siguiente estructura:

<a href="xxx"> yyy </a> Donde xxx es el destino del enlace. yyy es el texto indicativo en la pantalla del enlace (con un color especial y generalmente subrayado)

William Len Velsquez

Ejemplo sencillo del uso de enlaces

Crear un sitio web personal con 2 pginas. La pgina principal

ser el archivo index.html y se quiere que en ella haya un enlace a otra pgina donde se han escrito sobre los hobbies del creador del sitio web y que se encuentra en el archivo hobbies.html. El enlace podra ser algo as: Tambin puedes conocer mis <a href="hobbies.html"> hobbies</a> El resultado es el que puede apreciarse en la figura donde la palabra hobbies aparece resaltada.

William Len Velsquez

I. Enlaces internos
En casos de documentos (o pginas) muy extensos, es importante dar un

salto desde una posicin a otra determinada. Lo que antes se ha denominado XXX, es decir, el destino del enlace, en este caso se nombrar al lugar dentro de la pgina a donde queremos saltar, es decir lo sustituimos por un nombre por ejemplo #ancla1. (La palabra ancla1 puede ser cualquier palabra). Lo que se ha llamado antes YYY es la palabra (o palabras) que aparecern en la pantalla en color (en forma de hipertexto). Su estructura es, entonces: <a href="#ancla1"> YYY </a> Pero para que se pueda utilizar esta forma de vnculo, en el sitio exacto a donde queremos saltar, se debe poner la siguiente etiqueta: <a name="ancla1"> </a> William Len Velsquez .

I. Enlaces internos. Ejemplo

Crear una pagina con el nombre de ejer41.htm escribir el cdigo que aparece a continuacin <a href="#final"> Pulsa para ir al final</a>
Luego escribir 20 prrafos con el siguiente texto:

Texto de prueba
Al final del documento coloque esta otra etiqueta

<a name="final">FINAL </a>

visualizar con su navegador Luego realizar otro vnculo para regresar al inicio
William Len Velsquez

II. Enlaces locales:

Lo frecuente es que se tiene varias pginas conectadas entre

si, una inicial (o principal) y otras conectadas a ella, e incluso entre ellas mismas. Partiendo de la estructura general <a href="xxx"> yyy </a> Donde XXX, es decir, el destino del enlace, en este caso ser el nombre de la pagina que se va ha enlazar por ejemplo Links.htm Y YYY es la palabra (o palabras) que aparecern en la pantalla en color (en forma de hipertexto).

William Len Velsquez

II. Enlaces locales:

William Len Velsquez

II. Enlaces locales: Ejercicio

Crear tres paginas

La primera pagina se llamar ejer0402.html

que tendr una el texto: Bienvenida a la pagina de [su nombre] La segunda pagina se llamar imagen.html que contendr una imagen centrada. La tercera pgina se llamar miscursos.html que tendr una lista desordenada con los cursos que esta llevado actualmente, En la parte inferior aparecer dos textos Atrs y Siguiente vinculados a cada una de las pginas creadas
William Len Velsquez

En ejer0402 estara vinculada: Miscursos imagen , En imagen estara vinculada: ejer0402 Miscursos , En miscursos estara vinculada: Imagen ejer0402

III. Enlaces remotos:

Si se quiere enlazar con una pgina que est fuera de nuestro sistema

(es decir, que est en un servidor distinto al que soporta nuestra pgina), es necesario conocer su direccin completa, o URL . URL = Uniform Resource Locator. El URL podra ser, adems de la direccin de una pgina del Web, una direccin de ftp, gopher, etc. Partiendo de la estructura general <a href="xxx"> yyy </a> Donde XXX, es decir, el destino del enlace, en este caso ser la direccin URL de la pagina que se va ha enlazar, por ejemplo http://www.servidor.com/inicio.html, Y YYY es la palabra (o palabras) que aparecern en la pantalla en color (en forma de hipertexto).
William Len Velsquez

III. Enlaces remotos: Ejemplo:

Crear una pagina con el nombre de ejer0403.html Se quiere enlazar con la pgina de Mozilla (cuyo URL es:

http://www.mozilla.org/es-ES/firefox/new/), la etiqueta sera:

<a href=http://www.mozilla.org/es-

ES/firefox/new/"> Pgina inicial de Mozilla </a>

Que dara como resultado:

Pgina inicial de Mozilla Nota: Es muy importante copiar estas direcciones correctamente (respetando las maysculas y minsculas, pues los servidores UNIX s las distinguen)
William Len Velsquez

IV. Enlaces con direcciones de correo

Tambin se puede entablar vnculos con direcciones de correo Partiendo de la estructura general

<a href="xxx"> yyy </a>

Donde XXX, es decir, el destino del enlace, en este caso se

sustituye por mailto: seguido de la direccin de email Y YYY es la palabra (o palabras) que aparecern en la pantalla en color (en forma de hipertexto). La estructura de la etiqueta es:
<a href="mailto: direccin de email"> Texto del enlace

</a>
William Len Velsquez

IV. Enlaces con direcciones de correo

Ejemplo En la misma pagina ejer0403.html adicionar el siguiente enlace

Comentarios a <a href="mailto: williamleon20@yahoo.com">

William Len</a> Que resultara: Comentarios a William Len Bajo esta forma no se tendra ningn medio de conocer la direccin de

email. Por lo tanto, es ms recomendable colocar de la siguiente forma: Comentarios a William Leon en <a href="mailto: williamleon20@yahoo.com> williamleon20@yahoo.com </a> Que resulta: Comentarios a William Leon en williamleon20@yahoo.com
William Len Velsquez

HIPERVINCULOS CON Dw

Ejercicios
Crear una pagina con el nombre de ejer0204.html

William Len Velsquez

Ejercicios
Verifique el cdigo
<center> <h1> Mis Sitios Web favoritos </h1></center> <hr> Estas son mis pginas favoritas: <p><a href="http://www.google.com">Google</a> <br> <a href="http://www.microsoft.com"> Microsoft </a> <br> <a href="http://www.yahoo.com"> Yahoo! </a><p> Comentarios a William Leon en <a href="mailto:williamleon20@yahoo.com"> williamleon@yahoo.com </a>

William Len Velsquez

IMGENES COMO ENLACES

Otra posibilidad muy interesante es la de utilizar una imagen como

enlace a otra pgina. Para estos casos se utilizan generalmente imgenes pequeas (iconos), aunque se puede usar cualquier tipo de imagen. La estructura general de un enlace sera : <a href="xxx"> yyy </a> donde xxx era el destino del enlace en este caso sustituimos por el nombre del archivo de la pgina a la que queremos acceder yyy es la etiqueta completa de la imagen (que queda as envuelta dentro de la etiqueta del enlace) Vista la estructura de los enlaces el tipo de cdigo necesario sera: <a href="archivo.html"> <img src="imagen.gif"> </a> William Len Velsquez

IMGENES COMO ENLACES Ejemplos:

En la pagina ejer0201.html en una nueva lnea realice el

mismo vinculo pero ahora con una imagen

Y cree los vinculos con las imgenes (utilice las imgenes de iconos:

Vinculo en la misma pgina

<a href="#final"><IMG SRC=166.gif"></a>

En las paginas del ejercicio0402 inserte dos imgenes para vincular con las respectivas pginas. Por ejemplo <a href=miscursos.html"><IMG SRC=150.gif"></a>
William Len Velsquez

Borde de las imgenes

En el primero de ellos no se ha usado el atributo border: <a href="otra.htm"> <img src="izda.gif"> </a> En el segundo se ha usado dndole el valor cero para eliminar el borde: <a href="otra.htm"> <img src="izda.gif" border=0> </a> Y en el tercero se ha dado el valor de 10: <a href="otra.htm"> <img src="izda.gif" border=10> </a>

William Len Velsquez

LA IMAGEN ENLAZADO CON OTRA IMAGEN

Tambin se puede utilizar una imagen para enlazar con

otra imagen. En este caso se sustituir

xxx (el destino del enlace) por el nombre del archivo de la

imagen a la que queremos acceder

yyy (lo que aparece en pantalla como el enlace) por la

etiqueta completa de la imagen que queremos que aparezca en la pantalla como el enlace de la otra.
William Len Velsquez

LA IMAGEN ENLAZADO CON OTRA IMAGEN

Seleccionar la imagen, luego desde insertar seleccionar

Hipervnculo

LA IMAGEN ENLAZADO CON OTRA IMAGEN

Crear una pagina con el nombre de ejer0205.html y enlazar con

la imagen 01.jpg por medio de esta otra imagen: (01.gif):

<a href=imagen/01.jpg><img src="imagen/01.jpg

width= 80 height=100></a> Que da como resultado:

William Len Velsquez

FIN