5/16/2018 C digo Html para insertar una imagen - slidepdf.com

http://slidepdf.com/reader/full/codigo-html-para-insertar-una-imagen 1/3

Código Html para insertar una imagen

Para insertar una imagen, se coloca el siguiente código:<img src="ruta/imagen.gif" width="XXpx" height="YYpx" alt="descripcion de la imagen">

Como ves, este es uno de los pocos casos en los que no hay etiqueta de cierre, es

decir, no se pone </img>. Recuérdalo, oki? Las imágenes nunca tienen etiqueta decierre. A lo sumo se indica el cierre en la misma línea colocando una contrabarra alfinal, así:..... alt="descripcion de la imagen" />

Vamos a ver lo que hay dentro de ese código.Para empezar se coloca la ruta, que como siempre puede ser una ruta relativa (si la

imagen pertenece a, o está guardada en tu espacio web) o absoluta (siempre que laimagen la estés obteniendo de otra web distinta a la tuya, aunque esto no esrecomendable). Las rutas van siempre encerradas entre comillas, no lo olvides.

Luego se coloca su anchura y altura expresada en pixeles con las siglas "px". Nodebes dejar nunca espacios en blanco entre la cantidad y las unidades, es decir, novale poner esto "100 px", sino que lo válido es ponerlo junto, así "100px". Estas

cantidades las coloca normalmente el Html-Kit automáticamente y si tú las cambiasseguramente la imagen se vea desvirtuada y perderá definición. Si necesitas cambiarel tamaño mejor hacerlo con un programa gráfico y luego la vuelves a pegar en lapágina, oki?

En el caso de que no pongamos ni width (anchura) ni height (altura), si el archivo dela página fallara, el resto de los elementos como párrafos etc, ocuparían el lugar deesa imagen. Sería como si no existiera. En cambio, si definimos anchura y altura, siocurre un fallo con la imagen y esta no se muestra, el navegador dejará un rectángulocon esas medidas en blanco, respetando la estructura de la web, sin mover nada. Esoes bueno, no crees?

Por último vemos un alt="........". No es obligatorio, pero para tener un códigoválido es necesario poner ese alt y además escribir entre las comillas una brevedescripción de la imagen. Este contenido aparece en el hueco de la imagen en el casode que la propia imagen no se visualizara por algún problema. Por otro lado, algunosbuscadores como Google tienen en cuenta estas palabras escritas en estasdescripciones para relacionar las búsquedas de sus usuarios con el contenido de laspáginas web, de modo que es bueno además hacer que aquellas palabras por las quequeremos ser encontrados aparezcan en esa descripción. En mi caso, si quieroaparecer en Google cuando la gente busque por las palabras "html-kit", por ejemplo,me viene bien colocar descripciones en los alt de las imágenes como "Menú del Html-Kit", o "Así se descarga el Html-Kit", pero siempre que tengan su sentido con esaimagen, claro.

Vamos a insertar una imagen en nuestro ejemploEn primer lugar necesitaremos una imagen guardada en la carpeta "objetos", que

para eso está. Copia esta misma que dejo debajo, la guardas en tu carpeta "objetos" yseguimos. Recuerda que para copiártela solo tienes que poner tu ratón sobre ella,apretar el botón derecho del ratón y escoger "Guardar imagen como...". Ponle elnombre sonrisa.gif y seguimos adelante.

5/16/2018 C digo Html para insertar una imagen - slidepdf.com

http://slidepdf.com/reader/full/codigo-html-para-insertar-una-imagen 2/3

Si ya tienes ese archivo guardado en "objetos" abre ahora el Html-Kit y la páginaindex.html para continuar. Vamos a colocar la imagen entre el párrafo donde dice

"Bienvenidos a mi página web" y el que dice "Página creada....". Como va entre losdos, nos vamos al Html-Kit a la vista "Editor" y ponemos el cursor después delprimer </p> (al final de la línea de código del primer párrafo). A continuaciónpulsamos Intro para crear una nueva línea e insertamos esto (como te he dicho, laencerramos entre nuevos <p> y</p> que también debemos escribir):<p><img src="objetos/sonrisa.gif" width="60px" height="60px" alt="Bienvenidos alejemplo de CCTW" /></p>

Imágenes

<IMG>

El uso de imágenes es uno de los factores que ha popularizado tanto World Wide Web. Incluirimágenes en una presentación web es muy sencillo, solo debe de tener en cuenta que lasimágenes tienen que tener los formatos GIF, JPEG o PNG. Las imágenes en línea, se especifican apartir de la tag <img> que no tiene una tag correspondiente de cierre pero que puede

acompañarse de los siguientes atributos:

1. src= Este atributo es obligatorio e indica el nombre del archivo de imagen (entre

comillas) o la URL que se va a representar.

2. Align= Permite controlar la alineación de una imagen con respecto a una línea de

texto adyacente o a otras imágenes en esa línea. Los tres valores posibles son los yaconocidos left, right, top, middle y bottom.

3. Alt= Es la alternativa que se estableció cuando todavía existían visualizadores de

solo texto. Entre comillas podremos escribir un texto que suplantara a esta imagen si nose carga o mientras se carga o cuando, visualizando ya la imagen, pasamos el ratón porencima.

4. WIDTH= Este atributo es opcional pero es recomendable ponerlo para ayudar al

navegador a representar la imagen, significa el ancho de la imagen que vamos arepresentar.

5/16/2018 C digo Html para insertar una imagen - slidepdf.com

http://slidepdf.com/reader/full/codigo-html-para-insertar-una-imagen 3/3

5. HEIGHT=Al igual que el atributo WIDTH, es opcional y recomendable ponerlo, este

significa el alto de la imagen.

6. BORDER= Con BORDER especificamos el ancho de un borde que rodea la imagen.

<IMG SRC="/graficos/bebe1.jpg" WIDTH=140 HEIGHT=210 BORDER=0 ALT="Un

bebé">

PARA CENTRAR IMAGEN:

hay 2 formas1- <img align=center src=imagen.gif border=0>

2- <center><img src=imagen.gif border=0></center>

PARA EFECTO DE REBOTE:

<marquee behavior="alternate" direction="up" width="80%"><marquee direction="right"behavior="alternate"><img src="URL DE TU IMAGEN"/></marquee></marquee>