Una imagen puede usarse como fondo de cualquier elemento HTML, incluyendo toda la página.
background-image: url('fondo.jpg');
background-size: cover;
background-position: center;
height: 100vh;
color: white;
Se utiliza para dibujar gráficos mediante JavaScript. Es común para juegos, visualizaciones o gráficos dinámicos.
<canvas id="miCanvas" width="200" height="100"></canvas>
<script>
const canvas = document.getElementById("miCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 150, 80);
</script>Permite definir gráficos vectoriales escalables directamente en HTML.
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>Sirve para mostrar imágenes con múltiples fuentes según el dispositivo o resolución.
<picture>
<source media="(min-width: 800px)" srcset="grande.jpg">
<source media="(min-width: 400px)" srcset="mediana.jpg">
<img src="pequeña.jpg" alt="Ejemplo adaptable">
</picture><pre> conserva el formato original del texto (espacios, saltos de línea) y <code> representa código fuente.
<pre>
<code>
function saludar() {
console.log("Hola mundo");
}
</code>
</pre>Incrusta otro documento HTML dentro de la página actual, como videos de YouTube, mapas, o páginas externas.
<iframe src="https://www.example.com" width="300" height="200"></iframe>Permite insertar videos directamente en la página web. Se pueden añadir controles, autoplay, loop, y más.
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
Tu navegador no soporta la etiqueta de video.
</video>Se puede usar un video como fondo de la página web o de un contenedor, generalmente sin controles.
<div style="position: relative; height: 100vh;">
<video autoplay muted loop playsinline
style="position: absolute; width: 100%; height: 100%; object-fit: cover; z-index: -1;">
<source src="fondo.mp4" type="video/mp4">
</video>
<div style="position: relative; z-index: 1;">
<h1 style="color: white;">Bienvenido</h1>
</div>
</div>