<IMG SRC="Foto.gif / Foto.jpeg">
IMG: IMAGE SRC: SOURCE
Foto: NombreFoto.gif / NombreFoto.jpeg (Sólo se aceptan formatos .gif y .jpeg).
**Dicha foto tiene que estar guardada en el mismo directorio que el archivo que la incluye.
EJEMPLO11: Guarda la siguiente foto como (Cadena.gif), y crea una página web en la que aparezca.
Los atributos (a parte de SRC) que acompañaba a la etiqueta IMG son los siguientes:
A) ALIGN: atributo usado para colocar texto en función de una foto.
<IMG SRC="Foto" ALIGN="TOP/MIDDLE/BOTTOM">
El texto como veis puede estar arriba de la foto TOP, en el medio MIDDLE o debajo BOTTOM.
B) BORDER: atributo para colocar o eliminar el borde en una foto.
<IMG SRC="Foto" BORDER="0, 1, 2..">
En principio optaremos por el valor "0"(no borde), si queremos darle un marco iremos añadiéndole valores (1,2,3..) el buscador los traduce como píxeles.
EJEMPLO12: Guarda la siguiente foto (SillaRuedas.gif), y copia el siguiente código en tu blog de notas. Posteriormente analiza el resultado.
<HTML>
- <HEAD>
- <TITLE>HALL RENTAL</TITLE>
- </HEAD>
<H2 ALIGN="CENTER">ABOUT OUR HALL</H2><HR>
<H4 ALIGN="LEFT"><IMG SRC="SillaRuedas.gif" BORDER="0" ALIGN="MIDDLE">We are wheelchair accessible.</H4>
Please call for rates<HR>
</BODY>
</HTML>
Variante 1: El atributo ALIGN="LEFT" antes de la imagen coloca a ésta en el lado izquierdo (por defecto), qué ocurre si cambiamos el valor de dicho atributo por CENTER o por RIGHT? Haz los cambios necesarios en el blog de notas y comprueba el resultado.
Variante 2: ¿Qué ocurre si al borde tuviera un valor de 10?
Variante 3: convierte ALIGN="MIDDLE" en ALIGN="TOP"
Variante 4: convierte ALIGN="TOP" en ALIGN="BOTTOM"
C) WIDTH - HEIGHT : atributos que afectan a las dimensiones de la imagen (Ancho y Alto).
D) HSPACE - VSPACE: atributos que afectan al espacio que hay entre la imagen y el texto que le acompaña.
EJEMPLO13: Partiendo del anterior ejemplo, copia el siguiente código en tu blog de notas y posteriormente analiza el resultado.
<HTML>
- <HEAD>
- <TITLE>HALL RENTAL</TITLE>
- </HEAD>
<H2 ALIGN="CENTER">ABOUT OUR HALL</H2><HR>
<H4 ALIGN="LEFT"><IMG SRC="SillaRuedas.gif" BORDER="0" ALIGN="MIDDLE" WIDTH="60" HEIGHT="60" HSPACE="10" ALT="chair">We are wheelchair accessible.</H4>
Please call for rates<HR>
</BODY>
</HTML>
----------------------------------------------
PROBLEMA6: Guarda la foto que aparece a la derecha como "cross1.gif" y diseña el código HTML para que en él aparezca una web con el siguiente estructura.
- La imagen se llama cross1.gif
- La anchura es de 60 pixels.
- El alto es de 85 pixels.
- No hay borde alrededor de la imagen.
- Hay un espacio horizontal de 20 pixels alrededor de la imagen.
- Cada uno de los puntos alrededor de la imagen tiene un link a un documento .html diferente.
- "BUCHANAN VILLAGE" es un título de Nivel 1.
- "An Adult Lifestyle Community for Seniors" es un título de Nivel 2.
- "Operated by the Retirement Home Association" es un título de Nivel 3.
- Añade un link a la imagen para que ésta salte a la página de inicio de google.
----------------------------------------------
BUCHANAN VILLAGE
An Adult Lifestyle Community for Seniors
Operated by the Retirement Home Association
- What is Buchanan Village all about?
- What is a "Life Lease" Retirement Community?
- The benefits of a Life Lease
- Who to contact for more information
No hay comentarios:
Publicar un comentario