Aprende HTML5

Hola querido lector, esta es mi primera colaboración con este estupendo blog “UnProgramador”; espero que la información que aquí presento sea de mucha utilidad para ti.

Yo sé que todos queremos ir directamente a escribir código, pero daré una muy breve introducción para entender la parte teórica de HTML. ¡Solo porque es necesario!.

INTRODUCCIÓN

HTML (Hypertext Markup Language) como su nombre lo indica es un lenguaje de marcado (que no es lo mismo que un lenguaje de programación) que sirve para definir la estructura y por ende el contenido que tendrá nuestro sitio web.

Con el paso del tiempo y como todas las tecnologías en el mercado, HTML ha evolucionado desde su comienzo hasta el día actual: HTML 2.0 (1995), HTML 4.0 (1997), XHTML (2000), HTML5 (2014), etc. con el objetivo de adaptarse a los nuevos tiempos y así dar soporte a nuevas necesidades. Para entender un poco más sobre la historia, la evolución y la W3C organismo encargado de la estandarización de HTML5 puedes entrar aquí.

HTML5 es el lenguaje de marcado por excelencia utilizado para el diseño de sitios web en la actualidad. Sin más que decir y para no aburrirlos, ¡entremos en materia!

Etiquetas en HTML5

En HTML5 existen más de 100 elementos que nos permitirán crear etiquetas, no explicare cada una de ellas, porque ni las personas que se dedican por completo al ámbito del desarrollo web conocen o recuerdan todas, pero es bueno saber en dónde buscar y saber cómo se utilizan.

Existen dos tipos de etiquetas en HTML:

  • Las que tienen una apertura y un cierre:
<a href="http://www.google.com">Google</a>

En este caso la etiqueta es “a” el contenido de esta es “Google” y esta etiqueta contiene un atributo href que cuenta con un valor que es el enlace a “http://www.google.com”.

  • Las etiquetas con elementos auto-contenidos:
<img src="html-css-js.png">

En este caso la etiqueta es “img” la cual es para poder agregar una imagen a la estructura de nuestro documento web y dentro del atributo “src” se asignará la ruta y el nombre con el tipo de extensión de la imagen que queremos visualizar.

Para intentar dejar esto un poco más claro las etiquetas del primer tipo generaran nodos en los que se contendrán más elemento o etiquetas ya sea del mismo tipo o del tipo dos, pero eso lo explicaremos en un momento.

Estructura básica HTML5

Todo documento en HTML tiene una estructura básica. Veamos esto de una manera práctica, y vamos separando el código en módulos de tal manera que sea entendible.

<!DOCTYPE html> 
<html lang="en">
 <head>
 <meta charset="UTF-8">
 <title>Document HTML5</title>
 </head>
 <body>
   <h1>Hello World!</h1>
 </body> 
</html>

En la primera línea del código nos encontramos con el “Doctype”, el cual al definirlo de la manera en la cual se observa, hacemos referencia a que utilizaremos la versión 5 de HTML.

En la etiqueta <head> se definirá la información general (metadatos) acerca del documento, incluyendo su título, enlaces a hojas de estilos y enlaces a scripts.

En la etiqueta <body> definiremos el contenido a visualizar en nuestro sitio web, como quien dice ¡Aquí es en donde la magia comienza señores!.

Dentro de esta etiqueta es en donde pondremos las etiquetas necesarias para formar una estructura que sea congruente con nuestro diseño o “Mock-up” del sitio. Cabe mencionar que HTML5 al igual que cualquier versión anterior a esta es un lenguaje estandarizado y se debe seguir un modelo el cual es conocido como “Modelo de cajas”, pero tranquilo intentaremos explicarlo de la manera más clara posible.

Modelo de cajas

En ocasiones, al escuchar estandarización o modelo, llegamos a creer que será más complejo de lo que pensábamos inicialmente. Pero en este caso, el modelo de cajas facilita mucho el hecho de la estructura a maquetar.

Una página web puede ser vista como un conjunto de cajas llamadas bloques. Como pudimos observar en el ejemplo anterior cada etiqueta puede ser un bloque contenedor de otros bloques, o una caja que contiene dentro de ellas otras cajas.

Estructura de HTML5

En esta imagen podemos apreciar de una manera más grafica como una caja puede contener otra dentro de ella. Y a continuación veamos como seria en código HTML5.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document HTML5</title>
</head>
<body>
    <header>
        <h1>I am a Header</h1>
    </header>
    <nav>
        <p>I am a nav</p>
    </nav>
    <main>
        <section>
            <p>I am section 1</p>
        </section>
        <section>
            <p>I am section 2</p>
        </section>
        <section>
            <p>I am section 3</p>
        </section>
    </main>
    <footer>
        <h5>I am a Header</h5>
    </footer>
</body>
</html>

Aquí podemos ver como las etiquetas o bloques de código contienen a otros al igual que en la imagen. En este ejemplo se utilizaron las etiquetas “<h1>, <p> y <h5>” para agregar un texto que indica de manera gráfica que tipo de elemento es.

Toma este ejemplo y pruébalo no te quedes con la duda de ¿cómo se verá?. Experimenta con más etiquetas, no te sorprendas de cuando veas que todo tu texto se alinea a la izquierda dentro del explorador. Para darle un mejor aspecto visual se utiliza otra herramienta llamada CSS, pero eso es tema para otro post.

Agradezco tu atención y espero haberte ayudado con esta información.

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

%d