Saltar navegación

Activa JavaScript para disfrutar de los vídeos de la Mediateca.

HTML - Imágenes - Contenido educativo

Ajuste de pantalla

El ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:

Subido el 10 de noviembre de 2020 por Fernando M.

117 visualizaciones

Más información Transcripción

Descargar la transcripción

Vale, pues ahora vamos a ver cómo añadir imágenes dentro de nuestra página web. Para ello, lo primero que vamos a hacer es crear una nueva estructura de directorio. 00:00:00
Entonces, nos vamos a ir a nuestro navegador y dentro de nuestro explorador de ficheros, como el que veis en pantalla, igual que creamos la carpeta recursos, vamos a crear una nueva carpeta que se va a llamar images, porque es muy normal crear una única carpeta donde metamos todas las imágenes de la página. 00:00:11
¿vale? entonces nos vamos a ir 00:00:30
nuestro navegador web 00:00:34
y vamos a irnos por ejemplo 00:00:37
a Pixabay, pixabay.com 00:00:39
¿vale? ya hemos trabajado con ella, hemos 00:00:41
descargado imágenes y vamos a descargar 00:00:43
3 imágenes, cualquiera, 3 imágenes que os gusten 00:00:45
¿vale? y voy a descargar por ejemplo 00:00:48
esta del molino, el mono 00:00:49
que es gracioso y 00:00:51
esta de 00:00:53
Florencia creo que es ¿vale? 00:00:54
y bueno 00:00:58
voy a descargar las imágenes en esta resolución, ¿vale? 1920x1280, una resolución alta para 00:00:59
que me garantice que la calidad de la imagen sea buena, ¿vale? Y la voy a descargar dentro 00:01:07
de la carpeta que acabo de crear, ¿vale? HTML, aquí en la carpeta Images, ¿vale? Y descargo 00:01:13
todas las imágenes ahí, esta también y la del mono también, ¿vale? 00:01:21
Bueno, otra vez me he dejado creo que el navegador abierto, ¿verdad? Sí. 00:01:36
Bueno, simplemente que me he descargado, no he hecho gran cosa, ¿vale? 00:01:41
Me he descargado las tres imágenes de Pisa Bay, le he dado descarga gratuita 00:01:43
y aquí he elegido la calidad más alta, ¿vale? Solo eso, no he hecho nada más. 00:01:48
vale, entonces 00:01:52
ya puedo cerrar todo esto 00:01:54
y vuelvo a abrir el navegador 00:01:56
el explorador de ficheros, perdón 00:01:59
¿por qué? 00:02:01
porque voy a entrar dentro de la carpeta images 00:02:02
y lo que voy a hacer es cambiarle el nombre a las imágenes 00:02:04
para que me sea más fácil luego hacer referencia 00:02:07
a ellas, ¿vale? voy a poner 00:02:09
por ejemplo, aquí voy a poner Florencia 00:02:11
aquí voy a poner Mono 00:02:12
¿vale? y aquí voy a poner 00:02:15
Molino 00:02:17
¿vale? y ahí tengo 00:02:18
mis tres imágenes 00:02:21
Y ahora nos vamos a ir al editor, al brackets, ¿vale? Y como siempre, lo primero que vamos a hacer, yo me he creado un archivo nuevo que se llama prueba-imágenes.html y lo primero que vamos a hacer es crear esa estructura HTML y ponemos html 2.5 y le damos al tabulador, ¿vale? 00:02:22
Y aquí vamos a poner imágenes en HTML, ese va a ser el título de mi web, ¿vale? Entonces, dentro del body voy a poner la etiqueta para añadir imágenes. ¿Cuál es esa etiqueta? Muy sencillo, etiqueta img, ¿vale? 00:02:44
Esta etiqueta requiere unos atributos, muy importante. El primer atributo es src, que viene de source, ¿vale? Es decir, de la fuente, de donde viene la imagen. Entonces le damos, nos sale dos puntos y fijaros que me aparece ya directamente todos los contenidos que hay dentro de mi carpeta. 00:03:02
Bueno, entonces yo le voy a dar imágenes y vamos a elegir, por ejemplo, Florencia, ¿vale? Yo meto esa imagen y cierro, ¿vale? No tengo que añadir ninguna etiqueta de cierre, ¿vale? Para la etiqueta de imagen es suficiente con eso. 00:03:22
Le doy a guardar y me voy a mi navegador, actualizo y fijaros, ¿vale? Me sale la imagen pero como la imagen es muy grande no aparece cuadrada, no aparece bien ubicada dentro del navegador, ¿vale? 00:03:38
Entonces, para eso tenemos que entrar a modificar su tamaño. Antes de modificar su tamaño vamos a añadir otra etiqueta muy importante que es la etiqueta alt, A-L-T, ¿vale? 00:03:55
Aquí lo que vamos a poner es un texto descriptivo que sirve para dos cosas. En caso que una imagen no cargue correctamente o en caso que esta web se utilice por algún programa para gente invidente que, por ejemplo, lo que hacen es leerle las imágenes, ¿vale? 00:04:07
Entonces leen esto y le muestra y le explica lo que están viendo, ¿vale? Entonces aquí pondríamos, por ejemplo, Catedral de Florencia, ¿vale? O directamente solo Florencia. Florencia de noche. 00:04:24
¿Vale? ¿Ok? Es decir, yo esto actualizo la página y no hay ningún cambio para mí. Yo aquí no veo ningún cambio, ¿vale? Es normal. 00:04:37
Entonces, como decíamos, vamos a modificar el tamaño de la imagen. Para eso, simplemente nos venimos aquí dentro de la etiqueta y vamos a añadir un nuevo atributo, que es el atributo width. 00:04:47
¿Vale? Le damos y aquí podemos poner un tamaño. Yo voy a poner, por ejemplo, 800. ¿Vale? Esos 800 son los píxeles de la imagen. ¿Vale? Guardo, actualizo y fijaros que ahora sí se ve la imagen correctamente. 00:04:58
Ha reducido su tamaño, ¿vale? Si yo pongo juntos los atributos width y height, ¿vale? Lo que me está haciendo aquí es que me permite fijar un valor de anchura y un valor de altura. 00:05:16
Por lo tanto, yo aquí puedo modificar la relación de aspectos. Es decir, la imagen ya no sería como es la original, la distribución, ¿vale? La escala. 00:05:29
Fijaros que si yo ahora aquí pongo 20, lo que hace es que me la achata, ¿vale? 00:05:39
Entonces yo pondría 800 por 600, por ejemplo, ¿vale? 00:05:44
Y tendría un tamaño fijo, ¿vale? 00:05:49
Otra forma de modificar el tamaño de una imagen, ¿vale? 00:05:54
Pues voy a añadir una imagen nueva. 00:05:58
Voy a añadir, por ejemplo, el molino, ¿vale? 00:06:00
Molino de viento. 00:06:08
Otra forma de cambiar ese tamaño utilizando hojas de estilo, ¿vale? 00:06:10
Que esto ya lo veremos más adelante, pero para que tengáis una idea, sería de la siguiente forma. 00:06:15
Pondríamos aquí un parámetro, un atributo, que sería style. 00:06:20
Igual, y ahora entre comillas pondríamos por un lado la anchura, width, ¿vale? 00:06:24
Que pondríamos, por ejemplo, 400 píxeles, punto y coma y la anchura, y la altura. 00:06:30
Que pondríamos 200 píxeles, ¿vale? Y cerramos la etiqueta del IMG, ¿vale? Y con esto actualizaríamos la página, ¿vale? Y fijaros que aparecería nuestro molino, ¿vale? 00:06:37
Y ahora, lo último, ¿cómo ponemos enlaces con imágenes? Muy sencillo. Nos venimos, en primer lugar ponemos la etiqueta de enlace, que dijimos que era A, ¿vale? Ponemos a dónde queremos hacer el enlace, que en este caso, pues yo voy a buscar en Internet, en la Wikipedia, o para Wikipedia, monos, ¿vale? 00:06:54
Por ejemplo, voy a llevar a la página web de los monos de la Wikipedia, ¿vale? Copio la URL y la pego, pongo un target que me vaya blank, ¿vale? Y ahora, fijaros, que lo que voy a hacer es dentro, entre la etiqueta de A y la etiqueta de cierre de A, voy a meter mi imagen, ¿vale? 00:07:21
¿Cómo lo hago? Pues pongo una nueva imagen aquí, img, src, y elijo dentro de imágenes el mono, ¿vale? Acordaros siempre de poner el alt, que es muy importante, y voy a ponerle un tamaño de anchura, pues, por ejemplo, 640, ¿vale? 00:07:43
¿Vale? Guardo, actualizo, ¿vale? Y fijaros que sale aquí mi mono y si yo hago clic en el mono, se me abre la página web de la Wikipedia. ¿Vale? Bueno, pues espero que con esto ya también podáis meter imágenes, que ya veis que cada vez vamos añadiendo más contenido a nuestras páginas web, ¿vale? Bueno, espero que haya sido útil y nos vemos en la próxima. 00:08:06
Autor/es:
Fernando Martínez Martí
Subido por:
Fernando M.
Licencia:
Reconocimiento - No comercial - Compartir igual
Visualizaciones:
117
Fecha:
10 de noviembre de 2020 - 21:07
Visibilidad:
Público
Centro:
IES EL BURGO - IGNACIO ECHEVERRÍA
Duración:
08′ 35″
Relación de aspecto:
1.78:1
Resolución:
1920x1080 píxeles
Tamaño:
26.19 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid