Tratto da Wikipedia (Tag HTML)
In informatica, un elemento HTML, spesso chiamato anche tag HTML, indica una struttura in un documento HTML e un metodo per ordinare gerarchicamente i contenuti. Più specificatamente, è un elemento SGML che soddisfa i requisiti di uno o più DTD HTML.
Gli elementi HTML consistono generalmente di quattro parti: un tag di apertura, che definisce l'inizio di un elemento, gli attributi di tale elemento e i loro valori, il contenuto e un tag di chiusura. Il tag di chiusura è opzionale per molti elementi; in pochissimi casi un "elemento vuoto" non ha contenuti o tag di chiusura. Gli elementi XHTML vanno sempre chiusi.
Gli elementi vuoti vengono chiusi aggiungendo una "/", come nei tag di chiusura. Per questioni di retrocompatibilità è cosigliato mettere uno spazio prima della barra.[1]
Gli elementi possono rappresentare intestazioni, paragrafi, collegamenti ipertestuali, elenchi, oggetti multimediali incorporati e diverse altre strutture.
Alcuni elementi, sebbene non siano contenuti in nessun DTD ufficiale, sono supportati da alcuni browser e utilizzati da pagine web. Tali elementi possono essere ignorati o visualizzati impropriamente da browser che non li supportano.
[] Nidificare gli elementi
Molti elementi HTML possono essere "nidificati". La nidificazione è più facilmente comprensibile attraverso esempi:
<p>You <em>rock</em></p>
ha un elemento <em>dentro un elemento <p>. La situazione può complicarsi, per esempio
<h1>Children that <em>do <span style="color:red">not</span> clean up</em> their rooms</h1>
Si possono nidificare gli elementi fin quando si vuole ma i tag devono essere chiusi nell'ordine inverso nel quale sono stati aperti.
- Sbagliato
<p>Lucy kissed <em>Jimmy</p></em>- Corretto
<p>Lucy kissed <em>Jimmy</em></p>
La possibilità di nidificare è regolamentata da alcune regole che definiscono se un elemento è un block-level o inline.
[] Elementi block-level ed elementi inline
Un elemento block-level inizia di solito su una nuova riga mentre un elemento inline di solito no. Un elemento block-level può contenere altri elementi sia di tipo block-level sia di tipo inline mentre un elemento inline può contenere solo altri elementi di tipo inline. Esempi di elementi block-level sono paragrafi, elenchi, tabelle, intestazioni e il contenitore generale <div>.
[] Elementi della struttura del documento
<html>...</html>- Delimita un documento HTML (invece di un documento XML o altro). I tag sono opzionali in HTML ma alcuni browser e altre utility possono non riconoscere il documento senza di essi.
<head>...</head>- Delimita la sezione header (d'intestazione) del documento che contiene informazioni sulla pagina. I tag sono opzionali in HTML; se omessi l'esistenza dell'header può essere dedotto in altri modi.
<body>...</body>- Delimita il corpo del documento che contiene i contenuti visualizzati nella pagina. Come
<html> e <head> i tag non sono necessari se il documento è in HTML.
[] Elementi d'intestazione in HTML 4.01
<title>...</title>- Indica il titolo della pagina. Questo elemento è richiesto in ogni documento HTML e XHTML. Differenti user agent e Sistema operativo visualizzano il titolo in maniera differente. I browser web di solito lo visualizzano nella barra del titolo quando la finestra è aperta e nella barra applicazioni quando è minimizzato. Può essere il nome predefinito quando si salva la pagina o altro. Al contrario degli altri tag, l'elemento title non permette di contenere altri tag. I browser visualizzeranno i tag inclusi come sono. Per esempio
<title>My <b>first</b> webpage</title> verrebbe visualizzato come "My <b>first</b> webpage", e non come "My first webpage".
<meta>...</meta>- Delimita i metadata e può essere utilizzato per specificare la descrizione della pagina, parole chiave e una forma particolare
<meta http-equiv="foo"> è utilizzata per specificare comandi che devono essere spediti come header HTTP.
<link><link /> (in XHTML)- Specifica qualsiasi tipo di link per un documento come collegamenti precedenti e successivi o versioni alternative. È uso più comune collegare un Foglio di stile esterno alla pagina, nel modo seguente:
<link rel="stylesheet" type="text/css" href="url ">
<base><base/> (in XHTML)- Specifica i valori base per i collegamenti, come la destinazione o il target.
<script>...</script>- Utilizzato per includere JavaScript o altri script nel documento.
<style>...</style>- Specifica un foglio di stile per il documento, solitamente:
-
<style type="text/css">...</style>
- con dati sullo stile o riferimenti come
-
/*<![CDATA[*/ @import "url "; @import "url "; /*]]>*/
[] Elementi body definiti in HTML 4.01
Tutti i tag body non sono elementi block-level e non possono essere contenuti all'interno di un elemento inline.
[] Intestazioni
- da
<h1></h1> a <h6></h6>
- Intestazioni a diversi livelli. Si utilizza
<h1> per il livello massimo di intestazione (la sezione principale), <h2> per il successivo livello sottostante (sottosezione), <h3> per un livello al di sotto del precedente e così via. Il livello più basso d'intestazione è <h6>.
- La maggior parte dei browser web mostreranno
<h1> come un testo grande con un font differente e <h6> come testo piccolo in grassetto ma questo comportamento può essere modificato con i fogli di stile CSS. Gli elementi d'intestazione non sono utilizzabili solamente per creare testo grande o in grassetto: descrivono anche la struttura del documento e l'organizzazione. Alcuni programmi li utilizzano per generare indici e outline.
[] Testo strutturato
Molti elementi HTML sono realizzati per cambiare la struttura o il significato del testo. Alcuni sono block-level ma la maggior parte sono inline e possono essere inclusi nel normale flusso del testo.
[] Block-level
<p>...</p>- Crea un paragrafo. In HTML il tag di chiusura non è opzionale.
<blockquote>...</blockquote>- Crea una citazione, convenzionalmente visualizzata indentata ma non realizzata per indentare il testo. Può automaticamente aggiungere delle virgolette. L'attributo
cite può fornire la fonte e deve essere una URL completa.
<pre>...</pre>- Crea testo pre.formattato. Il testo è visualizzato con un font non proporzionato esattamente come è stato scritto nel file (vedi ASCII art). Con CSS:
{white-space: pre}
<address>...</address>- Usato per delimitare informazioni sull'indirizzo.
[] Inline
<em>...</em><strong>...</strong>- Enfasi (convenzionalmente visualizzato in corsivo) e enfasi forte (convenzionalmente visualizzato in grassetto).
<q>...</q>- Una breve citazione. Può essere visualizzata con virgolette. Le citazioni possono essere nidificate. L'attributo
cite Può fornire la fonte deve essere una URL completa.
<code>...</code>- Un pezzo di codice. Convenzionalmente visualizzato con un font monospazio
Esempio di codice.
<del>...</del>- Testo cancellato. Visualizzato barrato:
Deleted text.
<ins>...</ins>- Testo inserito. Spesso utilizzato per identificare il testo che sostituisce il testo
<del>. Visualizzato sottolineato: Testo inserito.
<cite>...</cite>- Citazione. Riferimento ad una citazione di una fonte od elemento all'interno del testo. CITE è stato accettato all'interno dell' HTML 2.0[2].
<dfn>...</dfn><samp>...</samp><kbd>...</kbd><var>...</var>- Definizione, testo d'esempio, input da tastiera, variabile. Sono simili a
<code>, ma possono avere un significato più specifico.
<sub>...</sub><sup>...</sup>- Crea un testo Pedice o un Apice. Equivalente CSS:
{vertical-align: sub} or {vertical-align: super}
[] Elenchi
<dl>...</dl>- Crea un elenco di definizioni (formato da termini con la rispettiva definizione).
<dt>...</dt>- Crea un termine di definizione.
<dd>...</dd>- Crea una definizione.
<ol>...</ol><ul>...</ul>- Crea un elenco ordinato (numerato) o non ordinato (puntato). Con
ol, l'attributo type può essere specificato il tipo di ordinamento, ma CSS dà più controllo: {list-style-type: foo}. La numerazione predefinita è quella araba. Per ul, CSS può essere utilizzato per definire il marcatore dell'elenco: {list-style-type: foo}. Il marcatore predefinito è un punto annerito
<li>...</li>- Crea un oggetto dell'elenco in liste ordinate o meno
<dir>...</dir> (deprecato)- Delimita l'elenco di una cartella. In disuso in favore di
<ul>.
<menu>...</menu> (deprecato)- Crea un elenco di menu. Dovrebbe essere più sintetico di un elenco
<ul>, ma non è ben supportato. In disuso in favore di <ul>.
[] Come creare un elenco in HTML
Per creare un elenco in html si usa il tag OL,che va aperto e chiuso. Ogni voce dell'elenco deve essere racchiusa tra l'attributo LI.
Esempio
| Codice HTML |
<ol>
<li>Giovanni </li>
<li>Luca </li>
<li>Marco </li>
<li>Giacomo </li>
</ol>
|
- Giovanni
- Luca
- Marco
- Giacomo
|
Di default il computer crea un elenco numerato.Per creare un elenco con simboli diversi si usa l'attributo type che va inserito nel tag OL.Si possono ottenere elenchi i cui punti sono rappresentati da cerchi,lettere maiuscole o minuscole, numeri romani....
Esempio
| Codice HTML |
square |
circle |
disc |
lettera minuscola(a) |
lettera maiuscola(A) |
numeri romani |
<ol type="square">
<li> Luca </li>
<li> Marco </li>
<li> Carlo </li>
</ol>
|
- Luca
- Marco
- Carlo
|
- Luca
- Marco
- Carlo
|
- Luca
- Marco
- Carlo
|
- Luca
- Marco
- Carlo
|
- Luca
- Marco
- Carlo
|
- Luca
- Marco
- Carlo
|
L'elenco può anche iniziare da un numero o una lettera particolari, per fare questo si usa l'attributo start,che va inserito in ol. Dopo start si scrive un numero che corrisponde alla lettera o al numero da cui si vuole fare iniziare l'elenco.
Esempio
| Codice HTML |
<ol type="a" start="8">
<li> Luca </li>
<li> Marco </li>
<li> Carlo </li>
</ol>
|
- Luca
- Marco
- Carlo
|
[] Tabelle
<table>...</table>- Crea una tabella
<tr>...</tr>- Crea una riga in una tabella
<th>...</th>- Crea una cella d'intestazione all'interno di una riga; il contenuto è visualizzato di solito in grassetto e centrato
<td>...</td>- Crea una cella dati all'interno di una tabella.
<colgroup>...</colgroup>- Specifica un gruppo di colonne in una tabella.
-
-
<col> (<col /> in XHTML)- Specifica gli attributi per una colonna.
<caption>...</caption>- Specifica un titolo per l'intera tabella.
<thead>...</thead>- Specifica l'intestazione della tabella. Questa sezione può essere ripetuta se la tabella è divisa in più pagine (nella stampa o in altre possibili tipi di stampa).
<tbody>...</tbody>- Specifica la parte principale della tabella.
<tfoot>...</tfoot>- Specifica la parte bassa della tabella. Come
<thead>, Questa sezione può essere ripetuta se la tabella è divisa in più pagine (nella stampa o in altre possibili tipi di stampa).
[] Moduli
L'HTML può solo definire il formato del modulo, gli input degli utenti vengono processati da un linguaggio di scripting server-side.
<form>...</form>- Crea un modulo.
<select name="foo">...</select>- Crea un menu ad elenco dal quale l'utente può scegliere una sola voce. Può essere visualizzato come un menu a cascata.
<option>...</option>- Crea una voce nel menu.
<input type="checkbox">- Crea una casella di spunta (checkbox).
<input type="radio">- Crea un pulsante radio; se più pulsanti radio hanno lo stesso nome, l'utente potrà selezionarne solo uno.
<input type="submit" value="NAME">- Crea un pulsante d'invio.
<input type="image" border=0 name="NAME" src="name.gif">- Create un pulsante d'invio utilizzando un'immagine.
<input type="reset">- Crea un pulsante di reset che ripristina i valori del modulo a quelli iniziali.
<input type="text">- Crea una casella di testo a linea singola. Size imposta la lunghezza della casella. Maxlength imposta il numero massimo di caratteri inseribili (può essere più grande di Size).
<textarea>...</textarea>- Crea un'area di testo multilinea impostasta dagli attributi
cols (colonne) erows (righe). Il testo tra i tag apparirà nell'area di testo al caricamento della pagina.
[] Altri elementi
<span>...</span>- Crea una divisione logica sulla riga. Permette di assegnare a porzioni di testo un id o una classe, utilizzabili con i CSS.
<div>...</div>- Crea un livello logico block-level. Soprattutto per l'uso dei CSS.
<center>...</center> (deprecato)- Crea un blocco centrato anche di testo. In disuso a favore di
<div> con l'allineamento centrato definito nei CSS.
<hr><hr /> (in XHTML)- Inserisce una linea orizzontale.
<object>...</object>- Include un oggetto nella pagina del tipo specificato dall'attributo
type. Può essere qualsiasi oggetto MIME che il browser riconosce, come una pagina incorporata (vedi <iframe>), un plug-in come Flash, o un file audio.
<param>...<param/> (in XHTML)- Questo tag appare solamente all'interno dell'elemento
object e imposta i parametri per l'oggetto per esempio larghezza, altezza o URL del contenuto.
<embed>...</embed> (non ufficiale)- Richiama un gestore di plug-in per il tipo specificato dall'attributo
type. Utilizzato per includere file flash, file audio. non ufficiale, è preferibile <object>.
<noembed>...</noembed> (non ufficiale)- Specifica un'alternativa se l'oggetto incluso non può essere visualizzato.
<applet>...</applet> (non ufficiale)- Include un'applet Java nella pagina. Non ufficiale, è preferibile
<object>.
[] Formattazione
<b>...</b>- (DEPRECATED)Utilizza il grassetto. CSS equivalente:
{font-weight: bold}
<i>...</i>- Usa il corsivo. CSS equivalente:
{font-style: italic}
<big>...</big>- Crea testo più grande. CSS equivalente:
{font-size: larger}.
<small>...</small>- Crea testo più piccolo.CSS equivalente:
{font-size: smaller}
<s>...</s> e <strike>...</strike> (deprecati)- Cancella il testo:
Cancellato.CSS equivalente: {text-decoration: line-through}
<tt>...</tt>- Usa un carattere simile a quelli da macchina da scrivere (caratteri non proporzionali a dimensione fissa). CSS equivalente:
{font-family: monospace}
<u>...</u> (deprecato)- Usa un carattere sottolineato. CSS equivalente:
{text-decoration: underline}
<font [color=color,] [size=size,] [face=face]>...</font> (deprecato)- Può specificare il colore del testo tramite l'attributo
color , il tipo con face e la grandezza assoluta o relativa con size
Esempi:
<font color="green">text</font> crea testo verde.<font color="#1f4099">text</font> crea testo di colore esadecimale #1f4099.<font size="4">text</font> crea testo di grandezza 4. La grandezza va da 1 a 7. La grandezza standard è 2, a meno che non sia specificata in <<body> o in altri tag.<font size="+1">text</font> creat testo con grandezza aumentata di 1 rispetto a quella standard.. <font size="-1">text</font> è l'opposto.<face="Courier">text</font>visualizza il testo con il carattere Courier.
Css equivalenti per gli attributi del testo:
-
<font size="N"> corrisponde a {font-size: Ypx} (le specifiche HTML non definisco la relazione tra grandezza "N" e grandezza pixel "Y").<font color="red"> corrisponde a {color: red}<font face="Courier"> corrisponde a {font-family: Courier}
[] Collegamenti e ancore
<a>...</a>- Crea un elemento che diventa un'à ncora, che può essere sia l'origine che la destinazione di un collegamento ipertestuale.
- Con l'attributo
href impostato ad una URL l'Ã ncora diventa l'origine di un collegamento ipertestuale a un'altra risorsa (o ad un altro punto della stessa pagina);
- Alternativamente (e a volte contemporaneamente), con l'attributo
name (o id) l'à ncora diventa la destinazione di un collegamento ipertestuale da un'altra risorsa, che come un segnalibro farà scorrere la pagina fino a quel punto. Una URL può indicare tale destinazione con un fragment identifier (l'aggiunta alla fine dell'URL di un simbolo '#' seguito dal nome dell'à ncora) nell'URL.
- Ogni elemento può essere trasformato in un ancora attraverso l'attributo
id così usare <a name="foo"> non è necessario.
- Inoltre l'attributo
title può essere impostato per dare una breve informazione sul collegamento ipertestuale.
<a href="URL" title="testo in aiuto">Etichetta collegamento</a>- Quando il puntatore è sul collegamento di solito, in molti browser grafici, si trasforma in una mano con il dito indice disteso, e in un box speciale appare il testo contenuto nell'attributo
title, finché il cursore non si sposta.
- Alcuni browser visualizzato il testo alternativo nello stesso modo ma ciò è tecnicamente sbagliato.
[] Immagini
<img...><img... /> (in XHTML)- Include un'immagine con l'attributo
src, alt fornisce testo alternativo nel caso l'immagine non può essere visualizzata. Alt è inteso come testo alternativo, sebbene alcuni browser lo visualizzano come un suggerimento; l'attributo title è il suggerimento.
[] Vari
<br><br/> (in XHTML)- Specifica un'interruzione di linea.
<map>...</map>- Specifica una mappa lato client.
<area><area/> (in XHTML)- Specifica un'area in una mappa.
<blink>...</blink> (non standard, fortemente sconsigliato)- Testo lampeggiante. Può essere reso in alternativa con la direttiva di stile
{text-decoration: blink}
<marquee>...</marquee> (fortemente sconsigliato)- Crea l'effetto di testo scorrevole. Non ha nessun equivalente nelle direttive di stile. Gli attributi sono:
behaviour: indica il tipo di movimento del testo, può assumere i valori:
scroll: il testo arrivato alla fine viene ripresentato dall'inizio in modo continuo;slide: il testo arrivato alla fine si ferma;alternate: il testo arrivato alla fine rimbalza e torna indietro.
-
direction: indica la direzione del movimento, può essere:
left: verso sinistra;right: verso destra;up: verso l'alto;down: verso il basso.
-
loop: indica il numero di volte per il quale il movimento deve ripetersi. Se non specificato equivale a infinito.scrollamount: indica la velocità del movimento. Il numero è espresso in pixel al secondo.
- Tramite javascript è possibile ottenere l'effetto di blocco/ripartenza dello scorrimento tramite gli attributi di eventi associati al puntatore
onmouseover, onmouseout, onfocus e onblur richiamando i metodi this.stop() e this.start().
<!--...-->- Racchude un commento. Questo è un tag SGML e non limitato a HTML, quindi può apparire dovunque nel documento, anche prima del DTD o dopo
</html>. Tutto il contenuto inserito tra il tag di apertura <!-- e quello di chiusura --> non viene visualizzato.
<hr><hr/> (in XHTML)- Questo tag serve per creare delle linee separatorie. È possibile creare linee di grandezze e colori diversi grazie agli attributi
width (per la lunghezza), height (per l'altezza) e color, deprecati a favore dell'impiego delle direttive di stile equivalenti.
- Esempi:
<hr width = "400" height = "10"> (deprecato) oppure<hr style="width: 400px; height: 10px;" /> (con direttiva di stile) generano:
-
<hr width = "50%" height = "2"> (deprecato) oppure<hr style="width: 50%; height: 2px;" /> (con direttiva di stile) generano:
-
<hr color = "red" width = "200" height = "2"> (deprecato) oppure<hr style="background-color: red; width: 200px; height: 2px;" /> (con direttiva di stile) generano:
[] Frame
Un documento HTML può contenere un'intestazione o un corpo o un'intestazione e un frameset, ma non entrambi. Per i frame bisogna seguire il frames DTD.
<frameset>...</frameset>
Delimita il frameset. La disposizione dei frame è data da un elenco separato da virgola negli attributi rows e cols.
-
<frame>...</frame>- Racchiude un singolo frame, o regione, all'interno del frameset. Un documento different collegato attraverso l'attributo
src appare all'interno.
<noframes>...</noframes>- Contiene un normale elemento
<body> con i figli che appariranno nel browser web che non supporta i frame
<iframe>...</iframe>- Un frame all'interno di un normale
<body> HTML, che ha molti attributi dell'elemento img, ma incorpora un altro documento HTML invece di un'immagine.
[] Note
- ^ Come consigliato dal W3C Appendix C. Linee guida per la compatibilità con HTML
- ^ RFC 1866 - Hypertext Markup Language - 2.0
[] Collegamenti esterni
|
|
