Aunque después iremos modificando esto, ahora
guardar en vuestra carpeta de imágenes dos que vamos
a insertar
Yo
elegí estas dos; una para un enlace normal y otra
para el correo,
podéis elegir cualquier imagen o estas mismas que
dejo para que guardéis en vuestra carpeta imágenes
que tenéis creada
Abrimos nuestra pagina index y veamos que ocurre si
insertamos una imagen usando las herramientas del
programa, situaros en una parte dentro del body
donde vamos a insertar la misma y vamos a insertar
una imagen desde archivo
Abrimos la imagen elegida
Este código aunque miremos en la vista previa y se
vea perfecto está incompleto, así que
eliminamos esta línea porque no nos sirve ya que
daría problemas en los diferentes servidores y la
idea es que todos lo vean perfecto
Ya que tenemos nuestro animation vamos a ver una
utilidad nueva, abrir la imagen con el animation y
en ver elegir código html
Copiar en el portapapeles
Regresamos a nuestro programa y pegamos los datos
que nos dieron en la misma linea que antes, aun hay
que completar alguna cosa, pero este esta mas
completito que antes, fijaros en un detalle
En
este caso aparecen las dimensiones de nuestra
imagen, si las quitamos se vería exactamente igual,
pero conviene ponerlas por un motivo
Hay veces que nuestra pagina tarda en cargar o el
servidor donde tenemos nuestras imágenes subidas dan
error, en ese caso nuestra imagen se vería reducida
a un simple aspa, esa que tanta rabia da, pero el
problema mayor seria el siguiente, ese aspa
reduciría el espacio de la imagen a lo que ocupa
exactamente el aspa y no reservaría el espacio que
le corresponde, por lo cual en muchos casos quedaría
la pagina descuadra completamente, asi que ponemos
las medidas del width y heigh
Recordamos que nuestra imagen esta dentro de la
carpeta imágenes, pues le añadimos dentro de scr=""
imagenes/( mirar la siguiente captura)
En
alt escribimos la descripción que queremos para
nuestra imagen, si pasamos el ratón en cualquier
pagina web, por encima de una imagen veis un texto
escrito, pues lo que escribáis ahí es lo que después
veremos cuando lo subamos a nuestra web
Ahora nos planteamos otro detalle, cuando insertamos
imágenes estas debemos ponerlas dentro de un párrafo
<p>(imagen)</p> así que escribimos esos códigos
antes y después de nuestra imagen
Y
vamos teniendo esto dentro de nuestro body
<body>
<p>Bienvenidos</p>
<p>Vamos a insertar imágenes</p>
<p>En un parrafo separado</p>
<p><img src = "imagenes/MARIE011.gif" width="100"
height="120" alt="hola amigos"></p>
</body>
En
este caso nuestra imagen se situó en un párrafo
diferente
ahora vamos a insertar la segunda imagen donde
enlazaremos después nuestro email,
en
este caso la insertaremos dentro de un párrafo que
contiene texto
escribimos un nuevo párrafo
<p>Escríbeme un correo</p>
Situamos el cursor justo después de la palabra
correo y al igual que antes vamos a insertar la otra
imagen pero esta vez la insertaremos dentro de otro
párrafo existente
Si
pulsamos la vista previa vemos lo que tenemos de
momento, comprobar que la captura mía coincide con
la vuestra
Subimos ahora a nuestro hosting las dos imágenes en
nuestra carpeta imágenes y la pagina index, es lo
único que hemos tocado hoy
