Ejercicios Prácticos - Semana 04

Ejemplo A: HTML Básico
Estructura simple de una página con título y párrafo.
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Página Básica</title>
</head>
<body>
  <h1>Hola Mundo</h1>
  <p>Este es un párrafo simple.</p>
</body>
</html>
Ejemplo B: HTML Avanzado
Uso de formularios con distintos tipos de input y etiquetas semánticas.
<form action="#" method="post">
  <label for="nombre">Nombre:</label>
  <input type="text" id="nombre" name="nombre" required>
  
  <fieldset>
    <legend>Género</legend>
    <input type="radio" id="masculino" name="genero" value="masculino">
    <label for="masculino">Masculino</label>
    <input type="radio" id="femenino" name="genero" value="femenino">
    <label for="femenino">Femenino</label>
  </fieldset>
  
  <label for="comentarios">Comentarios:</label>
  <textarea id="comentarios" name="comentarios"></textarea>
  
  <button type="submit">Enviar</button>
</form>
Ejemplo C: CSS Básico
Estilizando párrafos y títulos con colores y tipografía básica.
h1 {
  color: #FF9A8B;
  font-family: 'Segoe UI', sans-serif;
  text-align: center;
}

p {
  color: #333333;
  font-size: 16px;
  line-height: 1.5;
}
Ejemplo D: CSS Avanzado
Animación sencilla con keyframes y pseudo-clases para interacción.
.boton {
  background-color: #FF9A8B;
  padding: 12px 24px;
  border-radius: 20px;
  color: white;
  transition: background-color 0.3s ease;
}

.boton:hover {
  background-color: #e47875;
  animation: pulse 1s infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}
← Volver