Teoría
Teoría

Otra hoja de estilos para el mismo HTML

Es hora de ver lo que hemos conseguido.

Cumpliste el encargo de Cupcake: creaste los prototipos de la página principal y de una página interna del sitio. También conociste la estructura de las páginas HTML y las etiquetas que definen sus grandes bloques. En las próximas partes llenaremos estos prototipos de contenido.

Veamos el resultado una vez más. Los bloques aparecen en el mismo orden que en el código, uno debajo de otro, en una sola columna.

Pero todavía estamos diseñando el sitio, ¿verdad? Podemos mover los bloques y probar otra distribución. CSS se encarga de la posición y del aspecto de los elementos. Esta separación resulta muy práctica: podemos experimentar con el diseño sin cambiar el marcado HTML.

Más adelante estudiaremos CSS en detalle. Por ahora, sustituye en <head> la hoja de estilos actual por otra que define una distribución diferente para la página.

En esta parte y en las siguientes tendrás un archivo descargable con el estado actual del proyecto. Puedes abrirlo en tu computadora y explorar cómo funciona. Aquí está el primer estado del proyecto.

index.html

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <meta name="keywords" content="maquetación, HTML, CSS, blog"> <meta name="description" content="Blog sobre mi aprendizaje de tecnologías web"> <title>Mi primer sitio web</title> <link rel="stylesheet" href="outlines.css"> </head> <body> <header> <h1>Mi primer sitio web</h1> </header> <main> <nav> Navegación </nav> <section> <p>¡Hola a todos! Te doy la bienvenida a mi primer sitio web. Hasta hace poco no sabía qué hacía alguien que se dedica a la maquetación web. Ahora encontré estos ejercicios de HTML y CSS y quiero dedicarme a eso. Incluso tengo un instructor, Cupcake, que no me dejará distraerme y seguirá mis avances.</p> <p>Mi primera tarea es llevar un diario y contar con sinceridad todos mis logros.</p> </section> <section> Sección de habilidades </section> </main> <footer> Pie de página del sitio </footer> </body> </html>

ObjetivosRealizado

Cambia la dirección del archivo de estilos conectado por outlines-alternate.css.