HTML: differenze tra le versioni
| Riga 126: | Riga 126: | ||
== Risorse Esterne == |
== Risorse Esterne == |
||
[https://www.mrwebmaster.it/html/guida-html/ Guida HTML in Italiano su Mr. Webmaster] |
[https://www.mrwebmaster.it/html/guida-html/ Guida HTML in Italiano su Mr. Webmaster]<br> |
||
[https://developer.mozilla.org/it/docs/Web/Guide/HTML Guida HTML su MDN] |
[https://developer.mozilla.org/it/docs/Web/Guide/HTML Guida HTML su MDN]<br> |
||
[https://corsidia.com/materia/web-design/webmaster-tutorial/guida-html HTML Guida completa su Corsidia] |
[https://corsidia.com/materia/web-design/webmaster-tutorial/guida-html HTML Guida completa su Corsidia] |
||
Versione delle 19:14, 3 mag 2019
| HTML | |
|---|---|
| Autore | W3C |
| 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. L'estensione dei documenti HTML è .htm o, maggiormente usato, .html.
Il programma che interpreta il codice HTML è il Browser. Esso effettua la richiesta di una pagina al server HTTP che risponde con la pagina HTML. Il browser ha poi il compito di trasformare il codice HTML (puro testo), in elementi grafici e ipertestuali.
Compatibilità e dintorni
Con lo sviluppo e la diffusione 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 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. Queste informazioni sono usate tipicamente da servizi come search engine (google, yahoo, ecc...) e altri servizi web per permettere una migliore analisi del sito. Un banale esempio è il tag usato per dare il nome a una pagina web.
<head>
<title>Titolo</title>
<meta charset="UTF-8">
<meta name="keywords" content="HTML,WIKI">
</head>
Nell'esempio appena visto indichiamo che la pagina web ha come titolo -> Titolo, indichiamo la codifica dei caratteri come UTF-8, con name indichiamo 2 parole chiave ->HTML,WIKI.
Metadati
Gli elementi di metadati che vanno inseriti all'interno del tag <head> sono elementi che definiscono la presentazione della pagina, il collegamento con altri file, il comportamento e altre caratteristiche.
title
Il metadato title definisce il titolo del documento (pagina). Il titolo deve essere adeguato al contenuto della pagina dato che servirà anche come nominativo per il salvataggio nei preferiti, oltre che sarà visto dai vari search engine. [1]
base
Il metadato base indica il path base sul quale poi si andranno a basare tutti gli altri relativi.
<head>
<base href="/immagini/ita/macchine/">
</head>
Ogni volta che inserirò un url di un'immagine che contiene quello indicato in base non dovrò riscriverlo ma trattarlo come path relativo.
link Il metatag link viene utilizzato per creare delle relazioni tra il documento e altre risorse, generalmente viene utilizzato per collegare un Foglio di stile al nostro documento.
<head>
<link rel="stylesheet" type="text/css" href="base.css">
</head>
In questo esempio viene collegato un foglio di stile css al nostro documento.
Questi sono solo alcuni dei meta tags che si possono usare.
Body
Nel tag body troviamo tutto il resto dei tag, contiene il contenuto vero e proprio del documento il browser visualizza. 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>
N.B. In HTML5 non è più obbligatorio scrivere i tag <html> e <head>, ciònonostante è caldamente raccomandato inserirli, per il corretto funzionamento della pagina.
Per visualizzare il risultato così ottenuto, è sufficiente creare un semplice file di testo con estensione .html e copiarci all'interno il codice qui sopra scritto. Il risultato dovrebbe essere simile a questo:
Risorse Esterne
Guida HTML in Italiano su Mr. Webmaster
Guida HTML su MDN
HTML Guida completa su Corsidia