¿Qué es un enlace?
Es una conexión de un recurso web a otro. Un enlace tiene dos extremos, un ancla y una dirección. El enlace comienza en el ancla de «origen» y apunta al ancla de «destino», que puede ser cualquier recurso web, como una imagen, un videoclip, un fragmento de sonido, un programa, un documento HTML o un elemento dentro de un documento HTML. . Encontrará muchos sitios web o plataformas de redes sociales (como YouTube, Instagram) que vinculan una imagen a una URL o un texto a una URL, etc.
Básicamente, esto significa que al usar la etiqueta ‘a’, puede vincular 1 elemento del código a otro elemento que puede o no estar en su código.
Sintaxis de enlace HTML
Los enlaces se especifican en HTML usando la etiqueta «a».
Explicación de sintaxis:
href : The href attribute is used to specify the destination address of the link used. "href" stands for Hypertext reference. Text link : The text link is the visible part of the link. It is what the viewer clicks on.
Aporte :
html
<!DOCTYPE html> <html> <h3>Example Of Adding a link</h3> <body> <p>Click on the following link</p> <a href = "https://www.geeksforgeeks.org">GeeksforGeeks</a> </body> </html>
Producción :
Vínculos internos
Un enlace interno es un tipo de hipervínculo cuyo objetivo o destino es un recurso, como una imagen o un documento, en el mismo sitio web o dominio.
Aporte:
html
<!DOCTYPE html> <html> <h3>Internal Link And External Link Example</h3> <body> //internal link <p><a href="html_contribute.asp/">GeeksforGeeks Contribute </a> It is a link to the contribute page on GeeksforGeeks' website.</p> //external link <p><a href="https://www.geeksforgeeks.org">GeeksforGeek </a> It is a link to the GeeksforGeeks website on the World Wide Web.</p> </body> </html>
Producción :
Cambiar los colores de los enlaces en HTML
Diferentes tipos de enlaces aparecen en diferentes formatos, tales como:
- Un enlace no visitado aparece subrayado y de color azul de forma predeterminada.
- Un enlace visitado aparece subrayado y de color púrpura de forma predeterminada.
- Un enlace activo aparece subrayado y de color rojo de forma predeterminada.
La apariencia de los enlaces se puede cambiar usando CSS.
Aporte :
html
<!DOCTYPE html>
<html>
<head>
<style>
a:link {
color: red;
background-color: transparent;
}
a:visited {
color: green;
background-color: transparent;
}
a:hover {
color: blue;
background-color: transparent;
}
a:active {
color: yellow;
background-color: transparent;
}
</style>
</head>
<body>
<p>Changing the default colors of links</p>
<p>Visited Link</p>
<a href="https://www.geeksforgeeks.org">GeeksforGeeks</a>
<p>Link</p>
<a href="https://facebook.com">facebook</a>
<p>hovering effect</p>
<a href="https://www.geeksforgeeks.org">GeeksforGeeks</a>
</body>
</html>
Producción:
El atributo de destino en los enlaces
El atributo de destino se utiliza para especificar la ubicación donde se abre el documento vinculado. Las diversas opciones que se pueden utilizar en el atributo de destino se enumeran a continuación en la tabla:
Aporte:
html
<!DOCTYPE html> <html> <body> <h3>Various options available in the Target Attribute</h3> <p>If you set the target attribute to "_blank", the link will open in a new browser window or tab.</p> <a href="https://www.geeksforgeeks.org" target="_blank">GeeksforGeeks</a> <p>If you set the target attribute to "_self", the link will open in the same window or tab.</p> <a href="https://www.geeksforgeeks.org" target="_self">GeeksforGeeks</a> <p>If you set the target attribute to "_top", the link will open in the full body of the window.</p> <a href="https://www.geeksforgeeks.org" target="_top">GeeksforGeeks</a> <p>If you set the target attribute to "_parent", the link will open in the parent frame.</p> <a href="https://www.geeksforgeeks.org" target="_parent">GeeksforGeeks</a> </body> </html>
Producción:
Uso de la imagen como enlace en HTML
Se puede usar una imagen para crear un enlace a una URL específica. Cuando el espectador hace clic en el enlace, lo redirige a otra página.
El código es <a href=”url”>
<img src=”dirección del archivo (en el dispositivo o en la web)” alt=”_” style=”width:__ ; altura:__ ; borde:__”>
</a>
Nota: img src significa fuente de imagen (es decir, URL o dirección de archivo)
Aporte:
html
<!DOCTYPE html> <html> <body> <h3>Using Image as a link</h3> <p>Click on the image to visit GeeksforGeeks homepage.</p> <a href="https://www.geeksforgeeks.org"> <img src="gfg_200X200.jpeg" alt="GeeksforGeeks" style="width:80px;height:80px;border:0"> </a> </body> </html>
Producción:
Creación de un enlace de marcador para una página web
Un marcador es un enlace que se puede usar para saltar a una parte específica de una página web. Los marcadores son muy útiles si una página web es bastante larga.
Los pasos para crear un marcador son:
1. Usando el atributo id, cree un marcador.
2. Agregue la parte especificada de la página web al marcador.
Aporte :
html
<!DOCTYPE html> <html> <body> <p><a href="#T11">Jump to Topic 11</a></p> <p><a href="#T17">Jump to Topic 17</a></p> <p><a href="#T20">Jump to Topic 20</a></p> <h2>Topic 1</h2> <p>paragraph 1 .....</p> <h2>Topic 2</h2> <p>paragraph 1 .....</p> <h2>Topic 3</h2> <p>paragraph 1 .....</p> <h2>Topic 4</h2> <p>paragraph 1 .....</p> <h2>Topic 5</h2> <p>paragraph 1 .....</p> <h2>Topic 6</h2> <p>paragraph 1 .....</p> <h2>Topic 7</h2> <p>paragraph 1 .....</p> <h2>Topic 8</h2> <p>paragraph 1 .....</p> <h2>Topic 9</h2> <p>paragraph 1 .....</p> <h2>Topic 10</h2> <p>paragraph 1 .....</p> <h2 id="T11">Topic 11</h2> <p>paragraph 1 .....</p> <h2>Topic 12</h2> <p>paragraph 1 .....</p> <h2>Topic 13</h2> <p>paragraph 1 .....</p> <h2>Topic 14</h2> <p>paragraph 1 .....</p> <h2>Topic 15</h2> <p>paragraph 1 .....</p> <h2>Topic 16</h2> <p>paragraph 1 .....</p> <h2 id="T17">Topic 17</h2> <p>paragraph 1 .....</p> <h2>Topic 18</h2> <p>paragraph 1 .....</p> <h2>Topic 19</h2> <p>paragraph 1 .....</p> <h2 id="T20">Topic 20</h2> <p>paragraph 1 .....</p> </body> </html>
Producción:
Creación de un enlace de descarga en HTML
Se puede crear un enlace de texto de un archivo pdf, doc o zip para hacerlo descargable.
Aporte :
html
<!DOCTYPE html> <html> <h3>Creating a download link</h3> <body> <a href = "GeeksforGeeks | A computer science portal for geeks.pdf">Download PDF File</a> </body> </html>
Producción: :
Navegador compatible:
- Google Chrome
- Borde de Microsoft
- Firefox
- Ópera
- Safari
- Bravo
Publicación traducida automáticamente
Artículo escrito por Shubrodeep Banerjee y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA