Un sito da zero

Scrivere in HTML

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

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.

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>

Linea di separazione orizzontale:

<hr>: linea semplice, nera.

Per personalizzarla:
<hr style="height: 10px; border: 1px solid red; background-color: red">

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.


Centrare il contenuto nel suo contenitore:

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

Esempio:

Elemento

Elemento

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


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>

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:

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

alias

all-scroll

auto

cell

context-menu

col-resize

copy

crosshair

default

e-resize

ew-resize

grab

grabbing

help

move

n-resize

ne-resize

nesw-resize

ns-resize

nw-resize

nwse-resize

no-drop

none

not-allowed

pointer

progress

row-resize

s-resize

se-resize

sw-resize

text

url

w-resize

wait

zoom-in

zoom-out

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


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 lo è stato, puoi inviarmi le tue osservazioni. Grazie 
Elenco argomenti di questa guida:
Altro di interesse

Leggi anche: Un sito già pronto per te

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