Ir a contenido


Foto

Tutorial para insertar imagenes con codigos HTML


  • Please log in to reply
No replies to this topic

#1 Host

Host

    Global Support

  • Tech Admin
  • PipPipPip
  • 168 Mensajes:
  • Gender:Not Telling
  • Location:Dominican Republic

Escrito 18 febrero 2009 - 12:39

Cómo insertar una imagen en una página web

Ya hemos insertado una imagen como fondo de página pero para insertar una imagen dentro de la misma el procedimiento es algo distinto. Como puedes sospechar, como las imágenes son "visibles" van definidas dentro del Body "cuerpo de la página". En qué lugar? Eso ya depende de donde la queramos insertar.

Dónde insertar la imagen

Si creamos la línea de código Html en cualquier parte dentro del Body, ésta aparecerá allí, en cualquier parte. Al principio uno de los problemas que vas a tener es no saber en qué parte del código Html insertar la línea de código correspondiente a un elemento para conseguir que aparezca donde deseas, verdad?

Pues bien, una imagen puede insertarse o bien dentro de un párrafo, es decir, entre palabras, como este ejemplo y sin que el párrafo se corte, o bien como una línea independiente. En ambos casos es aconsejable meterla en un párrafo, a pesar de que sea la imagen lo único que haya en esa línea, es decir, siempre encerrada entre <p> y </p>.
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, Las imágenes nunca tienen etiqueta de cierre. 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 la imagen la estés obteniendo de otra web distinta a la tuya, aunque esto no es recomendable). Las rutas van siempre encerradas entre comillas, no lo olvides.

Luego se coloca su anchura y altura expresada en pixeles con las siglas "px". No debes dejar nunca espacios en blanco entre la cantidad y las unidades, es decir, no vale poner esto "100 px", sino que lo válido es ponerlo junto, así "100px". Si necesitas cambiar el tamaño mejor hacerlo con un programa gráfico.

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

Por último vemos un alt="........". No es obligatorio, pero para tener un código válido es necesario poner ese alt y además escribir entre las comillas una breve descripción de la imagen. Este contenido aparece en el hueco de la imagen en el caso de que la propia imagen no se visualizara por algún problema. Por otro lado, algunos buscadores como Google tienen en cuenta estas palabras escritas en estas descripciones para relacionar las búsquedas de sus usuarios con el contenido de las páginas web, de modo que es bueno además hacer que aquellas palabras por las que queremos ser encontrados aparezcan en esa descripción. En mi caso, si quiero aparecer en Google cuando la gente busque por las palabras "mi pagina", por ejemplo, me viene bien colocar descripciones en los alt de las imágenes, pero siempre que tengan su sentido con esa imagen, claro.

Vamos a insertar una imagen en nuestro ejemplo

En 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" y seguimos. 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 el nombre sonrisa.gif y seguimos adelante.

Si ya tienes ese archivo guardado en "objetos" y la página index.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 los dos, en el "Editor HTML" ponemos el cursor después del primer </p> (al final de la línea de código del primer párrafo). A continuación insertamos esto (como te he dicho, la encerramos entre nuevos <p> y </p> que también debemos escribir):

<p><img src="[b]objetos/sonrisa.gif[/b]" width="60px" height="60px" alt="Bienvenidos al ejemplo"></p>

Soporte técnico de Hosting por Web Host Dominicana
Servicio de correos masivos y SEO
Servicio de SEO en República Dominicana
Patrocinador oficial del Directorio Telefónico Dominicano




0 usuarios están leyendo este tema

0 miembros, 0 invitados, 0 usuarios anónimos

Tecnología y soporte por web hosting