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.
¿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.
¿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.
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>
y<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
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).
- 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:
¿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».
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 elemento. El valor debe de ir entre comillas dobles o simples.