Bien, ahora comenzamos a utilizar nuestro Visual Studio Code para comenzar la creación de links o enlaces. Por supuesto, iniciaremos con los enlaces más simples y sin atributos extra, y luego, conforme avancemos con las lecciones, iremos complicando un poco más las cosas.
Para empezar debemos preguntarnos: ¿cómo se crean los enlaces?
Bueno, los enlaces en HTML se crean mediante la etiqueta <a> (su nombre viene del inglés “anchor”, literalmente traducido como “ancla”). A continuación se muestra la definición simplificada de <a> y más adelante se muestra su definición completa:
| Etiqueta | <a> |
|---|---|
| Atributos comunes | básicos, internacionalización, eventos y foco |
| Atributos propios | name = "texto" – Permite nombrar al enlace para que se pueda acceder desde otros enlaces href = "url" – Indica la URL del recurso que se quiere enlazar |
| Tipo de elemento | En línea |
| Descripción | Se emplea para enlazar todo tipo de recursos web |
El atributo más importante de la etiqueta <a> es href, que se usa para indicar la URL a la que direcciona el enlace. Entonces, cuando el usuario hace clic sobre un enlace, el navegador lo transporta a la URL del recurso indicado mediante href.
Y cómo dato de color, quiero comentarles que href es un diminutivo de hypertext reference, que significa hipertexto de referencia; o si somos más semánticos y menos literales, podría interpretarse como enlace de referencia.
Las URL de los enlaces pueden ser absolutas y relativas, e internas y externas.
Con la definición antes expuesta, podemos deducir que para crear un enlace que nos direccione a la Home de este sitio web, solo tenemos que incluir lo siguiente en un documento HTML:
<a href="https://tupacbruch.com">Página principal de Tupac Bruch</a>
En este caso particular, tenemos primero la etiqueta <a> que indica que se trata de un enlace; luego, el atributo href indica una URL, un enlace te puede direccionar a cualquier tipo de recurso, siempre y cuando sea accesible con el navegador. Para exponerlo, veamos como el siguiente enlace direcciona a una imagen, que se mostrará en el navegador cuando el usuario haga clic sobre el enlace:
<a href="https://tupacbruch.com/fondo-homepage.jpg">Imagen de fondo de pantalla de la home page</a>
De esta misma forma, los enlaces también pueden enlazar otro tipo de recursos como documentos en formato PDF, Word, etc.
<a href="https://tupacbruch.com/informe-seo.pdf">Descargar informe SEO de errores [PDF]</a> <a href="https://tupacbruch.com/informe-seo.doc">Descargar informe SEO de errores [DOC]</a>
Un tip útil con los enlaces, es el uso de URL relativas para poder volver al inicio del sitio web desde cualquier página web interior; es la utilización de "/" cómo valor para el atributo de href:
<a href="/">Volver al inicio</a>
Como vimos, el enlace anterior utiliza una URL relativa con una ruta que apunta directamente a la raíz del servidor.
— Pero, ¿cómo lo interpreta el navegador?. Recordemos que el navegador transforma una URL relativa en una URL absoluta; para lograrlo, se añade el mismo protocolo y el mismo nombre de servidor de la página en la que se encuentra el enlace. El resultado, lo vimos en la lección anterior, y es que, siempre, se vuelve al inicio del sitio web, independientemente de la página en la que se incluya el enlace.
El otro atributo básico de la etiqueta <a> es name, que permite definir enlaces dentro de una misma página web. Si una página es muy larga, puede ser útil mostrar enlaces de tipo “Saltar hasta la segunda sección“, “Volver al principio de la página“, etc.
Este tipo de enlaces son especiales, ya que la URL de la página siempre es la misma para todas las secciones y, por tanto, debe añadirse otra parte a las URL para identificar cada sección.
<a name="primera_seccion"></a> <p>Hola, soy un párrafo random. Bla bla bla.</p> ... <a name="segunda_seccion"></a> <p>Hola, soy otro párrafo random. Bla bla bla.</p> ...
El atributo name permite crear “enlaces vacíos” que hacen referencia a secciones dentro de una misma página. Una vez definidos los “enlaces vacíos”, es posible crear un enlace que te direccione directamente a una sección concreta de una página. Esta dirección, podría funcionar cómo un salto de página.
Recordemos que en el ejemplo anterior utilizamos <a name="primera_seccion"></a>. Con esto, nombramos cómo “primera_seccion” al enlace interno. Entonces, vamos a darle una vuelta de rosca:
<!-- Enlace normal a la página --> <a href="https://tupacbruch.com/home.html">Enlace a la Home Page</a> <!-- Enlace directo a la segunda sección de la página --> <a href="https://tupacbruch.com/home.html#segunda_seccion">Enlace a la sección 2 de la Home Page</a>
Anatomía y sintaxis de estos enlaces
La sintaxis que se utiliza con estos enlaces es la misma que con los enlaces normales, salvo que se añade el símbolo # seguido del nombre de la sección a la que se direcciona. Cuando el usuario hace clic sobre uno de estos enlaces, el navegador accede a la página de la URL y baja directamente a la sección cuyo nombre se indica después del símbolo #.
También es posible usar este tipo de enlaces con URL relativas en una misma página. El siguiente ejemplo añade enlaces de tipo “Volver al inicio de la página” en varias secciones:
<a name="inicio"></a>
<p>Hola, soy un párrafo random. Bla bla bla.</p>
<a href="#inicio">Volver al inicio de la página</a>
...
<p>Hola, soy otro párrafo random. Bla bla bla.</p>
<a href="#inicio">Volver al inicio de la página</a>
...Los enlaces directos a secciones también funcionan con el atributo id de cualquier elemento. El siguiente ejemplo es equivalente al ejemplo anterior:
<h1 id="inicio">Título de la página</h1> <p>Hola, soy un párrafo random. Bla bla bla.</p> <a href="#inicio">Volver al inicio de la página</a> ... <p>Hola, soy otro párrafo random. Bla bla bla.</p> <a href="#inicio">Volver al inicio de la página</a> ...
El nombre de la sección que se indica después del símbolo # puede utilizar el valor de los atributos id de cualquier elemento. De hecho, se recomienda emplear los atributos id de los elementos ya existentes en la página en vez de crear “enlaces vacíos” de tipo <a name="nombre_seccion"></a>.
Ejercicio:
Nota: El enlace empleado para volver al blog es el siguiente: "https://tupacbruch.com/blog-feed/".
Y cómo detalle adicional, recordemos que, desde Visual Studio Code, tenemos que seleccionar el lenguaje en HTML y apretar el símbolo de exclamación para que nos genere automáticamente la estructura de nuestro documento.
Ahora sí, toca descubrir el siguiente código:
Respuesta:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi Sitio</title>
</head>
<body>
<h1>Título principal del Sitio</h1>
<p>Este es un párrafo introductorio</p>
<h2>Título secundario</h2>
<p>Primer párrafo del sitio, luego pondré otro con el atributo a href.</p>
<p>
<a href="https://tupacbruch.com/blog-feed/" title="Ir al blog">
Accede al blog para ver los últimos posteos.
</a>
</p>
</body>
</body>
</html>Ahora, cómo ejercicio complementario hacer lo mismo, pero con tres párrafos utilizando el mismo atributo href.
Resultado:
<!DOCTYPE html>
<head>
<title>Mi Sitio</title>
</head>
<body>
<h1>Título principal del Sitio</h1>
<p>Este es un párrafo introductorio</p>
<h2>Título secundario</h2>
<p>Primer párrafo del sitio, luego pondré otro con el atributo a href.</p>
<p>
<a href="https://tupacbruch.com/blog-feed/" title="Ir al blog">
Accede al blog para ver los últimos posteos.
</a>
</p>
<h2>Título secundario</h2>
<p>Primer párrafo del sitio, luego pondré otro con el atributo a href.</p>
<p>
<a href="https://tupacbruch.com/blog-feed/" title="Ir al blog">
Accede al blog para ver los últimos posteos.
</a>
</p>
<h2>Título secundario</h2>
<p>Primer párrafo del sitio, luego pondré otro con el atributo a href.</p>
<p>
<a href="https://tupacbruch.com/blog-feed/" title="Ir al blog">
Accede al blog para ver los últimos posteos.
</a>
</p>
</body>
</html>Estructura de archivos y directorios de un sitio web
Ahora que sabemos crear enlaces simples, vamos a darle una vuelta de rosca con unos conceptos, y luego nos mandaremos con otros ejercicios. Entonces, ahora, toca aprender sobre la estructura de directorios y archivos; veamos la siguiente imagen:
Ejercicio Complejo
Para hacer este ejercicio necesitaremos los archivos creados en la estructura mencionada.
Para ello, debemos crear una carpeta con el nombre que quisiéramos, en este caso, se llama "miprimersitio.com"; pero, pueden ponerle el nombre que quieran. Luego, buscaremos una imagen a modo de logo o favicon; y dos carpetas con los nombres de "proyectos" e "imágenes". Por último, tras hacer lo propio, tenemos que continuar con los siguientes pasos, que son propios del HTML:
1. Crear la siguiente página llamada indice.html que sirva como página principal del sitio. En este caso, el href es: "proyectos/indice1.html".
Este es el código:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Título del sitio</title>
</head>
<body>
<h1>Título principal</h1>
<p>Párrafo de introducción</p>
<h2>Título secundario</h2>
<p>Párrafo secundario</p>
<p><a href="proyectos/indice1.html" title="Ultimos proyectos del sitio">Acceder a los ultimos proyectos de Mi Sitio</a></p>
</body>
</html>2. Crear la página índice1.html del directorio de proyectos:
Este debería ser el resultado:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Título del sitio</title>
</head>
<body>
<p><a href="../indice.html" title="Página principal">Volver al home de la pagina principal</a></p>
<h1>Ultimos proyectos</h1>
<p>Párrafo introductorio.</p>
<h2>Proyecto 1</h2>
<p>Párrafo del proyecto 1.</p>
<p><a href="../imagenes/proyecto1.jpg" title="Imagen del Proyecto 1">Ver imagen del Proyecto 1</a></p>
<h2>Proyecto 2</h2>
<p>Párrafo del proyecto 2.</p>
<p><a href="../imagenes/proyecto2.jpg" title="Imagen del Proyecto 2">Ver imagen del Proyecto 2</a></p>
</body>
</html>— ¿Pudiste lograrlo?, caso contrario, aquí debajo tenés un enlace para realizar todas las consultas que necesites.
