1. Etiqueta para imágenes

Insertar una imagen en HTML es muy simple, simplemente debemos indicar que el elemento es una imagen y cuál es el archivo o donde esta ubicado para que sea mostrado en el navegador:

La etiqueta que utilizaremos para insertar una imagen es <img>. Esta etiqueta no posee su cierre correspondiente y en ella hemos de especificar obligatoriamente la ubicación de nuestro archivo gráfico mediante el atributo src.

Para definir una imagen utilizaremos la siguiente etiqueta:

Etiqueta	Descripción	Tipo
<img>	Para incluir una imágen en una página web	Linea

Para insertar una imagen que este almacenada en la misma carpeta que nuestro documento HTML, solo colocaremos su nombre y extensión en el valor del atributo src de la siguiente manera:

<!--inserta una imagen  --> 
<img src="imagen.jpg"  >

En el caso de que la imagen está ubicada en una dirección URL externa, entonces el valor de src será la URL de la imagen, asi:

<!--inserta una imagen  --> 
<img src="https://unsplash.com/photos/67L18R4tW_w"  >

2. Atributos para imágenes

Estos son los atributos que acompaña la etiqueta <img>:

Atributo	Descripción	Tipo
src	Indica el nombre o la URL de la imagen	Obligatorio
alt	Texto alternativo para mostrar en el caso que la imagen no se pueda mostrar	Obligatorio
width	Indica el ancho de la imagen	Opcional
height	Indica el alto de la imagen	Opcional

Ejemplos de los atributos obligatorios src y alt:

  <!--inserta una imagen  --> 
<img src="logoSena.png" alt="Logo Sena" >

Ejemplos de los atributos width y height :

Con estos atributos redimensionas la imagen al tamaño de ancho y alto indicado, pero la imagen realmente tiene su propio tamaño.

  <!--inserta una imagen  --> 
<img src="logoSena.png" alt="Logo Sena" width="256px" height="256px"   >

3. Formatos de imágenes soportados

En el area del diseño grafico existen múltiples formatos de imágenes, pero no todos se usan en el desarrollo web. Veamos los formatos más utilizados y cuales son más apropiados:

Formato	Descripción	Soportado ?
.jpg	Compresión con pérdidas. ideal para fotografias y texturas.	Si
.png	Soporta transparencia. Compresión sin pérdidas	Si
.svg	Formato vectorial. Ideal para imágenes escalables.	Si
.gif	Formato para imágenes pequeñas y animadas.	Si

Cualquier otro formato no mostrado en esta lista no está recomendado para utilizar en web. Formatos como BMP, TIFF, RAW, NEF, PSD, CDR son formatos muy pesados o no orientados para su uso en la web.

4. URL con rutas relativas o absolutas

A la hora de indicar una URL para imágenes, se puede hacer de varias formas:

Ejemplo de listas anidadas:

Ruta	Ejemplo	¿Dónde busca el archivo?
Sin ruta	imagen.jpg	En la misma carpeta del .html de la pagina
Relativa ascendente	img/imagen.jpg	En la carpeta img de la carpeta de tu proyecto
Relativa descendente	../imagen.jpg	En la carpeta anterior a la actual
Relativa global	/img/imagen.jpg	El primer / simboliza el principio de la URL
Absoluta	http://pagina.com/img/imagen.jpg	Exactamente en la URL indicada.

El usuario puede utilizar la forma de indicar la ruta que prefiera, eso sí, se aconseja ser coherente y utilizar siempre que se pueda un mismo formato de ruta. Particularmente la ruta relativa ascedente.

Ejemplo Practico: Un Articulo con Texto, Enlaces y Listas

Utilizaremos el ejemplo de la actividad 6 listas y le añadimremos las imagenes:

Analisis y Desarrollo de Sistemas de Información

Perfil del aprendiz

Un Analista de Sistemas es responsable del estudio de los problemas y las necesidades presentes en la organización para determinar en qué medida pueden las aplicaciones de software, los servicios tecnologicos web y bases de datos, las redes, las personas y los procedimientos actuar conjuntamente para resolver los problemas del modo más adecuado y mejorar los sistemas de la empresa y de información .

Duración:

Etapa Lectiva: 18 meses
Etapa Productiva: 6 meses
Total: 24 meses

Perfil de salida

Analista Informatico
Programador Analista
Desarrollador de Aplicaciones
Desarrollador Frontend
Desarrollador Backend
Desarrollador Fullstack

      
<!DOCTYPE html>
<html lang="es">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>adsi</title>
</head>
<body>
                           
<h1>Analisis y Desarrollo de Sistemas de Información<h1>
<!--Enlace que apunte a la section1 de esta misma pagina --> 
<a href="#section1"  >Interno</a> 
<!--Enlace local desde esta pagina hacia etiquetas_texto.html pagina local de nuestro sitio--> 
<a href="etiquetas_texto.html" target="_blank" >Local</a>
<!--Enlace externo a otros sitio, apunta a Google  --> 
<a href="https://www.google.com/" target="_blank" >Externo</a>
<!--Enlazar un correo colocamos mailto: en el atributo href del enlace, seguido el correo--> 
<a href="mailto:actividades.clasroom@google.com">Email</a>
<hr>
<h2>Perfil del aprendiz</h2>
<img  src="img/foto_adsi1.jpg" alt="Aprendices ADSI" width="298px" height="224px"  >
<img  src="img/foto_adsi2.jpg" alt="Aprendices ADSI" width="298px" height="224px"  >

<p>
   Un <b>Analista de Sistemas<b> es responsable del <strong>estudio de los problemas<strong> y las necesidades presentes en la <em>organización<em> para determinar en qué medida pueden las <i>aplicaciones de software<i>, los servicios tecnologicos web
   y bases de datos, las <small>redes<small>, las  <big>personas<big>  y los procedimientos actuar conjuntamente para resolver los problemas del modo más adecuado y <mark>mejorar los sistemas de la empresa y de información<mark> .
<p>
<h2>Duración:</h2>
<ul>  <!--Crea lista no ordenada --> 
   <li>Etapa Lectiva: 18 meses</li>  <!--Crea los elementos de la lista --> 
   <li>Etapa Productiva: 6 meses</li> 
   <li>Total: 24 meses</li>
</ul>
<h2>Perfil de salida</h2>
<ol>  <!--Crea lista ordenada --> 
   <li>Analista Informatico</li>  <!--Crea los elementos de la lista --> 
   <li>Programador Analista</li> 
   <li>Desarrollador de Aplicaciones</li>
   <li>Desarrollador Frontend</li> 
   <li>Desarrollador Backend</li>
   <li>Desarrollador Fullstack</li>
</ol>                        
</body>
</html>

Actividad #7. HTML5: ETIQUETAS PARA imágenes

Ahora que ya sabes insertar imágenes en HTML es el momento de que empieces a practicar, aunque no es nada difícil, practica para desarrollar la habilidad en el aprendizaje.

Te ha resultado util esta guia de aprendizaje ?

Que tal el contenido?

Etiquetas para imágenes