Curso Básico de: HTML</>
TEMA # 3
ENLACES EN HTML
Los enlaces son básicamente son aquellos textos subrayados de color azul indispensables para el diseño de una
página web.
Para crear un enlace hay que crear lo siguiente:
1. Creamos una etiqueta a, así de la siguiente manera: <a href=” “></a>
<html>
<head>
<title>Titulo de Nuestra Primera Web</title>
</head>
<body>
<!- -h1 se utiliza para titulares- ->
<h1>Titulo de nuestro documento</h1>
<p>
Creando un párrafo de texto en mi página web con HTML, soy de 4to de Secundaria y junto a mis
compañeros aprendemos el primer curso de HTML Básico para crear estructuras de páginas web
a nivel básico. Sé que mi esfuerzo pronto dará frutos……. Saludos.
Atentamente:
El Autor.
</p>
<a href=” “> Ir a Google</a>
Dentro de esta etiqueta escribe el enlace, por ejemplo: Ir a Google.
Luego actualizamos nuestra página y obtendremos nuestro enlace:
Pero si le damos clic a nuestro enlace no nos enviara a ninguna página web, porque nuestro enlace no está
completamente creado.
Prof. Ernesto Nagashiro M.
Tec. Sistemas Informáticos 10
Curso Básico de: HTML</>
Para que nuestro enlace funcione correctamente tendríamos que agregarle una Url, por ejemplo, la pagina de
Google:
[Link]
esta dirección Url tenemos que copiarla dentro de las camillas de la etiqueta creada, así, por ejemplo:
<a href="[Link] Ir a Google</a>
Así al dar clic sobre el enlace nos enviaría a la página web de Google.
Entonces es importante agregar el protocolo para que así nos envié a la página que deseamos abrir
correctamente, esto lo podemos hacer para cualquier sitio que nosotros queramos con una ruta URL.
También existen rutas absolutas y rutas relativas, en este caso es una ruta absoluta porque es un Link externo
porque es una url definida y ya no va cambiar.
Pero tenemos otros Link con rutas relativas como, por ejemplo, dentro de nuestro sitio web tenemos otra
carpeta llamada imágenes y dentro tenemos una carpeta llamada logo, para acceder a esta debemos crear un
enlace relativo, por ejemplo:
<a href="logos/LogoLST_01.jpg"> ir a la imagen</a>
Al actualizar nuestra pagina web y dar clic en el Link no s aparecer a el logo:
Si nos fijamos bien es una ruta relativa porque estamos ordenándole que desde nuestra carpeta web o desde
nuestro sitio web acceda a la carpeta Logos y que abra el archivo LogoLST_01.jpg.
Esto se puede hacer con cualquier documento, pude ser un archivo de Word, que es de tipo .doc, un archivo de
Power Point, que es de tipo .ppt, y así con otros tipos de archivos.
Lo importante es tener el archivo dentro de tu sitio web (la carpeta de tu sitio web o de tu servidor).
Prof. Ernesto Nagashiro M.
Tec. Sistemas Informáticos 11
Curso Básico de: HTML</>
Ahora para abrir una nueva pestaña en nuestro navegador y así no borrar la ventana anterior hay que realizar
lo siguiente:
A nuestra orden anterior le agregamos el atributo target=”_blank”, así por ejemplo:
<a target="_blank" href="[Link] Ir a Google</a>
Guardamos y actualizamos nuestra pagina web y tenemos el siguiente resultado:
Así se abre otra pestaña con la pagina del buscador de Google, sin que la anterior se borre.
Enlazar archivos o links para Java Script o archivos CSS.
Se realizan de la siguiente manera:
1. Agregamos la etiqueta: <link rel=”stylesheet href=”[Link]”>
Este tipo de etiqueta nos indica que va ser un Link de tipo hoja de cascada eso es lo que significa rel=”stylesheet
Por el momento todavía no lo utilizaremos.
La orden para crear Link con archivos de hojas Script es la siguiente: <script src=”[Link]></script> como
todavía no lo ocuparemos no lo colocamos en nuestro archivo web.
Para agregar el logo(icono) de nuestra página web hacemos lo siguiente:
<link rel=”shortcut icon” type=”image/x-icon” href=”Iconos/LS_01.ico”
Es probable que no notes ningún cambio al actualizar la pagina web esto es por un problema del cache de la
computadora, hay que esperar que lo detecte y actualice para que sepa que esta página tiene un icono.
Para crear un Link y enviar un correo, hay que hacer lo siguiente:
<a href="[Link] title="Enviar correo a contacto">Enviar Mail</a>
Prof. Ernesto Nagashiro M.
Tec. Sistemas Informáticos 12
Curso Básico de: HTML</>
Al guardar la orden y actualizar
nuestra pagina web con nuestro
navegador tenemos lo siguiente:
Al dar clic en la orden Enviar Mail
se nos abre la ventana para
seleccionar por cual servicio se
enviará el correo, por ejemplo:
Google o Outlook.
Ahora esto tiene sus ventajas y desventajas.
Ventajas: que inmediatamente puedes seleccionar y enviar o crear un correo electrónico para enviar la
información.
Desventajas: que los box de internet van a detectar tu email y te pueden enviar correos no deseados como los
spam, por lo pronto no es la mejor manera para hacerlo, hay otras mejores que más adelante se aprenderán.
Eso seria todo en relación a este tema de enlaces….
Prof. Ernesto Nagashiro M.
Tec. Sistemas Informáticos 13