- Resuelve problemas de compatibilidad entre navegadores
- Incorpora numerosas características innovadoras
- Enfoque centrado en el usuario
- Beneficios de simplificación en el desarrollo
Consideraciones al escribir código
- Utiliza la tecla Tab para las indentaciones, no espacios
- Todas las etiquetas deben estar contenidas entre <> y aparecer en pares. Por ejemplo: ```
......
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Reloj del sistema en tiempo real</title>
<style>
/* Estilos generales de la página */
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #e8eaf6;
}
/* Contenedor del reloj */
.reloj-contenedor {
background-color: #ffffff;
padding: 35px 55px;
border-radius: 10px;
box-shadow: 0 3px 15px rgba(0, 0, 0, 0.08);
text-align: center;
}
/* Texto del tiempo */
#tiempo-actual {
font-size: 2.8rem;
color: #3f51b5;
font-weight: bold;
letter-spacing: 1.5px;
}
/* Adaptación para dispositivos móviles */
@media (max-width: 600px) {
#tiempo-actual {
font-size: 1.8rem;
}
.reloj-contenedor {
padding: 18px 28px;
}
}
</style>
</head>
<body>
<div class="reloj-contenedor">
<div id="tiempo-actual"></div>
</div>
<script>
// Obtener elemento DOM para mostrar tiempo
const elementoTiempo = document.getElementById('tiempo-actual');
// Función de formato numérico: añade cero si es necesario
function formatoNumerico(numero) {
return numero.toString().padStart(2, '0');
}
// Función principal de actualización de tiempo
function actualizarTiempo() {
// Obtener fecha y hora actual
const ahora = new Date();
// Extraer componentes de fecha y hora
const anio = ahora.getFullYear();
const mes = formatoNumerico(ahora.getMonth() + 1);
const dia = formatoNumerico(ahora.getDate());
const hora = formatoNumerico(ahora.getHours());
const minuto = formatoNumerico(ahora.getMinutes());
const segundo = formatoNumerico(ahora.getSeconds());
// Construir cadena de tiempo formateada
const cadenaTiempo = `${anio}/${mes}/${dia} ${hora}:${minuto}:${segundo}`;
// Mostrar tiempo en el elemento DOM
elementoTiempo.textContent = cadenaTiempo;
}
// Ejecución inicial: mostrar tiempo inmediatamente
actualizarTiempo();
// Configurar intervalo de actualización cada segundo
setInterval(actualizarTiempo, 1000);
</script>
</body>
</html>
Estructura del código
HTML se compone de:
- head
- body
Dentro de estos elementos:
- meta, title, style
- div, script
<html>
<head>
<meta charset="utf-8" />
<!-- Título de la página, aparece en la pestaña del navegador -->
<title>Mi primera página web</title>
</head>
<body>
<!-- Encabezados, del 1 al 6, siendo el 1 el más grande y el 6 el más pequeño -->
<h1>Plataforma educativa en línea</h1>
<!-- Párrafo de texto -->
<p>Fecha de actualización: 2025/10/15 14:30 Fuente: Carlos Rodríguez</p>
<!-- Etiqueta autocontenida, inserta una línea horizontal -->
<hr />
<p>Nuestra plataforma educativa ofrece cursos online, clases en vivo interactivas y tutorías en tiempo real, especializándonos en formación de desarrollo web, diseño gráfico y UI/UX.</p>
</body>
</html>