Aprendiendo HTML: 4 Conceptos clave.
El Lenguaje de Marcado de Hipertexto es una pieza fundamental dentro del desarrollo web, gracias a éste es posible definir la estructura de una página web. A través del HTML se definen los Elementos y Atributos que contienen la información de un sitio web.
Aprender sobre HTML y CSS es el paso inicial para entrar en el mundo del desarrollo web. Existen diferentes elementos y cada elemento soporta o admite otro listado de atributos, probablemente para muchos new joiners resulte exhaustivo hacer frente a esa posible avalancha de información, intentar memorizar y aplicar todos los conceptos detrás de este lenguaje de marcado puede llegar a ser contraproducente.
Este artículo expone algunos de los conceptos principales que todo aprendiz debe comenzar a dominar y tener presentes incluso antes de pasar a aprender sobre CSS o Javascript (definitivamente no es una buena idea hacer un repaso general sobre HTML y CSS para entrar de lleno a programar páginas web en javascript)
Sin más preámbulos, aquí un listado de conceptos clave a tener en cuenta para poder entender de qué va HTML:
1. Doctype:
Claves: Declaración del tipo de documento.
Tan pronto como comenzamos a ver algunos ejemplos/tutoriales/documentación, vamos a toparnos con un <!Doctype> en la primera línea de todo documento HTML. Ésta primera línea no es más que una declaración que le indica a nuestro navegador el tipo de documento que debe esperar. El objetivo es escribir HTML moderno (en su última versión, HTML5), por ende siempre debemos iniciar nuestros documentos indicando al navegador que el tipo de documento es HTML5:
¡Es todo!.
2. Elementos, Tags y atributos:
Elementos: es un tipo componente de HTML
Tags/Etiquetas: Son las sentencias o palabras clave (keywords) que definen el tipo de elemento que se va a crear. Los elementos (la mayoría) siempre van a ir dentro de un Tag de apertura <> y uno de cierre </>
Atributos: Corresponden a la información adicional que se puede proveer a un elemento. Se declaran dentro del Tag de apertura.
Aquí algunos ejemplos:
En la primera línea tenemos un elemento <button> que define un botón, cuyo texto es Click me! y contiene un atributo name que asigna un nombre a éste elemento.
En la segunda línea tenemos un elemento <a> que define un hipervínculo. Cuyo texto es Google y el atributo href indica la URL de la página a donde apunta nuestro link.
Por ultimo definimos un párrafo mediante la etiqueta <p>. Este elemento contiene un texto y no lleva ningún atributo definido.
Es importante tener presente la diferencia entre un Elemento, un Tag y un atributo.
3. DOM
claves: Arbol lógico, representación del HTML,
El DOM es la representación del HTML a través de nodos y objetos. Ya que existe una jerarquía entre los elementos HTML que dan forma a la estructura de la página web, gracias al DOM se tiene un nodo raíz desde el cual se derivará todo un árbol lógico cuyas ramas terminan en nodos que a su vez contienen objetos.
Document Object -> nodo -> objeto -> propiedades/atributos
Si cargamos el siguiente documento en nuestro navegador
Vamos a obtener como resultado un objeto de documento (Document Object, anda, dilo en inglés, es más facil) similar a éste:
Aquí se puede visualizar la jerarquía existente entre los distintos Tags de HTML, en este caso, el objeto document representa el documento cargado por nuestro navegador, directamente conectado a nuestro nodo raíz: <html>. Que contiene a su vez nodos con los objetos <head> y <body>. Dentro de body se generan los nodos que contienen <a> (un hipervínculo) con el texto “Link text” y el atributo href (no importa si aun no estás familiarizado con estos Tags).
Cada objeto ofrece propiedades que hacen posible modificar la estructura, el estilo y el contenido de la página web. Esto mediante un lenguaje de programación (así es, Javascript)
¡Gracias al DOM es posible generar una conexión entre un lenguaje de programación y una página web!
Otra clave más: el DOM es una interfaz de programación.
4. Bloques HTML y elementos en línea.
En CSS existe una propiedad muy importante llamada display, que basicamente define como se visualiza un elemento HTML. Todos los elementos vienen con una propiedad de visualización -display- por defecto.
Tenemos dos elementos por defecto: inline y block.
Las principales características entre ellos son el ancho que ocupan en pantalla y si inician o no en una nueva línea.
Los elementos en bloque (block) ocupan todo el ancho disponible y siempre inician en una nueva línea.
Los elementos en línea (inline) ocupan el ancho necesario y no comienzan en una nueva línea.
Puedes obtener un listado completo de elementos en bloque y en línea aquí.
Conclusiones!
Estos fueron algunos conceptos que debes ir interiorizando al momento de aprender sobre HTML. Mis recomendaciones:
- consultar la documentación completísima que existe sobre el tema en w3schools y no parar de practicar.
- No te enfoques demasiado en aprenderte todos los Tags, atributos, eventos, elementos, y otros features en una semana ¡ES IMPOSIBLE!. Te recomiendo ir aprendiendo a clasificar cada Tag que vayas utilizando, analizar las webs que visitas y los elementos HTML que pueden contener.
- Ten siempre a la mano las documentaciones de w3schools o Developer Mozilla: ofrecen un soporte y ejemplos bastante amplios.
- No te de miedo Googlear!
