Curso gratuito de HTML5

Primero que nada, te damos la bienvenida al curso gratuito de HTML5 en el cual podrás aprender desde lo básico a lo avanzado a crear tu propio sitio web. Crearemos un artículo para ir analizando y viendo cada elemento o etiquetas HTML y a su vez un video explicativo con un su respectivo ejemplo. Nuevamente te damos la bienvenida a este curso y arrancamos con la introducción.

INTRODUCCIÓN

HTML (HyperText Markup Language) es un lenguaje de marcado que nos permite crear páginas web mediante etiquetas o elementos, las cuales vamos a analizar en un artículo con su respectivo video.

HTML está constituido de elementos o etiquetas que los navegadores web (Google Chrome, Mozilla Firefox, Internet Explorer, Safari, Opera, entre otros) interpretan y despliegan en la pantalla de una forma legible para las personas. Veremos que hay elementos para mostrar imágenes y videos, hipervínculos que nos permiten dirigirnos a otra página, listas, tablas para mostrar listas de información entre otras cosas que veremos más adelante.

Para seguir este curso y aprender a crear páginas HTML vas a requerir un editor de texto (en mi caso voy a utilizar Visual Studio Code, pero hay muchos otros editores que puedes utilizar Sublime Text, Atom, Notepad++, JetBrains WebStorm, entre muchos otros).

Estructura básica de una página en HTML5

Todas las etiquetas HTML están encerradas entre los signos mayor que y menor que < >. Muchas de las etiquetas tienen su etiqueta de apertura y de cierre, todo lo que esta fuera de los signos <> se imprime en pantalla.

La estructura básica de una página web es la siguiente:

<!doctype html>
 <html>
   <head>
      <meta charset="utf-8"/>
      <title>Título de la página web</title>
   </head>
   <body>
      Contenido de la página web
   </body>
 </html>

Los elementos o etiquetas que podemos ver en el ejemplo anterior son los siguientes:

DOCTYPE. <!doctype html> indica a los navegadores web que el siguiente contenido es HTML.
HTML. <html> esta etiqueta indica que aquí inicia el documento html y al final del mismo tenemos su etiqueta de cierre </html>, la cual indica que ahí termina el documento html.

Después de DOCTYPE y HTML una página web tiene dos secciones que son las principales en toda página web HEAD Y BODY.

HEAD. <head> es la cabecera y tiene su etiqueta de cierre </head>, todo lo que colocamos dentro de <head> y </head> no se visualiza en el navegador, pero ofrece información muy importante para la página web. La información que va en esta sección es referente a:
- La codificación de la página, esto es para que el navegador interprete correctamente los acentos, ñ y caracteres especiales. Para esto utilizamos meta charset="utf-8"

<meta charset="utf-8">

- También incluye el título de la página el cual aparece en la pestaña del navegador que estas utilizando.
  <title>Curso gratuito de HTML5 – Aprendiendo a crear mi propia página web </title>
- La descripción de la página web, esta descripción sirve para que los buscadores (Google, Bing, Yahoo, entre otros) sepan de que se trata l página web.
  <meta name="description" content="Resumen del contenido de la página">
- Código CSS que se utilizará para definir los estilos de las etiquetas HTML5. Puedes seguir el curso de CSS que estoy publicando en este link y te ayudara a reforzar este punto.

<style type="text/css"> </style> <link rel=stylesheet href="css/estilo.css" type="text/css"/>

- La programación de JavaScript (en el caso de que se utilice), puedes seguir el curso de Javascript en esta página para aprender a programar JavaScript.
BODY. El BODY tiene su etiqueta de apertura y de cierre <body></body> todo lo que pongamos dentro del BODY aparecerá en el navegador dependiendo cómo lo hallamos definido y la estructura interna que hallamos echo.