Click here to view the next lesson.

✨Fundamentos del Desarrollo Web✨

1 - Tu Transformación Digital

Contenido de la lección

✨Fundamentos del Desarrollo Web✨

Descripción:

En esta lección, aprenderás los fundamentos del desarrollo web y las tecnologías clave que permiten que los sitios web funcionen: HTML, CSS y JavaScript. A través de analogías simples y ejemplos prácticos, entenderás cómo se construyen los sitios web y qué papel juega cada tecnología.

Lectura: Cómo Funcionan los Sitios Web

¿Qué es un Sitio Web?

Un sitio web es como una casa virtual que está disponible para que todos la visiten. Así como una casa tiene estructura, decoración y funcionalidades, un sitio web también tiene diferentes componentes que lo hacen atractivo y útil. Los elementos clave que forman un sitio web son HTML, CSS, y JavaScript, y cada uno tiene un rol específico, igual que en la construcción de una casa.
‍

HTML: Los Cimientos de tu Casa

El HTML (HyperText Markup Language) es el esqueleto o la estructura de un sitio web, al igual que los cimientos y las paredes de una casa. Define la ubicación de cada pieza de contenido, como textos, imágenes y enlaces. Sin HTML, el sitio no tendría estructura ni contenido visible.

Imagina que estás construyendo una casa y primero instalas las paredes y los pisos. Eso es lo que hace HTML, le da forma y estructura al sitio.

Ejemplo de HTML:

<h1>Bienvenido a Mi Sitio Web</h1>

<p>Este es un párrafo de ejemplo.</p> ‍

CSS: El Decorador de Interiores

El CSS (Cascading Style Sheets) es el encargado de la apariencia de tu sitio web. Así como decoras una casa con pintura, muebles y cuadros, CSS le da estilo a tu sitio con colores, tipografías y diseños. Gracias a CSS, un sitio web se ve atractivo y profesional.

CSS es como el decorador de interiores de una casa. Decide el color de las paredes, los muebles y la distribución para que la casa sea agradable y cómoda.

Ejemplo de CSS:

h1 {

color: blue;

font-size: 24px;

}

p {

color: gray;

font-family: Arial, sans-serif;

} ‍

JavaScript: La Electricidad y el Sistema de Agua

El JavaScript es lo que hace que la casa “funcione”. Es como la electricidad o el sistema de agua en una casa, que le da vida a cosas como las luces, los electrodomésticos o los grifos. JavaScript añade interactividad a tu sitio web, como hacer que los botones funcionen o que aparezcan animaciones.

Si quieres que las luces se enciendan o que el grifo funcione cuando lo abres, necesitas JavaScript. En una página web, JavaScript se encarga de hacer cosas dinámicas como abrir un menú o enviar un formulario sin tener que recargar la página.

Ejemplo de JavaScript:

document.getElementById("miBoton").onclick = function() {

alert("¡Has hecho clic en el botón!");

};

‍

Cómo Funciona un Sitio Web Completo

Cuando juntas HTML, CSS y JavaScript, obtienes un sitio web completamente funcional. Primero construyes la estructura con HTML, luego le das estilo con CSS, y finalmente le añades funcionalidad con JavaScript. Estos tres lenguajes trabajan juntos para crear cualquier sitio que visites en internet, desde una tienda online hasta una red social.

‍

Vocabulario Clave

• HTML: El lenguaje que se utiliza para crear la estructura de un sitio web.

• CSS: Un lenguaje que se usa para aplicar estilos y diseño visual a un sitio web.

• JavaScript: Un lenguaje de programación que añade interactividad a un sitio web.

• Sitio Web: Un conjunto de páginas interconectadas que se visualizan en un navegador de internet.

• Frontend: La parte del sitio web con la que interactúan los usuarios (donde se usan HTML, CSS y JavaScript).

‍

Ejercicio: Construyendo tu Primera Página Web

Ejercicio: Estructura con HTML

Crea una página web simple usando HTML que tenga un título, un párrafo y una lista de tres elementos, cópiala y pégala en los comentarios de abajo (puedes copiar y pegar la guía siguiente solo cambia el heading los párrafos y la lista):