INTERN.E.T HOME PAGE /PAGINA BASE DE INTERN.E.T
10.2.3.2.- Fondo ,Texto y Enlaces
10.2.3.2.1 Lista Completa de Colores
10.2.3.3.-Barras ,Botones e Imágenes
10.2.3.4.-Imágenes Encadenadas
10.2.3.5.-Carga Progresiva y Transparencias
10.2.3.6.-Cómo conseguir las Imágenes
Ahora vamos a ver cómo introducimos las Imágenes en el texto .Se entiende por imágenes no sólo los gráficos o fotografías o dibujos sino tambien los elementos decorativos como bolas ,barras,flechas etc. y la imagen general del documento ,los fondos ,los colores base y los de los enlaces.
Las imágenes vienen en tres formatos principales con extensiones , ordenadas de los que ocupan más espacio a los que ocupan menos , .bmp que es la que utiliza el Paintbrush para Windows .gif y .jpg para Internet.aunque hay muchas más como puedes ver con éste programa JASC PaintShopPro
, que se ofrece gratis durante 30 días. Los programas gráficos tienen la posibilidad de transformar de uno a otro formato así como la de elegir el tamaño de la imagen y su modificación introduciendo diversos efectos.
10.2.3..2.- Fondo ,Texto y Enlaces
En primer lugar vamos a modificar el fondo ,el texto y los enlaces Para elegir el fondo con color uniforme ,hay que cambiar la etiqueta inicial < BODY> por < BODY BGCOLOR="#RRVVZZ"> RR es un número que indica el rojo,VV indica el verde y ZZ indica el azul. Combinando los tres colores primarios podemos conseguir todos los demás.El número está en un sistema de base 16 ,con 16 dígitos en lugar de los 10 del sistema decimal .Los números son 0 1 2 3 4 5 6 7 8 9 A B C D E F. Como hay que poner dos ,el más pequeño es 00 y el mayor FF ,con lo que los colores más representativos serían :
Primarios FF0000 rojo ,00FF00 verde 0000FF azul, y combinados FFFFFF blanco (rojo ,verde y azul ), 000000 negro(ningún color ) ,FFFF00 amarillo (rojo con verde )
10.2.3.2.1 Lista Completa de Colores
Lista completa de colores es la siguiente :
Podemos tambien variar los colores del texto y de los enlaces de forma apropiada utilizando el mismo sistema: TEXT para el texto LINK para los enlaces VLINK para los enlaces ya visitados y ALINK para los enlaces cuando se pulsan.con lo que la etiqueta completa quedaría así:
< BODY BGCOLOR="#RRVVZZ"TEXT="#RRVVZZ" LINK="#RRVVZZ" VLINK="#RRVVZZ" ALINK="#RRVVZZ">
Una combinación muy utilizada sería:
<BODY BGCOLOR="#ffffff" TEXT="#000000" LINK="#0000ff" VLINK="#ff0000" ALINK="#00ffff"> Como se ve las FF se pueden escribir tambien en minúsculas .Color base blanco ,texto en negro ,enlace en azul , enlace visitado en rojo y enlace activo en azul verdoso claro.
Algunos navegadores compo el Netscape, pueden incluir de fondo una imagen que se repite a lo largo del texto . Para elegir el fondo con ésta imagen ,hay que cambiar la etiqueta inicial < BODY> por < BODY BACKGROUND="dibujo.jpg"> , normalmente y dada la mejor calidad del formato jpg ,es mejor utilizar los fondos en éste formato. Supongamos que tenemos el día celestial y queremos poner como fondo un cielo con nubes
< BODY BACKGROUND="gif/cielo.jpg">
Si quisiéramos ,podríamos escoger otro fondo como el de la pared 
Para evitar el, problema de que en los navegadores que no acepten
como fondo una imagen o cuando se desactive la carga de imágenes ,queden fuera
de lugar el resto de los colores elegidos , podemos incluir como fondo uniforme
un color similar como por ejemplo el azul desvaído 33ffff ,con lo que la
etiqueta quedaría así:
<BODY < BODY BACKGROUND="gif/cielo.jpg"> BGCOLOR="#33ffff" TEXT="#000000" LINK="#0000ff" VLINK="#ff0000" ALINK="#00ffff">
10.2.3.3.-Barras ,Botones e Imágenes
Ahora vamos a introducir un toque de color en nuestro texto, con una barra de colores cuyo formato es IMG SRC Fuente de Imagen (Image Source) con lo que suponiendo que la imagen está guardada en el directorio gif en el que estamos trabajando con las imágenes ,queda :
<img src="gif/barracol.jpg">
si estuviera en otro lugar se lo tendríamos que indicar ,por ejemplo:
<img src="file:///c|/cursohtm/gif/barracol.jpg">
Si quiero explicar de qué se trata,le incluyo una explicación ALT" explicación de la imagen " Esto se utiliza ,en el caso de que la persona utilice el navegador sin imágenes o cuando se utiliza una imagen como paso a otra imagen o un enlace y quedaría: <img src="file://c/cursohtm/gif/barracol.jpg"> ALT" barra de colores">
Si quiero además añadir a nuestro texto unos botoncitos al comienzo de cada párrafo ,esta vez con formato GIF tendría que poner delante de cada uno :
<img src="gif/boton.gif">
Ahora vamos a ñadir una imagen del bandera de España para indicar que éste producto está fabricado aquí
<img src="gif/miniban.gif " ALT =Minibandera de España "> MADE in SPAIN
Para cargar más rápido la imagen le indicamos al programa Netscape las dimensiones que tiene la bandera para que las reserve, con lo que cargará más rápido la imagen, ancho (WIDTH ) por alto (HEIGHT) que según el programa gráfico son 27 por 16 pixels (átomos de dibujo) con lo que queda así:
<img src="gif/miniban.gif " width=27 Height= 16 ALT ="Minibandera de España "> MADE in SPAIN
Si quisieramos una bandera más grande cambiamos las dimensiones al triple y colocamos el titular alineado arriba (Top) ,ALIGN="TOP" ,al medio (Middle) ALIGN="MIDDLE" ,o abajo (Botton) ALIGN="BOTTON" ,vamos a seleccionar el medio y quedaría así:
<img src="gif/miniban.gif " width=81 Height= 48 ALT ="bandera de España ">ALIGN="BOTTON" MADE in SPAIN
Si quisiéramos alinear las imágenes a la derecha Align=" Right" o a la izquierda Align= "Left" ,colocaríamos ésta instrucción entre los dos ángulos , por ejemplo : <img src="gif/miniban.gif " width=81 Height= 48 ALT ="Bandera de España "ALIGN=RIGHT > MADE in SPAIN
Si queremos centrar las imágenes o todo lo que haya entre medias en los puntos suspensivos ,utilizamos la etiqueta <CENTER>............ </CENTER>
10.2.3.4.-Imágenes Encadenadas
Vamos a preparar dos imágenes encadenadas , así se ve antes de cargar si interesa o no, cuando se hace click en la primera tamaño de uña de pulgar (Thumbnail) , astron1.jpg, aparece la segunda más grande ,astrona.jpg.
El sistema es igual al del enlace que se veía en el capítulo anterior ,lo único que cambia es que la imagen pequeña se incluye completa ,<img src="gif/astron1.jpg" >en la zona segunda donde se escriben las palabras en azul para hacer click. Al final indicamos el tamaño de la imagen grande (37K).Así queda:
<a href="file://c/ cursohtm/gif/astrona.jpg"><img src="file://c/guia/astron1.jpg">¿ Adivina que tengo en común con el primer hombre en la luna ? (37K)
10.2.3.5.-Carga Progresiva y Transparencias
Para que la imagen .gif se cargue de forma progresiva con una definición cada vez mejor ,hay que grabarlo con un programa gráfico de forma entrelazada (interlaced) ,así las imágenes se graban y se muestran de forma progresiva, para que no haya que esperar al final para verlo todo.Tambien podemos modificar con un programa gráfico, JASC PaintShopPro ,el fondo de las imágenes de una manera uniforme, para que sea del mismo color que el fondo general y así parece que el gráfico "flota " en la página,es transparente. Se utiliza el formato GIF 89a ( especificación del año 89 ) con una variente al grabarlo para que produzca ése efecto " Coloca el valor de transparencia al fondo "(Set the transparency value to the background)
10.2.3.6.-Cómo conseguir las Imágenes
Para conseguir las imágenes suponiendo que no tienen copyright se puede realizar de cuatro maneras :
1.-Se buscan en un Banco de Imágenes ,por ejemplo en la Imágenes transparentes deYahoo en un programa de dibujo como Corel Draw.
Otras Páginas relacionadas se encontrarán en ésta dirección de Referencias
Nosotros tenemos un pequeño Archivo de Imágenes disponible para mejorar las páginas Web ,y practicar.
2.-Se capturan cuando se están viendo en una página Web con un navegador avanzado tipo Netscape 2.0 poniendo el puntero del Ratón encima , haciendo Click con el botón derecho y seleccionando la opción Save Image (Guardar Imágenes) ,se abre el árbol de directorios y se graban con el nombre que queramos.
3.-Aunque no hayamos querido grabarlas ,los programas navegadores guardan en el caché (Memoria de almacenamiento ) todas las imágenes correspondientes a las páginas que hemos ido visitando ultimamente ,el único problema es que no podemos identificarlas fácilmente si no utilizamos un programa especial que se llama PSP Browser o similar que se obtiene cuando se carga el program de Gráficos recomendado. JASC PaintShopPro
4.-Capturando la pantalla con un programa especial Snag-it con 45 días para evaluarlo,o utilizando en Windows la combinación de teclas ALT + IMPR PANT ,con lo que la imagen queda en el portapapeles (clipboard) , luego se abre un programa gráfico tipo Paintshop o el JASC y se pega (paste ) como nueva imagen. Ahora ya se puede manipular y grabar como se quiera . .En Compuserve para el Mosaic el directorio suele estar en c:/cserve/mosaic/cache y si se trabaja con Netscape en c:/netscape/cache.
Por cierto que es conveniente borrar periódicamente los archivos del caché si necesitamos más espacio en el disco duro. Para borrarlo en Netscape se va al menú de opciones ( Options) Preferencias en la Red (Network Preferences ) y se hace click sobre el botón del caché del disco y del programa ,con lo que se borran automáticamente
10.2.3..7.-Documento versión 4
Y es así como queda el documento versión 4 en HTML
<HEAD>
<TITLE> MI DOCUMENTO VERSION 4</TITLE>
</HEAD>
<BODY < BODY BACKGROUND="gif/cielo.jpg" BGCOLOR="#33ffff" TEXT="#000000" LINK="#0000ff" VLINK="#ff0000" ALINK="#00ffff">
<H4> TÍTULO DE MI DOCUMENTO VERSION 4 </H4>
<img src="gif/boton.gif"> Este es el primer párrafo de éste importante documento que trata de cómo aprender perfectamente las < A HREF="file:///c|cursohtm/uno.htm#GRAFICOS"> "bases del HTML" </A> <P>
<img src="boton.gif"> Este es el segundo párrafo que sirve para practicar el enlace interno.Si quieres conocer la fecha de éste documento pulsa <A HREF="#FECHA">Aquí </A><P>
<img src="gif/boton.gif"> En éste tercer párrafo terminamos el documento y lo datamos.Podemos además introducir unas líneas de separación ,que se consiguen con un HR entre ángulos < HR> para cada línea y dos saltos de línea con dos finales de párrafo<HR> <HR> <P><P>
<A NAME="FECHA"> Fecha 29/04/97</A> <P>
< A HREF="http://www.intern-e-t.com/servicios.htm#SERVICIOS"> " VISITA LA PAGINA DE SERVICIOS DE INTERN.E.T" </A>
< A HREF="ftp://ftp.entrepreneurs.net ">VISITA EL RECURSO DE FTP DE ENTREPRENEURS </A>
<mailto:[email protected]">Correo Electrónico de INTERN.E.T>
<img src="file://c/cursohtm/gif/barracol.jpg"> ALT" barra de colores"> <img src="gif/miniban.gif " width=27 Height= 16 ALT =Minibandera de España "> MADE in SPAIN <img src="gif/miniban.gif " width=81 Height= 48 ALT ="bandera de España ">ALIGN="BOTTON" MADE in SPAIN
<img src="gif/miniban.gif " width=81 Height= 48 ALT ="Bandera de España "ALIGN= "RIGHT" > MADE in SPAIN
<CENTER><img src="gif/miniban.gif " width=81 Height= 48 ALT ="Bandera de España "A> MADE in SPAIN </CENTER>
<a href="astrona.jpg"<>img src="gif/astron1.jpg">¿ Adivina que tengo en común con el primer hombre en la luna ? (37K)</A>
</BODY>
</HTML>
[email protected]
Vuelve al Principio del Capítulo