Saltar navegación

Activa JavaScript para disfrutar de los vídeos de la Mediateca.

HTML - Enlaces - Contenido educativo

Ajuste de pantalla

El ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:

Subido el 10 de noviembre de 2020 por Fernando M.

212 visualizaciones

Más información Transcripción

Descargar la transcripción

Bueno, ahora lo que vamos a ver es cómo hacer enlaces en HTML, ¿vale? 00:00:00
Es decir, cómo gestionar lo que es la navegación de la propia web, ¿vale? 00:00:07
Entonces, lo primero para hacer enlaces, como siempre, nosotros nos vamos a nuestro navegador web y nuestro editor de página web. 00:00:12
¿Y qué es lo que vamos a hacer o con qué vamos a empezar? 00:00:28
En primer lugar, como siempre, lo que hacemos es que nos creamos nuestra estructura HTML. 00:00:32
Para eso, HTML 2.5 tabulador. 00:00:41
Y ahora aquí en el título del documento vamos a poner enlaces o hipervínculos en HTML. 00:00:45
Entonces, lo primero que vamos a hacer es meter un texto aleatorio 00:00:55
Recuerdo que para meter un texto aleatorio ponemos lore-nipsum 00:01:02
Vamos a la página web, elegimos un párrafo y le damos a generar 00:01:06
Él nos generará aquí nuestro texto aleatorio 00:01:14
Y este va a ser nuestro texto 00:01:16
Entonces, lo primero que vamos a hacer aquí es poner un encabezado 00:01:18
que vamos a H1, ¿vale? 00:01:22
Y me va a llamar ejemplo de enlaces en HTML, ¿vale? 00:01:24
Y ponemos nuestro primer párrafo, 00:01:29
que va a ser este texto aleatorio que acabamos de generar. 00:01:32
Control-C, Control-V, ¿vale? 00:01:35
Y a esto no me sirve, quito, guardo esto, 00:01:38
actualizo la página y aquí lo veis, ¿vale? 00:01:42
Entonces, vamos a meter ya esa etiqueta de texto aleatorio, 00:01:45
De texto aleatorio, perdón, de enlace, ¿vale? ¿Cuál es la etiqueta de enlace? Pues la etiqueta de enlace es la etiqueta A, ¿vale? Y vamos a ver cómo se utiliza. 00:01:51
No es difícil, ¿vale? Pero tenemos que utilizarla correctamente. Ponemos primero la A, ¿vale? Y a continuación ponemos un espacio y ponemos href, ¿vale? 00:02:01
El argumento href igual y entre comillas vamos a poner a dónde queremos ir, ¿vale? 00:02:13
Luego lo vamos a rellenar, ¿vale? 00:02:20
Y luego vamos a poner otro parámetro que es target igual y fijaros que aquí me da la opción a elegir, ¿vale? 00:02:22
Lo más normal es utilizar la opción barra baja blank, aunque lo dejo para que cada uno pruebe las diferentes, ¿vale? 00:02:30
Y que veáis las diferencias que hay. 00:02:37
cerramos la etiqueta 00:02:38
¿vale? y el texto 00:02:40
que pongamos aquí justo donde está mi cursor 00:02:42
¿vale? será el texto 00:02:45
que sirva como 00:02:47
enlace ¿vale? ponemos aquí 00:02:48
ir al enlace 00:02:50
y entonces yo ahora me voy a 00:02:52
mi navegador 00:02:54
me voy por ejemplo a la Wikipedia 00:02:56
¿vale? y vamos a 00:02:58
buscar un artículo cualquiera 00:03:02
¿vale? por ejemplo este 00:03:04
de Martin Scorsese 00:03:05
Entonces, me voy aquí arriba, esto de aquí es lo que se llama la URL, ¿vale? Lo cojo, control-C, me vengo a href, control-V, ¿vale? Y me sale eso. 00:03:07
Entonces, yo ahora me voy a mi página web, actualizo con el F5 y fijaros que me sale aquí un elemento, un enlace, que si hago clic en él, me lleva a la página web de la Wikipedia de Martin Scorsese, ¿vale? 00:03:20
Eso como primera opción. Eso sería hacer un hipervínculo a un enlace externo. ¿Vale? Ahora lo que vamos a hacer es crear un nuevo hipervínculo a una página web dentro de nuestro directorio. 00:03:37
¿Vale? Recuerdo que nosotros, como podéis ver aquí, ¿vale? Aquí ven mi explorador, ¿vale? Como podéis ver en el explorador, pues yo lo que tengo son cuatro elementos de las prácticas que hemos hecho antes, ¿vale? 00:04:00
Entonces, yo cojo ahora, me creo un texto P aleatorio, un texto P, ¿vale? Voy a copiarme todo esto, ¿vale? Tal y como veis en pantalla. ¿Se está viendo? No, no se está viendo porque tuve falta. Ahora, ¿vale? ¿Veis que lo que he hecho es simplemente copiar el texto aleatorio? ¿Ok? 00:04:16
Y ahora lo que voy a hacer es, sobre este texto aleatorio, voy a coger cualquier palabra, la que sea, y la voy a convertir en un enlace, ¿vale? Vale, pues imaginaros que quiero convertir el adispistín, ¿vale? Esta palabra misma, entonces, como decíamos, menor, etiqueta A, ¿vale? Ponemos href y entre comillas, ¿vale? Vuelvo a poner tarjeta, blank. 00:04:38
Cierro, ¿vale? Y me voy a llevar el Addiscipline, lo voy a poner dentro aquí, ¿vale? Fijaros que este Addiscipline está entre la A y el cierre de A, ¿vale? 00:05:08
Y como enlace, como ruta, voy a poner, por ejemplo, alguna de las páginas que veis aquí, ¿vale? Voy a poner, por ejemplo, Prueba Textos. Pues te lo pongo aquí, prueba-textos.html, ¿vale? 00:05:19
Le doy a guardar, me voy a mi navegador, actualizo, ¿vale? Y fijaros que me sale un nuevo párrafo en el que la palabra a dispisting es el enlace. Si le doy, me lleva a la práctica que hicimos del formato de texto. ¿Vale? ¿Ok? 00:05:32
Vale, cerramos y vamos a ver otra forma más de hacer enlaces, ¿vale? 00:05:55
En este caso vamos a hacer enlaces, pero en vez de estar contenido dentro de la misma carpeta 00:06:03
donde tenemos todos los enlaces, los vamos a hacer a un enlace fuera. 00:06:11
Entonces, para eso lo que vamos a hacer es, dentro de nuestro navegador, 00:06:13
nos vamos a crear una nueva carpeta que vamos a llamar recursos, ¿vale? 00:06:19
Y en esta carpeta recursos me voy a llevar el archivo prueba.html. Me voy a llevar ahí, ¿vale? Entonces, volvemos a hacer el mismo proceso. Me cojo mi texto aleatorio, ¿vale? Lo tengo aquí. Lo pego, lo... control-c, control-v, ¿vale? 00:06:23
Y cuando ya lo tengo pegado, voy a seleccionar dónde voy a poner ese fichero, ¿vale? Ese fichero, pues que lo voy a poner, ese enlace, perdón, pues lo voy a poner en esta palabra, ¿vale? 00:06:47
Entonces, primero me creo el enlace, href, y entre comillas, pues vamos a poner la carpeta recursos, fijaros que ya me autocompleta, ¿vale? Le doy, y ahora me deja elegir el elemento que hay dentro, recursos prueba, ¿vale? 00:07:03
Entonces, fijaros que hay una ruta que es a hr-recursos-prueba, ¿vale? Y ahora ponemos target-plan. Cerramos, ¿vale? Y el facelux me lo llevo aquí dentro, ¿vale? 00:07:18
¿Vale? Actualizo la web y aquí tenéis Facelux. Si yo le doy, me abre la página web de prueba, ¿vale? Siguiente ejemplo. En este caso, dime que... 00:07:39
perdonad que me he dejado el explorador abierto 00:07:54
¿vale? pero bueno, aquí os enseño el código 00:08:00
para que lo veáis lo que he hecho 00:08:02
y podéis ver aquí el navegador 00:08:03
¿vale? en la palabra phaselux 00:08:06
que cuando le doy, pues se abre 00:08:08
la web de pruebas ¿vale? 00:08:10
pero bueno, podéis ver aquí un poquito de lo que he hecho 00:08:11
que básicamente lo que he hecho ha sido 00:08:13
añadir 00:08:15
ese enlace 00:08:16
¿vale? y he puesto como dirección 00:08:19
recursos pruebas 00:08:22
En este caso me ha autocompletado el brackets casi todo, ¿vale? Así que ha sido muy sencillo. 00:08:23
Vale, siguiente prueba que vamos a hacer. Vamos a coger, por ejemplo, un documento PDF, ¿vale? 00:08:30
Que yo tenga... que tengamos por... de algunos apuntes o lo que sea, ¿vale? 00:08:38
Y vamos a crear un enlace a partir de él, ¿vale? 00:08:45
Entonces, yo por ejemplo voy a copiar ese enlace, fijaros, he copiado dentro de la carpeta recursos un documento PDF que se llama html5.pdf, ¿vale? 00:08:49
Entonces, ¿qué hago? Pues sigo el mismo procedimiento. 00:09:05
Me vengo a mi documento, me copio el texto aleatorio, ¿vale? Y ponemos aquí un enlace que ponga a href y ponemos recursos html5.pdf, ¿vale? 00:09:08
Cerramos y ponemos pulse aquí para descargar. Guardamos, abrimos el explorador, ¿vale? Y le damos al F5. Y fijaros que aparece aquí, pulse aquí para descargar. Le damos y automáticamente se nos abre nuestro PDF de HTML, ¿vale? El que yo tenía preparado, ¿vale? 00:09:35
¿Vale? Más cositas, más formas de hacer enlaces. Vamos a imaginarnos que nosotros tenemos un trabajo aquí hecho con encabezados, como los que vimos antes, ¿vale? Yo tengo aquí puesto un encabezado, un H2, que es el capítulo 1, ¿vale? 00:10:03
Y pongo un párrafo de texto aleatorio, ¿vale? De hecho voy a poner varios para que se vea el efecto mejor, ¿vale? Uno ahí, otro ahí, tres párrafos, ¿vale? Ahora pongo un encabezado H2 que sea capítulo 2, ¿vale? 00:10:24
Y pongo, hago ctrl c, ctrl v de más párrafo, hago otro encabezado tipo 2 que sea capítulo 3, ¿vale? Así, ¿vale? De tal forma que si yo esto lo guardo y le doy a actualizar, pues fijaros que aquí se me ve el capítulo 1, más abajo el capítulo 2, más abajo el capítulo 3, ¿vale? 00:10:44
Entonces, incluso vamos a crear un par de encabezados más, capítulo 4, ¿vale? Copio y pego muchas veces el texto, no estoy haciendo nada especial, y otro encabezado 2, que sea el capítulo 5, ¿vale? 00:11:18
Y fijaros que lo que se me ve, pues está bueno, ¿no? Capítulo 1, capítulo 2, 3, 4, hasta el 5, ¿vale? Entonces, vamos a imaginarnos que yo quiero, al inicio del capítulo, justo aquí debajo de pulso aquí para descargar, tener unos enlaces que me lleven directamente a esos capítulos, dentro de esa misma página web, ¿vale? 00:11:39
Entonces, lo que yo voy a hacer es poner mi etiqueta A con mi dirección HR, ¿vale? 00:11:58
Que luego veremos qué es lo que ponemos aquí y pongo aquí, ir al capítulo 1, ¿vale? 00:12:05
Y me voy a copiar esto 5 veces, 4 veces, ¿vale? 00:12:12
Una por capítulo, ahí, ¿vale? 00:12:16
Lo ponemos todo a la misma altura, capítulo 1, capítulo 2, 3, 4 y 5, ¿vale? 00:12:30
¿Qué es? Guardamos los cambios, actualizamos la web, ¿vale? 00:12:38
Fijaros que me salen todos unos continuos del otro. ¿Eso por qué es? 00:12:43
Porque estos elementos no son como elemento párrafo, que me ocupaba toda la página, ¿vale? 00:12:47
Estos simplemente se me van apilando, aunque yo aquí haya hecho salto de línea, ¿vale? 00:12:52
Entonces, ¿qué tengo que hacer? Meter aquí yo manualmente saltos de línea con la etiqueta BR, ¿vale? 00:12:57
Meto mis saltos de línea y ahora, ¿vale? Uy, se ha liado. Y ahora actualizamos, ¿vale? Y fijaros cómo se ve, ¿vale? Ahora sí, ¿vale? ¿Qué pasa? Que si yo le doy a capítulo 1, pues no me lleva a ningún lado porque todavía aquí no he puesto a dónde quiero que me lleve, ¿vale? 00:13:03
Entonces, ¿cómo vamos a hacer esto? Para esto vamos a añadir un nuevo parámetro, ¿vale? Que es el parámetro id, ¿vale? Esto significa, es para darle un identificador único a una etiqueta, ¿vale? 00:13:27
Entonces nosotros donde hemos puesto h2 aquí ponemos un id, ¿vale? Y entre comillas ponemos por ejemplo cap barra baja 1. 00:13:43
Nos vamos al siguiente capítulo y ponemos id y entre comillas cap barra baja 2. 00:13:53
Al capítulo 3, igual, id, entre comillas, cap barra baja 3. Capítulo 4, id, cap barra baja 5. 4, perdón. Y al último, id, cap barra baja 5. ¿Vale? 00:14:00
Ya hemos puesto el identificador a esos encabezados y ahora lo que vamos a hacer es decirle al enlace que vaya a esos identificadores. 00:14:22
¿Cómo hacemos eso? Pues nos venimos a los enlaces y pondríamos aquí el nombre del identificador, en este caso, cap barra baja 1. 00:14:31
Pero ojo, muy importante. Antes de poner el nombre del identificador, ponemos una almohadilla. La almohadilla se pone con la tecla Alt-G-R, que es la que está a la derecha del espacio, y luego el número 3. ¿Vale? 00:14:40
Y esto lo pondríamos para cada uno de los enlaces, pero con cada uno de los capítulos. ¿Vale? Aquí pondríamos CAP2, CAP3, CAP4 y CAP5. Y le damos a guardar. Control-S. 00:14:55
Entonces actualizamos la web, ¿vale? Y fijaros que si yo ahora pulso en capítulo 5, me lleva a la etiqueta del capítulo 5, ¿vale? 00:15:10
Si yo ahora pulso en capítulo 4, me lleva a la etiqueta del capítulo 4, ¿vale? 00:15:21
Entonces ya me da esa versatilidad de volver, ¿vale? 00:15:27
Y tú me dices, vale, Fernando, pero ¿y si yo pulso sobre el capítulo 4, el capítulo 5? ¿Cómo haría yo para volver al inicio? ¿No puedo poner un enlace que me lleve al inicio de la página? Pues claro que puedes. 00:15:31
Te vienes aquí, ¿vale? Justo en el capítulo 5, por ejemplo, y aquí debajo pones un enlace, ¿vale? A href y entre comillas pones únicamente almohadillas, ¿vale? Y pones aquí ir a inicio, ¿vale? Y fíjate, actualizas la página, te sale una opción de ir a inicio que cuando le das te lleva al inicio de la página, ¿vale? 00:15:44
De esta forma puedes navegar indistintamente dentro de tu propia página web. No tienes que irte a páginas web externas, ¿vale? Esto se hace mucho porque últimamente se hacen muchas páginas que son una única página y tú puedes navegar dentro de ella, ¿vale? Ya veremos conforme avance el curso formas de hacer este tipo de navegación, ¿vale? 00:16:12
pues bueno, espero que 00:16:34
que os haya sido útil 00:16:39
y que hayáis visto pues una forma de hacer 00:16:41
enlaces que es muy importante 00:16:43
dentro de lo que es HTML 00:16:45
¿vale? 00:16:46
chao 00:16:47
Autor/es:
Fernando Martínez Martí
Subido por:
Fernando M.
Licencia:
Reconocimiento - No comercial - Compartir igual
Visualizaciones:
212
Fecha:
10 de noviembre de 2020 - 21:06
Visibilidad:
Público
Centro:
IES EL BURGO - IGNACIO ECHEVERRÍA
Duración:
16′ 49″
Relación de aspecto:
1.78:1
Resolución:
1920x1080 píxeles
Tamaño:
84.23 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid