Bueno, los enlaces que fuimos viendo durante las secciones anteriores, son los más utilizados por las páginas web; sin embargo, aún quedan más enlaces por describir en lo que al desarrollo web refiere.
Pensemos que los enlaces creados con la etiqueta <a> son los que permiten enlazar cualquier tipo de recurso desde cualquier página. Pues, dicha característica es la más importante para el usuario que quiere activar la carga de ciertos recursos. Es decir, el navegador no carga ningún recurso enlazado con la etiqueta <a> a menos que el usuario se lo indique haciendo clic dentro del propio enlace.
— Pero, cómo dijimos, si hay recursos que deben cargarse de forma manual; ¿quizás existan recursos que se ejecuten solos?. ¡Bueno, la respuesta es que si!. Pues, además de estos enlaces que vimos, las páginas HTML tienen otro tipo de enlaces que se cargan automáticamente.
¿Recursos automáticos o manuales?
Para comprender este concepto, pensemos en lo siguiente, imaginemos una página HTML que utiliza archivos CSS para los estilos de sus contenidos; y que para cargar dichos diseños de estilo, se tuviera que activar manualmente, eso no sería nada cómodo para el usuario.
Por eso, no tiene sentido cargar todos los recursos de manera manual o automática. Hay cosas que se deben cargar solas, y otras que se deben ejecutar automáticamente; cómo los CSS, u otros archivos JavaScript. Esto es así hasta tal punto, que la mayoría de los sitios son JavaScript dependiente, y no tendría sentido la carga manual de estos.
Frente a esa necesidad, el lenguaje HTML, en sus primeras versiones, se decidió a crear otras etiquetas que satisfagan dicha necesidad. Las cuales, son solucionadas gracias a los <script> y <link>; los cuales se usan para enlazar recursos que se deben cargar automáticamente.
Entonces, cuando el navegador encuentra alguna de estas dos etiquetas, descarga los recursos enlazados y los aplica automáticamente al propio documento HTML.
¿Qué son los Scripts en HTML?
— Entonces, toca definir el concepto de Script. Este es un elemento HTML Script o llamado simplemente <script>, y se utiliza para insertar o hacer referencia a un recurso ejecutable dentro de un documento HTML o XHTML.
Los scripts sin atributo async o defer, así como las secuencias de comandos en línea, son interpretados y ejecutados inmediatamente, antes de que el navegador continúe procesando la página.
— Pero, ¿cómo empleamos estos recursos automáticos?. Bueno, acá llega la famosa etiqueta <script>; la cual, tiene dos modos de funcionamiento, ya que se emplea tanto para insertar un bloque de código JavaScript en la página como para enlazar un archivo JavaScript externo.
| Etiqueta | <script> |
|---|---|
| Atributos comunes | – |
| Atributos propios | src = "url": Indica la dirección del archivo que contiene el códigotype = "tipo_de_contenido": Permite “avisar” al navegador sobre el tipo de código que se incluye (normalmente JavaScript)defer = "defer": El código no va a modificar el contenido de la página webcharset = "tipo_de_charset" – Describe la codificación del código enlazado |
| Tipo de elemento | Bloque y en línea (también puede ser una etiqueta vacía) |
| Descripción | Se emplea para enlazar o definir un bloque de código (normalmente JavaScript) |
Aunque la etiqueta <script> permite enlazar código de varios lenguajes de programación, el uso habitual de <script> consiste en enlazar un archivo JavaScript externo:
Veamos la nomenclatura del Script en las diferentes versiones de HTML
<!-- HTML4 y (x)HTML -->
<script type="text/javascript" src="javascript.js"></script>
<!-- HTML5 -->
<script src="javascript.js"></script>
<head> <script type="text/javascript" src="http://www.ejemplo.com/js/inicializar.js"></script> </head>
El atributo type utilizado habitualmente para los archivos JavaScript es "text/javascript". El atributo src es equivalente al atributo href de los enlaces creados con la etiqueta <a>. La URL indicada en el atributo src puede ser absoluta o relativa y externa o interna.
Además de enlazar un archivo JavaScript externo, la misma etiqueta <script> también permite incluir en la página web un bloque de código JavaScript:
<html>
<head>
<script type="text/javascript">
//<![CDATA[
window.onload = function() { alert("La página se ha cargado completamente"); }
//]]>
</script>
</head>
<body>
...
</body>
</html>Cuando se incluye código JavaScript en la propia página XHTML, se debe insertar dentro de una sección especial llamada CDATA. Para ello, el código JavaScript se debe encerrar entre <![CDATA[ y ]]>.
Cuando el navegador encuentra una sección de este tipo, no procesa su contenido como si fuera XHTML y, por tanto, no tiene en cuenta los posibles errores de validación de XHTML.
De esta forma, se pueden construir páginas XHTML válidas y código JavaScript correcto. En los capítulos posteriores se profundiza en el concepto de validación de páginas XHTML.
Los caracteres // al comienzo y al final de la sección CDATA son necesarios para los navegadores que no son capaces de procesar correctamente estas secciones.
La etiqueta <script> (tanto cuando enlaza, como cuando incluye directamente el código) puede aparecer en cualquier parte del documento HTML, aunque normalmente se incluye dentro de la cabecera de la página (<head>...</head>).
¿Qué son los links en HTML?
La segunda etiqueta de XHTML para enlazar recursos es <link>, que permite enlazar y relacionar la página con otros recursos externos.
| Etiqueta | <link> |
|---|---|
| Atributos comunes | básicos, internacionalización y eventos |
| Atributos propios | Los siguientes con el mismo significado que para la etiqueta “a”: charset, href, hreflang, type, rel y rev media = "tipo_de_medio" – Indica el medio para el que debe aplicarse la relación |
| Tipo de elemento | Etiqueta vacía |
| Descripción | Se emplea para enlazar y establecer relaciones entre el documento y otros recursos |
Al contrario que <script>, la etiqueta <link> solamente se puede incluir dentro de la cabecera (Head) del documento. Se pueden añadir tantas etiquetas <link> como sean necesarias, pero siempre dentro de <head>...</head>.
El atributo media hace referencia al medio para el que es válida la relación con el recurso enlazado. Los medios disponibles también están estandarizados, siendo los más comunes screen para los contenidos mostrados en pantalla, print para las impresoras y handheld para los dispositivos móviles.
El uso habitual de la etiqueta <link> es el de enlazar las hojas de estilos CSS utilizadas por las páginas web:
<head> ... <link rel="stylesheet" type="text/css" href="/css/comun.css" /> </head>
En este caso, es habitual establecer los atributos rel y type para indicar el tipo de recurso enlazado y su relación con la página web. La URL del recurso enlazado se indica en el atributo href, que admite tanto URL absolutas como relativas.
