HTML Imágenes (Versión Video)

Hemos estado hablando sobre conejos

todo este tiempo, describiéndolos
en párrafos y listas,

pero también podríamos poner una
imagen en nuestra página web

y mostrar realmente cómo se ve
un conejo.

Bueno, para insertar una imagen en
nuestra página web, usamos la
etiqueta < img >

que, como se pueden imaginar, significa
imagen.

Si sólo tecleamos "image", no veremos
nada.

¿Por qué no?

Bueno, no le dijimos al navegador,
qué imagen mostrar.

Hay millones de imágenes en internet,

y desde luego que no queremos tomar
una al azar

porque podría ser algo grotesco
que no nos guste,

y no sólo no sería lo que
queremos mostrar.

Necesitamos decirle la URL de
la imagen.

La URL es lo que aparece en la
parte superior

de los navegadores en la barra de
direcciones,

y eso es lo que es, una dirección.

Es un manera de encontrar un recuso
en la web,

y eso significa que podemos insertar
una imagen

si ya está en algún lugar de internet.

No podemos insertar imágenes que
sólo están en nuestra computadora.

Hay muchas maneras de encontrar
imágenes en internet,

pero aquí estamos haciendo lo que es
más fácil para ti

proporcionando un selector de imágenes
en una colección de fotos.

Para obtener ese selector, necesitamos
añadir

un atributo a nuestra etiqueta de imagen.

Un atributo es una parte adicional

de información sobre una etiqueta,

y éste es el primer atributo que
hemos visto.

Entonces, para decirle al navegador
la URL,

vamos a añadir un atributo con el nombre,
la fuente,

añadimos un espacio y tecleamos src.

Ahora, esto representa la fuente, pero es muy importante

que escribas bien src porque el navegdor

lo ignorará si lo escribimos mal.

Ahora, necesitamos poner un signo de
igual para poder decirle

al navegador cuál es el valor del
atributo,

y ahora voy poner comillas, y el editor

va a autocompletar las comillas
que cierran,

así que los valores de los atributos
siempre van encerrados en comillas.

Ok, normalmente así se hace cuando
empezamos a teclear nuestra URL,

pero en Khan Academy, aquí es cuando

aparecerá nuestro selector de imágenes.

Seleccionamos la imagen, y quiero una
imagen de un conejo,

así que voy a hacer clic en la pestaña animales y selecciono

un adorable conejo y hago clic en ok.

¿Ven como ahora hay una URL dentro de
nuestras comillas?,

y ¿ven cómo la URL empieza con http?

Así es como sabemos que está apuntando

a una imagen en algún lugar de internet.

Hey, mira, hay un conejo en mi página web,

pero ¿qué pasa si el servidor que
hospeda la imagen falla,

y el navegador no puede cargar
la imagen?

¿Cómo sabrá el usuario de qué era mi
asombrosa imagen?

No verá nada y se preguntará
por el resto

de su vida de qué se perdió.

Es por eso que las etiquetas de imagen
tiene otro atributo, alt,

que usamos para decirle a los
navegadores

cuál es el texto alternativo para
mostrar en lugar de una imagen.

Para añadir otro atributo,
sólo ponemos un espacio

después de las comillas finales.

Entonces escribimos alt igual a comillas,

y dentro de las comillas, el texto será

algo que describa a la imagen

como "conejo de orejas caídas en granero."

Esto también ayuda a las personas que
ven las páginas web

pero que en realidad no pueden verlas,
como los ciegos.

Ellos usan una aplicación que se llama
lector de pantalla,

la cual literalmente lee la página
web para ellos,

describiendo cada etiqueta
que se encuentra.

Cuando ve una etiqueta de imagen,
leerá el texto alternativo

ya que una persona ciega no puede
ver imágenes.

Así que siempre siempre deberías usar
el texto alternativo

para que todo el mundo pueda disfrutar
tu página web.

Ok, regresemos a la imagen que
podemos ver

Es un poco grande.
Vamos a redimensionarla.

Podemos hacer eso con más atributos
con la anchura y altura que queramos.

Digamos, "width (ancho) igual a 100"

Ok, ahora es de 100 pixeles de ancho.

Ahora es muy pequeña.

Vamos a poner el cursor dentro y usemos

el depurador de números para
hacer la imagen más grande.

Ok, eso se ve mejor.

Ahora vamos a tratar de hacerla más alta.

Digamos que queremos una altura de 50

¡Oh, oh!

¡Aplasté mi conejo, pobre conejo!

Mira, por eso sólo se debe especificar

la anchura o la altura, pero no las dos

porque podríamos usar unas
dimensiones incorrectas

y aplastar a sus conejos, así que sólo
dejen que el navegador

haga las matemáticas y decida cuál
debe ser el valor de la otra dimensión.

Voy a borrar la altura.

Ahora que puedes poner imágenes,
empieza a pensar

como combinar todas las etiquetas que
tienes en tu caja de herramientas,

listas con imágenes y párrafos, los
10 animales más locos.

Sólo que no pongas muchas imágenes
en tu página

porque la persona que esté revisando
tu página web

tendrá que cargarlas todas,

pero tú puedes seguir teniendo
mucha diversión.