Come faccio a creare una galleria di immagini in HTML?

May 22

Come faccio a creare una galleria di immagini in HTML?


Una galleria di immagini sulla tua pagina blog o web può essere un interessante complemento al tuo sito. Oltre a consentire di visualizzare le immagini dei vostri amici e parenti, una galleria di immagini in grado di consentire a una persona che possiede un sito commerciale per visualizzare le immagini di prodotti o servizi che offre. Mentre una buona dose di abilità HTML sono necessari per creare una galleria di immagini, si dovrebbe anche essere una certa familiarità con il linguaggio di programmazione CSS.

istruzione

1 Accedi al tuo web server o blog e passare alla pagina su cui si desidera creare la galleria di immagini.

2 Fare clic sul punto della pagina in cui si desidera inserire la galleria di immagini.

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

<Head>

<Style type = "text / css">

div.img

{

margin: 2px;

border: 1px solid # 0000FF;

height: auto;

width: auto;

float: left;

text-align: center;

}

div.img img

{

display: inline;

margin: 3px;

border: 1px solid #FFFFFF;

}

div.img a: hover img

{

border: 1px solid # 0000FF;

}

div.desc

{

text-align: center;

font-weight: normal;

width: 120px;

margin: 2px;

}

</ Style>

</ Head>

4 Tipo <body> nella riga successiva dopo il codice CSS per significare che il vostro corpo del testo seguirà.

5 Incollare il seguente codice HTML:

<Div class = "img">

<a target="_blank" href="http://www.link1here.com">

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

</a>

<Div class = "disc"> Aggiungere una descrizione dell'immagine qui </ div>

</ Div>

<Div class = "img">

<a target="_blank" href="http://www.link4here.com">

<Img alt = "seconda immagine" width = "110" height = "90" />

</a>

<Div class = "disc"> Aggiungere una descrizione dell'immagine qui </ div>

</ Div>

<Div class = "img">

<a target="_blank" href="http://www.link4here.com">

<Img alt = "terza immagine" width = "110" height = "90" />

</a>

<Div class = "disc"> Aggiungere una descrizione dell'immagine qui </ div>

</ Div>

<Div class = "img">

<a target="_blank" href="http://www.link4here.com">

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

</a>

<Div class = "disc"> Aggiungere una descrizione dell'immagine qui </ div>

</ Div>

6 Sostituire "http://www.link1here.com" o "http://www.link2here.com", ecc nel passaggio 5 con il collegamento reale che si desidera aprire quando l'immagine designato viene cliccato.

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," e così via con il testo alternativo che si desidera visualizzare per i non vedenti.

9 Sostituire "Aggiungere una descrizione dell'immagine qui" con una didascalia o una descrizione dell'immagine.

10 Chiudere la galleria con tag di chiusura per il corpo e documento HTML. I tag dovrebbe essere simile a questo:

</ Body>

</ Html>

11 Fai clic su "Pubblica" sul tuo blog o web server.