HTML5

Cosas que debes aprender: HTML5

¿Te interesa el desarrollo web HTML5 y CSS3? ¿Eres un aspirante a Desarrollador Web Front-end? ¿O estás comenzando una nueva carrera en el desarrollo web? 

Si tu respuesta a cualquiera de estas preguntas es un gran ‘¡Sí!’, entonces te doy la bienvenida a nuestra querida industria del desarrollo web, pero incluso si no quieres  ser parte de la industria del desarrollo web, igualmente te doy la bienvenida como persona de mente curiosa y con interés en aprender sobre tecnologías web. Hoy, en esta entrada del blog, vamos a hablar de HTML5 para principiantes, donde vamos a definir lo que es HTML y cómo evolucionó de HTML a HTML5, por qué debes aprenderlo, qué necesitas para aprender HTML5, y mucho más…

Por otra parte, si también aspiras a hacer una página web por tu cuenta, para tu empresa o un sitio web personal, con esta entrada del blog podrás obtener una visión general de HTML5 que quizás pueda resultar ser de tu interés. Te aseguro que te va a encantar HTML5!

¿Qué son HTML y HTML5?

HTML son las siglas de Hypertext Markup Language, un lenguaje de marcado que se utiliza para crear páginas web. Este conjunto de códigos y símbolos es procesado por un navegador web para representar visualmente sus elementos, como texto e imágenes. Por otra parte, es un estándar a cargo de la W3C, organización dedicada a la estandarización de casi todas las tecnologías ligadas a la web, sobre todo en lo referente a su escritura e interpretación. Tim Berners-Lee, el creador de HTML, presentó la primera versión en 1990.

Desde ese año, el lenguaje HTML se ha visto sometido a numerosas modificaciones y mejoras basadas en las sugerencias de un amplio grupo de diseñadores y desarrolladores web para superar las dificultades que enfrentaban al hacer páginas web interactivas. Después de la recomendación inicial de HTML, llegaron nuevas versiones tales como HTML 2.0 en 1995, HTML 3.2 en 1997, HTML 4.0 en 1997, y HTML 4.01 en 1999, y finalmente la última y más reciente: HTML5.

¿Por qué aprender HTML?

Soy consciente de que al leer esta entrada del blog, te estarás planteando cuestiones como: ¿por qué debo aprender HTML cuando puedo hacer fácilmente un sitio web utilizando un CMS como WordPress o Joomla? Voy a serte sincero, no hay nada malo en el desarrollo de sitios web utilizando estos sistemas CMS “prefabricados”; sin embargo, te garantizo que nunca estará de más aprender algo de HTML y no te hará ningún mal; más bien todo lo contrario! (incluso utilizando sistemas CMS, hay determinadas situaciones en las que si no dominas HTML no podrás avanzar ni conseguir ciertos resultados).

Además, podrán surgir situaciones en las que necesites hacer frente a algún diseño con errores (o que no se esté mostrando adecuadamente), y en esas situaciones tus conocimientos de HTML sin duda vendrán al rescate. Por ejemplo, supongamos el caso de un sitio de WordPress donde muestra las imágenes equivocadas usando alguna regla CSS, y hay que arreglar eso, ¿qué vas a hacer? Obviamente, sólo se puede hacer frente a este tipo de problemas una vez que sabes cómo funciona HTML, y en tal caso podrás leer fácilmente el código fuente de la página y hacer que las imágenes funcionen correctamente.

Por otra parte, el aprendizaje de HTML no te va a consumir mucho tiempo. Sin duda, vas a poder poner en marcha tu carrera como desarrollador HTML en un lapso de tiempo muy corto, ya que HTML es un lenguaje de marcas muy fácil y básico, que todos los aspirantes a desarrolladores web deben aprender sí o sí.

¿Qué necesitas?

Bueno, para aprender HTML5 realmente no necesitas mucho, lo único que necesitas es una dosis de dedicación y algo de motivación para aprender y practicar (como con casi todo en la vida…). 🙂

El bloc de notas que viene preinstalado en el sistema operativo Windows será más que suficiente como primer editor de código. Sin embargo, si no utilizas sistema operativo Windows, o si deseas utilizar otros editores de texto, entonces puedes utilizar Notepad++ para Windows, Coda 2 o TextWrangler para Macintosh, Sublime Text o Komodo Edit para Macintosh, Windows y Linux. Además de éstos, hay muchos más editores de texto que están disponibles de forma gratuita en Internet.

Por otro lado, también se puede crear una página HTML utilizando editores WYSIWYG. Aquí ‘WYSIWYG’ significa “lo que ves es lo que obtienes.” Son herramientas de diseño que permiten crear una página HTML de forma visual y sin preocuparse demasiado por las etiquetas HTML y sus elementos.

Desde luego, si lo que quieres es convierte en un profesional del desarrollo web Front-end, te recomendamos que te acostumbres a la codificación, lo que significa escribir códigos HTML utilizando un editor (y prescindiendo de las herramientas visuales).

Cosas que deberías saber sobre HTML5 para empezar

Hay dos cosas que usted debes tener en cuanta antes de meterte en faena con HTML5:

  • Las etiquetas y elementos básicos de HTML5.
  • La estructura de una página web HTML5.

1. Etiquetas y Elementos básicos de HTML5

Como ya sabemos que HTML es un lenguaje de marcado, era de esperar que se compondría de varias etiquetas y elementos. Al principio puedes sentirte algo abrumad@, pero tranquil@, no necesitas aprendértelos todos de memoria; ya los irás aprendiendo y recordando conforme los vayas utilizando y practicando con más frecuencia. No obstante, para asegurarte un exitoso comienzo en la fase de aprendizaje de HTML5, voy a presentarte primero algunas nociones y elementos básicos de HTML que también se utilizan para hacer una página HTML5.

Las etiquetas se utilizan generalmente por pares; es decir, una etiqueta de apertura y una de cierre. La etiqueta de apertura sirve para informar al navegador de la naturaleza del contenido que viene después, y la etiqueta de cierre informa al navegador para que sea consciente del fin de dicho contenido.

Por ejemplo, la etiqueta de apertura <html> define el punto de partida de una página HTML, y su cierre </html> define que el contenido HTML termina aquí. Estas etiquetas ayudan a los navegadores a interpretar el contenido y mostrarlo (renderizarlo) de una manera u otra en función de la naturaleza del mismo y de sus propiedades.

Además de estos pares de etiquetas, existen algunas etiquetas que actúan como etiquetas de apertura y cierre al mismo tiempo. Esto es así porque no necesitan incluir ningún contenido en su interior, por lo que con una única marca es suficiente para informar al navegador web de su presencia. Por ejemplo; la <br /> etiqueta que se utiliza para informar de un salto de línea, no contiene ningún contenido.

2. Estructura de una página HTML

HTML5 es un lenguaje muy sencillo y fácil de entender. Cuando se abre una página HTML5 en un navegador web, éste comienza a leer e interpretar la página desde la parte superior hacia abajo, y de izquierda a derecha.

Durante la lectura de la página HTML5, se sigue la estructura básica del documento, en virtud del cual debe declarar el tipo de documento utilizando <! DOCTYPE html>. A continuación se lee la primera etiqueta es decir, <html>, que marca el comienzo de una página HTML5.

Luego hay otras dos secciones importantes, la primero es <head> que representa la cabecera de la página (a nivel de metadatos sobre la propia página) y se compone de los meta-tags, etiquetas de título, estilo, scripts, etc. Y la segunda sección importante es <body> que representa el contenido principal de un documento HTML.

En otras palabras, la sección <head> se crea pensando más en los robots araña que rastrean la Web, y los navegadores web para que sean capaces de entender la página, ejecutar los scripts incluidos, interpretar las hojas de estilos (CSS) que deben aplicar, etc. Mientras que la sección <body> incluye el contenido real de la página; es lo que la gente llega a ver cuando navegan el documento HTML.

Así que, según lo explicado, este sería la estructura mínima de una pagina HTML5:

<! DOCTYPE html>
<Html>
<Head>
</ Head>
<Body>
Hello World!!
</ Body>
</ Html>

A partir de aquí, entraría en juego toda tu capacidad creativa para dotar de contenido a la página que estás creando, utilizando para ello las etiquetas que nos proporciona HTML5 para estructurar la página y crear los distintos elementos que contiene.

estructura de una página HTML

Te invito a que sigas investigando y aprendiendo sobre HTML5. Merece la pena y no te arrepentirás! Actualmente, los límites entre sitios web y aplicaciones finalmente están desapareciendo. La promesa es el futuro de la Web, y la evolución y la combinación de tres tecnologías (HTML, CSS y Javascript) supone una alianza de gran alcance que ha convertido a Internet en la plataforma lider para el desarrollo. HTML5 está claramente a la cabeza.

 

¿Te ha gustado el artículo? Entonces compártelo con alguien a quien también le pueda gustar.

Opt In Image
¿Te gustaría Aprender a Programar pero no sabes por dónde empezar?
Esto te interesa...

¡Ya está disponible nuestro Curso Online GRATUITO!

Sin comentarios

Deja un comentario

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