PDF de programación - Creación de enlaces en HTML

Creación de enlaces en HTML

LMSGI, módulo del ciclo de FP de Grado Superior,
Administración de Sistemas Informáticos en Red

LMSGI-Unidad 3-1- Enlaces

Jorge Sánchez, www.jorgesanchez.net

@jorgesancheznet

[1] URLs

LMSGI, módulo del ciclo de FP de Grado Superior,
Administración de Sistemas Informáticos en Red

LMSGI-Unidad 3-1- Enlaces

Jorge Sánchez, www.jorgesanchez.net

@jorgesancheznet

URL

• URL=Uniform Resource Locator, Localizador Uniforme
de Recursos
• Dirección única de un recurso (página, imagen, vídeo,
correo,…) en Internet
• No hay dos URL iguales

LMSGI-Unidad 3-1- Enlaces

Jorge Sánchez, www.jorgesanchez.net

@jorgesancheznet

URL. Cómo funciona

• Partes de una URL:
• Protocolo. Ejemplos:

• http://
• https://
• ftp://
• ftps:/
• mailto:
• file:///

LMSGI-Unidad 3-1- Enlaces

Jorge Sánchez, www.jorgesanchez.net

@jorgesancheznet

URL. Cómo funciona

• Servidor. Nombre (o IP) del servidor que posee el recurso

• www.centrodonbosco.es
• www.google.com
• ftp.gui.uva.es

• Puerto. Nº de puerto que se usa para comunicarse con el
servidor. Si no se indica se usa el 80.
• Ruta. Camino que hay que seguir desde el servidor para llegar
al recurso. Si no se indica se toma el índice de la raíz (/)
• Cadena de búsqueda. Opcional. Parámetros que enviamos al
recurso.

LMSGI-Unidad 3-1- Enlaces

Jorge Sánchez, www.jorgesanchez.net

@jorgesancheznet

URL. Cómo funciona. Ejemplos:

• http://www.elpais.es

• Raíz del servidor http www.elpais.es utilizando el puerto 80
• http://privado.salesianosvillamuriel.com:11111
• Raíz del servidor http indicado pero usando el puerto 11111

• http://privado.salesianosvillamuriel.com:11111/docs/uno.html

• Página web uno.html que está en el directorio docs del servidor indicado (al que se

comunica por el puerto 11111).

• ftp://ftp.aulabosco.es/ejercicios/mates/uno.docx

• Archivo docx que se encuentra en el directorio mates y este en ejercicios en el

servidor indicado al que hay que comunicarse mediante ftp

• mailto:[email protected]

• Email de Jorge Sánchez

LMSGI-Unidad 3-1- Enlaces

Jorge Sánchez, www.jorgesanchez.net

@jorgesancheznet

Caracteres no permitidos en las URL

• http://www.mi página.es Mala URL
• http://www.mi-pagina.es Mucho mejor
• Permitidos:

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9 0 - _ ~ .

LMSGI-Unidad 3-1- Enlaces

Jorge Sánchez, www.jorgesanchez.net

@jorgesancheznet

Caracteres no permitidos en las URL

• Permitidos pero con significado especial:

! # $ % & ‘ ( ) * + , / : ; = ? @ [ ]

• Resto: %Código_Hexadecimal_tabla_ISO_8859_1
• Ejemplo: espacio = %20

LMSGI-Unidad 3-1- Enlaces

Jorge Sánchez, www.jorgesanchez.net

@jorgesancheznet

[2] Enlaces HTML.

Elemento a

LMSGI, módulo del ciclo de FP de Grado Superior,
Administración de Sistemas Informáticos en Red

LMSGI-Unidad 3-1- Enlaces

Jorge Sánchez, www.jorgesanchez.net

@jorgesancheznet

Elemento a, funcionamiento

• Sintaxis básica:

• Ejemplo

• <a href=URL>Texto que realiza el salto</a>

• <a href=“http://www.google.es”>Ir a Google</a>

• Abrir en otra ventana se consigue con el atributo target,
usando target=“_blank”. Ejemplo
• <a href=http://www.google.es target=“_blank”>Ir a Google</a>

LMSGI-Unidad 3-1- Enlaces

Jorge Sánchez, www.jorgesanchez.net

@jorgesancheznet

[3] Enlaces locales

LMSGI, módulo del ciclo de FP de Grado Superior,
Administración de Sistemas Informáticos en Red

LMSGI-Unidad 3-1- Enlaces

Jorge Sánchez, www.jorgesanchez.net

@jorgesancheznet

Enlaces locales

• Hacen saltos a posiciones dentro de nuestro sitio web
• En este caso:

• No se pone el protocolo
• Se indica la ruta hasta el recurso a partir de la página que
hace el salto
• El símbolo .. significa “subir a la carpeta superior”

LMSGI-Unidad 3-1- Enlaces

Jorge Sánchez, www.jorgesanchez.net

@jorgesancheznet

Enlaces locales. Ejemplo

/ (raíz del sitio)

Ruta: europa/pagina1.html

noticias

noticia5.html

europa

pagina1.html

Estamos aquí

Queremos ir aquí

LMSGI-Unidad 3-1- Enlaces

Jorge Sánchez, www.jorgesanchez.net

@jorgesancheznet

Enlaces locales. Ejemplo

/ (raíz del sitio)

Ruta: ../noticia5.html

noticias

noticia5.html

Queremos ir aquí

europa

pagina1.html

Estamos aquí

LMSGI-Unidad 3-1- Enlaces

Jorge Sánchez, www.jorgesanchez.net

@jorgesancheznet

[3] Enlaces internos

LMSGI, módulo del ciclo de FP de Grado Superior,
Administración de Sistemas Informáticos en Red

LMSGI-Unidad 3-1- Enlaces

Jorge Sánchez, www.jorgesanchez.net

@jorgesancheznet

Enlaces internos

• Saltan a una posición concreta dentro de un documento
• Proceso para saltar dentro del propio documento

1. Marcar la posición con el atributo id=valor
2. El salto es #valor

• Si el salto es a otro documento
• Ruta: ruta-al-documento#valor

LMSGI-Unidad 3-1- Enlaces

Jorge Sánchez, www.jorgesanchez.net

@jorgesancheznet

Enlaces internos. Ejemplo

LMSGI-Unidad 3-1- Enlaces

Jorge Sánchez, www.jorgesanchez.net

@jorgesancheznet