Una parte della buona progettazione Web consiste nel garantire il testo e le immagini si allineano in modo appropriato nella pagina. Questo produce continuità e facilita la navigazione del tuo sito. Potete fare immagini linea in posizione orizzontale con le icone sul tuo sito HTML aggiungendo e modificando il codice del file indice e il foglio di stile CSS.

Istruzioni

1

Aprire la pagina index. html nell'editor HTML.

2

Incollare il codice seguente nella pagina index. html:

< div class = "imageBox" >
< a href = "#" >
< img src="image1.gif" width = "100" height = "100"
Alt = "immagine 1" / >< /a >
< p >< href = "#" > 1 < /a >< / p >
< / div >

< div class = "imageBox" >
< a href = "#" >
< img src="image2.gif" width = "100" height = "100"
Alt = "immagine 1" / >< /a >
< p >< href = "#" > 2 < /a >< / p >
< / div >

Sostituire il carattere "#" con l'URL che si desidera il file di immagine a cui collegarsi. Sostituire "image. gif" con il nome del file immagine. È possibile aggiungere altre foto copiando e incollando il codice sopra tante volte quanto necessario.

3

Salvare il file index. html e caricarlo sul server del sito Web.

4

Incollare il seguente codice nel foglio di stile CSS del tuo sito Web:

div.imageBox () {
float: left;
margine destro: 10px;
}

div.imageBox p {
text-align: center;
}

5

Salvare il file di foglio di stile CSS e caricarlo sul server.