Tutorial básico html5
Hola! Bienvenido a este tutorial básico de html5.

Con este tutorial básico html5 podrás empezar a crear páginas web combinando html5 con css3

¿Que es html5?

Empecemos por el principio 🙂

HTML5 de sus siglas en ingles (HyperText Markup Language) es la quinta versión del lenguaje básico de la World Wide Web (WWW).

Este es un lenguaje de marcado, no lo podemos considerar un lenguaje de programación ya que estos incluyen tres capacidades básicas de generar flujos de procesos: la secuencial (secuencias de instrucciones), la condicional (capacidad para tomar decisiones o ejecutar un proceso u otro en función del valor de uno o varios parámetros) y la de repetición (capacidad para repetir un proceso un cierto número de veces). HTML no cuenta con ellas, no porque sea mejor ni peor sino porque es una cosa distinta.

El lenguaje de marcado es básicamente un idioma que se caracteriza por etiquetar el contenido de una página web.

La base del HTML es el hipertexto. Entendemos por hipertexto la capacidad de enlazar documentos web de forma no secuencial.

Se considera el lenguaje web más importante siendo su invención crucial en la aparición, desarrollo y expansión de la World Wide Web. Es el estándar que se ha impuesto en la visualización de páginas web y es el que todos los navegadores actuales han adoptado.

¿Para que sirve html5?

HTML es el elemento de construcción más básico de una página web y se usa para crear y representar visualmente una página web.

Determina el contenido de la página web, pero no su funcionalidad. Otras tecnologías distintas de HTML son usadas generalmente para describir la apariencia/presentación de una página web (CSS) o su funcionalidad (JavaScript).

HTML se caracteriza por etiquetar el contenido de una página web. El HTML nos ayuda a conferir a los documentos web de contenido y estructura. Etiquetamos las distintas partes de un documento web para aportar información al usuario, a los motores de búsqueda y a los navegadores.

Concepto de etiqueta web

Una etiqueta es una información técnica que es capaz de ser detectada e interpretada por un navegador web. Las etiquetas pueden contener atributos que informan a los navegadores de los matices que se deben aplicar a un determinado marcado.

Las etiquetas generalmente tienen una instrucción de apertura y una instrucción de cierre. <> y </>

Existen también etiquetas que no tienen instrucción de cierre. En este caso se recomienda indicar una barra inclinada /> (XHTML)

En función del tipo de html que escribamos (XHTML, HTML 4.01, HTML5) la sintaxis puede variar.

HTML5 incorpora etiquetas semánticas que además de aportar información para los navegadores también aportan informaciones para los motores de búsqueda.

Estructura básica de un documento .html

HTML como lenguaje que es tiene un vocabulario y una sintaxis básica que debemos conocer.

Los archivos o documentos escritos en HTML tienen una extensión .html para que los servidores y los navegadores los interpreten.

La estructura básica es:

<!DOCTYPE html>
<html>
<head>

</head>
<body>
	
</body>
</html>

El significado de las etiquetas es el siguiente:

  • <!DOCTYPE html> Informa a los navegadores que a continuación van a leer HTML5. Esta línea no es una etiqueta sino una instrucción. Si googleáis encontraréis versiones más extensas pero nosotros no las vamos a usar. Hacen referencia a versiones de html más antiguas.
  • <html></html> Informa a los navegadores que en su interior es dónde vamos a encontrar el HTML5. Esta etiqueta debe abrirse y cerrarse una única vez por documento web. Justo a continuación de la instrucción !DOCTYPE y al finalizar el documento web.
  • <head></head> Es la cabecera del documento web. La cabecera del documento web contiene informaciones técnicas para los navegadores web y para los motores de búsqueda. Por ejemplo aquí dentro encontraréis la etiqueta <title> y los <meta>. Solo debe aparecer un <head> en un documento web y nunca debéis confundirlo con la etiqueta semántica de html5 <header>
  • <body></body> Es el cuerpo del documento web. Encierra las etiquetas que van a aportar estructura y contenido a nuestro documento web. También solo se escribe una única vez por documento web.

Aviso

No se puede escribir html entre las etiquetas <html> y <head>, tampoco se puede escribir html entre las etiquetas </head> y <body>, y pasa lo mismo entre las etiquetas </body> y </html>.

En esta estructura básica podemos empezar a incluir dentro de la etiqueta <head> otras etiquetas como por ejemplo:

  • <title> para poner el titulo de nuestro documento web (formulario, contacto etc…).
  • <meta> con información para los navegadores (idioma del documento, tipo de documento etc…).
  • <link> que sirven para enlazar con documentos o archivos adicionales (hojas de estilos css, imagen del favicon etc…).

Aquí tienes el código de ejemplo con las etiquetas anteriores:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Titulo de la web</title>
  <link rel="stylesheet" href="estilos.css" />
</head>
<body>
	
</body>
</html>

En esta última versión de HTML tenemos etiquetas muy interesantes para ubicar los contenidos dentro de nuestra etiqueta <body>, las más importantes son:

  • <header> es la cabecera donde va el nombre del sitio, el logotipo y descripción de la página web.
  • <aside> lo que viene siendo nuestro SIDEBAR o barra lateral.
  • <footer> esté es el pie de página del documento web.

Aquí tienes el código con todos los ejemplos anteriores, las etiquetas <h1>, <h3> y <p> las explicaremos en el próximo tutorial avanzado html5:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Titulo de la web</title>
  <link rel="stylesheet" href="estilos.css" />
</head>
<body>
   <header>
      <h1>Mi sitio web</h1>
      <p>Mi sitio web creado en html5</p>
   </header>
   <aside>
      <h3>Titulo de contenido</h3>
          <p>contenido</p>
   </aside>
   <footer>
       Creado por mí el 2019
   </footer>
</body>
</html>

Y esto es todo en este tutorial básico de html5, para seguir aprendiendo sobre este lenguaje te dejo el enlace al tutorial avanzado html5.

Puedes copiar y pegar este código en un editor de texto y guardarlo con extensión .html, después solo tienes que abrirlo con tu navegador favorito y ver como se vería la página web.

Recordar que el HTML se debe usar para dotar de contenido y estructura a un documento web. No para temas estéticos. Para ese propósito tenemos el lenguaje CSS, del cual puedes aprender en este tutorial básico css.

Te dejo el enlace a la W3C (Word Wide Web Consortium), la página general aquí y la página del consorcio en España aquí.

Un comentario en «Tutorial básico html5»

Dejar un comentario