martes, octubre 08, 2013

Las imágenes en HTML

HTML - Las imágenes .

Imágenes en HTML En este capítulo del Curso de HTML para Niños vamos a descubrir como insertar imágenes en nuestras páginas web .

¿Qué etiqueta usamos para añadir imágenes?
Para colocar imágenes dentro de un documento HTML se usa la etiqueta <img> . Esta etiqueta por si sola no funciona, como sucedía con la etiqueta <a> de los enlaces necesitamos añadirle unos atributos para que funcione correctamente.

Atributos de la etiqueta <img> :
1- Atributo src :
src es la abreviatura de source ( origen ), con él le indicamos al navegador la dirección donde se encuentra la imagen que queremos mostrar .
Al igual que los enlaces, las direcciones pueden ser locales ( guardadas en nuestro sitio web ) o direcciones externas (en otros sitios web ).
La forma de usar el atributo src es la siguiente:

<img src="gato.jpg">  <!-- gato es el nombre de nuestra foto -->

2- Atributo alt :
Este atributo representa un texto alternativo a la imagen. Esto significa que si por cualquier razón, la imagen no fuera cargada por el navegador, se mostraría el texto que le demos al atributo alt.
Este atributo es muy importante para las personas que usan sistemas de lectura para navegar por la Web. Ya que permite convertir a voz el texto insertado con el atributo alt .
En este ejemplo veréis como al no cargar la imagen, se mostrará un recuadro ( representando a la imagen ), y el texto incluido en el atributo alt .

<img src="gatos.jpg" alt="la imagen no existe">

La imagen no existe

3- Atributos width y height :
Representan la anchura ( width ) y la altura ( height ) de la imagen. Si no añadimos estos atributos el navegador en principio usará las medidas originales de la imagen .
La forma de usarlos es la siguiente:

<img src="gato.jpg" width="200" height="200">

gato-html para niños

Si ahora cambiamos el ancho y el alto el resultado será el siguiente:

<img src="gato.jpg" width="150" height="150">

gato-html para niños


Seguro que lo habéis entendido .En la próxima entrega Curso de HTML para Niños comenzaremos a crear nuestra primera página web completa . Para ello aprednderemos como dar estilos a nuestro código html. Si habéis tenido algún problema o duda comentarlo .
Nos vemos .

Artículo creado por Miguel Angel. Trabajo creando los contenidos de En la red. Podeis seguirme en .

4 comentarios:

  1. Hola,

    ¿Como se cambia un archivo jpeg a jpg?

    Gracias.

    ResponderEliminar
    Respuestas
    1. Hola Belén:
      los formatos jpeg y jpg son intercambiables entre si.
      Si tienes la foto en tu pc usa el botón secundario sobre el archivo y pulsa cambiar nombre.Le cambias la extensión de jpeg a jpg y listo.
      Te saltará una ventana que te avisará que el archivo puede quedar inutilizable, pero no le hagas caso.

      Eliminar
    2. Hola Miguel Angel:

      He cambiado el nombre y he puesto la extensión jpg, pero en el directorio donde pone tipo de archivo sigue con jpeg. No ha saltado ninguna ventana avisando que el archivo pudiera quedar inutilizable.
      Sale el hueco para la imagen, pero no la imagen, sale la imagen no existe, (pero existe). Donde pones gato lo he cambiado por nombres de fotos que tengo.

      Eliminar
    3. Hola Belén:
      Para que tu imagen aparezca es necesario que se encuentre en la misma carpeta en donde está tu archivo html. Si tu foto no está en la misma carpeta no aparecerá.
      Aunque la imagen se encuentre en cualquier otro formato (svg ,jpeg jpg .. etc) no tiene importancia . En el atributo src pon el nombre de tu imagen con la extensión que tenga, y la imagen aparecerá.
      Si no lo consigues envíame un correo y te lo explicaré más detalladamente. La dirección la tienes en mi perfil de Google +.
      Gracias por tu interés.

      Eliminar