quaderns

bitàcola de l'ies emili darder|web instituto | Contacto

Imágenes en las páginas

webdarder | 17 Agost, 2004 14:42

Este tutorial tiene como objetivos mostrar cómo subir una imagen al servidor y cómo mostrarla en la página.

Cómo subir una imagen al servidor de esta bitácora

En cuanto se entra en la Administración, se nos presenta un menú en el que encontramos la opción Àrea de Fitxers.
Tras pulsar en esa opción se nos muestra un nuevo menú con las siguientes opciones:
Àlbums - Afegir Àlbum - Fitxers - Afegir Fitxer - Ajuda

Bien, yo tengo dos fotografías preparadas para este artículo. Las dos son sobre Palma, así que primero miraré si hay un álbum sobre Palma: Pulso en Álbums y veo que no hay ningún álbum relacionado con Palma ni la isla. Pulso en Afegir Àlbum y en el formulario escribo "Palma" y ya tengo el nuevo álbum.

Ahora subiré las dos imágenes, una tras otra. Pulso en Afegir Fitxer y con Examinar guío al ordenador al lugar donde tengo las imágenes, marco una y, antes de pulsar en el botón de Afegir Fitxer, selecciono la carpeta "Palma" que es donde quiero que se guarde.

Ya está. Ya tengo las dos imágenes en la carpeta "Palma". Ahora ya puedo empezar a escribir el artículo pulsando en Nou Article.

Cómo poner la imagen en la página

Primero: saber la URL o dirección de la imagen

Siempre, en cualquiera de las situaciones que a continuación indicaré, lo que hay que conocer es la dirección o URL en que está la imagen. Para ello, bajo cualquiera de los dos formularios de escritura está el enlace Afegir Fitxer que, al pulsarlo, nos abre una ventana pop-up que nos muestra los álbumes que tenemos creados y, una vez abierto el que nos interesa, nos muestra las imágenes con tres enlaces:

1) El del nombre de la imagen (por ejemplo: "leonaborn.jpg"). Al pulsar en él me sale una ventana con la siguiente dirección: http://bloc.balearweb.net/resource/58/505. Si en esta ventana pongo el cursor sobre la imagen y pulso con el botón derecho del ratón, me sale el menú emergente de la imagen y al elegir "Propiedades", me indica que la dirección o URL de esta imagen es "http://bloc.balearweb.net/get/58/leonaborn.jpg", la cual marco y copio.

2) El segundo enlace que me muestra la imagen en la pop-up es Afegir Fitxer. Al pulsar sobre él, en el formulario me aparecerá lo siguiente:

<img style="margin: 5px;" alt="" src="http://bloc.balearweb.net/resserver.php?blogId=58&resource=leonaborn.jpg" />

Lo cual es válido aunque la URL que pone en el "src" es bastante complicada.

De las dos posibles direcciones o URL de la imagen yo prefiero la primera. Porque es más sencilla y porque es más fácil de conocer. Esta bitácora es la número 58, aparece este número en todas las direcciones, por lo que la dirección o URL de cualquier imagen de esta bitácora tendrá siempre: http://bloc.balearweb.net/get/58/ y a continuación el nombre de la imagen.

Colocar la imagen

Con ejemplos será más fácil:

<img src="http://bloc.balearweb.net/get/58/cort51.jpg" alt="edificio" class="floatleft" /><p>La imagen sale a la izquierda porque le he puesto "class='floatleft'" en el código de la imagen.</p><p>Como la imagen sólo tiene una etiqueta de posición, debe acabar su código con la barra: /</p>

El resultado es:

edificio

La imagen sale a la izquierda porque le he puesto "class='floatleft'" en el código de la imagen.

Como la imagen sólo tiene una etiqueta de posición, debe acabar su código con la barra: /


<img src="http://bloc.balearweb.net/get/58/cort51.jpg" alt="edificio" class="floatright" /><p>La imagen sale a la derecha porque le he puesto "class='floatright'" en el código de la imagen.</p><p>Como la imagen sólo tiene una etiqueta de posición, debe acabar su código con la barra: /</p>

El resultado es:

edificio

La imagen sale a la derecha porque le he puesto "class='floatright'" en el código de la imagen.

Como la imagen sólo tiene una etiqueta de posición, debe acabar su código con la barra: /


<img src="http://bloc.balearweb.net/get/58/leonaborn.jpg" alt="leona del Born" class="center" /><p>Cuando la imagen se pone en medio, no puede tener texto a sus lados.</p>

Ahora le he puesto la imagen en el centro:

leona del Born

Cuando la imagen se pone en medio, no puede tener texto a sus lados.

 
Accessible and Valid XHTML 1.0 Strict and CSS
Powered by LifeType - Design by BalearWeb