Como entender rapidamente HTML5 en simples pasos

Edinson carranza saldaña
Tiempo de lectura: 5 minutos Suscribete en nuestro podcast SPOTIFY

Hola comunidad lectora de HTML5, seguramente llegastes a este post por 2 razones obvias, primero: Cómo podemos aprender a entender HTML5 en días, segundo ¿Qué cosas podemos desarrollar con HTML5?, en este post te contaré como podrás dominar HTML5 en cuestión de días, solo te pido paciencia y obviamente práctica.

Como dice el lema LA PRACTICA HACE AL PROFESIONAL.

En la actualidad todos sabemos los nombres de tecnologías, nombres de lenguajes de programación, frameworks, librerías, entre otras. Pero muy pocas personas saben sus funcionalidades y desarrollo interno.

EL SUPER HTML5

Para dar inicio a nuestro post completo de como dominar HTML5, conoceremos su historia y beneficios para ser aplicados al momento de desarrollar webapps. 

Sin duda HTML5 no es un lenguaje de programación, pero si te cruzas en tu aula, reunión, o personas que dicen «QUE ES UN LENGUAJE DE PROGRAMACIÓN», Solo respira.

HTML5 para todos los lectores de esta publicación es un modelo de documento, un documento donde la sintaxis o manera de documentar se basa en etiquetas, estas FAMOSAS etiquetas son únicas, y como toda etiqueta es totalmente única y distinta tanto en nombre como en funcionalidad.

HTML5 nos trae una serie de cosas útiles que facilitan el desarrollo semántico. TODOS LOS SITIOS DE AHORA, usan por obligación HTML5, es decir si necesitas posicionar una marca en internet necesitas una página con SEO optimizado con HTML5 estructuralmente semántico.

Pero UN MOMENTO, también existe varias versiones anteriores a HTML5 que aún se siguen utilizando. Aquí entraremos un poco de historia general en la creación de este documento HTML..

El origen de HTML se remonta a 1980, cuando el físico Tim Berners-Lee, trabajador del CERN (Organización Europea para la Investigación Nuclear) propuso un nuevo sistema de «hipertexto» para compartir documentos.

Seguramente no conocías quien era el creador, gracias a su invento y desarrollo, hoy los sitios usan como base principal este modelo de documento para crear interfaces avanzadas, desde su creación se trabajo en distintas versiones para mejorar la facilidad del manejo y optimizando el proceso de segmentación estructural de etiquetas

VERSIONES DE HTML

A. HTML 2.0

En 1995 se publica el estándar HTML 2.0. A pesar de su nombre, HTML 2.0 es el primer estándar oficial de HTML, es decir, el HTML 1.0 no existió como estándar. HTML 2.0 no soportaba tablas.
Se simplificaba al máximo la estructura del documento para agilizar su edición, donde la declaración explícita de los elementos body, html y head es opcional.

B. HTML 3.2

La versión HTML 3.2 se publicó en 1997 y es la primera recomendación de HTML publicada por el W3C (Consorcio internacional). Esta revisión incorporó los últimos avances de las páginas web desarrolladas hasta 1996, como applets de Java y texto que fluye alrededor de las imágenes.

C. HTML 4.01

La última especificación oficial de HTML se publicó en diciembre de 1999 y se denomina HTML 4.01. Desde la publicación de HTML 4.01, el W3C se centró en el desarrollo del estándar XHTML. Por este motivo, en el año 2004, las empresas Apple, Mozilla y Opera mostraron su preocupación por la falta de interés del W3C en HTML y decidieron organizarse en una nueva asociación llamada WHATWG (Web Hypertext Application Technology Working Group) que comenzó el desarrollo del HTML 5, cuyo primer borrador oficial se publicó en enero de 2008. Debido a la fuerza de las empresas que forman el grupo WHATWG y a la publicación de los borradores de HTML 5.0, en marzo de 2007 el W3C decidió retomar la actividad estandarizadora de HTML, dentro del cual decidió integrar el XHTML.

D. HTML 5

El consorcio internacional W3C, después de una evolución de varios años, liberó el HTML 5 como estándar oficial a finales de octubre de 2014. HTML 5 incorpora nuevos elementos no contemplandos en HTML 4.01. Hay diversos cambios respecto a HTML 4.01. Hay nuevas etiquetas, se introduce la posibilidad de introducir audio y video de forma directa en la web sin necesidad de plugins o complementos en los navegadores, y otras novedades.

El W3C irá lanzando progresivamente nuevas evoluciones del HTML 5.

PARTE 1

Para iniciar nuestra super guía de como entender fácilmente HTML5, vamos a empezar por los conceptos básicos.

  • HTML5 no es un lenguaje de programación
  • HTML5 es un modelo de documento
  • HTML5 sirve para modelar una web
  • HTML5 todo se trabaja mediante etiquetas únicas
  • HTML5 sirve para desarrollo web, apps y games

HTML5 su estructura esta compuesto por etiquetas que debemos recordar para iniciar un proyecto web, posteriormente podemos agregar a cada etiqueta atributos segun nuestras necesidades.

Para crear un documento HTML5 todo archivo debe tener una extensión o terminación .html, de esta manera hacemos referencia al modelo de documento que escribiremos.

La estructura base de todo documento HTML5 se crea de esta mánera

<!DOCTYPE html>
<html>
<title>HTML Tutorial</title>
<body>

<h1>Texto o titulo principal</h1>
<p>Texto descriptivo largo o corto.</p>

</body>
</html>

Entendamos un poco de su funcionamiento de la estructura mostrada:

  • <!DOCTYPE html> Iniciamos el tipo de versión de html que usaremos, en nuestro caso es HTML5
  • <html> </html> Define la raíz de un documento HTML
  • <head></head> Contiene metadatos / información del documento.
  • <body></body> Define el cuerpo del documento
  • <h1></h1> Titulo principal de la web, sirve mucho para SEO
  • <p></p> Se define parrafos cortos o largos de un contenido

De esta manera se compone un documento HTML5 básico, ahora nosotros podemos agregar atributos a nuestro documento para convertirlo en una pagina más funcional y entendible para los buscadores y visitantes.

En todo documento HTML5 tenemos un idioma que debemos crear por defecto, el atributo se llama LANG con este atributo mencionamos a los buscadores que tipo de idioma se vera el contenido.

PARTE 2

Bienvenido a esta sección, en esta area vamos a seguir aprendiendo HTML5 para modelar cualquier documento web en version WEB, TABLET O MÓVIL.

Al generar un documento base index.html podemos escribir distintos tags para nuestro archivo. cada tag representa un fragmento de código que tiene una función unica y especial.

Empezemos por los tags mas principales y hablaremos con su descripcción de cada uno de ellos:

Encabezados: Los encabezados nos sirven para representar información o titulo de una pagina o subtitulos secundarios.

los encabezados son 6 y se usa etiquetas por cada una de ellos, cada encabezado tambien cuenta una versión de tamaño de fuente que nos daremos rapidamente cuenta.

<h1></h1> Nos sirve como identificador propio de una página, es usado unicamente para el título principal

<h2></h2> Es usado como subtitulo del titulo principal h1, se puede usar dos, tres o varias veces en un mismo documento html

<h3></h3> Es usado como subtitulo menos importante de h2

<h4></h4> Es usado como subtitulo menos importante de h3

<h5></h5> Es usado como subtitulo menos importante de h4

<h6></h6> Es usado como subtitulo menos importante de h5


De esta manera realizamos titulos principales segun la visibilidad e importancia que necesitemos. recuerden que el h1, para SEO es muy importante y es usado una sola ves en nuestro documento.

Etiquetas de texto: Existen otras etiquetas o tags que envuelve contenido corto o largo.

  • <p></p> El elemento ‘p’ representa un párrafo de texto.
  • <span></span> Su función es para englobar información inline.
  • <b></b> Define un texto en negrita
  • <strong></strong> Define un texto en negrita
  • <sub></sub> Define un texto que es subíndice
  • <small></small> Define texto pequeño
  • <sup></sup> Define un texto que es superíndice
  • <track></track> Define texto de la pista para elementos multimedia (vídeo y audio)
  • <s></s> Define texto que no es correcto
  • <pre></pre> Define texto pre-formateado
  • <mark></mark> Define texto resaltado o marcado
  • <ins></ins> Define texto que ha sido insertado en un documento
  • <input> Define un control de entrada de texto
  • <i></i> Define una parte del texto de modo alternativo
  • <em></em> Define énfasis en un texto
  • <bdo></bdo> Sobreescribe la dirección del texto
  • <bdi></bdi> Aísla una parte del texto que puede tener un formato diferente del texto externo

Muy Bien, si leistes todas las etiquetas no te olvides de escribirlo manualmente con algun editor de código y practicarlo, tambien te aconsejo que imprimas los tags y lo pegues en algun lado que sea visible todos los días. el objetivo es saberlo de memoria las etiquetas con su funcionamiento.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

preloader image