Saltar navegación

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

Insertar código para hacer un link en una imagen - 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 4 de septiembre de 2022 por Felicisimo G.

620 visualizaciones

Más información Transcripción

Descargar la transcripción

Buenos días, vamos a hacer un vídeo tutorial para insertar código html 00:00:00
porque en los libros del aula virtual 00:00:06
de educa madrid pues encontramos que no podemos poner una imagen con un link o por lo menos yo no sé hacer entonces 00:00:09
vemos que si pasamos por texto si tenemos un link 00:00:16
pero cuando pasamos por una imagen nada está 00:00:21
y realmente muchas veces vemos una imagen y ya es muy intuitivo ir a hacer 00:00:25
el link a donde nos lleva esa imagen y aquí sin embargo tenemos que andar con el texto que no pasa nada 00:00:32
bueno tenemos el modo de edición 00:00:38
estamos en un libro del aula virtual 00:00:41
Ahora vamos a ver lo que nos pasa yo cuando tengo una imagen cuando pongo una imagen 00:00:46
quiero que vaya esa imagen a ese hipervínculo 00:00:51
seleccionó la imagen le doy al signo de hipervínculo pero ahí vemos que es texto para mostrar 00:00:57
pego la 00:01:03
dirección url quiero que abran una nueva ventana y me cambia la imagen por texto y realmente muchas veces 00:01:05
pues queremos tener imágenes porque hace más atractiva y porque es más moderno 00:01:12
Entonces bueno pues vamos a ver cómo podemos solucionar esa situación 00:01:17
esa situación lo solucionamos metiendo un código html 00:01:22
este código html no es que lo haya inventado yo, es que esto viene en internet 00:01:28
pones cómo conseguir una imagen, abra un link y te sale y bueno y tiene sus cosas del código html 00:01:32
pues viene el título, viene la página donde queremos 00:01:38
Hacer ese link y viene también la imagen 00:01:43
que va a contener ese link 00:01:48
bueno pues esas tres cosas esas tres líneas 00:01:50
esos tres aspectos del código html es lo que tenemos que tener en cuenta 00:01:53
lógicamente no se llamará juego nuestra imagen ni nos llevará a este tipo de juego 00:01:58
que es limpia el bosque ni la imagen que tengo yo pues la que haya cada vez pondremos una imagen diferente 00:02:05
bueno pues vamos a ver, nos vamos al código 00:02:12
hay que seleccionar dónde vamos a colocar ese código 00:02:15
en este caso es muy sencillo porque es lo primero que nos encontramos 00:02:19
que además es una imagen porque la tengo ahí centrada 00:02:23
y luego veo la imagen, Aulates, Educa, bueno todo eso 00:02:27
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 00:02:31
la pegamos y ahora vamos a ir cambiando los datos 00:02:39
bueno pues imagino que lo primero que cambiaré será el título 00:02:45
ya no lo voy a llamar juego 00:02:49
en este caso es un juego pero es el pasapalabra 00:02:51
bueno le cambiamos, no es necesario cambiar el título pero bueno 00:02:55
luego la dirección donde vamos a ir no es limpia el bosque 00:02:59
sino es un juego que se llama pasapalabra 00:03:03
quitamos todo menos la comilla, o sea quitamos lo que es la dirección 00:03:06
aquí, ahí ya la tengo, la copio y la pego 00:03:11
pero no quito nada, o sea yo tengo que quitar o cambiar solo lo específico 00:03:15
pues aquí tenemos https y ahí es pasapalabra 00:03:20
y lo hemos dejado dentro de esas comillas 00:03:24
y ahora eso, con la imagen me tengo que llevar todo hasta donde tenemos la A 00:03:26
que cierra ese bloque 00:03:32
lo quitamos y cojo lo mismo desde la imagen hasta el final 00:03:34
hasta el final que es textbutton, ahí 00:03:40
todo eso me lo tengo que llevar 00:03:43
imagino que lo cortaré en vez de arrastrarlo 00:03:46
y lo coloco en su sitio 00:03:50
pero lo tengo que colocar donde estaba la otra imagen 00:03:53
vale pues yo creo que ahí ya está, imagino que podré probarlo 00:03:58
y bueno esta parte de arriba la quito y entonces ya la imagen no va a estar centrada 00:04:03
es un poquito rollo, pero es que tener una imagen y no poderle poner un link 00:04:08
nos queda un poquito, lo guardamos y vamos a ver si funciona 00:04:15
tenemos eso, además al tener ese triangulito pues ya te llama la atención 00:04:19
de que quieres ir y ya tenemos construido un link 00:04:25
pero no tenemos un botoncito como podemos tener en otros que pueden insertar y tal 00:04:28
aquí lo tenemos que escribir ese código fuente 00:04:33
bueno escribirlo, tenemos que copiar, pegar y variar 00:04:36
pues ahora lo mismo con Erasmus 00:04:39
en Erasmus pasamos, queremos ir a la página de Erasmus por información 00:04:41
y no podemos ir, tenemos que ir al texto que nos lleva a ese link 00:04:45
la verdad que lo que estamos haciendo tampoco es nada del otro mundo 00:04:50
pero es bueno intentar hacerlo un poquito más atractivo 00:04:54
pues vamos a editar, donde podemos modificar el código html 00:04:57
nos vamos a buscar donde tenemos para leer el código html 00:05:02
que es el simbolito S que teníamos un paréntesis cerrado y abierto 00:05:11
y vamos a repetir el mismo proceso 00:05:17
bueno pues nos iremos ahí al código imagino 00:05:25
en el código tenemos la imagen que está centrada 00:05:31
nos cogemos el código html, el anterior que teníamos 00:05:35
ese es uno que ya tenemos y que lo vamos modificando según sea la imagen 00:05:39
que queramos poner, el único problema también que tenemos que tener muy claro 00:05:44
donde insertamos ese código 00:05:48
porque aquí es muy fácil que es al principio 00:05:50
como lo queremos meter a mitad de página 00:05:52
bueno pues ya tenemos que tener claro 00:05:54
en cuál de estos números estamos trabajando 00:05:56
dentro de una tabla pues también pasa lo mismo 00:05:59
bueno pues imagino que pegaré el código 00:06:01
título, pues lo cambiamos 00:06:04
por no seguir con el mismo título de juego 00:06:06
pues en este caso Erasmus Plus 00:06:08
aquí vemos que la dirección a la que vamos 00:06:10
es a juegos, otra vez, limpia el bosque 00:06:15
pero aquí no, aquí vamos a ver 00:06:17
donde nos vamos 00:06:19
pues nos vamos a la página del sepie 00:06:21
educación escolar 00:06:23
y nos cogemos la dirección url 00:06:25
la copiamos 00:06:27
vemos que no lleva el http 00:06:29
pero bueno, ya cuando se pega 00:06:31
pues ahí la quitamos 00:06:33
pero entre las comillas 00:06:35
no podemos quitar una comilla 00:06:37
o no podemos poner otro símbolo 00:06:39
entonces ya no funciona el código 00:06:41
y le pegamos 00:06:45
entre las dos comillas 00:06:47
pues ya tenemos que va a nuestro 00:06:49
a nuestra página 00:06:51
con Erasmus 00:06:53
la tenemos en blanco 00:06:55
que significa que se va a abrir en una pestaña nueva 00:06:57
que también es muy importante 00:06:59
hemos quitado la imagen 00:07:01
pero veis que ahora cogemos ahí una que viene imagen 00:07:03
desde donde se abre 00:07:05
hasta donde se cierra 00:07:07
está ahí, perfecto 00:07:09
la copiamos 00:07:11
cortamos mejor 00:07:13
pues ya no tendríamos las dos 00:07:15
y pegamos 00:07:17
vale, y ahí quitamos esto que 00:07:19
está centrado 00:07:21
y ahora ya centraremos con el botoncito 00:07:23
que los botoncitos pues son muy útiles 00:07:25
pero en este caso 00:07:27
no tenemos un botón, yo no lo encuentro 00:07:29
donde tengas una imagen 00:07:31
le des a ese botoncito 00:07:33
le pongas una dirección url 00:07:35
y ya te hace el link 00:07:37
ya lo tenemos centradito 00:07:39
tenemos que funciona 00:07:41
ahora ya cuando le demos a guardar cambios 00:07:43
pues vamos a ver 00:07:45
ya vemos que 00:07:47
ese link, el de texto funciona 00:07:49
que nos lleva a la página 00:07:51
de Erasmus Plus, pero concretamente 00:07:53
el que nosotros hemos puesto pues nos va a llegar 00:07:55
al apartado de educación escolar 00:07:57
bueno pues ya está funcional 00:08:01
a ver 00:08:03
¿lo tenemos que hacer en todas las imágenes? 00:08:05
no, pero es que realmente hay veces que hay imágenes 00:08:07
pues que te llaman la atención 00:08:09
de querer apretar 00:08:11
y que te sirvan de link 00:08:13
por ejemplo 00:08:15
aquí mira, pues en Evalum 00:08:17
no lo tenemos, se ve ahí que 00:08:19
en Evalum tenemos texto 00:08:21
y vamos a ir a por él 00:08:23
pero muchas veces es lo que digo 00:08:25
mira aquí en Madrid te vas a esa imagen 00:08:27
quieres ir a la página de 00:08:29
Madrid y sin embargo pues tendrás que 00:08:31
usar un link que tengamos por ahí 00:08:33
en la página, pero 00:08:35
no vale, entonces lo que tendríamos 00:08:37
que hacer es lo mismo, copiamos este 00:08:39
trocito de código, cogemos esa 00:08:41
imagen y le decimos que nos 00:08:43
lleve a la página principal de 00:08:45
Madrid, bueno pues espero 00:08:47
que os haya sido 00:08:49
de utilidad, muchas gracias 00:08:51
Idioma/s:
es
Autor/es:
Felicísimo González Canle
Subido por:
Felicisimo G.
Licencia:
Reconocimiento - No comercial - Compartir igual
Visualizaciones:
620
Fecha:
4 de septiembre de 2022 - 12:30
Visibilidad:
Público
Centro:
EST ADMI D.G. DE BILINGÜISMO Y CALIDAD DE LA ENSEÑANZA
Duración:
08′ 54″
Relación de aspecto:
1.78:1
Resolución:
854x480 píxeles
Tamaño:
63.45 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid