Presentación gráfica del tema Hiperenlaces en HTML. Se incluye una pequeña introducción al tema Lenguaje Informático con el mencionado código. El material está dirigido a estudiantes de 2º año de Educación Media Básica en la asignatura informática. (Es decir para personas de entre 12 y 15 años aproximadamente).

1. Clase de Informática – Lunes 11/12/17.-
2º G – Ciclo Básico Tecnológico
Escuela Técnica Flor de Maroñas
Turno Matutino
Docente: T/A. Gonzalo de Melo Goux

2. HIPERENLACES EN HTML

3. ¿Qué es HTML?
●
HTML es un Lenguaje Informático simple
●
●
●
●
●
Lenguaje Informático (LI): Es aquel que nos sirve para transmitir una
información a un ordenador (computadora) para que éste realice una
acción.
●
HTML es el principal LI utilizado para crear páginas web. El mismo
es interpretado por los Navegadores para poder mostrar las páginas
web.
sdsfdsdfrhgytujuyiuhjhjghj

4. HTML
●
HyperText Markup Language
●
(Lenguaje de Marcas de Hipertexto)
●
Refiere al lenguaje de escritura del texto así como de sus
características (estilo, formato, etc.).
●
Permite incorporar:
–Textos
–Sonidos
–Imágenes
–HIPERENLACES

5. ¿Cómo funciona HTML?
●
Lenguaje de etiquetas:
<p>Párrafo de texto</p>
<h1>Título de un texto</h1>
●
Editor de Textos “plano”
Por ejemplo:
●
●
●
●
Visualización: Navegadores Web
Por ejemplo:
• Block de Notas
• WordPad
• HTML-Kit
• Mozilla Firefox
• Google Chrome
• Internet Explorer

6. ¿Qué es un HIPERENLACE?
Hiperenlace = Hipervínculo = Enlace = Vínculo
Un hiperenlace es un vínculo, que se establece en un texto u otro
elemento contenido en una página web, como ser una imagen, que al
hacer un clic sobre el mismo, el usuario puede acceder a otro texto o
elemento dentro de la misma página o fuera de ella.
Existen varios tipos, permitiendo vincular páginas de un mismo sitio o
de sitios diferentes, archivos, etc.

7. Clasificación de Hiperenlaces:
●
Externos: Dirigidos hacia páginas de otros sitios web
●
Locales: Dirigidos a otras páginas del mismo sitio web
●
Internos: Dirigidos a otra parte de la misma página web
●
Hacia direcciones de correo electrónico: Para crear mensajes de correo
a una dirección específica
●
Hacia archivos: Para poder visualizar y descargar archivos

8. ¿Cómo crear el Hiperenlace?
●
Utilizando la etiqueta: <a>Elemento del enlace</a>
●
En etiqueta de apertura se debe incluir el Atributo:
href=“destino o ruta del enlace”
●
●
Destino o Ruta: Es el sitio hacia donde apunta el enlace, puede ser una
página web, un correo electrónico, un archivo, una imagen, etc.

9. Sintaxis del Hiperenlace
<a href=“destino”>Texto o elemento del enlace</a>
ETIQUETA DE
APERTURA
ELEMENTO DEL ENLACE
ETIQUETA DE CIERRE

10. COMO LO
ESCRIBO…
COMO LO
VEO…

11. Enlaces Externos
●
Destino: Nombre completo o URL de la página a la que se desea
acceder (como aparece en la barra de direcciones del navegador)
●
●
Ejemplo: Enlace a la página web de YouTube
<a href=“https://www.youtube.com/”>Acceder a YouTube</a>

12. PASOS PARA LA CREACIÓN DE UN ENLACE
EXTERNO
1 – Abrir un editor de textos plano.
2 – Escribir la etiqueta de apertura: <a>
4 – Escribir el texto de enlace.
5 – Escribir la etiqueta de cierre: </a>
6 – Guardar el archivo con la extensión .html
3 – Escribir el atributo href=“destino” dentro
de la etiqueta de apertura.

13. PARA VISUALIZAR EL ARCHIVO CON EL ENLACE CREADO….
1 – Clic derecho sobre el ícono del archivo
2 – Seleccionar la opción “abrir con”
3 – Elegir el navegador deseado.

14. Enlaces hacia archivos
●
Se escriben igual que los enlaces externos o locales, pero en vez de
apuntar a un archivo .html, lo hacemos a cualquier otro tipo:
.doc
.jpg
.zip

15. PASOS PARA LA CREACIÓN DE UN ENLACE PARA
ARCHIVO
2 – Abrir un editor de textos plano.
3 – Escribir la etiqueta de apertura: <a>
5 – Escribir el texto de enlace.
6 – Escribir la etiqueta de cierre: </a>
7 – Guardar el archivo con la extensión .html en la carpeta creada
1 – Crear una carpeta
4 – Escribir el atributo href=“destino” dentro de la etiqueta de
apertura.

16. RECORDEMOS LOS PASOS…
Abrir un editor de textos plano.
Escribir la etiqueta de apertura: <a>
Escribir el texto de enlace.
Escribir la etiqueta de cierre: </a>
Guardar el archivo con la extensión .html
Escribir el atributo href=“destino” dentro de
la etiqueta de apertura.

17. Enlaces Locales
●
En este caso, se desea acceder a otra página pero DEL MISMO sitio
web.
●
Destino: Debemos indicar la “ruta” que conecta una página con la otra
(las cuales se encuentran dentro de la misma carpeta).
●
Bajar nivel: nombrecarpeta/archivo.html
●
Subir nivel: ../

18. Enlaces internos
●
Acceder a otra parte de la misma página.
●
●
Se indica el orígen y el destino.
●
●
En ORIGEN:
<a href=“#destino”>Texto del enlace</a>
●
●
En DESTINO:
<a name=“destino”>Texto del destino</a>

19. Enlaces hacia direcciones de correo electrónico
●
Abre el programa de correo electrónico que se tenga instalado, listo
para escribir el mail dirigido a la dirección a la que lo debemos enviar.
●
<a href=“mailto:correo@servidor.com”>Manda un mail</a>

20. FIN