Come scrivere in html

L'argomento sarebbe troppo vasto per essere racchiuso in una pagina, ma qui riporterò i tag più comunemente utilizzati per scrivere correttamente in html e l'elenco verrà costantemente aggiornato ed arricchito.
Sommario:

Potete testare i vari tag utilizzando l'HTML editor.

A capo e distanziare:

<br>: serve per andare a capo. Se scrivete ciao<br>ciao, la seconda parola andrà una riga sotto. Ripetendo il tag, la distanza aumenterà. Il tag non ha chiusura.

<p>Testo</p>: il testo tra questi tag rappresenta un paragrafo ed è distanziato di uno spazio dal testo precedente e dal successivo.

&nbsp; : scritto così, 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, vale a dire leggermente obliquo.

<em>Testo</em>: anche in questo caso il testo sarà in corsivo, ma in più avrà acquistato enfasi.

<dfn>Termine</dfn>: anche in questo caso il testo sarà in corsivo, ma il fine è quello di indicare una definizione (e non una frase), a cui può seguire la descrizione. Esempio: HTML è un linguaggio di markup

<cite>Titolo</cite>: anche in questo caso il testo sarà in corsivo, ma il tag si usa per indicare il titolo di un'opera, o di un lavoro, a cui può seguire la descrizione; oppure, posto dopo un testo, per indicare un link di riferimento . Esempio: La Gioconda opera di Leonardo da Vinci; oppure: La Gioconda di Leonardo da Vinci.

Citazione:

<blockquote>Testo</blockquote>: il testo tra questi due tag è una citazione e appare con un'indentazione (rientro) maggiore del resto del testo. All'interno del blockquote può essere posto il tag <cite> per completamento.

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 apice:

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

Testo pedice:

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

Testo rientrato:

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

Testo cancellato:

<del>Testo</del>: il testo apparirà cancellato con un tratto sopra di esso.
Testo cancellato

Testo giustificato:

<p align="justify">Testo</p>: l'utilizzo del testo giustificato non è consigliato nel layout responsive se non per brevi paragrafi.

Testo, colore, carattere e dimensione:

<span style="font-family:times new roman,serif;font-size:1.2em;color:blue">Testo</span>: con questa stringa potete stabilire il carattere, la dimensione e il colore del testo.
Nel layout responsive è consigliato l'uso degli em piuttosto che dei pixel.

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

letter-spacing: 2px; le lettere delle parole saranno distanziate secondo il valore in pixel impostato

Testo ombreggiato:

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

Testo

Linea di separazione orizzontale:

<hr>: linea semplice, nera.

Per personalizzarla:
<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" alt="" title="">: con questa stringa inserite un'immagine.

<a href="URL collegamento"><img src="URL immagine" alt="" title=""></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

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;

Margin e padding:

Il margin è lo spazio che separa il contenitore (per es. un div) dalla zona circostante.

Il padding è lo spazio che separa il contenuto dal margine del contenitore. Frequentemente usato, per esempio, per distanziare un contenuto testuale.

Esempio:
margin e padding
Per il margin e per il padding le regole di sintassi sono le stesse, quindi mi riferirò solo al padding, ma con questa premessa.

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:

-Se ci sono tutti e 4 i valori, si interpretano così:

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 e left 20px
padding bottom 15px

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

padding: 25px 50px;
equivale a:

padding top e bottom 25px
padding right e left 50px

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

padding: 20px;

Centrare un elemento nella pagina:

<p style="text-align:center">Elemento</p>

Centrare un elemento all'interno di un div:

<div style="width:40%; text-align:center;">Elemento</div>
oppure:

<div style="text-align:center">Elemento</div>

Esempi:

Elemento
oppure:
Elemento

È 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="width:40%; text-align:center; margin:0 auto; >Contenuto del div</div>


Contenuto del div


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 alfabetico maiuscolo:

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

Elenco con numeri romani:

<ol type="I">
  <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;">

Elenco senza indicatori

Se volete un elenco senza puntini, o altro, dovete inserire questo comando:
<ul style="list-style: none;">

Elenco di titoli con descrizione

<dl>
  <dt><h3>Titolo1</h3></dt>
  <dd>Descrizione1</dd>
  <dt><h3>Titolo2</h3></dt>
  <dd>Descrizione</dd>
</dl>

Punteggiatura, accenti ecc..

Tutti i simboli ortografici hanno il loro codice nominale e/o numerico (unicode), ma i segni di punteggiatura più comuni si possono scrivere così come sono (. , ; : ? !).
È meglio, invece, inserire tramite codice altri elementi per assicurarne la corretta interpretazione da parte di tutti i browser. L'implementazione del metatag <meta charset="utf-8" />, non garantisce la totale risoluzione del problema. La cosa risolutiva, quindi, è utilizzare i codici appositi. Ci sono editor per il linguaggio HTML che rendono ciò estremamente semplice. Esempio: https://www.froala.com/online-html-editor, che può essere utilizzato online, oppure scaricato.

Ecco alcuni dei simboli più comuni....

L'apostrofo: &apos; (apostrofo). Esempio: l'uomo si scriverà l&apos;uomo oppure l&#39;uomo

L'accento, che può essere acuto o grave. Facciamo un esempio con accento grave sulla lettera e:

&egrave; verrà interpretato come è

Le virgolette si scrivono: &quot; Esempio: &quot;ciao&quot; verrà interpretato così: "ciao"

....e molti altri.

Potete vedere uno schema completo qui: https://dev.w3.org/html5/html-author/charref







Fammi sapere se questo argomento ti è stato utile.
Se non ti è stato utile, potrai inviare le tue osservazioni. Grazie
Ti è stato utile questo argomento?
Si
No



Continua con....La pagina perfetta ->>

Elenco argomenti della guida:
Torna alla pagina principale:Creare un sito da zero ->>


E molto altro ancora se leggi:
Tutti gli argomenti