HTML: differenze tra le versioni
Completamento della pagina |
|||
| Riga 3: | Riga 3: | ||
| nome=HTML |
| nome=HTML |
||
| tipo=Linguaggio di markup (web) |
| tipo=Linguaggio di markup (web) |
||
| sviluppatore= |
| sviluppatore=W3C |
||
| ultima_versione= |
| ultima_versione=5 |
||
| ultima_versione_data= |
| ultima_versione_data=28 ottobre 2014 |
||
| url=http://www.w3.org/ |
| url=http://www.w3.org/ |
||
}} |
}} |
||
Acronimo di '''Hyper Text Markup Language''' (Linguaggio di contrassegno per gli ipertesti). È il più importante linguaggio di markup per il web. |
|||
__TOC__ |
|||
==Cos'è l'HTML== |
==Cos'è l'HTML== |
||
Acronimo di '''Hyper Text Markup Language''' (linguaggio a marcatori per ipertesti), è il più importante linguaggio di markup per il web. Nasce alla fine degli anni '80 da [[w:Tim Berners-Lee|Tim Berners-Lee]] al [[w:CERN|CERN]] di Ginevra. HTML è un linguaggio di pubblico dominio la cui sintassi è stabilita dal [[w:World Wide Web Consortium|World Wide Web Consortium]] (W3C). |
|||
L'HTML non è un linguaggio di programmazione, ma un linguaggio di markup, ossia descrive il contenuto, testuale e non, di una pagina web. Punto HTML (.html) o punto HTM (.htm) è anche l'estensione comune dei documenti HTML. |
L'HTML non è un linguaggio di programmazione, ma un linguaggio di markup, ossia descrive il contenuto, testuale e non, di una pagina web. Punto HTML (.html) o punto HTM (.htm) è anche l'estensione comune dei documenti HTML. |
||
Normalmente il programma che deve interpretare il codice HTML viene chiamato [[Browser]]. Il Browser effettua la richiesta di una pagina al server HTTP che risponde con la pagina HTML. Il browser ha poi il compito di trasformare le istruzioni in HTML (in |
Normalmente il programma che deve interpretare il codice HTML viene chiamato [[w:Browser|Browser]]. Il Browser effettua la richiesta di una pagina al server HTTP che risponde con la pagina HTML. Il browser ha poi il compito di trasformare le istruzioni in HTML (in puro testo), in elementi grafici e ipertestuali. Una cosa molto importante è che l'HTML '''non è dinamico ma bensì statico''' ciò significa che se non si agisce direttamente nel codice HTML, esso rimarrà invariato nel tempo. L'unica possibilità che il codice cambi è dovuta a codice script che viene inserito in appositi '''tag'''. Ricordate comunque che il codice script non muta comunque. |
||
<!---- |
<!---- |
||
| Riga 23: | Riga 20: | ||
----> |
----> |
||
===Compatibilità e dintorni=== |
===Compatibilità e dintorni=== |
||
Con lo sviluppo e la diffusioni di innumerevoli tecnologie e browser, si pensava che l'HTML dovesse diventare sempre più rigido su certe regole. Invece si ottenne l'effetto opposto, cioè, se c'è un errore nella stesura del codice, probabilmente il browser ''chiuderà un occhio'' e visualizzerà normalmente la pagina. Questo che sembra apparentemente un vantaggio, in realtà è uno svantaggio quando vi accorgerete che in diversi browser l'errore verrà visualizzato in modo diverso. I browser moderni inseriscono sempre di più codici proprietari (come ad esempio gli action tag di [[w:Internet Explorer]]) e questo influisce ancora di più sulla compatibilità. L'unico modo per scrivere una pagina che sia visualizzata '''quasi''' ugualmente per tutti i browser è attenersi alle rigidissime regole del W3C. Esiste un [http://validator.w3.org validatore] per controllare se le vostre pagine sono corrette o meno. |
Con lo sviluppo e la diffusioni di innumerevoli tecnologie e browser, si pensava che l'HTML dovesse diventare sempre più rigido su certe regole. Invece si ottenne l'effetto opposto, cioè, se c'è un errore nella stesura del codice, probabilmente il browser ''chiuderà un occhio'' e visualizzerà normalmente la pagina. Questo che sembra apparentemente un vantaggio, in realtà è uno svantaggio quando vi accorgerete che in diversi browser l'errore verrà visualizzato in modo diverso. I browser moderni inseriscono sempre di più codici proprietari (come ad esempio gli action tag di [[w:Internet Explorer]]) e questo influisce ancora di più sulla compatibilità. L'unico modo per scrivere una pagina che sia visualizzata '''quasi''' ugualmente per tutti i browser è attenersi alle rigidissime regole del W3C. Esiste un [http://validator.w3.org validatore] per controllare se le vostre pagine sono corrette o meno. |
||
== Elementi principali di una pagina html == |
|||
==Sintassi di base== |
|||
===I Tag |
===I Tag html=== |
||
Ogni pagina html è composta da '''tag'''. Ogni tag identifica una parte della pagina. La sintassi generale è: |
|||
<source lang="html4strict"> |
<source lang="html4strict"> |
||
<tag></tag> |
<tag> </tag> |
||
</source> |
</source> |
||
Solitamente i tag vengono aperti e chiusi. I tag di apertura possono avere degli attributi: |
|||
<source lang="html4strict"> |
<source lang="html4strict"> |
||
<tag attributo1="ciao"></tag> |
<tag attributo1="ciao"> </tag> |
||
</source> |
</source> |
||
Facciamo subito qualche esempio |
Facciamo subito qualche esempio su come creare un collegamento ipertestuale: |
||
<source lang="html4strict"> |
<source lang="html4strict"> |
||
<a href="https://it.wikiversity.org">Wikiversità</a> |
|||
<p align="right">Io sono a destra</p> |
|||
<p align="left">Io sono a sinistra</p> |
|||
<p align="center">Io sono al centro</p> |
|||
</source> |
</source> |
||
I tag solitamente vengono messi uno all'interno dell'altro in modo da creare oggetti più complessi. Nel seguente esempio creiamo un collegamento ipertestuale con caratteri di grandi dimensioni. |
|||
Il tag utilizzato è uno dei più comuni. Il termine ''p'' indica paragrafo e viene utilizzato per inserire del testo in una pagina html. Come si nota dalla sintassi si inserisce un tag di apertura con le eventuali proprietà specificate nello stesso tag poi il testo che viene visualizzato nella pagina html e infine il tag di chiusura. |
|||
| ⚫ | |||
<a href="https://it.wikiversity.org"><h1>Wikiversità</h1></a> |
|||
</source> |
|||
Nelle prossime lezioni passeremo ad analizzare tutti i tag più importanti dell'html. |
|||
===Doctype, Head e Body=== |
|||
==I caratteri== |
|||
Ogni pagina html è composta solitamente da 3 elementi: |
|||
Abbiamo visto come si possa stampare un testo mediante il tag: <source lang="html4strict"><p>testo</p></source> Ora passiamo ad impostare il carattere del testo che vogliamo stampare. |
|||
====Doctype==== |
|||
Il '''Doctype''' è la prima cosa che dovrebbe comparire in ogni pagina html e suggerisce al browser che versione di html stiamo usando. Il doctype da usare in html5 è: |
|||
<source lang="html4strict"> |
|||
<!DOCTYPE html> |
|||
</source> |
|||
====Head==== |
|||
All'interno del tag '''Head''' troviamo tutte quelle istruzioni che non vengono visualizzate direttamente nella pagina, ma che sono utili al suo corretto funzionamento. Un banale esempio è il tag usato per dare il nome a una pagina web. |
|||
<source lang="html4strict"> |
|||
<head> |
|||
<title>Titolo</title> |
|||
</head> |
|||
</source> |
|||
====Body==== |
|||
Nel tag body troviamo tutto il resto dei tag. In questo esempio mostriamo come scrivere una frase a schermo. |
|||
<source lang="html4strict"> |
|||
<body> |
|||
<p>Hello, world!</p> |
|||
</body> |
|||
</source> |
|||
==Esempio completo di una pagina html== |
|||
Di seguito verrà mostrata una pagina html molto semplice, ma perfettamente funzionante. |
|||
<source lang="html4strict"> |
|||
<!DOCTYPE html> |
|||
<html> |
|||
<head> |
|||
<title>Titolo</title> |
|||
</head> |
|||
<body> |
|||
<p>Hello, world!</p> |
|||
</body> |
|||
</html> |
|||
</source> |
|||
Per visualizzare il risultato così ottenuto, è sufficiente creare un semplice file di testo con estensione .html e copiaci all'interno il codice qui sopra scritto. Il risultato dovrebbe essere simile a questo: |
|||
Un tag definito obsoleto dal [[w:W3C|W3C]] è il tag: |
|||
<source lang="html4strict"><font> ... </font></source> che in pratica identificava il tipo di carattere, grandezza e colore di tutto il testo racchiuso al suo interno. Il nuovo tag che lo sostituisce è |
|||
| ⚫ | |||
però le proprietà vanno definite con i fogli di stile. |
|||
[[File:Esempio 1 html.PNG||Esempio basilare di pagina html]] |
|||
[[Categoria:Linguaggi di programmazione]] |
[[Categoria:Linguaggi di programmazione]] |
||
Versione delle 18:13, 29 lug 2015
| HTML | |
|---|---|
| Autore | |
| Data di origine | 1989 |
| Utilizzo | |
| Paradigmi | |
| Tipizzazione | |
| Estensioni comuni | html |
| Implementazione di riferimento | |
| Licenza | CC BY 4.0 |
| Sito web | html.spec.whatwg.org/multipage/ |
Cos'è l'HTML
Acronimo di Hyper Text Markup Language (linguaggio a marcatori per ipertesti), è il più importante linguaggio di markup per il web. Nasce alla fine degli anni '80 da Tim Berners-Lee al CERN di Ginevra. HTML è un linguaggio di pubblico dominio la cui sintassi è stabilita dal World Wide Web Consortium (W3C). L'HTML non è un linguaggio di programmazione, ma un linguaggio di markup, ossia descrive il contenuto, testuale e non, di una pagina web. Punto HTML (.html) o punto HTM (.htm) è anche l'estensione comune dei documenti HTML. Normalmente il programma che deve interpretare il codice HTML viene chiamato Browser. Il Browser effettua la richiesta di una pagina al server HTTP che risponde con la pagina HTML. Il browser ha poi il compito di trasformare le istruzioni in HTML (in puro testo), in elementi grafici e ipertestuali. Una cosa molto importante è che l'HTML non è dinamico ma bensì statico ciò significa che se non si agisce direttamente nel codice HTML, esso rimarrà invariato nel tempo. L'unica possibilità che il codice cambi è dovuta a codice script che viene inserito in appositi tag. Ricordate comunque che il codice script non muta comunque.
Compatibilità e dintorni
Con lo sviluppo e la diffusioni di innumerevoli tecnologie e browser, si pensava che l'HTML dovesse diventare sempre più rigido su certe regole. Invece si ottenne l'effetto opposto, cioè, se c'è un errore nella stesura del codice, probabilmente il browser chiuderà un occhio e visualizzerà normalmente la pagina. Questo che sembra apparentemente un vantaggio, in realtà è uno svantaggio quando vi accorgerete che in diversi browser l'errore verrà visualizzato in modo diverso. I browser moderni inseriscono sempre di più codici proprietari (come ad esempio gli action tag di w:Internet Explorer) e questo influisce ancora di più sulla compatibilità. L'unico modo per scrivere una pagina che sia visualizzata quasi ugualmente per tutti i browser è attenersi alle rigidissime regole del W3C. Esiste un validatore per controllare se le vostre pagine sono corrette o meno.
Elementi principali di una pagina html
I Tag html
Ogni pagina html è composta da tag. Ogni tag identifica una parte della pagina. La sintassi generale è:
<tag> </tag>
Solitamente i tag vengono aperti e chiusi. I tag di apertura possono avere degli attributi:
<tag attributo1="ciao"> </tag>
Facciamo subito qualche esempio su come creare un collegamento ipertestuale:
<a href="https://it.wikiversity.org">Wikiversità</a>
I tag solitamente vengono messi uno all'interno dell'altro in modo da creare oggetti più complessi. Nel seguente esempio creiamo un collegamento ipertestuale con caratteri di grandi dimensioni.
<a href="https://it.wikiversity.org"><h1>Wikiversità</h1></a>
Nelle prossime lezioni passeremo ad analizzare tutti i tag più importanti dell'html.
Doctype, Head e Body
Ogni pagina html è composta solitamente da 3 elementi:
Doctype
Il Doctype è la prima cosa che dovrebbe comparire in ogni pagina html e suggerisce al browser che versione di html stiamo usando. Il doctype da usare in html5 è:
<!DOCTYPE html>
Head
All'interno del tag Head troviamo tutte quelle istruzioni che non vengono visualizzate direttamente nella pagina, ma che sono utili al suo corretto funzionamento. Un banale esempio è il tag usato per dare il nome a una pagina web.
<head>
<title>Titolo</title>
</head>
Body
Nel tag body troviamo tutto il resto dei tag. In questo esempio mostriamo come scrivere una frase a schermo.
<body>
<p>Hello, world!</p>
</body>
Esempio completo di una pagina html
Di seguito verrà mostrata una pagina html molto semplice, ma perfettamente funzionante.
<!DOCTYPE html>
<html>
<head>
<title>Titolo</title>
</head>
<body>
<p>Hello, world!</p>
</body>
</html>
Per visualizzare il risultato così ottenuto, è sufficiente creare un semplice file di testo con estensione .html e copiaci all'interno il codice qui sopra scritto. Il risultato dovrebbe essere simile a questo:
