Cargando

Ir a contenido


 


Manipulación de texto con HTML5

En este tutorial veremos cómo manipular el texto en un documento HTML, es muy importante saber los elementos que podemos modificar y la forma en que podemos tratarlos para lograr documentos sólidos y que cumplan con los estándares.


Escrito por el jul 11 2014 11:53 html5


Creación de Hipervínculos


Los hipervínculos son elementos básicos muy importantes dentro de HTML ya que nos permite enlazar los diferentes documentos y lograr la navegación que nuestra información requiere, para utilizarlos tenemos el elemento <a> el cual posee los siguientes atributos:

  • href: Especifica la dirección o URL del recurso o elemento al que queremos enlazar.
  • hreflang: Nos deja determinar el idioma del recurso enlazado.
  • media: determina el dispositivo al cual está dirigido el contenido enlazando, esta propiedad es nativa del HTML5.
  • rel: Establece el tipo de relación que se tiene con el documento enlazado.
  • target: Indica el objetivo en el cual el contenido debe ser mostrado.
  • type: Especifica el MIME del recurso enlazado como por ejemplo: image/gif o text/html.


Crear un Hipervínculo externo


Para crear un hipervínculo que nos lleve a un recurso externo en el atributo href debemos iniciar el enlace con http:// de esta forma cuando hagamos click sobre el enlace el navegador cargará la página solicitada.

<!DOCTYPE HTML>
<html>
<head>
<meta name="description" content="Ejemplo Hiperlink"/>
</head>
<body>
I like <a href="http://en.wikipedia.org/wiki/Apples">apples</a> and
<a href="http://en.wikipedia.org/wiki/Orange_(fruit)">oranges</a>.
</body>
</html>




Crear un Hipervínculo relativo


Si nuestro hipervínculo no inicia con http:// entonces el navegador lo interpreta buscando dentro de nuestro directorio local por un recurso que coincida con lo que hayamos enlazado.


<!DOCTYPE HTML>
<html>
<head>
<title>Relativo</title>

</head>
<body>
You can see other fruits I like <a href="fruitlist.html">here</a>.
</body>
</html>


Crear un hipervínculo interno


Existen ocasiones en las cuales necesitamos incorporar elementos que nos faciliten la navegación dentro de la misma página debido a lo extenso de la misma, para ello podemos utilizar enlaces internos, para lograr esto nos valdremos del atributo id de los tags de forma que al hacer click sobre el hipervínculo nos ubique el tag con el id referenciado, en caso que no exista un id que coincida el navegador deberá buscar el atributo name que coincida.

<!DOCTYPE HTML>
<html>
 <head>
 <title>Interno</title>
 </head>
 <body>
  Enlace interno <a href="#interno">Click</a>.
 <p id="interno">
 Aquí el contenido interno
 </p>
</body>
</html>

El atributo target


Este atributo nos permite elegir dónde vamos a mostrar el recurso enlazado, por defecto al hacer click veremos el contenido en la ventana activa, sin embargo no siempre queremos este comportamiento, veamos las opciones disponibles:
  • _blank: Especifica que el nuevo documento abra en una nueva ventana o pestaña.
  • _parent: Abre el documento en la ventana padre.
  • _self: Abre el documento en la ventana actual, este es el comportamiento por defecto.
  • _top: Abre el documento en una ventana completa independientemente de los frames que puedan existir.
  • <frame>: Abre el nuevo documento en el frame indicado.

<!DOCTYPE HTML>
<html>
<head>
<meta name="description" content="Ejemplo Hiperlink"/>
</head>
<body>
I like <a href="[url="http://en.wikipedia.org/wiki/Apples"]http://en.wikipedia.org/wiki/Apples[/url]" target = “_blank”>apples</a> and
<a href="[url="http://en.wikipedia.org/wiki/Orange_(fruit"]http://en.wikipedia.org/wiki/Orange_(fruit[/url])" target = “_self”>oranges</a>.
</body>
</html>


Con lo que pudimos ver en este tutorial ya podemos generar diferentes tipos de hipervínculos que nos permitirán tener un control mayor sobre nuestra página y poder construir la navegación adecuada al estándar HTML5.
¿Te ha gustado y ayudado este Tutorial?
Puedes premiar al autor pulsando este botón para darle un punto positivo
  • -
  • 0
-
VOTA
5
0%
4
0%
3
0%
2
0%
1
0%

  Información

  •   Publicado jul 11 2014 11:53
  •   Visitas 877
  •   Nivel
    Profesional



Tutoriales Relacionados


Sin comentarios, sé el primero!

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!
Demuestra que eres experto!
  ESCRIBIR TUTORIAL
Suscribirse