Modul 9 von 12 · Text
Imágenes en HTML
INSERTAR UNA IMAGEN
Para insertar una imagen en HTML se hará mediante la etiqueta <img /> (image). Esta etiqueta no posee su cierre correspondiente. Obligatoriamente deberemos especificar el atributo src (source), cuyo valor será la ubicación del archivo de imagen:
<img src="ruta-de-la-imagen" />
La imagen podrá estar ubicada en nuestro servidor o alojada en uno externo. Para indicar la ruta lo haremos de la misma forma que se definió en los enlaces.TAMAÑO:
HTML insertará por defecto la imagen en su tamaño original. Sin embargo, podrá especificarse mediante los atributos width y height una anchura y una altura.
Podremos cambiar el tamaño de la imagen sin distorsionarla especificando únicamente un atributo (width o height).
En caso que quiera distorsionarse deberá definirse una altura o una anchura.
Los valores para estos atributos pueden especificarse en pixeles o en porcentaje. Cuando el tamaño se expresa en porcentaje, el resultado variará dependiendo del navegador:
Ejemplo 1: <img src="ruta-de-la-imagen" width="200px" />
Ejemplo 2: <img src="ruta-de-la-imagen" width="50%" />
Ejemplo 3: <img src="ruta-de-la-imagen" width="200px" height="50px" />
BORDES Y ALINEACIÓN:
BORDES
A las imágenes también se les puede agregar un borde mediante el atributo "BORDER" y especificando el grosor en píxeles.
Por defecto el valor para este atributo es 0, por lo que si no se dice lo contrario no se mostrará ningún tipo de borde.
Ejemplo 1: <img src="ruta-de-la-imagen" border="3px" />ALINEACIÓN DE IMÁGENES
Para alinear las imágenes se empleará el atributo ALIGN (como en el caso de los párrafos).
<img src="ruta-de-la-imagen" align="center" />