Aiuto:HTML

Il software MediaWiki permette di utilizzare un subset di tag HTML 5 con i relativi attributi per la formattazione delle pagine. Per molti di questi esistono d'altra parte degli equivalenti nel linguaggio Wiki oppure possono essere sostituiti da appostiti template. Generalmente, all'interno delle pagine vengono preferiti questi ultimi due, anche se l'HTML è molto utile quando per la formattazione non esistono template.

Tutorial

Questa pagina d'aiuto fornisce solo qualche informazione generale sul markup. Per approfondire si veda

(IT) Guida HTML5 sul sito HTML.it
(EN) HTML5 Introduction sul sito w3schools.com

Regole generali

HTML è l'acronimo di HyperText Markup Language, cioè "linguaggio di marcatura per ipertesti". Si tratta, in poche parole, del linguaggio che viene utilizzato per realizzare le pagine Web (che sono appunto ipertesti).

L'HTML è un linguaggio di pubblico dominio e la sua sintassi è stabilita dal World Wide Web Consortium (W3C). Da ottobre 2014 il W3C raccomanda l'uso delle specifiche per l'HTML5.^[1]

Ma a che cosa serve l'HTML? È un linguaggio di formattazione che descrive le modalità di impaginazione o visualizzazione grafica (layout) del contenuto, testuale e non, di una pagina web attraverso tag di formattazione. Tuttavia, l'HTML supporta anche l'inserimento di script e oggetti esterni quali immagini o filmati. È importante però fare da subito una precisazione: HTML è stato concepito per definire il contenuto logico e non l'aspetto finale del documento. I dispositivi che possono accedere a un documento HTML sono molteplici e non sempre dotati di potenti capacità grafiche. Proprio per questo gli sviluppatori di HTML hanno optato per un linguaggio che descrivesse dal punto di vista logico, piuttosto che grafico, il contenuto dei documenti.

Cosa significa tutto ciò? Semplicemente che i marcatori HTML servono per fornire informazioni sulla struttura di una pagina, precisando dove inizia e dove finisce un paragrafo, quali parti del testo sono titoli e qual è la loro gerarchia, qual è l'intestazione della pagina e via dicendo. Per l'impaginazione e la grafica si usano invece i CSS (acronimo di Cascading Style Sheets, in italiano "fogli di stile a cascata").

Il componente principale della sintassi di questo linguaggio è l'elemento, inteso come struttura di base a cui è delegata la funzione indicare al browser delle informazioni.

All'interno di una pagina, l'HTML gestisce gli elementi attraverso i tag (in italiano "etichette"), i quali specificano un diverso ruolo dei contenuti che esso contrassegna (quindi il tag <h1> definirà un'importanza maggiore del tag <p>).

Ogni tag è costituito da una sequenza di caratteri racchiusa tra due parentesi angolari o uncinate (<>), cioè i segni minore e maggiore. Quando il tag deve essere applicato a una sezione di testo o di codice, l'ambito di applicazione deve essere delimitato fra un tag di apertura e uno di chiusura (chiusura esplicita), che coincide col tag di apertura preceduto da una barra (/) dopo la parentesi angolare aperta. Ecco un esempio:

<p>Questo è un paragrafo</p>

Alcuni tag presentano un'applicazione puntuale, come per esempio il tag <img> che serve per inserire un'immagine in un determinato punto della pagina, e in quanto tali non richiedono il tag di chiusura; in questo caso si parla di tag a chiusura implicita.

Attributi

Gli attributi HTML forniscono informazioni aggiuntive su un elemento e sono sempre specificate nel tag di apertura. La loro sintassi richiede una coppia nome/valore, del tipo nomeattributo="valore".

Di seguito elenchiamo gli attributi globali applicabili a tutti i tag. Quelli non presenti nella lista non sono riconosciuti da MediaWiki:

class: la/e classe/i a cui l'elemento appartiene.
dir: direzione del testo. Accetta i valori ltr (left-to-right, da sinistra a destra), rtl (right-to-left, da destra a sinistra) oppure auto.
id: identifica univocamente l'elemento.
lang: lingua principale dei contenuti della pagina secondo il BCP 47. Il software MediaWiki aggiunge automaticamente l'attributo xml:lang ogni volta che viene definito lang.
style: applica stili CSS al contenuto di un elemento.
title: informazione aggiuntiva associata all'elemento.

Attributi dei microdati di HTML 5 che Wikiversitàsi applicano a tutti i tag:

Qualsiasi attributo che inizi con data-
itemid
itemprop
itemref
itemscope
itemtype

MediaWiki è in grado di ovviare ad alcuni errori. È però preferibile assicurarsi di usare correttamente la sintassi.

Elementi base

Nei prossimi paragrafi sarà fornita una breve panoramica degli elementi HTML e dei loro corrispettivi in linguaggio Wiki. Si ricorda che, quando si scrive una pagina, è sempre preferibile utilizzare il markup Wiki.

Titoli

HTML	Wiki	Descrizione e stile
<h1>Titolo</h1>	=Titolo=	Titolo di primo livello. N.B.: è il tag associato al titolo della pagina e viene inserito automaticamente. Non inseririlo mai manualmente in una pagina Stile CSS color: #000000; background: none; overflow: hidden; page-break-after: avoid; font-size: 1.8em; font-family: Georgia,Times,serif; margin-top: 1em; margin-bottom: 0.25em; line-height: 1.3; padding: 0; border-bottom: 1px solid #AAAAAA;
<h2>Titolo</h2>	==Titolo==	Titolo di secondo livello. Stile CSS color: #000000; background: none; overflow: hidden; page-break-after: avoid; font-size: 1.5em; font-family: Georgia,Times,serif; margin-top: 1em; margin-bottom: 0.25em; line-height: 1.3; padding: 0; border-bottom: 1px solid #AAAAAA;
<h3>Titolo</h3>	===Titolo===	Titolo di terzo livello. Stile CSS color: #000000; background: none; overflow: hidden; page-break-after: avoid; font-size: 1.17em; font-weight: bold; margin-top: 0.3em; margin-bottom: 0; line-height: 1.6; padding-top: 0.5em; padding-bottom: 0;
<h4>Titolo</h4>	====Titolo====	Titolo di quarto livello. Stile CSS color: #000000; background: none; overflow: hidden; page-break-after: avoid; font-size: 100%; font-weight: bold; margin-top: 0.3em; margin-bottom: 0; line-height: 1.6; padding-top: 0.5em; padding-bottom: 0;
<h5>Titolo</h5>	=====Titolo=====	Titolo di quinto livello. Stile CSS color: #000000; background: none; overflow: hidden; page-break-after: avoid; font-size: 100%; font-weight: bold; margin-top: 0.3em; margin-bottom: 0; line-height: 1.6;
<h6>Titolo</h6>	======Titolo======	Titolo di sesto livello. Stile CSS color: #000000; background: none; overflow: hidden; page-break-after: avoid; font-size: 100%; font-weight: bold; margin-top: 0.3em; margin-bottom: 0; line-height: 1.6; padding-top: 0.5em; padding-bottom: 0;

Paragrafi, interruzioni di riga, linee, commenti

HTML	Wiki	Descrizione e stile
<p>Testo del primo paragrafo</p> <p>Testo del secondo paragrafo</p>	`Testo del primo paragrafo` `Testo del secondo paragrafo`	Il tag <p> è utilizzato per markare l'inizio e la fine di ciascun paragrafo. Nel markup wiki, invece, basta lasciare una riga bianca tra due paragrafi per segnalare la fine di uno e l'inizio del successivo
<br> oppure <br/>		Interruzione di riga: forza il testo ad andare a capo, senza però chiudere il paragrafo. Entrambe le forme sono supportate dall'HTML 5 e riconosciute da MediaWiki.
<br clear="all">	{{Clear}}	Il codice fa in modo che gli oggetti che lo seguono nella pagina scorrano verso il basso fino ad occupare l'intera larghezza della pagina. Su Wikiversità viene sostituito dal Template:Clear, che ha la stessa funzione.
<hr>		Traccia un linea lunga tutto lo schermo.
<!-- Testo del commento -->		Il testo inserito tra i due marcatori non sarà visualizzato sullo schermo, ma potrà essere utile a un utente che in futuro vorrà modificare il testo della pagina.

Formattazione

HTML	Wiki	Descrizione e stile
<abbr title="HyperText Markup Language">HTML</abbr> Risultato: HTML		Con abbreviazioni e acronimi, `abbr` crea un pop up che compare al passaggio del mouse, con il testo della definizione.
<b>Testo in grassetto</b>	'''Testo in grassetto'''	Visualizza una parola o una parte di frase in grassetto.
<bdi>testo</bdi>		Il tag `bdi` cambia la direzione di una parte del testo. اليمين إلى اليسار<bdi>left to right</bdi> Risultato: اليمين إلى اليسارleft to right N.B.: è supportato da Firefox e Chrome.
<bdo>testo</bdo>		Specifica la direzione del testo. Accetta l'attributo `dir`, che prevede due valori: `ltr` (da sinistra a destra) e `rtl` (da sinistra a destra). Per esempio: <bdo dir="rtl">HyperText Markup Language</bdo> HyperText Markup Language
<blockquote> ... </blockquote>	{{Quote}}	`blockquote`, al cui interno possono essere annidati uno o più tag `p`, marca una citazione nel testo. Su Wikiversità è sostituito dal Template:Quote.
<cite></cite>		Contiene il titolo di un'opera, e di default viene visualizzato in corsivo. Questa è una nuova definizione introdotta in HTML 5: in precedenza era usato per citazioni o riferimenti.
<code></code>		Formatta le parti di testo che contengono codice di linguaggio di programmazione. MediaWiki applica uno stile css che lo visualizza con un carattere monospaziato.
<data></data>		Realizza una versione dei contenuti leggibile da una macchina.
<del></del>		Testo cancellato: le parole vengono battate.
<dfn></dfn>		Indica una definizione.
<em>testo</em>		Conferisce enfasi a una parte del testo (viene visualizzato in corsivo).
<i>testo</i>	''testo''	Testo in corsivo.
<ins>testo</ins>		Indica una parte di testo che è stata aggiunta. Può essere usata nelle pagine di discussione per proporre l'inserimento di nuove parti.
<kbd></kbd>		Indica un input da parte dell'utente. Per esempio: `Premere <kbd>Invio</kbd>` Premere `Invio`
<mark>testo</mark>		Segnala una parte di testo evidenziata. Di default il testo viene evidenziato in giallo, ma è possibile cambiare colore. Per esempio: <mark style="background:lightblue">HyperText Markup Language</mark> HyperText Markup Language
<pre>testo</pre>		Mostra un blocco preformattato di testo. MediaWiki lo considera come una funzione parser e non come tag HTML, ma il risultato è lo stesso.
<q>testo</q>		Segnala una breve citazione.
<ruby>testo</ruby>		Viene utilizzato per le annoazioni ruby, in uso nella tipografia orientale.
<samp>testo</samp>		Segnala l'output di un programma
<small>testo</small>		Mostra il testo con un corpo minore.
<strong>testo</strong>		Conferisce forte enfasi al testo. I browser lo visualizzano in grassetto.
<sub>testo</sub>		Testo come pedice.
<sup></sup>		Testo come apice.
<time>10.00</time>		Segnala un orario.
<u></u>		Testo sottolineato.
<var></var>		Formatta il testo in corsivo per segnalare una variabile all'interno del codice in linguaggio di programmazione.
<wbr>		Posto tra due parole, impedisce che vengano separate da un'interruzione di linea.

Liste ed elenchi

Per approfondire questo argomento, consulta la pagina Aiuto:Liste.

HTML	Wiki	Descrizione
<dl> <dt>Termine</dt> <dd>Definizione</dd> </dl>	;Termine :Definizione	Termine e sua/e definizione/i. Il termine da definire verrà visualizzato in grassetto, la definizione in tondo con un rientro a sinistra.
<ol> <li>Elemento 1</li> <li>Elemento 2</li> </ol>	#Elemento 1 #Elemento 2	Elenco ordinato di elementi: di fianco a ciascuno comparirà un numero.
<ul> <li>Elemento 1</li> <li>Elemento 2</li> </ul>	Elemento 1 Elemento 2	Elenco non ordinato di elementi: di fianco a ciascuno comparirà un pallino.

Contenitori

MediWiki riconosce anche alcuni elementi contenitore, a cui si può ricorrere per motivi legati alla grafica e all'impaginazione.

HTML	Descrizione
`div`	Contenitore generico, mostra i contenuto come un blocco.
`span`	Contenitore per elementi inline.

Tabelle

Per approfondire questo argomento, consulta la pagina Aiuto:Tabelle.

Elementi obsoleti

Il seguenti elementi sono ora obsoleti nell'HTML 5, anche se vengono comunque supportati dai browser.^[2] In ogni caso, ciascuno di questi tag ne ha uno alternativo oppure può essere sostituito con la corrispettiva funzione css.

HTML	Descrizione
`big`	Visualizza il testo con delle dimensioni maggiori. È preferibile sostituirlo con gli stili CSS.
`center`	È usato per centrare gli elementi. È preferibile sostituirlo con gli stili CSS.
`font`	Specifica le dimensioni del font, il tipo oppure il colore. Se necessario, sostituirlo con stili di CSS, precisandoli all'interno di un tag `span`.
`strike`	Usato per barrare testo. È preferibile utilizzare <s></s>
`tt`	Visualizza il testo con un carattere monospaziato. Se è necessario inserire del codice in linguaggio di programmazione (per esempio in un libro di informatica) è meglio utilizzare <code></code>

Elementi non supportati

I seguenti elementi non sono supportati, ma hanno un equivalente nel linguaggio wiki.

HTML	Wiki	Descrizione
`a`	[[link]]	In HTML serve per i link. Su Wikiversità deve essere sostituito dalle doppie parentesi quadre (vedi Aiuto:Wikilink).
`input`	`inputbox`	Usato per realizzare form. Su MediaWiki viene sostituito da Inputbox (vedi Aiuto:Inputbox).

Funzioni parser

Per approfondire questo argomento, consulta la pagina Aiuto:Funzioni parser.

Note

Pagine correlate

[1] A vocabulary and associated APIs for HTML and XHTML HTML5 A vocabulary and associated APIs for HTML and XHTML

[w3c_obsolete-2] HTML5: A vocabulary and associated APIs for HTML and XHTML: Obsolete Features

[1]

[2]