Fundamentos del Desarrollo Web: HTML, CSS y JavaScript
Una visión completa de las tecnologías fundamentales utilizadas en el desarrollo web, con ejemplos prácticos y ejercicios.
Introducción al HTML
HTML (HyperText Markup Language) es el lenguaje estándar para crear páginas web. Define la estructura y el contenido de una página web utilizando varios elementos y etiquetas.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Mi primera página web</title>
</head>
<body>
<h1>Bienvenido a mi sitio web</h1>
<p>Este es un párrafo de ejemplo.</p>
</body>
</html>Estilizando con CSS
CSS (Cascading Style Sheets) se utiliza para dar estilo y diseño a las páginas web. Permite controlar el aspecto y la disposición de los elementos HTML.
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h1 {
color: #1E3A8A;
text-align: center;
}
p {
font-size: 16px;
line-height: 1.5;
}Interactividad con JavaScript
JavaScript es un lenguaje de programación que permite crear contenido dinámico e interactivo en las páginas web. Es esencial para la programación del lado del cliente.
function saludar() {
let nombre = prompt("Por favor, ingresa tu nombre:");
alert("¡Hola, " + nombre + "! Bienvenido a nuestra formación en programación.");
}
document.addEventListener('DOMContentLoaded', function() {
let boton = document.createElement('button');
boton.textContent = 'Haz clic para saludar';
boton.onclick = saludar;
document.body.appendChild(boton);
});Ejercicio Práctico
Para poner en práctica lo aprendido, crea una página simple que incluya un encabezado, un párrafo y un botón. Utiliza HTML para la estructura, CSS para el estilo y JavaScript para hacer que el botón muestre un mensaje al hacer clic.
Conclusión
Dominar HTML, CSS y JavaScript es fundamental para convertirse en un desarrollador web competente. Estos lenguajes forman la base de la web moderna y son esenciales en nuestros cursos de informática. Con práctica y dedicación, pronto estarás creando sitios web interactivos y atractivos.