Si analizamos el funcionamiento de una página web podremos ver que usualmente están formadas por muchas tecnologías/lenguajes. Si repetimos el proceso con varias páginas, nos daremos cuenta que aparecerán muchos lenguajes y tecnologías, y que incluso muchos de ellos incluso ni sabremos para utilidad tienen.

Front End vs Back End vs Full Stack

Tradicionalmente, en el desarrollo de software se diferencia a las tecnologías y a los desarrolladores dependiendo de con quién interactúen y donde. Según la capa (o capas) sobre la que se aplica dicha tecnología y de igual forma en el caso de los desarrolladores. Podremos ser o una tecnología podrá ser de:

  • Front End: hablamos de front end cuando se interactúa (realiza tareas) en el lado del cliente, el que interactúa con el usuario, el que trabaja con «la parte que se ve de la web». Por tanto, su responsabilidad está relacionada con «lo que el usuario ve».
      • Por ejemplo: HTML, CSS, JavaScript (en el lado cliente), BootStrap, Angular, React.js, etc.
      • Las tecnologías en rojo serán imprescindibles si queremos ser Front Ends, sí o sí las debemos conocer. 

  • Back End: hablamos de Back End cuando realiza tareas en el lado del servidor es «la parte de la web que no se ve». Trabaja detrás del escenario, en el lado oscuro. Su responsabilidad está relacionada con «lo que el usuario no ve».
      • Por ejemplo: Node.js, Java, PHP, C#, JavaScript (con Node.js), etc.
      • No existen tecnologías imprescindibles, en el lado de back, tendremos que adaptarnos más, dependiendo del cada proyecto se trabajará con un lenguaje o con otro (Java, python, php, node, etc.). Lo recomendable como mínimo sería tener una base de fundamentos programación de que son los bucles, variables, etc. Y también nos iría bien dominar de bases de datos, JSON, XML, etc.

  • Full Stack → Si un desarrollador es capaz de realizar tanto de la parte Front, como de la parte de Back nos encontramos ante un Full Stack. Un desarrollador Full Stack (o de pila completa) es capaz de realizar el ciclo completo, todas las etapas del desarrollo de una aplicación.

Un full Stack, es por tanto, capaz de comerse la hamburguesa completa. Por eso Kiko Rivera se pasó de DJ a Full Stack developer.

Bueno, bromas a parte, vamos a seguir

¿Qué es HTML?

Antes de HTML, trabajábamos con ficheros de texto plano sin formato (por ejemplo cursiva, negrita, títulos, etc.) como si trabajamos con archivos de notepad que no estaban vinculados entre sí.

Analizando el significado de HTML

HTML, es un lenguaje de marcas que nos permitirá elaborar páginas web.

HTML → HyperText Markup Language = Lenguaje de marcas de hipertexto

Si analizamos el significado más detalladamente el significado de sus iniciales podremos descubrir muchas cosas. Vamos a ello:

  • Hyper Text: nos permite que nuestro texto desplazarnos hacía otra fuente. También es conocido como enlace, link o (como su traducción literal) hipervínculo/hipertexto. Estos enlaces pueden ser:
      • Hacía una fuente externa: como puede ser otro sitio web, un archivo PDF, etc. Por ejemplo: google.com
      • Hacía una fuente interna: otro documento HTML de nuestra página web (de la misma en la que estamos)
  • Language Markup: nos indica que nos encontramos ante un lenguaje de marcado. El marcado se realiza mediante a una serie de etiquetas con una estructura predefinida dentro del documento.

HTML inicial vs HTML actual

Aunque HTML es un lenguaje de marcas o etiquetas (no de programación), en este momento en particular, vamos a hablar de él como una capa y no como un lenguaje de marcas, con el fin de entender mejor su funcionamiento.

En el pasado las webs eran prehistóricas que estaban hechas solamente en HTML. Un ejemplo podría ser la comparación de la primera web de la historia (la podéis visitar clicando aquí u observando la imagen inferior) si las comparáis con las de ahora, podréis observar que no tienen nada que ver. Esto es debido a que todo a evolucionado el propio HTML y además se han añadido nuevos lenguajes (nuevas capas).

Versiones de HTML y relación con W3C

A lo largo del tiempo HTML ha ido evolucionado y eso ha provocado la creación de distintas versiones de HTML. De realizar estás evoluciones de versiones de HTML, se encarga la World Wide Web Consortium (más conocida bajo la abreviación W3C) es un consorcio (compañía) internacional que desarrolla los protocolos y directrices que garantizan el crecimiento a largo plazo del lenguaje HTML.

Algunas de las principales versiones que han surgido a lo largo del tiempo son:

Version

Year

HTML

1991

HTML 2.0

1995

HTML 3.2

1997

HTML 4.01

1999

XHTML

2000

HTML5

2014

Las distintas versiones de HTML han traído evolucionando el HTML adaptándose a las necesidades que han ido surgiendo mediante a nuevas etiquetas

Versión actual de HTML

Actualmente nos encontramos ante la versión 5 de HTML o como también es conocida HTML5.

Algunas webs de referencia a tener en cuenta

  • Mozilla Developer: contiene mucha información adicional, tutoriales, etc.
  • W3Schools: aunque no es una web oficial hace referencia al estándar pero
    además, añade tutoriales que nos pueden servir para profundizar un poco en el aprendizaje sobre la tecnología.
  • World Wide Web Consortium (W3C): como ya hemos visto, es la encargada de realizar el estándar. Es decir, de definir y escribir una serie de normas (protocolos y directrices) sobre lo que se define y lo que no.

Relación con otras «capas» (lenguajes)

La evolución de estás versiones de HTML junto a la combinación de otras tecnologías (capas) han ido produciendo páginas webs más interactivas, más visuales, etc.

En la actualidad HTML se utiliza principalmente para otorgar una estructura básica y contenido a nuestra web. Posteriormente, lo combinaremos con otras capas (lenguajes) como CSS (mediante a hojas de estilo) que nos proporcionarán la parte estética y JavaScript (JS) que otorgará la inteligencia, el dinamismo, la acción, es decir, la funcionalidad.

HTML, CSS y JavaScript: las mejores amigas

La combinación de estás 3 tecnologías (HTML, CSS y JavaScript) es la combinación de tecnologías más sencilla y famosa en el lado del cliente (en el navegador sin visitar un servidor) que todo Front End (desarrollador web) deberían de conocer imprescindiblemente.

Eso no significa que no podamos utilizar otra combinación de capas (tecnologías) como BootStrap, Sass, JQuery, etc. Pero estás 3 tecnologías (HTML, CSS y JS) son el punto de inicio en el mundo del desarrollo web. Existe un término que me gusta mucho que nos dice que HTML, CSS y JS se llevan bien. Son lo que se dice «best friends» (mejores amig@s).

Por decirlo así, en este bloque de introducción a los fundamentos web, vamos a ir a la capa superior de la hamburguesa, a la corteza superior (la parte de cliente) y vamos a tocar a los que hemos bautizado anteriormente como las best friends debido a que son imprescindibles de dominar para un desarrollador Front End.

La combinación de varias de estas capas (no tienen por qué ser siempre HTML, CSS Y JS, nos podemos hacer hamburguesas con otros ingredientes) nos permitirán desacoplar y otorgar ciertas funcionalidades a cada una de las capas. En el caso de HTML, CSS y JS vamos a ver unas imágenes a modo de ejemplo para entender mejor la funcionalidad que realiza cada una de las capas:

¿Qué es un lenguaje de marcado?

Un poco más arriba ya hemos hablado de que HTML es un lenguaje de marcado o de etiquetado.

Podríamos definir las etiquetas como botecitos que contienen lo necesario para que cuando el ordenador lea ese documento sepa que tiene que hacer con cada una de las etiquetas. Las etiquetas de inicio y de cierre nos permitirá delimitar/almacenar lo que hay en su interior.

Los navegadores no muestran los HTML tags, pero sí que los usan para renderizar («interpreta») el contenido de la página.

Como ya hemos visto un poco más arriba, las etiquetas (también conocidas bajo el término de TAG) son las instrucciones que nos permitirán añadir contenido a nuestra web tales como títulos, párrafos, etc.

Tipos de etiquetas (TAGs) HTML

Existen diferentes etiquetas que nos permitirán hacer cosas distintas en nuestros documentos web.

Dentro de las etiquetas/tags tenemos diferentes tipos de etiquetas. Si las clasificamos según su estructura de etiqueta tenemos dos grandes bloques:

  • No selft-closing tags: una elemento que tiene las etiquetas de apertura y cierre. Este tipo de elemento está formado por 3 partes. Vamos a ver un ejemplo:
    • Si queremos crear el párrafo en una página web utilizamos la etiqueta p:
    • <p>Texto de nuestro párrafo</p>
      • Etiqueta de apertura: <p> → Indica el inicio del párrafo
      • Contenido: Texto de nuestro párrafo
      • Etiqueta de cierre: </p> → Indica el cierre de la etiqueta párrafo. Se diferencia de la etiqueta de inicio por tener una / inmediatamente después de <

  • Selft-closing tags (auto cierre): son elementos que no requieren una etiqueta de apertura y cierre, sino únicamente una etiqueta de cierre. El Self-closing tags es válido en HTML5, pero es requerido el cierre de la etiqueta.
      • <br><br /> son lo mismo para el navegador y harán literalmente lo mismo.
      • Es aconsejable o muy recomendable el coger el hábito de cerrar todas las etiquetas ya que, si las cerramos todas, es menos que nos dejemos alguna abierta de las no selft-closing.

Importancia de utilizar las etiquetas semánticas de HTML5 correctamente según su valor semántico

Es muy importante utilizar la semántica de las etiquetas correctamente para que cuando el navegador o incluso la araña que indexa el contenido en Google interprete el código, sea capaz de entender lo mejor posible el contenido que engloba y cual la relación que tiene con el conjunto de elementos del documento HTML.

Un ejemplo con versiones anteriores a HTML5 utilizaban div (contenedor) para realizar agrupaciones varias etiquetas, ahora, en HTML5, disponemos de distintas etiquetas sintáticas para indicar si estos contenedores son un footer, un article, o un menu nav por ejemplo.

Visual Studio Code

Para desarrollar nuestras páginas web, utilizamos el IDE (editor de código) → Visual Studio Code (VSC), lo podéis descargar desde aquí: https://code.visualstudio.com/

Estructura básica de un documento HTML5

Los documentos HTML, deben acabar con la extensión html o htm (ambas son equivalentes) la única diferencia es que htm se creó para los sistemas que solo aceptaban 3 caracteres como extensión y html tiene 4 caracteres.

Para indicar el documento inicial HTML existe una buena praxis no escrita que consisten en llamar index.html a dicho documento para identificarlo lo antes posible.

Si creamos un proyecto y el documento index.html y escribimos en el HTML:5 desde Visual Studio Code podremos ver que existe una opción que es html:5

Si pulsamos sobre ella, nos escribirá la estructura básica de un documento HTML5:

Hay que matizar que solamente se escribe en mayúscula la DOCTYPE aunque HTML no distingue entre mayúsculas y minúsculas es buena praxis seguir lo que hace el resto de la comunidad.

Anatomía de un documento HTML5

Si nos fijamos en el documento principalmente tenemos 4 TAGs:

  • DOCTYPE (versión HTML5): nos permite indicarle al navegador que el documento HTML que hemos creado será de la versión HTML5.
  • HTML (documento HTML): delimita el inicio y el fin del documento HTML
  • HEAD (Encabezado) → es la cabeza del documento contiene metadatos (información importante) que «no serán visibles» cuando carguemos el documento HTML en el navegador. Dentro del TAG de HEAD, añadiremos información como el título de la página (tag <title>), enlaces a CSS (en el hipotético caso de que queramos añadir una capa de estilos CSS a nuestro documento HTML), enlaces para personalizar los iconos (tag favicon), además de otros metadatos (datos sobre el HTML, como quién lo escribió y palabras claves importantes que describen el documento).
  • BODY (Cuerpo) → es la parte del documento que será visible cuando carguemos el documento HTML en el navegador. Por tanto, las etiquetas que no sean metadatos irán aquí.

La siguiente imagen narra a la perfección lo que acabamos de explicar. Tenemos una etiqueta HTML (el esqueleto al completo), el HEAD (la cabeza) y el BODY (el cuerpo).

Podemos ver que tenemos un punto junto al nombre del archivo esto es porque no hemos guardado el documento por el momento. Si lo guardamos, podremos ver que este punto desaparecerá y finalmente podemos abrir nuestro proyecto:

Y veremos que se nos abre una ventana con el documento index.html, aunque, podemos observar que está en blanco ya que por el momento es la estructura sin contenido, por eso nos aparece «vacío».

Si pulsamos F12 (desde Chrome) abriremos el inspector de elementos (DevTools), en el que podremos ver su estructura. En este caso, también podemos apreciar que el propio Live Server al abrir el documento nos ha añadido un pequeño script.

Vamos a volver al VSC y vamos a añadirle algo de contenido a la web:

  • Dentro del head vamos a modificar el valor del metadato:
      • Título (title) de la web por «First HTML Website»
  • Dentro del body vamos a añadir dos instrucciones:
      • La etiqueta de encabezado principal (h1) con «Hola mundo» como contenido
      • La etiqueta de párrafo (p) con «Desde mi primera página web» como contenido.

El resultado será:

Si abrimos la web, esta vez, vamos a ir al directorio donde hemos creado el fichero y pulsaremos encima de él:

Si volvemos a entrar en la ventana de inspección del navegador (con F12 desde el Google Chrome) también podemos ver que su estructura ha cambiado:

¿Qué son los atributos de un TAG (etiqueta)?

Anteriormente hemos visto las etiquetas, pero hemos saltado la parte de los atributos. Ya que considero que es más sencillo de aprender que son los atributos una vez nos hemos «pegado» un poco con ellas.

Si revisamos la etiqueta html de la estructura básica del documento podemos ver que no solo está formada por el nombre del elemento (html) sino que además tiene un atributo lang que tiene como valor «en».

Esto es debido a que en algunas ocasiones la etiqueta por sí sola es capaz de almacenar la suficiente información y necesita atributos que la complementen.

Estos atributos son pares de nombre y valor que van separados por un «=» y escritos justo detrás del nombre de la etiqueta de apertura un elementoEl valor debe de ir entre comillas dobles o simples.

En este caso en particular, lang nos permite seleccionar el language (el idioma) de nuestra página al ser en español = es. Si la web fuera en inglés utilizaremos el valor «en» de english para definir el idioma del documento mediante el atributo lang. Por tanto, lo debemos modificar el valor del atributo lang también. Para que los buscadores entiendan mejor que nuestra web es en español.

Una vez aterrizados en HTML en próximas lecciones continuaremos profundizando más en este mundo del desarrollo web. Espero que os haya gustado 🙂