Come scrivere in HTML

How to write in html








I principali tag e stringhe di codice per scrivere in HTML


Il discorso sarebbe lungo e non si può esaurire in poche righe, ma ho pensato di riportare i tag e le stringhe di codice più utilizzati.


A capo e distanziare:

<br>: serve per andare a capo e per distanziare in verticale. Se scrivete ciao<br>ciao, la seconda parola andrà una riga sotto. Ripetendo il tag, la distanza aumentera`.

&nbsp; : scritto cosi`, con il punto e virgola finale, serve a distanziare gli elementi in orizzontale, testo o altro, anche all'interno di contenitori.

Grassetto:

<b>Testo</b>
<strong>Testo</strong>

Entrambi i tag rendono, come effetto visivo, il testo in grassetto. La differenza sta nell'interpretazione data dal motore di ricerca. Il tag <b> (bold) ha un'utilità puramente estetica, mentre il tag "strong" sta ad indicare l'intenzione di mettere in rilevanza il testo che lo contiene.

Sottolineato:

<u>Testo</u>: il testo tra questi due tag sarà sottolineato.

Corsivo:

<i>Testo</i>: il testo tra questi due tag sarà in corsivo.

Virgolette:

&quot;testo&quot;: il testo tra questi due tag sarà racchiuso tra virgolette.

Barrato:

<s>Testo</s>: il testo tra questi due tag sarà barrato.

Testo in evidenza:

<em>Testo</em>: il testo tra questi due tag sarà messo in evidenza (l'effetto grafico e` come quello del corsivo).

Testo, dimensione:

<big>Testo</big>: il testo tra questi due tag sarà un po' più grande.

<small>Testo</small>: il testo tra questi due tag sarà un po' più piccolo.

<sub>Testo</sub>: il testo tra questi due tag sarà leggermente più in basso. Se scrivete H<sub>2</sub>O, otterrete H2O.

Testo, posizione:

<sup>Testo</sup>: il testo tra questi due tag sarà leggermente più in alto. Se scrivete 10<sup>5</sup>, otterrete 105.

<center>Testo</center>: il testo tra questi tag sara` centrato nella pagina.

<div style="text-indent: 5em">Testo</div>: il testo inserito al posto dei puntini sarà distanziato dal margine sinistro di 5em (o pollici). Il valore 5  può essere variato.

Testo cancellato:

<del>Testo</del>: il testo apparirà cancellato.

Testo giustificato:

<p align="justify">Testo</p>: testo giustificato

Testo, colore, carattere e dimensione:

<font size="X" color="XXXX" face="XXXX">Testo</font>: con questa stringa potete stabilire la dimensione, il colore e il carattere del testo.

La dimensione va da 1 a 7.

Per una dimensione maggiore (in pixel), potete aggiungere un + davanti al valore. Es: +5

Il tag <font> è considerato deprecato. In alternativa, si puo` utilizzare il tag span e indicare la dimensione del font in pixel:

<span style="font-family:times new roman,serif;font-size:20px
;color:blue">testo</span>

Testo, altri parametri:

text-transform: capitalize;  l'iniziale di ogni parola sarà maiuscola

text-transform: uppercase; 
tutto il testo sarà maiuscolo

text-transform: lowercase;
  tutto il testo sarà minuscolo

Testo ombreggiato:

<span style="color:green;text-shadow: 2px 2px 4px #000000;"><b>
<font size="7">
Testo</font></b></span>




In Google sites, questo tag funziona solo se inserito tramite la casella HTML.

Linea di separazione orizzontale:

<hr width="100%" size="1" color="red" align="center">

Link:

<a href="URL collegamento" target="_blank">testo</a>: con questa stringa inserite un link.
(Il tag "target="_blank", serve a far aprire il link in una nuova finestra, se non lo desiderate, potete toglierlo.)

<a href="URLcollegamento" style="text-decoration: none">testo</a>: con questa stringa togliete la sottolineatura ad un link.

Aprire due link contemporaneamente:

Entrambi in nuove schede:

<a href="#" onclick="window.open('URLcollegamento1');
window.open('URLcollegamento2');">Testo</a>

Uno nella stessa scheda e uno in nuova scheda:

<a href="URLcollegamento1" onclick="location.href='URLcollegamento2';"
target="_blank">Testo</a>
   (il primo link si apre in nuova scheda)

Immagine:

<img src="URL immagine">: con questa stringa inserite un'immagine.

<a href="URL collegamento"><img src="URL immagine"></a>: con questa stringa create un'immagine con link.

Cornice:

<div style="width: 40%; border: 2px solid blue; padding: 5px;"><p>Il mio testo</p></div>: con questa stringa mettete una cornice al testo.                                                  

<img style="border: 4px solid red" src="URL immagine">: con questa stringa mettete una cornice ad una immagine
(vedi anche: Come incorniciare testo (e immagini).

Cornice con ombreggiatura:

<div style="width:10%;
box-shadow:5px 5px 3px #a3a0a1;

background-color:#ffffff;
vertical-align:middle;
text-align:center;
border:1px solid black;">
<medium>Testo</medium>
</div>


Testo

Angoli arrotondati:

Al codice precedente aggiungete:

border-radius: 4px;

Padding:

Il padding è lo spazio che separa il contenuto (immagine, div ecc.) dalla zona circostante


Esempio:


Il padding si differenzia secondo la sua posizione: top (in alto), bottom (in basso), left (a sinistra), right (a destra).

I suoi valori vengono impostati in questo modo:

padding: 10px 20px 15px 5px;

equivale a:

padding top 10px
padding right 20px
padding bottom 15px
padding left 5px

Se ci sono solo 3 valori, si interpretano così:

padding: 10px 20px 15px;

equivale a:

padding top 10px
padding right 20px
padding bottom 15px

Se ci sono solo 2 valori, si interpretano così:

padding: 25px 50px;

equivale a:

padding top 10px
padding right 20px

Se c'è un solo valore, tutti i lati avranno il padding, secondo la dimensione indicata:

padding: 20px;

Centrare un'immagine o un testo nella pagina:

<p align="center">URL immagine o testo</p>

Esempio:

immagine o testo


Centrare un'immagine o un testo all'interno di un div:

<div align="center">URL immagine o testo</div>
oppure:
<div style="text-align:center">URL immagine o testo</div>

I due metodi si equivalgono e gli esempi qui sotto valgono per entrambi.

Esempi:

Immagine o testo

Immagine o testo

È evidente che se il div non ha una larghezza impostata e occupa il 100% della pagina (secondo esempio), il suo contenuto risulterà centrato nella pagina stessa.

Centrare un div nella pagina:

<div style="margin:0 auto; width:400px">URL immagine o testo</div>

Esempio:
Immagine o testo

Elenchi:

Elenco numerato:

<ol>
  <li>testo</li>
  <li>testo</li>
  <li>testo</li>
  <li>testo</li>
</ol>

Elenco puntato:

<ul>
  <li>testo</li>
  <li>testo</li>
  <li>testo</li>
  <li>testo</li>
</ul>

Elenco alfabetico:

<ol type="a">
  <li>testo</li>
  <li>testo</li>
  <li>testo</li>
  <li>testo</li>
</ol>

Elenco con sottoelenco:

(Esempio x elenco puntato, ma vale per tutti i tipi di elenco)

<ul>
   <li>testo</li>
   <li>testo
     <ul>
       <li>sotto-testo</li>
     </ul>
   </li>
   <li>testo</li>
   <li>testo</li>
</ul>

Centratura di un elenco:

(Esempio x elenco numerato, ma vale per tutti i tipi di elenco)

<ol style="display:table; margin:0 auto;">

Freccia che riporta a inizio pagina:

<a href="#" class="scroll-top back-to-top">&uarr;</a>

Conversione pixel - > em e viceversa:

Per convertire i pixel in em basta fare una semplice operazione....

pixel : 16 = em

al contrario....

E per divertirci un po'....ecco le "entity":

Sapete cosa sono le "Entity"? Sono quei piccoli disegni che siamo abituati a vedere e usare nei servizi di messaggistica e che non sono delle immagini, come si potrebbe credere, ma dei caratteri di testo speciali. Possono essere inseriti tramite il loro codice. Si comportano come qualunque altro carattere di testo e potete, quindi, ridimensionarli e colorarli diversamente.
Ve ne propongo alcuni, ma ce ne sono centinaia....


 💄       &#128132;  ❌  &#x274C;
 🌸     &#x1F338;  &#x2665;
 🌺       &#x1F33A;  💔  &#x1F494;
 🌷  &#x1F337;  💝  &#x1F49D;
 💌  &#x1F48C;    &#x266B;
 💘  &#x1F498;    &#x260E;
 💚  &#x1F49A;    &#x270E;
 ⛔  &#x26D4;    &#x2702;
 ⛵  &#x26F5;    &#x2601;
 ✅  &#x2705;    &#x2600;
 🌙  &#x1F319;    &#x2602;
 😊  &#x1F60A;  😜  &#x1F61C;
 😍  &#x1F60D;  😪  &#x1F62A;
 😖  &#x1F616;  😱  &#x1F631;
 😋  &#x1F60B;  🐥  &#x1F425;
 😡  &#x1F621;  🐳  &#x1F433;
 😘  &#x1F618;  🐢  &#x1F422;
 🍀  &#x1F340;  🐮  &#x1F42E;





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

Ti e` stato utile questo argomento?