Etiquetas HTML básicas: imágenes. img. src, alt. width, height. Deprecated: border, align. Rutas (CU00714B)

Resumen: Entrega nº14 del Tutorial básico del programador web: HTML desde cero.
Codificación aprenderaprogramar.com: CU00714B

 

 

ETIQUETAS HTML BÁSICAS: IMÁGENES

Continuamos viendo etiquetas y atributos básicos para la creación de páginas webs. No entramos a describir una a una todas las etiquetas y atributos de que HTML dispone. Simplemente explicamos las que han venido siendo más utilizadas. Tener en cuenta que algunas etiquetas o atributos están obsoletas (deprecated), aunque conviene conocerlas por la difusión que tuvieron.

 

Incluir imágenes en una página web es muy sencillo, simplemente debemos tener en cuenta que las imágenes tienen que tener los formatos GIF, JPG o PNG. Las imágenes dentro de una página web se incluyen utilizando la etiqueta <img>, que no tiene una etiqueta correspondiente de cierre. Ejemplo:

<img src="http://www.aprenderaprogramar.com/images/logo.png" alt="Logotipo APR2">

 

La etiqueta img dispone de estos atributos, algunos obligatorios, otros opcionales y algunos que ya no se recomienda usar (deprecated):

ATRIBUTO

USO

OBSERVACIONES

src

Este atributo es obligatorio e indica el nombre del archivo de imagen (entre comillas) o la URL desde la que se va a obtener la imagen.

Obligatorio. Si no se incluye no se mostrará imagen alguna.

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 valores posibles son los ya conocidos left, right, middle, top, bottom.

Atributo obsoleto (deprecated). Sustituir por CSS.

alt

Entre comillas podremos escribir un texto que se mostrará si la imagen no llega a cargar, mientras se carga o, cuando visualizando ya la imagen, pasamos el ratón por encima.

Atributo requerido, se recomienda incluirlo aunque si no se hace la imagen se mostrará.

width

Este atributo es opcional pero podemos ponerlo para especificar al navegador que muestre la imagen con un tamaño específico. Significa “ancho de la imagen” que vamos a representar. Si no se escribe, se carga la imagen con el tamaño original.

Opcional. Indicar valor en pixeles. También se puede indicar con CSS.

height

Al igual que el atributo width, es opcional. Este atributo indica el alto de la imagen.

Opcional. Indicar valor en pixeles. También se puede indicar con CSS.

border

Con border especificamos el ancho del borde que rodea la imagen. Si se indica 0 equivale a “sin borde”.

Atributo obsoleto (deprecated). Sustituir por CSS.

 

 

EJEMPLO

Escribe este código en un editor de texto como bloc de notas ó Notepad++ y guarda el archivo con extensión html. A continuación visualízalo en tu navegador. Si no consigues ver las imágenes, es porque la ruta no está disponible. En ese caso introduce una ruta o el nombre de un archivo de imagen que tengas en el mismo directorio que el archivo html.

<!DOCTYPE html>

<html>

<head>

<title>Ejemplo del uso de imágenes - aprenderaprogramar.com</title>

</head>

<body>

<img src="http://www.aprenderaprogramar.com/templates/apr02062010/images/logo.png" alt="Logotipo APR2">

<img src="http://www.aprenderaprogramar.com/templates/apr02062010/images/logo.png" alt="Logotipo APR2" width="50%">

<img src="http://www.aprenderaprogramar.com/templates/apr02062010/images/logo.png" alt="Logotipo APR2" width="200px">

<img src="http://www.aprenderaprogramar.com/templates/apr02062010/images/logo.png" alt="Logotipo APR2" width="200px" border="5">

</body>

</html>

 

 

 

 

Como podemos observar (ver imagen anterior), el atributo width se ha definido tanto en pixeles como en porcentaje (al igual pasa con el atributo height), aunque las últimas versiones de HTML no admiten el uso de porcentajes. Por ello recomendamos indicarlo en píxeles.

Ten en cuenta que al especificar la dirección de la imagen, si esta imagen está en tu propio servidor puedes utilizar una dirección relativa, es decir, estas dos expresiones son válidas:

<img src="http://www.aprenderaprogramar.com/templates/apr02062010/images/logo.png" alt="Logotipo APR2">

<img src="templates/apr02062010/images/logo.png" alt="Logotipo APR2">

 

También podrás usar como origen de la imagen otro servidor, lo que significa que el navegador irá a buscar la imagen en la ruta que le indiques. Pero en este caso, deberás especificar la ruta completa, no será válido una ruta relativa. Ejemplo:

<img src="http://images4.hiboox.com/images/4711/9ed218f1fd2a5131ace4ee5a70e6198e.jpg" alt="Queso de almendras palmero">

 

Recuerda que los atributos que hemos indicado como obsoletos (deprecated) son etiquetas cuyo uso ya no se recomienda. El hecho de incluirlos en este curso obedece a que nos parece conveniente que se conozca su significado, ya que se pueden encontrar en muchas páginas web. Incluso hay desarrolladores web que siguen usando estas etiquetas. Más adelante veremos cómo conseguir los efectos deseados de la forma recomendada hoy día: mediante el uso de estilos (hojas de estilo CSS).

La etiqueta img cuenta con otros atributos menos usados que no vamos a citar aquí.

 

 

EJERCICIO

Abre cuatro páginas web distintas y captura la ruta de 4 imágenes que puedas encontrar en ellas (las imágenes que prefieras). A continuación crea un documento html donde incorpores un texto que indique el contenido de la imagen y a continuación se vea la imagen. Guarda el documento con un nombre como ejemploCU00714B.html y comprueba que se visualiza correctamente. Ejemplo:

 

Imagen que refleja una boda:

 (… aquí la imagen)

Imagen que muestra un mercado:

(… aquí la imagen)

Imagen que muestra un atleta:

(… aquí la imagen)

Imagen que refleja un atardecer:

(… aquí la imagen)

 

Nota: la ruta de una imagen de una página web se puede capturar normalmente haciendo click con el botón derecho del mouse sobre la imagen y eligiendo la opción “Copiar la ruta de la imagen” ó “Ver información de la imagen” ó “Propiedades” ó “Copiar URL de la imagen” ó “Inspeccionar elemento”, dependiendo del navegador que estemos utilizando.

Para comprobar si tus respuestas son correctas puedes consultar en los foros aprenderaprogramar.com.

 

 

 

 

 

 

Para acceder a la información general sobre este curso y al listado completo de entregas pulsa en este link:  Ver curso completo.

Para  hacer un comentario o consulta utiliza los foros aprenderaprogramar.com, abiertos a cualquier persona independientemente de su nivel de conocimiento.

Donar o colaborar

Este sitio se mantiene abierto gracias al apoyo de muchas personas. Si crees que merece la pena apoyar económicamente este sitio web puedes realizar una donación o colaborar. Contacta con nosotros.

¿Puedo yo aprender?

Seas o no del área informática, si quieres aprender a programar te ofrecemos una solución guiada y personalizada: realizar un curso tutorizado on-line. Con este tipo de curso, podrás aprender a programar de forma ágil y amena.

Acceder a detalles y precios de los cursos tutorizados on-line

Política sobre cookies

Utilizamos cookies propias y de terceros para ofrecerte una mejor experiencia y servicio, de acuerdo a tus hábitos de navegación.

Si continúas navegando, consideramos que aceptas su uso. Puedes obtener más información en nuestra Política de Cookies.

En Facebook!

Ahora puedes seguirnos en Facebook. Noticias, novedades y mucho más ¡Te esperamos!

RANKING APR2+

Ranking de lenguajes y entornos de programación aprenderaprogramar.com
 

JULIO - AGOSTO 2017

1. Java / J2EE
2. Entornos Oracle
3. Entornos SQL Server
4. JavaScript, jQuery
5. .NET, C#
6. HTML, CSS
7. Android, iOS
8. Php, MySql


Acceder a detalles sobre el ranking de programación aprenderaprogramar.com

FOROS APR2+

Pregunta, responde, consulta, lee, intercambia...

Participa!!! Entra en los foros aprenderaprogramar.com.

             Copyright 2006-2017 aprenderaprogramar.com                La web abierta a cualquier persona interesada en la programación