¿Cómo especificar la relación entre el documento actual y la URL de destino en HTML5?

Especificamos la relación entre el documento actual y la URL de destino mediante una etiqueta <link> en HTML. Una etiqueta de enlace se utiliza para definir un enlace entre un documento y un recurso externo. Se usa solo cuando está presente el atributo href.

Acercarse:

  • Para especificar la relación entre el documento actual y el vinculado, use el atributo rel

Valores de atributos:

  • alternativo: Especifica el enlace alternativo del documento (es decir, imprimir página, traducir o duplicar).
  • autor: Define autor del enlace
  • dns-prefetch: especifica que el navegador debe realizar de forma preventiva la resolución de DNS para el origen del recurso de destino
  • ayuda: Especifica un enlace a un documento de ayuda. Ejemplo: <enlace rel=”ayuda” href=”/ayuda/”>
  • icon: Especifica el icono de importación en un documento dado
  • licencia: especifica un enlace a la información de derechos de autor del documento
  • siguiente: proporciona el enlace del siguiente documento en serie
  • pingback: Especifica la dirección del servicio de pingback
  • preconexión: especifica que el destino debe ser de forma preventiva al recurso de origen
  • prefetch: especifica que el documento de destino debe almacenarse en caché.
  • precarga: especifica que el navegador debe buscar y almacenar en caché de forma preventiva
  • prerender: especifica que el navegador debe cargar
  • prev: Especifica el documento anterior en una selección
  • search: Especifica la herramienta de búsqueda del documento.
  • stylesheet: Importa una hoja de estilo

Sintaxis:

 <link rel="stylesheet" type="text/css" href="styles.css">

 Ejemplo 1: 

HTML

<!DOCTYPE html>
<html>
<head>    
      
    <link rel="stylesheet"
        type="text/css"
        href="styles.css">
</head>
  
<body>
  
    <h1>GeeksforGeeks</h1>
    <h2>How to specify the relationship between the current document
       and the target URL in HTML5?</h2>
</body>
  
</html>

Código CSS: El siguiente es el contenido del código «styles.css» utilizado en el código HTML anterior.

h1 , h2 
{
   color:green;
   text-align: center;
   font-style: italic;
   font-weight: bold;
}

Producción:

documento de enlace

Ejemplo 2:

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet"
        type="text/css"
        href="index_screen.css"> 
  
    <link rel="stylesheet"
        type="text/css"
        href="index_print.css"> 
</head> 
  
<body> 
    <center> 
        <h1>GeeksforGeeks</h1> 
        <p><a href="https://ide.geeksforgeeks.org/tryit.php"
        target="_blank"> 
    Click here 
    </a> 
    </center> 
</body> 
  
</html>                    

Producción:

Publicación traducida automáticamente

Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *