0
00:00:00,000 --> 00:00:05,000
Buenos días, vamos a hacer un vídeo tutorial para insertar código html

1
00:00:06,000 --> 00:00:08,000
porque en los libros del aula virtual

2
00:00:09,000 --> 00:00:15,000
de educa madrid pues encontramos que no podemos poner una imagen con un link o por lo menos yo no sé hacer entonces

3
00:00:16,000 --> 00:00:20,000
vemos que si pasamos por texto si tenemos un link

4
00:00:21,000 --> 00:00:24,000
pero cuando pasamos por una imagen nada está

5
00:00:25,000 --> 00:00:31,000
y realmente muchas veces vemos una imagen y ya es muy intuitivo ir a hacer

6
00:00:32,000 --> 00:00:38,000
el link a donde nos lleva esa imagen y aquí sin embargo tenemos que andar con el texto que no pasa nada

7
00:00:38,000 --> 00:00:40,000
bueno tenemos el modo de edición

8
00:00:41,000 --> 00:00:43,000
estamos en un libro del aula virtual

9
00:00:44,000 --> 00:00:46,000
y

10
00:00:46,000 --> 00:00:51,000
Ahora vamos a ver lo que nos pasa yo cuando tengo una imagen cuando pongo una imagen

11
00:00:51,000 --> 00:00:56,000
quiero que vaya esa imagen a ese hipervínculo

12
00:00:57,000 --> 00:01:03,000
seleccionó la imagen le doy al signo de hipervínculo pero ahí vemos que es texto para mostrar

13
00:01:03,000 --> 00:01:05,000
pego la

14
00:01:05,000 --> 00:01:11,000
dirección url quiero que abran una nueva ventana y me cambia la imagen por texto y realmente muchas veces

15
00:01:12,000 --> 00:01:16,000
pues queremos tener imágenes porque hace más atractiva y porque es más moderno

16
00:01:17,000 --> 00:01:22,000
Entonces bueno pues vamos a ver cómo podemos solucionar esa situación

17
00:01:22,000 --> 00:01:27,000
esa situación lo solucionamos metiendo un código html

18
00:01:28,000 --> 00:01:32,000
este código html no es que lo haya inventado yo, es que esto viene en internet

19
00:01:32,000 --> 00:01:38,000
pones cómo conseguir una imagen, abra un link y te sale y bueno y tiene sus cosas del código html

20
00:01:38,000 --> 00:01:42,000
pues viene el título, viene la página donde queremos

21
00:01:43,000 --> 00:01:47,000
Hacer ese link y viene también la imagen

22
00:01:48,000 --> 00:01:50,000
que va a contener ese link

23
00:01:50,000 --> 00:01:52,000
bueno pues esas tres cosas esas tres líneas

24
00:01:53,000 --> 00:01:57,000
esos tres aspectos del código html es lo que tenemos que tener en cuenta

25
00:01:58,000 --> 00:02:04,000
lógicamente no se llamará juego nuestra imagen ni nos llevará a este tipo de juego

26
00:02:05,000 --> 00:02:12,000
que es limpia el bosque ni la imagen que tengo yo pues la que haya cada vez pondremos una imagen diferente

27
00:02:12,000 --> 00:02:14,000
bueno pues vamos a ver, nos vamos al código

28
00:02:15,000 --> 00:02:19,000
hay que seleccionar dónde vamos a colocar ese código

29
00:02:19,000 --> 00:02:22,000
en este caso es muy sencillo porque es lo primero que nos encontramos

30
00:02:23,000 --> 00:02:26,000
que además es una imagen porque la tengo ahí centrada

31
00:02:27,000 --> 00:02:31,000
y luego veo la imagen, Aulates, Educa, bueno todo eso

32
00:02:31,000 --> 00:02:38,000
bueno pues yo coloco esta línea de código html que ya digo que no la he inventado yo, que esto ya está en internet

33
00:02:39,000 --> 00:02:45,000
la pegamos y ahora vamos a ir cambiando los datos

34
00:02:45,000 --> 00:02:49,000
bueno pues imagino que lo primero que cambiaré será el título

35
00:02:49,000 --> 00:02:51,000
ya no lo voy a llamar juego

36
00:02:51,000 --> 00:02:55,000
en este caso es un juego pero es el pasapalabra

37
00:02:55,000 --> 00:02:59,000
bueno le cambiamos, no es necesario cambiar el título pero bueno

38
00:02:59,000 --> 00:03:03,000
luego la dirección donde vamos a ir no es limpia el bosque

39
00:03:03,000 --> 00:03:06,000
sino es un juego que se llama pasapalabra

40
00:03:06,000 --> 00:03:11,000
quitamos todo menos la comilla, o sea quitamos lo que es la dirección

41
00:03:11,000 --> 00:03:15,000
aquí, ahí ya la tengo, la copio y la pego

42
00:03:15,000 --> 00:03:20,000
pero no quito nada, o sea yo tengo que quitar o cambiar solo lo específico

43
00:03:20,000 --> 00:03:24,000
pues aquí tenemos https y ahí es pasapalabra

44
00:03:24,000 --> 00:03:26,000
y lo hemos dejado dentro de esas comillas

45
00:03:26,000 --> 00:03:32,000
y ahora eso, con la imagen me tengo que llevar todo hasta donde tenemos la A

46
00:03:32,000 --> 00:03:34,000
que cierra ese bloque

47
00:03:34,000 --> 00:03:40,000
lo quitamos y cojo lo mismo desde la imagen hasta el final

48
00:03:40,000 --> 00:03:43,000
hasta el final que es textbutton, ahí

49
00:03:43,000 --> 00:03:46,000
todo eso me lo tengo que llevar

50
00:03:46,000 --> 00:03:50,000
imagino que lo cortaré en vez de arrastrarlo

51
00:03:50,000 --> 00:03:53,000
y lo coloco en su sitio

52
00:03:53,000 --> 00:03:58,000
pero lo tengo que colocar donde estaba la otra imagen

53
00:03:58,000 --> 00:04:03,000
vale pues yo creo que ahí ya está, imagino que podré probarlo

54
00:04:03,000 --> 00:04:08,000
y bueno esta parte de arriba la quito y entonces ya la imagen no va a estar centrada

55
00:04:08,000 --> 00:04:15,000
es un poquito rollo, pero es que tener una imagen y no poderle poner un link

56
00:04:15,000 --> 00:04:19,000
nos queda un poquito, lo guardamos y vamos a ver si funciona

57
00:04:19,000 --> 00:04:25,000
tenemos eso, además al tener ese triangulito pues ya te llama la atención

58
00:04:25,000 --> 00:04:28,000
de que quieres ir y ya tenemos construido un link

59
00:04:28,000 --> 00:04:33,000
pero no tenemos un botoncito como podemos tener en otros que pueden insertar y tal

60
00:04:33,000 --> 00:04:36,000
aquí lo tenemos que escribir ese código fuente

61
00:04:36,000 --> 00:04:39,000
bueno escribirlo, tenemos que copiar, pegar y variar

62
00:04:39,000 --> 00:04:41,000
pues ahora lo mismo con Erasmus

63
00:04:41,000 --> 00:04:45,000
en Erasmus pasamos, queremos ir a la página de Erasmus por información

64
00:04:45,000 --> 00:04:50,000
y no podemos ir, tenemos que ir al texto que nos lleva a ese link

65
00:04:50,000 --> 00:04:54,000
la verdad que lo que estamos haciendo tampoco es nada del otro mundo

66
00:04:54,000 --> 00:04:57,000
pero es bueno intentar hacerlo un poquito más atractivo

67
00:04:57,000 --> 00:05:02,000
pues vamos a editar, donde podemos modificar el código html

68
00:05:02,000 --> 00:05:11,000
nos vamos a buscar donde tenemos para leer el código html

69
00:05:11,000 --> 00:05:17,000
que es el simbolito S que teníamos un paréntesis cerrado y abierto

70
00:05:17,000 --> 00:05:24,000
y vamos a repetir el mismo proceso

71
00:05:25,000 --> 00:05:29,000
bueno pues nos iremos ahí al código imagino

72
00:05:31,000 --> 00:05:35,000
en el código tenemos la imagen que está centrada

73
00:05:35,000 --> 00:05:39,000
nos cogemos el código html, el anterior que teníamos

74
00:05:39,000 --> 00:05:44,000
ese es uno que ya tenemos y que lo vamos modificando según sea la imagen

75
00:05:44,000 --> 00:05:48,000
que queramos poner, el único problema también que tenemos que tener muy claro

76
00:05:48,000 --> 00:05:50,000
donde insertamos ese código

77
00:05:50,000 --> 00:05:52,000
porque aquí es muy fácil que es al principio

78
00:05:52,000 --> 00:05:54,000
como lo queremos meter a mitad de página

79
00:05:54,000 --> 00:05:56,000
bueno pues ya tenemos que tener claro

80
00:05:56,000 --> 00:05:59,000
en cuál de estos números estamos trabajando

81
00:05:59,000 --> 00:06:01,000
dentro de una tabla pues también pasa lo mismo

82
00:06:01,000 --> 00:06:04,000
bueno pues imagino que pegaré el código

83
00:06:04,000 --> 00:06:06,000
título, pues lo cambiamos

84
00:06:06,000 --> 00:06:08,000
por no seguir con el mismo título de juego

85
00:06:08,000 --> 00:06:10,000
pues en este caso Erasmus Plus

86
00:06:10,000 --> 00:06:15,000
aquí vemos que la dirección a la que vamos

87
00:06:15,000 --> 00:06:17,000
es a juegos, otra vez, limpia el bosque

88
00:06:17,000 --> 00:06:19,000
pero aquí no, aquí vamos a ver

89
00:06:19,000 --> 00:06:21,000
donde nos vamos

90
00:06:21,000 --> 00:06:23,000
pues nos vamos a la página del sepie

91
00:06:23,000 --> 00:06:25,000
educación escolar

92
00:06:25,000 --> 00:06:27,000
y nos cogemos la dirección url

93
00:06:27,000 --> 00:06:29,000
la copiamos

94
00:06:29,000 --> 00:06:31,000
vemos que no lleva el http

95
00:06:31,000 --> 00:06:33,000
pero bueno, ya cuando se pega

96
00:06:33,000 --> 00:06:35,000
pues ahí la quitamos

97
00:06:35,000 --> 00:06:37,000
pero entre las comillas

98
00:06:37,000 --> 00:06:39,000
no podemos quitar una comilla

99
00:06:39,000 --> 00:06:41,000
o no podemos poner otro símbolo

100
00:06:41,000 --> 00:06:45,000
entonces ya no funciona el código

101
00:06:45,000 --> 00:06:47,000
y le pegamos

102
00:06:47,000 --> 00:06:49,000
entre las dos comillas

103
00:06:49,000 --> 00:06:51,000
pues ya tenemos que va a nuestro

104
00:06:51,000 --> 00:06:53,000
a nuestra página

105
00:06:53,000 --> 00:06:55,000
con Erasmus

106
00:06:55,000 --> 00:06:57,000
la tenemos en blanco

107
00:06:57,000 --> 00:06:59,000
que significa que se va a abrir en una pestaña nueva

108
00:06:59,000 --> 00:07:01,000
que también es muy importante

109
00:07:01,000 --> 00:07:03,000
hemos quitado la imagen

110
00:07:03,000 --> 00:07:05,000
pero veis que ahora cogemos ahí una que viene imagen

111
00:07:05,000 --> 00:07:07,000
desde donde se abre

112
00:07:07,000 --> 00:07:09,000
hasta donde se cierra

113
00:07:09,000 --> 00:07:11,000
está ahí, perfecto

114
00:07:11,000 --> 00:07:13,000
la copiamos

115
00:07:13,000 --> 00:07:15,000
cortamos mejor

116
00:07:15,000 --> 00:07:17,000
pues ya no tendríamos las dos

117
00:07:17,000 --> 00:07:19,000
y pegamos

118
00:07:19,000 --> 00:07:21,000
vale, y ahí quitamos esto que

119
00:07:21,000 --> 00:07:23,000
está centrado

120
00:07:23,000 --> 00:07:25,000
y ahora ya centraremos con el botoncito

121
00:07:25,000 --> 00:07:27,000
que los botoncitos pues son muy útiles

122
00:07:27,000 --> 00:07:29,000
pero en este caso

123
00:07:29,000 --> 00:07:31,000
no tenemos un botón, yo no lo encuentro

124
00:07:31,000 --> 00:07:33,000
donde tengas una imagen

125
00:07:33,000 --> 00:07:35,000
le des a ese botoncito

126
00:07:35,000 --> 00:07:37,000
le pongas una dirección url

127
00:07:37,000 --> 00:07:39,000
y ya te hace el link

128
00:07:39,000 --> 00:07:41,000
ya lo tenemos centradito

129
00:07:41,000 --> 00:07:43,000
tenemos que funciona

130
00:07:43,000 --> 00:07:45,000
ahora ya cuando le demos a guardar cambios

131
00:07:45,000 --> 00:07:47,000
pues vamos a ver

132
00:07:47,000 --> 00:07:49,000
ya vemos que

133
00:07:49,000 --> 00:07:51,000
ese link, el de texto funciona

134
00:07:51,000 --> 00:07:53,000
que nos lleva a la página

135
00:07:53,000 --> 00:07:55,000
de Erasmus Plus, pero concretamente

136
00:07:55,000 --> 00:07:57,000
el que nosotros hemos puesto pues nos va a llegar

137
00:07:57,000 --> 00:07:59,000
al apartado de educación escolar

138
00:08:01,000 --> 00:08:03,000
bueno pues ya está funcional

139
00:08:03,000 --> 00:08:05,000
a ver

140
00:08:05,000 --> 00:08:07,000
¿lo tenemos que hacer en todas las imágenes?

141
00:08:07,000 --> 00:08:09,000
no, pero es que realmente hay veces que hay imágenes

142
00:08:09,000 --> 00:08:11,000
pues que te llaman la atención

143
00:08:11,000 --> 00:08:13,000
de querer apretar

144
00:08:13,000 --> 00:08:15,000
y que te sirvan de link

145
00:08:15,000 --> 00:08:17,000
por ejemplo

146
00:08:17,000 --> 00:08:19,000
aquí mira, pues en Evalum

147
00:08:19,000 --> 00:08:21,000
no lo tenemos, se ve ahí que

148
00:08:21,000 --> 00:08:23,000
en Evalum tenemos texto

149
00:08:23,000 --> 00:08:25,000
y vamos a ir a por él

150
00:08:25,000 --> 00:08:27,000
pero muchas veces es lo que digo

151
00:08:27,000 --> 00:08:29,000
mira aquí en Madrid te vas a esa imagen

152
00:08:29,000 --> 00:08:31,000
quieres ir a la página de

153
00:08:31,000 --> 00:08:33,000
Madrid y sin embargo pues tendrás que

154
00:08:33,000 --> 00:08:35,000
usar un link que tengamos por ahí

155
00:08:35,000 --> 00:08:37,000
en la página, pero

156
00:08:37,000 --> 00:08:39,000
no vale, entonces lo que tendríamos

157
00:08:39,000 --> 00:08:41,000
que hacer es lo mismo, copiamos este

158
00:08:41,000 --> 00:08:43,000
trocito de código, cogemos esa

159
00:08:43,000 --> 00:08:45,000
imagen y le decimos que nos

160
00:08:45,000 --> 00:08:47,000
lleve a la página principal de

161
00:08:47,000 --> 00:08:49,000
Madrid, bueno pues espero

162
00:08:49,000 --> 00:08:51,000
que os haya sido

163
00:08:51,000 --> 00:08:53,000
de utilidad, muchas gracias