SlideShare una empresa de Scribd logo
COLEGIO NACIONAL NICOLÁS ESQUERRA
EDIFICAMOS FUTURO
Juan Esteban Vergara sarmiento
Gabriel Andrés Velásquez gallón 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 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.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.
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" >
Si en lugar del código anterior hubiéramos insertado el siguiente código:
<img src="imagenes/logo.gif" alt="Imagen gato" >
La imagen habría mostrado correctamente
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:
Habría que escribir:
<img src="imagenes/bonbon.gif" border="4" >
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.
Habría que escribir:
<img src="imagenes/jet.gif" width="200" height="80">
Código:
<html>
<head>
<title>CHOCOLATEKING904</title>
</head>
<!-- paginawebelaboradapor juanestebanvergaraygabriel andresvelasquez//-->.
<bodybgcolor="yellow">
<hr>
<MARQUEE><I><b>BIENVENIDO A NUESTRA WEB CORPORATIVA</b><I></MARQUEE><br>
<hr>
<H3>nuestra empresabrindaservisiosde calidadybuengusto</H3><br>
<fontcolor="purple"size="4"face="ComicSansMS">burbuja</font>
<fontcolor="blue"size="4"face="ComicSansMS"> jet</font><br>
<img src="imagenes/logo.jpg"border="4"width="200"height="80">
<img src="imagenes/bombon.jpg"border="4"width="200"height="80">
<p ALIGN="center">El 12 de abril de 1920, enMedellín,ungrupode visionariosantioqueñosfundó
la CompañíaNacional de Chocolates,inicialmente llamadaCompañíade ChocolatesCruzRoja,a
partir de la integraciónde pequeñosproductoreslocales. Durante lossiguientesañoslogramos
consolidarnos,mejorandolosprocesosde producciónyrenovandolasfábricasubicadasenCali,
Bogotá y Medellíne instalandounanuevaenBucaramanga.</p>
<fontcolor="purple"size="4"face="ComicSansMS">barrasde </font>
<fontcolor="blue"size="4"face="ComicSansMS">chocolate </font><br>
<img src="imagenes/jet.jpg"border="4"width="200"height="80">
<img src="imagenes/jet2.jpg"border="4"width="200"height="80">
<hr align="center"width="200%"size="5"color="purple"noshade>
<pre> Copyrigth2015
colegionacional nicolasesguerra
av.cra 68 N 4-40 sur bogota,colombia
juanesvs2302@gmail.com</pre>
</body>
</html>
Pagina web 4.
Pagina web 4.

Más contenido relacionado

DOCX
Html trabajo 4 904 informatica JR JM
DOCX
DOCX
Pagina web 4
DOCX
Colegio nacional nicolas esguerra
DOCX
Pagina web 4
DOCX
Peres el dios
DOCX
Colegio nicolás esguerra
Html trabajo 4 904 informatica JR JM
Pagina web 4
Colegio nacional nicolas esguerra
Pagina web 4
Peres el dios
Colegio nicolás esguerra

La actualidad más candente (18)

DOCX
Martin lopoez 905 30
DOCX
Martin lopoez 905
DOCX
Colegio nacional nicoles esguerra
DOCX
DOCX
DOCX
Colegio nacional nicolas esguerra
DOCX
Web 4
DOCX
Colegio nacional nicolas esguerra
PDF
DOCX
Pagina Web 4
DOCX
ñ{ññññ
DOCX
Colegio nacional nicolás es guerra
DOCX
Colegio nacional nicolas4
DOCX
DOCX
Niolas percho
DOCX
Martin lopoez 905 30
Martin lopoez 905
Colegio nacional nicoles esguerra
Colegio nacional nicolas esguerra
Web 4
Colegio nacional nicolas esguerra
Pagina Web 4
ñ{ññññ
Colegio nacional nicolás es guerra
Colegio nacional nicolas4
Niolas percho
Publicidad

Destacado (12)

DOCX
Platilla con normas jevs
DOCX
Platilla con normas jevs
DOCX
Pagina web 2
DOCX
Evidencias de las paginas
PPTX
Portada chocolate king.
PPTX
Tablas chocolate king.
DOCX
Evidencias chocolate king.
DOCX
Tabajaooojevs
DOCX
Pagina web 5.
DOCX
Platilla con normas jevs.
DOCX
Tabajaooojevs
DOCX
Pagina web 3.
Platilla con normas jevs
Platilla con normas jevs
Pagina web 2
Evidencias de las paginas
Portada chocolate king.
Tablas chocolate king.
Evidencias chocolate king.
Tabajaooojevs
Pagina web 5.
Platilla con normas jevs.
Tabajaooojevs
Pagina web 3.
Publicidad

Similar a Pagina web 4. (20)

DOCX
Colegionacionalnicolsesguerra 15091711-app6892-150924155136-lva1-app6891
DOCX
Pagina web 4
DOCX
DOCX
RTF
Documento juan
DOCX
DOCX
DOCX
IMAGENES HTML
DOCX
DOCX
DOCX
Colegio nacional nicolas esguerra
DOCX
Colegio nacional nicolas esguerra
DOCX
Pagina web lV
PDF
Creacion Pagina Web Unidad 5
DOCX
Mipaginaweb4 151002205637-lva1-app6891
DOCX
Mi pagina web 4
Colegionacionalnicolsesguerra 15091711-app6892-150924155136-lva1-app6891
Pagina web 4
Documento juan
IMAGENES HTML
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
Pagina web lV
Creacion Pagina Web Unidad 5
Mipaginaweb4 151002205637-lva1-app6891
Mi pagina web 4

Más de juanesvs (19)

DOCX
Base de datos access j yg..
DOCX
Base de datos access j yg..
DOCX
B. datos jevs
DOCX
B. datos jevs.
DOCX
Base de datos access jyg.
DOCX
Sopa de letras nxt
DOCX
Sopa de letras
DOCX
Lego nxt crucigrama.
PPTX
Lego mindstom ntx 904 sensores.
PPTX
Lego mindstom NXT historia de la robotica 904
PPTX
Lego mindstom NXT historia de la robotica 904
PPTX
Lego mindstom NXT historia de la robotica 904
PPTX
Lego mindstom NXT historia de la robotica 904
PPTX
Lego mindstom NXT historia de la robotica 904.
PPTX
Lego mindstom ntx 904
DOCX
Correccion de la epu p1.
PPTX
Funciones excel 904
PPTX
Tabla. de multiplicar 904.xlsx
PPTX
Trabajo teckno
Base de datos access j yg..
Base de datos access j yg..
B. datos jevs
B. datos jevs.
Base de datos access jyg.
Sopa de letras nxt
Sopa de letras
Lego nxt crucigrama.
Lego mindstom ntx 904 sensores.
Lego mindstom NXT historia de la robotica 904
Lego mindstom NXT historia de la robotica 904
Lego mindstom NXT historia de la robotica 904
Lego mindstom NXT historia de la robotica 904
Lego mindstom NXT historia de la robotica 904.
Lego mindstom ntx 904
Correccion de la epu p1.
Funciones excel 904
Tabla. de multiplicar 904.xlsx
Trabajo teckno

Último (20)

PDF
Cronograma de clases de Práctica Profesional 2 2025 UDE.pdf
DOCX
UNIDAD DE APRENDIZAJE 5 AGOSTO tradiciones
PDF
IDH_Guatemala_2.pdfnjjjkeioooe ,l dkdldp ekooe
PDF
CONFERENCIA-Deep Research en el aula universitaria-UPeU-EduTech360.pdf
PDF
Mi Primer Millon - Poissant - Godefroy Ccesa007.pdf
PDF
1. Intrdoduccion y criterios de seleccion de Farm 2024.pdf
PDF
ciencias-1.pdf libro cuarto basico niños
PDF
Integrando la Inteligencia Artificial Generativa (IAG) en el Aula
PDF
Escuelas Desarmando una mirada subjetiva a la educación
PPTX
Presentación de la Cetoacidosis diabetica.pptx
PDF
SESION 12 INMUNIZACIONES - CADENA DE FRÍO- SALUD FAMILIAR - PUEBLOS INDIGENAS...
DOCX
V UNIDAD - PRIMER GRADO. del mes de agosto
PDF
DI, TEA, TDAH.pdf guía se secuencias didacticas
PDF
Como Potenciar las Emociones Positivas y Afrontar las Negativas Ccesa007.pdf
PDF
TOMO II - LITERATURA.pd plusenmas ultras
PDF
Atencion prenatal. Ginecologia y obsetricia
PDF
Guia de Tesis y Proyectos de Investigacion FS4 Ccesa007.pdf
PDF
Tomo 1 de biologia gratis ultra plusenmas
DOCX
PLAN DE AREA DE CIENCIAS SOCIALES TODOS LOS GRUPOS
PDF
5°-UNIDAD 5 - 2025.pdf aprendizaje 5tooo
Cronograma de clases de Práctica Profesional 2 2025 UDE.pdf
UNIDAD DE APRENDIZAJE 5 AGOSTO tradiciones
IDH_Guatemala_2.pdfnjjjkeioooe ,l dkdldp ekooe
CONFERENCIA-Deep Research en el aula universitaria-UPeU-EduTech360.pdf
Mi Primer Millon - Poissant - Godefroy Ccesa007.pdf
1. Intrdoduccion y criterios de seleccion de Farm 2024.pdf
ciencias-1.pdf libro cuarto basico niños
Integrando la Inteligencia Artificial Generativa (IAG) en el Aula
Escuelas Desarmando una mirada subjetiva a la educación
Presentación de la Cetoacidosis diabetica.pptx
SESION 12 INMUNIZACIONES - CADENA DE FRÍO- SALUD FAMILIAR - PUEBLOS INDIGENAS...
V UNIDAD - PRIMER GRADO. del mes de agosto
DI, TEA, TDAH.pdf guía se secuencias didacticas
Como Potenciar las Emociones Positivas y Afrontar las Negativas Ccesa007.pdf
TOMO II - LITERATURA.pd plusenmas ultras
Atencion prenatal. Ginecologia y obsetricia
Guia de Tesis y Proyectos de Investigacion FS4 Ccesa007.pdf
Tomo 1 de biologia gratis ultra plusenmas
PLAN DE AREA DE CIENCIAS SOCIALES TODOS LOS GRUPOS
5°-UNIDAD 5 - 2025.pdf aprendizaje 5tooo

Pagina web 4.

  • 1. COLEGIO NACIONAL NICOLÁS ESQUERRA EDIFICAMOS FUTURO Juan Esteban Vergara sarmiento Gabriel Andrés Velásquez gallón 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 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.gif">
  • 2. 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" > Si en lugar del código anterior hubiéramos insertado el siguiente código: <img src="imagenes/logo.gif" alt="Imagen gato" > La imagen habría mostrado correctamente 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: Habría que escribir:
  • 3. <img src="imagenes/bonbon.gif" border="4" > 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. Habría que escribir: <img src="imagenes/jet.gif" width="200" height="80">
  • 4. Código: <html> <head> <title>CHOCOLATEKING904</title> </head> <!-- paginawebelaboradapor juanestebanvergaraygabriel andresvelasquez//-->. <bodybgcolor="yellow"> <hr> <MARQUEE><I><b>BIENVENIDO A NUESTRA WEB CORPORATIVA</b><I></MARQUEE><br> <hr> <H3>nuestra empresabrindaservisiosde calidadybuengusto</H3><br> <fontcolor="purple"size="4"face="ComicSansMS">burbuja</font> <fontcolor="blue"size="4"face="ComicSansMS"> jet</font><br> <img src="imagenes/logo.jpg"border="4"width="200"height="80"> <img src="imagenes/bombon.jpg"border="4"width="200"height="80"> <p ALIGN="center">El 12 de abril de 1920, enMedellín,ungrupode visionariosantioqueñosfundó la CompañíaNacional de Chocolates,inicialmente llamadaCompañíade ChocolatesCruzRoja,a partir de la integraciónde pequeñosproductoreslocales. Durante lossiguientesañoslogramos consolidarnos,mejorandolosprocesosde producciónyrenovandolasfábricasubicadasenCali, Bogotá y Medellíne instalandounanuevaenBucaramanga.</p> <fontcolor="purple"size="4"face="ComicSansMS">barrasde </font> <fontcolor="blue"size="4"face="ComicSansMS">chocolate </font><br> <img src="imagenes/jet.jpg"border="4"width="200"height="80"> <img src="imagenes/jet2.jpg"border="4"width="200"height="80"> <hr align="center"width="200%"size="5"color="purple"noshade> <pre> Copyrigth2015 colegionacional nicolasesguerra av.cra 68 N 4-40 sur bogota,colombia juanesvs2302@gmail.com</pre>