L'impostazione di immagini e didascalie in un corpo di testo è una funzione di base di HTML, come è stato progettato per emulare tecniche di layout di stampa tradizionali. Nelle prime versioni di HTML, il "allineare" attributo del tag "img" è stato utilizzato per spingere l'immagine a sinistra oa destra in un blocco di tipo, ma questa tecnica mancava di controllo sufficienti ed è ora sconsigliato. Cascading Style Sheets sono stati introdotti con la specifica HTML 4.0, che consente di controllare il modo in cui l'immagine e la sua voce sono impostati in un blocco di tipo appunto.

istruzione

1 Inserire il codice seguente tra i tag "testa" del documento HTML:

<Style type = "text / css">

span.rightalign

{

float: right;

text-align: center;

font-size: 75%;

}

</ Style>

La prima riga dopo il tag "stile" è una dichiarazione di classe CSS, che dice che ogni tag "span" assegnata la "rightalign" classe erediterà le proprietà tra le parentesi graffe. La proprietà "float" causa di testo e altri contenuti per avvolgere in modo fluido intorno all'elemento. La proprietà "text-align" centrerà la didascalia sotto l'immagine. È possibile utilizzare "sinistra" o "destra", invece, se si preferisce. La proprietà "font-size" renderà la didascalia del 75 per cento inferiore rispetto al resto del testo; questo valore può essere regolato.

2 Aggiungere il seguente codice al corpo del documento HTML in cui si desidera visualizzare l'immagine, sostituendo "image.jpg" con il percorso e il nome della vostra immagine:

<Span class = "rightalign"> <img attributo assegna le proprietà CSS definite nel passaggio precedente a questo tag "span". Se lo si inserisce in un blocco di testo, l'immagine verrà visualizzata nella riga successiva a disposizione, giustificato a destra con il testo in modo fluido avvolgendo intorno ad esso e la didascalia.

3 Aggiungere "Margine", "proprietà del cuscinetto" confine "e" per la dichiarazione della classe nella testa del documento HTML per regolare l'area che circonda l'immagine e la didascalia. Provate il seguente esempio per vedere come funzionano queste proprietà:

span.rightalign

{

float: right;

text-align: center;

font-size: 75%;

margin: 3px;

border: 1px grigio solido;

padding: 3px;

}