Scribd Logo
Upload

Welcome to Scribd!

  • HTML5-01-Tag Fondamentali

    Uploaded by

    Cinzia Bocchi
    169 views5 pages

    Copyright

    © Attribution Non-Commercial ShareAlike (BY-NC-SA)

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    Attribution Non-Commercial ShareAlike (BY-NC-SA)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    169 views5 pages

    HTML5-01-Tag Fondamentali

    Uploaded by

    Cinzia Bocchi

    Copyright:

    Attribution Non-Commercial ShareAlike (BY-NC-SA)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 5

    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.

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

    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).

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

    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 lintestazione 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 lintestazione del documento, contiene il titolo della pagina e altre informazioni opzionali. Tra queste vi sono le meta-informazioni, quali lautore del documento, leditor 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 dellautore"> <meta name="generator" content="nome delleditor"> <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. 3
    Autore: Bocchi Cinzia Ultimo aggiornamento: 15/09/2013

    Il primo meta-tag dellesempio (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 leditor 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 lattributo 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 leditor testuale Notepad++, scaricabile alla pagina http://notepad-plus-plus.org/. Dopo linstallazione, avviate lapplicativo. Dovreste trovarvi in un ambiente simile a quello rappresentato in figura 2.

    Fig. 2 Lambiente di lavoro in Notepad++

    Copiate il codice seguente, sostituendo il nome dellautore con il vostro:

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

    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 dallelenco Salva come lopzione All Types ( la prima voce dellelenco). 2) Scrivere il nome del file senza lestensione e scegliere dallelenco lopzione Hyper Text Markup Language file, come mostrato nella figura 3.

    Fig. 3 Opzioni dellelenco Salva come

    Aprite la cartella html5 creata in precedenza. Dovreste vedere il vostro file rappresentato con licona del browser di default. Facendo doppio clic sullicona, il file si apr ir 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.

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

    You might also like