SlideShare una empresa de Scribd logo
Colegio nacional nicolas esguerra
Edificamos futuro
Pagina web 4 German David Ospina valencia
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 en mi blog inserte estas imágenes pj
Con este código
<img src="imagenes/logo_animales.gif">
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.
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" >
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 establecer uno a través del atributo border.
El atributo border puede tomar valores numéricos, que indican el grosor en píxeles del
borde.
Por ejemplo, para insertar la siguiente imagen con borde:
<img src="imagenes/logo_animales.gif" 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 color del borde será el color establecido para
los vínculos.
Por ejemplo, para insertar la siguiente imagen con borde y con un enlace:
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 modificar dicho tamaño.
A través de los atributos width (anchura) y height (altura) puede modificarse el tamañ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 pueden tomar 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:
Los dos puntos anteriores el código lo he utilizado de la siguiente forma
Como se ve en el recorte lo utilicé de acuerdo a la información de aula click
Alineación de una imagen
En el cuadro de abajo esta toda la informacion
Y mi blog hasta el dia de hoy esta de la siguiente forma
El código es este
<html>
<head>
<title>tienda verdolaga 904</title>
</head>
<!--pagina web elaborada por German David Ospina Valencia 904 //-->
<body bgcolor="006600">
<hr>
<MARQUEE><B><I>BIENVENIDOS A MI TIENDA VERDOLAGA
</B></I></MARQUEE><br>
<hr>
<H3> en mi tienda encotraras productos de exelente calida precio de el mejor
equipo de Colombia</H3><br>
<font color="000000" size="5" face="Cooper Black"><b>nuestros productos son
importados y de muy buena calidad</B></font>
<font color="330000" size="4" face="Arial"><b>tenemos la nueva camiseta del verde en
todas las tallas</B></font><br>
<img src="imagenes/Camiseta-nacional-completa-1500-23012014_grande.jpg
"border="9" "width="200" height="180">
<img
src="imagenes/C+Users+Jose+Desktop+Joceline+y+Multimedia+creaciones+Formato+PSD
+Atletico+Nacional.jpg "border="9" "width="200" height="180">
<img src="imagenes/nacional mangas.jpg "border="9" "width="200" height="180">
<P ALIGN="CENTER">Atlético Nacional, es un colombiano profesional de fútbol del equipo
con sede en Medellín donde de alli nos llegan nuestros productos de altisima calidad para
verderlos en las tiendas oficiales de atletico nacional a muy buen precio</p>
<font color="ffffff" size="5" face="Berlin Sans FB Demi"><b>Club Atletico Nacional De
Medellin</B></font>
<font color="000000" size="4" face="Berlin Sans FB Demi"><b>tienda oficial</B></font>
<img src="imagenes/images.jpg "border="9" "width="200" height="180">
<img src="imagenes/índice.jpg "border="9" "width="200" height="180">
<hr align="center" width="100%" size="10"color=000000" noshade>
<pre> copyrigh 2015
colegio nacional nicolas esguerra
CALLE 89 CRA 651 NO 84 MEDELLIN COLOMBIA
tiendaverdolaga@gmail.com</pre>
</body>
</html>
Y en la web estaría asi

Más contenido relacionado

La actualidad más candente

Etiquetas HTML
Etiquetas HTMLEtiquetas HTML
Etiquetas HTML
claupromoxxi
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
SUSANTAMOTHER
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
andresfelipecepedanieto
 
Documento juan
Documento juanDocumento juan
Documento juan
ltonny5
 
Colegio nacional nicoles esguerra
Colegio nacional nicoles esguerraColegio nacional nicoles esguerra
Colegio nacional nicoles esguerra
Monsalve Sergio
 
Imagen &lt;img>
Imagen &lt;img>Imagen &lt;img>
Imagen &lt;img>
Wilson Sanchez
 
Instalar página de bienvenida en facebook
Instalar página de bienvenida en facebookInstalar página de bienvenida en facebook
Instalar página de bienvenida en facebook
Minipunk Arias
 
Pagina web iv
Pagina web ivPagina web iv
Clase 02 10 15
Clase 02 10 15Clase 02 10 15
Clase 02 10 15
Sebastian Leon
 
HTML
HTML HTML
HTML
BDBT
 
Pagina web gratis
Pagina web gratisPagina web gratis
Pagina web gratis
Curso de Aleyda Leyva
 
Pagina web
Pagina webPagina web
Pagina web 4
Pagina web 4Pagina web 4
Pagina web 4
mf_0529
 
Edificamosfuturo
Edificamosfuturo Edificamosfuturo
Edificamosfuturo
BDBT
 
Html archivo ((completo))
Html archivo ((completo))Html archivo ((completo))
Html archivo ((completo))
BDBT
 
Html00000
Html00000Html00000
Html00000
pxndxpoveda
 

La actualidad más candente (19)

Etiquetas HTML
Etiquetas HTMLEtiquetas HTML
Etiquetas HTML
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
 
Imagenes
ImagenesImagenes
Imagenes
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
 
Documento juan
Documento juanDocumento juan
Documento juan
 
Colegio nacional nicoles esguerra
Colegio nacional nicoles esguerraColegio nacional nicoles esguerra
Colegio nacional nicoles esguerra
 
Imagen &lt;img>
Imagen &lt;img>Imagen &lt;img>
Imagen &lt;img>
 
Instalar página de bienvenida en facebook
Instalar página de bienvenida en facebookInstalar página de bienvenida en facebook
Instalar página de bienvenida en facebook
 
Dvbgsdbf
DvbgsdbfDvbgsdbf
Dvbgsdbf
 
Pagina web iv
Pagina web ivPagina web iv
Pagina web iv
 
Clase 02 10 15
Clase 02 10 15Clase 02 10 15
Clase 02 10 15
 
HTML
HTML HTML
HTML
 
Pagina web gratis
Pagina web gratisPagina web gratis
Pagina web gratis
 
Pagina web
Pagina webPagina web
Pagina web
 
Pagina web 4
Pagina web 4Pagina web 4
Pagina web 4
 
Edificamosfuturo
Edificamosfuturo Edificamosfuturo
Edificamosfuturo
 
Html archivo ((completo))
Html archivo ((completo))Html archivo ((completo))
Html archivo ((completo))
 
Html00000
Html00000Html00000
Html00000
 
Hhh .l.
Hhh .l.Hhh .l.
Hhh .l.
 

Similar a Pagina web 4

Byb3
Byb3Byb3
Creacion Pagina Web Unidad 5
Creacion Pagina Web Unidad 5Creacion Pagina Web Unidad 5
Creacion Pagina Web Unidad 5morchito03
 
Html trabajo 4 904 informatica JR JM
Html trabajo 4 904 informatica  JR JMHtml trabajo 4 904 informatica  JR JM
Html trabajo 4 904 informatica JR JM
jayerxD
 
Web 4
Web 4Web 4
Web 4
darwlu
 
242310
242310242310
Colegionacionalnicolsesguerra 15091711-app6892-150924155136-lva1-app6891
Colegionacionalnicolsesguerra 15091711-app6892-150924155136-lva1-app6891Colegionacionalnicolsesguerra 15091711-app6892-150924155136-lva1-app6891
Colegionacionalnicolsesguerra 15091711-app6892-150924155136-lva1-app6891
santi302930
 
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
 
Colegio nicolás esguerra
Colegio nicolás esguerraColegio nicolás esguerra
Colegio nicolás esguerra
locoronald2
 
Pagina web 4
Pagina web 4Pagina web 4
Pagina web 4
Felipe Pesca
 
pagina web IV
pagina web IVpagina web IV
pagina web IV
dilaneduardo4587
 
Peres el dios
Peres el diosPeres el dios
Peres el dios
ratasaurio1
 
Html4 imagnes
Html4 imagnesHtml4 imagnes
Html4 imagnescinco81
 
Optimizar imágenes para web con Fireworks
Optimizar imágenes para web con FireworksOptimizar imágenes para web con Fireworks
Optimizar imágenes para web con Fireworks
Colectivo Arista
 
Curso HTML 5 & jQuery - Leccion 3
Curso HTML 5 & jQuery - Leccion 3Curso HTML 5 & jQuery - Leccion 3
Curso HTML 5 & jQuery - Leccion 3
Emmanuel Ortiz Gutierrez
 
Imagenes
ImagenesImagenes
Html creacion de una pagina. Adriano Mazziotti
Html  creacion de una pagina. Adriano MazziottiHtml  creacion de una pagina. Adriano Mazziotti
Html creacion de una pagina. Adriano Mazziotti
Adriano Mazziotti
 
3
33
Fdfdv dsvds
Fdfdv dsvdsFdfdv dsvds
Fdfdv dsvds
america_999_america
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
Cristian Valentin
 

Similar a Pagina web 4 (20)

Byb3
Byb3Byb3
Byb3
 
Imagenes
ImagenesImagenes
Imagenes
 
Creacion Pagina Web Unidad 5
Creacion Pagina Web Unidad 5Creacion Pagina Web Unidad 5
Creacion Pagina Web Unidad 5
 
Html trabajo 4 904 informatica JR JM
Html trabajo 4 904 informatica  JR JMHtml trabajo 4 904 informatica  JR JM
Html trabajo 4 904 informatica JR JM
 
Web 4
Web 4Web 4
Web 4
 
242310
242310242310
242310
 
Colegionacionalnicolsesguerra 15091711-app6892-150924155136-lva1-app6891
Colegionacionalnicolsesguerra 15091711-app6892-150924155136-lva1-app6891Colegionacionalnicolsesguerra 15091711-app6892-150924155136-lva1-app6891
Colegionacionalnicolsesguerra 15091711-app6892-150924155136-lva1-app6891
 
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 nicolás esguerra
Colegio nicolás esguerraColegio nicolás esguerra
Colegio nicolás esguerra
 
Pagina web 4
Pagina web 4Pagina web 4
Pagina web 4
 
pagina web IV
pagina web IVpagina web IV
pagina web IV
 
Peres el dios
Peres el diosPeres el dios
Peres el dios
 
Html4 imagnes
Html4 imagnesHtml4 imagnes
Html4 imagnes
 
Optimizar imágenes para web con Fireworks
Optimizar imágenes para web con FireworksOptimizar imágenes para web con Fireworks
Optimizar imágenes para web con Fireworks
 
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
 
Html creacion de una pagina. Adriano Mazziotti
Html  creacion de una pagina. Adriano MazziottiHtml  creacion de una pagina. Adriano Mazziotti
Html creacion de una pagina. Adriano Mazziotti
 
3
33
3
 
Fdfdv dsvds
Fdfdv dsvdsFdfdv dsvds
Fdfdv dsvds
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
 

Más de davidrg4l

Pagina web 3
Pagina web 3Pagina web 3
Pagina web 3
davidrg4l
 
Pagina web 2
Pagina web 2Pagina web 2
Pagina web 2
davidrg4l
 
Pagina web 1
Pagina web 1Pagina web 1
Pagina web 1
davidrg4l
 
Logo paisa
Logo paisaLogo paisa
Logo paisa
davidrg4l
 
Logo..!!
Logo..!!Logo..!!
Logo..!!
davidrg4l
 
Normas
Normas Normas
Normas
davidrg4l
 
Trabajo en clase de relaciones en access (1)
Trabajo en clase de relaciones en access (1)Trabajo en clase de relaciones en access (1)
Trabajo en clase de relaciones en access (1)
davidrg4l
 
German david ospina valencia – 904 – j
German david ospina valencia – 904 – jGerman david ospina valencia – 904 – j
German david ospina valencia – 904 – j
davidrg4l
 
16 y 17
16 y 1716 y 17
16 y 17
davidrg4l
 
16 y 17
16 y 1716 y 17
16 y 17
davidrg4l
 
16 y 17
16 y 1716 y 17
16 y 17
davidrg4l
 
Presentación1
Presentación1Presentación1
Presentación1
davidrg4l
 
Presentación1
Presentación1Presentación1
Presentación1
davidrg4l
 
Presentación1
Presentación1Presentación1
Presentación1
davidrg4l
 
Facturas5
Facturas5Facturas5
Facturas5
davidrg4l
 
Funciones5
Funciones5Funciones5
Funciones5
davidrg4l
 
Funciones. (1)
Funciones. (1)Funciones. (1)
Funciones. (1)
davidrg4l
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
davidrg4l
 

Más de davidrg4l (18)

Pagina web 3
Pagina web 3Pagina web 3
Pagina web 3
 
Pagina web 2
Pagina web 2Pagina web 2
Pagina web 2
 
Pagina web 1
Pagina web 1Pagina web 1
Pagina web 1
 
Logo paisa
Logo paisaLogo paisa
Logo paisa
 
Logo..!!
Logo..!!Logo..!!
Logo..!!
 
Normas
Normas Normas
Normas
 
Trabajo en clase de relaciones en access (1)
Trabajo en clase de relaciones en access (1)Trabajo en clase de relaciones en access (1)
Trabajo en clase de relaciones en access (1)
 
German david ospina valencia – 904 – j
German david ospina valencia – 904 – jGerman david ospina valencia – 904 – j
German david ospina valencia – 904 – j
 
16 y 17
16 y 1716 y 17
16 y 17
 
16 y 17
16 y 1716 y 17
16 y 17
 
16 y 17
16 y 1716 y 17
16 y 17
 
Presentación1
Presentación1Presentación1
Presentación1
 
Presentación1
Presentación1Presentación1
Presentación1
 
Presentación1
Presentación1Presentación1
Presentación1
 
Facturas5
Facturas5Facturas5
Facturas5
 
Funciones5
Funciones5Funciones5
Funciones5
 
Funciones. (1)
Funciones. (1)Funciones. (1)
Funciones. (1)
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
 

Pagina web 4

  • 1. Colegio nacional nicolas esguerra Edificamos futuro Pagina web 4 German David Ospina valencia 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 en mi blog inserte estas imágenes pj Con este código <img src="imagenes/logo_animales.gif"> Texto alternativo
  • 2. 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. 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" > 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 establecer uno a través del atributo border. El atributo border puede tomar valores numéricos, que indican el grosor en píxeles del borde. Por ejemplo, para insertar la siguiente imagen con borde: <img src="imagenes/logo_animales.gif" 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 color del borde será el color establecido para los vínculos. Por ejemplo, para insertar la siguiente imagen con borde y con un enlace: 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 modificar dicho tamaño.
  • 3. A través de los atributos width (anchura) y height (altura) puede modificarse el tamañ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 pueden tomar 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: Los dos puntos anteriores el código lo he utilizado de la siguiente forma Como se ve en el recorte lo utilicé de acuerdo a la información de aula click Alineación de una imagen En el cuadro de abajo esta toda la informacion
  • 4. Y mi blog hasta el dia de hoy esta de la siguiente forma El código es este <html> <head> <title>tienda verdolaga 904</title> </head> <!--pagina web elaborada por German David Ospina Valencia 904 //-->
  • 5. <body bgcolor="006600"> <hr> <MARQUEE><B><I>BIENVENIDOS A MI TIENDA VERDOLAGA </B></I></MARQUEE><br> <hr> <H3> en mi tienda encotraras productos de exelente calida precio de el mejor equipo de Colombia</H3><br> <font color="000000" size="5" face="Cooper Black"><b>nuestros productos son importados y de muy buena calidad</B></font> <font color="330000" size="4" face="Arial"><b>tenemos la nueva camiseta del verde en todas las tallas</B></font><br> <img src="imagenes/Camiseta-nacional-completa-1500-23012014_grande.jpg "border="9" "width="200" height="180"> <img src="imagenes/C+Users+Jose+Desktop+Joceline+y+Multimedia+creaciones+Formato+PSD +Atletico+Nacional.jpg "border="9" "width="200" height="180"> <img src="imagenes/nacional mangas.jpg "border="9" "width="200" height="180"> <P ALIGN="CENTER">Atlético Nacional, es un colombiano profesional de fútbol del equipo con sede en Medellín donde de alli nos llegan nuestros productos de altisima calidad para verderlos en las tiendas oficiales de atletico nacional a muy buen precio</p> <font color="ffffff" size="5" face="Berlin Sans FB Demi"><b>Club Atletico Nacional De Medellin</B></font> <font color="000000" size="4" face="Berlin Sans FB Demi"><b>tienda oficial</B></font> <img src="imagenes/images.jpg "border="9" "width="200" height="180"> <img src="imagenes/índice.jpg "border="9" "width="200" height="180">
  • 6. <hr align="center" width="100%" size="10"color=000000" noshade> <pre> copyrigh 2015 colegio nacional nicolas esguerra CALLE 89 CRA 651 NO 84 MEDELLIN COLOMBIA tiendaverdolaga@gmail.com</pre> </body> </html> Y en la web estaría asi