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.