mozilla
Risultati di ricerca

    Introduzione all' HTML

    Quando guardi una pagina web in un browser, vedi, a livello base, delle parole. Queste parole solitamente hanno alcune caratteristiche di stile, come ad esempio caratteri di differenti grandezze e colori. In molti casi una pagina presenta anche immagini o video. A volte può esserci un form dove puoi inserire (o ricercare) informazioni, oppure personalizzare la visualizzazione secondo il tuo gradimento. Spesso una pagina contiene animazioni e contenuti che cambiano mentre il resto della pagina rimane uguale.

    Diverse tecnologie (come CSS, JavaScript, Flash, AJAX, JSON) possono essere usate per definire gli elementi di una pagina web. Tuttavia, di base, una pagina web è definita usando l'  HTML (HyperText Markup Language) , letteralmente "Linguaggio di contrassegno per gli Ipertesti". Senza HTML, non esiste una pagina web.

    Questo articolo fornisce un introduzione all' HTML. Se ti sei mai chiesto cosa succede dietro le quinte nel tuo browser web, questo articolo è il posto dove iniziare ad imparare.

    Una breve storia dell' HTML

    Alla fine degli anni 80, Tim Berners-Lee stava lavorando come fisico al CERN (l' Organizzazione europea per la ricerca sul nucleare). Egli escogitò un sistema che permettesse agli scenziati di condividere documenti su internet. Prima della sua invenzione, la comunicazione via internet era limitata al testo base, usando tecnologie come email, FTP (Protocollo di Trasferimento File), e schede di discussione basate su Usenet. L'invenzione dell' HTML consentì l'uso di un modello in base al quale i contenuti memorizzati in un server centrale potessero essere trasferiti e visualizzati in una postazione di lavoro locale per mezzo di un browser. 

    Che cos'è l' HTML?

    L' HTML è un linguaggio di contrassegno. Esso "dice" al browser come visualizzare i contenuti. L' HTML separa il "contenuto" (parole, immagini, audio, video, ecc.) dalla "presentazione" (la definizione del tipo di contenuto e le istruzioni per come quel tipo di contenuto debba essere visualizzato). L' HTML usa un set di elementi predefiniti per identificare il tipo di contenuto.

    Per esempio, l' elemento paragrafo consiste del tag iniziale "<p>" e del tag di chiusura "</p>". L' esempio di seguito mostra un paragrafo contenuto nel corrispondente elemento HTML:

    <p>My dog ate all the guacamole.</p>

    Ecco come viene visualizzato il contenuto in un browser:

    Il browser usa i tag come indicatori di come visualizzare il contenuto di quest' ultimi.

    Gli elementi che inlcudono contenuto possono solitamente contenere a loro volta altri elementi. Per esempio, l'elemento enfatizzato ("<em>") può essere inserito nell' elemento paragrafo:

    <p>My dog ate <em>all</em> the guacamole.</p>

    Ecco come viene visualizzato:

    Alcuni elementi non ne contengono altri. Per esempio, il tag immagine ("<img>") specifica semplicemente il nome del file del contenuto (un immagine appunto) come un attributo:

    <img src="smileyface.jpg">

    Spesso una barra viene inserita prima del simbolo di maggiore per indicare la fine del tag. Questo è opzionale nell' HTML ma obbligatorio nell' XHTML (che è uno schema XML che implementa gli elementi HTML).

    Il resto di questo articolo approfondirà i concetti introdotti in questa sezione. Tuttavia, se volessi vedere l' HTML in azione, dai un' occhiata a Mozilla Thimble, che è un editor interattivo on-line che ti insegnerà come scivere il codice HTML. Inoltre, guarda HTML Elements per una lista degli elementi disponibili ed una descrizione sul loro utilizzo.

    Elementi — I blocchi costruttori di base

    L' HTML consiste in una serie di elementi. Tali elementi definiscono il significato semantico del loro contenuto. Gli elementi inlcudono tutto ciò che è contenuto tra i tag di apertura e chiusura, inclusi i tag stessi. Per esempio, l' elemento "<p>" indica un paragrafo; l' elemento "<img>" indica un immagine. Guarda la pagina HTML Elements per una lista completa.

    Alcuni elementi hanno un significato ben preciso, come "questa è un immagine", "questa è una testata", oppure "questa è una lista ordinata". Altri sono meno specifici, came "questa è una sezione nella pagina", oppure "questo è parte del testo". Altri ancora sono usati per ragioni tecniche, come "questa è una informazione identificativa della pagina che non dovrebbe essere visualizzata". Malgrado tutto, in un modo o nell' altro tutti gli elementi HTML hanno valore semantico.

    La maggior parte degli elementi possono contenerne altri, formando una struttura gerarchica. Una molto semplice ma completa pagina web potrebbe essere questa:

    <html>
      <body>
    
        <p>My dog ate all the guacamole.</p>
    
      </body>
    </html>

    Come puoi vedere, gli elementi <html> inglobano il resto del documento, e l' elemento <body> include il contenuto della pagina. Questa struttura è spesso rappresentata come un albero con i suoi rami (in questo caso, gli elementi <body> e <p>) che nascono dal tronco (<html>). Questa struttura gerarchica viene chiamata DOM: the Document Object Model (Modello ad oggetti del documento).

    Tag

    I documenti HTML sono scritti in testo comune. Essi possono essere scritti in qualunque editor di testo che consente di salvare come testo (anche se la maggior parte degli autori di HTML preferisce usare un editor specializzato che evidenzia la sintassi e mostra il DOM). I nomi dei tag possono essere scritti indifferentemente in minuscolo o maiuscolo. Tuttavia, il W3C (il consorzio globale che si occupa degli standard HTML) raccomanda l' uso del minuscolo (e XHTML richiede il minuscolo).

    L' HTML attribuisce un significato speciale a qualunque cosa inizi col simbolo minore ("<") e finisca col simbolo maggiore (">"). Questo contrassegno viene chiamato tag. Di seguito un semplice esempio:

    <p>This is text within a paragraph.</p>
    

    In questo esempio è presente un tag di inizio e un tag di chiusura. I tag di chiusura sono identici a quelli di inizio ma contengono anche una barra immediatamente dopo il simbolo di minore. Most elements in HTML are written using both start and closing tags. I tag di inizio e fine dovrebbero essere opportunamente nidificati, cioè i tag di chiusura dovrebbero essere scritti in ordine opposto rispetto a quelli di apertura. Una corretta nidificazione costituisce una regola che deve essere rispettata al fine di scrivere del codice che sia valido.

    Questo è un esempio di codice valido:

    <em>I <strong>really</strong> mean that</em>.
    

    Questo è un esempio di codice non valido:

    Invalid: <em>I <strong>really</em> mean that</strong>.

    Nota come nell' esempio di codice valido, il tag di chiusura per l'elemento interno viene posizionato prima del tag di chiusura dell' elemento contenitore.

    Fino all' adozione delle regole di analisi dell' HTML5, i browsers non interpretavano il codice non valido nello stesso modo e producevano risultati diversi quando incontravano del codice non valido. I browser sono stati compassionevoli con gli autori, ma sfortunatamente non tutti allo stesso modo, con conseguenti risultati quasi imprevedibili in caso di codice non valido. Quei giorni sono finiti con l'ultima evoluzione dei browser, Internet Explorer 10, Firefox 4, Opera 11.60, Chrome 18 or Safari 5, che ora implementano ugualmente le regole standard per il codice non valido. Il codice invalido ha lo stesso esito nell' albero del DOM in tutti i moderni browsers.

    Alcuni elementi non contengono alcun testo o altri elementi. Questi sono elementi vuoti e non necessitano del tag di chusura. Di seguito un esempio:

    <img src="smileyface.jpg">

    Molte persone contrassegnano gli elementi vuoti usando una barra finale (che è obbligatoria in XHTML).

    <img src="smileyface.jpg" />

    In HTML questa barra non ha funzionalità tecnica e il suo utilizzo è una pura scelta stilistica.

    Attributi

    Il tag di inizio può contenere informazioni addizionali, come nel precedente esempio. Tale informazione viene chiamata attributo. Gli attributi solitamente sono composti da 2 parti:

    • Un nome dell' attributo.
    • Un valore dell' attributo.

    Alcuni attributi possono avere solo un valore. Essi sono attributi booleani e possono essere abbreviati specificando solo il nome dell' attributo o lasciandone il valore vuoto. Perciò, i seguenti 3 esempi hanno lo stesso significato:

    <input required="required">
    
    <input required="">
    
    <input required>
    

    I valori degli attributi che consistono in una singola parola o un singolo numero possono essre scritti come sono, ma quando ci sono due o più stringhe di caratteri nel valore, devono essere scritti tra apici. Sono permessi sia gli apici (') che le virgolette ("). Molti sviluppatori preferiscono usare sempre usare le virgolette (o gli apici) per rendere il codice meno ambiguo alla vista e evitare errori. Di seguito un errore:

    <p class=foo bar> (Beware, this probably does not mean what you think it means.)

    In questo esempio il valore doveva essere "foo bar" ma, visto che non erano presenti le virgolette, il codice viene interpretato come se fosse stato scritto così:

    <p class="foo" bar="">

    Riferimenti nominali a caratteri

    I Riferimenti nominali a caratteri (spesso con noncuranza chiamati entità) sono usati per stampare caratteri che hanno un particolare significato in HTML. Per esempio, HTML interpreta i simboli di minore e maggiore come delimitatori di tag. Quando vogliamo visualizzare un simbolo di maggiore ne testo, possiamo usare un riferimento nominale al carattere. Ci sono quattro riferimenti nominali a caratteri che si devono conoscere:

    • &gt; denota il simbolo di maggiore (>)
    • &lt; denota il simbolo di minore (<)
    • &amp; denota l' ampersand o e commerciale (&)
    • &quot; denota le virgolette (")

    Ci sono molte altre entità, ma queste quattro sono le più importanti poichè rappresentano caratteri che hanno un significato speciale in HTML.

    Doctype (tipo Documento) e commenti

    Oltre ai tag, al testo e ai riferiementi nominali, un documento HTML deve contenere una dichiarazione del tipo di documento (doctype) come prima riga. Nel moderno HTML questo è scritto come di seguito:

    <!DOCTYPE html>

    Il doctype ha una storia lunga ed intricata, ma per ora tutto quello che ti serve sapere è che questo doctype dice al browser di interpretare il codice HTML e CSS secondo gli standard W3C e non fingendo che sia Internet Explorer dagli anni 90. (Guarda quirks mode.)

    L' HTML ha un meccanismo per inserire commenti che non sono mostrati quando la pagina viene caricata dal browser. Questo è utile per spiegare una sezione del codice, oppure per lasciare note per altre persone che potrebbero lavorare sulla pagina, oppure per lasciare dei promemoria per se stessi. I commenti HTML sono racchiusi in simboli come segue:

    <!-- This is comment text -->

    Un documento  completo ma piccolo

    Mettendo tutto insieme si ha un piccolo esempio di un documento HTML. Puoi copiare questo codice in un editor di test, salvarlo come myfirstdoc.html e caricarlo in un browser. Assicurati di salvarlo usando la codifica per i caratteri UTF-8. Visto che questo documento non usa stili sembrerà piuttosto chiaro, ma è solo un piccolo inizio.

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="utf-8" />
      <title>A tiny document</title>
    </head>
    <body>
      <h1>Main heading in my document</h1>
      <!-- Note that it is "h" + "1", not "h" + the letter "one" -->
      <p>Loook Ma, I am coding <abbr title="Hyper Text Markup Language">HTML</abbr>.</p>
    </body>
    </html>
    

    Etichette del documento e nomi di chi ha collaborato alla sua stesura

    Contributors to this page: Nicola_D, Fabio_Z_Tessitore, teorems
    Ultima modifica di: teorems,