WEBVTT

00:00:00.271 --> 00:00:01.900
Hemos estado hablando sobre conejos

00:00:01.900 --> 00:00:05.800
todo este tiempo, describiéndolos 
en párrafos y listas,

00:00:05.800 --> 00:00:09.228
pero también podríamos poner una 
imagen en nuestra página web

00:00:09.228 --> 00:00:12.060
y mostrar realmente cómo se ve
un conejo.

00:00:12.400 --> 00:00:16.149
Bueno, para insertar una imagen en 
nuestra página web, usamos la 
etiqueta < img >

00:00:16.149 --> 00:00:19.466
que, como se pueden imaginar, significa 
imagen.


00:00:19.466 --> 00:00:22.700
Si sólo tecleamos "image", no veremos
nada.

00:00:22.700 --> 00:00:23.966
¿Por qué no?

00:00:23.966 --> 00:00:27.511
Bueno, no le dijimos al navegador, 
qué imagen mostrar.

00:00:27.511 --> 00:00:29.284
Hay millones de imágenes en internet,

00:00:29.284 --> 00:00:31.469
y desde luego que no queremos tomar
una al azar

00:00:31.469 --> 00:00:34.550
porque podría ser algo grotesco 
que no nos guste,

00:00:34.699 --> 00:00:37.766
y no sólo no sería lo que 
queremos mostrar.

00:00:37.766 --> 00:00:40.925
Necesitamos decirle la URL de 
la imagen.

00:00:40.939 --> 00:00:43.073
La URL es lo que aparece en la 
parte superior

00:00:43.073 --> 00:00:44.770
de los navegadores en la barra de 
direcciones,

00:00:44.770 --> 00:00:46.874
y eso es lo que es, una dirección.

00:00:46.874 --> 00:00:50.081
Es un manera de encontrar un recuso
en la web,

00:00:50.485 --> 00:00:52.413
y eso significa que podemos insertar
una imagen

00:00:52.413 --> 00:00:54.302
si ya está en algún lugar de internet.

00:00:54.352 --> 00:00:57.652
No podemos insertar imágenes que
sólo están en nuestra computadora.

00:00:58.233 --> 00:01:00.772
Hay muchas maneras de encontrar
imágenes en internet,

00:01:00.772 --> 00:01:03.137
pero aquí estamos haciendo lo que es 
más fácil para ti

00:01:03.137 --> 00:01:06.037
proporcionando un selector de imágenes
en una colección de fotos.

00:01:06.246 --> 00:01:07.967
Para obtener ese selector, necesitamos
añadir

00:01:07.967 --> 00:01:10.735
un atributo a nuestra etiqueta de imagen.

00:01:10.735 --> 00:01:12.800
Un atributo es una parte adicional

00:01:12.800 --> 00:01:14.772
de información sobre una etiqueta,

00:01:14.772 --> 00:01:17.106
y éste es el primer atributo que 
hemos visto.

00:01:17.736 --> 00:01:19.714
Entonces, para decirle al navegador 
la URL,

00:01:19.714 --> 00:01:22.945
vamos a añadir un atributo con el nombre, 
la fuente,

00:01:22.945 --> 00:01:26.490
añadimos un espacio y tecleamos src.

00:01:28.077 --> 00:01:30.866
Ahora, esto representa la fuente, pero es muy importante

00:01:30.866 --> 00:01:32.733
que escribas bien src porque el navegdor

00:01:32.733 --> 00:01:35.333
lo ignorará si lo escribimos mal.

00:01:35.712 --> 00:01:38.251
Ahora, necesitamos poner un signo de 
igual para poder decirle

00:01:38.251 --> 00:01:40.921
al navegador cuál es el valor del 
atributo,

00:01:40.921 --> 00:01:44.550
y ahora voy poner comillas, y el editor

00:01:44.550 --> 00:01:46.575
va a autocompletar las comillas 
que cierran,

00:01:46.575 --> 00:01:51.006
así que los valores de los atributos 
siempre van encerrados en comillas.

00:01:51.446 --> 00:01:55.483
Ok, normalmente así se hace cuando
empezamos a teclear nuestra URL,

00:01:55.483 --> 00:01:57.453
pero en Khan Academy, aquí es cuando

00:01:57.453 --> 00:01:59.600
aparecerá nuestro selector de imágenes.

00:01:59.600 --> 00:02:03.475
Seleccionamos la imagen, y quiero una
imagen de un conejo,

00:02:03.475 --> 00:02:07.064
así que voy a hacer clic en la pestaña animales y selecciono

00:02:07.064 --> 00:02:09.440
un adorable conejo y hago clic en ok.

00:02:09.620 --> 00:02:12.801
¿Ven como ahora hay una URL dentro de
nuestras comillas?,

00:02:12.801 --> 00:02:15.669
y ¿ven cómo la URL empieza con http?

00:02:15.669 --> 00:02:18.250
Así es como sabemos que está apuntando

00:02:18.250 --> 00:02:19.986
a una imagen en algún lugar de internet.

00:02:19.986 --> 00:02:22.386
Hey, mira, hay un conejo en mi página web,

00:02:22.386 --> 00:02:25.604
pero ¿qué pasa si el servidor que 
hospeda la imagen falla,

00:02:25.604 --> 00:02:27.343
y el navegador no puede cargar 
la imagen?

00:02:27.343 --> 00:02:31.263
¿Cómo sabrá el usuario de qué era mi
asombrosa imagen?

00:02:31.263 --> 00:02:33.392
No verá nada y se preguntará
por el resto

00:02:33.392 --> 00:02:35.701
de su vida de qué se perdió.

00:02:35.701 --> 00:02:39.187
Es por eso que las etiquetas de imagen
tiene otro atributo, alt,

00:02:39.187 --> 00:02:40.953
que usamos para decirle a los 
navegadores

00:02:40.953 --> 00:02:43.266
cuál es el texto alternativo para 
mostrar en lugar de una imagen.

00:02:43.266 --> 00:02:46.058
Para añadir otro atributo,
sólo ponemos un espacio

00:02:46.058 --> 00:02:48.839
después de las comillas finales.

00:02:48.839 --> 00:02:53.640
Entonces escribimos alt igual a comillas,

00:02:53.640 --> 00:02:57.185
y dentro de las comillas, el texto será

00:02:57.185 --> 00:02:59.000
algo que describa a la imagen

00:02:59.000 --> 00:03:03.422
como "conejo de orejas caídas en granero."

00:03:04.182 --> 00:03:07.556
Esto también ayuda a las personas que 
ven las páginas web

00:03:07.556 --> 00:03:10.060
pero que en realidad no pueden verlas,
como los ciegos.

00:03:10.060 --> 00:03:11.655
Ellos usan una aplicación que se llama
lector de pantalla,

00:03:11.655 --> 00:03:13.566
la cual literalmente lee la página 
web para ellos,

00:03:13.566 --> 00:03:15.363
describiendo cada etiqueta 
que se encuentra.

00:03:15.473 --> 00:03:18.321
Cuando ve una etiqueta de imagen,
leerá el texto alternativo

00:03:18.321 --> 00:03:21.019
ya que una persona ciega no puede 
ver imágenes.

00:03:21.149 --> 00:03:24.137
Así que siempre siempre deberías usar
el texto alternativo

00:03:24.137 --> 00:03:27.425
para que todo el mundo pueda disfrutar
tu página web.

00:03:28.045 --> 00:03:30.487
Ok, regresemos a la imagen que 
podemos ver

00:03:30.487 --> 00:03:33.656
Es un poco grande.
Vamos a redimensionarla.

00:03:33.656 --> 00:03:38.153
Podemos hacer eso con más atributos
con la anchura y altura que queramos.

00:03:38.273 --> 00:03:43.106
Digamos, "width (ancho) igual a 100"

00:03:43.106 --> 00:03:46.790
Ok, ahora es de 100 pixeles de ancho.

00:03:46.790 --> 00:03:48.899
Ahora es muy pequeña.

00:03:48.899 --> 00:03:51.171
Vamos a poner el cursor dentro y usemos

00:03:51.171 --> 00:03:53.303
el depurador de números para 
hacer la imagen más grande.

00:03:53.557 --> 00:03:56.847
Ok, eso se ve mejor.

00:03:56.847 --> 00:03:58.960
Ahora vamos a tratar de hacerla más alta.

00:03:58.960 --> 00:04:01.262
Digamos que queremos una altura de 50

00:04:01.262 --> 00:04:02.093
¡Oh, oh!

00:04:02.093 --> 00:04:04.855
¡Aplasté mi conejo, pobre conejo!

00:04:04.855 --> 00:04:08.138
Mira, por eso sólo se debe especificar

00:04:08.138 --> 00:04:10.680
la anchura o la altura, pero no las dos

00:04:10.680 --> 00:04:13.332
porque podríamos usar unas 
dimensiones incorrectas

00:04:13.332 --> 00:04:16.414
y aplastar a sus conejos, así que sólo
dejen que el navegador

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.

00:04:20.309 --> 00:04:22.253
Voy a borrar la altura.

00:04:22.473 --> 00:04:25.210
Ahora que puedes poner imágenes,
empieza a pensar

00:04:25.210 --> 00:04:27.844
como combinar todas las etiquetas que 
tienes en tu caja de herramientas,

00:04:27.844 --> 00:04:32.930
listas con imágenes y párrafos, los 
10 animales más locos.

00:04:32.930 --> 00:04:35.776
Sólo que no pongas muchas imágenes 
en tu página

00:04:35.776 --> 00:04:38.114
porque la persona que esté revisando
tu página web

00:04:38.114 --> 00:04:40.272
tendrá que cargarlas todas,

00:04:40.272 --> 00:04:43.888
pero tú puedes seguir teniendo 
mucha diversión.