Logo Studenta

Añadiendo vínculos en html

¡Este material tiene más páginas!

Vista previa del material en texto

Links 
vínculos/enlaces
Etiqueta para links externos
<a href=“https://www.w3schools.com”>
Web referencia
</a>
Ojo: poner la url completa
Etiqueta para links internos
Ojo: definir bien la ruta!!!
<a href=“practicas/practica2.html”>
Práctica 2
</a>
Link Para enviar e-mail 
<a href=“mailto:alguien@gmail.com”>
Enviar email
</a>
Link para marcar teléfono
<a href=“tel:7771234567”>
Teléfono 7771234567 márcanos..blabla
</a>
link de whatsapp
<a href=“https://wa.me/17771234567”>
Whatsapp
</a>
Link en una imagen (botón)
contacto
<a href=“contacto.html”>
<img src=“imagen-boton.jpg” alt=“contacto”>
</a>
Punto de salto interno
Para enviar al usuario a alguna parte dentro de una sección (por ejemplo si hizo scroll y que regrese hasta arriba). 
 
Paso 1. Poner un anclaje en alguna parte de la página:
Paso 2. Añadir un botón o enlace para indicar que se manda al anclaje.
 <h1 id=“top”>
Mi página
</h1>
<a href=“#top”>
<img src=“top.jpg”
alt=“ir arriba”>
</a>
atributos
	title=“texto”	Texto que se muestra cuando se pone el cursor encima
	target=“_blank” 	Abre el link en una ventana nueva
	target=“_self” 	Abre el link en la misma ventana (default)
	rel=“nofollow”	Pide a buscadores que no se muestre esa página
Ejercicio 1
Hacer 4 htmls: (inicio, contacto, nosotros, servicios)
En el html de inicio hacer una tabla con links a cada uno de tus htmls (como un menú):
	Inicio	Contacto	Nosotros	Servicios
3. En el html de contacto añadir 3 imágenes:
	a. Una imagen de teléfono con link para teléfono
	b. Una imagen de sobre con link para email
	c. Una imagen de whatsapp con link para whatsapp
Ejercicio 2
En la página de los patos poner una etiqueta de anclaje
Al final de la página poner un texto que diga “regesar al inicio” y que al darle click te regrese hasta arriba
recursos
https://www.w3schools.com

Otros materiales