0000500 imágenes y listados - Camino-S/HTML-CSS GitHub Wiki

Imágenes < img >

Nota: Los navegadores no siempre muestran la imagen a la que el elemento hace referencia. Es el caso de los navegadores no gráficos
(incluyendo aquellos usados por personas con problemas de visión), sí el usuario elige no mostrar la imagen, o sí el navegador es incapaz 
de mostrarla porque no es válida o soportada. En ese caso, el navegador la reemplazará con el texto definido en el atributo alt.

Atributos

Este elemento incluye atributos globales.

  • alt Este atributo define el texto alternativo que describe la imagen, texto que los usuarios verán si la URL de la imagen es errónea o la imagen tiene un formato no soportado o si la imagen aún no se ha descargado.
Nota: Omitir este atributo indica que la imagen es una parte clave del contenido, y no tiene equivalencia textual. Establecer este atributo
 como cadena vacía indica que la imagen no es una parte clave del contenido; los navegadores no gráficos pueden omitirlo.
  • height La altura de la imagen en píxeles CSS en HTML5 o píxeles o como porcentaje en HTML4.

  • src La URL de la imagen. Este atributo es obligatorio para el elemento . En navegadores que soportan srcset, src es tratado como imagen candidata con una densidad del píxel 1x sino una imagen estará definida en srcset o srcset contiene ancho.

  • width El ancho de la imagen en píxeles CSS en HTML5, o píxeles o porcentaje en HTML4.

Formatos de imagen soportada

El estándar de HTML no ofrece una lista de formatos de imagen soportados, de modo que cada agente de usuario soporta diferentes conjuntos de formatos. Gecko soporta:

  • JPEG
  • GIF, including animated GIFs
  • PNG
  • APNG
  • SVG
  • BMP
  • BMP ICO
  • PNG ICO Nota: Soporte para formato XBM fue eliminado en Gecko 1.9.2.

Interacción con CSS

Respecto a CSS, una es un elemento de reemplazo. No tiene base, asi que cuando las imágenes se usan en un contexto de formato en línea con vertical-align: baseline, el bajo de la imagen se posa sobre la base del contenedor.

Dependiendo de su tipo, una imagen puede tener ancho y alto intrínseco, pero no necesariamente. Por ejempo, las imagenes SVG no tienen dimensiones intrínsecas.

Ejemplo 1

<img src="mdn-logo-sm.png" alt="MDN">

Ejemplo 2: Enlace con imagen

<a href="https://developer.mozilla.org/"><img src="mdn-logo-sm.png" alt="MDN"></a>

<picture>

El elemento HTML <picture> es un contenedor usado para especificar múltiples elementos <source> y un elemento <img> contenido en él para proveer versiones de una imagen para diferentes escenarios de dispositivos. Si no hay coincidencias con los elementos <source>, el archivo especificado en los atributos src del elemento <img> es utilizado. La imagen seleccionada es entonces presentada en el espacio ocupado por el elemento <img>.

Atributos

El atributo media permite especificar una media query que el agente de usuario evaluará para seleccionar un elemento <source>. Si la media query evalua a false, el elemento <source> es omitido.

<picture>
 <source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
 <img src="mdn-logo-narrow.png" alt="MDN">
</picture>

El atributo type permite especificar un tipo MIME para los recursos dados en el atributo srcset del elemento <source>. Si el agente de usuario no soporta dicho tipo, el elemento <source> es omitido.

​<picture>
 <source srcset="mdn-logo.svg" type="image/svg+xml">
 <img src="mdn-logo.png" alt="MDN">
</picture>

Listados

<ol> Listas ordenadas

El elemento ol permite definir listas o viñetas ordenadas (“Ordered List”), bien con numeración o alfabéticamente. Sus etiquetas son: <ol> y </ol> (ambas obligatorias).

Crea una caja: en bloque.

Está definido como: Elemento de lista.

Puede contener: uno o más elementos li

El siguiente código:

<ol>
 <li>punto uno</li>
 <li>punto dos</li>
 <li>punto tres</li>
</ol>

Se visualiza así:

  1. punto uno
  2. punto dos
  3. punto tres

<ul> listas desordenadas

ul de "unordered list" -lista no ordenada . crea una lista no ordenada.

Sus etiquetas son: <ul> y </ul> (ambas obligatorias).

Está definido como: Elemento para listas.

Crea una caja: En bloque.

Puede contener: Uno o más elementos li

El siguiente código:

<ul>
 <li>Esto</li>
 <li>Lo otro</li>
 <li>Lo de más allá</li>
</ul>

Se visualiza así:

  • Esto
  • Lo otro
  • Lo de más allá

dl

El elemento HTML <dl> representa una lista descriptiva. El elemento encierra una lista de grupos de términos (especificados con el uso del elemento <dt>) y de descripciones (proveídas con elementos <dd>). Algunos usos comunes para este elemento son implementar un glosario o para desplegar metadatos (lista de pares llave-valor).

Término sencillo y descripción

<dl>
  <dt>Firefox</dt>
  <dd>
    A free, open source, cross-platform,
    graphical web browser developed by the
    Mozilla Corporation and hundreds of
    volunteers.
  </dd>

  <!-- Other terms and descriptions -->
</dl>

Múltiples términos, descripción sencilla

<dl>
  <dt>Firefox</dt>
  <dt>Mozilla Firefox</dt>
  <dt>Fx</dt>
  <dd>
    A free, open source, cross-platform,
    graphical web browser developed by the
    Mozilla Corporation and hundreds of
    volunteers.
  </dd>

  <!-- Other terms and descriptions -->
</dl>

Término sencillo, múltiples descripciones

<dl>
  <dt>Firefox</dt>
  <dd>
    A free, open source, cross-platform,
    graphical web browser developed by the
    Mozilla Corporation and hundreds of
    volunteers.
  </dd>
  <dd>
    The Red Panda also known as the Lesser
    Panda, Wah, Bear Cat or Firefox, is a
    mostly herbivorous mammal, slightly larger
    than a domestic cat (60 cm long).
  </dd>

  <!-- Other terms and descriptions -->
</dl>

Múltiples términos y descripciones También es posible definir múltiples términos con múltiples descripciones correspondientes, combinando los ejemplos de arriba.

Metadatos Las listas descriptivas son útiles para desplegar metadatos como una lista de pares llave-valor.

<dl>
  <dt>Name</dt>
  <dd>Godzilla</dd>
  <dt>Born</dt>
  <dd>1952</dd>
  <dt>Birthplace</dt>
  <dd>Japan</dd>
  <dt>Color</dt>
  <dd>Green</dd>
</dl>
⚠️ **GitHub.com Fallback** ⚠️