1
00:00:00,750 --> 00:00:11,849
Vale, pues ahora vamos a ver cómo añadir imágenes dentro de nuestra página web. Para ello, lo primero que vamos a hacer es crear una nueva estructura de directorio.

2
00:00:11,849 --> 00:00:30,989
Entonces, nos vamos a ir a nuestro navegador y dentro de nuestro explorador de ficheros, como el que veis en pantalla, igual que creamos la carpeta recursos, vamos a crear una nueva carpeta que se va a llamar images, porque es muy normal crear una única carpeta donde metamos todas las imágenes de la página.

3
00:00:30,989 --> 00:00:33,969
¿vale? entonces nos vamos a ir

4
00:00:33,969 --> 00:00:34,369
a

5
00:00:34,369 --> 00:00:37,409
nuestro navegador web

6
00:00:37,409 --> 00:00:39,750
y vamos a irnos por ejemplo

7
00:00:39,750 --> 00:00:41,969
a Pixabay, pixabay.com

8
00:00:41,969 --> 00:00:43,729
¿vale? ya hemos trabajado con ella, hemos

9
00:00:43,729 --> 00:00:45,750
descargado imágenes y vamos a descargar

10
00:00:45,750 --> 00:00:48,070
3 imágenes, cualquiera, 3 imágenes que os gusten

11
00:00:48,070 --> 00:00:49,850
¿vale? y voy a descargar por ejemplo

12
00:00:49,850 --> 00:00:51,590
esta del molino, el mono

13
00:00:51,590 --> 00:00:53,090
que es gracioso y

14
00:00:53,090 --> 00:00:54,990
esta de

15
00:00:54,990 --> 00:00:57,189
Florencia creo que es ¿vale?

16
00:00:58,929 --> 00:00:59,710
y bueno

17
00:00:59,710 --> 00:01:07,969
voy a descargar las imágenes en esta resolución, ¿vale? 1920x1280, una resolución alta para

18
00:01:07,969 --> 00:01:13,629
que me garantice que la calidad de la imagen sea buena, ¿vale? Y la voy a descargar dentro

19
00:01:13,629 --> 00:01:21,049
de la carpeta que acabo de crear, ¿vale? HTML, aquí en la carpeta Images, ¿vale? Y descargo

20
00:01:21,049 --> 00:01:34,180
todas las imágenes ahí, esta también y la del mono también, ¿vale?

21
00:01:36,599 --> 00:01:40,200
Bueno, otra vez me he dejado creo que el navegador abierto, ¿verdad? Sí.

22
00:01:41,500 --> 00:01:43,900
Bueno, simplemente que me he descargado, no he hecho gran cosa, ¿vale?

23
00:01:43,920 --> 00:01:48,120
Me he descargado las tres imágenes de Pisa Bay, le he dado descarga gratuita

24
00:01:48,120 --> 00:01:52,519
y aquí he elegido la calidad más alta, ¿vale? Solo eso, no he hecho nada más.

25
00:01:52,519 --> 00:01:54,659
vale, entonces

26
00:01:54,659 --> 00:01:56,700
ya puedo cerrar todo esto

27
00:01:56,700 --> 00:01:59,120
y vuelvo a abrir el navegador

28
00:01:59,120 --> 00:02:01,060
el explorador de ficheros, perdón

29
00:02:01,060 --> 00:02:02,819
¿por qué?

30
00:02:02,900 --> 00:02:04,700
porque voy a entrar dentro de la carpeta images

31
00:02:04,700 --> 00:02:07,299
y lo que voy a hacer es cambiarle el nombre a las imágenes

32
00:02:07,299 --> 00:02:09,520
para que me sea más fácil luego hacer referencia

33
00:02:09,520 --> 00:02:11,060
a ellas, ¿vale? voy a poner

34
00:02:11,060 --> 00:02:12,900
por ejemplo, aquí voy a poner Florencia

35
00:02:12,900 --> 00:02:15,240
aquí voy a poner Mono

36
00:02:15,240 --> 00:02:17,500
¿vale? y aquí voy a poner

37
00:02:17,500 --> 00:02:18,199
Molino

38
00:02:18,199 --> 00:02:21,300
¿vale? y ahí tengo

39
00:02:21,300 --> 00:02:22,099
mis tres imágenes

40
00:02:22,099 --> 00:02:44,319
Y ahora nos vamos a ir al editor, al brackets, ¿vale? Y como siempre, lo primero que vamos a hacer, yo me he creado un archivo nuevo que se llama prueba-imágenes.html y lo primero que vamos a hacer es crear esa estructura HTML y ponemos html 2.5 y le damos al tabulador, ¿vale?

41
00:02:44,319 --> 00:03:02,180
Y aquí vamos a poner imágenes en HTML, ese va a ser el título de mi web, ¿vale? Entonces, dentro del body voy a poner la etiqueta para añadir imágenes. ¿Cuál es esa etiqueta? Muy sencillo, etiqueta img, ¿vale?

42
00:03:02,180 --> 00:03:22,419
Esta etiqueta requiere unos atributos, muy importante. El primer atributo es src, que viene de source, ¿vale? Es decir, de la fuente, de donde viene la imagen. Entonces le damos, nos sale dos puntos y fijaros que me aparece ya directamente todos los contenidos que hay dentro de mi carpeta.

43
00:03:22,419 --> 00:03:38,939
Bueno, entonces yo le voy a dar imágenes y vamos a elegir, por ejemplo, Florencia, ¿vale? Yo meto esa imagen y cierro, ¿vale? No tengo que añadir ninguna etiqueta de cierre, ¿vale? Para la etiqueta de imagen es suficiente con eso.

44
00:03:38,939 --> 00:03:55,860
Le doy a guardar y me voy a mi navegador, actualizo y fijaros, ¿vale? Me sale la imagen pero como la imagen es muy grande no aparece cuadrada, no aparece bien ubicada dentro del navegador, ¿vale?

45
00:03:55,939 --> 00:04:07,770
Entonces, para eso tenemos que entrar a modificar su tamaño. Antes de modificar su tamaño vamos a añadir otra etiqueta muy importante que es la etiqueta alt, A-L-T, ¿vale?

46
00:04:07,770 --> 00:04:24,430
Aquí lo que vamos a poner es un texto descriptivo que sirve para dos cosas. En caso que una imagen no cargue correctamente o en caso que esta web se utilice por algún programa para gente invidente que, por ejemplo, lo que hacen es leerle las imágenes, ¿vale?

47
00:04:24,430 --> 00:04:36,529
Entonces leen esto y le muestra y le explica lo que están viendo, ¿vale? Entonces aquí pondríamos, por ejemplo, Catedral de Florencia, ¿vale? O directamente solo Florencia. Florencia de noche.

48
00:04:37,769 --> 00:04:46,670
¿Vale? ¿Ok? Es decir, yo esto actualizo la página y no hay ningún cambio para mí. Yo aquí no veo ningún cambio, ¿vale? Es normal.

49
00:04:47,889 --> 00:04:58,910
Entonces, como decíamos, vamos a modificar el tamaño de la imagen. Para eso, simplemente nos venimos aquí dentro de la etiqueta y vamos a añadir un nuevo atributo, que es el atributo width.

50
00:04:58,910 --> 00:05:16,629
¿Vale? Le damos y aquí podemos poner un tamaño. Yo voy a poner, por ejemplo, 800. ¿Vale? Esos 800 son los píxeles de la imagen. ¿Vale? Guardo, actualizo y fijaros que ahora sí se ve la imagen correctamente.

51
00:05:16,629 --> 00:05:28,889
Ha reducido su tamaño, ¿vale? Si yo pongo juntos los atributos width y height, ¿vale? Lo que me está haciendo aquí es que me permite fijar un valor de anchura y un valor de altura.

52
00:05:29,430 --> 00:05:38,790
Por lo tanto, yo aquí puedo modificar la relación de aspectos. Es decir, la imagen ya no sería como es la original, la distribución, ¿vale? La escala.

53
00:05:39,250 --> 00:05:43,990
Fijaros que si yo ahora aquí pongo 20, lo que hace es que me la achata, ¿vale?

54
00:05:44,449 --> 00:05:47,850
Entonces yo pondría 800 por 600, por ejemplo, ¿vale?

55
00:05:49,629 --> 00:05:52,990
Y tendría un tamaño fijo, ¿vale?

56
00:05:54,649 --> 00:05:57,949
Otra forma de modificar el tamaño de una imagen, ¿vale?

57
00:05:58,870 --> 00:06:00,350
Pues voy a añadir una imagen nueva.

58
00:06:00,350 --> 00:06:06,089
Voy a añadir, por ejemplo, el molino, ¿vale?

59
00:06:08,939 --> 00:06:10,360
Molino de viento.

60
00:06:10,480 --> 00:06:15,100
Otra forma de cambiar ese tamaño utilizando hojas de estilo, ¿vale?

61
00:06:15,100 --> 00:06:20,420
Que esto ya lo veremos más adelante, pero para que tengáis una idea, sería de la siguiente forma.

62
00:06:20,560 --> 00:06:23,660
Pondríamos aquí un parámetro, un atributo, que sería style.

63
00:06:24,899 --> 00:06:30,079
Igual, y ahora entre comillas pondríamos por un lado la anchura, width, ¿vale?

64
00:06:30,220 --> 00:06:37,040
Que pondríamos, por ejemplo, 400 píxeles, punto y coma y la anchura, y la altura.

65
00:06:37,040 --> 00:06:54,540
Que pondríamos 200 píxeles, ¿vale? Y cerramos la etiqueta del IMG, ¿vale? Y con esto actualizaríamos la página, ¿vale? Y fijaros que aparecería nuestro molino, ¿vale?

66
00:06:54,540 --> 00:07:21,050
Y ahora, lo último, ¿cómo ponemos enlaces con imágenes? Muy sencillo. Nos venimos, en primer lugar ponemos la etiqueta de enlace, que dijimos que era A, ¿vale? Ponemos a dónde queremos hacer el enlace, que en este caso, pues yo voy a buscar en Internet, en la Wikipedia, o para Wikipedia, monos, ¿vale?

67
00:07:21,050 --> 00:07:43,329
Por ejemplo, voy a llevar a la página web de los monos de la Wikipedia, ¿vale? Copio la URL y la pego, pongo un target que me vaya blank, ¿vale? Y ahora, fijaros, que lo que voy a hacer es dentro, entre la etiqueta de A y la etiqueta de cierre de A, voy a meter mi imagen, ¿vale?

68
00:07:43,329 --> 00:08:06,399
¿Cómo lo hago? Pues pongo una nueva imagen aquí, img, src, y elijo dentro de imágenes el mono, ¿vale? Acordaros siempre de poner el alt, que es muy importante, y voy a ponerle un tamaño de anchura, pues, por ejemplo, 640, ¿vale?

69
00:08:06,399 --> 00:08:34,850
¿Vale? Guardo, actualizo, ¿vale? Y fijaros que sale aquí mi mono y si yo hago clic en el mono, se me abre la página web de la Wikipedia. ¿Vale? Bueno, pues espero que con esto ya también podáis meter imágenes, que ya veis que cada vez vamos añadiendo más contenido a nuestras páginas web, ¿vale? Bueno, espero que haya sido útil y nos vemos en la próxima.