2. El Lenguaje

Como funciona

HTML es el lenguaje que usan los navegadores para ver y entender las páginas web. Para escribir este lenguaje, redactaremos el propio contenido que queremos que sea visible en la web, acompañado de instrucciones para el navegador de como queremos que se muestre dicho contenido.

El contenido de una página web no es todo igual, tenemos enlaces, imágenes, títulos, párrafos… además el mismo puede variar su formato con diferente tamaño, color, tipografía…

Para que el navegador sepa que se trata de texto HTML y no simplemente texto, el contenido debe estar enmarcado por etiquetas, en las cuales definiremos las instrucciones y características del mismo.

Entendiendo las etiquetas

Cualquier contenido o instrucción que escribamos en nuestra página debe estar enmarcado con dichas etiquetas también conocidas como tags. Estos tags o etiquetas son y llevan dentro de si mismas las instrucciones necesarias para que el navegador muestre los contenidos de una manera concreta.

Para enmarcar nuestro contenido dentro de un tag deberemos realizarlo de la siguiente manera:

<tag>Hola mundo</tag>

Una etiqueta se escribe con su nombre entre los signos < >, los nombres de las etiquetas son palabras clave ya definidas que el navegador conoce, con el siguiente ejemplo le estamos diciendo al navegador que el texto «Hola Mundo!» es un párrafo, por lo que el navegador , al conocer previamente dicha <clave> sabe que debe mostrar ese texto como un párrafo:

<p>Hola Mundo!</p>

Para saber donde esta el principio y el fin del contenido delimitado por las etiquetas, se añade antes de la clave de la etiqueta de cierre (el tag de cierre es el que iría a continuación del contenido), una barra hacia la derecha </clave>.

APERTURACONTENIDOCIERRE
<clave>Hola Mundo!</clave>

Atributos

Los atributos son palabras clave extras que se añaden a la etiqueta de apertura para definir mas las propiedades del elemento.

<etiqueta atributo="valor_del_atributo">Hola Mundo!</etiqueta>

Como se puede apreciar en el ejemplo, el atributo siempre va situado en la etiqueta de apertura seguido de el signo = y a continuación entre comillas el valor de dicho atributo.

<p align="center">Hola Mundo!</p>

En el ejemplo hemos definido una etiqueta de párrafo «p» con un atributo de alineación «align» el cual sitúa el texto contenido «Hola Mundo!» al centro del párrafo con su valor «center«.

Además podemos asignar varios atributos a la misma etiqueta para definir aun mas el formato del contenido.

<p align="center" id="mi_identificador">Hola Mundo!</p>

En el ejemplo podemos apreciar, no sólo como podemos asignar varios atributos a una etiqueta, sino que además podemos asignarle un identificador único y personalizado a la etiqueta con el atributo «id«.

Debemos recordar que los atributos no pueden repetirse dentro de la misma etiqueta ya que entrarían en conflicto y el navegador no sabría cual de ellos tiene la prioridad.

Escribiendo HTML

Igual que los Escritores o Poetas escriben, novelas o poesías, cuando escribes HTML estas haciendo la labor de Programador y estas escribiendo el código fuente.

Para escribir este código fuente necesitamos tener las herramientas adecuadas, en nuestro caso necesitamos de un editor de texto plano o entorno de desarrollo, donde poder escribir nuestros archivos HTML.

Texto plano es un texto escrito sin ningún tipo de adorno visual como negritas, tamaños o tipos de fuente, etc. Será de esta forma en la que redactemos nuestro texto con lenguaje HTML para posteriormente guardarlo agregando al final del nombre de archivo la extensión .html, el cual se podrá abrir directamente con nuestro navegador web.

Podremos usar el bloc de notas de Windows o Text Edit de Mac OS, pero no podremos usar Microsoft Word o similares, ya que estos manejan el contenido partiendo de un formato el cual no es válido para el HTML. Aunque existen formas de adaptar estos programas para trabajar con código, no es lo más recomendado y será mejor que comiences usando las herramientas adecuadas.

Para seguir este manual te recomendamos usar los siguientes:

Sublime Text, visualmente sencillo de comprender y de ponerse a trabajar con el, el pero es que cada unos minutos de uso te aparecerá un mensaje para que compres una licencia del mismo, basta con cancelar y seguir trabajando. También tienes la opción de comprarlo.

Visual Studio Code, es sin duda alguna «la herramienta» indispensable de todo programador, es totalmente gratuita, en constante mejora, además podemos añadirle mas funcionalidad gracias a sus miles de extensiones. Inicialmente puede resultar un poco mas complicada de entender pero vale la pena aprender a usarla.

Navegadores

Dado que vamos a programar páginas web, necesitaremos tener instalados varios navegadores para verificar en cada uno de ellos los resultados de nuestro código, además de confirmar que se vean de la misma manera, ya que no podemos adivinar con que navegador se conectarán los visitantes de nuestra página web.

Lo ideal es tener instalados, los tres navegadores mas usados, siendo el primero de ellos, el que mas nos conviene por las herramientas y extensiones para desarrolladores de las que dispone:

Google Chrome, el navegador mas usado actualmente en todo el mundo por todo tipo de usuarios.

Mozilla Firefox, aunque actualmente se trata del segundo navegador mas usado, con miles de extensiones y herramientas para desarrolladores.

Safari, si tu proyecto va a estar enfocado hacia el publico de la manzana, debes tener este navegador mas en cuenta de lo habitual al realizar tus pruebas, ya que viene de serie instalado en los equipos de Apple.