SlideShare una empresa de Scribd logo
1 de 10
Un hiperenlace, hipervínculo, o vínculo, no es más que un enlace, que al ser pulsado
lleva de una página o archivo a otra página o archivo.
Es posible asignar un vínculo a un texto, a una imagen, o a parte de una imagen.
Cuando creemos un enlace, lo que realmente haremos será crear una
etiqueta <a></a> que es la que en HTML se encarga de definir los enlaces. Esto
podrás observarlo en la barra de estado:
HIPERENLACEHIPERENLACE
Tipos de referencia
Existen diferentes clases de rutas de acceso a la hora de definir los vínculos. Estas
referencias no se limitan a los enlaces, se comportarán igual cuando indiquemos la
ubicación de una imagen, de un archivo Flash, de la hoja de estilo, etc.
 Referencia absoluta:
Conduce al sitio en el que se encuentra el documento utilizando la ruta completa del
archivo, incluyendo el protocolo http://.
Por ejemplo, http://www.une.edu.pe/
La referencia absoluta es independiente de la ubicación de la página que contiene el
enlace, y será válida siempre que no cambie la ubicación del archivo enlazado. Es la
opción obligatoria si pretendemos enlazar a archivos fuera de nuestro sitio (enlaces
externos).
Referencia relativa al documento (por defecto):
La ubicación del archivo enlazado se toma en relación con la ubicación del la
página. Es decir, partimos de la carpeta en la que se encuentra el documento.
Si queremos enlazar con una página o archivo dentro de la misma carpeta, no
tenemos más que utilizar su nombre. Por ejemplo, pagina2.htm.
Si está en una subcarpeta de la página actual, no tenemos más que indicar el
nombre de la carpeta antes del archivo, y separarlos por una barra (/). Por
ejemplo imagenes/miimagen.gif.
Si queremos referirnos a carpetas que están por encima del nivel donde nos
encontramos deberemos utilizar ../
 Referencia relativa al sitio:
Conduce a un documento situado dentro del mismo sitio que el documento actual. 
Tomando como origen la carpeta raíz del sitio.
Para indicar la ruta relativa al sitio, precedemos la ruta de enlace por la barra /.
En el ejemplo anterior si tuviésemos definido como sitio la 
carpeta http://www.misitio.com/, un enlace en cualquier página del sitio 
a http://www.misitio.com/pagina/secciones/seccion1.htmlse crearía 
como /pagina/secciones/seccion1.html.
Por tanto, podríamos poner ese vínculo en cualquier página del sitio y funcionaría 
independientemente de su ubicación.
Estos enlaces no funcionarán en el sitio local, a no ser que configuremos un servidor 
de pruebas como veremos más adelante, ya que Windows interpretará como raíz la 
raíz del disco duro.
Crear enlacesCrear enlaces
La forma más sencilla de crear un enlace es a través del inspector de propiedades. 
Para ello es necesario seleccionar el texto o el objeto que va a servir de enlace, y 
seguidamente establecer el Vínculo en el inspector HTML.
Por ejemplo, en la siguiente imagen hay un enlace a www.aulaclic.es, que al ser un 
archivo externo es de referencia absoluta, por eso contiene http://
Es posible crear también vínculos vacíos, que pueden ser útiles cuando se 
utilizan comportamientos, etc. Para ello es necesario escribir 
en Vínculo únicamente una almohadilla #. Veremos su utilidad más adelante.
Otra forma de crear un enlace es a través del menú Insertar, 
opción Hipervínculo.
Crear vínculos de esta forma es muy sencillo, sólo deberás rellenar los campos que 
explicaremos  a  continuación  y  el  enlace  se  colocará  en  el  lugar  en  el  que  estaba 
situado el cursor.
Texto:  es  el  texto  que  mostrará  el  enlace.  Si  teníamos  un  texto  seleccionado, 
aparecerá ahí.
Vínculo: es la página a la que irá redirigida el enlace, si se trata de un enlace externo 
deberás escribirla empezando siempre por http://. Haz clic sobre el icono de carpeta 
para  buscar  los  archivos  que  existan  dentro  del  sitio.  Por  defecto  Dreamweaver  te 
creará un enlace relativo al documento. Si quieres que los enlaces sean relativos al 
sitio visita este avanzado .
Destino: la ventana donde se abrirá la página,
este campo se explica en el siguiente apartado.
Título: se trata de la ayuda contextual del
vínculo, que aparecerá al mantener un
instante el cursor sobre el enlace.
Tecla de acceso: atributo que facilita la
accesibilidad a las páginas, habilita el acceso al
enlace mediante la pulsación de la
tecla Alt más la tecla de acceso indicada.
Índice de tabulador: Como habrás podido
observar puedes saltar a través de los enlaces
pulsando la tecla Tabulador. En este campo
podrás establecer un índice indicando la
prioridad del enlace y así configurar el modo
en el que actuará el Tabulador es sus
diferentes saltos. Por defecto, se tabularán por
orden de aparición.
Destino del enlace
El destino del enlace determina en qué ventana va a ser abierta la página vinculada,
puede variar dependiendo de si el documento está basado en marcos.
Puede especificarse en el inspector de propiedades HTML a través de Destino, o en la
ventana que aparece a través del menú Insertar, opción Hipervínculo.
blank: Abre el documento vinculado en una nueva ventana o pestaña del navegador.
parent: Abre el documento vinculado en la ventana del marco que contiene el vínculo
o en el conjunto de marcos padre. Tiene sentido si se emplean marcos.
self: Es la opción predeterminada, y la que se produce si no indicamos otra cosa. Abre
el documento vinculado en el mismo marco o ventana que el vínculo.
top: Abre el documento vinculado en la ventana completa del navegador. Tiene
sentido si se emplean marcos. No te preocupes si no te queda del todo claro para qué
sirve cada una de estas opciones de destino, ya que se volverán a ver en el tema
de Marcos.
http://marinvirtualtech.host22.com/

Más contenido relacionado

La actualidad más candente

Hipervinculos
HipervinculosHipervinculos
Hipervinculosdianaraba
 
Tema vinculo e hipervínculo
Tema vinculo e hipervínculoTema vinculo e hipervínculo
Tema vinculo e hipervínculoaracelyjil
 
Vínculos e Hipervinculos
Vínculos e HipervinculosVínculos e Hipervinculos
Vínculos e Hipervinculoslor73
 
Dreamweaver a lo ernesto
Dreamweaver a lo ernestoDreamweaver a lo ernesto
Dreamweaver a lo ernestoerjenate
 
mapa conceptual unidad 4
mapa conceptual unidad 4mapa conceptual unidad 4
mapa conceptual unidad 4Helman Pinto
 
Los hipervinculos
Los hipervinculosLos hipervinculos
Los hipervinculosklarisa24
 
Enlaces o hipervínculos en HTML
Enlaces o hipervínculos en HTMLEnlaces o hipervínculos en HTML
Enlaces o hipervínculos en HTMLdavid740413
 
Html 5 navegación enlaces
Html 5 navegación enlacesHtml 5 navegación enlaces
Html 5 navegación enlacesjcremiro
 
Tema 04 trabajando con hipervinculos
Tema 04 trabajando con hipervinculosTema 04 trabajando con hipervinculos
Tema 04 trabajando con hipervinculosSalomon Aquino
 
Presentacion Plan De Unidad
Presentacion Plan De UnidadPresentacion Plan De Unidad
Presentacion Plan De UnidadIED San Fernando
 

La actualidad más candente (16)

Hipervinculos
HipervinculosHipervinculos
Hipervinculos
 
Hiperenlaces
HiperenlacesHiperenlaces
Hiperenlaces
 
Tema vinculo e hipervínculo
Tema vinculo e hipervínculoTema vinculo e hipervínculo
Tema vinculo e hipervínculo
 
Vínculos e Hipervinculos
Vínculos e HipervinculosVínculos e Hipervinculos
Vínculos e Hipervinculos
 
123
123123
123
 
Vínculos e hipervínculos.
Vínculos e hipervínculos.Vínculos e hipervínculos.
Vínculos e hipervínculos.
 
Dreamweaver a lo ernesto
Dreamweaver a lo ernestoDreamweaver a lo ernesto
Dreamweaver a lo ernesto
 
mapa conceptual unidad 4
mapa conceptual unidad 4mapa conceptual unidad 4
mapa conceptual unidad 4
 
Hancasoft html
Hancasoft   htmlHancasoft   html
Hancasoft html
 
Tipos de hipervínculos
Tipos de hipervínculosTipos de hipervínculos
Tipos de hipervínculos
 
Los hipervinculos
Los hipervinculosLos hipervinculos
Los hipervinculos
 
Enlaces o hipervínculos en HTML
Enlaces o hipervínculos en HTMLEnlaces o hipervínculos en HTML
Enlaces o hipervínculos en HTML
 
Html 5 navegación enlaces
Html 5 navegación enlacesHtml 5 navegación enlaces
Html 5 navegación enlaces
 
Html (ppt)
Html (ppt)Html (ppt)
Html (ppt)
 
Tema 04 trabajando con hipervinculos
Tema 04 trabajando con hipervinculosTema 04 trabajando con hipervinculos
Tema 04 trabajando con hipervinculos
 
Presentacion Plan De Unidad
Presentacion Plan De UnidadPresentacion Plan De Unidad
Presentacion Plan De Unidad
 

Destacado

1 introduccion a dreamweaver
1 introduccion a dreamweaver1 introduccion a dreamweaver
1 introduccion a dreamweaverMarianmv
 
10 formulario
10 formulario10 formulario
10 formularioMarianmv
 
3 configurar un sitio web tablas y imgenes
3 configurar un sitio web tablas y imgenes3 configurar un sitio web tablas y imgenes
3 configurar un sitio web tablas y imgenesMarianmv
 
Ug html.pptx
Ug html.pptxUg html.pptx
Ug html.pptxzezeiko
 
4 hiperenlace
4 hiperenlace4 hiperenlace
4 hiperenlaceMarianmv
 
6 marquesinas
6 marquesinas6 marquesinas
6 marquesinasMarianmv
 
7 comportamiento de capas
7 comportamiento de capas7 comportamiento de capas
7 comportamiento de capasMarianmv
 
Introducción a html
Introducción a htmlIntroducción a html
Introducción a htmlromeprofe
 
Introduccion a programacion html
Introduccion a programacion htmlIntroduccion a programacion html
Introduccion a programacion htmlElim Aqp
 
2 reconociendo entorno gráfico
2 reconociendo entorno gráfico2 reconociendo entorno gráfico
2 reconociendo entorno gráficoMarianmv
 
Atributos de BODY;MARQUEE y TABLE
Atributos de BODY;MARQUEE y TABLEAtributos de BODY;MARQUEE y TABLE
Atributos de BODY;MARQUEE y TABLEMELISSA MORNEO
 
Curso Diseñando para la Web - Parte 1
Curso Diseñando para la Web - Parte 1Curso Diseñando para la Web - Parte 1
Curso Diseñando para la Web - Parte 1Sergio Nouvel Castro
 

Destacado (20)

1 introduccion a dreamweaver
1 introduccion a dreamweaver1 introduccion a dreamweaver
1 introduccion a dreamweaver
 
10 formulario
10 formulario10 formulario
10 formulario
 
3 configurar un sitio web tablas y imgenes
3 configurar un sitio web tablas y imgenes3 configurar un sitio web tablas y imgenes
3 configurar un sitio web tablas y imgenes
 
Ug html.pptx
Ug html.pptxUg html.pptx
Ug html.pptx
 
4 hiperenlace
4 hiperenlace4 hiperenlace
4 hiperenlace
 
6 marquesinas
6 marquesinas6 marquesinas
6 marquesinas
 
8 marcos
8 marcos8 marcos
8 marcos
 
9 menús
9 menús9 menús
9 menús
 
Clase Html + CSS
Clase Html + CSSClase Html + CSS
Clase Html + CSS
 
Html geraly fernanda cabrera aldana
Html geraly fernanda cabrera aldanaHtml geraly fernanda cabrera aldana
Html geraly fernanda cabrera aldana
 
7 comportamiento de capas
7 comportamiento de capas7 comportamiento de capas
7 comportamiento de capas
 
Introducción a html
Introducción a htmlIntroducción a html
Introducción a html
 
Apuntes de HTML 1
Apuntes de HTML 1Apuntes de HTML 1
Apuntes de HTML 1
 
Introduccion a programacion html
Introduccion a programacion htmlIntroduccion a programacion html
Introduccion a programacion html
 
Fundamentos de lenguaje html
Fundamentos de lenguaje htmlFundamentos de lenguaje html
Fundamentos de lenguaje html
 
2 reconociendo entorno gráfico
2 reconociendo entorno gráfico2 reconociendo entorno gráfico
2 reconociendo entorno gráfico
 
Atributos de BODY;MARQUEE y TABLE
Atributos de BODY;MARQUEE y TABLEAtributos de BODY;MARQUEE y TABLE
Atributos de BODY;MARQUEE y TABLE
 
Curso Diseñando para la Web - Parte 1
Curso Diseñando para la Web - Parte 1Curso Diseñando para la Web - Parte 1
Curso Diseñando para la Web - Parte 1
 
Apuntes de HTML 2
Apuntes de HTML 2Apuntes de HTML 2
Apuntes de HTML 2
 
Taller maquetacion web
Taller maquetacion webTaller maquetacion web
Taller maquetacion web
 

Similar a 5 hiperenlace con web (20)

Hiperenlaces 6 f
Hiperenlaces 6 fHiperenlaces 6 f
Hiperenlaces 6 f
 
Hiperenlaces 5
Hiperenlaces 5Hiperenlaces 5
Hiperenlaces 5
 
Unidad 4
Unidad 4Unidad 4
Unidad 4
 
Leccion 5 dream
Leccion 5 dreamLeccion 5 dream
Leccion 5 dream
 
Tema vinculo e hipervínculo
Tema vinculo e hipervínculoTema vinculo e hipervínculo
Tema vinculo e hipervínculo
 
Doc1
Doc1Doc1
Doc1
 
word
wordword
word
 
Dreamweaver a lo ernesto
Dreamweaver a lo ernestoDreamweaver a lo ernesto
Dreamweaver a lo ernesto
 
Hipervinculos
HipervinculosHipervinculos
Hipervinculos
 
Hipervinculos
HipervinculosHipervinculos
Hipervinculos
 
Hipervinculos,pdf
Hipervinculos,pdfHipervinculos,pdf
Hipervinculos,pdf
 
Hipervinculos
HipervinculosHipervinculos
Hipervinculos
 
Hipervinculos
HipervinculosHipervinculos
Hipervinculos
 
03
0303
03
 
Hipervinculos
HipervinculosHipervinculos
Hipervinculos
 
Hipervinculos
HipervinculosHipervinculos
Hipervinculos
 
Presentación65
Presentación65Presentación65
Presentación65
 
Dreamweaver gisselle noguera
Dreamweaver gisselle nogueraDreamweaver gisselle noguera
Dreamweaver gisselle noguera
 
dreamweaver
dreamweaverdreamweaver
dreamweaver
 
dreamweaver 8
dreamweaver 8dreamweaver 8
dreamweaver 8
 

Último

PPT GESTIÓN ESCOLAR 2024 Comités y Compromisos.pptx
PPT GESTIÓN ESCOLAR 2024 Comités y Compromisos.pptxPPT GESTIÓN ESCOLAR 2024 Comités y Compromisos.pptx
PPT GESTIÓN ESCOLAR 2024 Comités y Compromisos.pptxOscarEduardoSanchezC
 
Marketing y servicios 2ºBTP Cocina DGETP
Marketing y servicios 2ºBTP Cocina DGETPMarketing y servicios 2ºBTP Cocina DGETP
Marketing y servicios 2ºBTP Cocina DGETPANEP - DETP
 
Factores ecosistemas: interacciones, energia y dinamica
Factores ecosistemas: interacciones, energia y dinamicaFactores ecosistemas: interacciones, energia y dinamica
Factores ecosistemas: interacciones, energia y dinamicaFlor Idalia Espinoza Ortega
 
CULTURA NAZCA, presentación en aula para compartir
CULTURA NAZCA, presentación en aula para compartirCULTURA NAZCA, presentación en aula para compartir
CULTURA NAZCA, presentación en aula para compartirPaddySydney1
 
codigos HTML para blogs y paginas web Karina
codigos HTML para blogs y paginas web Karinacodigos HTML para blogs y paginas web Karina
codigos HTML para blogs y paginas web Karinavergarakarina022
 
Unidad II Doctrina de la Iglesia 1 parte
Unidad II Doctrina de la Iglesia 1 parteUnidad II Doctrina de la Iglesia 1 parte
Unidad II Doctrina de la Iglesia 1 parteJuan Hernandez
 
BROCHURE EXCEL 2024 FII.pdfwrfertetwetewtewtwtwtwtwtwtwtewtewtewtwtwtwtwe
BROCHURE EXCEL 2024 FII.pdfwrfertetwetewtewtwtwtwtwtwtwtewtewtewtwtwtwtweBROCHURE EXCEL 2024 FII.pdfwrfertetwetewtewtwtwtwtwtwtwtewtewtewtwtwtwtwe
BROCHURE EXCEL 2024 FII.pdfwrfertetwetewtewtwtwtwtwtwtwtewtewtewtwtwtwtwealekzHuri
 
Identificación de componentes Hardware del PC
Identificación de componentes Hardware del PCIdentificación de componentes Hardware del PC
Identificación de componentes Hardware del PCCesarFernandez937857
 
EXPECTATIVAS vs PERSPECTIVA en la vida.
EXPECTATIVAS vs PERSPECTIVA  en la vida.EXPECTATIVAS vs PERSPECTIVA  en la vida.
EXPECTATIVAS vs PERSPECTIVA en la vida.DaluiMonasterio
 
Informatica Generalidades - Conceptos Básicos
Informatica Generalidades - Conceptos BásicosInformatica Generalidades - Conceptos Básicos
Informatica Generalidades - Conceptos BásicosCesarFernandez937857
 
OLIMPIADA DEL CONOCIMIENTO INFANTIL 2024.pptx
OLIMPIADA DEL CONOCIMIENTO INFANTIL 2024.pptxOLIMPIADA DEL CONOCIMIENTO INFANTIL 2024.pptx
OLIMPIADA DEL CONOCIMIENTO INFANTIL 2024.pptxjosetrinidadchavez
 
Flores Nacionales de América Latina - Botánica
Flores Nacionales de América Latina - BotánicaFlores Nacionales de América Latina - Botánica
Flores Nacionales de América Latina - BotánicaJuan Carlos Fonseca Mata
 
el CTE 6 DOCENTES 2 2023-2024abcdefghijoklmnñopqrstuvwxyz
el CTE 6 DOCENTES 2 2023-2024abcdefghijoklmnñopqrstuvwxyzel CTE 6 DOCENTES 2 2023-2024abcdefghijoklmnñopqrstuvwxyz
el CTE 6 DOCENTES 2 2023-2024abcdefghijoklmnñopqrstuvwxyzprofefilete
 
Día de la Madre Tierra-1.pdf día mundial
Día de la Madre Tierra-1.pdf día mundialDía de la Madre Tierra-1.pdf día mundial
Día de la Madre Tierra-1.pdf día mundialpatriciaines1993
 
RAIZ CUADRADA Y CUBICA PARA NIÑOS DE PRIMARIA
RAIZ CUADRADA Y CUBICA PARA NIÑOS DE PRIMARIARAIZ CUADRADA Y CUBICA PARA NIÑOS DE PRIMARIA
RAIZ CUADRADA Y CUBICA PARA NIÑOS DE PRIMARIACarlos Campaña Montenegro
 
Presentación de Estrategias de Enseñanza-Aprendizaje Virtual.pptx
Presentación de Estrategias de Enseñanza-Aprendizaje Virtual.pptxPresentación de Estrategias de Enseñanza-Aprendizaje Virtual.pptx
Presentación de Estrategias de Enseñanza-Aprendizaje Virtual.pptxYeseniaRivera50
 
Heinsohn Privacidad y Ciberseguridad para el sector educativo
Heinsohn Privacidad y Ciberseguridad para el sector educativoHeinsohn Privacidad y Ciberseguridad para el sector educativo
Heinsohn Privacidad y Ciberseguridad para el sector educativoFundación YOD YOD
 
LA ECUACIÓN DEL NÚMERO PI EN LOS JUEGOS OLÍMPICOS DE PARÍS. Por JAVIER SOLIS ...
LA ECUACIÓN DEL NÚMERO PI EN LOS JUEGOS OLÍMPICOS DE PARÍS. Por JAVIER SOLIS ...LA ECUACIÓN DEL NÚMERO PI EN LOS JUEGOS OLÍMPICOS DE PARÍS. Por JAVIER SOLIS ...
LA ECUACIÓN DEL NÚMERO PI EN LOS JUEGOS OLÍMPICOS DE PARÍS. Por JAVIER SOLIS ...JAVIER SOLIS NOYOLA
 

Último (20)

PPT GESTIÓN ESCOLAR 2024 Comités y Compromisos.pptx
PPT GESTIÓN ESCOLAR 2024 Comités y Compromisos.pptxPPT GESTIÓN ESCOLAR 2024 Comités y Compromisos.pptx
PPT GESTIÓN ESCOLAR 2024 Comités y Compromisos.pptx
 
Marketing y servicios 2ºBTP Cocina DGETP
Marketing y servicios 2ºBTP Cocina DGETPMarketing y servicios 2ºBTP Cocina DGETP
Marketing y servicios 2ºBTP Cocina DGETP
 
Factores ecosistemas: interacciones, energia y dinamica
Factores ecosistemas: interacciones, energia y dinamicaFactores ecosistemas: interacciones, energia y dinamica
Factores ecosistemas: interacciones, energia y dinamica
 
CULTURA NAZCA, presentación en aula para compartir
CULTURA NAZCA, presentación en aula para compartirCULTURA NAZCA, presentación en aula para compartir
CULTURA NAZCA, presentación en aula para compartir
 
Repaso Pruebas CRECE PR 2024. Ciencia General
Repaso Pruebas CRECE PR 2024. Ciencia GeneralRepaso Pruebas CRECE PR 2024. Ciencia General
Repaso Pruebas CRECE PR 2024. Ciencia General
 
codigos HTML para blogs y paginas web Karina
codigos HTML para blogs y paginas web Karinacodigos HTML para blogs y paginas web Karina
codigos HTML para blogs y paginas web Karina
 
Unidad II Doctrina de la Iglesia 1 parte
Unidad II Doctrina de la Iglesia 1 parteUnidad II Doctrina de la Iglesia 1 parte
Unidad II Doctrina de la Iglesia 1 parte
 
BROCHURE EXCEL 2024 FII.pdfwrfertetwetewtewtwtwtwtwtwtwtewtewtewtwtwtwtwe
BROCHURE EXCEL 2024 FII.pdfwrfertetwetewtewtwtwtwtwtwtwtewtewtewtwtwtwtweBROCHURE EXCEL 2024 FII.pdfwrfertetwetewtewtwtwtwtwtwtwtewtewtewtwtwtwtwe
BROCHURE EXCEL 2024 FII.pdfwrfertetwetewtewtwtwtwtwtwtwtewtewtewtwtwtwtwe
 
Identificación de componentes Hardware del PC
Identificación de componentes Hardware del PCIdentificación de componentes Hardware del PC
Identificación de componentes Hardware del PC
 
EXPECTATIVAS vs PERSPECTIVA en la vida.
EXPECTATIVAS vs PERSPECTIVA  en la vida.EXPECTATIVAS vs PERSPECTIVA  en la vida.
EXPECTATIVAS vs PERSPECTIVA en la vida.
 
Informatica Generalidades - Conceptos Básicos
Informatica Generalidades - Conceptos BásicosInformatica Generalidades - Conceptos Básicos
Informatica Generalidades - Conceptos Básicos
 
OLIMPIADA DEL CONOCIMIENTO INFANTIL 2024.pptx
OLIMPIADA DEL CONOCIMIENTO INFANTIL 2024.pptxOLIMPIADA DEL CONOCIMIENTO INFANTIL 2024.pptx
OLIMPIADA DEL CONOCIMIENTO INFANTIL 2024.pptx
 
Flores Nacionales de América Latina - Botánica
Flores Nacionales de América Latina - BotánicaFlores Nacionales de América Latina - Botánica
Flores Nacionales de América Latina - Botánica
 
Power Point: "Defendamos la verdad".pptx
Power Point: "Defendamos la verdad".pptxPower Point: "Defendamos la verdad".pptx
Power Point: "Defendamos la verdad".pptx
 
el CTE 6 DOCENTES 2 2023-2024abcdefghijoklmnñopqrstuvwxyz
el CTE 6 DOCENTES 2 2023-2024abcdefghijoklmnñopqrstuvwxyzel CTE 6 DOCENTES 2 2023-2024abcdefghijoklmnñopqrstuvwxyz
el CTE 6 DOCENTES 2 2023-2024abcdefghijoklmnñopqrstuvwxyz
 
Día de la Madre Tierra-1.pdf día mundial
Día de la Madre Tierra-1.pdf día mundialDía de la Madre Tierra-1.pdf día mundial
Día de la Madre Tierra-1.pdf día mundial
 
RAIZ CUADRADA Y CUBICA PARA NIÑOS DE PRIMARIA
RAIZ CUADRADA Y CUBICA PARA NIÑOS DE PRIMARIARAIZ CUADRADA Y CUBICA PARA NIÑOS DE PRIMARIA
RAIZ CUADRADA Y CUBICA PARA NIÑOS DE PRIMARIA
 
Presentación de Estrategias de Enseñanza-Aprendizaje Virtual.pptx
Presentación de Estrategias de Enseñanza-Aprendizaje Virtual.pptxPresentación de Estrategias de Enseñanza-Aprendizaje Virtual.pptx
Presentación de Estrategias de Enseñanza-Aprendizaje Virtual.pptx
 
Heinsohn Privacidad y Ciberseguridad para el sector educativo
Heinsohn Privacidad y Ciberseguridad para el sector educativoHeinsohn Privacidad y Ciberseguridad para el sector educativo
Heinsohn Privacidad y Ciberseguridad para el sector educativo
 
LA ECUACIÓN DEL NÚMERO PI EN LOS JUEGOS OLÍMPICOS DE PARÍS. Por JAVIER SOLIS ...
LA ECUACIÓN DEL NÚMERO PI EN LOS JUEGOS OLÍMPICOS DE PARÍS. Por JAVIER SOLIS ...LA ECUACIÓN DEL NÚMERO PI EN LOS JUEGOS OLÍMPICOS DE PARÍS. Por JAVIER SOLIS ...
LA ECUACIÓN DEL NÚMERO PI EN LOS JUEGOS OLÍMPICOS DE PARÍS. Por JAVIER SOLIS ...
 

5 hiperenlace con web

  • 1.
  • 2. Un hiperenlace, hipervínculo, o vínculo, no es más que un enlace, que al ser pulsado lleva de una página o archivo a otra página o archivo. Es posible asignar un vínculo a un texto, a una imagen, o a parte de una imagen. Cuando creemos un enlace, lo que realmente haremos será crear una etiqueta <a></a> que es la que en HTML se encarga de definir los enlaces. Esto podrás observarlo en la barra de estado: HIPERENLACEHIPERENLACE Tipos de referencia Existen diferentes clases de rutas de acceso a la hora de definir los vínculos. Estas referencias no se limitan a los enlaces, se comportarán igual cuando indiquemos la ubicación de una imagen, de un archivo Flash, de la hoja de estilo, etc.  Referencia absoluta: Conduce al sitio en el que se encuentra el documento utilizando la ruta completa del archivo, incluyendo el protocolo http://. Por ejemplo, http://www.une.edu.pe/ La referencia absoluta es independiente de la ubicación de la página que contiene el enlace, y será válida siempre que no cambie la ubicación del archivo enlazado. Es la opción obligatoria si pretendemos enlazar a archivos fuera de nuestro sitio (enlaces externos).
  • 3. Referencia relativa al documento (por defecto): La ubicación del archivo enlazado se toma en relación con la ubicación del la página. Es decir, partimos de la carpeta en la que se encuentra el documento. Si queremos enlazar con una página o archivo dentro de la misma carpeta, no tenemos más que utilizar su nombre. Por ejemplo, pagina2.htm. Si está en una subcarpeta de la página actual, no tenemos más que indicar el nombre de la carpeta antes del archivo, y separarlos por una barra (/). Por ejemplo imagenes/miimagen.gif. Si queremos referirnos a carpetas que están por encima del nivel donde nos encontramos deberemos utilizar ../
  • 4.  Referencia relativa al sitio: Conduce a un documento situado dentro del mismo sitio que el documento actual.  Tomando como origen la carpeta raíz del sitio. Para indicar la ruta relativa al sitio, precedemos la ruta de enlace por la barra /. En el ejemplo anterior si tuviésemos definido como sitio la  carpeta http://www.misitio.com/, un enlace en cualquier página del sitio  a http://www.misitio.com/pagina/secciones/seccion1.htmlse crearía  como /pagina/secciones/seccion1.html. Por tanto, podríamos poner ese vínculo en cualquier página del sitio y funcionaría  independientemente de su ubicación. Estos enlaces no funcionarán en el sitio local, a no ser que configuremos un servidor  de pruebas como veremos más adelante, ya que Windows interpretará como raíz la  raíz del disco duro.
  • 5. Crear enlacesCrear enlaces La forma más sencilla de crear un enlace es a través del inspector de propiedades.  Para ello es necesario seleccionar el texto o el objeto que va a servir de enlace, y  seguidamente establecer el Vínculo en el inspector HTML. Por ejemplo, en la siguiente imagen hay un enlace a www.aulaclic.es, que al ser un  archivo externo es de referencia absoluta, por eso contiene http:// Es posible crear también vínculos vacíos, que pueden ser útiles cuando se  utilizan comportamientos, etc. Para ello es necesario escribir  en Vínculo únicamente una almohadilla #. Veremos su utilidad más adelante.
  • 6. Otra forma de crear un enlace es a través del menú Insertar,  opción Hipervínculo. Crear vínculos de esta forma es muy sencillo, sólo deberás rellenar los campos que  explicaremos  a  continuación  y  el  enlace  se  colocará  en  el  lugar  en  el  que  estaba  situado el cursor. Texto:  es  el  texto  que  mostrará  el  enlace.  Si  teníamos  un  texto  seleccionado,  aparecerá ahí. Vínculo: es la página a la que irá redirigida el enlace, si se trata de un enlace externo  deberás escribirla empezando siempre por http://. Haz clic sobre el icono de carpeta  para  buscar  los  archivos  que  existan  dentro  del  sitio.  Por  defecto  Dreamweaver  te  creará un enlace relativo al documento. Si quieres que los enlaces sean relativos al  sitio visita este avanzado .
  • 7. Destino: la ventana donde se abrirá la página, este campo se explica en el siguiente apartado. Título: se trata de la ayuda contextual del vínculo, que aparecerá al mantener un instante el cursor sobre el enlace. Tecla de acceso: atributo que facilita la accesibilidad a las páginas, habilita el acceso al enlace mediante la pulsación de la tecla Alt más la tecla de acceso indicada. Índice de tabulador: Como habrás podido observar puedes saltar a través de los enlaces pulsando la tecla Tabulador. En este campo podrás establecer un índice indicando la prioridad del enlace y así configurar el modo en el que actuará el Tabulador es sus diferentes saltos. Por defecto, se tabularán por orden de aparición.
  • 8. Destino del enlace El destino del enlace determina en qué ventana va a ser abierta la página vinculada, puede variar dependiendo de si el documento está basado en marcos. Puede especificarse en el inspector de propiedades HTML a través de Destino, o en la ventana que aparece a través del menú Insertar, opción Hipervínculo. blank: Abre el documento vinculado en una nueva ventana o pestaña del navegador. parent: Abre el documento vinculado en la ventana del marco que contiene el vínculo o en el conjunto de marcos padre. Tiene sentido si se emplean marcos. self: Es la opción predeterminada, y la que se produce si no indicamos otra cosa. Abre el documento vinculado en el mismo marco o ventana que el vínculo. top: Abre el documento vinculado en la ventana completa del navegador. Tiene sentido si se emplean marcos. No te preocupes si no te queda del todo claro para qué sirve cada una de estas opciones de destino, ya que se volverán a ver en el tema de Marcos.
  • 9.