SlideShare una empresa de Scribd logo
1 de 8
HIPERVÍNCULOS O
ENLACES EN HTML.
ETIQUETA <A>.
JOHAN GÓMEZ
 Los enlaces o hipervínculos, también llamados hipertextos son los textos o los objetos sobre
los que podemos hacer clic para que nos lleven a otra parte del documento, a otra página
web en el mismo sitio o a otra página de Internet, entre otras funciones.
 Cuando un visitante hace clic en el hipervínculo, el destino se mostrará en su navegador web,
se abrirá o se ejecutará, en función del tipo de destino. El destino es con frecuencia otra
página web, pero también puede ser una imagen, un archivo multimedia, un documento de
Microsoft Office, un documento PDF, una dirección de correo electrónico o un programa.
 Por tanto, con los hipervínculos podemos establecer “saltos” desde una página a otra, incluso
a puntos concretos dentro de páginas con contenidos extensos. Los hipervínculos pueden
asociarse a imágenes o a textos de modo que haciendo clic sobre ellos con el botón
izquierdo del ratón se accede automáticamente al destino asociado a ellos.
 Lo más habitual es que el cursor tome la forma de una pequeña mano cuando pasa sobre un
hipervínculo.
HIPERVÍNCULOS LOCALES,
MARCADORES O ANCLAS.
Los hipervínculos locales o marcadores son enlaces dentro de la misma página. Es decir, al hacer clic en uno de
ellos nos llevará a una posición distinta dentro de la misma página que estamos visualizando.
Esta técnica hace que los usuarios accedan de una manera más rápida a la información.
Para crear este tipo de enlaces hay que hacer dos operaciones:
Establecer marcadores (anclas) a lo largo de la página (son los lugares a los que queremos saltar con los enlaces).
Poner enlaces que salten a los marcadores.
El código de los marcadores se crea con los atributos name (no recomendado) ó id (recomendado):
<a name="nombre_del_marcador">Texto asociado al marcador</a> (No recomendado: no es aceptado por las
nuevas versiones de HTML, aunque se usó bastante en el pasado).
<a id="nombre_del_marcador">Texto asociado al marcador</a>
El name ó id de una etiqueta debe ser único, es decir, no puede haber dos etiquetas cuyo name ó id
sea el mismo dentro de un documento HTML.
Por ejemplo, <a id="marcadorDeportes">Los deportes en aprenderaprogramar.com</a>
Por otro lado, el código de un enlace para que salte a un marcador.
Pulsa para volver al <a href="#nombre_del_marcador ">Inicio</a>
Hay que tener en cuenta que los marcadores distinguen entre mayúsculas y minúsculas. También hay
que tener en cuenta que dentro de las etiquetas <a> </a> hay un texto que aparece visible para el
usuario, que es el que hemos marcado subrayado en amarillo. No obstante, es válido no incluir texto
alguno como veremos en el siguiente código.
HIPERVÍNCULOS EXTERNOS. ATRIBUTO
HREF.
Un hipervínculo externo es un vínculo a otro sitio web en Internet (sitio externo). Es un vínculo a
cualquier otro lugar fuera del sitio actual. Cuando ponemos un vínculo externo, escribimos la
dirección completa de la página incluido http://www.... Estas rutas que incluyen http://... las
denominamos rutas absolutas. Por
ejemplo, <a href="http://www.aprenderaprogramar.com">Acceder a la página web
aprenderaprogramar.com</a>
En el hipervínculo distinguimos las siguientes partes:
- Las etiquetas de apertura y cierre del hipervínculo <a> y </a>
- El atributo href, con un valor que se indica con el símbolo igual y la URL a la que dirige el
hipervínculo dentro de las comillas.
- Un texto que es el que ve el usuario como link.
Prueba a generar un archivo al que denomines ejemplo.html y en el que incluyas un link como el
que hemos visto. El resultado debe ser algo así.
Codigo de enlaces internos y externos

Más contenido relacionado

La actualidad más candente

La actualidad más candente (16)

Hiperenlaces 5
Hiperenlaces 5Hiperenlaces 5
Hiperenlaces 5
 
Tema vinculo e hipervínculo
Tema vinculo e hipervínculoTema vinculo e hipervínculo
Tema vinculo e hipervínculo
 
Hipervinculos
HipervinculosHipervinculos
Hipervinculos
 
Introducciòn a html
Introducciòn a htmlIntroducciòn a html
Introducciòn a html
 
html
htmlhtml
html
 
FRONTPAGE PARTE II
FRONTPAGE PARTE IIFRONTPAGE PARTE II
FRONTPAGE PARTE II
 
Crear hipervínculos
Crear hipervínculosCrear hipervínculos
Crear hipervínculos
 
Desarrollo Pagina Web!!..
Desarrollo Pagina Web!!..Desarrollo Pagina Web!!..
Desarrollo Pagina Web!!..
 
Html (ppt)
Html (ppt)Html (ppt)
Html (ppt)
 
TRABAJO DE DAPI
TRABAJO DE DAPITRABAJO DE DAPI
TRABAJO DE DAPI
 
Mi primer pagina web
Mi primer pagina webMi primer pagina web
Mi primer pagina web
 
Guia De Trucos Html
Guia De Trucos HtmlGuia De Trucos Html
Guia De Trucos Html
 
Hipervinculo
HipervinculoHipervinculo
Hipervinculo
 
Enlaces o hipervínculos en HTML
Enlaces o hipervínculos en HTMLEnlaces o hipervínculos en HTML
Enlaces o hipervínculos en HTML
 
Resumen de dreamweaver aybeth orozco morales 11 e
Resumen de dreamweaver  aybeth orozco morales 11 eResumen de dreamweaver  aybeth orozco morales 11 e
Resumen de dreamweaver aybeth orozco morales 11 e
 
Especialista Web J3
Especialista Web   J3Especialista Web   J3
Especialista Web J3
 

Similar a Codigo de enlaces internos y externos

Similar a Codigo de enlaces internos y externos (20)

Hipervinculos
HipervinculosHipervinculos
Hipervinculos
 
Hipervinculos,pdf
Hipervinculos,pdfHipervinculos,pdf
Hipervinculos,pdf
 
Hipervinculos
HipervinculosHipervinculos
Hipervinculos
 
Hipervinculos
HipervinculosHipervinculos
Hipervinculos
 
Hipervinculos
HipervinculosHipervinculos
Hipervinculos
 
03
0303
03
 
Hipervinculos
HipervinculosHipervinculos
Hipervinculos
 
Hipervinculos links anclas html href target title etiqueta a
Hipervinculos links anclas html href target title etiqueta aHipervinculos links anclas html href target title etiqueta a
Hipervinculos links anclas html href target title etiqueta a
 
clase-3_1.pdf
clase-3_1.pdfclase-3_1.pdf
clase-3_1.pdf
 
Tema vinculo e hipervínculo
Tema vinculo e hipervínculoTema vinculo e hipervínculo
Tema vinculo e hipervínculo
 
Los hipervinculos
Los hipervinculosLos hipervinculos
Los hipervinculos
 
Hipervinculos
Hipervinculos Hipervinculos
Hipervinculos
 
Crear paginas web
Crear paginas webCrear paginas web
Crear paginas web
 
Que es la web http
Que es la  web httpQue es la  web http
Que es la web http
 
Presentacion Unidad 2 Act 2
Presentacion Unidad 2 Act 2Presentacion Unidad 2 Act 2
Presentacion Unidad 2 Act 2
 
Informatica
InformaticaInformatica
Informatica
 
Pagina web
Pagina webPagina web
Pagina web
 
Códigos enlaces internos y externos
Códigos enlaces internos y externosCódigos enlaces internos y externos
Códigos enlaces internos y externos
 
Hipervinculos en html
Hipervinculos en htmlHipervinculos en html
Hipervinculos en html
 
Estructura de sitio
Estructura de sitioEstructura de sitio
Estructura de sitio
 

Más de Johan Gomez

Iglesia de Baños (Ecuador)
Iglesia de Baños (Ecuador)Iglesia de Baños (Ecuador)
Iglesia de Baños (Ecuador)Johan Gomez
 
Moto Renegade Commando
Moto Renegade CommandoMoto Renegade Commando
Moto Renegade CommandoJohan Gomez
 
Excavadora y volqueta
Excavadora y volquetaExcavadora y volqueta
Excavadora y volquetaJohan Gomez
 
Piezas de ajedrez
Piezas de ajedrezPiezas de ajedrez
Piezas de ajedrezJohan Gomez
 
Silla y mesa de comedor
Silla y mesa de comedorSilla y mesa de comedor
Silla y mesa de comedorJohan Gomez
 
Proceso de Escalera de 3 maneras con texturas
Proceso de Escalera de 3 maneras con texturasProceso de Escalera de 3 maneras con texturas
Proceso de Escalera de 3 maneras con texturasJohan Gomez
 
Departamento a base de primitivas
Departamento a base de primitivasDepartamento a base de primitivas
Departamento a base de primitivasJohan Gomez
 
Modelos en 2D y 3D de logos de tv y departamento
Modelos en 2D y 3D de logos de tv y departamentoModelos en 2D y 3D de logos de tv y departamento
Modelos en 2D y 3D de logos de tv y departamentoJohan Gomez
 
Modelados en 2 d y 3d
Modelados en 2 d y 3dModelados en 2 d y 3d
Modelados en 2 d y 3dJohan Gomez
 
Que es html y css
Que es html y cssQue es html y css
Que es html y cssJohan Gomez
 
Codigo de imagenes
Codigo de imagenesCodigo de imagenes
Codigo de imagenesJohan Gomez
 
Codigo de textos
Codigo de textosCodigo de textos
Codigo de textosJohan Gomez
 
Talleres Johan Gómez
Talleres Johan GómezTalleres Johan Gómez
Talleres Johan GómezJohan Gomez
 

Más de Johan Gomez (16)

Gato zamurai 3d
Gato zamurai 3dGato zamurai 3d
Gato zamurai 3d
 
Iglesia de Baños (Ecuador)
Iglesia de Baños (Ecuador)Iglesia de Baños (Ecuador)
Iglesia de Baños (Ecuador)
 
Moto Renegade Commando
Moto Renegade CommandoMoto Renegade Commando
Moto Renegade Commando
 
Excavadora y volqueta
Excavadora y volquetaExcavadora y volqueta
Excavadora y volqueta
 
Moto bambu
Moto bambuMoto bambu
Moto bambu
 
Piezas de ajedrez
Piezas de ajedrezPiezas de ajedrez
Piezas de ajedrez
 
Tractor
TractorTractor
Tractor
 
Silla y mesa de comedor
Silla y mesa de comedorSilla y mesa de comedor
Silla y mesa de comedor
 
Proceso de Escalera de 3 maneras con texturas
Proceso de Escalera de 3 maneras con texturasProceso de Escalera de 3 maneras con texturas
Proceso de Escalera de 3 maneras con texturas
 
Departamento a base de primitivas
Departamento a base de primitivasDepartamento a base de primitivas
Departamento a base de primitivas
 
Modelos en 2D y 3D de logos de tv y departamento
Modelos en 2D y 3D de logos de tv y departamentoModelos en 2D y 3D de logos de tv y departamento
Modelos en 2D y 3D de logos de tv y departamento
 
Modelados en 2 d y 3d
Modelados en 2 d y 3dModelados en 2 d y 3d
Modelados en 2 d y 3d
 
Que es html y css
Que es html y cssQue es html y css
Que es html y css
 
Codigo de imagenes
Codigo de imagenesCodigo de imagenes
Codigo de imagenes
 
Codigo de textos
Codigo de textosCodigo de textos
Codigo de textos
 
Talleres Johan Gómez
Talleres Johan GómezTalleres Johan Gómez
Talleres Johan Gómez
 

Último

PARTES DEL TECLADO Y SUS FUNCIONES - EJEMPLO
PARTES DEL TECLADO Y SUS FUNCIONES - EJEMPLOPARTES DEL TECLADO Y SUS FUNCIONES - EJEMPLO
PARTES DEL TECLADO Y SUS FUNCIONES - EJEMPLOSelenaCoronadoHuaman
 
Introducción a Funciones LENGUAJE DART FLUTTER
Introducción a Funciones LENGUAJE DART FLUTTERIntroducción a Funciones LENGUAJE DART FLUTTER
Introducción a Funciones LENGUAJE DART FLUTTEREMMAFLORESCARMONA
 
BREEAM ES Urbanismo como herramienta para un planeamiento sostenible - Miguel...
BREEAM ES Urbanismo como herramienta para un planeamiento sostenible - Miguel...BREEAM ES Urbanismo como herramienta para un planeamiento sostenible - Miguel...
BREEAM ES Urbanismo como herramienta para un planeamiento sostenible - Miguel...ITeC Instituto Tecnología Construcción
 
Caso de éxito de Hervian con el ERP Sage 200
Caso de éxito de Hervian con el ERP Sage 200Caso de éxito de Hervian con el ERP Sage 200
Caso de éxito de Hervian con el ERP Sage 200Opentix
 
Manual de Usuario APPs_AppInventor-2023.pdf
Manual de Usuario APPs_AppInventor-2023.pdfManual de Usuario APPs_AppInventor-2023.pdf
Manual de Usuario APPs_AppInventor-2023.pdfmasogeis
 
Segmentacion Segmantica_Modelos UNET and DEEPLABV3
Segmentacion Segmantica_Modelos UNET and DEEPLABV3Segmentacion Segmantica_Modelos UNET and DEEPLABV3
Segmentacion Segmantica_Modelos UNET and DEEPLABV3AlexysCaytanoMelndez1
 
Unidad_3_T1_AutomatasFinitos presentacion
Unidad_3_T1_AutomatasFinitos presentacionUnidad_3_T1_AutomatasFinitos presentacion
Unidad_3_T1_AutomatasFinitos presentacionarmando_cardenas
 

Último (7)

PARTES DEL TECLADO Y SUS FUNCIONES - EJEMPLO
PARTES DEL TECLADO Y SUS FUNCIONES - EJEMPLOPARTES DEL TECLADO Y SUS FUNCIONES - EJEMPLO
PARTES DEL TECLADO Y SUS FUNCIONES - EJEMPLO
 
Introducción a Funciones LENGUAJE DART FLUTTER
Introducción a Funciones LENGUAJE DART FLUTTERIntroducción a Funciones LENGUAJE DART FLUTTER
Introducción a Funciones LENGUAJE DART FLUTTER
 
BREEAM ES Urbanismo como herramienta para un planeamiento sostenible - Miguel...
BREEAM ES Urbanismo como herramienta para un planeamiento sostenible - Miguel...BREEAM ES Urbanismo como herramienta para un planeamiento sostenible - Miguel...
BREEAM ES Urbanismo como herramienta para un planeamiento sostenible - Miguel...
 
Caso de éxito de Hervian con el ERP Sage 200
Caso de éxito de Hervian con el ERP Sage 200Caso de éxito de Hervian con el ERP Sage 200
Caso de éxito de Hervian con el ERP Sage 200
 
Manual de Usuario APPs_AppInventor-2023.pdf
Manual de Usuario APPs_AppInventor-2023.pdfManual de Usuario APPs_AppInventor-2023.pdf
Manual de Usuario APPs_AppInventor-2023.pdf
 
Segmentacion Segmantica_Modelos UNET and DEEPLABV3
Segmentacion Segmantica_Modelos UNET and DEEPLABV3Segmentacion Segmantica_Modelos UNET and DEEPLABV3
Segmentacion Segmantica_Modelos UNET and DEEPLABV3
 
Unidad_3_T1_AutomatasFinitos presentacion
Unidad_3_T1_AutomatasFinitos presentacionUnidad_3_T1_AutomatasFinitos presentacion
Unidad_3_T1_AutomatasFinitos presentacion
 

Codigo de enlaces internos y externos

  • 1. HIPERVÍNCULOS O ENLACES EN HTML. ETIQUETA <A>. JOHAN GÓMEZ
  • 2.  Los enlaces o hipervínculos, también llamados hipertextos son los textos o los objetos sobre los que podemos hacer clic para que nos lleven a otra parte del documento, a otra página web en el mismo sitio o a otra página de Internet, entre otras funciones.  Cuando un visitante hace clic en el hipervínculo, el destino se mostrará en su navegador web, se abrirá o se ejecutará, en función del tipo de destino. El destino es con frecuencia otra página web, pero también puede ser una imagen, un archivo multimedia, un documento de Microsoft Office, un documento PDF, una dirección de correo electrónico o un programa.  Por tanto, con los hipervínculos podemos establecer “saltos” desde una página a otra, incluso a puntos concretos dentro de páginas con contenidos extensos. Los hipervínculos pueden asociarse a imágenes o a textos de modo que haciendo clic sobre ellos con el botón izquierdo del ratón se accede automáticamente al destino asociado a ellos.  Lo más habitual es que el cursor tome la forma de una pequeña mano cuando pasa sobre un hipervínculo.
  • 3. HIPERVÍNCULOS LOCALES, MARCADORES O ANCLAS. Los hipervínculos locales o marcadores son enlaces dentro de la misma página. Es decir, al hacer clic en uno de ellos nos llevará a una posición distinta dentro de la misma página que estamos visualizando. Esta técnica hace que los usuarios accedan de una manera más rápida a la información. Para crear este tipo de enlaces hay que hacer dos operaciones: Establecer marcadores (anclas) a lo largo de la página (son los lugares a los que queremos saltar con los enlaces). Poner enlaces que salten a los marcadores. El código de los marcadores se crea con los atributos name (no recomendado) ó id (recomendado): <a name="nombre_del_marcador">Texto asociado al marcador</a> (No recomendado: no es aceptado por las nuevas versiones de HTML, aunque se usó bastante en el pasado). <a id="nombre_del_marcador">Texto asociado al marcador</a>
  • 4. El name ó id de una etiqueta debe ser único, es decir, no puede haber dos etiquetas cuyo name ó id sea el mismo dentro de un documento HTML. Por ejemplo, <a id="marcadorDeportes">Los deportes en aprenderaprogramar.com</a> Por otro lado, el código de un enlace para que salte a un marcador. Pulsa para volver al <a href="#nombre_del_marcador ">Inicio</a> Hay que tener en cuenta que los marcadores distinguen entre mayúsculas y minúsculas. También hay que tener en cuenta que dentro de las etiquetas <a> </a> hay un texto que aparece visible para el usuario, que es el que hemos marcado subrayado en amarillo. No obstante, es válido no incluir texto alguno como veremos en el siguiente código.
  • 5.
  • 6.
  • 7. HIPERVÍNCULOS EXTERNOS. ATRIBUTO HREF. Un hipervínculo externo es un vínculo a otro sitio web en Internet (sitio externo). Es un vínculo a cualquier otro lugar fuera del sitio actual. Cuando ponemos un vínculo externo, escribimos la dirección completa de la página incluido http://www.... Estas rutas que incluyen http://... las denominamos rutas absolutas. Por ejemplo, <a href="http://www.aprenderaprogramar.com">Acceder a la página web aprenderaprogramar.com</a> En el hipervínculo distinguimos las siguientes partes: - Las etiquetas de apertura y cierre del hipervínculo <a> y </a> - El atributo href, con un valor que se indica con el símbolo igual y la URL a la que dirige el hipervínculo dentro de las comillas. - Un texto que es el que ve el usuario como link. Prueba a generar un archivo al que denomines ejemplo.html y en el que incluyas un link como el que hemos visto. El resultado debe ser algo así.