SlideShare una empresa de Scribd logo
1 de 10
Descargar para leer sin conexión
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

ENSEÑAR ACUIDAR EL MEDIO AMBIENTE ES ENSEÑAR A VALORAR LA VIDA.
ENSEÑAR ACUIDAR  EL MEDIO AMBIENTE ES ENSEÑAR A VALORAR LA VIDA.ENSEÑAR ACUIDAR  EL MEDIO AMBIENTE ES ENSEÑAR A VALORAR LA VIDA.
ENSEÑAR ACUIDAR EL MEDIO AMBIENTE ES ENSEÑAR A VALORAR LA VIDA.karlazoegarciagarcia
 
TALLER_DE_ORALIDAD_LECTURA_ESCRITURA_Y.pptx
TALLER_DE_ORALIDAD_LECTURA_ESCRITURA_Y.pptxTALLER_DE_ORALIDAD_LECTURA_ESCRITURA_Y.pptx
TALLER_DE_ORALIDAD_LECTURA_ESCRITURA_Y.pptxMartaChaparro1
 
BOCA Y NARIZ (2).pdf....................
BOCA Y NARIZ (2).pdf....................BOCA Y NARIZ (2).pdf....................
BOCA Y NARIZ (2).pdf....................ScarletMedina4
 
MEDIACIÓN INTERNACIONAL MF 1445 vl45.pdf
MEDIACIÓN INTERNACIONAL MF 1445 vl45.pdfMEDIACIÓN INTERNACIONAL MF 1445 vl45.pdf
MEDIACIÓN INTERNACIONAL MF 1445 vl45.pdfJosé Hecht
 
Presentacionde Prueba 2024 dsdasdasdsadsadsadsadasdasdsadsa
Presentacionde Prueba 2024 dsdasdasdsadsadsadsadasdasdsadsaPresentacionde Prueba 2024 dsdasdasdsadsadsadsadasdasdsadsa
Presentacionde Prueba 2024 dsdasdasdsadsadsadsadasdasdsadsaFarid Abud
 
La-cosmovision-del-curriculo-educativo-en-Venezuela (1).pptx
La-cosmovision-del-curriculo-educativo-en-Venezuela (1).pptxLa-cosmovision-del-curriculo-educativo-en-Venezuela (1).pptx
La-cosmovision-del-curriculo-educativo-en-Venezuela (1).pptxMAURICIO329243
 
HISPANIDAD - La cultura común de la HISPANOAMERICA
HISPANIDAD - La cultura común de la HISPANOAMERICAHISPANIDAD - La cultura común de la HISPANOAMERICA
HISPANIDAD - La cultura común de la HISPANOAMERICAJesus Gonzalez Losada
 
Desarrollo de habilidades del siglo XXI - Práctica Educativa en una Unidad-Ca...
Desarrollo de habilidades del siglo XXI - Práctica Educativa en una Unidad-Ca...Desarrollo de habilidades del siglo XXI - Práctica Educativa en una Unidad-Ca...
Desarrollo de habilidades del siglo XXI - Práctica Educativa en una Unidad-Ca...Carol Andrea Eraso Guerrero
 
5° Proyecto 13 Cuadernillo para proyectos
5° Proyecto 13 Cuadernillo para proyectos5° Proyecto 13 Cuadernillo para proyectos
5° Proyecto 13 Cuadernillo para proyectosTrishGutirrez
 
Apunte de clase Pisos y Revestimientos 3
Apunte de clase Pisos y Revestimientos 3Apunte de clase Pisos y Revestimientos 3
Apunte de clase Pisos y Revestimientos 3Gonella
 
4° SES COM MAR 09 Leemos una noticia del dengue e identificamos sus partes (1...
4° SES COM MAR 09 Leemos una noticia del dengue e identificamos sus partes (1...4° SES COM MAR 09 Leemos una noticia del dengue e identificamos sus partes (1...
4° SES COM MAR 09 Leemos una noticia del dengue e identificamos sus partes (1...MagalyDacostaPea
 
Actividades eclipse solar 2024 Educacion
Actividades eclipse solar 2024 EducacionActividades eclipse solar 2024 Educacion
Actividades eclipse solar 2024 Educacionviviantorres91
 
4° SEM23 ANEXOS DEL DOCENTE 2023-2024.pptx
4° SEM23 ANEXOS DEL DOCENTE 2023-2024.pptx4° SEM23 ANEXOS DEL DOCENTE 2023-2024.pptx
4° SEM23 ANEXOS DEL DOCENTE 2023-2024.pptxfotofamilia008
 

Último (20)

ENSEÑAR ACUIDAR EL MEDIO AMBIENTE ES ENSEÑAR A VALORAR LA VIDA.
ENSEÑAR ACUIDAR  EL MEDIO AMBIENTE ES ENSEÑAR A VALORAR LA VIDA.ENSEÑAR ACUIDAR  EL MEDIO AMBIENTE ES ENSEÑAR A VALORAR LA VIDA.
ENSEÑAR ACUIDAR EL MEDIO AMBIENTE ES ENSEÑAR A VALORAR LA VIDA.
 
Acuerdo segundo periodo - Grado Noveno.pptx
Acuerdo segundo periodo - Grado Noveno.pptxAcuerdo segundo periodo - Grado Noveno.pptx
Acuerdo segundo periodo - Grado Noveno.pptx
 
TALLER_DE_ORALIDAD_LECTURA_ESCRITURA_Y.pptx
TALLER_DE_ORALIDAD_LECTURA_ESCRITURA_Y.pptxTALLER_DE_ORALIDAD_LECTURA_ESCRITURA_Y.pptx
TALLER_DE_ORALIDAD_LECTURA_ESCRITURA_Y.pptx
 
BOCA Y NARIZ (2).pdf....................
BOCA Y NARIZ (2).pdf....................BOCA Y NARIZ (2).pdf....................
BOCA Y NARIZ (2).pdf....................
 
MEDIACIÓN INTERNACIONAL MF 1445 vl45.pdf
MEDIACIÓN INTERNACIONAL MF 1445 vl45.pdfMEDIACIÓN INTERNACIONAL MF 1445 vl45.pdf
MEDIACIÓN INTERNACIONAL MF 1445 vl45.pdf
 
Mimos _
Mimos                                       _Mimos                                       _
Mimos _
 
Presentacionde Prueba 2024 dsdasdasdsadsadsadsadasdasdsadsa
Presentacionde Prueba 2024 dsdasdasdsadsadsadsadasdasdsadsaPresentacionde Prueba 2024 dsdasdasdsadsadsadsadasdasdsadsa
Presentacionde Prueba 2024 dsdasdasdsadsadsadsadasdasdsadsa
 
Unidad 1 | Metodología de la Investigación
Unidad 1 | Metodología de la InvestigaciónUnidad 1 | Metodología de la Investigación
Unidad 1 | Metodología de la Investigación
 
Act#25 TDLab. Eclipse Solar 08/abril/2024
Act#25 TDLab. Eclipse Solar 08/abril/2024Act#25 TDLab. Eclipse Solar 08/abril/2024
Act#25 TDLab. Eclipse Solar 08/abril/2024
 
Sesión ¿Amor o egoísmo? Esa es la cuestión
Sesión  ¿Amor o egoísmo? Esa es la cuestiónSesión  ¿Amor o egoísmo? Esa es la cuestión
Sesión ¿Amor o egoísmo? Esa es la cuestión
 
La-cosmovision-del-curriculo-educativo-en-Venezuela (1).pptx
La-cosmovision-del-curriculo-educativo-en-Venezuela (1).pptxLa-cosmovision-del-curriculo-educativo-en-Venezuela (1).pptx
La-cosmovision-del-curriculo-educativo-en-Venezuela (1).pptx
 
Acuerdo segundo periodo - Grado Sexto.pptx
Acuerdo segundo periodo - Grado Sexto.pptxAcuerdo segundo periodo - Grado Sexto.pptx
Acuerdo segundo periodo - Grado Sexto.pptx
 
HISPANIDAD - La cultura común de la HISPANOAMERICA
HISPANIDAD - La cultura común de la HISPANOAMERICAHISPANIDAD - La cultura común de la HISPANOAMERICA
HISPANIDAD - La cultura común de la HISPANOAMERICA
 
Desarrollo de habilidades del siglo XXI - Práctica Educativa en una Unidad-Ca...
Desarrollo de habilidades del siglo XXI - Práctica Educativa en una Unidad-Ca...Desarrollo de habilidades del siglo XXI - Práctica Educativa en una Unidad-Ca...
Desarrollo de habilidades del siglo XXI - Práctica Educativa en una Unidad-Ca...
 
5° Proyecto 13 Cuadernillo para proyectos
5° Proyecto 13 Cuadernillo para proyectos5° Proyecto 13 Cuadernillo para proyectos
5° Proyecto 13 Cuadernillo para proyectos
 
Apunte de clase Pisos y Revestimientos 3
Apunte de clase Pisos y Revestimientos 3Apunte de clase Pisos y Revestimientos 3
Apunte de clase Pisos y Revestimientos 3
 
Acuerdo segundo periodo - Grado Once.pptx
Acuerdo segundo periodo - Grado Once.pptxAcuerdo segundo periodo - Grado Once.pptx
Acuerdo segundo periodo - Grado Once.pptx
 
4° SES COM MAR 09 Leemos una noticia del dengue e identificamos sus partes (1...
4° SES COM MAR 09 Leemos una noticia del dengue e identificamos sus partes (1...4° SES COM MAR 09 Leemos una noticia del dengue e identificamos sus partes (1...
4° SES COM MAR 09 Leemos una noticia del dengue e identificamos sus partes (1...
 
Actividades eclipse solar 2024 Educacion
Actividades eclipse solar 2024 EducacionActividades eclipse solar 2024 Educacion
Actividades eclipse solar 2024 Educacion
 
4° SEM23 ANEXOS DEL DOCENTE 2023-2024.pptx
4° SEM23 ANEXOS DEL DOCENTE 2023-2024.pptx4° SEM23 ANEXOS DEL DOCENTE 2023-2024.pptx
4° SEM23 ANEXOS DEL DOCENTE 2023-2024.pptx
 

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.