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: ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 01234567890-_~.

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: • Texto que realiza el salto

• Ejemplo • Ir a Google

• Abrir en otra ventana se consigue con el atributo target, usando target=“_blank”. Ejemplo • Ir a Google 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

europa

pagina1.html Queremos ir aquí 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