Come creare un testo che avvolge il testo html?

La presenza di immagini su pagine web migliora il loro aspetto, attira l'attenzione e contribuisce a una migliore percezione dei testi. Avvolgere un testo con testo html ti consente di collegare il contenuto con le illustrazioni e di posizionare il materiale in modo efficiente. Sviluppa costantemente nuovi modi di creare immagini, permettendo di incarnare idee creative. Allo stesso tempo, i nuovi stili di layout sono basati sugli stessi metodi, creando un ambito di immaginazione illimitato.

Il posizionamento delle immagini relative al testo può essere fatto in html o usando le proprietà CSS.

Tag HTML: testo a capo del testo

Le immagini sono posizionate sulla pagina in tre modi:

• posizione centrale;
• avvolgimento del testo;
• inserire nel campo.

Con una grande dimensione, l'immagine viene posizionata al centro della pagina, prima posizionata nel contenitore <p> del tag img, dopo di che viene impostato l'attributo = = center. Se usi spesso un'immagine, devi applicare lo stile CSS al tag <p>.

Quando l'immagine è piccola, il testo viene posizionato accanto ad esso. Il metodo è il più comune. Il text wrapping viene eseguito in diversi modi. Ma prima devi mostrare un'immagine sullo schermo. Se il percorso ad esso noto, ad esempio "foto1.jpg", viene inserito nella pagina html utilizzando la seguente voce:

<p> <img src = "foto1.jpg"> </ p>

L'esempio corrisponde al caso in cui i file html e l'immagine si trovano nella stessa cartella.

Se l'immagine è seguita da un testo, verrà posizionata di seguito. Questo non è sempre conveniente, poiché ci saranno spazi vuoti sui lati, quindi la pagina è progettata per creare un testo attorno all'immagine html. Per questo, il tag img ha un attributo align che definisce la posizione della foto o dell'immagine rispetto al testo. Questo parametro determina da quale bordo della pagina si trova il materiale grafico e come il testo scorre attorno ad esso. L'attributo può essere impostato sui seguenti valori:

• sinistra - sposta l'immagine a sinistra quando si avvolge il testo a destra;
• a destra - avvolgere l'immagine a sinistra quando è posizionata a destra;
• bottom - il valore predefinito, quando l'immagine è a sinistra, la prima riga di testo inizia al livello della sua parte inferiore;
• top - l'immagine è posizionata in modo simile al valore precedente, ma la prima riga si trova al suo livello più alto;
• middle - la riga iniziale del testo scorre di fronte al centro dell'immagine.

Il tag img ha parametri che possono essere utilizzati per impostare la distanza dal testo all'immagine (hspace e vspace). Senza la loro applicazione, il testo sarà posizionato vicino all'immagine. Inoltre, vengono selezionate le dimensioni della larghezza e dell'altezza. Allo stesso tempo, la proporzione tra larghezza e altezza dovrebbe essere rispettata. Se le dimensioni non sono impostate, per impostazione predefinita il disegno viene trasferito con le dimensioni del codice sorgente, il che non è sempre conveniente.

Spostando l'immagine a sinistra con il testo che lo avvolge può essere fatto scrivendo:

<p> <img src = "foto1.jpg" align = "left" width = 150 height = 100 hspace = 5 vspace = 5> Testo </ p>

Tabelle di applicazione

Avvolgere un testo con testo html è facile con l'aiuto di una tabella con un'immagine all'interno della cella. Qui la proprietà align viene applicata al tag table. Le tabelle hanno parametri più controllati, il che crea vantaggi per loro:

<table width = 170 height = 120 border = 0 align = left cellpadding = 0 cellspacing = 0>
<img src = "foto2.jpg" larghezza = 150 altezza = 100>

</ table>

Il bordo del tavolo è reso invisibile e non consente al testo di avvicinarsi all'immagine. Le rientranze tra e all'interno delle celle possono essere regolate.

Usare gli stili

Dagli esempi precedenti puoi vedere quanto sia facile rendere il testo avvolgente attorno al testo html. CSS ti consente di ottenere risultati simili. Wrap viene creato utilizzando la proprietà float. Anche qui l'allineamento è fornito dai valori sinistra e destra.

Per questo, viene creata una classe e gli vengono assegnati gli stili CSS:

<Style>

.fotoleft {

float: a sinistra;

margine: 5px 12px 3px 0px;

}

</ style>

Quindi la proprietà di stile float viene aggiunta al selettore img:

<img src = "foto1.jpg" class = "fotoleft">

Oltre ad allineare l'immagine usando il valore di sinistra, imposta anche il margine del testo dall'immagine dalla proprietà margin. Allo stesso modo, il wrapping del testo a sinistra viene eseguito se viene applicata la proprietà right.

Gli stili ti consentono di sovrapporre il testo direttamente su un'immagine. Per fare ciò, il testo viene inserito nel blocco con uno sfondo semitrasparente, che viene sovrapposto all'immagine.

Non è così difficile fare un involucro drammatico del testo e la sua imposizione sulle immagini, poiché ciò è ottenuto da esperimenti successivi.

Avvolgimento di immagini tonde con testo html

Le pagine Web sono costituite principalmente da aree rettangolari. Tutti sanno come creare testo con testo in html. Gli stili vengono utilizzati per creare forme geometriche, ma non sono correlati alla posa del contenuto all'interno o all'esterno degli elementi. È possibile dividere il disegno in 2 parti e posizionare blocchi di rientri di larghezza diversa su entrambi i lati. Dietro di loro c'è il testo.

Il processo di creazione di tale flusso richiede molto tempo e deve essere eseguito separatamente per ogni nuovo modello.

Il testo avvolge forme complesse

Sviluppando la nuova specifica CSS, Shapes è stata in grado di influenzare il design esistente e fornirgli nuove prospettive. Ora il contenuto può avvolgere forme complesse e aree curve.

Le specifiche sono supportate dal browser Chrome Canary e ora stanno cercando di implementarle sul resto. Ti permette di creare disegni complessi senza l'aiuto di editor grafici.

L'html avvolge un'immagine rotonda è fornita con la seguente voce:

#circle

{

forma fuori: cerchio (-300px, -300px, 300px); / * (x, y, raggio) * /

float: a sinistra;

}

<p> Testo di esempio </ p>

Il codice crea un cerchio perfettamente racchiuso nel testo.

Allo stesso modo, verrà creata qualsiasi forma irregolare, grazie al supporto di Photoshop, che permetterà di ottenere il codice CSS della forma.

conclusione

Quando si creano layout di pagina utilizzando diversi modi di inserire immagini e testo su di essi, è possibile creare un design unico. Per fare questo, è necessario padroneggiare le regole di base del layout, che assicurano che il testo sia avvolto attorno al testo html.