HTML

<h1>¡Hola, Mundo!</h1> <p>Este es un párrafo de ejemplo.</p> <button onclick="alert('Botón clicado!')">Haz clic</button>

CSS

body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color: #333; display: flex; justify-content: center; align-items: center; flex-direction: column; height: 100vh; margin: 0; } h1 { color: #E67E22; /* Naranja */ font-size: 2.5em; text-shadow: 2px 2px 4px rgba(0,0,0,0.2); } p { font-size: 1.1em; color: #555; } button { background-color: #2ECC71; /* Verde */ color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; font-size: 1em; margin-top: 15px; transition: background-color 0.3s ease; } button:hover { background-color: #27AE60; }

JavaScript

document.addEventListener('DOMContentLoaded', function() { var h1Element = document.querySelector('h1'); if (h1Element) { h1Element.innerText += ' (¡Cargado por JS!)'; } console.log('Script JavaScript ejecutado en el iframe.'); });