Questa pagina è parte della guida Come creare un sito da zero

Questo 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. PREMESSA: eventuali regole di stile, presenti negli esempi, vengono indicate "inline", ma è sottointeso che possano essere inserire in un file css esterno con le corrette modalità (vedi: Il foglio di stile).

Potete testare i vari tag utilizzando l'HTML editor.

I titoli

<h1>Titolo</h1>
<h2>Titolo</h2>
<h3>Titolo</h3>
<h4>Titolo</h4>
<h5>Titolo</h5>
<h6>Titolo</h6>

I tag h1 h2 h3 h4 h5 h6 servono a creare una gerarchia di titoli principali e secondari. La gerarchia va rispettata, nel senso che in ogni pagina ci deve un solo titolo h1 seguito da uno o più titoli h2, seguiti a loro volta da titoli h3 e via di seguito.
NOTA: Il titolo h1 deve sempre essere presente in ogni pagina.

Il tag title (tooltip)

<h2 title="titolo">Titolo</h2> fa apparire un tooltip al passaggio del mouse. Può essere applicato a qualunque contenitore.

Lettere accentate

&ograve; = accento grave
&oacute; = accento acuto
L'esempio dato è con la lettera o.

Andare a capo

<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.

Tag <pre>

<pre>Testo</pre>: il testo all'interno di questo tag conserva sia gli spazi che le interruzioni di riga, esattamente come viene scritto.
Non servirà, quindi, aggiungere br per andare a capo. Crea una riga vuota prima e dopo.
Lo stesso risultato si può ottenere applicando una regola css al contenitore. Esempio: <div style="white-space: pre">

Distanziare in orizzontale

&nbsp; : scritto così, con il punto e virgola finale, serve a distanziare gli elementi in orizzontale, testo o altro.

Testo in 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.

Testo sottolineato

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

Testo 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.

Testo verticale

<p style="writing-mode: vertical-lr">Testo</p> : il testo di questo paragrafo sarà verticale e da sinistra a destra

<p style="writing-mode: vertical-rl">Testo</p> : il testo di questo paragrafo sarà verticare e da destra a sinistra

Esempio:

uno
due

uno
due

La regola può essere applicata a qualsiasi contenitore.

Testo verticale upright

<p style="writing-mode: vertical-rl; text-orientation: upright;">Testo</p>

Esempio:

uno
due

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. Usato per correggere una parte di testo (in genere seguito dalla correzione).
testo testo aggiornato

Oppure:

<del>Testo</del>: il testo tra questi due tag sarà barrato. Usato per cancellare definitivamente una parte testo.
Testo cancellato

Testo evidenziato

<mark>Testo</mark>: il testo tra questi due tag sarà evidenziato in giallo.
Testo
Possibile cambiare colore di fondo e altro aggiungendo regole di stile.

Testo apice

^Testo: il testo tra questi due tag sarà leggermente più in alto. Se scrivete 10⁵, otterrete 10⁵.

Testo pedice

_Testo: il testo tra questi due tag sarà leggermente più in basso. Se scrivete H₂O, otterrete H₂O.

Testo in tendina

<details><summary>Colori</summary>rosso<br>blu</details>: questi doppi tag creano una tendina.
Esempio:

Colori

rosso
blu

NOTA: per avere la tendina aperta al caricamento, bisogna aggiungere l'attributo open a details.
Esempio: <details open>
In alternativa, è possibile utilizzare javascript. Vai alla guida: Soluzioni javascript.

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 giustificato

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

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 (valori negativi restringono lo spazio)

Testo ombreggiato

<span style="text-shadow: 2px 2px 4px #000">
Testo</span>

Progress tag

<progress value="32" max="100"></progress>: questo tag crea una progress bar.
Esempio:

Linee di separazione

Linea orizzontale:

<hr>: linea semplice, nera.

Possibili parametri per la personalizzazione:

---

La linea orizzontale semplici, si inserisce con il tag <hr>, ma vediamo come è possibile personalizzarla.
Il codice per inserire una linea orizzontale personalizzata, in maniera tale che funzioni su tutti i browser, è questo:


Se volete che la linea stia a destra, dovete sostituire la stringa con questa: "margin-right:0px; text-align:right". Se volete che la linea stia al centro, o se la lunghezza della linea e` al 100%, cancellate tutta la stringa.
Se la larghezza (width) è sul 100%, la linea occuperà tutta la larghezza della pagina. Per ridurla, potete cambiare la percentuale.

Linea verticale:

Il codice per inserire una linea verticale è questo:

Se volete che la linea stia a sinistra del testo, sostituite "right" con "left"

Due o più linee verticali parallele

Codice:


Per aggiungere altre linee parallele, dovete ripetere la stringa:

I 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.

Link a pdf

<a href="https://www.nomesito.com/cartella/titolo.pdf" target="_blank">Titolo</a>: con questa stringa fate aprire l'anteprima di un pdf.
<a href="https://www.nomesito.com/cartella/titolo.pdf#page=4" target="_blank">Titolo</a>: con questa stringa fate aprire l'anteprima di un pdf alla pagina 4.

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.

Centrare un'immagine nella pagina

Primo metodo:

Secondo metodo:

Centrare il contenuto nel suo contenitore

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

Esempio:



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

Centrare un contenitore con larghezza definita e il suo contenuto

<div style="max-width:500px; width:100%; text-align:center; margin:0 auto; >"Contenuto del div</div>

Elenchi

Elenco puntato

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

Tipi:

type="disc" disco solido (default)
type="circle" cerchietto
type="square" quadrato

es: <ul type="circle">

Elenchi puntati ordinati

Numerato:

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

Alfabetico:

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

Alfabetico maiuscolo:

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

Numeri romani:

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

Attributo start

L'attributo start, negli elenchi ordinati, serve ad indicare al browser da quale numero, o lettera, deve partire l'elenco.
es: <ol start="3">
Se usate le lettere (es: type="a"), dovete indicare il numero corrispondente alla lettera dell'alfabeto. Per esempio, se volete iniziare l'elenco dalla lettere "f", che è la sesta dell'alfabeto, dovrete scrivere:
<ol type="a" start="6">

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>Descrizione2</dd>
</dl>

Titoli in un elenco

Si possono inserire titoli (h2, h3, h4 ..) in un elenco, ma su alcuni dispositivi mobili potrebbero apparire sfalsati in questo modo:

•
   Title
•
   Title

Per risolvere il problema, basta applicare la regola "display:inline" ai tag dei titoli.

Stile del cursore

Passando il cursore del mouse su un elemento di una pagina web, si può visualizzare un simbolo, piuttosto che un altro, a seconda del tipo di cursore che è stato impostato.
Questi i tipi di cursore a disposizione di default:

(passa il mouse sul nome per vedere il cursore in azione)

Esempio di implementazione:
<div style="cursor: grab"></div>

Esempio con immagine cursore personalizzata:
<div style="cursor:url(https://img.icons8.com/bubbles/50/000000/cursor.png), auto;">

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 un ricco schema qui: https://dev.w3.org/html5/html-author/charref

Nella sezione "Strumenti per i webmaster" puoi trovare moltissime soluzioni e risorse da scaricare.

Torna alla pagina principale:Creare un sito da zero ->>