Instituto Tecnológico De La Zona Olmeca

Alumna: María Concepción Díaz De La Cruz.

Carrera: Ingeniería En Sistemas Computacionales.

Semestre y Grupo: “2-A”

Asignatura: Programación Web.

Docente: Ezequiel Gómez Domínguez.

“TIPOS DE ARCHIVOS EN IMAGEN SOPORTADOS EN HTML”

 Formato de imagen para la web - gif

Este formato de imagen para la web se hizo muy popular a principios de los años
90. Al llegar el nuevo milenio Flash le quitó gran parte de esa popularidad y pasó
a ganar terreno (flash no es un formato de imagen).

Este formato de imagen ocupa muy poco, soporta imágenes estáticas y

animaciones simples juntando unos cuantos frames y admite transparencias.

Se trata de un formato muy utilizado en la web, de forma que se puede afirmar que los GIFs en
HTML son elementos que permiten añadir tanto animaciones como imágenes a tu sitio web.

 Formato de imagen para la web - jpg

Este formato de imagen para la web se utiliza principalmente para fotografías. Hay que decir, que
en comparación a los gif, no hay color, ya que admite millones de estos.

Este formato es ideal para fotografías y otras imágenes con gradientes

suaves. Es compatible con millones de colores y utiliza compresión con
pérdida para reducir el tamaño del archivo sin una pérdida significativa de calidad. Las imágenes
JPEG suelen tener una extensión de archivo «.jpg» o «.jpeg».

Los archivos JPEG admiten color de hasta 24 bits y se comprimen con pérdida de datos para que
las imágenes puedan almacenar o enviar de forma más sencilla, de modo que son mejores para el
uso diario, aunque ello implique perder parte de la calidad de la imagen original.

 Formato de imagen para la web - png

Este formato de imagen ocupa muy poco con gráficos. Es perfecto para todos los elementos del
diseño web, ya que la mayoría, ocupan menos que con jpg. Donde no es tan bueno es con las
fotografías, ya que tiende a generar archivos más grandes que las jpg.

Algo muy interesante de este formato es que permite hacer unas transparencias perfectas, algo
que con jpg no se puede hacer. Con gif si se pueden hacer, pero no quedan tan limpias o perfectas.

El formato PNG es ampliamente utilizado para gráficos y elementos con bordes definidos, como
logotipos y iconos. Ofrece una calidad de imagen superior a la de JPEG, con la ventaja adicional de
admitir transparencia. Las imágenes PNG generalmente tienen una extensión de archivo «.png».

 Formato de imagen para la web – svg

svg viene de Scalable Vector Graphics. Este formato da un gran salto y permite
hasta crear plantillas web enteras con gráficos vectoriales.

El formato de archivo SVG es una herramienta que se emplea habitualmente

para mostrar gráficos, diagramas e ilustraciones bidimensionales en los sitios
web. Además, al ser un archivo vectorial, se puede ampliar y reducir sin perder resolución.

Hay varias razones para utilizar imágenes SVG, algunas de las cuales son:

1) Las imágenes SVG no pierden su calidad al ampliarlas o cambiarlas de tamaño.

2) Se pueden crear y editar con un IDE o un editor de texto.
3) Son accesibles y animables.
4) Tienen un tamaño de archivo pequeño y son altamente escalables.
5) Y se pueden buscar, indexar, programar y comprimir.
 Formato de imagen para la web - webp

Un formato de imagen bastante reciente creado por Google que se creó con la
intención de juntar todas las ventajas que tienen los otros formatos de imagen.

WebP es un formato de imágenes de nueva generación desarrollado por Google

y promete mejorar los tiempos de carga de tu web al emplear un tipo de
compresión intraframe basada en predicción por bloques.
El archivo WebP tiene el objetivo de hallar el equilibrio entre calidad y practicidad en lo que
respecta a las imágenes de los sitios web. Con la ayuda de la codificación predictiva, los archivos
WebP comprimen fotografías y gráficos sin reducir la calidad de su aspecto.

 Formato de imagen para la web – BMP

Aunque a este formato a veces se le denomina mapa de bits independiente del

dispositivo (o DIB, por sus siglas en inglés), un archivo BMP se refiere a mapa de
bits y suele pronunciar como “bump”.

En un principio, Microsoft desarrolló el formato BMP para su sistema operativo Windows con el fin
de mantener la resolución de las imágenes digitales en diferentes pantallas y dispositivos. Es capaz
de almacenar imágenes bidimensionales en color o en blanco y negro.

Cómo convertir BMP a HTML

Haga clic dentro del área de colocación de archivos para cargar el archivo BMP o arrastre y suelte
el archivo BMP. Haga clic en el botón Convertir. Sus BMP archivos se cargarán y convertirán al
formato de resultado HTML.
 “ETIQUETA META”

La etiqueta HTML Head es el contenedor de los metadatos. Se encuentra entre la etiqueta HTML
<html>y las etiquetas body <body>. Este es el lugar donde colocas todas tus etiquetas meta en
HTML para definir el título, los estilos, los scripts y otra información.

Las etiquetas meta en HTML sirven como piezas importantes de información para los motores de
búsqueda. Se utilizan para describir elementos HTML y comunicar el contenido de un sitio web
para los motores de búsqueda.

La etiqueta <meta> en HTML se utiliza para proporcionar información adicional, llamada

metadatos, sobre un documento HTML. Los metadatos no se muestran directamente en la página
web, pero son útiles para navegadores, motores de búsqueda
y otras aplicaciones que interactúan con la página. Estos
datos pueden incluir información sobre la descripción del
sitio, palabras clave relevantes, el autor del contenido y más.
La etiqueta <meta> es un elemento vacío y se encuentra
dentro del elemento <head> de un documento HTML.
Algunos ejemplos de uso incluyen definir la codificación de
caracteres, descripción del contenido, palabras clave, autor
del documento, entre otros.

La etiqueta <meta> en HTML tiene varias funciones importantes. Algunas de las funciones clave
incluyen:

1) Definir la codificación de caracteres: Utilizando el atributo "charset", la etiqueta <meta>

especifica la codificación de caracteres utilizados en el documento HTML, lo que es crucial
para garantizar la correcta visualización de los caracteres especiales.
2) Descripción del contenido: A través del atributo "description", la etiqueta <meta> proporciona
una breve descripción del contenido de la página web, lo que es útil para los motores de
búsqueda y para brindar a los usuarios una idea clara del contenido de la página.
3) Palabras clave relevantes: Mediante el atributo "keywords", la etiqueta <meta> permite
especificar palabras clave relevantes para el contenido de la página, lo que puede influir en la
indexación y clasificación de la página por parte de los motores de búsqueda.
4) Autor del documento: Utilizando el atributo "author", la etiqueta <meta> permite especificar
el autor del contenido, lo que puede ser útil para identificar la autoría del documento.

Estas funciones son esenciales para proporcionar información adicional sobre el documento
HTML, facilitar la indexación y búsqueda, y optimizar la visibilidad y configuración de la página
web.
 “Principales Etiquetas En HTML”

Hay una serie de etiquetas que son las más usadas para crear cualquier

documento HTML, a continuación, las explicamos:

<body> para el contenido

<head> para información sobre el documento

<div> división dentro del contenido

<a> para enlaces

<strong> para poner el texto en negrita

<br> para saltos de línea

<H1>…<H6> para títulos dentro del contenido

<img> para añadir imágenes al documento

<ol> para listas ordenadas, <ul> para listas desordenadas, <li> para elementos dentro de

la lista

<p> para parágrafos

<span> para estilos de una parte del texto

<body> </body>