SlideShare una empresa de Scribd logo
Imágenes en paginas web iem 2009 Tener una página Web está muy bien, pero es mucho mejor si ésta tiene ilustraciones. Además, todo lo que se necesita es una etiqueta para integrar todo tipo de imágenes en su sitio.
IMAGENES Esta presentación muestra como colocar imágenes en las paginas web atraves del lenguaje HTML.
Incorporación de imágenes Cuando ya elegiste la imagen , se deberá incluir una posición para ella. Es ahí donde se coloca la etiqueta <IMG>. La etiqueta <IMG> necesita al menos un atributo para trabajar: SRC, cuyo valor es la localización y el nombre del archivo que contiene la imagen que se debe visualizar.Dos otros atributos: WIDTH y HEIGHT son opcionales, pero se recomienda utilizarlos y son muy útiles. Los valores que toman definen la anchura y la altura de una imagen, y permiten al navegador conocer por adelantado el tamaño de la imagen de manera que éste pueda organizar el texto de manera consecuente. Estos valores también permiten aumentar o reducir el tamaño de una imagen para obtener croquis.Otro atributo, ALT, permite añadir una descripción que aparece en la pantalla cuando no se puede encontrar el recurso de imagen en el lugar esperado.Este es un ejemplo de inserción de una imagen con todos los atributos que hemos visto en:<IMG SRC="images/my_image.gif" WIDTH="250" HEIGHT="100" alt="Holiday photo">En este ejemplo, la imagen my_image.gif debe estar en el directorio images.En el ejemplo siguiente, se ve la misma imagen con diferentes atributos de HEIGHT, WIDTH y ALT:
Disposición de un texto alrededor de imágenes A veces, la disposición del texto alrededor de las imágenes puede ser un verdadero dolor de cabeza. Afortunadamente, algunos de los atributos de la etiqueta <IMG> lo facilitan.Se pueden utilizar dos atributos para definir los márgenes alrededor de las imágenes: HSPACE y VSPACE. Éstos definen el número de píxeles que separan las imágenes de los elementos circundantes, independientemente de si estos elementos son textos u otras imágenes.El atributo ALIGN especifica la alineación vertical de la imagen con respecto al texto circundante:ALIGN="bottom" indica que se alineará la parte inferior de la imagen con respecto a la línea de base del texto. ALIGN="middle" indica que se alineará el centro de la imagen con respecto a la línea de base del texto. ALIGN="top" indica que se alineará la parte superior de la imagen con respecto a la línea de base del texto. Ejemplos:
Imagen de fondo No sólo se colocan imágenes en un texto. Gracias a la etiqueta <BODY> y a su atributo BACKGROUND, también pueden aparecer como fondo de una página.Ejemplo: <BODY BGCOLOR="#000000" TEXT="#FFFFFF" LINF="#0000FF" VLINK="#000080" BACKGROUND="background.gif">Se utiliza la imagen background.gif como un diagrama, visualizada de manera repetida en el fondo (como mosaico). Si no se puede encontrar, se visualizará como fondo el color especificado o predeterminado. Elección de la imagen. La elección de la imagen o del color de fondo es una decisión importante; el texto visualizado sobre el fondo debe ser todavía legible.
Atributos del elemento IMG  La siguiente tabla resume los diferentes atributos que se pueden utilizar con la etiqueta <IMG>:
Trabajo practico informáticaPERÍODO DE INTEGRACIÒN Realizado por Néstor David Medina Ballón 6to 2da IEM 2009

Más contenido relacionado

La actualidad más candente (19)

13imagenes
13imagenes13imagenes
13imagenes
 
Colegionacionalnicolsesguerra 15091711-app6892-150924155136-lva1-app6891
Colegionacionalnicolsesguerra 15091711-app6892-150924155136-lva1-app6891Colegionacionalnicolsesguerra 15091711-app6892-150924155136-lva1-app6891
Colegionacionalnicolsesguerra 15091711-app6892-150924155136-lva1-app6891
 
pagina web IV
pagina web IV pagina web IV
pagina web IV
 
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
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
 
Web IV
Web IVWeb IV
Web IV
 
Guia 4 de html imagenes
Guia 4 de html   imagenesGuia 4 de html   imagenes
Guia 4 de html imagenes
 
Pagina web 4
Pagina web 4Pagina web 4
Pagina web 4
 
Pagina web 4.
Pagina web 4.Pagina web 4.
Pagina web 4.
 
Imágenes en HTML
Imágenes en HTMLImágenes en HTML
Imágenes en HTML
 
Pagina web 4
Pagina web 4Pagina web 4
Pagina web 4
 
Colegio nacional nicolás es guerra
Colegio nacional nicolás es guerraColegio nacional nicolás es guerra
Colegio nacional nicolás es guerra
 
Byb3
Byb3Byb3
Byb3
 
Martin lopoez 905 30
Martin lopoez 905 30Martin lopoez 905 30
Martin lopoez 905 30
 
Martin lopoez 905
Martin lopoez 905Martin lopoez 905
Martin lopoez 905
 
Niolas percho
Niolas perchoNiolas percho
Niolas percho
 
Pagina web 5
Pagina web 5Pagina web 5
Pagina web 5
 
Exc2 inf a-alonsodueñas
Exc2 inf a-alonsodueñasExc2 inf a-alonsodueñas
Exc2 inf a-alonsodueñas
 
Pagina web 4
Pagina web 4Pagina web 4
Pagina web 4
 

Destacado

Marco teorico[1]
Marco teorico[1]Marco teorico[1]
Marco teorico[1]
nezaro666
 

Destacado (8)

Tics1
Tics1Tics1
Tics1
 
Qué Critero 6 9 9 To Xxiii
Qué Critero 6 9 9 To XxiiiQué Critero 6 9 9 To Xxiii
Qué Critero 6 9 9 To Xxiii
 
Oracion de san Franciscode Asis
Oracion de san Franciscode AsisOracion de san Franciscode Asis
Oracion de san Franciscode Asis
 
15 11 09 To Xxxiiib 2012
15 11 09 To Xxxiiib  201215 11 09 To Xxxiiib  2012
15 11 09 To Xxxiiib 2012
 
Tendencias, Innovación y Creación de Valor - Club de Innovación
Tendencias, Innovación y Creación de Valor  - Club de InnovaciónTendencias, Innovación y Creación de Valor  - Club de Innovación
Tendencias, Innovación y Creación de Valor - Club de Innovación
 
Marco teorico[1]
Marco teorico[1]Marco teorico[1]
Marco teorico[1]
 
Libro febrero
Libro febreroLibro febrero
Libro febrero
 
Dean project
Dean projectDean project
Dean project
 

Similar a Imágenes En Paginas Web (20)

Html4 imagnes
Html4 imagnesHtml4 imagnes
Html4 imagnes
 
Insertar imagen en html
Insertar imagen en htmlInsertar imagen en html
Insertar imagen en html
 
O 150928120321-lva1-app6892
O 150928120321-lva1-app6892O 150928120321-lva1-app6892
O 150928120321-lva1-app6892
 
Etiquetas basicas producto 10
Etiquetas basicas producto 10Etiquetas basicas producto 10
Etiquetas basicas producto 10
 
3
33
3
 
Dvbgsdbf
DvbgsdbfDvbgsdbf
Dvbgsdbf
 
Etiquetas básicas de HTML
Etiquetas básicas de HTMLEtiquetas básicas de HTML
Etiquetas básicas de HTML
 
Html
HtmlHtml
Html
 
Html
HtmlHtml
Html
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
 
Peres el dios
Peres el diosPeres el dios
Peres el dios
 
Curso HTML 5 & jQuery - Leccion 3
Curso HTML 5 & jQuery - Leccion 3Curso HTML 5 & jQuery - Leccion 3
Curso HTML 5 & jQuery - Leccion 3
 
Imagenes
ImagenesImagenes
Imagenes
 
Imagenes
ImagenesImagenes
Imagenes
 
Colegio nicolás esguerra
Colegio nicolás esguerraColegio nicolás esguerra
Colegio nicolás esguerra
 
Decimo 2
Decimo 2Decimo 2
Decimo 2
 
Byb3
Byb3Byb3
Byb3
 
Codigo de i
Codigo de iCodigo de i
Codigo de i
 
Producto 4 etiquetas basicas joon lee
Producto 4 etiquetas basicas joon leeProducto 4 etiquetas basicas joon lee
Producto 4 etiquetas basicas joon lee
 
Capas en html
Capas en htmlCapas en html
Capas en html
 

Último

Último (20)

Orientación Académica y Profesional 4º de ESO- OrientArte
Orientación Académica y Profesional 4º de ESO- OrientArteOrientación Académica y Profesional 4º de ESO- OrientArte
Orientación Académica y Profesional 4º de ESO- OrientArte
 
LA ILIADA Y LA ODISEA.LITERATURA UNIVERSAL
LA ILIADA Y LA ODISEA.LITERATURA UNIVERSALLA ILIADA Y LA ODISEA.LITERATURA UNIVERSAL
LA ILIADA Y LA ODISEA.LITERATURA UNIVERSAL
 
PLAN DE TRABAJO CONCURSO NACIONAL CREA Y EMPRENDE.docx
PLAN DE TRABAJO CONCURSO NACIONAL CREA Y EMPRENDE.docxPLAN DE TRABAJO CONCURSO NACIONAL CREA Y EMPRENDE.docx
PLAN DE TRABAJO CONCURSO NACIONAL CREA Y EMPRENDE.docx
 
ACERTIJO DE CARRERA OLÍMPICA DE SUMA DE LABERINTOS. Por JAVIER SOLIS NOYOLA
ACERTIJO DE CARRERA OLÍMPICA DE SUMA DE LABERINTOS. Por JAVIER SOLIS NOYOLAACERTIJO DE CARRERA OLÍMPICA DE SUMA DE LABERINTOS. Por JAVIER SOLIS NOYOLA
ACERTIJO DE CARRERA OLÍMPICA DE SUMA DE LABERINTOS. Por JAVIER SOLIS NOYOLA
 
Fase 3; Estudio de la Geometría Analítica
Fase 3; Estudio de la Geometría AnalíticaFase 3; Estudio de la Geometría Analítica
Fase 3; Estudio de la Geometría Analítica
 
Lección 1: Los complementos del Verbo ...
Lección 1: Los complementos del Verbo ...Lección 1: Los complementos del Verbo ...
Lección 1: Los complementos del Verbo ...
 
Cerebelo Anatomía y fisiología Clase presencial
Cerebelo Anatomía y fisiología Clase presencialCerebelo Anatomía y fisiología Clase presencial
Cerebelo Anatomía y fisiología Clase presencial
 
3.Conectores uno_Enfermería_EspAcademico
3.Conectores uno_Enfermería_EspAcademico3.Conectores uno_Enfermería_EspAcademico
3.Conectores uno_Enfermería_EspAcademico
 
5.Deicticos Uno_Enfermería_EspanolAcademico
5.Deicticos Uno_Enfermería_EspanolAcademico5.Deicticos Uno_Enfermería_EspanolAcademico
5.Deicticos Uno_Enfermería_EspanolAcademico
 
Fase 2, Pensamiento variacional y trigonometrico
Fase 2, Pensamiento variacional y trigonometricoFase 2, Pensamiento variacional y trigonometrico
Fase 2, Pensamiento variacional y trigonometrico
 
PRESENTACION DE LA SEMANA NUMERO 8 EN APLICACIONES DE INTERNET
PRESENTACION DE LA SEMANA NUMERO 8 EN APLICACIONES DE INTERNETPRESENTACION DE LA SEMANA NUMERO 8 EN APLICACIONES DE INTERNET
PRESENTACION DE LA SEMANA NUMERO 8 EN APLICACIONES DE INTERNET
 
TRABAJO CON TRES O MAS FRACCIONES PARA NIÑOS
TRABAJO CON TRES O MAS FRACCIONES PARA NIÑOSTRABAJO CON TRES O MAS FRACCIONES PARA NIÑOS
TRABAJO CON TRES O MAS FRACCIONES PARA NIÑOS
 
Lec. 08 Esc. Sab. Luz desde el santuario
Lec. 08 Esc. Sab. Luz desde el santuarioLec. 08 Esc. Sab. Luz desde el santuario
Lec. 08 Esc. Sab. Luz desde el santuario
 
Sesión de clase: Luz desde el santuario.pdf
Sesión de clase: Luz desde el santuario.pdfSesión de clase: Luz desde el santuario.pdf
Sesión de clase: Luz desde el santuario.pdf
 
Portafolio de servicios Centro de Educación Continua EPN
Portafolio de servicios Centro de Educación Continua EPNPortafolio de servicios Centro de Educación Continua EPN
Portafolio de servicios Centro de Educación Continua EPN
 
PROYECTO INTEGRADOR ARCHIDUQUE. presentacion
PROYECTO INTEGRADOR ARCHIDUQUE. presentacionPROYECTO INTEGRADOR ARCHIDUQUE. presentacion
PROYECTO INTEGRADOR ARCHIDUQUE. presentacion
 
ENUNCIADOS CUESTIONARIO S9 GEOLOGIA Y MINERALOGIA - GENERAL.docx
ENUNCIADOS CUESTIONARIO S9 GEOLOGIA Y MINERALOGIA - GENERAL.docxENUNCIADOS CUESTIONARIO S9 GEOLOGIA Y MINERALOGIA - GENERAL.docx
ENUNCIADOS CUESTIONARIO S9 GEOLOGIA Y MINERALOGIA - GENERAL.docx
 
4.Conectores Dos_Enfermería_Espanolacademico
4.Conectores Dos_Enfermería_Espanolacademico4.Conectores Dos_Enfermería_Espanolacademico
4.Conectores Dos_Enfermería_Espanolacademico
 
Evaluación de los Factores Internos de la Organización
Evaluación de los Factores Internos de la OrganizaciónEvaluación de los Factores Internos de la Organización
Evaluación de los Factores Internos de la Organización
 
Diagnostico del corregimiento de Junin del municipio de Barbacoas
Diagnostico del corregimiento de Junin del municipio de BarbacoasDiagnostico del corregimiento de Junin del municipio de Barbacoas
Diagnostico del corregimiento de Junin del municipio de Barbacoas
 

Imágenes En Paginas Web

  • 1. Imágenes en paginas web iem 2009 Tener una página Web está muy bien, pero es mucho mejor si ésta tiene ilustraciones. Además, todo lo que se necesita es una etiqueta para integrar todo tipo de imágenes en su sitio.
  • 2. IMAGENES Esta presentación muestra como colocar imágenes en las paginas web atraves del lenguaje HTML.
  • 3. Incorporación de imágenes Cuando ya elegiste la imagen , se deberá incluir una posición para ella. Es ahí donde se coloca la etiqueta <IMG>. La etiqueta <IMG> necesita al menos un atributo para trabajar: SRC, cuyo valor es la localización y el nombre del archivo que contiene la imagen que se debe visualizar.Dos otros atributos: WIDTH y HEIGHT son opcionales, pero se recomienda utilizarlos y son muy útiles. Los valores que toman definen la anchura y la altura de una imagen, y permiten al navegador conocer por adelantado el tamaño de la imagen de manera que éste pueda organizar el texto de manera consecuente. Estos valores también permiten aumentar o reducir el tamaño de una imagen para obtener croquis.Otro atributo, ALT, permite añadir una descripción que aparece en la pantalla cuando no se puede encontrar el recurso de imagen en el lugar esperado.Este es un ejemplo de inserción de una imagen con todos los atributos que hemos visto en:<IMG SRC="images/my_image.gif" WIDTH="250" HEIGHT="100" alt="Holiday photo">En este ejemplo, la imagen my_image.gif debe estar en el directorio images.En el ejemplo siguiente, se ve la misma imagen con diferentes atributos de HEIGHT, WIDTH y ALT:
  • 4. Disposición de un texto alrededor de imágenes A veces, la disposición del texto alrededor de las imágenes puede ser un verdadero dolor de cabeza. Afortunadamente, algunos de los atributos de la etiqueta <IMG> lo facilitan.Se pueden utilizar dos atributos para definir los márgenes alrededor de las imágenes: HSPACE y VSPACE. Éstos definen el número de píxeles que separan las imágenes de los elementos circundantes, independientemente de si estos elementos son textos u otras imágenes.El atributo ALIGN especifica la alineación vertical de la imagen con respecto al texto circundante:ALIGN="bottom" indica que se alineará la parte inferior de la imagen con respecto a la línea de base del texto. ALIGN="middle" indica que se alineará el centro de la imagen con respecto a la línea de base del texto. ALIGN="top" indica que se alineará la parte superior de la imagen con respecto a la línea de base del texto. Ejemplos:
  • 5. Imagen de fondo No sólo se colocan imágenes en un texto. Gracias a la etiqueta <BODY> y a su atributo BACKGROUND, también pueden aparecer como fondo de una página.Ejemplo: <BODY BGCOLOR="#000000" TEXT="#FFFFFF" LINF="#0000FF" VLINK="#000080" BACKGROUND="background.gif">Se utiliza la imagen background.gif como un diagrama, visualizada de manera repetida en el fondo (como mosaico). Si no se puede encontrar, se visualizará como fondo el color especificado o predeterminado. Elección de la imagen. La elección de la imagen o del color de fondo es una decisión importante; el texto visualizado sobre el fondo debe ser todavía legible.
  • 6. Atributos del elemento IMG La siguiente tabla resume los diferentes atributos que se pueden utilizar con la etiqueta <IMG>:
  • 7. Trabajo practico informáticaPERÍODO DE INTEGRACIÒN Realizado por Néstor David Medina Ballón 6to 2da IEM 2009