Una galleria di immagini sul tuo blog o pagina web può essere un'aggiunta attraente al vostro sito. Oltre a consentire di mostrare le immagini dei tuoi amici e la famiglia, una galleria di immagini può permettere una persona che possiede un sito commerciale per visualizzare le immagini di prodotti o servizi che egli offre. Mentre una discreta quantità di competenze HTML sono necessari per creare una galleria di immagini, anche dovrebbe essere certa familiarità con il linguaggio di programmazione di CSS.

Istruzioni

1

Accedere al tuo server web o un blog e passare alla pagina su cui si desidera creare la Galleria di immagini.

2

Fare clic sul posto nella pagina dove si desidera inserire la Galleria di immagini.

3

Incollare il seguente codice CSS appena sotto il tag < html > sulla tua pagina:

< head >

< style type = "text/css" >

div.img

{

margin: 2px;

border: 1px solid #0000ff;

Altezza: auto;

Larghezza: auto;

float: left;

text-align: center;

}

img div.img

{

display: inline;

margine: 3px;

border: 1px solid #ffffff;

}

div.img un: hover img

{

border: 1px solid #0000ff;

}

div.desc

{

text-align: center;

tipo di carattere-peso: normale;

Larghezza: 120px;

margin: 2px;

}

< / stile >

< / head >

4

Digitare < body > nella riga successiva dopo il codice CSS per indicare che il testo del corpo seguirà.

5

Incollare il seguente codice HTML:

< div class = "img" >

< a target = blank"href ="l'http://www.link1here.com">

< img alt = "Prima immagine" width = "110" height = "90" / >

< /a >

< div class = "desc" > Aggiungi una descrizione dell'immagine qui < / div >

< / div >

< div class = "img" >

< a target = blank"href ="l'http://www.link4here.com">

< img alt = "Seconda immagine" width = "110" height = "90" / >

< /a >

< div class = "desc" > Aggiungi una descrizione dell'immagine qui < / div >

< / div >

< div class = "img" >

< a target = blank"href ="l'http://www.link4here.com">

< img alt = "Terza immagine" width = "110" height = "90" / >

< /a >

< div class = "desc" > Aggiungi una descrizione dell'immagine qui < / div >

< / div >

< div class = "img" >

< a target = blank"href ="l'http://www.link4here.com">

< img width = "110" height = "90" / >

< /a >

< div class = "desc" > Aggiungi una descrizione dell'immagine qui < / div >

< / div >

6

Sostituire "l'http://www.link1here.com" o "di http://www.link2here.com," ecc. nel passaggio 5 con il link effettivo che si desidera aprire quando si fa clic l'immagine designato.

7

Sostituire "image1. jpg", "image2.jpg", ecc, con il percorso del file effettivo dell'immagine che si desidera inserire nella galleria.

8

Sostituire "alt ="Prima immagine"o" alt = "Seconda immagine," ecc con il testo alternativo che si desidera venga visualizzato per i non vedenti.

9

Sostituire "Aggiungi una descrizione dell'immagine qui" con una didascalia o Descrizione dell'immagine.

10

Chiudere la raccolta con tag per il corpo e il documento HTML di chiusura. Il tag dovrebbe assomigliare a questo:

< / body >

< / html >

11

Fare clic su "Pubblica" sul vostro blog o web server.