Imágenes

Antes de empezar a decirte como se inserta una imágenen en tu pagina WEb primero te enseñare como esta la puedes guardar en tu dísco duro.

1.Hacer click con el botón derecho sobre la imagen.
2.Elija "guardar como..." (save as...) del menú archivo
3.Darle la dirección de el directorio donde lo quiere guardar y salve.

Las imágenes son un elemento muy importante para nuestra pagina WEB, ya que la adornan y la enbellécen, pero hay dos aspectos que debemos tener en cuenta:
La primera es que el tiempo de descarga de una imagen es lento, lo cual quiere decir que si llenamos nuestra pagina de imágenes va a demorar mucho en descargarse completamente lo cual puede hacer que la persona si salga sin llegar a ver el contenido de esta. Es por esto que se dice que las imágenes en la Web son un arma de doble filo. Una buena imagen puede llamar la atención y ser de gran utilidad para ilustrar o para atraer visitantes, pero una imagen mala o muy pesada (es decir, un archivo de muchos kilobytes de tamaño) puede espantar hasta al más voluntarioso de los navegantes.

La segunda es que el visitante haya deshabilitado la carga automática de imágenes lo cual podría ser muy perjudicial si hemos escogido imagenes para explicacion de algo, o como link,etc.

En cuanto a las imagenes existen dos formatos fundamentales que nos proporcionan el mejor uso: GIF (llamado así por sus siglas en inglés, Graphic Interchange Format) y JPEG (iniciales del grupo que lo desarrolló, el Joint Photograph Expert Group).

El formato GIF fue creado por la empresa CompuServe, para que sus usuarios pudieran intercambiar imágenes entre sí a través de la Red. Para almacenar la información, el GIF utiliza 8 bits (unidades de información) por cada pixel . Como cada bit tiene dos estados posibles (uno o cero), la imagen puede desplegar hasta 256 colores. Como la mayoría de los monitores tienen capacidad para representar por lo menos 256 colores en pantalla , el formato GIF funciona de manera razonable.

Por otro lado, el formato JPG fue creado especialmente para almacenar imágenes con calidad fotográfica. Cumple con su tarea sacrificando calidad de imagen a cambio de una paleta de colores más extensa. Utiliza 24 bits por pixel, lo que le permite albergar hasta 16.777.216 colores en cada imagen. A diferencia de lo que se puede llegar a pensar, el jpg no necesariamente es más pesados, ya que posee un mecanismo de compresión que reduce el tamaño del archivo mediante cierta pérdida en la información.

Como regla general, conviene utilizar archivos con extensión JPG cuando la imagen a insertar sea una foto. Si, en cambio, nuestra imagen contiene un logo o un dibujo de pocos colores o con grandes superficies cubiertas por colores parejos, es conveniente utilizar un GIF.

Insertar una imágen

La etiqueta utilizada para agregar imágenes a una página Web es <IMG> y va acompañada de un atributo fundamental "SCR", que indica la ruta donde se encuentra el archivo que contiene la imagen a insertar.

Es decir:

<IMG SRC="lugar donde guardo la imagen">

Supongamos que tengo la imagen stopfasc.gif, que está presente en el mismo directorio donde está la página y que la quiero insertar. La etiqueta apropiada sería:

<IMG SRC="stopfasc.gif">

Y el usuario verá en el browser:

EL ATRIBUTO ALT

Otro atributo importante de la etiqueta <IMG> es "ALT". Este atributo permite complementar la imagen con un texto alternativo, utilizado principalmente para aquellos browsers que no permiten mostrar imágenes, ya sea porque son navegadores que sólo soportan texto (como Lynx), porque el usuario tiene desactivada esta opción o porque se produjo un accidente que impidió la llegada del gráfico a la PC del usuario. El texto aparecerá en el espacio correspondiente a la imagen, y también cuando el usuario pase el mouse por arriba de la imagen, incluso si ésta bajó normalmente a la computadora del navegante.

Ejemplo:

<IMG SRC="stopfasc.gif" ALT= "contra la intolerancia">

El usuario verá (pasar el mouse arriba del texto):

Contra la intolerancia de los de siempre

 

Imágenes como enlaces

Otra característica interesante de las imágenes insertadas es que permiten ser utilizadas como hipervínculos. Para esto, es necesario crear un enlace y en vez de encerrar el texto dentro la etiqueta <A> hay que encerrar una imagen.

Ejemplo:

<A HREF="http://www.mazosoft.net/mazolandia/abandoware.htm"> <img src="anop.gif" alt="Click aqui para descargarte un videojuego gratis en esta web"> </A>

Resultado:

Cklic aqui para descargarte un videojuego gratis en esta web

Tambien podemos enlacer una imagen con nuestra direccion de correo electronico.

Ejemplo:

<A HREF=mailto:canomazo@hotmail.com;img src="buzon12.gif"
alt="Click aqui para mandarme un mail" >

El usuario verá

Cklic aqui para mandarme un E-Mail



BORDES:

El atributo utilizado para establecer un borde en una imagen es BORDER= #, dónde # es un número de 0 a 99.

Ejemplo de una imagen sin especificar borde

<img scr="dancer.gif">


Ejemplo de imágenes con el atributo BORDER

<border=5 img scr="dancer.gif">

O sino

<border=15 img scr="dancer.gif">

Cada vez que utilizamos una imagen para establecer un hipervínculo, de manera automática el browser agrega un borde a la imagen. Si queremos eliminarlo, deberemos indicarlo con el atributo BORDER=0.

Alineando la imagen

El atributo utilizado para alinear una imagen es ALIGN

Si quiere insertar una imagen a la izquierda de la pantalla

<img align=left src="dancer.gif">

Si prefiero insertarla a la derecha:

<img align=right src="dancer.gif">                                                                                                                                      

                                                                                                             

                                                                                                                                                                                                                                                 

Como todavía hay browsers que no soportan la etiqueta <img align=center>, para centrar una imagen hay que recurrir a un pequeño truco: primero centramos un párrafo (tengamos o no texto) y luego insertar la imagen

Para centrar una imagen, entonces:

<P ALIGN=CENTER> <img src="dancer.gif"> </P>



Alinear el texto después de la imagen

Para esto se utiliza el atributo ALIGN.Este es un parámetro opcional usado para alinear la imagen respecto al texto que la acompañ en la misma línea convirtindola en lo que se llama una imagen flotante. Hay dos tipos basicos de alineacion:

Vertical:
TOP(ARRIBA), MIDDLE(MEDIO) y BOTTOM(ABAJO).El valor que utiliza este atributo por defecto es BOTTOM. Este atributo tambien es utilizado cuando queremos insertar dos imágenes en una misma linea.

Horizontal:
LEFT(IZQUIERDO), RIGHT(DERECHO), TEXTTOP, ABSMIDDLE, BASELINE y ABSBOTTOM

EJEMPLO:

Atributos HEIGHT(altura) y WIDTH (ancho)

Permiten cambiar el tamaño de una imagen. Un ejemplo sin estos atributos

<IMG SRC="dancer.gif">

El usuario verá:

Debido a que este atributo falsea la imagen es logico que esta se distorcione

<IMG SRC="dancer.gif" ALIGN=LEFT WIDTH=75 HEIGTH=40>

                                

 

 

Fundamentos del lenguaje de programación de web HTML Encabezamiento titulo y cuerpo del documento Otros tabas diferentes Caracteres especiales para incluir en ele documento html Formas de alterar el tamaño y los colores de nuestros textos todos los codigos de los colores en exadecimal Parrafos salto de linea parrafos horizontales LISTAS TABLAS PARA INSERTAR EN LA WEB Links hacia otras paginas web dentro de tu web o en Internet Insertqar imagenes en la web Formularios para que tus visitantes se comuniquen con Vd. via E-Mail y lleguen a su correo Construir frames para tus páginas web Para insertar videos Applets de Java o animaciones de flash PARA PRACTICAR CON LOS CODIGOS CONTENIDOS EN ESTE MANUAL el sisteme es sencillo copiar el codigo y pegar luego darle a prewie Diseños de webs Cybercafes locutorios  proyectos para internet Recursos gratuitos para webmasters o que pretendan serlo Ofertas especiales de diseños unicos Contacte con nosotros para realizar un buen proyecto el La Red Aqui su publicidad en la Red 100% efectiva y garantizada Mi ultima extensión para el navegador Crhome Javascript en estado puro Deposito de rutinas Javascript para paginas web acompañado de manuales para implementarlas en sus páginas web de forma fácil y sencilla y unas cuantas utilidades para diseñadores de páginas web, este deposito renueva sus rutinas periódicamente con lo ultimo que sale. La forma de usarlo es sencilla se pulsa sobre el lógo de la extensión en la barra del navegador Crhome y al pulsar sobre el botón Javascript se despliega el deposito que tiene forma de palm y se escoge la rutina que mejor nos venga para lo que queremos hacer. Pulsa el boton Javascript para que veas el funcionamiento
En este enlace puedes acceder a la extensión para ponerlo en el navegador de Google google crome https://chrome.google.com/extensions/detail/fmhjfbflpoenofpbeahkahdhcpeaoehh

Diseño profesional de webs | Lista de precios Recursos para websmasters gratuitos | Oferta especial | CONTACTENOS | Aquí su publicidad
Los mejores periodicos en la Red de Amadeo Cano Mazo (2) - 222 usuarios - Instalaciones semanales: 59 Accede a la prensa del mundo desde aqui Los mejores diarios y prensa diaria en general de Internet a un toque de ratón e irá creciendo en numero de diarios y revistas especializadas, la utilización es sencilla se da al icono en la barra de Crhome y se elije el diario que se quiera leer de los muchos que están al alcance de esta extensión. www.mazosoft.net - Amadeo Cano Mazo Versión 1.0 - Monday, March 15, 2010 https://chrome.google.com/extensions/detail/deehainmilmiieidbgnofbpmfdlkmjpb
Selecciona el periódico
MAZOSOFT: Formulario de pedidos

Si quieres tener un diseño profesional y dinamico o mejorar tu web no lo dudes rellena este formulario trabajamos a los precios mas economicos del mercado bienvenidos . Gracias!

Tu nombre:

Tu E-Mail:

Mensaje:

 

 

Diseño profesional de webs | Lista de precios Recursos para websmasters gratuitos | Oferta especial | CONTACTENOS | Aquí su publicidad