Come fare a..‎ > ‎Grafica e disegno‎ > ‎

Come incorniciare testo e immagini (border)

di Maria Silvana Radice






Cornici per testo e immagini
Frame for text and images (border)




Per verificare i vostri codici, prima di inserirli, potete usare l'HTML editor.


Partiamo dalle cornici più semplici....

La cornice di base:


Ciao

Codice:


<div style="width:100px; height:50px; border:1px solid blue
;">
Testo
</div>


I parametri da personalizzare sono quelli in rosso, in questo modo:
  • widht:100px = corrisponde alla larghezza del rettangolo, potete inserire il valore che ritenete opportuno, a seconda del testo che inserirete.
  • height:50px = corrisponde all'altezza del rettangolo, anche qui, potete mettere il valore che credete. Se non mettete l'altezza, il box si espandera` automaticamente.
  • border:1px = questo valore indica lo spessore della cornice, più è alto, più la cornice sarà spessa. Se desiderate una cornice trasparente, impostate il valore su 0.
  • solid = solid è lo stile della cornice,ce ne sono diversi tra cui scegliere. Li ho riportati, tutti, più sotto.
  • blue = blue è il colore della cornice. Potete mettere il colore che preferite, purchè il suo nome sia sempre scritto in lingua inglese o col suo codice web (Editor colori).
Cambiando il modello e il colore, potete creare altre cornici. Vi metto, sotto, gli esempi, con i relativi codici. I parametri che si possono variare, sono sempre quelli descritti sopra.

Tutti gli stili delle cornici:


solid
dotted
dashed
double
groove
ridge
inset
outset



Con alcuni stili, è necessario un minimo di spessore del bordo di 3-4px, per poterne vedere l'effetto.
Il codice delle cornici, deve essere inserito nell'html della pagina, anche con Google sites. E' possibile, per chi avesse difficoltà con l'html, inserirli da inserisci->altri gadget->embed gadget, ma, in questo caso, il testo non potrà essere scritto dopo, ma dovrà essere messo nel codice stesso, che si presenterà così:

<div style="width:100px; height:50px; border:1px solid blue;">
Testo
</div>
<br>

Al posto di Testo, dovete scrivere ciò che desiderate appaia nella cornice. Come sempre, andranno impostate le corrette dimensioni del gadget. Il tag <br> finale, crea uno spazio, sotto alla cornice, nel caso doveste continuare a scrivere nella pagina .

Per scrivere di fianco ad una cornice, bisogna inserirla usando questo codice:

<div style="width:50px;float:left;height:30px;border:5px outset fuchsia;margin-left:5px">
</div>
<br>

Il parametro margin-left:5px, corrisponde alla distanza in pixel dal bordo sx della pagina.

Per allineare le cornici in linea orizzontale, dovete usare questo codice:

<div style="width:50px;float:left;height:30px;border:5px outset fuchsia;margin-left:5px">
</div>
<div style="width:50px;float:left;height:30px;border:5px outset fuchsia;margin-left:5px">
</div>
<br>

I parametri da cambiare sono sempre quelli in rosso. Il parametro margin-left:5px, in questo caso, oltre a definire la distanza della prima cornice dal bordo sx della pagina, definisce anche la distanza tra le cornici stesse.
Per aggiungere altre cornici, sempre allineate in linea orizzontale, dovete ripetere questa stringa del codice:

<div style="width:50px;float:left;height:30px;border:5px outset fuchsia;margin-left:5px">
</div>
<br>

Cornice con sfondo colorato:

Giallo

Se volete mettere uno sfondo colorato alla cornice dovete aggiungere il parametro background: yellow; (cambiando il colore secondo i vostri gusti, ma sempre in inglese, o col suo codice web (Editor colori). Il parametro può essere inserito, nella posizione che vedete sotto, in ognuno dei codici precedenti:

<div style="width:100px; height:50px; background:yellow;
border:1px solid blue;">
</div>
<br>

Cornice con sfondo colorato e spazio tra bordo e testo:

5px dal bordo

Se volete mantenere uno spazio predefinito tra il bordo e il testo, potete usare questo codice...

<div style="width:300px;height:50px;background:lightgray;
border:1px solid gray;padding:5px"></div>

Incorniciare un'immagine




Per incorniciare una immagine, il codice è questo:

<img style="border: 4px solid red" src="URL immagine">

Come centrare il div:

Tutti i div possono essere centrati nella pagina aggiungendo il comando: margin:0 auto;

Esempio:

<div style="width:300px;height:50px;background:lightgray;
border:1px solid gray;padding:5px";margin:0 auto;></div>
 

Una cornice più particolare:


Codice:

 <fieldset style="border: 2px double yellow;"><legend style="color: red; font-family:papyrus"><b>Titolo</b></legend>
<div style="height:50px;">Testo</fieldset>

I parametri modificabili, sono quelli in rosso, in questa maniera:

  • border: 2px = larghezza in pixel della cornice.
  • double yellow = colore della cornice, come per le cornici precedenti, i nomi dei colori vanno inseriti in lingua inglese, o col codice web (Editor colori). Volendo, è possibile cambiare il tipo di cornice (double), con quelle degli esempi precedenti.
  • color: red = è il colore del Titolo in alto.
  • font-family:papyrus = è il font del titolo.
  • Titolo = al posto di Titolo, dovete scrivere il titolo che volete dare. E' possibile decidere se deve essere in grassetto, o no, lasciando, o togliendo i tag <b></b> tra cui è scritto (se si lasciano, sarà in grassetto).
  • height:50px = altezza dello spazio in cui si scrive.
  • Testo = Il testo nella cornice.
In Google sites, quest'ultimo codice va inserito,seguendo la guida Come inserire codici e scripts in Google sites . Tenete presente che l'altezza del gadget dovrà essere il doppio di quella scritta all'interno del codice. Cioè, se nel codice è 50 (come da esempio), dovrete impostare l'altezza del gadget a 100px. La larghezza, potete metterla a piacere, la cornice si adatterà.

Casella di testo con scrollbar:

Casella di testo con scrollbar verticale. Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla

Codice:
<div style="height:120px;width:100%;max-width:200px;border:2px solid green;font:12px Arial;overflow:auto">testo</div>

I valori modificabili sono quelli in rosso, in questo modo..
  • height:120px = altezza del box
  • max-width:200px = larghezza massima del box
  • border:2px = spessore della cornice
  • solid = stile della cornice (vedi "Tutti gli stili delle cornici")
  • green = colore della cornice (con il nome inglese, o con il suo codice -> Editor colori)
  • font:12px = dimensione del testo
  • Arial = carattere del testo
  • testo = può essere inserito anche successivamente in modalità editor
Lo scrollbar appare solo se la lunghezza del testo supera la dimensione del box.
Questo codice va incollato direttamente nell'html della pagina anche su Google sites.

Cornice responsive:

Data l'attuale necessita` di ottimizzare il sito per il mobile, credo sia interessante creare una cornice che possa adattarsi, in automatico, alle varie dimensioni dello schermo.
Il metodo per ottenere questo risultato e` il seguente:

<div style="width:100%;max-width:300px; color: navy; background-color: pink; border: 2px solid blue; padding: 5px;">
<p>Il mio testo</p>
</div>

Come vedete, la larghezza e` indicata al 100%, con limpostazione di una larghezza massima. Non e` indispensabile indicare l'altezza.

Cornice responsive con angoli arrotondati:

Testo

<div style="width:100%;max-width:300px;border-radius:10px;border:1px red solid;overflow:hidden">
<div style="background-color:#eeeeee;padding:5px">
Testo
</div>
</div>

Modificate i prametri come indicato in precedenza. La voce border-radius e` quella che determina gli angoli arrotondati, modificando il valore in px associato, modificherete l'ampiezza della curvatura.

Come mettere una cornice ad una intera pagina:

Per incorniciare tutta la pagina, il codice è questo:

<div style="width:100%;border:10px ridge blue;box-sizing: border-box;">
<br>
<br>
<br>
<br>
</div>

Va inserito in alto, al primo posto, nel codice html della pagina.
I parametri che potete cambiare, sono quelli in rosso, secondo le indicazioni date in precedenza
Il comando: box-sizing: border-box; serve ad indicare al browser che il bordo deve essere contenuto nella larghezza totale. Omettendolo, la cornice risulterebbe tagliata.


Aiuta il sito! Condividi questa pagina su:
 Facebook   twitter  Google   Linked  in    

Ti e` stato utile questo argomento?