Imagenes

 

Imágenes

 

Podremos dar un aspecto mucho más vistoso a nuestros documentos HTML con la inclusión de imágenes. Los formatos de imagen que la mayoría de navegadores reconocen son: jpg, png, gif y svg.

 

El formato gif es más recomendado para la inclusión de iconos o gráficas, comprime mejor las imágenes con plenos de color originados en dibujos vectoriales. Este formato reduce la paleta a 256 colores como máximo. Y el formato jpg es el indicado para guardar imágenes fotográficas o con degradados. Este formato admite millones de colores (24 bits) en nuestras páginas.

 

HTML incluye los siguientes elementos para introducir imágenes en nuestros documentos.

<IMG>. Este elemento inserta una imagen en el documento. El elemento requiere del atributo src para especificar la URL del archivo con la imagen que queremos incorporar.

<PICTURE>Este elemento inserta una imagen en el documento. Trabaja junto con el elemento <sourse>para ofrecer múltiples imágenes en diferentes resoluciones.

<FIGURE>Este elemento representa contenido asociado con el contenido principal, pero que se puede eliminar sin que se vea afectado, como fotos, vídeos, etc.

 

<IMG>. La imagen se insertará justo en el punto del documento donde coloquemos dicha etiqueta, pudiendo insertar imágenes dentro de listas, tablas o formularios.

El formato de la etiqueta, con sus posibles argumentos, es el siguiente:

 

<IMG src="URL de la imagen" alt="Texto alternativo"

align="top/middle/botton/left/rigth" border="Tamaño"

height="Tamaño" width="Tamaño" hspace="margen" vspace="margen">

 

Donde:

 

 src="URL de la imagen". El atributo src nos va servir para indicar la URL de la imagen que queremos insertar, es decir, el servidor y camino hasta llegar al archivo de la imagen.

alt="Texto alternativo". Nos va a permitir mostrar un texto alternativo para el caso en que el navegador no sea capaz de mostrar la imagen.

height="Tamaño". Permite especificar el alto de la imagen, en puntos de pantalla (pixels) o en % del tamaño del documento

width="Tamaño". Con este argumento especificaremos el ancho al que mostraremos la imagen: en puntos de pantalla (pixels) o en % del tamaño del documento

 

Ejemplos

el código carga la imagen y la muestra el archivo arbol.jpg lo muestra en pantalla en su tamaño original, como lo ilustra la siguiente figura.

 





En el siguiente ejemplo utilizamos Width y alt. Los atributos width y height determinan las dimensiones de la imagen, pero no tienen en cuenta la relación. Si declaramos ambos valores sin considerar la proporción original de la imagen, el navegador deberá estirar o achatar la imagen para adaptarla a las dimensiones definidas. Para reducir la imagen sin cambiar la proporción original, podemos especificar uno solo de los atributos y dejar que el navegador calcule el otro.

En el siguiente ejemplo utilizaremos el elemento <figure>. Este elemento se suele implementar junto con el elemento<figcaption> para incluir texto descriptivo.




Comentarios

Publicar un comentario

Entradas populares de este blog

CSS

Imagen
   Uso de elementos CSS en HTML ¿Qué es CSS? CSS es un lenguaje de hojas de estilos creado para controlar el aspecto o presentación de los documentos electrónicos definidos con HTML y XHTML. CSS es la mejor forma de separar los contenidos y su presentación y es imprescindible para crear páginas web complejas. Separar la definición de los contenidos y la definición de su aspecto presenta numerosas ventajas, ya que obliga a crear documentos HTML/XHTML bien definidos y con significado completo (también llamados "documentos semánticos"). Además, mejora la accesibilidad del documento, reduce la complejidad de su mantenimiento y permite visualizar el mismo documento en infinidad de dispositivos diferentes. Al crear una página web, se utiliza en primer lugar el lenguaje HTML, para marcar los contenidos, es decir, para designar la función de cada elemento dentro de la página: párrafo, titular, texto destacado, tabla, lista de elementos, etc. Una vez creados los contenidos, se utiliza...
Leer más

Repaso de etiquetas HTML

  Resumen de etiquetas HTML para poner texto en una web   Resaltar textos   <strong> Texto de mayor importancia</strong> Normalmente devuelve el texto en negrita, pero fundamentalmente se usa para dar mayor importancia a ciertas palabras o frases dentro de un texto.    <b>texto en negrita</b> La etiqueta que convierte el texto en negrita, simplemente. Para darle a un texto mayor importacia es más correcto usar <strong>.   <em> texto en cursiva </em> Crea énfasis en el texto seleccionado, normalmente mostrando el texto en cursiva. Es una manera de resaltar parte del texto. Usa esta etiqueta en lugar de <i>.   <h1> títulos y encabezados</h1> Crea títulos, para dar más o menos importancia a frases de tu texto y establecer orden dentro de la narración. Hay 6 niveles de mayor a menor importante, de H1 a H6. Estas etiquetas título son importantes para el SEO.   <big>texto más grande</b...
Leer más

Actividad 11

Imagen
 Una cafetería local quiere publicar su menú en su página web. Actualmente, el menú está organizado en una tabla HTML, pero los clientes se quejan de que: La tabla se ve desordenada El texto está mal alineado Es difícil distinguir los precios No hay separación clara entre los productos El diseño no es atractivo El dueño te contrata como desarrollador web para mejorar la presentación usando CSS . Situación inicial (tabla sin estilo) <table> <tr><th> Producto </th><th> Precio </th><th> Descripción </th></tr> <tr><td> Café </td><td> $25 </td><td> Caliente </td></tr> <tr><td> Té </td><td> $20 </td><td> Natural </td></tr> <tr><td> Pastel </td><td> $30 </td><td> Chocolate </td></tr> </table> Problema a resolver Diseña los estilos CSS en un archivo externo, necesar...
Leer más