Pubblicato il 06/10/08 - aggiornato il  | 3 commenti :

Inserire un blocco di testo in un rettangolo colorato con l'HTML.

In questo articolo ho dato dei consigli su come inserire un blocco di testo in un rettangolo sfruttando la funzionalità della Tabella in Windows Live Writer o, in subordine digitando il codice HTML direttamente. Mentre in quest'altro articolo ho parlato della rappresentazione dei colori "true colours" in esadecimali e come utilizzarla. Adesso cerchiamo di unire queste due conoscenze cercando di creare un riquadro all'esterno di un blocco di testo che si vuole evidenziare.

Se si ha WLW si inserisce la tabella con una sola riga ed una sola colonna quindi si passa alla visione HTML. Se invece non si ha si può scrivere in modalità HTML questo codice

<table width="542" align="center" bgcolor="#00ff00" border="0"><tbody>
<tr>
<td width="540" bgcolor="#ffffff">Inserimento del testo del riquadro</td>
</tr>
</tbody></table>

Dove i valori scritti in rosso possono essere modificati

  • 542 è la larghezza del riquadro
  • center è l'allineamento al centro ma possiamo mettere anche "left", "right", "justify" per sinistra, destra giustificato.
  • 540 è la larghezza in pixel che si vuole utilizzare per scrivere il testo, ovviamente questo valore deve essere uguale o inferiore al primo


  • bgcolor attributo di table è il colore del riquadro, si può impostare come abbiamo visto in questo post che ho già citato
  • bgcolor attributo di td è il colore di sfondo del riquadro e può essere scelto come sopra
  • In Inserimento del testo del riquadro si scrive quello che si vuole inserire all'interno

A titolo di esempio ho inserito nel codice precedente i seguenti attributi

<table width="600" align="center" bgcolor="#00ff00" border="0"><tbody>
<tr>
<td width="600" bgcolor="#ffff00">INSERIMENTO DEL TESTO</td>
</tr>
</tbody></table>

I colori sono il verde ed il giallo, decisamente brutti ma semplici, per far capire come fare questa operazione. Ecco il risultato finale

QUESTI TIPI DI RIQUADRI POSSONO ESSERE INSERITI IN ALCUNI POST NEI QUALI SI VUOLE PORRE PARTICOLARE ATTENZIONE SU UNA COSA SPECIFICA. POSSONO' ANCHE ESSERE ASSOCIATI AD UN LINK BASTA METTERE PRIMA DEL CODICE DEL RIQUADRO <a href="indirizzo del collegamento> E </a> ALLA FINE. IN QUESTO CASO HO MESSO UN COLLEGAMENTO AD UN ALTRO MIO BLOG DI VIDEO DAL TITOLO PHOTOS AND VIDEOS. IL TESTO PUO' ESSERE MODIFICATO ANCHE DOPO CHE SI E' INSERITO IL RIQUADRO E AUTOMATICAMENTE LE SUE DIMENSIONI IN ALTEZZA SI ADATTERANNO ALLA LUNGHEZZA DEL TESTO. NON PREOCCUPATEVI TROPPO DELLE DIMENSIONI PERCHE' CON IL MOUSE POSSONO ESSERE VARIATE COME E QUANDO SI VUOLE ANCHE IN UN SECONDO TEMPO.




3 commenti :

  1. Ciao e complimenti per i tuoi consigli! Volevo sapere come fare ad insierire un codice html in un testo per farlo copiare dagli utenti.

    Devo inserire il codice del mio banner per permettere il copia e incolla. Soltanto che se insierisco il codice e poi faccio salva viene fuori il banner proprio e non l'html copiabile. Spero di essere stata chiara grazie

    RispondiElimina
    Risposte
    1. Prova a utilizzare un tag textarea. Leggi questo post che è un po' vecchiotto ma che dovrebbe risolverti il problema
      http://www.ideepercomputeredinternet.com/2009/08/creare-e-mostrare-nel-blog-il-codice-di.html

      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.