SlideShare una empresa de Scribd logo
FORMATO DE IMAGEN Las imágenes pueden ser de muchos formatos diferentes: bmp, gif, jpg, etc. Pero no todos estos formatos son adecuados para una web, debido a que pueden ocupar mucha memoria o a que no son compatibles con algunos navegadores. Los formatos más utilizados son el GIF y el JPG, que a pesar de ser imágenes de menor calidad que las imágenes BMP, son más recomendables debido a que ocupan menos memoria. Vamos a ver un poco más sobre estos formatos:
Formato GIF: Utilizan un máximo de 256 colores, y son recomendables para imágenes con grandes áreas de un mismo color o de tonos no continuos. Suelen utilizarse con gran frecuencia, ya que permiten definir transparencias y animación.
Formato JPG: Las imágenes son de mayor calidad que las GIF, al poder contener millones de colores, pero el tamaño de la imagen es mayor y tarda más en descargarse se utilizan más para fotos. Puedes incluir imágenes en otros formatos, que podrán ser visualizadas en algunos navegadores. Este es el caso de las imágenes BMP y PNG. Puedes cambiar el formato de las imágenes mediante la utilización de algún programa de tratamiento de imágenes, como pueden ser Fireworks, Photoshop, Corel Draw, etc. Por ejemplo el Fireworks de Macromedia tiene una opción, exportar a tipo gif que reduce considerablemente la ocupación de la imagen sin perder en calidad (siempre que la imagen se adecue al formato). Dependiendo del programa utilizado existirá una mayor o menor cantidad de opciones a la hora de modificar las imágenes. Para realizar modificaciones sencillas, como la de recortar las imágenes y cambiar los colores, puedes utilizar incluso el programa Paint de Windows.  
Vamos a ver cómo insertar imágenes, y cómo modificar algunas de sus propiedades.  Imagen <img>   Todas las páginas web acostumbran a tener un cierto número de imágenes, que permiten mejorar su apariencia, o dotarla de una mayor información visual.  Para insertar una imagen es necesario insertar la etiqueta<img>. Dicha etiqueta no necesita etiqueta de cierre. El nombre de la imagen ha de especificarse a través del atributo src. Por ejemplo, para insertar la siguiente imagen: Habría que escribir: <img src="imagenes/logo_animales.gif"> Teniendo en cuentra que la imagen se llama logo_animales.gif y que está dentro de la carpeta imagenes, que se encuentra en el mismo directorio que el documento actual (referencia relativa al documento). Para trabajar de una forma más sencilla y ordenada, es recomendable que todos los documentos html se encuentren en un mismo directorio, y que dentro de este directorio existan diferentes carpetas para agrupar otros objetos, como puede ser una carpeta destinada a almacenar imagenes, o una carpeta destinada a almacenar archivos de audio, etc. Existen una serie de formatos de imagen más recomendables que otros para ser introducidos en una página web. Esta información puedes consultarla aqui
Texto alternativo  Cuando una imagen no puede ser visualizada en el navegador, cosa que puede ocurrir al especificar mal el valor del atributo src, aparece un recuadro blanco con una X roja en su lugar, junto con el nombre de la imagen. Podemos hacer que en lugar de mostrarse el nombre de la imagen aparezca el texto que nosotros deseemos, gracias al atributo alt. Por ejemplo, imagina que deseamos mostrar una imagen llamada gatito.gif, con el texto alternativo Imagen gato, para ello insertamos el siguiente código: <img src="gatito.gif" alt="Imagen gato" > Pero hemos cometido un error, ya que dicha imagen no se encuentra en el mismo directorio que el documento actual, sino que se encuentra dentro de la carpeta imagenes. En lugar de la imagen se mostrará lo siguiente:

Más contenido relacionado

La actualidad más candente

Formato imágenes
Formato imágenesFormato imágenes
Formato imágeneseugenialpha
 
Informe informática
Informe informáticaInforme informática
Informe informática
theofogel02465
 
Guia 4 lenguaje html
Guia 4   lenguaje htmlGuia 4   lenguaje html
Guia 4 lenguaje html
Cristian Gonzalez
 
Aspectos del formato del objeto
Aspectos del formato del objetoAspectos del formato del objeto
Aspectos del formato del objeto
katyperrisima
 
Jess
JessJess
Jess
JORGE
 
PRACTICA 23
PRACTICA 23PRACTICA 23
PRACTICA 23wichola
 
Código html trabajo compu
Código html trabajo compuCódigo html trabajo compu
Código html trabajo compuPaul David
 

La actualidad más candente (10)

paralelo html-html5
paralelo html-html5paralelo html-html5
paralelo html-html5
 
Formato imágenes
Formato imágenesFormato imágenes
Formato imágenes
 
Practica 23
Practica 23Practica 23
Practica 23
 
Informe informática
Informe informáticaInforme informática
Informe informática
 
Guia 4 lenguaje html
Guia 4   lenguaje htmlGuia 4   lenguaje html
Guia 4 lenguaje html
 
Practica 24
Practica 24Practica 24
Practica 24
 
Aspectos del formato del objeto
Aspectos del formato del objetoAspectos del formato del objeto
Aspectos del formato del objeto
 
Jess
JessJess
Jess
 
PRACTICA 23
PRACTICA 23PRACTICA 23
PRACTICA 23
 
Código html trabajo compu
Código html trabajo compuCódigo html trabajo compu
Código html trabajo compu
 

Destacado

Zoetjes6-Special
Zoetjes6-SpecialZoetjes6-Special
Zoetjes6-SpecialDipsiie
 
NotiGrodco
NotiGrodcoNotiGrodco
Processo zelio cachoeirinha
Processo zelio cachoeirinhaProcesso zelio cachoeirinha
Processo zelio cachoeirinha
Roberlan Barbosa da Silva
 
Improving Your Performance In Corporate Scenario
Improving Your Performance In Corporate ScenarioImproving Your Performance In Corporate Scenario
Improving Your Performance In Corporate ScenarioShadab Ahmed
 
A biblia e clara
A biblia e claraA biblia e clara
A biblia e claraFer Nanda
 
Informe Energético a Octubre de 2014 por provincias
Informe Energético a Octubre de 2014 por provinciasInforme Energético a Octubre de 2014 por provincias
Informe Energético a Octubre de 2014 por provincias
Eduardo Nelson German
 
Selected business article Finished Product
Selected business article Finished ProductSelected business article Finished Product
Selected business article Finished Product
JessicaLHarrington
 
Europe des travaileur et des peuples
Europe des travaileur et des peuplesEurope des travaileur et des peuples
Europe des travaileur et des peupleshypolites66
 
20131125 Taller H2020. Instrumentos Financieros de apoyo a la I+D+i a nivel n...
20131125 Taller H2020. Instrumentos Financieros de apoyo a la I+D+i a nivel n...20131125 Taller H2020. Instrumentos Financieros de apoyo a la I+D+i a nivel n...
20131125 Taller H2020. Instrumentos Financieros de apoyo a la I+D+i a nivel n...
FIAB
 
Afraid of LInkedIn? Start Here
Afraid of LInkedIn? Start HereAfraid of LInkedIn? Start Here
Afraid of LInkedIn? Start Here
kschulweis
 
Pp culture nursingupload
Pp culture nursinguploadPp culture nursingupload
Pp culture nursinguploadhumphreymiriam
 
La depresión. maria belen garcia
La depresión. maria belen garciaLa depresión. maria belen garcia
La depresión. maria belen garciaAlejandraGraciela
 
Aramita y mamita
Aramita y mamitaAramita y mamita
Aramita y mamitaguestfd4502
 
Late Elementray Nutrition Lesson Fractions Final. E. Madison
Late Elementray Nutrition Lesson   Fractions Final. E. MadisonLate Elementray Nutrition Lesson   Fractions Final. E. Madison
Late Elementray Nutrition Lesson Fractions Final. E. Madison
Elizabeth Madison, MA, Registered Dietitian
 

Destacado (20)

Zoetjes6-Special
Zoetjes6-SpecialZoetjes6-Special
Zoetjes6-Special
 
NotiGrodco
NotiGrodcoNotiGrodco
NotiGrodco
 
Noche de paz
Noche de pazNoche de paz
Noche de paz
 
Must 42
Must 42Must 42
Must 42
 
Processo zelio cachoeirinha
Processo zelio cachoeirinhaProcesso zelio cachoeirinha
Processo zelio cachoeirinha
 
Improving Your Performance In Corporate Scenario
Improving Your Performance In Corporate ScenarioImproving Your Performance In Corporate Scenario
Improving Your Performance In Corporate Scenario
 
A biblia e clara
A biblia e claraA biblia e clara
A biblia e clara
 
Informe Energético a Octubre de 2014 por provincias
Informe Energético a Octubre de 2014 por provinciasInforme Energético a Octubre de 2014 por provincias
Informe Energético a Octubre de 2014 por provincias
 
Selected business article Finished Product
Selected business article Finished ProductSelected business article Finished Product
Selected business article Finished Product
 
Europe des travaileur et des peuples
Europe des travaileur et des peuplesEurope des travaileur et des peuples
Europe des travaileur et des peuples
 
xerezade
xerezadexerezade
xerezade
 
20131125 Taller H2020. Instrumentos Financieros de apoyo a la I+D+i a nivel n...
20131125 Taller H2020. Instrumentos Financieros de apoyo a la I+D+i a nivel n...20131125 Taller H2020. Instrumentos Financieros de apoyo a la I+D+i a nivel n...
20131125 Taller H2020. Instrumentos Financieros de apoyo a la I+D+i a nivel n...
 
Afraid of LInkedIn? Start Here
Afraid of LInkedIn? Start HereAfraid of LInkedIn? Start Here
Afraid of LInkedIn? Start Here
 
Pp culture nursingupload
Pp culture nursinguploadPp culture nursingupload
Pp culture nursingupload
 
La depresión. maria belen garcia
La depresión. maria belen garciaLa depresión. maria belen garcia
La depresión. maria belen garcia
 
Archivo
ArchivoArchivo
Archivo
 
Amooor
AmooorAmooor
Amooor
 
Aramita y mamita
Aramita y mamitaAramita y mamita
Aramita y mamita
 
Late Elementray Nutrition Lesson Fractions Final. E. Madison
Late Elementray Nutrition Lesson   Fractions Final. E. MadisonLate Elementray Nutrition Lesson   Fractions Final. E. Madison
Late Elementray Nutrition Lesson Fractions Final. E. Madison
 
Bullied - Eleven
 Bullied - Eleven Bullied - Eleven
Bullied - Eleven
 

Similar a Ernesto dertas

Creacion Pagina Web Unidad 5
Creacion Pagina Web Unidad 5Creacion Pagina Web Unidad 5
Creacion Pagina Web Unidad 5morchito03
 
Colegionacionalnicolsesguerra 15091711-app6892-150924155136-lva1-app6891
Colegionacionalnicolsesguerra 15091711-app6892-150924155136-lva1-app6891Colegionacionalnicolsesguerra 15091711-app6892-150924155136-lva1-app6891
Colegionacionalnicolsesguerra 15091711-app6892-150924155136-lva1-app6891
santi302930
 
242310
242310242310
Tema 05 trabajando con imagenes en html
Tema 05 trabajando con imagenes en htmlTema 05 trabajando con imagenes en html
Tema 05 trabajando con imagenes en html
Salomon Aquino
 
Imágenes en html
Imágenes en htmlImágenes en html
Imágenes en html
Gilbert Morelo Hernandez
 
Evidencia iv
Evidencia ivEvidencia iv
Evidencia iv
sergio804
 
Imágenes
ImágenesImágenes
Imágenes
BaronyBarreto
 
Colegio nacional nicolás esguerra 4
Colegio nacional nicolás esguerra 4Colegio nacional nicolás esguerra 4
Colegio nacional nicolás esguerra 4
Daniel Esteban
 
Colegio nacional nicolás esguerra 4
Colegio nacional nicolás esguerra 4Colegio nacional nicolás esguerra 4
Colegio nacional nicolás esguerra 4
Edward Neuta
 
Web 4
Web 4Web 4
Web 4
darwlu
 
Evidencia iv
Evidencia ivEvidencia iv
Evidencia iv
sergio804
 
Imagenes en paginas web
Imagenes en paginas webImagenes en paginas web
Imagenes en paginas web
Uniminuto - SENA
 
PROCEDIMIENTOS PARA INSERTAR COLORES, IMÁGENES Y VÍNCULOS EN EL DISEÑO DE LAS...
PROCEDIMIENTOS PARA INSERTAR COLORES, IMÁGENES Y VÍNCULOS EN EL DISEÑO DE LAS...PROCEDIMIENTOS PARA INSERTAR COLORES, IMÁGENES Y VÍNCULOS EN EL DISEÑO DE LAS...
PROCEDIMIENTOS PARA INSERTAR COLORES, IMÁGENES Y VÍNCULOS EN EL DISEÑO DE LAS...
3186841042
 
Pagina web 4
Pagina web 4Pagina web 4
Pagina web 4
thefaut
 
Uso de las normas requeridas en la incorporación
Uso de las normas requeridas en la incorporaciónUso de las normas requeridas en la incorporación
Uso de las normas requeridas en la incorporaciónXoch Flores
 
Curso HTML desde Cero - Capítulo 1
Curso HTML desde Cero - Capítulo 1Curso HTML desde Cero - Capítulo 1
Curso HTML desde Cero - Capítulo 1
yanburbano
 
Html4 imagnes
Html4 imagnesHtml4 imagnes
Html4 imagnescinco81
 

Similar a Ernesto dertas (20)

Creacion Pagina Web Unidad 5
Creacion Pagina Web Unidad 5Creacion Pagina Web Unidad 5
Creacion Pagina Web Unidad 5
 
Colegionacionalnicolsesguerra 15091711-app6892-150924155136-lva1-app6891
Colegionacionalnicolsesguerra 15091711-app6892-150924155136-lva1-app6891Colegionacionalnicolsesguerra 15091711-app6892-150924155136-lva1-app6891
Colegionacionalnicolsesguerra 15091711-app6892-150924155136-lva1-app6891
 
242310
242310242310
242310
 
Tema 05 trabajando con imagenes en html
Tema 05 trabajando con imagenes en htmlTema 05 trabajando con imagenes en html
Tema 05 trabajando con imagenes en html
 
Imágenes en html
Imágenes en htmlImágenes en html
Imágenes en html
 
Imagenes
ImagenesImagenes
Imagenes
 
Evidencia iv
Evidencia ivEvidencia iv
Evidencia iv
 
Imágenes
ImágenesImágenes
Imágenes
 
Colegio nacional nicolás esguerra 4
Colegio nacional nicolás esguerra 4Colegio nacional nicolás esguerra 4
Colegio nacional nicolás esguerra 4
 
Colegio nacional nicolás esguerra 4
Colegio nacional nicolás esguerra 4Colegio nacional nicolás esguerra 4
Colegio nacional nicolás esguerra 4
 
Web 4
Web 4Web 4
Web 4
 
Evidencia iv
Evidencia ivEvidencia iv
Evidencia iv
 
Imagenes en paginas web
Imagenes en paginas webImagenes en paginas web
Imagenes en paginas web
 
PROCEDIMIENTOS PARA INSERTAR COLORES, IMÁGENES Y VÍNCULOS EN EL DISEÑO DE LAS...
PROCEDIMIENTOS PARA INSERTAR COLORES, IMÁGENES Y VÍNCULOS EN EL DISEÑO DE LAS...PROCEDIMIENTOS PARA INSERTAR COLORES, IMÁGENES Y VÍNCULOS EN EL DISEÑO DE LAS...
PROCEDIMIENTOS PARA INSERTAR COLORES, IMÁGENES Y VÍNCULOS EN EL DISEÑO DE LAS...
 
Pagina web 4
Pagina web 4Pagina web 4
Pagina web 4
 
Uso de las normas requeridas en la incorporación
Uso de las normas requeridas en la incorporaciónUso de las normas requeridas en la incorporación
Uso de las normas requeridas en la incorporación
 
Curso HTML desde Cero - Capítulo 1
Curso HTML desde Cero - Capítulo 1Curso HTML desde Cero - Capítulo 1
Curso HTML desde Cero - Capítulo 1
 
Codigo html
Codigo htmlCodigo html
Codigo html
 
Unidad 2
Unidad 2Unidad 2
Unidad 2
 
Html4 imagnes
Html4 imagnesHtml4 imagnes
Html4 imagnes
 

Ernesto dertas

  • 1. FORMATO DE IMAGEN Las imágenes pueden ser de muchos formatos diferentes: bmp, gif, jpg, etc. Pero no todos estos formatos son adecuados para una web, debido a que pueden ocupar mucha memoria o a que no son compatibles con algunos navegadores. Los formatos más utilizados son el GIF y el JPG, que a pesar de ser imágenes de menor calidad que las imágenes BMP, son más recomendables debido a que ocupan menos memoria. Vamos a ver un poco más sobre estos formatos:
  • 2. Formato GIF: Utilizan un máximo de 256 colores, y son recomendables para imágenes con grandes áreas de un mismo color o de tonos no continuos. Suelen utilizarse con gran frecuencia, ya que permiten definir transparencias y animación.
  • 3. Formato JPG: Las imágenes son de mayor calidad que las GIF, al poder contener millones de colores, pero el tamaño de la imagen es mayor y tarda más en descargarse se utilizan más para fotos. Puedes incluir imágenes en otros formatos, que podrán ser visualizadas en algunos navegadores. Este es el caso de las imágenes BMP y PNG. Puedes cambiar el formato de las imágenes mediante la utilización de algún programa de tratamiento de imágenes, como pueden ser Fireworks, Photoshop, Corel Draw, etc. Por ejemplo el Fireworks de Macromedia tiene una opción, exportar a tipo gif que reduce considerablemente la ocupación de la imagen sin perder en calidad (siempre que la imagen se adecue al formato). Dependiendo del programa utilizado existirá una mayor o menor cantidad de opciones a la hora de modificar las imágenes. Para realizar modificaciones sencillas, como la de recortar las imágenes y cambiar los colores, puedes utilizar incluso el programa Paint de Windows.  
  • 4. Vamos a ver cómo insertar imágenes, y cómo modificar algunas de sus propiedades.  Imagen <img>   Todas las páginas web acostumbran a tener un cierto número de imágenes, que permiten mejorar su apariencia, o dotarla de una mayor información visual. Para insertar una imagen es necesario insertar la etiqueta<img>. Dicha etiqueta no necesita etiqueta de cierre. El nombre de la imagen ha de especificarse a través del atributo src. Por ejemplo, para insertar la siguiente imagen: Habría que escribir: <img src="imagenes/logo_animales.gif"> Teniendo en cuentra que la imagen se llama logo_animales.gif y que está dentro de la carpeta imagenes, que se encuentra en el mismo directorio que el documento actual (referencia relativa al documento). Para trabajar de una forma más sencilla y ordenada, es recomendable que todos los documentos html se encuentren en un mismo directorio, y que dentro de este directorio existan diferentes carpetas para agrupar otros objetos, como puede ser una carpeta destinada a almacenar imagenes, o una carpeta destinada a almacenar archivos de audio, etc. Existen una serie de formatos de imagen más recomendables que otros para ser introducidos en una página web. Esta información puedes consultarla aqui
  • 5. Texto alternativo Cuando una imagen no puede ser visualizada en el navegador, cosa que puede ocurrir al especificar mal el valor del atributo src, aparece un recuadro blanco con una X roja en su lugar, junto con el nombre de la imagen. Podemos hacer que en lugar de mostrarse el nombre de la imagen aparezca el texto que nosotros deseemos, gracias al atributo alt. Por ejemplo, imagina que deseamos mostrar una imagen llamada gatito.gif, con el texto alternativo Imagen gato, para ello insertamos el siguiente código: <img src="gatito.gif" alt="Imagen gato" > Pero hemos cometido un error, ya que dicha imagen no se encuentra en el mismo directorio que el documento actual, sino que se encuentra dentro de la carpeta imagenes. En lugar de la imagen se mostrará lo siguiente: