Estructuración de una Página Web con HTML Básico

Curso de Responsive Design: Maquetación Mobile First

Contenido del curso

Bienvenida al curso

1
Responsive Design y Maquetación Mobile First
01:11 min

Setup inicial

Sección de Header

Sección de Intercambios

Sección de Beneficios

Sección de Planes

Estructuración de una Página Web con HTML Básico

Resumen

La arquitectura web se puede definir como la forma en que las páginas de un sitio web están estructuradas y enlazadas entre sí (de manera lógica y coherente). Una arquitectura web ideal ayuda a los usuarios y a los motores de búsqueda a encontrar fácilmente lo que están buscando en un sitio web.

¿Cuál es la estructura base en la arquitectura web?

Un header con un logo, título y un botón.
Una sección con un logotipo, texto y una tabla.
Una segunda sección con títulos, tarjetas, texto y unos íconos.
Una tercera sección con una imagen de fondo y un título.
Una última sección con tarjetas, título, texto y un carrusel de precios.
Un footer una imagen y texto.

De esta manera, podríamos definir la estructura base del body de nuestro index.html así:

<body>
    <header></header>
    <main>
        <section></section>
        <section></section>
        <section></section>
        <section></section>
    </main>
    <footer></footer>
</body>

Tips para estructurar tu arquitectura web

Recuerda:

Debes tener tu archivo index.html y .css dentro en carpetas organizadas.
index es el nombre de archivo que primero lee el navegador.
Para abreviar la escritura de código HTML puedes usar Emmet. En este caso para escribir la estructura base usamos: header^main>section*4^footer

Contribución creada por: José Miguel Veintimilla (Platzi Contributor) con aportes de Juan Jiménez.