Retomamos el curso de HTML en su tercera lección. En ella vamos a profundizar un poco más en algunas etiquetas del lenguaje y en ciertas particularidades y características que tienen. Pero antes de comenzar, conviene que recuerdes que si le pides a tu navegador que muestre el contenido del sitio web que estás programando, lo hará sin ningún tipo de formateado (con la fuente, el tamaño de la misma y la alineación que tenga por defecto). Si quieres un determinado formateo o apariencia, tendrás que indicárselo mediante las correspondientes etiquetas.

La etiqueta <br>

Provoca un salto de línea, por lo que deberás colocarla entre dos textos que quieras separar con un salto de línea.

Una particularidad de esta etiqueta es que no requiere una etiqueta de cierre.

En un lugar de la Mancha <br> de cuyo nombre no quiero acordarme.
En un lugar de la Mancha
de cuyo nombre no quiero acordarme.

Es importante tener en cuenta que el navegador ignora todos los saltos de línea que hayas hecho recurriendo a la tecla ENTER. También ignora el doble espacio en blanco que dejes entre dos palabras. Si quieres este tipo de formateos, tendrás que recurrir al uso de las etiquetas.

El anidado de etiquetas

Una característica importante del leguaje HTML es que sus etiquetas pueden anidarse unas dentro de otras. Cuando así sea, deberás cerrarlas en una imagen reflejada (las cerrarás en orden inverso a como se abrieron).

<em>
     <strong>
        En un lugar de la Mancha <br> de cuyo nombre no quiero acordarme.
    </strong>
</em>

Dominar la técnica del anidado de etiquetas es fundamental, porque la mayoría de los errores que se cometen cuando se programa en HTML se deben a un cierre incorrecto de las etiquetas. También debes tener en cuenta que anidar dos etiquetas iguales no altera lo mostrado en el navegador. Verás exactamente lo mismo que si no hubiera repetición.

<b><b>Texto de ejemplo </b></b>
<b>Texto de ejemplo </b>

Atributos

Un atributo es un valor adicional que puedes dar a una etiqueta.

Hay atributos que son específicos para una determinada etiqueta, mientras que otros pueden usarse en un conjunto de ellas.

La sintaxis para cambiar el valor de un atributo es la siguiente:

Nombre_atributo = “valor”

El signo “=” asigna el nuevo valor al atributo. Ese nuevo valor se indicará entre comillas.

La etiqueta <a>

La etiqueta <a> se utiliza para crear enlaces en el sitio web que estés programando. Significa ancla y se denomina así porque su cometido no es enlazar a otros sitios web, sino vincular contenidos dentro de un documento específico. Permitirá que te muevas con facilidad entre las secciones de tu página web, especialmente si es extensa o se trata de un sitio web de una sola página.

Esta etiqueta le indica al navegador que se debe hacer clic en su contenido, aunque necesita un atributo que indique dónde debe saltar (a qué URL acceder) en el caso de que se produzca el clic. El atributo deberás ponerlo dentro de la etiqueta de apertura, separado de la “a” por un espacio en blanco, y tendrá la forma de “href = url”, donde “href” es el tipo de instrucción y “url” el valor dado.

<a href = “https://www.greenpeace.org/”> Pincha en este enlace </a>

Es posible indicar varios atributos dentro de una misma etiqueta. Así, en la etiqueta <a> puedes dar al atributo “target” el valor “_blank”, lo que hará que el sitio web vinculado al valor “url” se muestre en una pestaña distinta del navegador.

<a href = “https://www.greenpeace.org/” target = “_blank”>Clic aquí</a>

Es indiferente el orden en el que coloques los atributos de una etiqueta.

<a target = “_blank” href = “https://www.greenpeace.com/”>Clic aquí</a>

Un poco más adelante en nuestro curso te mostraré nuevos valores que se pueden dar al atributo “href” de la etiqueta <a>. De momento, conviene que te centres en la funcionalidad que acabamos de ver, que es la más utilizada en la mayoría de los casos.

Errores muy habituales

Si escribes mal tu código HTML no causarás problemas al navegador, aunque sí que obtendrás resultados no deseados en el formato de tu página web. Por tanto, es importante que no cometas una serie de errores que se dan con mucha frecuencia:

  • Si no cierras una etiqueta que requiere ser cerrada, tendrás resultados imprevistos, dependiendo del navegador o de la etiqueta de que se trate. Así, por ejemplo, si no cierras la etiqueta <em> el resto de la página se formateará en cursiva.
  • Una etiqueta de cierre sin la correspondiente etiqueta de apertura no produce ningún efecto de formateado, por lo que tendrás que cuidar mucho este aspecto.
  • Las etiquetas con errores de sintaxis suelen ser ignoradas por el navegador. Por eso es importante que vigiles dicha sintaxis.
  • Si la forma convencional de la etiqueta es incorrecta (por ejemplo: repetir el carácter “<”) el navegador interpretará la incorrección como parte del texto y la mostrará dentro de la página web. Debes tener en cuenta esto, si ves alteraciones en lo que querías mostrar en tu web.

Mayúsculas y minúsculas

HTML es un lenguaje case unsensitive, lo que significa que no distingue entre mayúsculas y minúsculas. Sin embargo, las URL de imágenes y otras referencias directas sí que hacen esa distinción, así que por convención, para conseguir que el código sea más legible, programaremos HTML principalmente con minúsculas.

Hasta aquí esta tercera lección del curso de HTML. En ella te he mostrado dos nuevas etiquetas y también has podido comprobar qué son los atributos y cómo se les asigna un valor. Además, hemos dado un repaso a los principales errores que se suelen dar cuando programas con etiquetas.

Espero que te haya gustado. Me despido hasta la siguiente entrega, que será dentro de muy poco.

Deja un comentario