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.