September 13
In HTML, è necessario incorporare le immagini utilizzando il tag <img> e poi lo stile utilizzando Cascading Style Sheet codice (CSS). È possibile allineare le immagini in una fila orizzontale "fluttuante", ma è necessario tenere immagini flottate di rompere i layout di pagina web. L'aggiunta di un tag <div> intorno alle immagini aiuta a tenerli al loro posto. Dopo l'allineamento delle immagini, utilizzare CSS per aggiungere spaziatura e altre styling alle immagini. Questa tecnica è utile per la creazione di pagine galleria immagini.
1 Aggiungere un tag <img> per ogni immagine nel documento HTML. Posizionare ogni tag <img> sulla propria linea, ma ancora adiacente agli altri. Utilizzare l'attributo "src" per definire il percorso del file - l'indirizzo Web - a ogni immagine, in questo modo:
<Img src = "path / to / image1.png">
<Img src = "path / to / image2.png">
2 Salvare il file HTML e visualizzate nel browser. Se il sito è già in diretta su un server Web, ricordarsi di caricare sia il file HTML aggiornato più entrambe le immagini. Entrambe le immagini dovrebbero essere già in fila side-by-side. Questo accade perché, anche se si mette ogni tag <img> in una riga, non hai avvolgerli nei tag <p> Per creare dei paragrafi o aggiungere un
tag di rompere le righe. A volte il vostro codice CSS farà sì che le immagini non vengono visualizzate side-by-side, però. Sarà inoltre necessario CSS per lo spazio alle immagini.
3 Modificare il CSS della pagina Web per assicurarsi che le immagini si allineano sempre orizzontalmente. Aggiungere il codice CSS in un file CSS esterno o tra i tag <style>, che vanno tra i tag <head> nella parte superiore del documento HTML. Ecco esempio di codice:
img {float: left; margin-right: 10px; margin-bottom: 10px;}
Il codice di cui sopra "galleggia" ogni istanza del tag <img> alla sinistra di tutto ciò che è adiacente alla pagina. Tutto ciò a destra di un tag sinistra flottato avvolge la voce di galleggiare. Aggiungere imbottitura o margini distanziare le immagini.
4 Avvolgere i tag <img> con un tag <div> e dare il tag <div> un ID attributo. Nome l'attributo ID qualcosa di unico e significativo. Ecco un esempio:
<Div id = "images">
<Img src = "path / to / image1.png" />
<Img src = "path / to / image2.png" />
</ Div>
5 Scrivere il seguente codice CSS per mantenere le vostre immagini galleggiavano da "galleggiare" in altri contenuti:
immagini {clear: both;}
È inoltre possibile modificare il codice CSS per galleggiare solo immagini trovate tra i tag <div> con un ID di "immagini" in questo modo:
immagini img {float: left;}