Activa JavaScript para disfrutar de los vídeos de la Mediateca.
HTML img - Contenido educativo
Ajuste de pantallaEl ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:
Las imágenes tienen un capítulo aparte, porque es uno de los elementos que más aparecen dentro de una página HTML.
00:00:00
Y en informática hay dos tipos de imágenes, las que son de mapa de bits o las imágenes vectoriales.
00:00:08
Las imágenes de mapa de bits representan justamente los píxeles en que se va conformando cada una de las partes de la imagen.
00:00:15
Las imágenes vectoriales lo que indican son las líneas o trazos que tiene esa imagen
00:00:25
Entonces las imágenes vectoriales no cabe duda que tienen mucha importancia en un dibujo técnico
00:00:34
Donde podamos definir claramente una línea donde empieza, donde acaba, que color tiene, etc
00:00:41
Mientras que los mapas de bits en imágenes de tipo pictórico, etc, pues tienen muchísima importancia
00:00:45
Bueno, una imagen de bits, de mapa de bits, ocupa muchísimo, porque debería ocupar por cada píxel todo el grado, todo el rango de colores que puede tomar.
00:00:51
Entonces, imagínense una imagen de estas que hablamos de 800x600 píxeles, pues tendría montones y montones de información.
00:01:04
Para ello, pues ha habido un montón de formatos que van pintando esas imágenes.
00:01:11
Entonces tenemos, por ejemplo, muy conocidos JPEG o JPG, GIF, PNG, incluso GIF animados, BMP, que realmente era Bits, Map, etc, etc, etc. Tenemos montones de imágenes del tipo de mapa de Bits.
00:01:16
Y en el formato de imágenes vectoriales hemos utilizado SVG, ¿de acuerdo?
00:01:33
Actualmente se está implantando el WebP, porque Google lo está lanzando,
00:01:38
y ya veremos en una serie de años qué formato va a ser el que funciona.
00:01:43
Porque hay un montón de formatos que ha habido a lo largo de los años que no,
00:01:48
que a día de hoy casi no tienen existencia.
00:01:51
Entonces, bueno, ¿cuál elegir uno u otro?
00:01:55
Pues esto un poco la experiencia te lo cuenta, en función de lo que se comprime la imagen,
00:01:58
en función de su uso, en función de una serie de cuestiones
00:02:02
y aquí pues hacemos un recorrido a lo largo de un montón de imágenes
00:02:05
¿Cómo incluimos una imagen?
00:02:09
Bueno, pues la manera de incluir una imagen es con la etiqueta IMG
00:02:12
que es una etiqueta que no hay que cerrar, una etiqueta que tiene sus atributos
00:02:18
uno de ellos es el Source, el SRC, donde se indica cuál es la dirección donde se encuentra la imagen
00:02:23
Y tenemos como etiqueta que deberíamos incluir siempre, a pesar de que veamos montones de web donde no se hace, el texto alternativo en caso de que esta imagen no se pudiera cargar, que es esta información que hay aquí, alt.
00:02:29
¿De acuerdo? Por supuesto podemos incluir otras etiquetas como style, title, etc. Por supuesto, ¿vale? También otras etiquetas típicas, típicas en cualquier imagen es incluir el ancho y el alto.
00:02:43
Y además tiene unas características muy especiales este ancho y este alto, porque con incluir uno de ellos, el otro se adecua a ese formato, ¿de acuerdo? Con lo cual la imagen no modifica su correspondencia entre ancho y alto.
00:03:00
Bueno, aquí estamos viendo
00:03:15
Otro tipo de imágenes
00:03:17
De acuerdo, tampoco aplica mucho más
00:03:19
Y
00:03:21
Más imágenes con su
00:03:23
Alt correspondiente
00:03:25
Más imágenes
00:03:27
Y por ejemplo en esta imagen
00:03:29
Tux2 que no existe, pues vemos que en este
00:03:31
Navegador, el aspecto en que
00:03:33
Aparece es así, indicando
00:03:35
Este mensaje
00:03:37
Por ejemplo en Firefox, quiero recordar
00:03:39
Lo digo de cabeza, que no pone nada
00:03:41
pone directamente el texto y ya está
00:03:43
no pone que la imagen se haya roto ni nada por el estilo
00:03:45
¿vale?
00:03:47
el title es lo que estaba diciendo
00:03:49
que efectivamente si yo pongo encima de la imagen
00:03:51
pues aquí aparece el título
00:03:53
y puede ser muy interesante
00:03:55
en casos como estos, en que no aparece
00:03:56
para darle más información aún si cabe
00:03:59
bueno
00:04:01
el width y el rate, que siempre es en píxeles
00:04:02
vemos como las imágenes las vamos deformando
00:04:05
voy a seguir
00:04:09
y lo que decía
00:04:11
proporcional, en el momento que ponemos uno de ellos
00:04:12
es proporcional, con lo cual podemos dejarlos todos
00:04:15
a la misma altura o al mismo ancho, como queramos
00:04:17
bueno
00:04:19
existe una etiqueta SVG
00:04:21
pero realmente
00:04:23
pues en la cual
00:04:25
vamos definiendo todos los puntos
00:04:27
que la conforman, de acuerdo
00:04:29
es una manera de hacerlo
00:04:31
y
00:04:32
bien, con todo esto pues
00:04:33
podemos montar imágenes
00:04:37
además, podríamos
00:04:39
utilizar una etiqueta que es imagen
00:04:41
pero indicando que verde
00:04:43
el fuente, indicando como está codificada
00:04:44
con el base encode
00:04:47
es algo muy complejo que solamente
00:04:49
en caso de aplicaciones importantes se utiliza
00:04:51
por supuesto las imágenes se pueden
00:04:53
colocar en cualquier sitio, es importante
00:04:55
la flotación de imágenes, ¿qué se refiere
00:04:57
a la flotación de imágenes? bueno, aquí estoy
00:04:59
buscando algún texto que pudiera ocurrir
00:05:01
imagínense que este pingüino
00:05:03
aquí quisiéramos poner texto, pues haríamos
00:05:05
un float a la izquierda
00:05:07
un float left para que aquí
00:05:10
aparezca la información
00:05:11
¿de acuerdo? entonces aparecería
00:05:13
iría saltando a través de la imagen
00:05:15
eso es algo muy habitual
00:05:17
y en el tema que aparece aquí
00:05:18
de posicionamiento flotante de imágenes
00:05:21
se podría ver
00:05:22
- Idioma/s:
- Autor/es:
- Amadeo Mora
- Subido por:
- Amadeo M.
- Licencia:
- Dominio público
- Visualizaciones:
- 110
- Fecha:
- 28 de diciembre de 2020 - 14:35
- Visibilidad:
- Público
- Centro:
- IES CLARA DEL REY
- Duración:
- 05′ 26″
- Relación de aspecto:
- 1.78:1
- Resolución:
- 1364x768 píxeles
- Tamaño:
- 49.12 MBytes
