SlideShare una empresa de Scribd logo
1 de 3
COLEGIO NACIONAL NICOLAS ESGUERRA
EDIFICAMOS FUTURO
Carlos Andrés Cuadros Bautista 904
PAGINA WEB IV
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 necesitaetiqueta de cierre.
Por ejemplo,para insertar la siguiente imagen:
Habría que escribir:
<img src="imagenes/logo_LUMIA.PNG ">
Texto alternativo:
Cuando una imagen no puede ser visualizada en el navegador, cosa
que puede ocurrir al especificarmal el valor del atributo src, aparece
un recuadro blanco con una X roja en su lugar, junto con el nombre de
la imagen.
Por ejemplo,imagina que deseamosmostrar una imagen llamada
gatito.gif, con el texto alternativo Imagen gato, para ello insertamos el
siguiente código:
<img src="LUMIA.PNG" alt="IMAGENCELULAR" >
Borde de una imagen:
En general, al visualizar una página en un navegador las imágenes
aparecen sin ningún borde alrededor, pero es posible estableceruno a
través del atributo border.
El atributo borderpuede tomar valores numéricos,que indican el
grosoren píxeles del borde.
Por ejemplo,para insertar la siguiente imagen con borde:
<img src="imagenes/logo_LUMIA.PNG" border="4" >
Hay que tener en cuenta que el borde de la imagen siempre será de
color negro, a no ser que la imagen contenga un enlace, en cuyo caso
el colordel borde será el colorestablecido para los vínculos.
Por ejemplo,para insertar la siguiente imagen con borde y con un
enlace:
Habría que escribir:
<a href="http://www.aulaclic.com" target ="_blank" ><img
src="imagenes/logo_lumia.png" border="4" ></a>
Tamaño de una imagen:
Cuando insertamos una imagen, esta se muestra en los navegadores
con su tamaño original, pero por diversos motivos puede interesarnos
modificardicho tamaño.
A través de los atributos width (anchura) y height (altura) puede
modificarse eltamaño de la imagen. Dicho cambio de tamaño no se
aplica directamente sobre el archivo de imagen, sino que lo que varía
es la visualización de la imagen en el navegador.
El valor que puedentomar los atributos width y height ha de ser un
número, acompañado de % cuando se desee que sea en porcentaje
con respecto a la página.
Por ejemplo,para insertar la siguiente imagen (cuyo tamaño original
era de 122 píxeles de anchura y 71 píxeles de altura) con 200 píxeles
de anchura y 80 píxeles de altura:
Habría que escribir:
<img src="imagenes/logo_animales.gif" width="200" height="80">
Al modificarel tamaño de la imagen a través de estos atributos es muy
probable que la imagen resultante no sea de buena calidad, en
comparaciónde cómo podría quedar modificándoladesde un editor
externo, como Fireworks.

Más contenido relacionado

La actualidad más candente (19)

Taller4
Taller4Taller4
Taller4
 
Pagina Web 4
Pagina Web 4 Pagina Web 4
Pagina Web 4
 
Web 4
Web 4Web 4
Web 4
 
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
 
Hhh .l.
Hhh .l.Hhh .l.
Hhh .l.
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
 
242310
242310242310
242310
 
Pagina web
Pagina webPagina web
Pagina web
 
ñ{ññññ
ñ{ñññññ{ññññ
ñ{ññññ
 
Colegio nacional nicolás es guerra
Colegio nacional nicolás es guerraColegio nacional nicolás es guerra
Colegio nacional nicolás es guerra
 
Colegionacionalnicolsesguerra 15091711-app6892-150924155136-lva1-app6891
Colegionacionalnicolsesguerra 15091711-app6892-150924155136-lva1-app6891Colegionacionalnicolsesguerra 15091711-app6892-150924155136-lva1-app6891
Colegionacionalnicolsesguerra 15091711-app6892-150924155136-lva1-app6891
 
Rtgfvgbvyh (1)
Rtgfvgbvyh (1)Rtgfvgbvyh (1)
Rtgfvgbvyh (1)
 
Colegio nacional nicolas4
Colegio nacional nicolas4Colegio nacional nicolas4
Colegio nacional nicolas4
 
Pagina web 4
Pagina web 4Pagina web 4
Pagina web 4
 
pagina web IV
pagina web IV pagina web IV
pagina web IV
 
Pagina web 5
Pagina web 5Pagina web 5
Pagina web 5
 
Pagina web 4
Pagina web 4Pagina web 4
Pagina web 4
 
pagina web IV
pagina web IVpagina web IV
pagina web IV
 

Destacado

Business coverage
Business coverageBusiness coverage
Business coverage
Arzoo Sahni
 
Algunas aplicaciones web
Algunas aplicaciones webAlgunas aplicaciones web
Algunas aplicaciones web
MattGaitan22
 
Vestido4
Vestido4Vestido4
Vestido4
ITZEL95
 
Copie De 07 Un Peu D\ Humour Alain
Copie De 07 Un Peu D\ Humour AlainCopie De 07 Un Peu D\ Humour Alain
Copie De 07 Un Peu D\ Humour Alain
valentino20
 
Welcome to LearnBoost for teachers!
Welcome to LearnBoost for teachers!Welcome to LearnBoost for teachers!
Welcome to LearnBoost for teachers!
Sergd
 
Extension de plazos de saldos
Extension de plazos de saldosExtension de plazos de saldos
Extension de plazos de saldos
Atelmo
 
EC - Radio - Mono stereo-poly
EC - Radio - Mono stereo-polyEC - Radio - Mono stereo-poly
EC - Radio - Mono stereo-poly
Arzoo Sahni
 
Science 2007-baker-215
Science 2007-baker-215Science 2007-baker-215
Science 2007-baker-215
Sérgio Sacani
 
pontos
pontospontos
pontos
oxande
 
Ofimatica web (skydrive)-trabajo final-UTM
Ofimatica web (skydrive)-trabajo final-UTMOfimatica web (skydrive)-trabajo final-UTM
Ofimatica web (skydrive)-trabajo final-UTM
byronesta
 
Algunas aplicaciones web
Algunas aplicaciones webAlgunas aplicaciones web
Algunas aplicaciones web
rataratita
 

Destacado (20)

LUMINESCE™ CELLULAR REJUVENATION SERUM
 LUMINESCE™ CELLULAR REJUVENATION SERUM LUMINESCE™ CELLULAR REJUVENATION SERUM
LUMINESCE™ CELLULAR REJUVENATION SERUM
 
Business coverage
Business coverageBusiness coverage
Business coverage
 
Algunas aplicaciones web
Algunas aplicaciones webAlgunas aplicaciones web
Algunas aplicaciones web
 
Dibujo pentecostés
Dibujo pentecostésDibujo pentecostés
Dibujo pentecostés
 
Vestido4
Vestido4Vestido4
Vestido4
 
Copie De 07 Un Peu D\ Humour Alain
Copie De 07 Un Peu D\ Humour AlainCopie De 07 Un Peu D\ Humour Alain
Copie De 07 Un Peu D\ Humour Alain
 
Welcome to LearnBoost for teachers!
Welcome to LearnBoost for teachers!Welcome to LearnBoost for teachers!
Welcome to LearnBoost for teachers!
 
Extension de plazos de saldos
Extension de plazos de saldosExtension de plazos de saldos
Extension de plazos de saldos
 
13 (2ª parte) gonzález 4º iag
13 (2ª parte) gonzález 4º iag13 (2ª parte) gonzález 4º iag
13 (2ª parte) gonzález 4º iag
 
Sardina gonzález
Sardina gonzálezSardina gonzález
Sardina gonzález
 
EC - Radio - Mono stereo-poly
EC - Radio - Mono stereo-polyEC - Radio - Mono stereo-poly
EC - Radio - Mono stereo-poly
 
Photo Exhibit By Colorado BioScience Association Keynote Speaker Rick Guidott...
Photo Exhibit By Colorado BioScience Association Keynote Speaker Rick Guidott...Photo Exhibit By Colorado BioScience Association Keynote Speaker Rick Guidott...
Photo Exhibit By Colorado BioScience Association Keynote Speaker Rick Guidott...
 
We protect
We protectWe protect
We protect
 
Science 2007-baker-215
Science 2007-baker-215Science 2007-baker-215
Science 2007-baker-215
 
pontos
pontospontos
pontos
 
Ofimatica web (skydrive)-trabajo final-UTM
Ofimatica web (skydrive)-trabajo final-UTMOfimatica web (skydrive)-trabajo final-UTM
Ofimatica web (skydrive)-trabajo final-UTM
 
LUMINESCE™ DAILY MOISTURIZING COMPLEX
LUMINESCE™ DAILY MOISTURIZING COMPLEXLUMINESCE™ DAILY MOISTURIZING COMPLEX
LUMINESCE™ DAILY MOISTURIZING COMPLEX
 
32 gonzález 4º iag
32 gonzález 4º iag32 gonzález 4º iag
32 gonzález 4º iag
 
Algunas aplicaciones web
Algunas aplicaciones webAlgunas aplicaciones web
Algunas aplicaciones web
 
RESERVE™
RESERVE™RESERVE™
RESERVE™
 

Similar a Pagina web 4 (19)

Byb3
Byb3Byb3
Byb3
 
Imagenes
ImagenesImagenes
Imagenes
 
Imagenes
ImagenesImagenes
Imagenes
 
Peres el dios
Peres el diosPeres el dios
Peres el dios
 
Colegio nicolás esguerra
Colegio nicolás esguerraColegio nicolás esguerra
Colegio nicolás esguerra
 
Creacion Pagina Web Unidad 5
Creacion Pagina Web Unidad 5Creacion Pagina Web Unidad 5
Creacion Pagina Web Unidad 5
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
 
Dvbgsdbf
DvbgsdbfDvbgsdbf
Dvbgsdbf
 
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
 
Imagenes
ImagenesImagenes
Imagenes
 
3
33
3
 
Html4 imagnes
Html4 imagnesHtml4 imagnes
Html4 imagnes
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
 
Pagina web iv
Pagina web ivPagina web iv
Pagina web iv
 
Tatoo
TatooTatoo
Tatoo
 
Web IV
Web IVWeb IV
Web IV
 
Niolas percho
Niolas perchoNiolas percho
Niolas percho
 
Documento juan
Documento juanDocumento juan
Documento juan
 
Pagina web lV
Pagina web lVPagina web lV
Pagina web lV
 

Más de thefaut (20)

Pagina web 3
Pagina web 3Pagina web 3
Pagina web 3
 
Primer trabajo 4to periodod 904
Primer trabajo 4to periodod 904Primer trabajo 4to periodod 904
Primer trabajo 4to periodod 904
 
Drive
Drive Drive
Drive
 
Drive
Drive Drive
Drive
 
Drive
Drive Drive
Drive
 
Drive jajajaxc
Drive jajajaxcDrive jajajaxc
Drive jajajaxc
 
1145876
11458761145876
1145876
 
5443
54435443
5443
 
Guia de infor 4dhfg
Guia de infor 4dhfgGuia de infor 4dhfg
Guia de infor 4dhfg
 
twyery
twyerytwyery
twyery
 
njybh
njybhnjybh
njybh
 
Guia de infor 4
Guia de infor 4 Guia de infor 4
Guia de infor 4
 
Guia de informatica
Guia de informaticaGuia de informatica
Guia de informatica
 
Guia de infor 4.pptx
 Guia de infor 4.pptx Guia de infor 4.pptx
Guia de infor 4.pptx
 
Tarjeta
Tarjeta  Tarjeta
Tarjeta
 
Tarjeta
TarjetaTarjeta
Tarjeta
 
Santiago
SantiagoSantiago
Santiago
 
Santiago
SantiagoSantiago
Santiago
 
Tarjeta Personal
Tarjeta PersonalTarjeta Personal
Tarjeta Personal
 
Unidad3
Unidad3Unidad3
Unidad3
 

Último (7)

345576088-Mapa-Conceptual-Mantenimiento-mecanica-industrial.pdf
345576088-Mapa-Conceptual-Mantenimiento-mecanica-industrial.pdf345576088-Mapa-Conceptual-Mantenimiento-mecanica-industrial.pdf
345576088-Mapa-Conceptual-Mantenimiento-mecanica-industrial.pdf
 
tipos de suspension automotriz -rea marlon.pdf
tipos de suspension automotriz -rea marlon.pdftipos de suspension automotriz -rea marlon.pdf
tipos de suspension automotriz -rea marlon.pdf
 
Esquema audio Nissan Almera N16, parte electrica y codigos electricos
Esquema audio Nissan Almera N16, parte electrica y codigos electricosEsquema audio Nissan Almera N16, parte electrica y codigos electricos
Esquema audio Nissan Almera N16, parte electrica y codigos electricos
 
unidades de medida aplicadas en gastronomia.pdf
unidades de medida aplicadas en gastronomia.pdfunidades de medida aplicadas en gastronomia.pdf
unidades de medida aplicadas en gastronomia.pdf
 
propoketapropoketapropoketapropoketa.pptx
propoketapropoketapropoketapropoketa.pptxpropoketapropoketapropoketapropoketa.pptx
propoketapropoketapropoketapropoketa.pptx
 
3 Curso_Introduccion_a_la_Electroneumatica Movimientos y estados de conmutaci...
3 Curso_Introduccion_a_la_Electroneumatica Movimientos y estados de conmutaci...3 Curso_Introduccion_a_la_Electroneumatica Movimientos y estados de conmutaci...
3 Curso_Introduccion_a_la_Electroneumatica Movimientos y estados de conmutaci...
 
Montero Sport Manual de Propietario.pdf.
Montero Sport Manual de Propietario.pdf.Montero Sport Manual de Propietario.pdf.
Montero Sport Manual de Propietario.pdf.
 

Pagina web 4

  • 1. COLEGIO NACIONAL NICOLAS ESGUERRA EDIFICAMOS FUTURO Carlos Andrés Cuadros Bautista 904 PAGINA WEB IV 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 necesitaetiqueta de cierre. Por ejemplo,para insertar la siguiente imagen: Habría que escribir: <img src="imagenes/logo_LUMIA.PNG "> Texto alternativo: Cuando una imagen no puede ser visualizada en el navegador, cosa que puede ocurrir al especificarmal el valor del atributo src, aparece un recuadro blanco con una X roja en su lugar, junto con el nombre de la imagen.
  • 2. Por ejemplo,imagina que deseamosmostrar una imagen llamada gatito.gif, con el texto alternativo Imagen gato, para ello insertamos el siguiente código: <img src="LUMIA.PNG" alt="IMAGENCELULAR" > Borde de una imagen: En general, al visualizar una página en un navegador las imágenes aparecen sin ningún borde alrededor, pero es posible estableceruno a través del atributo border. El atributo borderpuede tomar valores numéricos,que indican el grosoren píxeles del borde. Por ejemplo,para insertar la siguiente imagen con borde: <img src="imagenes/logo_LUMIA.PNG" border="4" > Hay que tener en cuenta que el borde de la imagen siempre será de color negro, a no ser que la imagen contenga un enlace, en cuyo caso el colordel borde será el colorestablecido para los vínculos. Por ejemplo,para insertar la siguiente imagen con borde y con un enlace: Habría que escribir: <a href="http://www.aulaclic.com" target ="_blank" ><img src="imagenes/logo_lumia.png" border="4" ></a> Tamaño de una imagen: Cuando insertamos una imagen, esta se muestra en los navegadores con su tamaño original, pero por diversos motivos puede interesarnos modificardicho tamaño. A través de los atributos width (anchura) y height (altura) puede modificarse eltamaño de la imagen. Dicho cambio de tamaño no se aplica directamente sobre el archivo de imagen, sino que lo que varía es la visualización de la imagen en el navegador.
  • 3. El valor que puedentomar los atributos width y height ha de ser un número, acompañado de % cuando se desee que sea en porcentaje con respecto a la página. Por ejemplo,para insertar la siguiente imagen (cuyo tamaño original era de 122 píxeles de anchura y 71 píxeles de altura) con 200 píxeles de anchura y 80 píxeles de altura: Habría que escribir: <img src="imagenes/logo_animales.gif" width="200" height="80"> Al modificarel tamaño de la imagen a través de estos atributos es muy probable que la imagen resultante no sea de buena calidad, en comparaciónde cómo podría quedar modificándoladesde un editor externo, como Fireworks.