Definiciones básicas

Objetivos

En este proceso de aprendizaje lograremos comprender:

  • ❖ Cómo piensa el navegador (Chrome, Edge, Safari, Firefox,etc).
  • ❖ Cómo estructurar código escalable (que el código pueda ir creciendo).
  • ❖ Cómo escribir CSS mantenible (que sea fácil de cambiar posteriormente si es necesario).
  • ❖ Cómo diseñar layouts modernos y responsivos ( sitios que funcionen en celulares, tablets o computadoras.)

● Definición HTML

HTML son las siglas de HyperText Markup Language (Lenguaje de Marcado de Hipertexto) y es el lenguaje estándar que se utiliza para estructurar y presentar el contenido de una página web. Es como el esqueleto de un sitio web, ya que define cómo se organizan textos, imágenes, enlaces, tablas y otros elementos para que los navegadores web puedan interpretarlos y mostrarlos correctamente.

● Definición CSS

CSS significa Cascading Style Sheets (Hojas de Estilo en Cascada) y es un lenguaje de estilo utilizado para diseñar la presentación de documentos escritos en un lenguaje de marcado como HTML. Permite controlar la parte visual del sitio web como colores, fuentes (tipo de letra), márgenes y la disposición de los elementos en la página web, separando el contenido de su diseño visual (lo que se ve).

● Definición Javascript

JavaScript (JS) es un lenguaje de programación que se usa principalmente para crear páginas web interactivas y dinámicas. Funciona junto con HTML y CSS para añadir interactividad a sitios web, permitiendo elementos como menús desplegables, animaciones, validación de formularios y actualizaciones de contenido sin recargar la página.

No debe confundirse con Java, ya que son lenguajes diferentes. Nosotros estaremos enfocados en Javascript y sus frameworks. Frameworks se puede traducir como Marcos de trabajo. Por ejemplo AstroJS, NextJS que definen las formas de codificar para que sea más fácil trabajar en grupo.

● Relación HTML - CSS - Javascript

HTML, CSS y JavaScript se relacionan al trabajar juntos en la creación de páginas web, donde HTML proporciona la estructura y el contenido, CSS se encarga del estilo y la presentación visual, y JavaScript agrega interactividad y comportamiento dinámico.
El HTML establece los elementos de la página (como encabezados y párrafos), el CSS moldea cómo se ven estos elementos (colores, fuentes), y JavaScript hace que la página responda a las acciones del usuario (como mostrar u ocultar información).

● Arquitectura de un sitio web

Estructura Base Moderna HTML 📌

Así se ve un archivo html. Hoy le decimos HTML5. Llamémoslo index.html. Copiémoslo y peguémoslo en el block de notas. Al grabarlo, recordar hacerlo con la extensión .html y no .txt. (cambiamos abajo por asterisco.asterisco).
Luego en el explorador, lo buscamos, recordando donde lo guardamos hacemos doble click y lo vemos en acción en el navegador web.
No tiene nada de CSS, solo etiquetas HTML, por lo que se va a ver básico. En la próximas unidades le agregaremos CSS y cambia completamente.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="description" content="Portfolio de desarrollo frontend">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Portfolio</title>
</head>
<body>
  <header>
    <h1>Caterina Web</h1>
    <nav aria-label="Navegación principal">
      <ul>
        <li><a href="#proyectos">Proyectos</a></li>
        <li><a href="#contacto">Contacto</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <section id="proyectos">
      <h2>Proyectos</h2>
      <article>
        <h3>Pagina de presentación</h3>
        <p>Proyecto responsivo</p>
      </article>
    </section>
  </main>

  <footer>
    <p>© 2026</p>
  </footer>
</body>
</html>
←Ejercicio Presentación
Ejercicio HTML puro→