creación de enlaces en html - jorge...

LMSGI-Unidad 3-1- EnlacesJorge Sánchez, www.jorgesanchez.net

@jorgesancheznet

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- EnlacesJorge 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- EnlacesJorge 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- EnlacesJorge 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- EnlacesJorge 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- EnlacesJorge 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:info@jorgesanchez.net• Email de Jorge Sánchez

LMSGI-Unidad 3-1- EnlacesJorge Sánchez, www.jorgesanchez.net

@jorgesancheznet

Caracteres no permitidos en las URL

• http://www.mi página.esMala URL• http://www.mi-pagina.esMucho 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 Za b c d e f g h i j k l m n o p q r s t u v w x y z0 1 2 3 4 5 6 7 8 9 0 - _ ~ .

LMSGI-Unidad 3-1- EnlacesJorge 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- EnlacesJorge 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- EnlacesJorge Sánchez, www.jorgesanchez.net

@jorgesancheznet

Elemento a, funcionamiento

•Sintaxis básica:• <a href=URL>Texto que realiza el salto</a>

•Ejemplo• <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- EnlacesJorge 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- EnlacesJorge 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- EnlacesJorge Sánchez, www.jorgesanchez.net

@jorgesancheznet

Enlaces locales. Ejemplo

/ (raíz del sitio)

noticias

noticia5.html

Estamos aquí

europa

pagina1.html

Queremos ir aquí

Ruta: europa/pagina1.html

LMSGI-Unidad 3-1- EnlacesJorge Sánchez, www.jorgesanchez.net

@jorgesancheznet

Enlaces locales. Ejemplo

/ (raíz del sitio)

noticias

noticia5.html

Estamos aquí

europa

pagina1.html

Queremos ir aquí

Ruta: ../noticia5.html

LMSGI-Unidad 3-1- EnlacesJorge 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- EnlacesJorge 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=valor2. El salto es #valor

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

LMSGI-Unidad 3-1- EnlacesJorge Sánchez, www.jorgesanchez.net

@jorgesancheznet

Enlaces internos. Ejemplo