Down

Curso de HTML5

Historia muy rápida de HTML

Es un lenguaje de marcado inventado por Tim Berners Lee a principios de los 90'.

Es un lenguaje que cualquier navegador puede interpretar.

Tim Berners también creó el W3C que define las nuevas versiones y las estandariza.

Desde entonces hubo muchas otras estandarizaciones hasta llegar a HTML 4 en el 1998. Es la que se ha usado desde entonces y la que permitió añadir código CSS para poder dar estilo a nuestras páginas.

En octubre del 2014 salió HTML 5 que es la nueva estandarización y que trajo muchísimas novedades en HTML.

Navegadores y su panel de desarrollador

En todos los navegadores tenemos un panel de desarrolador que se suele abrir pulsando F12 y que nos permite ver muchas cosas escondidas en cada web que nos serán de mucha ayuda.

¿Cómo empezamos a escribir HTML?

HTML se puede escribir en cualquier editor de código. En mi caso yo utilizo Visual Studio Code porque ya me he acostumbrado a él. Pero podéis utilizar cualquier otro como Sublime Text, Atom, Brackets, Notepad++ o incluso el Bloc de notas (¿¿are you crazy??).

Escribir comentarios en HTML

Para escribir comentarios utilizamos:


<!-- comentario de una sola línea
esta línea no está comentada -->

Antes que nada...¡ORGANIZACIÓN!

Primer documento HTML

Etiquetas

HTML se llama lenguaje de marcado porque todo se escribe con etiquetas de apertura y de cierre. < >

Atributos

Complementan las etiquetas con información adicional.

Estructura básica HTML5

La estructura básica de un archivo HTML5 es asi:


            <!DOCTYPE html>
            <html lang="es">
            <head>
               <meta charset="UTF-8">
               <title>Título</title>
            </head>
            
            <body>
               
            </body>
            </html>

Dividimos básicamente una web en dos partes:

¡INCISO! Cajas, cajas y más cajas...📦📦📦

En HTML todo son cajas y básicamente tenemos dos tipos

Organización del texto

Para organizar todo el texto de nuestra web utilizaremos estas etiquetas:

Párrafos ➜ 
<p></p>

O lo que es lo mismo, texto base, el texto que estará por toda mi página web.

En HTML los saltos de línea ↩ no sirven de nada. Por mucho que le demos espacios no se verán en la web. Para hacer eso podemos utilizar la etiqueta huérfana 

<br>
.

¡OJO! No nos pasemos utilizando esta etiqueta para dar espacios. ¡Todo eso se hará con CSS!

Títulos ➜ 
<h_></h_>

Son todos los encabezados de nuestras secciones de texto. Se dividen en 6:.

¡OJO! No confundir con la etiqueta title que esa nos da el título de la web solo.

¡Ejercicios!

Textos 01.- Intentad crear una página web con títulos para ver cómo se ve.


<html>
<head>
   <meta charset="utf-8" />
   <title>Niveles de títulos</title>
</head>

<body>
   <h1>Título muy importante</h1>
   <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Autem, totam?</p>

   <h2>Título importante</h2>
   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam neque, error dolores at consectetur quibusdam.</p>
   <p>Lorem ipsum dolor sit amet.</p>

   <h3>Título un poco menos importante (subtítulo)</h3>
   <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ratione, reprehenderit.</p>
   <p>Ratione dicta voluptate aperiam nam iusto ipsum dolorum, ab cumque?</p>

   <h4>No es un título importante</h4>
   <p>Lorem ipsum dolor sit amet.</p>

   <h5>Título sin importancia</h5>
   <p>Lorem ipsum dolor sit amet.</p>
   <p>Quasi ex totam nam dolorem.</p>

   <h6>Título sin ninguna importancia</h6>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim dicta sint voluptates nesciunt adipisci hic molestiae maiores ipsam! Animi dolorum eligendi ipsum amet eos officia!</p>
</body>
</html>

Marcadores de textos

Para decirle al navegador que hay partes del texto más importantes que otras o que són diferentes al resto del texto utilizaremos las siguientes etiquetas. ¡ESTAS SON EN LÍNEA!

Listas ➜ 
<ul></ul>
<ol></ol>

Ordenan la información y tenemos dos tipos:

¡Truco! Podemos anidar 👨‍🏫(meter cosas dentro de otras) simplemente añadiendo otra etiqueta ul o ol DENTRO de cualquier etiqueta li.

¡Ejercicios!

Listas 01.- Cread una lista con el título "Cataluña" y que tenga 4 elementos.


<h1>Cataluña</h1>
<ol>
   <li>Barcelona
      <ul>
         <li>Sabadell
            <ul>
               <li>211.734 hab</li>
               <li>Vallès Occidental</li>
            </ul>
         </li>
         <li>Mataró
            <ul>
               <li>126.988 hab</li>
               <li>Maresme</li>
            </ul>
         </li>
      </ul>
   </li>

   <li>Gerona
      <ul>
         <li>Figueres
            <ul>
               <li>46.381 hab</li>
               <li>Alt Empordà</li>
            </ul>
         </li>
         <li>Olot
            <ul>
               <li>34.486 hab</li>
               <li>Garrotxa</li>
            </ul>
         </li>
      </ul>
   </li>
   <li>Tarragona
      <ul>
         <li>Reus
            <ul>
               <li>103.477 hab</li>
               <li>Baix Camp</li>
            </ul>
         </li>
         <li>Tortosa
            <ul>
               <li>33.510 hab</li>
               <li>Baix Ebre</li>
            </ul>
         </li>
      </ul>
   </li>

   <li>Lérida
      <ul>
         <li>Sort
            <ul>
               <li>2.164 hab</li>
               <li>Pallars Sobirà</li>
            </ul>
         </li>
         <li>Balaguer
            <ul>
               <li>16.841 hab</li>
               <li>Noguera</li>
            </ul>
         </li>
      </ul>
   </li>
</ol>

Citas

Estas etiquetas indican al navegador que el texto dentro de ellas viene de algún otro sitio o persona. "Algo que ha dicho alguien".

Links o enlaces

Los enlaces sirven para, valga la redundancia, enlazar algo con otro algo. Por ejemplo una página web con otra.

Los enlaces se crean con la etiqueta 
<a href="">contenido del enlace</a>
y como podéis ver, requiere del atributo href="" para poder decirle hacia dónde debe ir.

Atributo 
<a target="">

Un atributo que es de gran ayuda es el atributo target, que se usa para decidir si el enlace al que hacemos click se abrirá en la misma pestaña donde estamos o en una nueva.

¡Ejercicios!

Enlaces 01.- Viendo la imagen adjunta, y suponiendo que estamos en el archivo pagina1.html que está dentro de la carpeta "Madona" (No hagáis caso de lo mal que está escrito, la foto no es mía 🤣):


<!-- Primer enlace -->
<a href="../../../../Clasica/Beethoven/pagina2.html">Enlace a página 2</a>

<!-- Segundo enlace -->
<a href="../../Rock/Guns and roses/imagenPajaro01.jpg">Mira este pájaro</a>

<!-- Tercer enlace -->
<a href="../../../../../Documentos/pagina5.html">Ve a la página 5</a>

<!-- Otra opción -->
<a href="/Documentos/pagina5.html">Ve a la página 5</a>

Enlaces 02.- Crea el archivo enlaces-favoritos.html igual que está en la foto.




<!DOCTYPE html>
<html lang="es-ES">
   <head>
      <meta charset="utf-8">
      <title>Lista de enlaces favoritos</title>
   </head>
   <body>
      <h1>Enlaces favoritos</h1>
      <hr>
      <ul>
         <li><a href="buscadores.html">Buscadores</a></li>
         <li><a href="redes-sociales.html">Redes sociales</a></li>
      </ul>
   </body>
</html>

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>Enlaces a buscadores</title>
</head>
<body>
   <h1>Buscadores</h1>
   <hr>
   <ul>
      <li><a href="http://www.bing.com/" target="_blank">Bing</a></li>
      <li><a href="http://duckduckgo.com/" target="_blank">DuckDuckGo</a></li>
      <li><a href="http://www.google.com/" target="_blank">Google</a></li>
   </ul>
   <hr>
   <p>Para volver pinchar <a href="enlaces-favoritos.html">aquí</a>.</p>
</body>
</html>

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Enlaces a redes sociales</title>
   </head>
   <body>
      <h1>Redes sociales</h1>
      <hr>
      <ul>
         <li><a href="http://www.facebook.com/" target="_blank">Facebook</a></li>
         <li><a href="http://www.instagram.com/" target="_blank">Instagram</a></li>
         <li><a href="http://www.twitter.com/" target="_blank">Twitter</a></li>
      </ul>
      <hr>
      <p>Para volver pinchar <a href="enlaces-favoritos.html">aquí</a>.</p>
   </body>
</html>

Imágenes

Para añadir una imagen utilizamos la etiqueta huérfana 

<img src="ruta de la imagen" width="ancho" height="alto" alt="texto alternativo">

Como puedes ver tiene unos cuantos atributos que se pueden utilizar.

  • src=""
    ➜ Que es en la que ponemos la ruta (enlace) de la imagen.
  • width=""
    ➜ Que es en la que ponemos el ancho que queremos de la imagen. No es obligatorio y si no se pone veremos la imagen a tamaño real.
  • height=""
    ➜ Igual que width pero para darle el alto.
  • alt=""
    ➜ Es donde ponemos una pequeña descripción de la imagen. Si no se llegara a mostrar la imagen saldría este texto, además es lo que los motores de búsqueda leen. También es útil por temas de accesibilidad para personas con problemas de visión.

Etiquetas 
<figure>
y 
<figcaption>

Las etiquetas figure sirven para agregar contenido variado como imágenes, videos, etc. pero que van asociadas a una descripción o título.

Dentro de esta etiqueta añadiremos el contenido con sus respectivas etiquetas (por ejemplo img) y después utilizamos la etiqueta 
<figcaption></figcaption>
para escribir el título o descripción del contenido.

Como ejemplo veremos primero una imagen con un simple párrafo debajo y luego una imagen utilizando figure y figcaption

Esto es un pájaro espino

Esto es un pájaro espino

¡Ejercicios!

Enlaces 01.- Viendo la imagen adjunta, y suponiendo que estamos en el archivo pagina1.html que está dentro de la carpeta "Madona" (No hagáis caso de lo mal que está escrito, la foto no es mía 🤣):

  • Cread un enlace con el texto "Enlace a página 2" que lleve hasta el archivo pagina2.html que está dentro de la carpeta "Beethoven"
  • Cread un enlace con el texto "Mira este pájaro" que lleve hasta el archivo imagenPajaro01.jpg que está dentro de la carpeta "Guns and Roses"
  • Cread un enlace con el texto "Ve a la página 5" que lleve hasta el archivo pagina5.html que está dentro de la carpeta "Documentos"

<!-- Primer enlace -->
<a href="../../../../Clasica/Beethoven/pagina2.html">Enlace a página 2</a>

<!-- Segundo enlace -->
<a href="../../Rock/Guns and roses/imagenPajaro01.jpg">Mira este pájaro</a>

<!-- Tercer enlace -->
<a href="../../../../../Documentos/pagina5.html">Ve a la página 5</a>

<!-- Otra opción -->
<a href="/Documentos/pagina5.html">Ve a la página 5</a>