UES

Universidad de El Salvador

Lenguaje para marcado

de Hipertexto
(HyperText Markup Language)

Introducción al HTML (4)

 Universidad de El Salvador
Índice
1. ¿Qué es HTML?
2. Qué software necesita para escribir código HTML
3. Introducción a HTML: crear la primera página
UES

4. HTML básico: cómo estructurar un texto con etiquetas

5. Componer la estructura interna de una página web
con HTML
6. Cómo se puede incluir imágenes, vídeos o gráficos en
tu página web
7. Cómo enlazar páginas y contenidos: la importancia de
los hipervínculos
8. La recta final: lanzar la página online
9. CSS y JavaScript: por qué HTML solo es el comienzo
 Cómo enlazar páginas y contenidos: la
importancia de los hipervínculos
• Los hiperenlaces o hipervínculos, nombre procedente de la voz inglesa
Universidad de El Salvador

"hyperlink" y popularmente conocidos como "links", son la principal razón

del éxito sin precedentes de la world wide web y no pueden faltar en un
curso de introducción a HTML. Sin estas referencias electrónicas
que conducen al usuario de una a otra página o que inician alguna acción,
como podría ser la descarga de un documento, no podría existir una
interconexión como la que ofrece la red de redes. Se pueden distinguir
UES

varios tipos de enlace:

• Internos: los enlaces internos articulan una página web y guían al usuario
en su navegación. Esta estructura interna puede tener diversas formas,
desde una lineal, por ejemplo, en la cual el usuario puede ir de una
subpágina a otra de la web en un determinado orden, a una de tipo
arbóreo, en la que el usuario escoge a dónde ir desde la página principal.
También es posible utilizar enlaces internos en una misma página, cuya
función podría consistir en dirigir al usuario al principio del texto una vez
ha llegado al final.
• Externos: estos son los vínculos que envían al usuario a otra web y se usan
para ofrecerle un valor añadido o recomendar una oferta diferente. En
este caso, si se quiere evitar una valoración negativa en el buscador,
conviene evitar un exceso de enlaces externos, así como también hay que
controlar regularmente la calidad del contenido que se enlaza y el propio
funcionamiento del enlace.
 • Enlaces internos: forma de articular un documento
• Con el tiempo si se profundiza podrá aplicar las nociones
adquiridas en este unidad de HTML en la estructuración de
Universidad de El Salvador
proyectos más complejos, pero antes se comenzaran enlazando
dos páginas. Será necesario crear las paginas que se van a enlazar,
en este caso Indice, uno y dos, y han de guardarse en el mismo
directorio.
• Para generar un vínculo se utiliza la etiqueta de HTML <a>, que
UES

deriva de "anchor", ancla en castellano, y cuya función es

simplemente indicar que la información enmarcada es un enlace.
Esto hace que siempre necesite un atributo, href (hiperreferencia),
que señale a dónde dirige en el enlace. El texto del enlace que el
navegador muestra por defecto en azul y subrayado se escribe
enmarcado entre las etiquetas <a> y </a >.
• Nota: si la página a enlazar no se encuentra en el directorio
principal hay que indicar la ruta que lleva a la subcarpeta donde
está guardada, subcarpeta/uno.html y dos.html En el enlace a la
primera habría que indicar también la subcarpeta y la
página: <a href="../Indice.html">.
• A continuación los códigos de las tres paginas y su ejecución en la
web:
 UES
Universidad de El Salvador
 • Enlazar a contenidos externos
• Para crear un enlace externo en una página no se necesita una
Universidad de El Salvador
etiqueta diferente, pero tampoco es necesario saber en qué
directorio se encuentra la página a enlazar, puesto que referir a
un contenido ajeno solo requiere conocer la dirección web
completa o URL donde se encuentra, que ya contiene toda la
UES

información necesaria. No obstante, como este contenido no

reside en su propio servidor web no tiene ningún tipo de
influencia en la calidad del enlace, por lo que se hace
necesaria una revisión regular.
• Es importante invertir tiempo en la redacción de un texto
preciso y atractivo para el enlace, puesto que palabras vacías
como "aquí" proporcionan al usuario muy poca información
sobre lo que va a encontrar si hace clic en él.
 • La sintaxis para disponer un hipervínculo a otro sitio de internet es:
<a href="http://www.google.com">Buscador Google</a>
• Ahora el atributo href se inicializa con el nombre del dominio del otro
Universidad de El Salvador

sitio.
• Algo importante que hay que anteceder al nombre del dominio es el tipo
de protocolo a utilizar.
• Además de dos puntos (:) y dos barras (//) luego la cadena (www.) y
UES

finalmente el nombre de dominio del sitio a enlazar.

• Qué página retorna del dominio www.google.com ?
• La respuesta es que todo servidor cuando recibe una petición de una
página sin indicar su nombre (es decir sólo está el nombre de dominio)
selecciona y envía una página que tiene configurada el servidor como
página por defecto
• También se puede enlazar a una página determinada de otro sitio. Por
ejemplo, si se quiere disponer un enlace a la pagina about.html de google
la sintaxis será la siguiente:
<a href="http://www.google.com/intl/en/about.html">Acerca de
Google</a>
• Se debe conocer exactamente el nombre de la página y también si la
página no se encuentra en el directorio raiz se debe saber la ruta.
 • En el primer caso, el resultado en la web seria:
Universidad de El Salvador <a href="http://www.google.com">Buscador Google</a>
UES
 • En el segundo caso, el resultado en la web seria:
<a href="http://www.google.com/intl/en/about.html">Acerca
de Google</a>
Universidad de El Salvador
UES
 Hipervínculo mediante una imagen <a> e <img>
Universidad de El Salvador
• Como ya se vio lo de los hipervínculos y como insertar
imágenes en una página, ahora se puede implementar un
hipervínculo pero en vez de mostrar un texto muestre una
imagen.
• La solución es simple y consiste en disponer la marca <img>
UES

encerrada entre la marca de comienzo y fin del enlace(<a>)

• A continuación una página que muestra dos imagenes
(foto1.jpg y foto2.jpg) como hipervínculos. Al ser presionados
llaman a otra página.
• Las imágenes se encuentran en una carpeta llamada imagenes
que esta en el mismo sitio que la pagina
• Como se pudo observar se inserto la marca HTML img en el
lugar donde se disponía el texto del hipervínculo. Eso es todo.
• Lo que debe quedar bien en claro es que las imágenes se
encuentran en un directorio llamado imágenes en el mismo
sitio donde se encuentra la pagina
 Apertura de un hipervínculo en otra instancia del
navegador
• El elemento "a" tiene una propiedad target que permite
Universidad de El Salvador

indicar que la referencia del recurso sea abierto en otra

página.
• Esta propiedad se llama target y se le debe asignar el valor
"_blank" para indicar que el recurso sea abierto en otra
UES

ventana.
• A continuación una página que contenga dos hipervínculos,
el primero abra el sitio en el mismo navegador y el segundo
en otra instancia del navegador.
• Se puede ver la diferencia entre el primer hipervínculo:
<a href="http://www.laprensagrafica.com/">Periódico
La Prensa Grafica</a>
• Y el segundo hipervínculo que indica que el sitio sea abierto
en otra ventana del navegador:
<a href="http://www.elgrafico.com"
target="_blank">Periódico El Grafico</a>
 UES
Universidad de El Salvador
 UES
Universidad de El Salvador
 Enlace con una dirección de correo
• Este es un enlace un poco diferente, veamos un ejemplo
Universidad de El Salvador

• <A HREF="mailto: eguizabal@gmail.com">

eguizabal@gmail.com </A>
• que se ve como eguizabal@gmail.com y que si lo pulsa se
UES

abre el programa de correo que tenga configurado, con la

dirección en el campo correspondiente
Enlace para descargar un archivo
• En la URL se poner la ruta donde está el archivo. Por ejemplo,
para descargar un archivo de nombre guia de html.docx se
debe poner
• <A HREF="guia de html.docx">guia de html.docx</A>
• que se vería así guia de html.docx. Si pulsa sobre él se abrirá
una ventana avisándote de una descarga de archivos y
preguntándote qué desea hacer