CREAR UN ENLACE PARA QUE SE ABRA EN UNA NUEVA PESTAÑA
INTRODUCCIÓN
Hoy vamos a aprender a crear un enlace en HTML que se abra en una nueva pestaña.
Como seguramente ya sabréis —y si no, os lo digo yo—, un enlace normal en HTML tiene la siguiente estructura básica:
<a href="DIRECIÓNDELAPAGINA">TEXTO</a>
Ese enlace, de forma predeterminada, se abrirá en la misma pestaña en la que estéis.
Para cambiar esto y abrir el enlace en una nueva pestaña hay que incluir un target, que en HTML consistiría en añadir el comando target=»_blank» justo después de la URL (para ser exactos, después de las comillas inglesas y un espacio). Veamos:
2. CÓDIGO HTML PARA ABRIR UN ENLACE EN OTRA PESTAÑA
La estructura general para crear un enlace en HTML que se abra en una nueva pestaña sería la siguiente (en rojo las partes que debéis personalizar: la URL de destino y el texto visible que tendrá el enlace):
<a href="URL">TEXTO A MOSTRAR</a>
3. EJEMPLO DE CÓDIGO HTML PARA ABRIR UN ENLACE EN UNA NUEVA PESTAÑA
Para mostraros un ejemplo, voy a crear un enlace a la categoría donde tengo entradas similares a esta que estáis leyendo.
Esta sería mi línea en HTML:
<a href="https://www.youtube.com/channel/UCZO_Dr1Ny35fN6dz5uFTV3A">NO OLVIDES SUSCRIBIRTE</a>
EJEMPLO
Para ello, utiliza el tag target...
<a href="pagina.html" target="_blank">abrir en una nueva ventana o pestaña</a>
Puedes poner varios valores:
_blank Abre el documento vinculado en una nueva ventana o pestaña
_self Abre el documento vinculado en el mismo marco en el que se hizo clic (esto es predeterminado)
_parent Abre el documento vinculado en el marco principal
_top Abre el documento vinculado en el cuerpo completo de la ventana
framename Abre el documento vinculado en un marco con nombre
AQUI EL EJEMPLO
O
TAMBIEN PODEMOS CREAR UN ENLACE CON IMAGEN
<a href="LINK DE LA VENTANA A ABRIR" rel="nofollow" target="_blank"><img border="0" data-original-height="126" data-original-width="320" src="LINK DE LA IMAGEN "></a>
<a href="LINK DE LA VENTANA A ABRIR" target="_blank"><img border="0" data-original-height="219" data-original-width="840" height="103" src="LINK DE LA IMAGEN" width="400"></a>
