Cómo crear tu primer sitio web con HTML, CSS y JavaScript
Crear un sitio web puede parecer una tarea desalentadora, ¡pero en realidad es un proceso emocionante que se puede dominar fácilmente! En este artículo, te mostraremos cómo crear un sitio web sencillo utilizando tres tecnologías principales: HTML, CSS y JavaScript. Comprenderás qué archivo es responsable de qué y cómo funcionan estas tecnologías juntas. ¡Empecemos! 🚀
¿Qué es HTML?
HTML (HyperText Markup Language) es la base de cualquier sitio web. Crea la estructura de la página, indicando dónde se ubicarán el texto, las imágenes, los enlaces y otros elementos. Imagina que el HTML es como el esqueleto de un edificio que da forma a tu sitio web. Sin este «marco», el sitio simplemente no existirá.
A HTML no le importa cómo se verá la página o qué acciones realizará. Simplemente organiza el contenido y proporciona una estructura para todo lo demás. HTML utiliza varias etiquetas, como <h1>, <p>, <div>, <a>, que ayudan a crear contenido en la página.
Echemos un vistazo a los elementos más importantes que necesitarás al crear un sitio web:
<html>: Esta etiqueta indica que se trata de un documento HTML. Envuelve todo el contenido de la página.
<head>: Esta sección especifica los metadatos de la página, como el título de la página, los enlaces a estilos y scripts.
<body>: Aquí se encuentra el contenido principal de tu sitio web, que se mostrará a los usuarios.
<h1>, <h2>, <h3> y así sucesivamente: Etiquetas de encabezado que se utilizan para organizar el texto.
<p>: Esta etiqueta se utiliza para crear párrafos de texto.
<a>: Un enlace que permite al usuario ir a otra página o recurso.
Ejemplo de código HTML simple:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Мой первый сайт</title>
</head>
<body>
<header>
<h1>Добро пожаловать на мой сайт!</h1>
</header>
<main>
<p>Это мой первый веб-сайт, и я использую HTML, CSS и JavaScript!</p>
</main>
<footer>
<p>© 2025 Все права защищены</p>
</footer>
</body>
</html>Este código crea una página simple con un encabezado, texto y pie de página. Esta es la estructura básica que crea el contenido de la página. Al estructurar tu sitio de esta manera, creas una base sobre la que puedes construir todo lo demás.
¿Qué es CSS?
CSS (Cascading Style Sheets) es lo que convierte tu sitio web de un simple conjunto de texto en una página hermosa y fácil de usar. Si HTML es el marco de un edificio, entonces CSS es el acabado, los colores, las fuentes y los estilos que hacen que tu sitio web sea atractivo.
CSS te permite estilizar los elementos que has definido en HTML. Por ejemplo, puedes cambiar el color de fondo de la página, establecer la fuente del texto o añadir sangría entre los elementos. CSS también ayuda a que tu sitio web sea adaptable para que se vea bien en cualquier dispositivo, ya sea un ordenador, una tableta o un teléfono inteligente.
Principales formas de usar CSS:
Inline CSS: Se aplica directamente al elemento HTML, utilizando el atributo
style.Internal CSS: Los estilos se colocan dentro de la etiqueta <style> en la sección <head> de tu archivo HTML.
External CSS: Los estilos se almacenan en un archivo separado que se conecta al documento HTML a través de la etiqueta <link>.
Ejemplo de CSS para el estilo del sitio:
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
header {
background-color: #333;
color: white;
padding: 20px;
text-align: center;
}
main {
padding: 20px;
}
footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px;
position: fixed;
width: 100%;
bottom: 0;
}Este código CSS cambia la apariencia de la página: establece la fuente para todo el sitio, establece los colores para el fondo y el texto, y también hace que el pie de página sea fijo en la parte inferior de la página.
¿Qué es JavaScript?
JavaScript es un lenguaje de programación que añade interactividad a tu sitio web. Con JavaScript, puedes procesar las acciones del usuario, crear animaciones, trabajar con datos y mucho más.
Si HTML define la estructura y CSS define el estilo, JavaScript añade «vida» a tu sitio web. Por ejemplo, con JavaScript, puedes hacer que un botón cambie de color cuando se pasa el ratón por encima o que se abra una nueva ventana cuando se hace clic en él.
JavaScript permite que el sitio responda a las acciones del usuario: clics, entrada de texto, desplazamiento de páginas y otros eventos.
Ejemplo de JavaScript para interactividad:
document.getElementById("myButton").onclick = function() {
document.getElementById("message").innerText = "You pressed the button!";
};Este código permite cambiar el texto de la página cuando el usuario hace clic en el botón. JavaScript procesa este evento y realiza la acción deseada, y también le permite cambiar dinámicamente el contenido de la página.
¿Cómo funciona todo esto?
Ahora que hemos analizado cada componente, veamos cómo funcionan juntos HTML, CSS y JavaScript. Para ello, crearemos tres archivos:
index.html es un archivo que contiene la estructura del sitio.
styles.css es un archivo que define la apariencia del sitio.
script.js es un archivo que añade interactividad y acciones al sitio.
Ejemplo de estructura de proyecto:
Imagina que tenemos los siguientes archivos:
index.html — el archivo principal que cargará nuestro sitio web.
styles.css — archivo que define el estilo de la página.
script.js — archivo para añadir interactividad.
1. index.html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Мой первый сайт</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Добро пожаловать на мой сайт!</h1>
</header>
<main>
<p>Это мой первый веб-сайт!</p>
<button id="myButton">Нажми меня!</button>
<p id="message"></p>
</main>
<footer>
<p>© 2025 Все права защищены</p>
</footer>
<script src="script.js"></script>
</body>
</html>2. styles.css
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
header {
background-color: #333;
color: white;
padding: 20px;
text-align: center;
}
main {
padding: 20px;
}
footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px;
position: fixed;
width: 100%;
bottom: 0;
}3. script.js
document.getElementById("myButton").onclick = function() {
document.getElementById("message").innerText = "You pressed the button!";
};Conclusión
¡Enhorabuena! Acabas de crear tu primer sitio web. Ahora ya sabes cómo HTML, CSS y JavaScript trabajan juntos para crear una página web completa. Esto es solo el comienzo: ¡con estos conocimientos podrás crear proyectos más complejos e interactivos! 🚀
No olvides que la práctica es la clave del éxito. Cuanto más experimentes y crees, más experimentado te convertirás como desarrollador. ¡Buena suerte en tu viaje de desarrollo web! 😊