[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.27,0:00:01.90,Default,,0000,0000,0000,,Hemos estado hablando sobre conejos
Dialogue: 0,0:00:01.90,0:00:05.80,Default,,0000,0000,0000,,todo este tiempo, describiéndolos \Nen párrafos y listas,
Dialogue: 0,0:00:05.80,0:00:09.23,Default,,0000,0000,0000,,pero también podríamos poner una \Nimagen en nuestra página web
Dialogue: 0,0:00:09.23,0:00:12.06,Default,,0000,0000,0000,,y mostrar realmente cómo se ve\Nun conejo.
Dialogue: 0,0:00:12.40,0:00:16.15,Default,,0000,0000,0000,,Bueno, para insertar una imagen en \Nnuestra página web, usamos la \Netiqueta < img >
Dialogue: 0,0:00:16.15,0:00:19.47,Default,,0000,0000,0000,,que, como se pueden imaginar, significa \Nimagen.\N
Dialogue: 0,0:00:19.47,0:00:22.70,Default,,0000,0000,0000,,Si sólo tecleamos "image", no veremos\Nnada.
Dialogue: 0,0:00:22.70,0:00:23.97,Default,,0000,0000,0000,,¿Por qué no?
Dialogue: 0,0:00:23.97,0:00:27.51,Default,,0000,0000,0000,,Bueno, no le dijimos al navegador, \Nqué imagen mostrar.
Dialogue: 0,0:00:27.51,0:00:29.28,Default,,0000,0000,0000,,Hay millones de imágenes en internet,
Dialogue: 0,0:00:29.28,0:00:31.47,Default,,0000,0000,0000,,y desde luego que no queremos tomar\Nuna al azar
Dialogue: 0,0:00:31.47,0:00:34.55,Default,,0000,0000,0000,,porque podría ser algo grotesco \Nque no nos guste,
Dialogue: 0,0:00:34.70,0:00:37.77,Default,,0000,0000,0000,,y no sólo no sería lo que \Nqueremos mostrar.
Dialogue: 0,0:00:37.77,0:00:40.92,Default,,0000,0000,0000,,Necesitamos decirle la URL de \Nla imagen.
Dialogue: 0,0:00:40.94,0:00:43.07,Default,,0000,0000,0000,,La URL es lo que aparece en la \Nparte superior
Dialogue: 0,0:00:43.07,0:00:44.77,Default,,0000,0000,0000,,de los navegadores en la barra de \Ndirecciones,
Dialogue: 0,0:00:44.77,0:00:46.87,Default,,0000,0000,0000,,y eso es lo que es, una dirección.
Dialogue: 0,0:00:46.87,0:00:50.08,Default,,0000,0000,0000,,Es un manera de encontrar un recuso\Nen la web,
Dialogue: 0,0:00:50.48,0:00:52.41,Default,,0000,0000,0000,,y eso significa que podemos insertar\Nuna imagen
Dialogue: 0,0:00:52.41,0:00:54.30,Default,,0000,0000,0000,,si ya está en algún lugar de internet.
Dialogue: 0,0:00:54.35,0:00:57.65,Default,,0000,0000,0000,,No podemos insertar imágenes que\Nsólo están en nuestra computadora.
Dialogue: 0,0:00:58.23,0:01:00.77,Default,,0000,0000,0000,,Hay muchas maneras de encontrar\Nimágenes en internet,
Dialogue: 0,0:01:00.77,0:01:03.14,Default,,0000,0000,0000,,pero aquí estamos haciendo lo que es \Nmás fácil para ti
Dialogue: 0,0:01:03.14,0:01:06.04,Default,,0000,0000,0000,,proporcionando un selector de imágenes\Nen una colección de fotos.
Dialogue: 0,0:01:06.25,0:01:07.97,Default,,0000,0000,0000,,Para obtener ese selector, necesitamos\Nañadir
Dialogue: 0,0:01:07.97,0:01:10.74,Default,,0000,0000,0000,,un atributo a nuestra etiqueta de imagen.
Dialogue: 0,0:01:10.74,0:01:12.80,Default,,0000,0000,0000,,Un atributo es una parte adicional
Dialogue: 0,0:01:12.80,0:01:14.77,Default,,0000,0000,0000,,de información sobre una etiqueta,
Dialogue: 0,0:01:14.77,0:01:17.11,Default,,0000,0000,0000,,y éste es el primer atributo que \Nhemos visto.
Dialogue: 0,0:01:17.74,0:01:19.71,Default,,0000,0000,0000,,Entonces, para decirle al navegador \Nla URL,
Dialogue: 0,0:01:19.71,0:01:22.94,Default,,0000,0000,0000,,vamos a añadir un atributo con el nombre, \Nla fuente,
Dialogue: 0,0:01:22.94,0:01:26.49,Default,,0000,0000,0000,,añadimos un espacio y tecleamos src.
Dialogue: 0,0:01:28.08,0:01:30.87,Default,,0000,0000,0000,,Ahora, esto representa la fuente, pero es muy importante
Dialogue: 0,0:01:30.87,0:01:32.73,Default,,0000,0000,0000,,que escribas bien src porque el navegdor
Dialogue: 0,0:01:32.73,0:01:35.33,Default,,0000,0000,0000,,lo ignorará si lo escribimos mal.
Dialogue: 0,0:01:35.71,0:01:38.25,Default,,0000,0000,0000,,Ahora, necesitamos poner un signo de \Nigual para poder decirle
Dialogue: 0,0:01:38.25,0:01:40.92,Default,,0000,0000,0000,,al navegador cuál es el valor del \Natributo,
Dialogue: 0,0:01:40.92,0:01:44.55,Default,,0000,0000,0000,,y ahora voy poner comillas, y el editor
Dialogue: 0,0:01:44.55,0:01:46.58,Default,,0000,0000,0000,,va a autocompletar las comillas \Nque cierran,
Dialogue: 0,0:01:46.58,0:01:51.01,Default,,0000,0000,0000,,así que los valores de los atributos \Nsiempre van encerrados en comillas.
Dialogue: 0,0:01:51.45,0:01:55.48,Default,,0000,0000,0000,,Ok, normalmente así se hace cuando\Nempezamos a teclear nuestra URL,
Dialogue: 0,0:01:55.48,0:01:57.45,Default,,0000,0000,0000,,pero en Khan Academy, aquí es cuando
Dialogue: 0,0:01:57.45,0:01:59.60,Default,,0000,0000,0000,,aparecerá nuestro selector de imágenes.
Dialogue: 0,0:01:59.60,0:02:03.48,Default,,0000,0000,0000,,Seleccionamos la imagen, y quiero una\Nimagen de un conejo,
Dialogue: 0,0:02:03.48,0:02:07.06,Default,,0000,0000,0000,,así que voy a hacer clic en la pestaña animales y selecciono
Dialogue: 0,0:02:07.06,0:02:09.44,Default,,0000,0000,0000,,un adorable conejo y hago clic en ok.
Dialogue: 0,0:02:09.62,0:02:12.80,Default,,0000,0000,0000,,¿Ven como ahora hay una URL dentro de\Nnuestras comillas?,
Dialogue: 0,0:02:12.80,0:02:15.67,Default,,0000,0000,0000,,y ¿ven cómo la URL empieza con http?
Dialogue: 0,0:02:15.67,0:02:18.25,Default,,0000,0000,0000,,Así es como sabemos que está apuntando
Dialogue: 0,0:02:18.25,0:02:19.99,Default,,0000,0000,0000,,a una imagen en algún lugar de internet.
Dialogue: 0,0:02:19.99,0:02:22.39,Default,,0000,0000,0000,,Hey, mira, hay un conejo en mi página web,
Dialogue: 0,0:02:22.39,0:02:25.60,Default,,0000,0000,0000,,pero ¿qué pasa si el servidor que \Nhospeda la imagen falla,
Dialogue: 0,0:02:25.60,0:02:27.34,Default,,0000,0000,0000,,y el navegador no puede cargar \Nla imagen?
Dialogue: 0,0:02:27.34,0:02:31.26,Default,,0000,0000,0000,,¿Cómo sabrá el usuario de qué era mi\Nasombrosa imagen?
Dialogue: 0,0:02:31.26,0:02:33.39,Default,,0000,0000,0000,,No verá nada y se preguntará\Npor el resto
Dialogue: 0,0:02:33.39,0:02:35.70,Default,,0000,0000,0000,,de su vida de qué se perdió.
Dialogue: 0,0:02:35.70,0:02:39.19,Default,,0000,0000,0000,,Es por eso que las etiquetas de imagen\Ntiene otro atributo, alt,
Dialogue: 0,0:02:39.19,0:02:40.95,Default,,0000,0000,0000,,que usamos para decirle a los \Nnavegadores
Dialogue: 0,0:02:40.95,0:02:43.27,Default,,0000,0000,0000,,cuál es el texto alternativo para \Nmostrar en lugar de una imagen.
Dialogue: 0,0:02:43.27,0:02:46.06,Default,,0000,0000,0000,,Para añadir otro atributo,\Nsólo ponemos un espacio
Dialogue: 0,0:02:46.06,0:02:48.84,Default,,0000,0000,0000,,después de las comillas finales.
Dialogue: 0,0:02:48.84,0:02:53.64,Default,,0000,0000,0000,,Entonces escribimos alt igual a comillas,
Dialogue: 0,0:02:53.64,0:02:57.18,Default,,0000,0000,0000,,y dentro de las comillas, el texto será
Dialogue: 0,0:02:57.18,0:02:59.00,Default,,0000,0000,0000,,algo que describa a la imagen
Dialogue: 0,0:02:59.00,0:03:03.42,Default,,0000,0000,0000,,como "conejo de orejas caídas en granero."
Dialogue: 0,0:03:04.18,0:03:07.56,Default,,0000,0000,0000,,Esto también ayuda a las personas que \Nven las páginas web
Dialogue: 0,0:03:07.56,0:03:10.06,Default,,0000,0000,0000,,pero que en realidad no pueden verlas,\Ncomo los ciegos.
Dialogue: 0,0:03:10.06,0:03:11.66,Default,,0000,0000,0000,,Ellos usan una aplicación que se llama\Nlector de pantalla,
Dialogue: 0,0:03:11.66,0:03:13.57,Default,,0000,0000,0000,,la cual literalmente lee la página \Nweb para ellos,
Dialogue: 0,0:03:13.57,0:03:15.36,Default,,0000,0000,0000,,describiendo cada etiqueta \Nque se encuentra.
Dialogue: 0,0:03:15.47,0:03:18.32,Default,,0000,0000,0000,,Cuando ve una etiqueta de imagen,\Nleerá el texto alternativo
Dialogue: 0,0:03:18.32,0:03:21.02,Default,,0000,0000,0000,,ya que una persona ciega no puede \Nver imágenes.
Dialogue: 0,0:03:21.15,0:03:24.14,Default,,0000,0000,0000,,Así que siempre siempre deberías usar\Nel texto alternativo
Dialogue: 0,0:03:24.14,0:03:27.42,Default,,0000,0000,0000,,para que todo el mundo pueda disfrutar\Ntu página web.
Dialogue: 0,0:03:28.04,0:03:30.49,Default,,0000,0000,0000,,Ok, regresemos a la imagen que \Npodemos ver
Dialogue: 0,0:03:30.49,0:03:33.66,Default,,0000,0000,0000,,Es un poco grande.\NVamos a redimensionarla.
Dialogue: 0,0:03:33.66,0:03:38.15,Default,,0000,0000,0000,,Podemos hacer eso con más atributos\Ncon la anchura y altura que queramos.
Dialogue: 0,0:03:38.27,0:03:43.11,Default,,0000,0000,0000,,Digamos, "width (ancho) igual a 100"
Dialogue: 0,0:03:43.11,0:03:46.79,Default,,0000,0000,0000,,Ok, ahora es de 100 pixeles de ancho.
Dialogue: 0,0:03:46.79,0:03:48.90,Default,,0000,0000,0000,,Ahora es muy pequeña.
Dialogue: 0,0:03:48.90,0:03:51.17,Default,,0000,0000,0000,,Vamos a poner el cursor dentro y usemos
Dialogue: 0,0:03:51.17,0:03:53.30,Default,,0000,0000,0000,,el depurador de números para \Nhacer la imagen más grande.
Dialogue: 0,0:03:53.56,0:03:56.85,Default,,0000,0000,0000,,Ok, eso se ve mejor.
Dialogue: 0,0:03:56.85,0:03:58.96,Default,,0000,0000,0000,,Ahora vamos a tratar de hacerla más alta.
Dialogue: 0,0:03:58.96,0:04:01.26,Default,,0000,0000,0000,,Digamos que queremos una altura de 50
Dialogue: 0,0:04:01.26,0:04:02.09,Default,,0000,0000,0000,,¡Oh, oh!
Dialogue: 0,0:04:02.09,0:04:04.86,Default,,0000,0000,0000,,¡Aplasté mi conejo, pobre conejo!
Dialogue: 0,0:04:04.86,0:04:08.14,Default,,0000,0000,0000,,Mira, por eso sólo se debe especificar
Dialogue: 0,0:04:08.14,0:04:10.68,Default,,0000,0000,0000,,la anchura o la altura, pero no las dos
Dialogue: 0,0:04:10.68,0:04:13.33,Default,,0000,0000,0000,,porque podríamos usar unas \Ndimensiones incorrectas
Dialogue: 0,0:04:13.33,0:04:16.41,Default,,0000,0000,0000,,y aplastar a sus conejos, así que sólo\Ndejen que el navegador
Dialogue: 0,0:04:16.41,0:04:20.31,Default,,0000,0000,0000,,haga las matemáticas y decida cuál \Ndebe ser el valor de la otra dimensión.
Dialogue: 0,0:04:20.31,0:04:22.25,Default,,0000,0000,0000,,Voy a borrar la altura.
Dialogue: 0,0:04:22.47,0:04:25.21,Default,,0000,0000,0000,,Ahora que puedes poner imágenes,\Nempieza a pensar
Dialogue: 0,0:04:25.21,0:04:27.84,Default,,0000,0000,0000,,como combinar todas las etiquetas que \Ntienes en tu caja de herramientas,
Dialogue: 0,0:04:27.84,0:04:32.93,Default,,0000,0000,0000,,listas con imágenes y párrafos, los \N10 animales más locos.
Dialogue: 0,0:04:32.93,0:04:35.78,Default,,0000,0000,0000,,Sólo que no pongas muchas imágenes \Nen tu página
Dialogue: 0,0:04:35.78,0:04:38.11,Default,,0000,0000,0000,,porque la persona que esté revisando\Ntu página web
Dialogue: 0,0:04:38.11,0:04:40.27,Default,,0000,0000,0000,,tendrá que cargarlas todas,
Dialogue: 0,0:04:40.27,0:04:43.89,Default,,0000,0000,0000,,pero tú puedes seguir teniendo \Nmucha diversión.