Curso HTML - Parte 03 - ENLACES

Los ENLACES son la esencia misma de la Web al permitir relacionar diferentes páginas entre sí y son la base del hipertexto. También llamados hiperenlaces, vínculos ó hipervínculos, y en inglés links ó hyperlinks. Veamos a continuación el vídeo sobre los Enlaces...
     
     

HTML: enlaces

      

Como ya dijimos anteriormente, los ENLACES son el elemento principal que confiere a la web su carácter de HIPERTEXTO. El Hipertexto se puede definir como un documentos digital que se puede leer de forma no secuencial y que está compuesto de:

• Nodos o Secciones: Partes del Hipertexto que contienen información accesible para el usuario.
• Enlaces, Hiperenlaces ó Hipervínculos: Uniones o vínculos que se establecen entre Nodos y facilitan la lectura secuencial o no secuencial por los Nodos del documento
• Anclajes o Marcadores: Son los puntos de activación de los Enlaces

     

ETIQUETA DE LOS ENLACES

     

     
TIPOS DE ENLACES

1. Enlaces Intradocumentales
• Cuando el enlace hace referencia a un punto determinado de la misma página que lo contiene
2. Enlaces Extradocumentales, que pueden ser a su vez de dos tipos:
• Cuando el enlace hace referencia a otra página .html
• Cuando el enlace hace referencia a un punto determinado de otra página .html

     
Veamos a continuación la síntexis particular de cada uno de los tipos de enlaces, comenzando por los Enlaces Intradocumentales, es decir, aquellos enlaces cuyo destino está en la misma página que contiene el enlace.
    

ENLACE: Con la etiqueta a se define el enlace y se emplea el atributo href para indicar el destino del enlace.
     
DESTINO (Anclaje o Marcador): Tradicionalmente se empleaba la etiqueta a con el atributo name para definir el destino del enlace pero ahora con HTML5 se emplea el atributo id que se puede definir en cualquier etiqueta de HTML, como en la imagen, que vemos que es utilizado con la etiqueta de encabezado principal h1 y con la etiqueta de párrafo p.

En una página web se pueden definir varios enlaces a un mismo destino pero no se pueden crear varios destinos con el mismo nombre.

IMPORTANTE: Recordad que el nombre del destino en el ENLACE va precedido del símbolo (#nombre), mientras que en el DESTINO no se pone (nombre).

     
     
Pasamoa ahora a ver la sintaxis de las dos variantes de Enlaces Extradocumentales, comenzando con el más sencillo, que es cuando el enlace se dirige a otro documento o página web...
     

ENLACE: Con la etiqueta a se define el enlace y se emplea el atributo href para indicar la URL de la página de destino del enlace.
     
U.R.L.: Uniform Resource Locator (Localizador Uniforme de Recursos). A través de las URLs localizamos los diferentes tipos de documentos en Internet. El formato básico de una URL es el siguiente: (aunque puede incluir otros datos)

esquema://máquina/directorio/archivo

     
     
Y por último vamos a ver la sintaxis de los Enlaces Extradocumentales en el caso en el que el enlace hace referencia a un punto determinado de otra página. En este tipo de enlaces se combinan los dos enlaces anteriores...
     

ENLACE: En el enlace se tiene que indicar tanto la URL del documento o página como el #nombre del punto determinado del documento. Todo ello como anteriormente a través del atributo href. 
     
DESTINO (Anclaje o Marcador): Igual que en los Enlaces Intradocumentales... Podemos utilizar la etiqueta a con el atributo name para definir el destino del enlace, lo cual está un poco obsoleto ya que ahora con HTML5 podemos emplear el atributo id que se puede definir en cualquier etiqueta de HTML.
    
      
El atributo TARGET
target es un atributo muy importante referente a los enlaces. Puede tomar dos valores: "_self" (el enlace se abrirá en la misma ventana del navegador donde nos encontramos) y "_blank" (determina que el enlace se abrirá en una ventana nueva del navegador). Esta es su sintaxis...
     

     
     
Bien, una vez realizado el recorrido por los distintos tipos de ENLACES en HTML, toca trasladar nuestros conocimientos a la práctica. Para ello utilizaremos nuestro Editor Web NOTEPAD++...
     

Pincha en la imagen para agrandar y ver el código

En la página de práctica que hemos escrito con nuestro editor web Notepad++, llamada enlaces.html, hemos utilizado parte de las etiquetas vistas hasta ahora en el curso, que dan lugar a los siguientes elementos:

• Un encabezado de primer nivel (h1)
• Una lista no ordenada (ul) compuesta de 4 elementos que incluyen 4 enlaces extradocumentales a diferentes páginas web
• Un encabezado de segundo nivel (h2)
• Un párrafo (p) de texto que incluye 4 enlaces extradocumentales: el primero de ellos a una página web y los tres siguientes a puntos determinados de páginas webs
• A todos los enlaces (a) les hemos incorporado el atributo target con el valor "_blank" para que se abran en una nueva ventana del navegador

     

Vista previa en el navegador Google Chrome de la página enlaces.html escrita en el editor web Notepad++

     

Como véis en la vista previa del navegador, todos los enlaces aparecen subrayados y con las letras en color azul. Una vez que picamos en un enlace, éste cambia de color, pasando a morado, lo que significa que ese enlace o vínculo ya lo hemos visitado.

     

CONSEJOS A LA HORA DE CREAR UN ENLACE

• Mayúsculas y minúsculas. Aconsejable siempre escribir los nombres de los ficheros en minúsculas
• Caracteres extraños. Utiliza sólo las letras del alfabeto inglés, los números y los caracteres - y _ en los nombres de los ficheros y directorios, y tampoco dejes espacios en blanco en los mismos
• Rutas físicas. Asegúrate que las rutas que escribes en los enlaces NO sean rutas físicas de tu ordenador porque al publicar la página en un servidor web el enlace no funcionará

     

Fin Curso HTML - Parte 3 - ENLACES

Este curso es un resumen personalizado del Curso de Introducción al Desarrollo Web: HTML y CSS de la plataforma de formación Google Actívate, al que podrás acceder desde el siguiente enlace si es que quieres realizarlo completo y así conseguir la certificación oficial de Google. Espero que os sirva de ayuda...