Bienvenidos al curso de Desarrollo Web con HTML y CSS

HTML: El lenguaje de la WEB

HTML (HyperText Markup Language) es un lenguaje de marcado estándar diseñado para crear y estructurar el contenido de las páginas web. No es un lenguaje de programación, sino un sistema de etiquetas (tags) que permite definir la semántica y la organización de la información: encabezados, párrafos, imágenes, enlaces, listas, formularios y otros elementos. Su principal función es describir qué es cada parte del contenido (por ejemplo, si un texto es un título principal, un producto o una cita), permitiendo que los navegadores, lectores de pantalla y motores de búsqueda interpreten correctamente la información.

En la actualidad, HTML sigue siendo la base fundamental de internet. Aunque ha incorporado mejoras como elementos semánticos nativos, soporte nativo para multimedia y mejor integración con APIs modernas, su rol central no ha cambiado.

Su relevancia radica en que sigue siendo el pilar de la accesibilidad, el SEO y la compatibilidad web. Dominar HTML semántico es una habilidad esencial incluso en un ecosistema lleno de frameworks y bibliotecas, porque una buena estructura HTML es la base para aplicaciones rápidas, accesibles e indexables por los buscadores.

CSS: el estilo de la Web

CSS (Cascading Style Sheets) es el lenguaje utilizado para definir la presentación visual y el diseño de un documento HTML. Mientras que HTML se encarga de la estructura y el significado del contenido, CSS se ocupa de cómo se ve ese contenido: colores, tipografías, espaciados, distribuciones, animaciones y adaptabilidad a diferentes dispositivos. Su nombre "Cascading" (en cascada) hace referencia a su sistema de reglas jerárquicas y de herencia, que permite aplicar estilos de forma eficiente y escalable.

CSS es indispensable y más poderoso que nunca. Con el avance de características como Container Queries, Scroll-driven Animations, y el amplio soporte de Grid y Flexbox, permite crear diseños complejos y altamente responsivos sin necesidad de JavaScript en muchos casos. Su relevancia actual radica en que, junto con HTML semántico, forma la base sólida sobre la que se construyen sitios web accesibles, rápidos y mantenibles. Incluso en proyectos que usan frameworks modernos (React, Vue, etc.), un buen dominio de CSS es clave para lograr interfaces profesionales, optimizadas y accesibles.

Nuestro proyecto

Como propuesta de nuestro curso, cada uno de ustedes deberá desarrollar un catálogo de productos con la temática que deseen. El primer paso es estructurar la propuesta: ¿de qué se va a tratar el catálogo?, ¿qué información necesita describir en pantalla?

Planificación antes de escribir una sola línea de código

1. Definir el objetivo

• ¿Es un portafolio o página personal?, ¿es una página de ventas, qué te gustaría vender?, ¿son productos físicos o digitales?
• ¿Quién es tu usuario?

2. Investigación de referencia

• Analiza varios catálogos que te gusten (no importa si pertenecen a la misma temática).
• Toma nota de la estructura visual, navegación y elementos en pantalla.
• También toma nota de todo lo referente a imágenes, tipografía y colores.

3. Lista de páginas / secciones

• Inicio / catálogo
• Detalle de producto
• Sobre nosotros / contacto
• Carrito / favoritos

4. Diseño / Wireframe

• Es recomendable realizar bocetos preliminares antes de pasar a la fase de escribir el código.
• Existen muchas herramientas para prototipar, incluso también podemos hacerlo en papel.
• Esto también nos ayudará a definir un sistema visual de diseño: tipografías, colores, tamaños y diferentes vistas para el catálogo.

5. Contenido y redacción

• Busca imágenes para el catálogo.
• Prepara una lista de productos, con sus descripciones
• Redacta un "Quiénes somos" para poder presentar el producto.

Ejercicio 1: crear el directorio para el proyecto

En tu computadora busca el lugar donde guardas normalmente tus documentos o archivos (puede ser en "Documentos" o "Mis Documentos").

Dentro de esa carpeta, hacé clic derecho con el mouse y elegí la opción que dice "Nueva carpeta" o "Crear carpeta nueva". A esa carpeta tenemos que ponerle un nombre: el nombre "curso-desarrollo-web" (todo junto y con guiones). Abrí esa carpeta nueva. Ahí es donde vas a guardar todo lo que hagamos en el curso: las páginas web, las imágenes y los archivos. Este va a ser el "hogar" de tu primer proyecto.

Una vez creada, abrila y dejala abierta porque vamos a usar esa carpeta para los próximos pasos.

Luego, abre el directorio principal del proyecto enVS Code para poder empezar a trabajar. Si aún no tienen Visual Studio Code instalado en su computadora, pueden descargarlo en el siguiente link: Descargar VS Code.

Ejercicio 2: crear index.html

Necesitamos crear una página la cual llamaremos index.html, el cual debe estar siempre dentro de la carpeta principal de nuestro proyecto.

¿Por qué se llama index.html? Se llama así porque es una convención que todos los navegadores y servidores web del mundo entienden desde hace muchísimos años. Cuando una persona entra a tu sitio web (por ejemplo mercadolibre.com.ar), el servidor automáticamente busca un archivo llamado index.html (o similar) para mostrarlo primero. Es la "portada". Si no existiera ese archivo, el navegador no sabría qué mostrar al principio. Por eso, en casi todos los proyectos web, la página principal siempre se llama exactamente index.html. Es una regla no escrita pero que todo el mundo sigue para que todo funcione correctamente.

Para armar nuestro primer documento, utilizaremos Emmet para escribir rápido el template de HTML inicial para poder trabajar. Utilizamos el atajo ! de Emmet.