¿A QUIEN VA ORIENTADO ESTE CURSO?

Este curso está orientado a usuarios que nunca hayan trabajado con HTML, que desconozcan por completo los elementos básicos, su estructura…

¿QUE APRENDERÉ EN ESTE CURSO?

  • Aprenderas la estructura de todo documento .html.
  • Aprenderas a usar las etiquetas básicas de HTML.
  • Utilizaremos etiquetas nuevas en HTML5.
  • Nos introduciremos en el conceptos básicos de CSS.

En este curso, con el objetivo de aprender a usar correctamente las etiquetas HTML y introducir-nos maquetando dichas etiquetas con CSS, vamos a desarrollar un proyecto.

Vamos a desarrollar un proyecto web que contenga nuestro própio currículum vitae creando una página diferente para cada uno de los apartados.

Para empezar, vamos a crear una carpeta con nombre “curriculum” y a crear dentro de esta el fichero index.html. Inicialmente nuestro documento “index.html” tendrá la siguiente estructura:

<!DOCTYPE HTML>
<html>
  <head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   <title><!-- Titulo del sitio web para el navegador --></title>
  </head>
  <body>
    <header>
      <!-- Titulo del sitio web -->
      <!-- Menú del sitio web -->
    </header>
    <section><!-- sección 1 --></section>
    <section><!-- sección 2 --></section>
    <footer>
      <!-- Contenido del footer -->
    </footer>
  </body>
</html>

<!DOCTYPE HTML>: Debemos ponerla al principio de la página, antes de cualquier etiqueta, incluso antes de la etiqueta <html>. Esta etiqueta sirve para declarar el tipo de documento, por ejemplo, podríamos añadirle la etiqueta “public” para indicar que es un fichero publico, para colgar en la red.

<html>: Dentro de esta etiqueta vamos a añadir siempre la etiqueta “<title>” para indicar el nombre que queremos que salga en la pestaña del navegador. La etiqueta “<meta>” nos sirve para indicar el tipo de contenido y la codificación de caracteres de la página. Dentro de la etiqueta “<html>” también vamos a llamar a otros archivos, como pueden ser hojas de estilos, scripts, librerías o otros documentos externos al propio fichero .html.

<body>: Todo el contenido que esté dentro de esta etiqueta es el que el usuario va a visualizar en su navegador.

<header>: Esta etiqueta llega con html5 y sirve para estructurar nuestro documento tanto para nosotros mismos como para los navegadores, para el SEO e otros. Esta etiqueta contendrá normalmente nuestro logotipo y menú del sitio web. Hace referencia como bien el nombre indica, a la cabecera de nuestra página.

<section>: Vamos a dividir nuestro archivo en diferentes secciones y es para ello que vamos a hacer uso de esta etiqueta.

<footer>: El footer suele ser común para todas las páginas y se sitúa en la parte inferior de nuestras webs, conteniendo los apartados principales, redes sociales, copyright entre otros.

<!DOCTYPE HTML>
<html>
  <head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   <title>Título del sitio web</title>
  </head>
  <body>
    <header>
      <h1>Currículum web</h1>
      <nav>
        <ul>
          <li><a href="index.html">Inicio</a></li>
          <li><a href="estudios.html">Estudios</a></li>
          <li><a href="trabajo.html">Formación laboral</a></li>
          <li><a href="aficiones.html">Aficiones</a></li>
        </ul>
      </nav>
    </header>
    <section>
      <article>
        <header>
          <h2>Información a destacar 1</h2>
            <p>Texto de prueba del contenido a destacar 1.</p>
             <a href="trabajo.html">Ver más</a>
        </header>
      </article>
      <article>
        <header>
          <h2>Información a destacar 2</h2>
            <p>Texto de prueba del contenido a destacar 2.</p>
             <a href="aficiones.html">Ver más</a>
        </header>
      </article>
    </section>
    <footer>
      <p>Copyright 2018 Nombre del sitio web</p>
    </footer>
  </body>
</html>

<h1>Esta etiqueta es muy importante que la usemos en nuestro sitio web, ya que de cara al SEO es importante que en todas las páginas tengamos un “h1 (header 1)” de manera que indiquemos cual es el título de nuestro página.

<nav>: Esta etiqueta nos sirve a nivel estructural, indicando que dentro de esa etiqueta tendremos el menú de navegación.

<ul>: Esta etiqueta significa “unordered list” y nos sirve para generar listas desordenadas como bien indica su nombre.

<li>: Para que la etiqueta “<ul>” realmente forme una lista, tiene que ir acompañada de los tags “<li>(list item)” donde cada “<li>” es un elemento de la lista.

De tipos de listas en HTML hay varios tipos, por lo que podéis obtener más información en este otro curso.

<article>: En caso de querer separar una sección lo haremos mediante esta etiqueta, a nivel estructural ya que esta etiqueta no influye en el resto a nivel de estilos. Tiene la misma funcionalidad que la comentada antes “<section>” pero siendo un poco más específica.

Ahora mismo nuestro “index.html” si lo abrimos en el navegador, debería tener el siguiente aspecto:

Una vez tenemos una estructura de html básica como la nuestra, es momento de empezar a aplicar CSS con el objetivo de que nos quede maquetado de la siguiente forma:

Vamos a empezar por maquetar el menú. En siguientes cursos podréis ver que a los tags de html podemos asignarles clases, un id único y muchas más etiquetas con el objetivo de diferenciar los tags con mismo nombre entre ellos, de cara a ser llamados desde CSS, JavaScript e otros.

Dentro de nuestra etiqueta “<head> </head>” vamos a abrir una etiqueta nueva con nombre “<style> </style>”. Dentro de esta etiqueta vamos a añadir los estilos que afectaran a nuestro fichero “index.html”. Esta manera es la más sencilla para añadir CSS pero no es la forma que yo recomiendo para añadir CSS a nuestro HTML, pero esto lo podéis ver en este otro articulo. 

Seguimos pues añadiendo esto dentro de nuestra etiqueta “<style>”.

body{
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

header{
  background:#e07e7e;
  color:#ffffff;
  position: relative;
  height: 80px;
  width: 100%;
}

 

Ahora mismo hemos añadido estilos sobre nuestro tag “body” y “header” indicando que a nuestro “body” le ponga un margen 0, un padding 0 y indicando la tipografía sans-serif.

El margen que aplicas a un tag se aplica de la caja hacia fuera mientras que el padding lo que hace es añadir espaciado del elemento, de manera que este ocupe un tamaño superior. En este caso nosotros hemos indicado en general padding:0 pero podríamos por ejemplo haber puesto esto que el resultado sería el mismo:

body{
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
}

De esta manera le indicamos el padding superior, inferior, de izquierda y de derecha.

En nuestra etiqueta “header” le hemos asignado un “background”, es decir, un fondo indicando el código de color #e07e7e, indicando que el “header” tiene una posición relativa para asegurarnos que siempre ocupa un espacio y no queda flotando como sería el caso de una posición “absolute”.

Le hemos asignado un “height80px;” para delimitar el alto de la caja y un “width:100%” indicando que sea cual sea la resolución, siempre ocupe todo el ancho de la página.

Una vez maquetada la caja, vamos a añadir las siguientes etiquetas

header h1 {
  float: left;
  width: 15%;
  margin-left: 5%;
}

nav{
  display: block;
  margin-right: 5%;
  width: 25%;
  margin-top: 14px;
  float:right;
}

header a,a:visited{
 color:#ffffff;
  text-decoration: none;
}

header li {
  list-style: none;
  display: inline;
  margin-left:5%;
}

Empezemos por el “header h1{}”. En CSS puedes utilizar la heréncia y es por eso que si indicasemos h1, cogería todos los elementos h1 del archivo y por ello escribimos “header h1” para que solo coja los “h1” de dentro de la etiqueta “header”

¡Compartir curso!