HTML5-01-Tag Fondamentali

Autore: Bocchi Cinzia Ultimo aggiornamento: 15/09/2013

1

Linguaggio HTML - Tag fondamentali Introduzione

HTML (acronimo per Hyper Text Mark-Up Language) è un linguaggio di markup usato per descrivere il contenuto delle pagine web. In generale, un linguaggio di markup utilizza dei simboli convenzionali (marcatori) che specificano il modo in cui deve essere rappresentato il testo. In HTML i marcatori sono chiamati tag o elementi.

I tag HTML sono delle parole chiave (keyword) racchiuse tra parentesi angolari (simboli di minore e maggiore), come per esempio <html>. Solitamente i tag sono utilizzati in coppia; il primo tag è detto start tag mentre il secondo tag è detto end tag e si differenzia dal primo perché la parola chiave è preceduta da uno slash (/). Per esempio, la seguente marcatura specifica che il testo “Introduzione a HTML” dovrà essere visualizzato in grassetto:

<b>Introduzione a HTML</b>

Non sempre i tag HTML appaiono in coppia; in alcuni casi viene utilizzato solo lo start tag. Per esempio, la marcatura seguente, che consente di inserire un'immagine nella pagina, ha il solo tag iniziale:

<img src=”immagine.jpg” alt=”immagine”>

I documenti HTML vengono visualizzati dai browser, cioè programmi quali Chrome, Firefox, Opera, Internet Explorer, Safari (tanto per citare i principali). Questi programmi usano i tag per determinare come deve essere presentata all'utente la pagina HTML.

Quasi tutti i tag ammettono l'uso di attributi, facoltativi o obbligatori, nel formato:

<start tag attributo=”valore”> <end tag>

Per esempio, il tag <img> più sopra specifica due attributi con i relativi valori. L'attributo src consente di indicare il nome del file immagine, mentre l'attributo alt contiene una descrizione alternativa che sarà visualizzata al posto dell'immagine, qualora essa non possa essere visualizzata correttamente dal browser.

Infine, il linguaggio HTML è case insensitive, cioè i tag e gli attributi dei tag possono essere scritti indifferentemente in maiuscolo o in minuscolo. Tuttavia, occorre fare attenzione ai valori degli attributi poiché in alcuni casi potrebbe non essere indifferente

scrivere in maiuscolo o in minuscolo. Per esempio, src=”immagine.jpg” è diverso da

src=”IMMAGINE.jpg” poiché sono diversi i file che contengono l'immagine.

Evoluzione del linguaggio HTML

Il linguaggio HTML fu sviluppato da Tim Berners-Lee nel 1991. La prima versione fu rilasciata nel 1992. Ad essa seguì, nel 1993 la versione 2.0. Le prime versioni si limitavano a consentire la creazione di pagine di testo con collegamenti ipertestuali (link). Le potenzialità di impaginazione grafica e di sviluppo multimediale erano quasi nulle.

http://it.wikipedia.org/wiki/Tim_Berners-Lee


2

Fig. 1 - Pagina web realizzata con le prime versioni di HTML

Nel 1995 fu rilasciata la versione 3.0, che non ebbe successo, per vari motivi, tra i quali il conflitto commerciale e di immagine tra diversi produttori - in particolare Microsoft e Netscape - che tentavano di imporsi sul mercato dei browser. Le due aziende decisero di implementare solamente un sottoinsieme delle funzionalità descritte nelle specifiche e aggiunsero al contempo estensioni proprietarie che miravano soprattutto al controllo dello stile e del look&feel1 delle pagine web (visual markup). Questo approccio era in netto contrasto con gli obiettivi che avevano portato allo sviluppo di HTML: definire cioè la struttura di un documento e il suo formato, non il suo aspetto. Inoltre, le estensioni proprietarie alimentarono il problema dell'incompatibilità tra browser diversi, problema che è tuttora presente nonostante gli sforzi di standardizzazione da parte dello IETF (Internet Engineering Task Force) prima e del W3C (World Wide Web Consortium) poi. Occorre precisare che il W3C non è un organismo di standardizzazione ma il suo compito è invitare i produttori a seguire le proprie “Raccomandazioni” (Recommendation).

Nel dicembre 1997 il W3C pubblicò la Recommendation HTML 4.0 che deprecava i tag relativi allo stile, caldeggiando in alternativa l'uso dei CSS (Cascading Style Sheets). Nel dicembre del 1999 fu pubblicata la Recommendation HTML 4.01.

Parallelamente, a partire dall'anno 2000, fu sviluppato il linguaggio di markup XHTML (eXtensible HyperText Markup Language). Esso abbina i linguaggi HTML e XML (eXtensible Markup Language). Quest'ultimo è un linguaggio di markup che consente di definire tag personalizzati. Si tratta in realtà di un metalinguaggio derivato dall'SGML (Standard Generalized Markup Language) utilizzato per creare nuovi linguaggi, atti a descrivere documenti strutturati. XML è utilizzato anche per lo scambio di informazioni tra sistemi diversi, per la rappresentazione di immagini e per la definizione di formati di dati. XHTML prevede un uso più restrittivo dei tag HTML, sia in termini di validità che in termini di sintassi, per descrivere solo la struttura logica della pagina, mentre il layout e la resa grafica sono imposti con i CSS. XHTML è comunque un linguaggio separato da HTML, che continua ad essere sviluppato e che è giunto, nel 2013, alla versione denominata XHTML5, basata su HTML5.

Dal 2008 il W3C ha iniziato a lavorare allo sviluppo di HTML5. HTML5 è ancora in via di definizione e non è ancora supportato pienamente da tutti i browser. Esso dovrebbe acquisire lo stato di raccomandazione a ridosso del 2015.

1 Look&Feel (abbreviata talvolta con L&F) viene usata per descrivere le caratteristiche percepite dall'utente di una interfaccia grafica,

sia in termini di apparenza visiva (il look) che di modalità di interazione (il feel).

http://www.ietf.org/

http://www.ietf.org/

http://www.w3.org/


3

Struttura di una pagina html

<!DOCTYPE html>

<html>

<head>

...........

</head>

<body>

...........

</body>

</html>

Una pagina html deve obbligatoriamente contenere i tag <html>, <head> e <body>.

Il tag <html> racchiude tutto il documento.

Il tag <head> contiene l’intestazione del documento.

Il tag <body> contiene il corpo del documento, cioè il contenuto visibile della pagina.

La riga <!DOCTYPE html> è una dichiarazione (non obbligatoria ma consigliata) che

consente ai browser di sapere che si sta usando HTML5 e, conseguentemente, di visualizzare correttamente la pagina web. Esistono altre dichiarazioni DOCTYPE, diverse per le varie versioni del linguaggio.

L'elemento <head>

La sezione che rappresenta l’intestazione del documento, contiene il titolo della pagina e altre informazioni opzionali. Tra queste vi sono le meta-informazioni, quali l’autore del documento, l’editor utilizzato per scriverlo e così via. Le meta-informazioni non vengono visualizzate nella pagina ma possono essere lette da un computer.

<!DOCTYPE html>

<html>

<head>

<title>Titolo del documento</title>

<meta name="keywords" content="keyword1, keyword2, ...">

<meta name="description" content="descrizione">

<meta name="author" content="nome e cognome dell’autore">

<meta name="generator" content="nome dell’editor">

<meta http-equiv="refresh" content="x secondi">

<meta http-equiv="refresh" content="x secondi;URL=url pagina">

<meta charset="UTF-8">

</head>

<body>

...........

</body>

</html>

Il tag <title> è obbligatorio e definisce il titolo che comparirà nella toolbar del browser. Si tratta di un elemento importante poiché fornisce un titolo alla pagina quando vogliamo aggiungerla ai preferiti e perché visualizza un titolo per la pagina quando questa viene mostrata nei risultati di un motore di ricerca.

Il tag <meta> può specificare 4 attributi globali: name, content, http-equiv e charset.


4

Il primo meta-tag dell’esempio (keywords) definisce alcune parole chiave, separate da virgole, che saranno utilizzate dai motori di ricerca. Il secondo meta-tag (description) consente di inserire una descrizione della pagina. Il terzo meta-tag (author) specifica l'autore del contenuto. Il quarto meta-tag (generator) specifica l’editor utilizzato per creare la pagina.

I meta.tag http-equiv contiene informazioni usate nella comunicazione tra client e server. Il quinto meta-tag ricarica la pagina dopo x secondi. Il sesto meta-tag ricarica la pagina specificata, dopo x secondi.

Infine, in HTML5 è stato aggiunto l’attributo charset (settimo meta-tag) per semplificare la specifica della codifica dei caratteri utilizzata. UTF-8 è una codifica di caratteri UNICODE che tutti i protocolli di Internet dovrebbero essere in grado di utilizzare.

Creare e visualizzare la prima pagina HTML

Esistono molti strumenti per creare pagine html. Per cominciare, useremo un l’editor testuale Notepad++, scaricabile alla pagina http://notepad-plus-plus.org/. Dopo l’installazione, avviate l’applicativo. Dovreste trovarvi in un ambiente simile a quello rappresentato in figura 2.

Fig. 2 – L’ambiente di lavoro in Notepad++

Copiate il codice seguente, sostituendo il nome dell’autore con il vostro:

http://notepad-plus-plus.org/


5

Create una cartella dal nome html5 e salvatevi il file con nome esempio01-1 ed

estensione html. Potete procedere in due modi:

1) Scrivere il nome del file con la sua estensione (esempio01-1.html) e scegliere

dall’elenco “Salva come” l’opzione All Types (è la prima voce dell’elenco). 2) Scrivere il nome del file senza l’estensione e scegliere dall’elenco l’opzione Hyper

Text Markup Language file, come mostrato nella figura 3.

Fig. 3 – Opzioni dell’elenco Salva come

Aprite la cartella html5 creata in precedenza. Dovreste vedere il vostro file rappresentato

con l’icona del browser di default. Facendo doppio clic sull’icona, il file si aprirà nel browser e mostrerà il testo inserito tra i tag <h1> e </h1>. In alternativa, potete aprire la pagina nel browser utilizzando il menu Esegui di Notepad++ e selezionando il browser preferito.

Se, invece, volete aprire il file in modalità modifica, fate clic su di esso con il pulsante destro del mouse e scegliete dal menu che apparirà la voce Apri con>Notepad++.

Quest'opera è distribuita con Licenza Creative Commons Attribuzione - Non commerciale - Condividi allo stesso modo 3.0 Italia.

http://creativecommons.org/licenses/by-nc-sa/3.0/it/

http://creativecommons.org/licenses/by-nc-sa/3.0/it/

HTML5-01-Tag Fondamentali

Documents

Transcript of HTML5-01-Tag Fondamentali