Creación de enlaces en HTML - Jorge Sanchezjorgesanchez.net/presentaciones/lenguajes-de-marcas/pdf/html-enlaces… · LMSGI-Unidad 3-1-Enlaces Jorge Sánchez, @jorgesancheznet Enlaces

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


@jorgesancheznet

[1] URLs



@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


@jorgesancheznet

URL. Cómo funciona

•Partes de una URL:• Protocolo. Ejemplos:

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


@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.


@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


@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 - _ ~ .


@jorgesancheznet

Caracteres no permitidos en las URL

• Permitidos pero con significado especial:! # $ % & ‘ ( ) * + , / : ; = ? @ [ ]

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


@jorgesancheznet

[2] Enlaces HTML. Elemento a



@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>


@jorgesancheznet

[3] Enlaces locales



@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”


@jorgesancheznet

Enlaces locales. Ejemplo

/ (raíz del sitio)

noticias

noticia5.html

Estamos aquí

europa

pagina1.html

Queremos ir aquí

Ruta: europa/pagina1.html


@jorgesancheznet

Enlaces locales. Ejemplo

/ (raíz del sitio)

noticias

noticia5.html

Estamos aquí

europa

pagina1.html

Queremos ir aquí

Ruta: ../noticia5.html


@jorgesancheznet

[3] Enlaces internos



@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


@jorgesancheznet

Enlaces internos. Ejemplo

Documents

Creación de enlaces en HTML - Jorge Sanchezjorgesanchez.net/presentaciones/lenguajes-de-marcas/pdf/html-enlaces… · LMSGI-Unidad 3-1-Enlaces Jorge Sánchez, @jorgesancheznet Enlaces