Tutorial HTML5:12 los enlaces

Entrada más reciente Entrada antigua

Hola que tal en esta ocasión vamos a ver los enlaces los cuales todo mundo ya conoce así que vamos a ver cómo hacerlos

En el pasado hable sobre la maquetación pero eso lo dejare para tutoriales de CSS3 mas adelante


Hay diferentes tipos de enlaces y los que más se utilizan encontramos los siguientes:

 Enlaces externos

Estos enlaces son los que sirven para enlazar a otras páginas que por ejemplo nosotros enlazamos a Facebook

Y si vemos el código es el siguiente

 <a href="http://www.youtube.com/watch?v=ArhDEFgjvBU" title="titulo del enlace">da click aqui para ir a ver el video</a>

da click aqui para ir a ver el video

Es con la etiqueta

A: etiqueta que indica el comienzo de un enlace, tiene en este caso de enlace externo un atributo href

Otro tipo que tenemos

Enlace interno

En este caso se enlaza a una página misma de nuestro sitio y que es muy parecido a enlaces externos así que veamos un ejemplo

 <a href="2013/07/tutorial-html52-parte-formularios.html" title="titulo del enlace">tutorial de formularios parte 2</a>

tutorial de formularios parte 2

Tenemos también que en el href se puede hacer enlaces absolutos o relativos

Los relativos solo se pueden utilizar solo en enlaces internas ya que funcionan de la siguiente manera

Vamos a ver cómo funciona los dos el primero es un enlace relativo y el segundo enlaza lo mismo pero con
enlace absoluto

 <a href="2013/07/tutorial-html52-parte-formularios.html" title="titulo del enlace">tutorial de formularios parte 2</a>

 <a href="http://dequepuedopuedo.blogspot.mx/2013/07/tutorial-html52-parte-formularios.html" title="titulo del enlace">tutorial de formularios parte 2</a>

Los dos funcionan igual si es que se enlaza a un lugar interno de nuestro sitio

Es muy sencillo usarlas

Ahora hay un enlace muy distinto que enlaza a un lugar determinado del documento mismo si das clic en él se va a dirigir al enlace que donde está posicionado sin recargar la pagina

Así que mejor veamos un ejemplo

 <a href="#estoy_aqui" title="">click para ir</a>

 <a name='estoy_aqui'>ahora aqui</a>

click para ir









ahora aqui

Puedes ver cómo funciona hay otros enlaces en la cual se verá en otro tutorial y que sirven para enlazar documentos como CSS o javascript que van generalmente en la cabecera

Así que practica con todos estos tipos e intenta enlazar no solo paginas si no imágenes o cualquier otro archivo solo recuerda colocar la extensión de lo que

Enlazas (aunque a veces no es necesario)

Saludos y los veo en la próxima entrega