Ya sabemos que HTML, CSS y JavaScript trabajan juntos en una página web. Ahora queremos que cada página contenga gráficas

Para eso usa el <body>…</body> y allí dentro coloca un par de elementos HTML, sea <img/> u <object></object>.

El primero siempre va por un src (source), mientras el segundo va por un data cuyo type debe especificarse:


<img src="rasterizada.jpg"/>

<object data="vectorizada.svg" type="image/svg+xml"><object>

Primero tengo una gráfica rasterizada y luego una vectorizada. La extensión de la rasterizada es jpg, pero también podría ser png, gif, webp o avif. La extensión de la vectorizada es svg.

← ↓

Podría ser necesario que tu página contenga dos versiones de una misma gráfica vectorizada:

Una versión de la gráfica, que podemos llamar portrait, se muestra antes que la pantalla sea grande, mientras que otra versión, que podemos llamar landscape, se muestra desde la pantalla grande

¡Tal intercambios de gráficas se puede resolver con HTML y CSS trabajando juntos!

Con HTML se va por ambas gráficas. Y con CSS se le indicas a una que se muestre mientras la otra se esconde, según la pantalla.

Si usamos Bootstrap 5.3, basta con agregar algunas clases que vinculan con reglas de CSS específicas y ya definidas:


<object data="img/portrait.svg" type="image/svg+xml" class="d-lg-none"></object>
<object data="img/landscape.svg" type="image/svg+xml" class="d-none d-lg-block"></object>

Y Bootstrap 5.3 es lo que usaremos para simplificarnos el trabajo, para no ahogarnos en detalles de CSS, pero aún contar con reglas que nos permitan intercambiar gráficas, entre varias cosas más.

¿Y existen intercambios de gráficas que se resuelvan con HTML, CSS y JavaScript trabajando juntos?

Si, y tal intercambio está «entre varias cosas más» que nos permite hacer Bootstrap 5.3.

Lo que ven como animación son 9 imágenes estáticas. Cada imagen está contenida en una división que es un ítem en un carrusel, y cada ítem se muestra por 500 milésimas de segundo.

↑