Imágenes html

Page 1

IMÁGENES <img>


 Html es común utilizar imágenes con enlace, que permiten mejorar la apariencia o información visual.  Para insertar una imagen es necesario utilizar la etiqueta <img> no necesita etiqueta de cierre.  El nombre de la imagen ha de especificarse a través del atributo src.

Ejemplo

IMÁGENES <img>

<img src="C:\Users\ADMIN\Desktop\Mi primera web\imagenes\estructura html.png">


 Cuando una imagen no es visible en el navegador, se debe a que se especifico mal el valor del atributo src, apareciendo un recuadro blanco con una X roja en su lugar, junto con el nombre de la imagen.  En lugar de mostrar el nombre de la imagen, puede aparezca el texto a través del atributo alt. Ejemplo: Para mostrar una imagen llamada estructura html.png, con el texto alternativo Imagen estructura html, para ello se inserta el siguiente código: <img src=" estructura html.png " alt=" Imagen estructura html " >  Esto se debe a que la imagen no se encuentra en el mismo directorio que el documento actual, sino que se encuentra dentro de la carpeta imágenes. En lugar de la imagen se mostrará lo siguiente: estructura html

 Se debe insertar el siguiente código <img src="C:\Users\ADMIN\Desktop\Mi primera web\imagenes\estructura html.png“ alt =" Imagen estructura html " >


Borde de imagen Se establece a través del atributo border, puede tomar valores numéricos, que indican el grosor en píxeles del borde. Ejemplo: <img src="C:\Users\ADMIN\Desktop\Mi border="5">

primera

web\imagenes\estructura

html.png"


Borde de imagen 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. Ejemplo: para insertar la siguiente imagen con borde y con un enlace <a href="https://www.iguannaweb.com/2012/01/07/html-estructura-base.html"target="_blank"><img src="C:\Users\ADMIN\Desktop\Mi primera web\imagenes\estructura html.png" border="0"></a>


 Las imágenes insertadas se muestra en los navegadores con su tamaño original, pero se pueden modificar dicho tamaño.  A través de los atributos width (anchura) y height (altura) puede modificarse el tamaño de la imagen, el 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. Ejemplo: para insertar la siguiente imagen (cuyo tamaño original era de 569 píxeles de anchura y 388 píxeles de altura) con 300 píxeles de anchura y 180 píxeles de altura. <img src="C:\Users\ADMIN\Desktop\Mi width="300"height="180">

primera

web\imagenes\estructura

html.png"


 La alineación de las imágenes se establece a través del atributo align  Este atributo indica la alineación de las imágenes con respecto a la línea de texto en la que se encuentran.  El resultado de aplicar uno u otro valor puede tener el mismo resultado.

estructura html<img src="C:\Users\ADMIN\Desktop\Mi primera web\imagenes\estructura html.png" align="middle">Curso Html


Actividad clase y extraclase


Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.