Anteriortmente, en el artículo Introducción fundamentos web [HTML, CSS y JS] + Presentación de HTML básico ya empecemos a trabajar con alguna etiqueta de HTML.

Haciendo repaso, como ya vimos, la gran mayoría de las etiquetas que vimos y que veremos se ubicarán en el body (el cuerpo) de nuestro documento HTML. Aunque existen muchos TAGS de HTML, en este artículo, vamos a analizar solamente una selección de etiquetas básicas, las elementales que tenemos que conocer si o si y su funcionamiento. Si queremos profundizar más las etiquetas HTML, podemos visitar webs como la de w3schools.

¡Si os parece, comenzamos!

TAGs HTML básicas que son imprescindibles de conocer

<!– Comentario –> → Nos permite escribir comentarios para ayudar a documentar el código fuente HTML. Hay que destacar que los comentarios HTML no se muestran en el navegador.

Vamos a ver un ejemplo:

Si abrimos el documento junto al inspector de navegación (con F12 desde Chrome). El resultado será el siguiente:

Podemos observar que los comentarios no se muestran por pantalla, ya que, como acabamos de explicar los comentarios no se renderizan (se muestran) en el navegador. Cuando el navegador llega a uno de lo salta por tanto no los imprimirá en el documento HTML.

<h1> a <h6> → Define los encabezados (también conocidos bajo el nombre de títulos, son lo mismo) de nuestra web. Van desde el 1 (el más grande e importante) hasta el 6 (el más pequeño e insignificante). Y por defecto tienen un tamaño de fuente mayor que el resto del texto con el fin de diferenciarlo. Son muy importante para el SEO (posicionamiento en los buscadores).

Vamos a ver un ejemplo:

Si abrimos el documento junto al inspector de navegación (con F12 desde Chrome). El resultado será el siguiente:

<p> → la etiqueta <p> define un párrafo. Los navegadores añaden una línea en blanco antes y después de cada elemento <p>

Vamos a ver un ejemplo:

Si abrimos el documento junto al inspector de navegación (con F12 desde Chrome). El resultado será el siguiente:

<a> → la etiqueta <a> define un hipervinculos (hypertext), que se utiliza para vincular (comunicar) una página web hacía otra (página, direcciones de correo, o cualquier otra URL). El significado de la etiqueta a es Anchor (significa ancla). El atributo (metadato) href nos permitirá añadir la ruta de destino. Esta ruta de destino puede apuntar hacía un documento o fichero de internet o bien otro documento/fichero situado en nuestro equipo (local).

Vamos a ver un ejemplo de ambas:

Para ello, es necesario crear dentro del directorio del proyecto (donde tenemos el documento index.html) otro documento HTML llamado por ejemplo page2.html:

Si abrimos el documento junto al inspector de navegación (con F12 desde Chrome). El resultado será el siguiente:

Si ahora clicamos encima de los enlaces, podremos ir a Google (internet) y además podremos ir a nuestra page2.html (local).

<img> → La etiqueta <img> se utiliza para incrustar una imagen en una página HTML. El tag <img> tiene dos atributos obligatorios:

  • src: especifica la ruta donde está la imagen IMPORTANTE NO OLVIDARSE LA EXTENSIÓN (por ejemplo .png o .jpg). Esta ruta puede apuntar hacía:
    • Una imagen ubicada en local
    • Una imagen enlazada de internet
  • alt: alt de alternativo, especifica un texto alternativo para la imagen, que se mostrará ante el hipotético caso de que por el motivo que fuera la imagen no se pudiera mostrar.

Vamos a ver un ejemplo. Para ello, vamos a añadir la siguiente imagen con «HTML5 is strong» dentro del directorio del proyecto sobre el que tenemos nuestros documentos HTML:

El resultado del documento HTML, será:

Si abrimos el documento junto al inspector de navegación (con F12 desde Chrome). El resultado será el siguiente:

Ahora vamos a modificar la ruta de la imagen hacía otra enlazada desde internet. Para ello, vamos a ir a Google y buscamos HTML5, una vez dentro, vamos al apartado de imágenes y hacemos clic sobre cualquiera de las imágenes:

Una vez en la imagen, hacemos clic en copia dirección de imagen:

Nos dará una url que apunta a esa imagen: https://programacion.net/files/article/20160306020314_html5.jpg 

Si la pegamos en la carpeta src de una etiqueta de <img> el resultado será:

Podemos ver que la imagen sobrepasa los margenes naturales de la pantalla esto es debido a sus dimensiones. Aunque esto se puede controlar mediante HTML, no lo haremos por HTML, ya que lo correcto sería hacerlo con CSS, pero eso lo veremos más adelante.

<ul> → La etiqueta <ul> de «unordered list» = lista no ordenada, nos creará una lista no ordenada. Los elementos <li> serán los items (elementos) de la lista.

Vamos a ver un ejemplo:

Si abrimos el documento junto al inspector de navegación (con F12 desde Chrome). El resultado será el siguiente:

<ol> → La etiqueta <ol> de «ordered list» = lista ordenada, nos creará una lista ordenada. Los elementos <li> serán los elementos (items) de la lista.

Vamos a ver un ejemplo:

Si abrimos el documento junto al inspector de navegación (con F12 desde Chrome). El resultado será el siguiente:

Hay que matizar la importancia de utilizar las etiquetas para lo que son. Con ello, nos referimos a correctamente semánticamente hablando para que, tanto el navegador , como la araña que indexa las webs en Google (entre otras) interpreten de la mejor manera nuestro código.

Metodología de trabajo de muchas empresas

Es muy común que el diseñador gráfico, nos entregué una especie de plantilla sobre la que nosotros realizaremos el desarrollo. Esta plantilla o documento puede estar en distintos formatos entre ellos una imagen, un PDF, Photoshop, etc.

Práctica final

Vamos a realizar nuestro primer proyecto HTML basándonos en la metodología anterior. Reproduciendo una plantilla que nos ha podido facilitar el diseñador gráfico. Por lo que, vamos a hacer un ejercicio que podría ser una tarea real de un puesto de trabajo como Front End, en el que trataremos de reproducir lo mejor posible  la siguiente web:

Tips (consejos):

Fijate en todos los detalles, como por ejemplo que el título de la web también está modificado, que hay listas ordenadas y no ordenadas, etc.

  • Imágen: la imagén a utilizar tendrá un texto alternativo de «Full Stack» y  será:

  • URL del hipervinculo: http://javadesde0.com/introduccion-fundamentos-web-html-css-js-presentacion-de-html-basico/

Comparado el resultado VS el código de la web de ejemplo

El resultado tendría que ser algo similar a la siguiente web. Puede ser que por resoluciones se os vea más grande o más pequeña la imagen eso por el momento (hasta que toquemos CSS) no nos debe preocupar.

La solución tendría que ser algo similar a: https://davidbernalgonzalez.github.io/example01htlm/

Para ver y comparar vuestro código con el código de la solución como ya hemos analizado anteriormente, simplemente tendréis que entrar en el inspector de Chrome con F12.