Preparando nuestro documento HTML

En nuestra página web, vamos a empezar por crear un menu de navegación superior, pero antes de comenzar con el menu, crea un documento html de nombre index.html,añadele la estructura básica de un documento html con el título que tu quieras incluido, y guardalo en una carpeta de nombre cursoCSS.

<!DOCTYPE html>
<html>
  <head>
    <title>Tu título</title> 
  </head>
  <body> 
  </body>
</html>

Estructura básica del menu de navegación

Ahora que ya tenemos preparada la estructura, pasaremos a crear el menu de navegación, así que empieza por añadir las etiquetas <nav> justo debajo del body.

<!DOCTYPE html>
<html>
  <head>
    <title>Tu título</title> 
  </head>
  <body> 
    <nav></nav>
  </body>
</html>
Recuerda ir añadiendo el sangrado necesario según esten o no las etiquetas enbebidas unas dentro de otras, con el tiempo te darás cuenta que con una simple ojedada sabrás que elemento esta dentro de que elemento.

Una vez colocada la etiqueta, vamos a crear una lista no ordenada de 4 elemento en su inteior, cuyo texto interior será item, y un número.

<!DOCTYPE html>
<html>
  <head>
    <title>Tu título</title> 
  </head>
  <body> 
    <nav>
      <ul>
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
        <li>item 4</li>
      </ul>
    </nav>
  </body>
</html>
El motivo por el que el texto de la lista es item x, es porque es una plantilla, asi que dejo a tu elección que les des los nombres apropiados cuando veas conveniente según tu idea de que será la página web.

Crea un nuevo archivo en Sublime Text 3 y guardalo como estilos.css dentro de la carpeta estilos, recuerda escojer la extension .css al guardalo

Hasta el momento te deberia quedar así.

 cursoCSS
     estilos
     index.html

Daniel Fernández Velázquez

Me encanta aprender y practicar la programación web, Autodidacta y apasionado de la tecnología.