Consulta en nuestra Biblioteca HTML, como es el código de enlaces de texto, imágenes, botones, formularios, etc. Un recordatorio para que puedas consultar siempre que lo desees.
SINTAXIS. Enlace de texto simple
<a href="url">texto del enlace</a>El atributo más importante del elemento <a> es el atributo href, que indica el destino del enlace.
El texto del enlace es la parte que será visible para el lector.
Al hacer clic en el texto del enlace, el lector será redirigido a la dirección URL especificada.
Ejemplo
En este ejemplo puedes ver un enlace creado que dirige a Doodom.com:
<a href="https://doodom.com/">¡Visita Doodom.com!</a>Enlaces HTML. El Atributo Target
De manera predeterminada, la página vinculada se mostrará en la ventana actual del navegador. Para cambiar esto, debe especificar otro destino para el enlace.
El atributo target especifica dónde abrir el documento vinculado.
El atributo target puede tener uno de los siguientes valores:
_self: predeterminado. Abre el documento en la misma ventana o pestaña en la que se hizo clic.
_blank: abre el documento en una nueva ventana o pestaña.
_parent: abre el documento en el marco principal.
_top: abre el documento en el cuerpo completo de la ventana.
Ejemplo
Utilice target=»_blank» para abrir el documento vinculado en una nueva ventana o pestaña del navegador:
<a href="https://doodom.com/" target="_blank">¡Visita Doodom!</a>URL absolutas frente a URL relativas
Ambos ejemplos anteriores utilizan una URL absoluta (una dirección web completa) en el atributo href.
Un enlace local (un enlace a una página dentro del mismo sitio web) se especifica con una URL relativa.
<h2>Absolute URLs</h2>
<p><a href="https://www.doodom.com/">DOODOM</a></p>
<p><a href="https://www.google.com/">Google</a></p>
<h2>Relative URLs</h2>
<p><a href="html_imagenes.asp">HTML Imágenes</a></p>
<p><a href="/css/default.asp">CSS Tutorial</a></p>Enlaces HTML: utilizar una imagen como enlace
Para utilizar una imagen como enlace, simplemente coloque la etiqueta<img> dentro de la etiqueta <a> :
<a href="https://doodom.com/robot.gif">
<img src="robot.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>Enlace a una dirección de correo electrónico
Use mailto: dentro del atributo href para crear un enlace que abra el programa de correo electrónico del usuario (para permitirle enviar un nuevo correo electrónico):
<a href="mailto:contacto@doodom.com">Enviar email</a>Botón como enlace
Para utilizar un botón HTML como enlace, debe agregar código JavaScript.
JavaScript le permite especificar qué sucede en determinados eventos, como cuando se hace clic en un botón. Veamos dos ejemplos:
<input type="button" onclick="location.href='http://doodom.com';" value="Ir a Doodom" />También puedes optar por utilizar una biblioteca CSS como Bootstrap
<a class="btn btn-primary" href="https://doodom.com/biblioteca-html">Biblioteca HTML</a> Títulos de enlaces
El atributo de title especifica información adicional sobre un elemento. La información se muestra generalmente como un texto de información sobre herramientas cuando el mouse se mueve sobre el elemento.
<a href="https://doodom.com/blog" title="Ir a la página web Blog de DooDom">Visite nuestro Blog de noticias</a>URLs Absoluta y Relativa
El siguiente ejemplo utiliza una URL Absoluta para vincular a una página web:
<a href="https://doodom.com/biblioteca-HTML">Biblioteca HTML</a>El siguiente ejemplo de URL Relativa se vincula a una página ubicada en la carpeta html del sitio web actual:
<a href="/html/biblioteca">Biblioteca HTML</a>Colores de los enlaces HTML
De forma predeterminada, un enlace aparecerá de esta forma (en todos los navegadores):
- Un enlace no visitado aparece subrayado y en color azul
- Un enlace visitado aparece subrayado y en color violeta
- Un enlace activo aparece subrayado y en rojo
Puede cambiar los colores del estado del enlace mediante CSS:
Ejemplo
En este ejemplo, un enlace no visitado aparecerá en color verde sin subrayado. Un enlace visitado aparecerá en color rosa sin subrayado. Un enlace activo aparecerá en color amarillo y subrayado.
Además, al pasar el ratón sobre un enlace (a:over), se volverá rojo y subrayado:
<!DOCTYPE html>
<html>
<head>
<style>
a:link {
color: green;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: gray;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: red;
background-color: transparent;
text-decoration: underline;
}
a:active {
color: blue;
background-color: transparent;
text-decoration: underline;
}
</style>
</head>
<body>
<a href="https://doodom.com/dominios" target="_blank">Dominios DooDom</a>
</body>
</html>Botones de enlace
Un enlace también puede tener el estilo de un botón mediante CSS:
<!DOCTYPE html>
<html>
<head>
<style>
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 15px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: red;
}
</style>
</head>
<body>
<center>
<h2>Boton Color Enlace</h2>
<p>Este es un estilo de Boton con enlace en color</p>
<a href="https://doodom.com" target="_blank">Este es el Boton de enlace a DooDom</a>
</center>
</body>
</html>IMÁGENES HTML
Las imágenes pueden mejorar el diseño y la apariencia de una página web.
Ejemplo:
<img src="lago-doodom.png" alt="Logotipo DooDom">Tamaño de la imagen: ancho y alto
Puedes utilizar el atributo style para especificar el ancho y la altura de una imagen:
<img src="lago-doodom.png" alt="Logotipo DooDom" style="width:500px;height:600px;>Imagen como enlace
Para utilizar una imagen como enlace, coloque la etiqueta <img> dentro de la etiqueta <a> :
<a href="https://doodom.com">
<img src="lago-doodom.png" alt="Logotipo DooDom" style="width:42px;height:42px;">
</a>Imagen flotante
Utilice la propiedad flotante CSS para que la imagen flote hacia la derecha o hacia la izquierda de un texto:
<p><img src="lago-doodom.png" alt="Logotipo DooDom" style="float:right;width:42px;height:42px;">
La imagen flotará a la derecha del texto.</p>
<p><img src="logo-doodom" alt="Logotipo DooDom" style="float:left;width:42px;height:42px;">
La imagen flotará a la izquierda del texto.</p>Cómo agregar un favicon en HTML
Puedes usar cualquier imagen que te guste como favicon. También puedes crear tu propio favicon en sitios como https://www.favicon.cc.
Para agregar un favicon a su sitio web, guarde la imagen de su favicon en el directorio raíz de su servidor web o cree una carpeta en el directorio raíz llamada imagenesy guarde la imagen de su favicon en esta carpeta. Un nombre común para una imagen de favicon es «favicon.ico».
A continuación, agregue un elemento <link> a su archivo «index.html», después del elemento <title> , de la siguiente manera:
<!DOCTYPE html>
<html>
<head>
<title>Titulo de la Pagina</title>
<link rel="icon" type="image/x-icon" href="/imagenes/favicon.ico">
</head>
<body>
<h1>Esto es un encabezado.</h1>
<p>Esto es un párrafo.</p>
</body>
</html>Código <iframe>
<iframe
src="https://doodom.com/tierra-en-orbita/"
title="iframe Planeta Tierra"
width="800"
height="900">
<p>Tu navegador no soporta iframes.</p>
</iframe>