1
00:00:00,271 --> 00:00:01,900
Hemos estado hablando sobre conejos

2
00:00:01,900 --> 00:00:05,800
todo este tiempo, describiéndolos 
en párrafos y listas,

3
00:00:05,800 --> 00:00:09,228
pero también podríamos poner una 
imagen en nuestra página web

4
00:00:09,228 --> 00:00:12,060
y mostrar realmente cómo se ve
un conejo.

5
00:00:12,400 --> 00:00:16,149
Bueno, para insertar una imagen en 
nuestra página web, usamos la 
etiqueta < img >

6
00:00:16,149 --> 00:00:19,466
que, como se pueden imaginar, significa 
imagen.


7
00:00:19,466 --> 00:00:22,700
Si sólo tecleamos "image", no veremos
nada.

8
00:00:22,700 --> 00:00:23,966
¿Por qué no?

9
00:00:23,966 --> 00:00:27,511
Bueno, no le dijimos al navegador, 
qué imagen mostrar.

10
00:00:27,511 --> 00:00:29,284
Hay millones de imágenes en internet,

11
00:00:29,284 --> 00:00:31,469
y desde luego que no queremos tomar
una al azar

12
00:00:31,469 --> 00:00:34,550
porque podría ser algo grotesco 
que no nos guste,

13
00:00:34,699 --> 00:00:37,766
y no sólo no sería lo que 
queremos mostrar.

14
00:00:37,766 --> 00:00:40,925
Necesitamos decirle la URL de 
la imagen.

15
00:00:40,939 --> 00:00:43,073
La URL es lo que aparece en la 
parte superior

16
00:00:43,073 --> 00:00:44,770
de los navegadores en la barra de 
direcciones,

17
00:00:44,770 --> 00:00:46,874
y eso es lo que es, una dirección.

18
00:00:46,874 --> 00:00:50,081
Es un manera de encontrar un recuso
en la web,

19
00:00:50,485 --> 00:00:52,413
y eso significa que podemos insertar
una imagen

20
00:00:52,413 --> 00:00:54,302
si ya está en algún lugar de internet.

21
00:00:54,352 --> 00:00:57,652
No podemos insertar imágenes que
sólo están en nuestra computadora.

22
00:00:58,233 --> 00:01:00,772
Hay muchas maneras de encontrar
imágenes en internet,

23
00:01:00,772 --> 00:01:03,137
pero aquí estamos haciendo lo que es 
más fácil para ti

24
00:01:03,137 --> 00:01:06,037
proporcionando un selector de imágenes
en una colección de fotos.

25
00:01:06,246 --> 00:01:07,967
Para obtener ese selector, necesitamos
añadir

26
00:01:07,967 --> 00:01:10,735
un atributo a nuestra etiqueta de imagen.

27
00:01:10,735 --> 00:01:12,800
Un atributo es una parte adicional

28
00:01:12,800 --> 00:01:14,772
de información sobre una etiqueta,

29
00:01:14,772 --> 00:01:17,106
y éste es el primer atributo que 
hemos visto.

30
00:01:17,736 --> 00:01:19,714
Entonces, para decirle al navegador 
la URL,

31
00:01:19,714 --> 00:01:22,945
vamos a añadir un atributo con el nombre, 
la fuente,

32
00:01:22,945 --> 00:01:26,490
añadimos un espacio y tecleamos src.

33
00:01:28,077 --> 00:01:30,866
Ahora, esto representa la fuente, pero es muy importante

34
00:01:30,866 --> 00:01:32,733
que escribas bien src porque el navegdor

35
00:01:32,733 --> 00:01:35,333
lo ignorará si lo escribimos mal.

36
00:01:35,712 --> 00:01:38,251
Ahora, necesitamos poner un signo de 
igual para poder decirle

37
00:01:38,251 --> 00:01:40,921
al navegador cuál es el valor del 
atributo,

38
00:01:40,921 --> 00:01:44,550
y ahora voy poner comillas, y el editor

39
00:01:44,550 --> 00:01:46,575
va a autocompletar las comillas 
que cierran,

40
00:01:46,575 --> 00:01:51,006
así que los valores de los atributos 
siempre van encerrados en comillas.

41
00:01:51,446 --> 00:01:55,483
Ok, normalmente así se hace cuando
empezamos a teclear nuestra URL,

42
00:01:55,483 --> 00:01:57,453
pero en Khan Academy, aquí es cuando

43
00:01:57,453 --> 00:01:59,600
aparecerá nuestro selector de imágenes.

44
00:01:59,600 --> 00:02:03,475
Seleccionamos la imagen, y quiero una
imagen de un conejo,

45
00:02:03,475 --> 00:02:07,064
así que voy a hacer clic en la pestaña animales y selecciono

46
00:02:07,064 --> 00:02:09,440
un adorable conejo y hago clic en ok.

47
00:02:09,620 --> 00:02:12,801
¿Ven como ahora hay una URL dentro de
nuestras comillas?,

48
00:02:12,801 --> 00:02:15,669
y ¿ven cómo la URL empieza con http?

49
00:02:15,669 --> 00:02:18,250
Así es como sabemos que está apuntando

50
00:02:18,250 --> 00:02:19,986
a una imagen en algún lugar de internet.

51
00:02:19,986 --> 00:02:22,386
Hey, mira, hay un conejo en mi página web,

52
00:02:22,386 --> 00:02:25,604
pero ¿qué pasa si el servidor que 
hospeda la imagen falla,

53
00:02:25,604 --> 00:02:27,343
y el navegador no puede cargar 
la imagen?

54
00:02:27,343 --> 00:02:31,263
¿Cómo sabrá el usuario de qué era mi
asombrosa imagen?

55
00:02:31,263 --> 00:02:33,392
No verá nada y se preguntará
por el resto

56
00:02:33,392 --> 00:02:35,701
de su vida de qué se perdió.

57
00:02:35,701 --> 00:02:39,187
Es por eso que las etiquetas de imagen
tiene otro atributo, alt,

58
00:02:39,187 --> 00:02:40,953
que usamos para decirle a los 
navegadores

59
00:02:40,953 --> 00:02:43,266
cuál es el texto alternativo para 
mostrar en lugar de una imagen.

60
00:02:43,266 --> 00:02:46,058
Para añadir otro atributo,
sólo ponemos un espacio

61
00:02:46,058 --> 00:02:48,839
después de las comillas finales.

62
00:02:48,839 --> 00:02:53,640
Entonces escribimos alt igual a comillas,

63
00:02:53,640 --> 00:02:57,185
y dentro de las comillas, el texto será

64
00:02:57,185 --> 00:02:59,000
algo que describa a la imagen

65
00:02:59,000 --> 00:03:03,422
como "conejo de orejas caídas en granero."

66
00:03:04,182 --> 00:03:07,556
Esto también ayuda a las personas que 
ven las páginas web

67
00:03:07,556 --> 00:03:10,060
pero que en realidad no pueden verlas,
como los ciegos.

68
00:03:10,060 --> 00:03:11,655
Ellos usan una aplicación que se llama
lector de pantalla,

69
00:03:11,655 --> 00:03:13,566
la cual literalmente lee la página 
web para ellos,

70
00:03:13,566 --> 00:03:15,363
describiendo cada etiqueta 
que se encuentra.

71
00:03:15,473 --> 00:03:18,321
Cuando ve una etiqueta de imagen,
leerá el texto alternativo

72
00:03:18,321 --> 00:03:21,019
ya que una persona ciega no puede 
ver imágenes.

73
00:03:21,149 --> 00:03:24,137
Así que siempre siempre deberías usar
el texto alternativo

74
00:03:24,137 --> 00:03:27,425
para que todo el mundo pueda disfrutar
tu página web.

75
00:03:28,045 --> 00:03:30,487
Ok, regresemos a la imagen que 
podemos ver

76
00:03:30,487 --> 00:03:33,656
Es un poco grande.
Vamos a redimensionarla.

77
00:03:33,656 --> 00:03:38,153
Podemos hacer eso con más atributos
con la anchura y altura que queramos.

78
00:03:38,273 --> 00:03:43,106
Digamos, "width (ancho) igual a 100"

79
00:03:43,106 --> 00:03:46,790
Ok, ahora es de 100 pixeles de ancho.

80
00:03:46,790 --> 00:03:48,899
Ahora es muy pequeña.

81
00:03:48,899 --> 00:03:51,171
Vamos a poner el cursor dentro y usemos

82
00:03:51,171 --> 00:03:53,303
el depurador de números para 
hacer la imagen más grande.

83
00:03:53,557 --> 00:03:56,847
Ok, eso se ve mejor.

84
00:03:56,847 --> 00:03:58,960
Ahora vamos a tratar de hacerla más alta.

85
00:03:58,960 --> 00:04:01,262
Digamos que queremos una altura de 50

86
00:04:01,262 --> 00:04:02,093
¡Oh, oh!

87
00:04:02,093 --> 00:04:04,855
¡Aplasté mi conejo, pobre conejo!

88
00:04:04,855 --> 00:04:08,138
Mira, por eso sólo se debe especificar

89
00:04:08,138 --> 00:04:10,680
la anchura o la altura, pero no las dos

90
00:04:10,680 --> 00:04:13,332
porque podríamos usar unas 
dimensiones incorrectas

91
00:04:13,332 --> 00:04:16,414
y aplastar a sus conejos, así que sólo
dejen que el navegador

92
00:04:16,414 --> 00:04:20,309
haga las matemáticas y decida cuál 
debe ser el valor de la otra dimensión.

93
00:04:20,309 --> 00:04:22,253
Voy a borrar la altura.

94
00:04:22,473 --> 00:04:25,210
Ahora que puedes poner imágenes,
empieza a pensar

95
00:04:25,210 --> 00:04:27,844
como combinar todas las etiquetas que 
tienes en tu caja de herramientas,

96
00:04:27,844 --> 00:04:32,930
listas con imágenes y párrafos, los 
10 animales más locos.

97
00:04:32,930 --> 00:04:35,776
Sólo que no pongas muchas imágenes 
en tu página

98
00:04:35,776 --> 00:04:38,114
porque la persona que esté revisando
tu página web

99
00:04:38,114 --> 00:04:40,272
tendrá que cargarlas todas,

100
00:04:40,272 --> 00:04:43,888
pero tú puedes seguir teniendo 
mucha diversión.