HTML 5 – Lenguaje de marcado de hipertexto
Cuando arrancamos un coche, encendemos la televisión o escribimos un WhatsApp, no somos conscientes de todos los procesos que intervienen en su funcionamiento.
En el mundo web, ocurre exactamente lo mismo: Cuando accedemos a una url, no nos paramos a pensar en la cadena de órdenes que hemos desencadenado.
En los artículos sobre qué es un servidor, y el curioso origen de algunos nombres de la informática, hablábamos sobre algunos de los aspectos que intervienen en el proceso de mostrarnos una página web cuando escribimos su url en la barra de direcciones.
Hoy hablaremos sobre la estructura básica de lo que es una web en sí misma, sobre cuál es el lenguaje que define la estructura, forma y contenido de cualquier página que vemos o hayamos visto. Hablaremos sobre su estructura, composición, orígenes y de cómo podemos asomarnos y, como si del capó de un coche se tratase, levantar el velo de una web para ver sus entresijos.
¡Pasa, disfruta, aprende y comparte!
HTML es el lenguaje de programación* web más básico que hay, tanto por su propósitos, como porque sirve de anclaje para el resto de lenguajes de programación.
* Algunas personas no consideran HTML como un lenguaje de programación sino como un lenguaje de etiquetas.
Cuando desarrollamos u observamos cualquier página, debemos tener la seguridad, de que su estructura, forma y contenido, han sido desarrollados, directa o indirectamente, a través de este lenguaje.
Si nos servimos del cuerpo humano como alegoría, HTML sería el esqueleto de cualquier site: Da forma al cuerpo y sirve de anclaje para el resto de componentes. Siguiendo este ejemplo, nuestra piel y complementos, es decir, nuestra imagen, estarían a cargo de las llamadas hojas de estilo o CSS. Y, finalmente, nuestras acciones estarían definidas por otros lenguajes de programación; El más popular es Java Script.
El nombre HTML proviene de las siglas en inglés de HyperText Markup Language (lenguaje de marcas de hipertexto), y ese curioso nombre describe el funcionamiento del propio lenguaje: Su funcionamiento se basa en describir, a través de etiquetas de apertura y cierre, qué es lo que queremos mostrar en una web. Siendo las etiquetas <head> y <body>, las que marcan su estructura fundamental.
Así pues, una web totalmente vacía, tendría tras ella el siguiente código HTML:
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
</body>
</html>
En el interior de las etiquetas <head></head> se escribirán las líneas de código que definan el propio documento (Nombre, idioma, propósito de la web, llamadas a hojas de estilo y otros lenguajes…).
En el interior de las etiquetas <body></body> se escribirán las líneas que definan su estructura y contenido: Tablas, párrafos, imágenes, vídeos…
Por ejemplo:
<!DOCTYPE HTML>
<html>
<head>
<title>Nombre de la página</title>
</head>
<body>
<p>Párrafo de ejemplo</p>
</body>
</html>
Este código mostraría la siguiente web:
De donde:
Sí, pero… ¿dónde se escribe ese código?
El código HTML puede ser escrito en cualquier editor de texto básico como el Bloc de notas de Windows, Gedit de Linux… O en cualquier otro editor que admita texto sin formato como GNU Emacs, Microsoft Wordpad, TextPad, Vim, Notepad++…
Será suficiente con abrirlos, escribir el código y guardar el documento con la extensión .htm o .html. Esto generará una página web que abrirá nuestro navegador cuando la ejecutemos.
Naturalmente, existen editores mucho más complejos como DreamWeaver, FrontPage, etc… Que nos permiten crear una web tanto a través de código como a través de una interfaz gráfica. Y como principales ventajas, colorean los diferentes elementos para que sea más sencillo distinguir las distintas partes de una web, y nos muestran errores cuando parte del código ha sido mal escrito.
A continuación ponemos algunos enlaces de distintos programas de software libre especializados en crear y editar código HTML:
Notepad++
Aptana Studio
WebStorm
Visual Studio Express
Y hasta aquí, lo imprescindible.
Si quieres saber más, a lo largo del desarrollo del post te contaremos el origen del lenguaje HTML, sus principales etiquetas y, por supuesto, cómo podemos ver el código que se esconde tras cada web que visitamos.
¡No olvides compartirlo!
¿Cuándo y cómo nació el lenguaje HTML?
Corría el año 1989 y un joven Tim Berners (34) se disponía a crear la web tal y como la conocemos hoy día.
La primera red interconectada había sido creada hacía 20 años uniendo las universidades de Stanford y UCLA bajo el nombre de Arpanet, y desde entonces no había hecho más que aumentar sus interconexiones.
En 1989, el CERN era el nodo de internet más grande de Europa, pero internet era, en esencia, un sistema para enviar y recibir emails. No había páginas webs, no había buscadores, no había, en definitiva, hipertexto (hipervínculos).
Así pues un equipo de físicos liderados por Tim Berners se propuso unir ambas tecnologías (el hipertexto y Arpanet), y para ello, nada mejor que usar la gran red del CERN.
Basándose en un lenguaje de hipertexto llamado SGML, consiguieron crear un sistema a partir del cual podía accederse a los ficheros almacenados en los ordenadores que estuviesen en red. Esa mejora del sistema SGML, fue conocida como HTML y, tan sólo un año más tarde, ese mismo equipo creaba el WWW (Word Wide Web), el primer servidor y el primer navegador web.
Había nacido la web, y Tim Berners sería considerado como el padre de la misma.
Elementos HTML
Los elementos son la estructura básica del HTML. Cada elemento configura una parte fundamental de la arquitectura de una web.
Casi la totalidad de los elementos en HTML, deben venir definidos por una etiqueta de apertura y una de cierre.
Algunos ejemplos de elementos son:
Elemento párrafo <p> El texto que deseemos </p> Elemento contenedor en línea <span>El texto que deseemos </span> Elemento división <div> El texto que deseemos </div>
Los elementos pueden anidarse unos dentro de otros y, cuando se anidan, suelen tabularse para una mayor claridad:
Elemento tabla
<table> <tr> <td>El texto que deseemos</td> </tr> </table>
Cada elemento tiene dos partes esenciales: Atributo y propiedades.
El atributo define al elemento pudiéndole asignar propiedades.
Por ejemplo:
<span id="prueba" class="estilos"> Hola </span>
Al elemento <span> se le ha asignado un texto, “Hola”, dos atributos (id y class), y dos propiedades; una a cada atributo.
Podemos dividir los elementos en 3 tipos:
Marcado estructural:
Describe el propósito del texto. Por ejemplo, <h2>Golf</h2> establece «Golf» como un encabezamiento de segundo nivel.
El marcado estructural no tiene asignado un estilo por defecto, si bien la mayor parte de los navegadores le asignan uno de base, que puede ser editado a través de atributos y propiedades.
Ejemplo:
<h2>Encabezado de 2do nivel con estilo por defecto</h2>
<h2 style="font-type:'Arial'; font-size: 30px; color:#456754">Encabezado de 2do nivel con estilo asignado</h2>
Marcado presentacional:
Describe la apariencia del texto, sin importar su función.
Ejemplos:
<b>Negrita</b> <i>Itálica o cursiva</i> <u>Subrayado</u>
Marcado hipertextual:
Se utiliza para enlazar partes del documento con otros documentos o con otras partes del mismo. Para crear un enlace es necesario utilizar la etiqueta de ancla <a> junto con el atributo href, que establecerá la dirección URL a la que apunta el enlace.
Ejemplo:
<a href="https://www.loopeando.com">Haz clic aquí para ir a Loopeando</a>.
Tabla de las principales etiquetas en HTML y su función
En la siguiente tabla puede ver una lista de las principales etiquetas HTML y para qué se utilizan:
| Nombre etiqueta | Cómo se muestra | Función |
|---|---|---|
| <html></html> | Define el inicio y final del documento | |
| <head></head> | Define la cabecera del documento | |
| <body></body> | Define el cuerpo del documento | |
| Etiquetas que van dentro del head | ||
| <title></title> | Define el título de la página | |
| <link href=””> | Vincula documentos externos. Por ejemplo, hojas de estilo | |
| <style></style> | Define el inicio y final de la hoja de estilo | |
| <script></script> | Define el inicio y final del código script | |
| Etiquetas que van dentro del body | ||
| <form></form> | Define el inicio y final de un formulario | |
| <h1></h1> <h2></h2> <h3></h3> |
Título 1Título 2Título 3 |
Define el inicio y final de la hoja de estilo |
| <table></table> | Define el inicio y final de una tabla | |
| <tr></tr> | Declara la fila de una tabla | |
| <td></td> | Declara la columna de una tabla | |
| <th></th> | Celda de cabecera de una tabla | |
| <li></li> |
|
Elemento de una lista |
| <ol></ol> |
|
Lista numérica |
| <ul></ul> |
|
Lista no numérica |
| <b></b> | Negrita | Texto en negrita |
| <i></i> | Cursiva | Texto en cursiva |
| <u></u> | Subrayado | Texto subrayado |
| <s></s> | Texto tachado | |
| <a href=””></a> | Esto es un enlace | Hipervínculo |
| <div></div> | Divisor, capa o bloque de una página | |
| <span></span> | Contenedor de línea | |
| <img src=””> | Vincula y muestra una imagen al documento | |
Si estás interesado en aprender a programar en HTML, CodeCademy tiene tutoriales gratuitos, graduados a todos los niveles y con múltiples ejercicios autocorrectivos. Lo recomendamos encarecidamente.
Y, no olvides que cualquier duda, ¡estamos para ayudarte!
¿Cómo puedo ver el código de una página web?
No hay mejor manera de aprender que ver lo que han hecho otros con más experiencia y, especialmente, ver cómo lo han hecho.
Si algo muy ventajoso tiene el mundo web, es precisamente la libertad de ver cualquier código en cualquier momento. Si te gusta el efecto que le han puesto a un botón, puedes ver cómo se ha conseguido ese efecto. Si te gusta la manera en la que se verifica la corrección de un formulario, ves el código, lo copias, aprendes y lo mejoras.
¿Y cómo veo el código? Muy sencillo, basta con pulsar la combinación de teclas Control+U. Lo que se te mostrará es lo que conocemos como código fuente es decir, todo el código del lado del cliente, que hace posible que esa web funcione tal y como lo hace. O dicho de otra forma, el código HTML y las capas superiores de código que tenga embebidas (CSS, JavaScript…).
Otra forma de mostrar el código fuente es:
En Internet Explorer:
Ver –> Fuente
En Chrome:
Menú (3 líneas horizontales en la parte superior izquierda) –> Más herramientas –> Ver código
En Firefox:
Herramientas –> Desarrollo web –> Código de página
En Safari:
Ver –> Ver fuente
Ya pero… ¿Y si quiero ver el funcionamiento de algo muy concreto? ¿Tengo que buscar en todo el código fuente de la página?
Chrome, Firefox y la última versión de Internet Explorer (Microsoft Edge), tienen una herramienta llamada “Inspeccionar elemento“, que permite ver el código tras un elemento en particular, en el contexto de toda la web.
Para utilizar dicha herramienta, basta con hacer clic con el botón derecho en la parte concreta cuyo código queramos conocer, y pulsar en Inspeccionar.
Y para terminar, ya sólo nos queda darte la bienvenida al apasionante mundo de la programación web. Como comentamos más arriba, si quieres aprender paso a paso cómo se programa en HTML, te recomendamos CodeCademy y, cualquier duda, en los comentarios te atenderemos gustosamente.
¿Te ha gustado esta entrada? ¡Compartela!
Escribir comentario