Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de HTML

HTML: lenguaje básico para crear páginas web

Y ahora tambien aprende a programar en C++ con Aprende Web C++

Manuales para la creación y diseño de páginas web

Básicos					Avanzados					Practicas
Inicio	HTML	CSS	Complementos	Gestores de Contenido	Javascript	PHP básico	Nuevas Tendencias	Programación	Librerías	Mi primera web	Prácticas Web

RSS. Suscribir canal.

5. Imágenes (I)

5.1 Insertar imágenes

Cómo insertar una imágen

Para incluir una imágen en una página HTML debemos guardarla previamente en la carpeta raíz de nuestra Web (o en alguna de sus carpetas secundarias), o bien tener localizada la URL o dirección de la imagen en otra página Web.

Para incluir imágenes usaremos la etiqueta <img/> que llevará obligatoriamente el atributo src="URL_de_la_imagen".

El atributo src cumple la misma función que el atributo href de los enlaces, y su valor es la ruta o URL en donde tenemos guardada la imagen. Al igual que en los enlaces la ruta puede ser de un archivo externo (guardado en otro sitio Web) o interno (del propio sitio). Esto último suele ser lo más habitual, y es conveniente guardar en una subcarpeta todas las imágenes del sitio. Esta subcarpeta se le suele llamar "imágenes" u "objetos", para recordarla mejor.

Otro atributo que, si no es obligatorio, es muy recomendable es el atributo alt="texto". Como valor se suele escribir un texto corto que es el que aparecerá en el caso de que el navegador no pueda cargar la imagen. Este texto suelen mostrarlo algunos navegadores en un recuadro al pasar el ratón por encima de la imagen.

La sintaxis de una etiqueta de imagen en su forma básica será la siguiente:

<img src="URL_de_la_imagen" alt="texto_explicativo"/>

Las etiquetas de imagen no tienen etiquetas de cierre, por lo que en XHTML se escriben con una barra inclinada al final.

La ruta o URL se escribirá de la misma forma que para los enlaces (ver tema 3.2 Enlaces locales). Al escribir el nombre del archivo de imagen, escribiremos también su extensión.

Los tipos de imágenes más usados son los de extensión .gif .jpg .png. Estos son los formatos más habituales, y ocupan poco espacio, dando una buena calidad de imagen. Los formatos .gif y .png son más usados para dibujos, mientras que el formato .jpg se suele usar más para fotos.

Tamaño de la imagen

Como no siempre nos coincide el tamaño real de la imagen con el tamaño que queremos que tenga en nuestra página, muchas veces tenemos que modificar el tamaño de las imágenes para adaptarlas.

aunque también podemos modificar el tamaño de la imagen con CSS, esto no suele ser lo más recomendable, ya que como cada imagen es distinta tendríamos que poner una línea de código para cada imagen, con lo que alargaríamos innecesariamente el código. Lo más normal es usar los atributos height=" " (alto) y width=" " (ancho) para definir el alto y el ancho de la imagen.

Los valores de los atributos height=" " y width=" " pueden ser números, que el navegador interpreta como píxeles; o también porcentajes, que indican el tanto por ciento de espacio que ocupa la imagen dentro de su elemento contenedor, caso de que no tuviera elemento contenedor, éste sería la página (elemento body).

hay que tener cuidado al reducir o ampliar las imágenes, de guardar las proporciones del original, en otro caso la imagen saldrá distorsionada, (estirada a lo ancho o a lo alto); sin embargo podemos poner sólo uno de estos atributos, con lo cual el navegador calcula el otro para que la imagen salga en la misma proporción que la original. Veamos un ejemplo de código de imagen

<img src="imagenes/dibujo.gif" alt="dibujo 1" width="140" height="100"/>

El siguiente ejemplo muestra la misma imagen en varios tamaños:

imagenes de ejemplo

---

En La siguiente página veremos como poder integrar la imagen en la página mediante atributos HTML.

Estilo con HTML.

---

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com