1
00:00:12,220 --> 00:00:15,580
A continuación vamos a revisar el ejercicio de imágenes en HTML

2
00:00:18,620 --> 00:00:24,830
el objetivo del ejercicio es poner en práctica el concepto de manejo de imágenes en HTML y al finalizar

3
00:00:24,830 --> 00:00:27,080
deberemos observar lo siguiente según se muestra

4
00:00:30,670 --> 00:00:37,210
como primer paso vamos a crear nuestro proyecto llamado imágenes HTML lo depositamos en la ruta mostrada

5
00:00:37,420 --> 00:00:38,830
y damos clic en Finalizar

6
00:00:41,340 --> 00:00:47,990
posteriormente vamos a modificar nuestro archivo índex punto HTML vamos a agregar lo siguiente según

7
00:00:47,990 --> 00:00:54,140
ya hemos trabajado en ejercicios anteriores agregamos el título de manejo de imágenes.

8
00:00:54,140 --> 00:01:01,520
Posteriormente agregamos el body también un título de manejo de imágenes y agregamos un párrafo vamos

9
00:01:01,520 --> 00:01:08,180
a indicar que este párrafo es una imagen así que directamente sobre el párrafo podemos establecer el

10
00:01:08,180 --> 00:01:14,870
uso de imágenes así que por medio de la etiqueta y M.G. y posteriormente por medio del atributo es decir

11
00:01:14,930 --> 00:01:22,700
el atributo de Sors o fuente especificamos la imagen que queremos utilizar en este caso la imagen de

12
00:01:22,700 --> 00:01:30,470
Renacer punto JPG y similar al uso de links podemos establecer la ruta absoluta de esta imagen o si

13
00:01:30,470 --> 00:01:37,190
depositamos esta imagen dentro de nuestro proyecto entonces podemos hacer referencia directamente al

14
00:01:37,190 --> 00:01:38,600
nombre de la imagen.

15
00:01:38,630 --> 00:01:44,150
Sin embargo en este caso no estamos descargando la imagen sino que estamos haciendo una referencia absoluta

16
00:01:44,210 --> 00:01:50,930
a esta imagen así que tenemos estas dos formas para mandar a llamar una imagen utilizando el atributo

17
00:01:50,990 --> 00:01:57,890
de y M.G. posteriormente el atributo de Alt se va a mostrar en caso de que el navegador no pueda visualizar

18
00:01:57,950 --> 00:01:59,320
esta imagen.

19
00:01:59,360 --> 00:02:02,480
Por ello ponemos el valor de Renacer foto.

20
00:02:02,810 --> 00:02:09,460
Posteriormente indicamos de manera opcional el ancho y el alto de esta imagen.

21
00:02:09,500 --> 00:02:15,610
Esto es opcional pero con estos valores podemos modificar tanto el ancho como el alto de la imagen y

22
00:02:15,620 --> 00:02:18,560
también podemos agregar un título a esta imagen.

23
00:02:18,560 --> 00:02:24,380
En algunos navegadores en caso de que posicionamos el cursor sobre la imagen nos va a mostrar el título

24
00:02:24,380 --> 00:02:30,770
de la imagen y podemos observar que esta imagen se encuentra directamente donde está este párrafo así

25
00:02:30,770 --> 00:02:32,180
que vamos a tener el texto.

26
00:02:32,330 --> 00:02:38,630
Posteriormente la imagen y también más texto y de esta manera es como podemos combinar imágenes con

27
00:02:38,630 --> 00:02:45,530
textos cerramos nuestro párrafo y vamos a mostrar otro ejemplo en este caso es una imagen la cual también

28
00:02:45,530 --> 00:02:48,250
vamos a utilizar una ruta absoluta.

29
00:02:48,380 --> 00:02:54,140
Establecemos los valores para el atributo de Alt el cual es el logo de Global mentoring y establecemos

30
00:02:54,410 --> 00:02:56,910
el ancho y el alto de esta imagen.

31
00:02:56,930 --> 00:03:02,660
Estos valores son opcionales si no los establecemos va a tomar los valores por default de la imagen

32
00:03:04,620 --> 00:03:08,450
pero en este caso podemos indicar también algunos otros atributos.

33
00:03:08,490 --> 00:03:14,280
Por ejemplo podemos indicar a este atributo de imagen que alinee la imagen hacia la izquierda y que

34
00:03:14,280 --> 00:03:19,350
además también agregue un espacio a esta imagen para que no se muestre directamente sobre el margen

35
00:03:19,530 --> 00:03:23,810
sino que nos agregue un espacio entre el margen y la imagen que se va a mostrar.

36
00:03:25,340 --> 00:03:31,480
Así que son algunos de los atributos que podemos utilizar cuando estamos trabajando el atributo de MG

37
00:03:33,150 --> 00:03:37,020
y agregamos el texto de inclusión de una imagen en un párrafo

38
00:03:39,740 --> 00:03:45,740
así que dentro de este párrafo esta imagen se va a alinear a la izquierda y va a agregar un espacio

39
00:03:45,740 --> 00:03:52,580
de diez píxeles para que tenga un cierto espacio esta imagen y esté despegada 10 pixeles de la región

40
00:03:52,640 --> 00:03:54,410
donde se establece este párrafo

41
00:03:57,170 --> 00:03:59,660
agregamos dos bregaron dos saltos de línea

42
00:04:02,620 --> 00:04:08,800
y agregamos un último ejemplo en este caso va a ser un link que va a abrir el sitio de Global mentoring

43
00:04:09,010 --> 00:04:15,820
en un nuevo tabulador pero en lugar de tener texto lo que vamos a hacer es que va a ser un botón y este

44
00:04:15,820 --> 00:04:17,890
botón va a ser una imagen.

45
00:04:17,920 --> 00:04:24,670
Para ello vamos a utilizar en lugar de texto el atributo de MG y establecemos la ruta donde se encuentra

46
00:04:24,730 --> 00:04:32,020
esta imagen ya sea relativa o absoluta indicamos algunos atributos más de esta imagen.

47
00:04:32,020 --> 00:04:39,590
Por ejemplo el valor de Halt el valor de ancho el valor de alto y también si se va a alinear.

48
00:04:39,700 --> 00:04:45,520
También indicamos si va a tener un borde esta imagen por medio del atributo Border podemos indicar que

49
00:04:45,520 --> 00:04:53,130
no tenga borde por medio del valor de cero también podemos indicar el título de esta imagen y con eso

50
00:04:53,130 --> 00:05:00,740
terminamos de definir la imagen y también cerramos la etiqueta de hipervínculo y esta es una imagen

51
00:05:00,740 --> 00:05:07,160
que es un link y al dar clic te lleva al sitio de globalmente ahí y con eso cerramos nuestro párrafo

52
00:05:07,720 --> 00:05:10,760
cerramos también tarde body y el tag de HTML.

53
00:05:11,540 --> 00:05:14,500
Recuerden que cualquier problema pueden dar clic en el nombre del archivo.

54
00:05:14,600 --> 00:05:19,340
Sin embargo se le solicita codificar línea a línea para que quede claro este ejercicio de manejo de

55
00:05:19,340 --> 00:05:24,130
imágenes HTML como siguiente paso.

56
00:05:24,170 --> 00:05:28,070
Ejecutamos nuestro proyecto y el resultado es como sigue.

57
00:05:28,070 --> 00:05:32,820
Podemos observar que tenemos la etiqueta de imagen dentro de un párrafo.

58
00:05:33,050 --> 00:05:38,480
También podemos observar que en este caso hemos incluido una imagen pero no está directamente sobre

59
00:05:38,480 --> 00:05:44,840
el margen del párrafo sino que hemos agregado un espacio entre el margen del párrafo y el margen de

60
00:05:44,840 --> 00:05:51,260
la imagen y esta es una inclusión de una imagen de un párrafo que está alineada hacia la izquierda.

61
00:05:51,260 --> 00:05:57,290
Y finalmente agregamos también otra imagen pero si damos clic sobre esta imagen es un link y al dar

62
00:05:57,290 --> 00:05:59,930
clic nos lleva al sitio de Global mentoring.

63
00:06:00,020 --> 00:06:06,530
Así que de esta manera es como podemos hacer uso de imágenes dentro de nuestros documentos HTML y en

64
00:06:06,530 --> 00:06:12,830
el último caso en el caso de la imagen que es un link si damos clic nos lleva al sitio de Global mentoring

65
00:06:14,620 --> 00:06:16,340
como conclusión del ejercicio.

66
00:06:16,360 --> 00:06:20,790
Con este ejercicio hemos puesto en práctica el uso de imágenes en HTML.

67
00:06:20,890 --> 00:06:28,110
Incluso hemos visto cómo podemos crear links a otras páginas utilizando como Link una imagen.

68
00:06:28,240 --> 00:06:33,550
También es posible utilizar una imagen como un botón o cualquier otra imagen que sea representativa

69
00:06:33,550 --> 00:06:36,820
de la acción que queremos convertir en un link.

70
00:06:36,820 --> 00:06:43,570
Esto lo vamos a ver en ejercicios posteriores pero con esto concluimos el ejercicio de imágenes en HTML.