Creación de enlaces en HTML - Jorge...
Transcript of 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:[email protected]• 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