0:00:00.271,0:00:01.900
Hemos estado hablando sobre conejos

0:00:01.900,0:00:05.800
todo este tiempo, describiéndolos [br]en párrafos y listas,

0:00:05.800,0:00:09.228
pero también podríamos poner una [br]imagen en nuestra página web

0:00:09.228,0:00:12.060
y mostrar realmente cómo se ve[br]un conejo.

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

0:00:16.149,0:00:19.466
que, como se pueden imaginar, significa [br]imagen.[br]

0:00:19.466,0:00:22.700
Si sólo tecleamos "image", no veremos[br]nada.

0:00:22.700,0:00:23.966
¿Por qué no?

0:00:23.966,0:00:27.511
Bueno, no le dijimos al navegador, [br]qué imagen mostrar.

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

0:00:29.284,0:00:31.469
y desde luego que no queremos tomar[br]una al azar

0:00:31.469,0:00:34.550
porque podría ser algo grotesco [br]que no nos guste,

0:00:34.699,0:00:37.766
y no sólo no sería lo que [br]queremos mostrar.

0:00:37.766,0:00:40.925
Necesitamos decirle la URL de [br]la imagen.

0:00:40.939,0:00:43.073
La URL es lo que aparece en la [br]parte superior

0:00:43.073,0:00:44.770
de los navegadores en la barra de [br]direcciones,

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

0:00:46.874,0:00:50.081
Es un manera de encontrar un recuso[br]en la web,

0:00:50.485,0:00:52.413
y eso significa que podemos insertar[br]una imagen

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

0:00:54.352,0:00:57.652
No podemos insertar imágenes que[br]sólo están en nuestra computadora.

0:00:58.233,0:01:00.772
Hay muchas maneras de encontrar[br]imágenes en internet,

0:01:00.772,0:01:03.137
pero aquí estamos haciendo lo que es [br]más fácil para ti

0:01:03.137,0:01:06.037
proporcionando un selector de imágenes[br]en una colección de fotos.

0:01:06.246,0:01:07.967
Para obtener ese selector, necesitamos[br]añadir

0:01:07.967,0:01:10.735
un atributo a nuestra etiqueta de imagen.

0:01:10.735,0:01:12.800
Un atributo es una parte adicional

0:01:12.800,0:01:14.772
de información sobre una etiqueta,

0:01:14.772,0:01:17.106
y éste es el primer atributo que [br]hemos visto.

0:01:17.736,0:01:19.714
Entonces, para decirle al navegador [br]la URL,

0:01:19.714,0:01:22.945
vamos a añadir un atributo con el nombre, [br]la fuente,

0:01:22.945,0:01:26.490
añadimos un espacio y tecleamos src.

0:01:28.077,0:01:30.866
Ahora, esto representa la fuente, pero es muy importante

0:01:30.866,0:01:32.733
que escribas bien src porque el navegdor

0:01:32.733,0:01:35.333
lo ignorará si lo escribimos mal.

0:01:35.712,0:01:38.251
Ahora, necesitamos poner un signo de [br]igual para poder decirle

0:01:38.251,0:01:40.921
al navegador cuál es el valor del [br]atributo,

0:01:40.921,0:01:44.550
y ahora voy poner comillas, y el editor

0:01:44.550,0:01:46.575
va a autocompletar las comillas [br]que cierran,

0:01:46.575,0:01:51.006
así que los valores de los atributos [br]siempre van encerrados en comillas.

0:01:51.446,0:01:55.483
Ok, normalmente así se hace cuando[br]empezamos a teclear nuestra URL,

0:01:55.483,0:01:57.453
pero en Khan Academy, aquí es cuando

0:01:57.453,0:01:59.600
aparecerá nuestro selector de imágenes.

0:01:59.600,0:02:03.475
Seleccionamos la imagen, y quiero una[br]imagen de un conejo,

0:02:03.475,0:02:07.064
así que voy a hacer clic en la pestaña animales y selecciono

0:02:07.064,0:02:09.440
un adorable conejo y hago clic en ok.

0:02:09.620,0:02:12.801
¿Ven como ahora hay una URL dentro de[br]nuestras comillas?,

0:02:12.801,0:02:15.669
y ¿ven cómo la URL empieza con http?

0:02:15.669,0:02:18.250
Así es como sabemos que está apuntando

0:02:18.250,0:02:19.986
a una imagen en algún lugar de internet.

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

0:02:22.386,0:02:25.604
pero ¿qué pasa si el servidor que [br]hospeda la imagen falla,

0:02:25.604,0:02:27.343
y el navegador no puede cargar [br]la imagen?

0:02:27.343,0:02:31.263
¿Cómo sabrá el usuario de qué era mi[br]asombrosa imagen?

0:02:31.263,0:02:33.392
No verá nada y se preguntará[br]por el resto

0:02:33.392,0:02:35.701
de su vida de qué se perdió.

0:02:35.701,0:02:39.187
Es por eso que las etiquetas de imagen[br]tiene otro atributo, alt,

0:02:39.187,0:02:40.953
que usamos para decirle a los [br]navegadores

0:02:40.953,0:02:43.266
cuál es el texto alternativo para [br]mostrar en lugar de una imagen.

0:02:43.266,0:02:46.058
Para añadir otro atributo,[br]sólo ponemos un espacio

0:02:46.058,0:02:48.839
después de las comillas finales.

0:02:48.839,0:02:53.640
Entonces escribimos alt igual a comillas,

0:02:53.640,0:02:57.185
y dentro de las comillas, el texto será

0:02:57.185,0:02:59.000
algo que describa a la imagen

0:02:59.000,0:03:03.422
como "conejo de orejas caídas en granero."

0:03:04.182,0:03:07.556
Esto también ayuda a las personas que [br]ven las páginas web

0:03:07.556,0:03:10.060
pero que en realidad no pueden verlas,[br]como los ciegos.

0:03:10.060,0:03:11.655
Ellos usan una aplicación que se llama[br]lector de pantalla,

0:03:11.655,0:03:13.566
la cual literalmente lee la página [br]web para ellos,

0:03:13.566,0:03:15.363
describiendo cada etiqueta [br]que se encuentra.

0:03:15.473,0:03:18.321
Cuando ve una etiqueta de imagen,[br]leerá el texto alternativo

0:03:18.321,0:03:21.019
ya que una persona ciega no puede [br]ver imágenes.

0:03:21.149,0:03:24.137
Así que siempre siempre deberías usar[br]el texto alternativo

0:03:24.137,0:03:27.425
para que todo el mundo pueda disfrutar[br]tu página web.

0:03:28.045,0:03:30.487
Ok, regresemos a la imagen que [br]podemos ver

0:03:30.487,0:03:33.656
Es un poco grande.[br]Vamos a redimensionarla.

0:03:33.656,0:03:38.153
Podemos hacer eso con más atributos[br]con la anchura y altura que queramos.

0:03:38.273,0:03:43.106
Digamos, "width (ancho) igual a 100"

0:03:43.106,0:03:46.790
Ok, ahora es de 100 pixeles de ancho.

0:03:46.790,0:03:48.899
Ahora es muy pequeña.

0:03:48.899,0:03:51.171
Vamos a poner el cursor dentro y usemos

0:03:51.171,0:03:53.303
el depurador de números para [br]hacer la imagen más grande.

0:03:53.557,0:03:56.847
Ok, eso se ve mejor.

0:03:56.847,0:03:58.960
Ahora vamos a tratar de hacerla más alta.

0:03:58.960,0:04:01.262
Digamos que queremos una altura de 50

0:04:01.262,0:04:02.093
¡Oh, oh!

0:04:02.093,0:04:04.855
¡Aplasté mi conejo, pobre conejo!

0:04:04.855,0:04:08.138
Mira, por eso sólo se debe especificar

0:04:08.138,0:04:10.680
la anchura o la altura, pero no las dos

0:04:10.680,0:04:13.332
porque podríamos usar unas [br]dimensiones incorrectas

0:04:13.332,0:04:16.414
y aplastar a sus conejos, así que sólo[br]dejen que el navegador

0:04:16.414,0:04:20.309
haga las matemáticas y decida cuál [br]debe ser el valor de la otra dimensión.

0:04:20.309,0:04:22.253
Voy a borrar la altura.

0:04:22.473,0:04:25.210
Ahora que puedes poner imágenes,[br]empieza a pensar

0:04:25.210,0:04:27.844
como combinar todas las etiquetas que [br]tienes en tu caja de herramientas,

0:04:27.844,0:04:32.930
listas con imágenes y párrafos, los [br]10 animales más locos.

0:04:32.930,0:04:35.776
Sólo que no pongas muchas imágenes [br]en tu página

0:04:35.776,0:04:38.114
porque la persona que esté revisando[br]tu página web

0:04:38.114,0:04:40.272
tendrá que cargarlas todas,

0:04:40.272,0:04:43.888
pero tú puedes seguir teniendo [br]mucha diversión.