1
00:00:00,750 --> 00:00:07,030
Bueno, ahora lo que vamos a ver es cómo hacer enlaces en HTML, ¿vale?

2
00:00:07,089 --> 00:00:12,349
Es decir, cómo gestionar lo que es la navegación de la propia web, ¿vale?

3
00:00:12,910 --> 00:00:28,170
Entonces, lo primero para hacer enlaces, como siempre, nosotros nos vamos a nuestro navegador web y nuestro editor de página web.

4
00:00:28,870 --> 00:00:31,710
¿Y qué es lo que vamos a hacer o con qué vamos a empezar?

5
00:00:32,909 --> 00:00:41,250
En primer lugar, como siempre, lo que hacemos es que nos creamos nuestra estructura HTML.

6
00:00:41,570 --> 00:00:44,229
Para eso, HTML 2.5 tabulador.

7
00:00:45,090 --> 00:00:55,189
Y ahora aquí en el título del documento vamos a poner enlaces o hipervínculos en HTML.

8
00:00:55,189 --> 00:01:02,590
Entonces, lo primero que vamos a hacer es meter un texto aleatorio

9
00:01:02,590 --> 00:01:06,049
Recuerdo que para meter un texto aleatorio ponemos lore-nipsum

10
00:01:06,049 --> 00:01:14,069
Vamos a la página web, elegimos un párrafo y le damos a generar

11
00:01:14,069 --> 00:01:16,689
Él nos generará aquí nuestro texto aleatorio

12
00:01:16,689 --> 00:01:18,829
Y este va a ser nuestro texto

13
00:01:18,829 --> 00:01:22,450
Entonces, lo primero que vamos a hacer aquí es poner un encabezado

14
00:01:22,450 --> 00:01:24,049
que vamos a H1, ¿vale?

15
00:01:24,590 --> 00:01:29,349
Y me va a llamar ejemplo de enlaces en HTML, ¿vale?

16
00:01:29,590 --> 00:01:31,450
Y ponemos nuestro primer párrafo,

17
00:01:32,150 --> 00:01:34,950
que va a ser este texto aleatorio que acabamos de generar.

18
00:01:35,349 --> 00:01:38,370
Control-C, Control-V, ¿vale?

19
00:01:38,709 --> 00:01:42,150
Y a esto no me sirve, quito, guardo esto,

20
00:01:42,489 --> 00:01:44,430
actualizo la página y aquí lo veis, ¿vale?

21
00:01:45,409 --> 00:01:51,670
Entonces, vamos a meter ya esa etiqueta de texto aleatorio,

22
00:01:51,670 --> 00:02:01,409
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.

23
00:02:01,409 --> 00:02:13,409
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?

24
00:02:13,409 --> 00:02:20,569
El argumento href igual y entre comillas vamos a poner a dónde queremos ir, ¿vale?

25
00:02:20,669 --> 00:02:22,110
Luego lo vamos a rellenar, ¿vale?

26
00:02:22,509 --> 00:02:29,210
Y luego vamos a poner otro parámetro que es target igual y fijaros que aquí me da la opción a elegir, ¿vale?

27
00:02:30,750 --> 00:02:36,650
Lo más normal es utilizar la opción barra baja blank, aunque lo dejo para que cada uno pruebe las diferentes, ¿vale?

28
00:02:37,069 --> 00:02:38,629
Y que veáis las diferencias que hay.

29
00:02:38,629 --> 00:02:40,509
cerramos la etiqueta

30
00:02:40,509 --> 00:02:42,889
¿vale? y el texto

31
00:02:42,889 --> 00:02:45,110
que pongamos aquí justo donde está mi cursor

32
00:02:45,110 --> 00:02:47,090
¿vale? será el texto

33
00:02:47,090 --> 00:02:48,889
que sirva como

34
00:02:48,889 --> 00:02:50,610
enlace ¿vale? ponemos aquí

35
00:02:50,610 --> 00:02:52,030
ir al enlace

36
00:02:52,030 --> 00:02:54,889
y entonces yo ahora me voy a

37
00:02:54,889 --> 00:02:56,650
mi navegador

38
00:02:56,650 --> 00:02:58,330
me voy por ejemplo a la Wikipedia

39
00:02:58,330 --> 00:03:02,129
¿vale? y vamos a

40
00:03:02,129 --> 00:03:04,009
buscar un artículo cualquiera

41
00:03:04,009 --> 00:03:05,909
¿vale? por ejemplo este

42
00:03:05,909 --> 00:03:07,009
de Martin Scorsese

43
00:03:07,009 --> 00:03:20,090
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.

44
00:03:20,530 --> 00:03:36,889
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?

45
00:03:37,009 --> 00:04:00,530
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.

46
00:04:00,530 --> 00:04:16,050
¿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?

47
00:04:16,050 --> 00:04:38,050
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?

48
00:04:38,050 --> 00:05:07,170
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.

49
00:05:08,050 --> 00:05:19,689
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?

50
00:05:19,689 --> 00:05:32,529
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?

51
00:05:32,529 --> 00:05:55,129
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?

52
00:05:55,129 --> 00:06:03,180
Vale, cerramos y vamos a ver otra forma más de hacer enlaces, ¿vale?

53
00:06:03,699 --> 00:06:11,019
En este caso vamos a hacer enlaces, pero en vez de estar contenido dentro de la misma carpeta

54
00:06:11,019 --> 00:06:13,600
donde tenemos todos los enlaces, los vamos a hacer a un enlace fuera.

55
00:06:13,899 --> 00:06:19,279
Entonces, para eso lo que vamos a hacer es, dentro de nuestro navegador,

56
00:06:19,399 --> 00:06:23,839
nos vamos a crear una nueva carpeta que vamos a llamar recursos, ¿vale?

57
00:06:23,839 --> 00:06:47,610
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?

58
00:06:47,610 --> 00:07:03,230
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?

59
00:07:03,230 --> 00:07:18,949
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?

60
00:07:18,949 --> 00:07:39,810
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?

61
00:07:39,810 --> 00:07:54,250
¿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...

62
00:07:54,250 --> 00:08:00,170
perdonad que me he dejado el explorador abierto

63
00:08:00,170 --> 00:08:02,129
¿vale? pero bueno, aquí os enseño el código

64
00:08:02,129 --> 00:08:03,250
para que lo veáis lo que he hecho

65
00:08:03,250 --> 00:08:06,050
y podéis ver aquí el navegador

66
00:08:06,050 --> 00:08:08,170
¿vale? en la palabra phaselux

67
00:08:08,170 --> 00:08:10,129
que cuando le doy, pues se abre

68
00:08:10,129 --> 00:08:11,250
la web de pruebas ¿vale?

69
00:08:11,610 --> 00:08:13,730
pero bueno, podéis ver aquí un poquito de lo que he hecho

70
00:08:13,730 --> 00:08:15,829
que básicamente lo que he hecho ha sido

71
00:08:15,829 --> 00:08:16,490
añadir

72
00:08:16,490 --> 00:08:19,550
ese enlace

73
00:08:19,550 --> 00:08:22,009
¿vale? y he puesto como dirección

74
00:08:22,009 --> 00:08:23,069
recursos pruebas

75
00:08:23,069 --> 00:08:30,069
En este caso me ha autocompletado el brackets casi todo, ¿vale? Así que ha sido muy sencillo.

76
00:08:30,930 --> 00:08:38,690
Vale, siguiente prueba que vamos a hacer. Vamos a coger, por ejemplo, un documento PDF, ¿vale?

77
00:08:38,730 --> 00:08:45,370
Que yo tenga... que tengamos por... de algunos apuntes o lo que sea, ¿vale?

78
00:08:45,370 --> 00:08:48,610
Y vamos a crear un enlace a partir de él, ¿vale?

79
00:08:49,210 --> 00:09:04,389
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?

80
00:09:05,129 --> 00:09:08,169
Entonces, ¿qué hago? Pues sigo el mismo procedimiento.

81
00:09:08,169 --> 00:09:35,049
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?

82
00:09:35,049 --> 00:10:03,750
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?

83
00:10:03,750 --> 00:10:24,230
¿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?

84
00:10:24,230 --> 00:10:44,940
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?

85
00:10:44,940 --> 00:11:18,019
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?

86
00:11:18,019 --> 00:11:39,049
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?

87
00:11:39,049 --> 00:11:58,639
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?

88
00:11:58,639 --> 00:12:05,139
Entonces, lo que yo voy a hacer es poner mi etiqueta A con mi dirección HR, ¿vale?

89
00:12:05,139 --> 00:12:12,159
Que luego veremos qué es lo que ponemos aquí y pongo aquí, ir al capítulo 1, ¿vale?

90
00:12:12,399 --> 00:12:16,279
Y me voy a copiar esto 5 veces, 4 veces, ¿vale?

91
00:12:16,600 --> 00:12:29,389
Una por capítulo, ahí, ¿vale?

92
00:12:30,389 --> 00:12:36,990
Lo ponemos todo a la misma altura, capítulo 1, capítulo 2, 3, 4 y 5, ¿vale?

93
00:12:38,210 --> 00:12:42,549
¿Qué es? Guardamos los cambios, actualizamos la web, ¿vale?

94
00:12:43,429 --> 00:12:47,210
Fijaros que me salen todos unos continuos del otro. ¿Eso por qué es?

95
00:12:47,250 --> 00:12:52,769
Porque estos elementos no son como elemento párrafo, que me ocupaba toda la página, ¿vale?

96
00:12:52,809 --> 00:12:56,730
Estos simplemente se me van apilando, aunque yo aquí haya hecho salto de línea, ¿vale?

97
00:12:57,149 --> 00:13:03,750
Entonces, ¿qué tengo que hacer? Meter aquí yo manualmente saltos de línea con la etiqueta BR, ¿vale?

98
00:13:03,750 --> 00:13:27,259
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?

99
00:13:27,259 --> 00:13:43,559
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?

100
00:13:43,559 --> 00:13:52,879
Entonces nosotros donde hemos puesto h2 aquí ponemos un id, ¿vale? Y entre comillas ponemos por ejemplo cap barra baja 1.

101
00:13:53,700 --> 00:14:00,279
Nos vamos al siguiente capítulo y ponemos id y entre comillas cap barra baja 2.

102
00:14:00,279 --> 00:14:22,090
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?

103
00:14:22,090 --> 00:14:31,490
Ya hemos puesto el identificador a esos encabezados y ahora lo que vamos a hacer es decirle al enlace que vaya a esos identificadores.

104
00:14:31,649 --> 00:14:40,929
¿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.

105
00:14:40,929 --> 00:14:55,629
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?

106
00:14:55,629 --> 00:15:10,769
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.

107
00:15:10,929 --> 00:15:20,549
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?

108
00:15:21,090 --> 00:15:26,830
Si yo ahora pulso en capítulo 4, me lleva a la etiqueta del capítulo 4, ¿vale?

109
00:15:27,529 --> 00:15:31,950
Entonces ya me da esa versatilidad de volver, ¿vale?

110
00:15:31,950 --> 00:15:44,309
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.

111
00:15:44,309 --> 00:16:12,450
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?

112
00:16:12,450 --> 00:16:34,970
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?

113
00:16:34,970 --> 00:16:39,210
pues bueno, espero que

114
00:16:39,210 --> 00:16:41,129
que os haya sido útil

115
00:16:41,129 --> 00:16:43,149
y que hayáis visto pues una forma de hacer

116
00:16:43,149 --> 00:16:45,070
enlaces que es muy importante

117
00:16:45,070 --> 00:16:46,529
dentro de lo que es HTML

118
00:16:46,529 --> 00:16:47,110
¿vale?

119
00:16:47,110 --> 00:16:48,850
chao