Wikibooks

HTML/Fondamenti: differenze tra le versioni

Naviga nella cronologia in modo interattivo
← Differenza precedenteDifferenza successiva →
Contenuto cancellato Contenuto aggiunto
VisualeWikitesto
Diablo (discussione | contributi)
11 473 modifiche
mNessun oggetto della modifica
Ramac (discussione | contributi)
8 469 modifiche
sistemo
Riga 1:
{{HTML}}
Alcune premesse si rendono necessarie per poter consultare e capire nel modo migliore questo wikibook. Molti degli elementi cui si farà cenno potranno essere compresi solamente leggendo i prossimi due paragrafi.
 
Prima di incominciare, è bene prendere famigliarità con alcuni termini, che verranno usati spesso nel corso del libro:
== Premesse ==
* il [[w:Browser|browser]] (o ''web browser'' o anche interprete) è il programma che si occupa di visualizzare graficamente il contenuto delle pagine web (ad esempio Mozilla Firefox o Internet Explorer).
 
* il [[w:World_Wide_Web_Consortium|W3C]] o W3 è un'organizzazione, nata con l'avvento del Web, che i occupa tra le altre cose di uniformare gli standard web.
Questa premessa si rende necessaria per poter consultare e capire nel modo migliore questo wikibook. Molti degli elementi cui si farà cenno potranno essere compresi solamente leggendo i prossimi due paragrafi.
 
Ecco una lista di termini di cui si presuppone la conoscenza:
*[[w:Browser|Browser]] o Web Browser, che alcune volte verrà chiamato interprete.
*[[w:World_Wide_Web_Consortium|W3C]] o W3.
 
I tag non saranno scritti in modo particolare ma nel contesto di una frase saranno scritti su sfondo grigio.
Gli attributi dei tag verrano scritti in grassetto.
I valori saranno scritti in corsivo.
 
Ogni tematica verrà accompagnata da un esempio di codice che si portà copiare e incollare sul proprio editor di testo preferito. La struttura di una pagina rimane sempre la seguente:
 
<html>
<head></head>
<body>
</body>
</html>
 
Qualora tutti questi elementi non fossero presenti ma un esempio fosse costituito solo dal seguente codice:
 
<body>codice</body>
 
è semplicemente per rendere la formattazione del testo il meno estesa possibile. Quindi il codice di cui sopra dovrà essere inserito nella struttura generale della pagina:
 
<html>
<head></head>
<body>codice</body>
</html>
 
== Tag, attributi e valori ==
La struttura di un documento HTML si basa su tre importanti concetti: il ''tag'', l'''attributo'', e il ''valore''.
 
Il '''tag''' è l'unità fondamentale, potremmo definirla l'istruzione che fa capire al [[w:browser web|browser]] come interpretare il codice e visualizzarlo sul monitor. Attraverso i tag possiamo definire molti elementi di un documento: paragrafi, colore del testo, collegamenti ipertestuali e quant'altro. Ogni tag è caratterizzato da tre componenti:
Prima di cominciare a lavorare a stretto contatto con il codice è bene soffermarsi su questi tre elementi: il ''tag'', l'''attributo'', e il ''valore''.
*'''&lt;''', il segno di minore
 
Il '''tag''' è l'unità fondamentale, potremmo definirla l'istruzione che fa capire al [[w:browser web|browser]] come intrepretare il codice e visualizzarlo sul monitor. Attraverso i tag possiamo definire molti elementi di un documento: paragrafi, colore del testo, collegamenti ipertestuali e quant'altro. Ogni tag è caratterizzato da tre componenti:
 
*'''&lt;''' il segno di minore
* il suo '''nome'''
*'''&gt;''', il segno di maggiore
I tag normalmente prevedono anche una chiusura, che serve per delimitare dove finisce il codice interessato da quel particolare tag:esso ha la particolarità che dopo il segno di minore ha uno slash (''/'') che comunica al browser che si tratta, per l'appunto, di un tag di chiusura.
 
All'interno dei tag vi quindiil contenuto, ossia quello che verrà formattato secondo le regole del tag in cui è compreso. Per fare il punto della situazione, la sintassi comune alla maggior parte dei tag è la seguente: <code><nome tag>contenuto che verrà formattato</nome tag></code>
Un tag di chiusura ha la particolarità che dopo il segno di minore ha uno slash ''/'' che comunica al browser che si tratta, per l'appunto, di un tag di chiusura.
 
Ad esempio il tag <code><nowiki><h1></nowiki></code> serve per determinare i titoli e quindi rendere il testo al suo interno più grande rispetto al resto della pagina. Ecco ad esempio un codice che visualizzerà sul nostro browser un titolo (non vi preoccupate del resto del codice, verrà analizzato in seguito).
All'interno dei tag vi è poi il contenuto, ossia quello che verrà formattato secondo le regole del tag in cui è compreso. Per fare il punto della situazione, la sintassi comune alla maggior parte dei tag è la seguente: <code><nome tag>contenuto che verrà formattato</nome tag></code>
<source lang=html4strct>
<html>
<head>
</head>
<body>
<h1>Wikibooks</h1>
</body>
</html>
</source>
 
In realtà non tutti i tag necessitano di essere chiusi; alcuni sono a sé stanti e verranno affrontati nel corso del libro.
Ad esempio il tag <code><nowiki><h1></nowiki></code> serve per determinare i titoli e quindi rendere il testo al suo interno più grande rispetto al resto della pagina. Ecco ad esempio un codice che visualizzerà sul nostro browser un titolo (non vi preouccupate del resto del codice, verrà analizzato in seguito).
 
Tutti tag supportano degli '''attributi''', cioè dei parametri opzionali che servono a definire alcune proprietà specifiche. Ogni attributo è costituito da un nome che indica di che attrbuto si tratta e di un '''valore''' che determinerà. Un attributo permette ad esempio di visualizzare il testo allineato a destra o a sinistra, o del colore rosso piuttosto che nero.
<html>
<br />Gli attributi relativi ad un tag devono essere inseriti nel tag di apertura, in questo modo:
<head>
<source lang=html4strict><nometag attributo="valore" altro_attributo="valore">contenuto</nometag></source>
</head>
<body>
<nowiki><h1></nowiki>Wikibooks<nowiki></h1></nowiki>
</body>
</html>
 
In realtà non tutti i tag necessitano di essere chiusi; alcuni sono a sè stanti e verrano affrontati nel corso del wikibook.<br />
 
Quasi tutti i tag supportano gli '''attributi''', cioè dei parametri che servono a definire alcune proprietà specifiche. Ogni attributo è costituito da un '''valore''' che determinerà, ad esempio, se questo verrà visualizzato a destra o a sinistra, o se il testo sarà di colore rosso piuttosto che nero.
 
Ecco la struttura di un tag con tutti gli elementi che abbiamo definito:
 
<nometag attributocolore="valore" attributoallineamento="valore">Testo che verrà visualizzato
sulla pagina dell'utente</nometag>
 
Ora che abbiamo capito com'è strutturato un tag possiamo passare ad analizzare la struttura di una pagina.
Line 71 ⟶ 39:
 
Tutte le pagine web in cui navighi hanno la seguente struttura a livello di codice HTML:
<source lang=html4strict>
<html>
 
<htmlhead>
codice
</head>
codice
</head>
<body>
codice
</body>
</html>
 
<body>
Il tag <code><html></code> indica all'interprete, in questo caso il [[w:browser web|browser]], che il documento è stato formattato in HTML e pertanto il suo contenuto dovà essere interpretato secondo le specifiche del linguaggio.
codice
</body>
 
</html>
I tag <code><head></code> d'apertura e <code></head></code> di chiusura, servono a definire l'intestazione del documento, ossia tutte quelle informazioni che servono a definire il contenuto della pagina.
</source>
Il tag <code><html></code> (che si chiude in fondo) indica al browser che il documento è stato formattato in HTML e pertanto il suo contenuto dovrà essere interpretato secondo le specifiche del linguaggio.
 
All'interno deiIl tag <code><bodyhead></code> e(che si chiude con <code></bodyhead></code>) èserve presentea invecedelimitare il restol'intestazione del documento, che conterrà informazioni opzionali come il ''corpo''titolo della pagina, ciòl'autore, chela effettivamentedata poidi verràcreazione, visualizzatoil sulset [[w:browserdi caratteri utilizzato, web|browser]]ecc...
 
IlTra i tag di<code><body></code> chiusurae <code></htmlbody></code> serveè presente invece peril comunicarecorpo all'interpretevero chee ilproprio codicedel HTMLdocumento èe terminatodella èpagina pertanto tuttoweb, ciò che saràeffettivamente scritto successivamente a questo tagpoi verrà interpretatovisualizzato comesul normale[[w:browser testoweb|browser]].
 
L'HTML è un linguaggio ''case-unsensitive'' (cioè non sensibile alle maiscuole), pertanto scrivere i tag tutti in maiuscolo o in minuscolo è indifferente, anche alternandoli non cambia nulla.<br/>
I seguenti esempiiesempi codificano una pagina identica, sia dal punto di vista sintattico sia da quello dell'interpretazione del [[wbrowser:browser web|browser]] e pertanto ciò che vedrà l'utente.
 
<source lang=html4strict>
Esempi:
<html>
<head></head>
<body>
</body>
</html>
</source>
<source lang=html4strict>
<HTML>
<HEAD></HEAD>
<BODY>
</BODY>
</HTML>
</source>
<source lang=html4strict>
<htMl>
<HeAd></hEAD>
<bODY>
</BOdy>
</HTml>
</source>
Queste tre pagine mostreranno lo stesso risultato sul browser dell'utente.
== Convenzioni di questo libro ==
* I tag non saranno scritti in modo particolare ma nel contesto di una frase saranno scritti su sfondo grigio.
* Gli attributi dei tag verrano scritti in grassetto.
* I valori saranno scritti in corsivo.
 
Ogni argomento affrontato verrà accompagnato da un esempio di codice, che si potrà copiare e incollare sul proprio editor di testo preferito. La struttura di una pagina rimane, come abbiamo visto, sempre la seguente:
<html>
<source lang=html4strict>
<head></head>
<html>
<body>
<head></bodyhead>
</htmlbody>
</body>
 
<HTML/html>
</source>
<HEAD></HEAD>
Qualora tutti questi elementi non fossero presenti ma un esempio fosse costituito solo dal seguente codice:
<BODY>
<source lang=html><body>codice</body> </source>
</BODY>
è perché l'intestazione e il resto del documento HTML possono essere ritenuti irrilevanti ai fini dell'esempio. Quindi il codice di cui sopra dovrà essere inserito nella struttura generale della pagina.
</HTML>
 
<htMl>
<HeAd></hEAD>
<bODY>
</BOdy>
</HTml>
 
Queste tre pagine mostreranno lo stesso risultato sul [[w:browser web|browser]] dell'utente.
 
== Elementi block e in-line ==
Una distinzione importante da fare tra gli elementi di una pagina HTML sono è quella tra i cosidetti block-elements (elementi blocco) e gli in-line elements (elementi in linea) chiamati anche text-elements (elementi testo).
 
Le diversiàdiversità tra questi due tipi di elementi potrebbero sembrare non importanti ma è molto utile capire la loro differenza; il concetto di elementi block e in-line è molto importante inoltre nel [[CSS]].
*generalmente, gli elementi '''block''' possono contenterecontenere elementi in-line e altri elementi block e, quando vengono inseriti, iniziano una nuova riga.
*generalmente, gli elementi '''in-line''' possono contenere solo testo e altri elementi in-line. Gli elementi in-line, come suggerisce la parola stessa, vengono visualizzati sulla riga corrente e non vanno perciò a capo.
 
Line 131 ⟶ 114:
 
Ecco un esempio:
<source lang=html4strict>
<html>
 
<htmlhead>
<nowiki><!-- Qui ci va il titolo --></nowiki>
</head>
 
<nowiki><!-- Qui ci va il titolo --></nowiki>
</headbody>
<nowiki><!-- qui ci va il contenuto della pagina --></nowiki>
</body>
 
<nowiki><!-- qui ci va il contenuto della pagina --></nowiki>
</bodyhtml>
</source>
</html>
 
== Consigli sulla scrittura ==
 
===Indentazione===
 
L'indentazione è la tecnica attraverso cui il codice viene rientrato a mano a mano che si entra in sotto-tag. Nel seguente wikibook si cercherà di adottare questa tecnica nel miglior modo possibile e si invita chiunque ad utilizzarla in quanto rende il codice più leggibile che non se si trovasse tutto su una riga, o suddiviso senza criterio. Ecco due esempi:
<source lang=html4strict>
 
Sintassi sconsigliata:
 
<html>
<head></head>
Line 158 ⟶ 138:
</body>
</html>
</source>
 
<source lang=html4strict>
Sintassi consigliata:
<html>
 
<head></head>
<html>
<head></headbody>
<nowiki><div>testo testo</div></nowiki>
<body>
<a href="http://it.wikibooks.org/">Wikibooks</a>
<nowiki><div>testo testo</div></nowiki>
<a href="http://it.wikibookswikipedia.org/">WikibooksWikipedia</a>
</body>
<a href="http://it.wikipedia.org/">Wikipedia</a>
</bodyhtml>
</htmlsource>
 
Il fatto che l'HTML sia un linguaggio unsensitive è molto utile nel momento in cui bisogna scrivere molto codice e ognuno potrà utilizzare lo stile che preferisce. Tra gli stili più usati ne elenchiamo alcuni:
 
Line 175 ⟶ 154:
*'''Maiuscoli alcuni tag''': si scrivono in maiuscolo solamente i tag principali come <code><nowiki><html></nowiki></code>, <code><nowiki><head></nowiki></code> e <code><nowiki><body></nowiki></code>.
*'''Tutto minuscolo''': tutti i tag vengono scritti in minuscolo, con il rischio di confondersi con gli attributi, una corretta indentazione tuttavia risolve il problema. Quest'ultimo stile è inoltre consigliato se si vuole mantenere la compatibilità con l'XHTML.
 
===Tag vuoti ed XHTML===
 
Per definizione, alcuni tag non possono contenere nemmeno marcare porzioni di testo: non hanno quindi il tag di chiusura e pertanto sono detti '''tag vuoti'''.
 
I seguenti sono alcuni esempi di tag vuoti:
 
'''&lt;img''' src = 'images/fiore.png''''&gt;'''
'''&lt;hr&gt;'''
&lt;p&gt;Questo &#232; un paragrafo'''&lt;br&gt;'''che continua sulla riga seguente&lt;/p&gt;
 
Sempre per motivi di compatibilità verso l'XML, che non ammette tag vuoti e privi dell'informazione di fine-tag, è buona norma terminare ogni tag vuoto inserendo una barra prima del simbolo &gt; terminale.<br />
Per garantire la piena compatibilità con i browser attuali (che nella maggioranza dei casi supportano intrinsecamente l'HTML e non l'XML), nella codifica XHTML la barra finale dev'essere preceduta da uno spazio.<br />
In XHTML, i precedenti esempi di tag vuoti si scriveranno quindi:
 
'''&lt;img''' src = 'images/fiore.png' '''/&gt;'''
'''&lt;hr /&gt;'''
&lt;p&gt;Questo &#232; un paragrafo'''&lt;br /&gt;'''che continua sulla riga seguente&lt;/p&gt;
 
 
{{avanzamento|75%|15 dicembre 2007}}
Estratto da "https://it.wikibooks.org/wiki/HTML/Fondamenti"