HTML

lezione HTML
	Tipo: lezione
	Materie: Linguaggi di programmazione web WebEditing (ECDL)

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:

Tutti i tag

Tag	Descrizione
<!--...-->	Definisce un commento
<!DOCTYPE>	Definisce il tipo di documento
<a>	Definisce un hyperlink (collegamento)
<abbr>	Definisce un abbreviazione o un acronimo
<address>	Definisce le informazioni di contatto dell'autore del documento
<area>	Definisce l'area all'interno di una image-map
<article>	Definisce un articolo
<aside>	Definisce un contenuto al di fuori dal contesto della pagina
<audio>	Definisce un contenuto sonoro
<b>	Definisce un testo in grassetto
<base>	Specifica l' URL/obbiettivo per tutti gli hyperlink relativi (all'interno delle ") del documento
<bdi>	Isola una parte di testo che deve essere formattata in modo differente dal resto del documento
<bdo>	Sostituisce la direzione del testo corrente
<blockquote>	Definisce una sezione quotata da un'altra fonte
<body>	Definisce il corpo di un elemento
<br>	Definisce una singola interruzione di riga
<button>	Definisce un pulsante premibile
<canvas>	Utilizzato per disegnare grafici tramite script
<caption>	Definisce una didascalia della tabella
<cite>	Definisce il titolo di un lavoro
<code>	Definisce un pezzo di codice del computer
<colgroup>	Specifica la formattazione di una o più colonne in una tabella
<col>	Specifica le proprietà di ogni colonna senza l'elemento <colgroup>
<data>	Collega il contenuto fornito con una traduzione leggibile automaticamente
<datalist>	Specifica un elenco di opzioni predefinite per i controlli di input
<del>	Definisce il testo che è stato eliminato da un documento
<details>	Definisce ulteriori dettagli che l'utente può visualizzare o nascondere
<dfn>	Rappresenta l'istanza di definizione di un termine
<dialog>	Definisce una finestra di dialogo o una finestra
<div>	Definisce una sezione in un documento
<dl>	Definisce un elenco di descrizioni
<dd>	Definisce una descrizione/valore di un termine in un elenco di descrizioni
<dt>	Definisce un termine / nome in un elenco di descrizioni
<em>	Definisce il testo enfatizzato
<embed>	Definisce un contenitore per un'applicazione esterna (non HTML)
<fieldset>	Raggruppa elementi correlati in un modulo
<figcaption>	Definisce una didascalia per un elemento <figure>
<figure>	Specifica il contenuto autonomo
<font>	Non supportato in HTML5. Usa invece CSS. Definisce il carattere, il colore e le dimensioni del testo
<footer>	Definisce un piè di pagina per un documento o una sezione
<form>	Definisce un modulo HTML per l'input dell'utente
<h1> to <h6>	Definisce le intestazioni HTML
<head>	Definisce informazioni sul documento
<header>	Definisce un'intestazione per un documento o una sezione
<hr>	Definisce una modifica tematica nel contenuto
<html>	Definisce la "radice" di un documento HTML
<i>	Definisce un testo da visualizzare in italico
<iframe>	Definisce un frame incorporato
<img>	Definisce un'immagine
<input>	Definisce un controllo di input
<ins>	Definisce un testo che è stato inserito in un documento
<kbd>	Definisce l'input da tastiera
<label>	Definisce un'etichetta per un elemento <input>
<legend>	Definisce una didascalia per un elemento <fieldset>
<li>	Definisce una voce di elenco
<link>	Definisce la relazione tra un documento e una risorsa esterna (utilizzata per collegare fogli di stile)
<main>	Specifica il contenuto principale di un documento
<map>	Definisce una image-map sul lato client
<mark>	Definisce il testo evidenziato
<meta>	Definisce i metadati su un documento HTML
<meter>	Definisce una misurazione scalare all'interno di un intervallo noto
<nav>	Definisce i collegamenti di navigazione
<noscript>	Definisce un contenuto alternativo per gli utenti che non supportano gli script lato client
<object>	Definisce un oggetto incorporato
<ol>	Definisce un elenco numerato
<optgroup>	Definisce un gruppo di opzioni correlate in un elenco a discesa
<option>	Definisce un'opzione in un elenco a discesa
<output>	Definisce il risultato di un calcolo
<p>	Definisce un paragrafo
<param>	Definisce un parametro per un oggetto
<picture>	Definisce un contenitore per più risorse di immagine
<pre>	Definisce il testo preformattato
<progress>	Rappresenta l'avanzamento di un'attività
<q>	Definisce una breve citazione
<rp>	Definisce cosa mostrare nei browser che non supportano le annotazioni ruby
<rt>	Definisce una spiegazione / pronuncia dei caratteri (per la tipografia dell'Asia orientale)
<ruby>	Definisce un'annotazione rubino (per tipografia dell'Asia orientale)
<s>	Definisce il testo che non è più corretto
<samp>	Definisce l'output di esempio da un programma per computer
<script>	Definisce uno script sul lato client
<section>	Definisce una sezione in un documento
<select>	Definisce un elenco a discesa
<small>	Definisce un testo più piccolo
<source>	Definisce più risorse multimediali per gli elementi multimediali (<video> e <audio>)
<span>	Definisce una sezione in un documento
<strong>	Definisce un testo importante
<style>	Definisce le informazioni di stile per un documento
<sub>	Definisce il testo sottoscritto
<summary>	Definisce un'intestazione visibile per un elemento <details>
<sup>	Definisce il testo sovrascritto
<svg>	Definisce un contenitore per la grafica SVG
<table>	Definisce una tabella
<tbody>	Raggruppa il contenuto del corpo in una tabella
<td>	Definisce una cella in una tabella
<template>	Definisce un modello
<textarea>	Definisce un controllo di input su più righe (area di testo)
<tfoot>	Raggruppa il contenuto del piè di pagina in una tabella
<th>	Definisce una cella di intestazione in una tabella
<thead>	Raggruppa il contenuto dell'intestazione in una tabella
<time>	Definisce una data / ora
<title>	Definisce un titolo per il documento
<tr>	Definisce una riga in una tabella
<track>	Definisce le tracce di testo per gli elementi multimediali (<video> e <audio>)
<tt>	Non supportato in HTML5. Usa invece CSS. Definisce il testo del tipo di telefono
<u>	Definisce il testo che dovrebbe essere stilisticamente diverso dal testo normale
<ul>	Definisce un elenco puntato
<var>	Definisce una variabile
<video>	Definisce un video o un film
<wbr>	Definisce una possibile interruzione di riga

Risorse Esterne

Guida HTML in Italiano su Mr. Webmaster
Guida HTML su MDN
HTML Guida completa su Corsidia

Riferimenti

1 https://www.w3schools.com/tags/tag_meta.asp