¿Qué es una Página Web?

Unidad 1: Introducción al Desarrollo Web

Introducción al Desarrollo Web con HTML y CSS

¡Bienvenido a tu primer paso en el mundo del desarrollo web! Hoy vamos a descubrir qué es una página web, cómo funciona, y cómo vamos a poder crear las nuestras usando HTML y CSS. Al final de esta sesión, tendrás una idea de cómo las páginas web muestran contenido y de la magia que HTML y CSS hacen detrás de escena.

1. Entender cómo funcionan las páginas web y cómo están compuestas

¿Qué es una página web?
Una página web es una especie de «página» digital que se muestra en internet y que puedes ver en tu computadora, tableta o teléfono. Todas las páginas que visitas, como las de redes sociales, juegos en línea o sitios de videos, son páginas web. Cada una de ellas está hecha de “elementos” o partes como texto, imágenes, videos y botones.

¿Cómo funciona una página web?
Imagina que cada página web es como un gran conjunto de instrucciones. Estas instrucciones se guardan en un lugar llamado “servidor” y, cuando decides visitar una página, tu navegador (como Chrome o Firefox) se conecta a ese servidor, descarga las instrucciones y te las muestra en la pantalla. Esas instrucciones dicen exactamente qué mostrar y cómo hacerlo.

¿Qué necesitamos para crear una página web?
Para crear una página web sencilla, vamos a aprender dos herramientas muy importantes:

• HTML (HyperText Markup Language): Es el lenguaje que nos permite dar “estructura” a una página web. HTML nos ayuda a poner cosas como títulos, párrafos, imágenes y enlaces.
• CSS (Cascading Style Sheets): Es el lenguaje que le da estilo a nuestra página. Con CSS podemos elegir colores, tipos de letras, tamaños de texto, y hacer que las cosas se vean bonitas y ordenadas.

2. Conocer el papel de HTML y CSS en la construcción de sitios web

¿Cómo trabajan juntos HTML y CSS?
Piensa en HTML como el “esqueleto” de tu página web. Este esqueleto incluye todos los elementos básicos, como si estuvieras armando una maqueta de cartón. Ahora, CSS es como la “decoración” de esa maqueta. CSS permite que cada elemento de la página tenga colores, estilos y formas que lo hagan ver especial.

Cuando trabajamos en HTML, vamos a agregar cosas como títulos (para los encabezados), párrafos (para el texto), y también imágenes o videos. CSS, por otro lado, nos ayuda a definir cómo se verán esos títulos, párrafos e imágenes: si queremos que un título sea grande y de color rojo o si queremos que el fondo de nuestra página sea azul, CSS lo hace posible.

3. Navegar por ejemplos de páginas web para identificar elementos HTML y CSS

¿Qué vamos a hacer?
Ahora vamos a navegar por algunas páginas web y ver ejemplos reales de cómo se usan HTML y CSS. Esto nos ayudará a entender mejor cómo funcionan estos elementos en la práctica. Sigue estos pasos:

1. Elige una página web: Elige una página web que conozcas y te guste. Puede ser una de noticias, una página de videojuegos o un sitio de videos.
2. Identifica los elementos HTML: Observa los diferentes elementos en la página. Fíjate en:
   • Títulos: ¿Dónde están? ¿Son grandes o pequeños?
   • Párrafos de texto: ¿Ves bloques de texto? ¿Cómo están separados o alineados?
   • Imágenes y videos: ¿Dónde están ubicados y cómo interactúan con el resto del contenido?
3. Identifica el estilo que le da CSS: Ahora observa el estilo visual:
   • Colores: ¿Qué colores predominan? ¿Hay algún color especial para títulos, fondos o botones?
   • Tamaño de texto: ¿Es el texto de los títulos más grande que el de los párrafos?
   • Botones: Observa si tienen colores, formas especiales o si cambian de color cuando pasas el mouse sobre ellos.

Ejercicio Guiado: ¡Juguemos a Identificar HTML y CSS!

Para terminar esta sesión, vamos a hacer un ejercicio divertido en el que haremos una pequeña “exploración” en la web para identificar partes de HTML y CSS.

1. Abre el sitio web que elegiste.
2. Usa el botón derecho del mouse sobre cualquier título o imagen y selecciona “Inspeccionar” o “Ver código de la página”. Esto te mostrará el código HTML y CSS que está detrás de esa página web.
3. Explora el código: No te preocupes si no entiendes todo al principio. Solo trata de identificar cosas sencillas:
   • Busca etiquetas como <h1>, <p>, o <img>, que son las que usamos en HTML.
   • Encuentra colores, tamaños o estilos dentro de CSS, que generalmente se ven como color: red; o font-size: 16px;.

¡Muy bien!
Has dado tus primeros pasos en el desarrollo web. Ahora que entiendes cómo funcionan las páginas web, cómo se componen, y el rol de HTML y CSS, estamos listos para comenzar a construir nuestras propias páginas en la próxima sesión. ¡Prepárate para crear tu primera página web básica con HTML!