Estructura de un sitio web

← Diseño Web ⌂ Home

Es momento de empezar a realizar algo de código, lo siguiente es abrir el editor de código que instalaste al inicio del curso y crear un nuevo archivo llamado index.html y sigas las instrucciones.

Por cierto, el sitio web que vamos a construir será una página para venta de playeras, pero lo puedes adaptar a lo que necesites.

Declarando el DOCTYPE

Todos los documentos de HTML deben iniciar con la etiqueta DOCTYPE. Esto le dice al navegador web que el documento que intenta interpretar es una página de HTML. La etiqueta a insertar es la siguiente:

<!DOCTYPE html>

El elemento <html>

Necesitamos encerrar todo el código en el elemento <html> para indicarle al navegador que todo el contenido que se encuentra dentro es nuestro HTML.

<!DOCTYPE html>
<html>

</html>

El elemento <head>

Dentro del elemento <html> tendremos dos elementos más: <head> y <body>. El elemento <head> almacena datos sobre la página web (el título, descripción, autor, entre otros) y links a los recursos (css, js, iconos, entre otros). Nada de lo que se encuentre dentro de head será mostrado en el sitio. El código sería el siguiente:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Playeras Geek</title>
    </head>
</html>

Como puedes observar agregamos el título del sitio y soporte para acentos con la etiqueta <meta> UTF-8.

El elemento <body>

La etiqueta <body> es donde irá todo el contenido visible y a partir de aquí definiremos las secciones que tendrá nuestra página de venta de playeras.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Playeras Geek</title>
    </head>
    <body>

    </body>
</html>

Definiendo las diferentes secciones

Nuestro sitio web se va dividir en las siguientes secciones:

Por lo tanto tenemos que plasmarlo dentro de la etiqueta <body> es el lugar donde irá todo nuestro contenido visible.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Playeras Geek</title>
    </head>
    <body>
        <header>
            <nav>
                <ol>
                    <li>Sección principal</li>
                    <li>Las más vendidas</li>
                    <li>Promociones</li>
                    <li>Más modelos</li>
                    <li>Preguntas frecuentes</li>
                    <li>Contacto</li>
                </ol>
            </nav>
        </header>
        <main>
            <section>Sección principal</section>
            <section>Las más vendidas</section>
            <section>Promociones</section>
            <section>Más modelos</section>
            <section>Preguntas frecuentes</section>
        </main>
        <footer>
            Contacto
        </footer>
    </body>
</html>

En la siguiente lección empezaremos con el contenido de cada sección.