Imágenes
Las imágenes son una parte muy importante en una página web porque pueden darle estilo y personalidad a tu sitio, pero también el poner imágenes de gran tamaño o saturar la página con ellas ocasionara que el navegador tarde demasiado en cargarla y el usuario pierda interés y se aleje.
Para insertar una imagen en tu página se utiliza la etiqueta <img> y con varios atributos importantes puedes controlar la forma en que se muestra.
Primero vamos a poner una imagen de forma sencilla.
<img src= ruta o dirección de la imagen>
<img src= http://www.efenix.site40.net/design/eflogo.png>
Esta es la forma sencilla de insertar una imagen en tu web, ahora veamos otros atributos importantes.
Atributo ALT:
Se usa para poner una breve descripción de la imagen que se mostrara cuando pasemos el cursos por la imagen (varia del navegador), pero la mayor ventaja de este atributo es cuando al visitar la página la imagen no se carga correctamente, la descripción en este atributo es la que se muestra, es muy útil sobre todo si la imagen sirve de enlace.
Formato: alt="descripción de imagen"
<img src="html/imagenes/prueba.jpg" alt="efenix logo">
Atributo BORDER:
Controla el tamaño del borde con el que se muestra la imagen.
Formato: border = cantidad (en pixeles del borde)
<img src=http://www.efenix.site40.net/design/eflogo.png alt="efenix logo" border="0" >
<img src=http://www.efenix.site40.net/design/eflogo.png alt="efenix logo" border=10 >
Atributos HEIGHT y WIDTH:
Controlan el tamaño de la imagen que se muestra en la página pero no el tamaño real de la imagen, height es la altura y width es lo ancho.
Formato: height = 60 width= 180 (medida en pixels de la imagen)
<img src=http://www.efenix.site40.net/design/eflogo.png alt="efenix logo" height = 60 width= 180>
Atributo ALIGN:
Este atributo controla la alineación dentro de una página web, no solo de imágenes también de texto, tablas, etc.
Formato: align = tipo de alineación (para alinear a la derecha: right o a la izquierda: left)
<img src=http://www.efenix.site40.net/design/eflogo.png alt=”efenix logo” height = 60 align=left>
<img src= http://www.efenix.site40.net/design/eflogo.png alt=”efenix logo” height = 60 align=right>
Otro tipo de alineación que podemos usar es la vertical que es la alineación con el texto circundante y se hace con los siguientes valores (para alinear arriba: top, para alinear a la mitad: middle, para alinear abajo: bottom) y se puede poner después de la otra alineación.
<img src=http://www.efenix.site40.net/design/ eflogo.png alt=”efenix logo” height = 60 align=top>
Alineación respecto al texto
<img src=http://www.efenix.site40.net/design/eflogo.png alt=”efenix logo” height = 60 align=middle>
Alineación respecto al texto
<img src=http://www.efenix.site40.net/design/eflogo.png alt=”efenix logo” height = 60 align=bottom>
Alineación respecto al texto
No hay comentarios:
Publicar un comentario