FORMULARIOS

DOCUMENTO DE APOYO

placeholder representa el texto provisional en un elemento <input> o un elemento <textarea>.

EJERCICIO 1

EJERCICIO 3

FORM Y CSS

INFOGRAFIA

Elemento HTML Dialog

Infografia

<h2>Modal HTML</h2>

<p>¿Es posible crear una ventana modal solo con HTML, sin necesidad de usar Javascript? ¡Por supuesto! Y aquí tenemos un ejemplo.</p>

<button onclick="window.modal1.showModal();">Abrir ventana modal</button>

<h3>¡Esto es una ventana modal!</h3>

<p>Y no le falta detalle. Su contenido, su botón parar cerrar, su fondo con color personalizado... ¡Tiene de todo!</p>

<p>Hablando del botón para cerrar, vamos a hacer clic en él para ver si todo funciona como debería.</p>

<button onclick="window.modal1.close();">Cerrar</button>

ABRIR MÁS PAGINAS

Despues de agregar una pagina .html nueva debes agregar un boton que me direccione a la siguiente pagina

<a href="acerca.html"><button>Acerca de</button></a>

<!DOCTYPE html>

<head>

<title>Delicias Caseras</title>

<style>

body {

font-family: Arial, sans-serif;

margin: 0;

padding: 0;

}

header {

background-color: #e74c3c;

color: white;

padding: 20px;

text-align: center;

}

nav {

background-color: #c0392b;

display: flex;

justify-content: center;

padding: 10px;

}

nav a {

color: white;

text-decoration: none;

margin: 0 15px;

}

.hero {

background-image: url('comida.jpg'); /* Cambia esta imagen */

background-size: cover;

background-position: center;

height: 300px;

text-align: center;

color: white;

display: flex;

align-items: center;

justify-content: center;

font-size: 2em;

}

main {

padding: 20px;

}

.plato {

border-bottom: 1px solid #ddd;

margin-bottom: 15px;

padding-bottom: 15px;

}

footer {

background-color: #222;

color: white;

text-align: center;

padding: 15px;

margin-top: 20px;

}

</style>

</head>

<body>

<h1>Delicias Caseras</h1>

<p>Sabores que te hacen sentir en casa</p>

</header>

<nav>

<a href="#">Inicio</a>

<a href="#">Nosotros</a>

<a href="#">Contacto</a>

</nav>

¡Descubre nuestros platos favoritos!

</div>

<main>

<h2>Empanadas Criollas</h2>

<p>Hechas a mano con rellenos jugosos y masa crocante.</p>

</section>

<h2>Milanesa con Papas</h2>

<p>Clásica milanesa casera acompañada con papas doradas.</p>

</section>

<h2>Pastas del Domingo</h2>

<p>Fettuccine artesanal con salsa bolognesa o pesto a elección.</p>

</section>

</main>

</footer>

</body>

</html>

¿Qué es widget ?

Explicación breve:

Un widget es un elemento interactivo que cumple una función en una página web.
Ejemplos: cuadro de búsqueda, botón de “Me gusta”, reproductor de video, formulario de contacto, mapa interactivo, etc.

¿Qué es <iframe>?

La etiqueta <iframe> (abreviatura de inline frame) se usa para insertar otra página web dentro de la actual, como si estuvieras "abriendo una ventana" dentro de tu sitio que muestra contenido de otro lugar.

Sintaxis básica

html

EJEMPLOS DE WIDGET

📘 ¿Qué es <script>?

El <script> es una etiqueta de HTML que se usa para agregar instrucciones o comportamientos a una página web usando JavaScript.

🧠 JavaScript es el cerebro: le dice a la página cómo actuar, moverse o responder cuando alguien hace algo.

📲 ¿Para qué sirve JavaScript?

Con JavaScript puedes hacer que una página web:

Cambie de color cuando pasas el mouse 🖱️
Muestre una alerta o mensaje 💬
Calcule el total en un carrito 🛒
Valide un formulario antes de enviarlo ✅
Cree juegos simples 🎮
Se comunique con otros servicios en línea 🌐

🧠 Explicación con comparación:

Imagina que una página web es como una maqueta de una casa:

El HTML es como las paredes, ventanas y puertas (estructura).
El CSS es la pintura y decoración (colores, tamaños, estilos).
El JavaScript, que se pone dentro del <script>, es lo que le da vida: hace que las luces se enciendan, las puertas se abran solas, o suene un timbre cuando haces clic en algo.

🔧 ¿Para qué se usa <script>?

Para responder cuando el usuario hace clic.
Para cambiar cosas en la página sin tener que recargarla.
Para hacer cálculos, mostrar mensajes, agregar productos al carrito, etc.

🧪 Ejemplo básico

html

CopiarEditar

function saludar() {

alert("¡Hola, bienvenido a la tienda!");

}

</script>

¿Qué pasa aquí?

Hay un botón en HTML.
Cuando haces clic, se ejecuta una función que está dentro del <script>.
El navegador muestra una ventana con un mensaje.

📌 ¿Dónde se pone el <script>?

Se puede poner:

En el mismo archivo HTML, al final del <body>.
En un archivo separado .js (como carrito.js) y se llama así:

<!DOCTYPE html>

<head>

<title>Carrito de Compras Simulado</title>

<style>

body {

font-family: Arial;

max-width: 600px;

margin: auto;

}

.producto {

border: 1px solid #ccc;

padding: 10px;

margin: 10px 0;

}

#carrito {

background: #f9f9f9;

border: 2px dashed #ccc;

padding: 10px;

margin-top: 20px;

}

.btn {

padding: 5px 10px;

cursor: pointer;

background-color: #28a745;

color: white;

border: none;

margin-top: 5px;

}

</style>

</head>

<body>

<h1>Simulación de un Carrito de Compras</h1>

<p>Haz clic en "Agregar al carrito" para ver cómo se simula una compra.</p>

<h3>Zapatos deportivos</h3>

<p>Precio: $120.000</p>

<button class="btn" onclick="agregarAlCarrito('Zapatos deportivos', 120000)">Agregar al carrito</button>

</div>

<h3>Camiseta básica</h3>

<p>Precio: $35.000</p>

<button class="btn" onclick="agregarAlCarrito('Camiseta básica', 35000)">Agregar al carrito</button>

</div>

<h3>Mochila</h3>

<p>Precio: $75.000</p>

<button class="btn" onclick="agregarAlCarrito('Mochila', 75000)">Agregar al carrito</button>

</div>

<h2>Carrito de Compras</h2>

<p><strong>Total:</strong> $<span id="total">0</span></p>

</div>

let carrito = [];

let total = 0;

function agregarAlCarrito(nombre, precio) {

carrito.push({ nombre, precio });

total += precio;

actualizarCarrito();

}

function actualizarCarrito() {

const lista = document.getElementById("listaCarrito");

const totalSpan = document.getElementById("total");

lista.innerHTML = "";

carrito.forEach((item) => {

const li = document.createElement("li");

li.textContent = `${item.nombre} - $${item.precio.toLocaleString()}`;

lista.appendChild(li);

});

totalSpan.textContent = total.toLocaleString();

}

</script>

</body>

</html>