la vaca

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 quetuvieron.

 
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 , que no tiene una etiqueta correspondiente de cierre. Ejemplo:

 
La etiqueta img dispone de estos atributos, algunos obligatorios, otros opcionales y algunosque 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 esalí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 semostrará.
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 indicael 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. Acontinuació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.



Ejemplo del uso de imágenes - aprenderaprogramar.com








 
 

 
 
Como podemos observar (ver imagen anterior), el atributo width se ha definido tantoen 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:


 
También podrás usarcomo 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:

 
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 quenos 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í....