LOS ENLACES (LINKS) EN EL LENGUAJE HTML
Los enlaces o hipervínculos son justamente la característica más
importante del lenguaje HTML. Un enlace es una conexión directa
entre un elemento del documento web (ya sea hipertexto, imágenes,
botones…) y:
-Otro documento HTML.
-Otro punto del mismo documento HTML (ancla o anchor)
-Otro recurso de Internet (por ejemplo un archivo PDF).
Se basan en la etiqueta <a>, todo aquel elemento de la web encerrado
entre esta etiqueta constituyen un enlace. Para indicar el recurso
enlazado se usa el atributo href="" con la URL del mismo que puede
ser:
Un recurso perteneciente a un dominio diferente que el documento:
Habrá que indicar la URL completa del recurso (incluido
el protocolo):
Pinche en la parte de abajo en "este"
Pinche aqui y veras como te llevara al enlace Ideal en la URL este
enlace para ver el diario Ideal
<a href="http://www.ideal.es">Este</a> enlace para ver
el diario Ideal.
Un recurso perteneciente al mismo dominio que el documento: Cuando
el enlace es a otro documento web dentro de nuestro propio dominio
bastará con indicar el nombre del recurso si ésta en la misma
carpeta:
Al pinchar veras como va al temario que ésta en el misma carpeta
<a href="temaprimero.html"> este
enlace para el tema 1
Pinche aquí y veras como te lleva al temario 1 en una carpeta
diferente este enlace para el tema 1
A otro punto del mismo documento (ancla, anchors o enlace interno):
Para crear un enlace dentro de nuestro mismo documento HTML
primero debemos de definir cada una de las posiciones o anclas
donde queremos enlazar. Los anclas se crean con el atributo name
seguido del nombre que queramos darle. Cuando queramos enlazarlos
basta con poner # seguida del nombre que le dimos al ancla.
Veámoslo en el siguiente ejemplo:
<html>
<body>
<a href="#primera">Pincha aquí para ir al primer párrafo</a>
<a href="#segunda">Pincha aquí para ir a la segundo párrafo</a>
<a href="#tercera">Pincha aquí para ir a la tercer párrafo</a>
<a name="primera"></a>
<h2>Sección primera del párrafo</h2>
<a name="segunda"></a>
<h2>Sección segunda del párrafo</h2>
<a name="tercera"></a>
<h2>Sección tercera del párrafo</h2>
</body>
</html>
Está etiquetas y atributos se muestra como aquí abajo.
Pinche aquí para ir a la primera sección
Pinche aquí para ir a la segunda sección
Pinche aquí para ir a la tercera sección
Sección primera
Contenido de la sección 1
Contenido de la sección 2
Sección segunda
Contenido de la sección 3
Sección tercera
También podemos acceder a las anclas de un documento desde otro,
por ejemplo si quisiéramos acceder desde otro documento a la
sección segunda del ejemplo anterior (supongamos que se guardó en
un fichero llamado "libro.html"):
Pinche aquí para ver <a href="libros.htm#segunda"> aquí para ver
la sección 2 de la otra web
Pinche aquí para ver aquí para ver
la sección 2 de la otra web.
Para cambiar la ventana donde se abrirá el enlace utilizaremos el
atributo target="" que puede tomar los siguientes valores:
- "_self" : Abrirá el enlace en el mismo frame o marco que lo
contenía (es el valor por defecto).
- "_blank": Fuerza al enlace a abrirse en una nueva ventana
(o pestaña) del navegador.
- "_parent": Abre el enlace en el conjunto de marcos (frameset)
padre del marco actual.
- "_top": Fuerza al enlace a abrirse en el 100% de la ventana del
navegador.
- "nombre_del_marco": Abre el enlace en el marco indicado.
Podemos crear imágenes que a la vez sean enlaces para ello bastará
con anidar la etiqueta <img> dentro de la etiqueta <a>:
Como veremos con este enlace <a href="http://www.google.es">
<img src="logo_google.jpg"/></a>
Para facilitar agilizar la carga de páginas en Internet se suelen
usar los thumbnails o miniaturas que son versiones reducidas de
ellas que permiten previsualizarlas y descargar la imagen entera
sólo en caso de estar interesados. Para crear este tipo de imágenes
existen multitud de programas, un ejemplo de ellos es "eXcale".
Aprende fácil y rápido con este blog aprenderás diferentes conceptos de varios programas como Blogger, WordPress, Microsoft Word, Balabolka, Openoffice etc...
MENU
-
RESUMEN DE HTML
- INTRUCIÓN A LAS HOJA DE ESTILOS
- ¿QUE ES HTML?
- FORMAS DE APLICAR ESTILOS
- EDITAR SALTOS DE LINIA Y CARACTERES ESPECIALES
- COMO DAR FORMATO AL TEXTO DE UNA WEB
- LOS COMENTARIOS EN HTML
- UNIDAD DE MEDIDAD EN HTML
- LINIAS HORIZONTALES EN HTML
- LAS IMÁGENES EN EL LENGUAJE HTML
- LOS ENLACES (LINKS) EN EL LENGUAJE HTML
- MAPAS EN EL LENGUAJE HTML
- LISTAS EN EL LENGUAJE HTML
- TABLAS EN EL LENGUAJE HTML
- ESTRUCTURA DE UN FORMULARIO EN HTML
- MARCOS EN EL LENGUAJE HTML
-
VIDIOSTUTORIALES1
- NOTEPAD ++
- ZARARADIO
- WORPRESS
- NERO 7.9.6.0 PARA CD
- ALLSHARE
- DREAMWEAVER CS5
- INTRODUCCIÓN AL TECLADO
- COMO HACER UN BUEN VIDIOTUTORIAL
- INTRODUCCIÓN Y CREACIÓN DE BLOGGER
- COMO CREAR UN SLIDER EN BLOGGER CREAR UN MENÚ DESPLEGABLE EN BLOGGER CREAR UN TSA EN BLOGGER GRATIS PRIMERA PARTTE 2019 CREAR UN TSA EN BLOGGER SEGUNDA PARTTE 2019 CREAR UN TSA EN BLOGGER TERCERA PARTTE 2019 CREAR UN TSA EN BLOGGER CUARTA PARTTE 2019 Como ser afiliados en Amazon facil y gratis 2019 Como crear ENLACES de AFILIADOS facil y rapido de AMAZON YouTube blogger web 2019 Como eliminar la tecnología de blogger y añadir tu nombre 2019
- BALABOLKA
- COMO BAJAR MÚSICA Y VIDIOS CHROME
- INSTALACIÓN OPENOFFICE
- THUNCABLE PRIMEROS PASOS COMO CONFIGURARLO
- COMO CREAR APLICACIÓN EL CATO 1 PARTE COMO CREAR APLICACIÓN EL CATO 2 PARTE
- Thunkable como crear un icono para tu aplicaciónThuncable como conectar con tu teléfono móvil por wifi
- Thuncable como instalar tu aplicación en el teléfono móvil
- Tutoriales Thunkable como copiar los bloques del código
- Thunkable como crear un proyecto nuevo y pantallas
- Thunkable pantalla de inicio de bienvenida
- Thunkable los botones en Thunkable su funcionamiento 2018
- WordPress Tutorial completo en español 2019 /01
- WordPress Tutorial completo en español 2019 /02
- WordPress Tutorial completo en español 2019 /03
- WordPress politicas de privacidad sin programa 2019
- WordPress configurar plugins Yoast SEO 2019
- WordPress como configurarlo con Search Console 2019
- WordPress como INSTALAR plugins ADSENSE gratis 2019
- WordPress como instalar GOOGLE ANALITYCS 2019
- WordPress INSTALAR el certificado SSL y activar HTPPS GRATIS 2019
- WordPress QUITAR los COMENTARIOS definitivo 2019
- WordPress CREAR tu DOMINO y HOSTING casi GRATIS 2019
- WorPress como hacer un LOGO GRATIS 2019
- WordPress TOP 10 de los MEJORES PLUGINS GRATIS 2019
- WordPress como QUITAR PIE de PAGNA ya CREADO 2019
- wordpress Como GREAR una CABECERA GRATIS con GIMP 2 2019
- Los gadget de amazon mas vendidos 2019
- 7 Gadgets sorprendentes que puedes comprar en Amazon 2019
- 8 Gadgets SORPRENDENTES PRODUCTOS para tu HOGAR en AMAZON 2019
- 6 Gadgets para tener tu hogar fresco y purificación 2019
- 7 gapget Amazon sosprendentes para tu hogar 2
- 7 gapget Amazon sosprendentes para tu hogar 3
- 7 gapget Amazon sosprendentes para tu hogar 4
- 7 gadget Amazon para hacer deporte en el hogar
- 7 gadget increíbles para tu coche 2019