oletusWEBos.es - Lecciones paso a paso para crear tu web. Tutoriales de Dreamweaver, HTML y CSS
Curso HTML - Lección 9: Imágenes
En esta lección vamos a ver como podemos insertar imágenes en nuestra página web para que quede un poco más llamativa
Como ya sabrás y hemos visto en lecciones anteriores todo lo que necesitamos es un elemento sin o con algún atributo. Veamos un ejemplo:
Ejemplo 1:
Imaginemos que somos fanáticos de la F1 y estamos creando una web del mundillo de las carreras de F1 en la cuál vamos a insertar una imagen:
<img src="formula1.jpg" title="accidente"/>
que se verá de la siguiente forma en el navegador:
Como verás lo que hemos hecho a sido indicarle al navegador que queríamos insertar una imagen, para ello hemos usado el elemento img y justo después le hemos indicado donde tenemos localizada la imágen con src. Observa como el elemento img se abre y cierra usando la misma etiqueta, como pasaba acuerdate con <br /> y <hr />.
El nombre de la imagen a insertar es "formula1.jpg" y al igual que pasaba con los vínculos tambien podemos ponerle una descripción a la imagen mediante el atributo title.
Quiero saber más sobre imágenes
Debes saber que puedes insertar imágenes que tengas guardadas en tu ordenador e incluso imágenes que esten localizadas en otra web.
Ejemplo 2:
<img src="objetos/logo.png"/>
Ejemplo 3:
<img src="http://www.oletuswebos.es/objetos/logo.png"/>
Ahora veremos como a las imágenes también podemos añadirlas un enlace para que cuando hagamos clic en ella nos lleve a otra página:
Ejemplo 4:
<a href="http://www.oletuswebos.es/index.html"><img src="banner.gif/></a>
lo veremos así en el navegador, prueba a pinchar en la imagen haber donde nos lleva:
Al hablar de insertar imágenes en una página web, no nos podemos olvidar de dos atributos muy importartes: width y height.
Usaremos estos dos nuevos atributos para establecer la altura y la anchura de las imágenes. El valor utilizado para definir tanto la altura como la anchura será en píxeles.
¿Que son los píxeles?
Los píxeles son unidades de medida utilizadas para medir la resolución de la pantalla (la resolución de pantalla más habitual es de 1024 x 768 píxeles).
Por ejemplo: la imágen de F1 que hemos puesto al inicio de esta lección tiene unas medidas originales de 530 x 265 píxeles pues bien, en el siguiente ejemplo veremos como redimensionar la imágen para que tenga otras medidas:
Ejemplo 5:
Resulta que la imágen original es demasiado grande para nuestra web de F1 y queremos darla un tamaño más pequeño, supongamos que la queremos de 215 x 130 píxeles, el código sería el siguiente:
y de este tamaño se vería ahora en nuestro navegador:
Pero no debes olvidar que la imagen seguirá "pesando lo mismo", por lo que la imagen seguirá tardando lo mismo que antes al cargar. Acostumbrate a redimensionar imágenes con programas especializados como Photoshop, Fireworks, etc... .
Aún así hay que acostumbrarse a utilizar tanto "width" como "height" en la inserción de las imágenes, por que de esta forma el navegador sabrá cuanto espacio necesita la imágen en la visualización final de la página antes de que la imágen se haya descargado totalmente, ganando así rapidez al cargar nuestras páginas.
¿Quieres comentarnos algo? Hazlo en el Foro OTW
Quiero aprender más!!!
- Avanzar a Lección 10: ¿Que son las tablas?
- Retroceder a Lección 8: Enlaces o Vínculos
©oletusWEBos 2009 all right reserved | Contácta con oletusWEBos.es
Design By: JTole®