Este documento explica cómo añadir imágenes a una página web. Se utiliza el elemento <img> y atributos como src, alt, width y height. También cubre temas como añadir imágenes de fondo con CSS y crear mapas de imágenes con los elementos <map> y <area>.

1. Comoañadirimágenesaunapáginaweb
KarolJehanaMantillaGómez
Junio2019
InstituciónEducativaSimónBolívar
Arauca-Arauca
Informática

2. ii
Dedicatoria
LededicoestetrabajoamiprofesordeinformáticaJhognyNieves

3. iii
Agradecimiento
Graciasporpreferirestetrabajoparainstruirsesobrecomoañadirimágenesapaginasweb.

4. iv
Contenido
Capitulo 1...........................................................................................................................1
Resumen: ...........................................................................................................................1
Como añadir imágenes a una página web..........................................................................1
Código para añadiruna imagen a un sitio web.................................................................1
Capitulo 2...........................................................................................................................2
Atributo src, la ruta de la imagen...............................................................................2
Capitulo 3...........................................................................................................................3
Alto y ancho de la imagen.....................................................................................................3
Cómo insertar imágenes con enlaces..........................................................................3
Atributo alt, la descripción de la imagen ....................................................................4
Capitulo 4...........................................................................................................................5
Código completo para añadir unaimagen a una web.................................................................5
Añadir un favicon a tu web..............................................................................................5
Mapas de imágenes.........................................................................................................7
Capitulo 5 ............................................................................................................................9
Imágenes de fondo con CSS...................................................................................................9
Webgrafía.........................................................................................................................13

5. 1
Capitulo 1
Resumen:
Como añadir imágenes a una página web
Las imágenes añaden una nota de color al blog y a cualquier página en general,
proporcionan un descanso en la lectura al usuario y muchas veces sirven de explicación
gráfica para lo que se está contando.
Por ello, contar con imágenes a la hora de postear puede suponer un beneficio para
el usuario.
Código para añadiruna imagen a un sitio web
Para añadir imágenes a una página web hay que escribir el siguiente código HTML:
<img src="archivo.jpg">
HTML

6. 2
Capitulo 2
Atributo src, la ruta de la imagen
Indica la ruta del archivo. Si el archivo de imagen se encuentra en la misma carpeta
que la página web se escribiría como en el ejemplo, pero si se encuentra en una carpeta
distinta la ruta podría ser así:
src="/carpeta/archivo.jpg"
HTML
También se puede llamar a una imagen con la dirección completa:
src="https://web.com/carpeta/archivo.jpg"
HTML

7. 3
Capitulo 3
Alto y ancho de la imagen
Para esto se utilizan las etiquetas height (alto) y width (ancho). Siempre es
recomendable establecer estos atributos. Por ejemplo:
<img src="archivo.jpg" width="300" height="150">
HTML
En este caso la imagen tendría un ancho de 300 píxeles y un alto de 150 píxeles.
Cómo insertar imágenes con enlaces
Uno de los mayores usos que se le dan a las imágenes en la web es el de vincular
archivos, utilizarlas como enlaces.
Ejemplo:
<a href="carpeta/web.html"><img src="archivo.png"></a>
HTML
Copiar
Donde href establece la ruta de la página a la que dirigirá la imagen. Otro ejemplo:
<a href="https://www.lawebera.es/">
<img src="/carpeta/archivo.png" />

8. 4
</a>
HTML
Atributo alt, la descripción de la imagen
Este atributo especifica un texto alternativo que se muestra en lugar de la imagen
cuando ésta no existe o el navegador no es capaz de cargarla. En estos casos, el texto
alternativo es la única forma que tienen los visitantes de conocer el contenido de la imagen.
El atributo alt se expresa así:
<img src="nombrearchivo.jpg" alt="texto alternativo descriptivo" />
HTML
Copiar
Este atributo es importante para SEO, ya que es la información que puede extraer el
buscador de esa imagen, así que no descuides este aspecto.

9. 5
Capitulo 4
Código completopara añadiruna imagen auna web
Con todo lo anterior, podemos definir bastante bien las propiedades básicas de la
imagen (recordemos que es muy importante el uso de imágenes en los blogs y en portales
web).
Veamos un ejemplo con lo aprendido:
<a href="paginaweb.html">
<img src="archivo.png"
width="300" height="150"
alt="texto alternativo de la imagen" />
</a>
HTML
Para definir otro tipo de detalles visuales hay que hacer uso de CSS.
No obstante, si te cuesta entender los conceptos, te aconsejo que profundices con
un buen libro.
Añadir un favicon a tu web
Los favicon son esas pequeñas imágenes personalizadas que aparecen en la barra de
direcciones del navegador, y también son esas imágenes que aparecen al lado de los
nombres de las páginas que hemos guardado en favoritos.

10. 6
Por ejemplo, el favicon de LaWebera es este:
Para tener un favicon personalizado en tu web sólo tienes que crear una imagen con
extensión .ico y subirla a la carpeta raíz de tu espacio web con este nombre: favicon.ico.
Una vez subida la imagen añade este código en las páginas de tu web y listo:
<link rel="shortcut icon" href="http://www.miweb.com/favicon.ico">
HTML
Copiar
Ahora bien. Para crear la imagen .ico no vale cualquier programa.
Por ejemplo, Photoshop que es de los más usados, no reconoce este tipo de archivos.
Pero no pasa nada, porque como siempre en Internet tenemos herramientas gratuitas que
nos solucionan el problema.
En Dynamic Drive tienen un generador de favicon (favicon generator) que
funciona a la perfección.
Le indicas la ubicación del archivo que quieres convetir en favicon (el archivo debe
ser en formato gif, jpg, png o bmp) y pulsas “crear icono”. De forma predeterminada te
genera el favicon con un tamaño de 16×16 píxeles, listo para subir a tu web, pero si
también quieres hacer un favicon más grande para el escritorio o cualquier otra cosa
permite crearlos de 32×32 o 48×48 px.

11. 7
Una buena forma de destacar tu web entre los favoritos de tus visitantes y de darle
un toque personal en el navegador.
Mapas de imágenes
Hablando en términos generales, podemos encontrar que existen dos tipos de mapas,
aquellos que se encuentran del lado servidor y los que son realizados desde el lado cliente,
estos últimos son los que vamos a realizar mediante las etiquetas “map” y “area”.
Supongamos que tenemos una imagen con un mapa mundial, y queremos señalar a
dos o más países dentro de este mapa para redireccionar a otras páginas, entonces
tendríamos que hacer algo como esto:
<img src="mapamundi.gif" alt="Mapa mundial" usemap="#mapamundi" />
<map name="mapamundi" id="mapamundi">
<area shape="rect" coords="0,0,115,90" href="america.html" alt="America" />
<area shape="poly" coords="113,39,187,21,180,72,141,77,117,86" href="europa.html"
alt="Europa" />
</map>
HTML
Copiar
En este ejemplo estamos definiendo una imagen que se relaciona a un mapa
mediante el atributo “usemap”, el cual lleva el mismo valor que el atributo “id” del
elemento “map”.

12. 8
En este caso nos estamos refiriendo a “id” y no a “name” ya que en eso radica la
diferencia entre XHTML y HTML para este caso, XHTML considera deprecado el atributo
“name” para la etiqueta “map”, por ello “id” se convierte en el atributo de uso común,
aunque en este ejemplo utilizamos ambos para evitar problemas de compatibilidad.
Cada elemento de área del mapa es definido mediante la etiqueta del mismo nombre, el cual
cuenta con atributos de forma y coordenadas.
Para la primer área utilizamos una forma rectangular por lo que el atributo “shape”
recibe el valor de “rect” y las coordenadas tienen que indicar los cuatro puntos de la figura
por lo que el atributo “coords” indica los cuatro valores separados por coma. Pr su parte la
segunda área utiliza una forma poligonal por lo que son necesarios más valores para indicar
la forma.

13. 9
Capitulo 5
Imágenes de fondo con CSS
Debido a que las imágenes son más utilizadas como elemento de presentación, que
como un auténtico contenido, es común ver que su manejo se lleve a cabo por CSS en la
mayoría de las ocasiones.
El elemento “img” solía ser llevado al extremo para realizar toda clase de funciones
relacionadas a las imágenes, en la actualidad esto se ve disminuido por el hecho de
que CSS permite manejar imágenes mediante su propiedad “background-image”,
apegándonos más a los estándares que predominan.
La propiedad background-image se pueden utilizar para especificar una imagen que
se utilizará como fondo en cualquier elemento de tipo capa, desde el cuerpo de la página
hasta un párrafo sencillo.
Al utilizarlo estaremos llenando el elemento con una imagen que ira desde la
esquina superior izquierda hasta el final, cubriendo todo el espacio y con la oportunidad de
agregar otros elementos sobre la imagen.
body { background-image: url(imagenes/webera.jpg); }
CSS

14. 10
Copiar
Podemos controlar aspectos de la imagen de fondo mediante otras propiedades CSS,
como background-attachment, background-repeat y background-position.
La propiedad background-attachment determina si la imagen de fondo se desplazará
con el contenido de una caja. Puede ser utilizado para especificar si la imagen se desplazará
con el resto de la página o si debe ser fijado a la vista, es decir el área de visualización de la
ventana del navegador, en lugar de la página.
body {
background-image: url(imagenes/webera.jpg);
background-attachment: fixed;
}
CSS
Copiar
En este ejemplo estamos estableciendo la imagen “webera.jpg” como fondo de
página, y en vez de seguir el patrón común de desplazamiento, la imagen lucirá
exactamente igual conforme nos desplacemos, lo único que se ira recorriendo es el resto del
contenido de la página.
En caso de que la imagen que estas utilizando sea muy pequeña o simplemente no
deseas que se repita, creando un efecto de mosaico, entonces la propiedad a la que debes
recurrir es “background-repeat”.

15. 11
Al establecer esta propiedad con un valor de “no-repeat” nos ahorraremos el tener
que desplegar la imagen varias veces y simplemente se mostrará en una ocasión.
body {
background-image: url(imagenes/webera.jpg);
background-repeat: no-repeat;
}
CSS
Copiar
Esta propiedad también puede tener los valores de:
▪ “repeat-x” para repetir la imagen únicamente de manera horizontal.
▪ “repeat-y” para hacer lo mismo pero de manera vertical.
El resto del área que no sea cubierto por la imagen de fondo optará por un fondo
transparente, que por lo general luce de color blanco por ser el patrón elegido para el
navegador, al menos que elijamos un color de fondo mediante la propiedad “background-
color” lo que cual combinaría los dos valores, mostrando la imagen y en el área restante el
color elegido.
Las imágenes de fondos siempre inician en la esquina superior izquierda por defecto,
en caso de que esto no cumpla con lo que requerimos, podemos cambiar esa posición
mediante la propiedad “background-position”, que es generalmente utilizada en
combinación con la propiedad de repetición.

16. 12
Los valores que recibe esta propiedad son los clásicos para definir una posición, nos
referimos a “top”, “right”, “bottom”, “left”, “center”, alguna medida o un porcentaje,
o incluso la combinación de alguno de estos valores.
body {
background-image: url(imagenes/webera.jpg);
background-repeat: no-repeat;
background-position: center;
}
CSS
Finalmente tenemos los ya famosos shorthands o también conocidos como atajos, es
decir la propiedad que nos va a ayudar a representar todas estás propiedades en una sola
línea, en este caso lleva por nombre “background” y nos ayudará a definir los valores
de background-color, background-image, background-repeat, background-
attachment y background-position.
body { background: #CCCCCC url(imagenes/webera.jpg) center fixed no-repeat; }
CSS
Aunque en los ejemplos de este artículo estuvimos utilizando el elemento “body”, ten en
mente que estas propiedades puedes ser aplicadas para cualquier elemento visible en la
página, un párrafo, una tabla, un div, etc.
(Milán, 2019)

17. 13
Webgrafía
Milán, V. (8 de febrero de 2019). lawebera.es. Obtenido de lawebera.es:
https://www.lawebera.es/como-hacer/ejemplos-html-xhml/anadir-imagenes-
web.php