Come rendere le immagini fianco a fianco in HTML

July 20

Utilizzando HTML, è possibile inserire le immagini fianco a fianco in una pagina Web in almeno tre modi diversi: utilizzando le tabelle, con fogli di stile CSS, o mettendo tag di immagine accanto all'altro senza altri tag HTML tra di loro. Saper applicare almeno uno di questi approcci permette di presentare il contenuto grafico di una pagina Web in modo organizzato. Si noti che l'immissione immagini affiancate non garantisce tutte le immagini saranno visibili in una sola volta. Ritagliare le immagini a dimensioni che lavorano con il resto del contenuto della pagina.

istruzione

Plain IMG Tag

1 Aprire un nuovo file in un editor di word processor o il testo come Blocco note.

2 Digitare o incollare il seguente documento HTML vuoto in un word processor. Questo documento non ha ancora nessun tag di immagine. Si aggiungeranno quelli prossimo.

<Html>

<Body>

</ Body>

</ Html>

3 Digitare i seguenti tag HTML dopo il tag "<body>". Questi tag dire al browser di caricare le immagini sulla pagina Web. Dal momento che non vi è alcun punto, rottura del cavo o altro tag HTML tra i due tag di immagine, i tag immagine apparirà fianco a fianco nella pagina Web. Questo non sarà vero se si ridimensiona il browser per meno di tutta la larghezza del monitor, o se le immagini sono molto ampia.

<Img o ".html", e come tipo "solo testo". In questo modo il browser può interpretare i tag HTML nel file.

5 Aprire Esplora risorse, quindi passare a qualsiasi cartella che contiene due o più file JPEG.

6 Copiare due file JPEG alla cartella contenente il documento HTML, che si è salvato nel passaggio 4.

7 Rinominare uno dei file JPEG come "imageLeft.jpg," e l'altro come "imageRight.jpg.

8 Fare clic sul file salvato nel passaggio 4, quindi premere "Invio" per aprire il file nel browser Web predefinito. Il browser visualizzerà il lato due immagini affiancate.

tabelle

9 Incollare il seguente documento HTML vuoto in un word processor o un editor di testo.

<Html>

<Body>

</ Body>

</ Html>

10 Incollare i seguenti codici HTML per la definizione di una tabella dopo il tag "<body>". due celle della tabella sono uno accanto all'altro. Quando si inserisce immagini in queste cellule, le immagini saranno anche uno accanto all'altro.

<Table border = "1">

<Tr>

<Td>

</ Td>

<! - Colonna a due ->

<Td>

</ Td>

</ Tr>

</ Table>

11 Digitare la seguente dopo il primo "<td>", che inizia la prima cella della tabella. Questo codice HTML carica un'immagine nella cella della tabella.

<Tag IMG dopo il secondo tag "<td>", e cambiare il "imageleft.jpg" stringa "imageright.jpg"

13 Salvare il documento come tipo "testo" e digitare qualsiasi nome di file che termina con ".htm" o ".html".

14 Aprire Esplora risorse, quindi passare a una cartella contenente almeno due file JPEG. Si possono trovare questi file cliccando sul link "Immagini" nel riquadro in alto a sinistra di Esplora risorse di Windows.

15 Copiare due file JPEG nella cartella che contiene il file di testo salvato nel passaggio 5.

16 Rinominare uno dei file JPEG come "imageLeft.jpg," e l'altro come "imageRight.jpg."

17 Fare doppio clic o premere "Invio" sul file per aprirlo nel browser. Vedrete una tabella le cui celle contengono una immagine a destra di un'altra immagine.