Il linguaggio HTML

Corso IFTSInformatica, Modulo 3 – Progettazione pagine web statiche (50 ore) Il linguaggio HTML - Nozioni di base Dott. Chiara Braghinbraghin@dti.unimi.it

What is HTML? • HTML (HyperText Markup Language) è un linguaggio per la costruzione di ipertesti. • È un linguaggio di markup: descrive, tramite TAG predefiniti, in modo preciso al browser sia il tipo del contenuto del documento che come esso deve apparire all’utente. • Storia di HTML: • 1992: prima versione del linguaggio HTML • ~ 1994: HTML 3.0 diventa uno standard • Dicembre 1997: Recommendation HTML 4.01 del W3C • Il browser interpreta i tag e formatta il contenuto del file html - ovvero, sistema visivamente i caratteri -nel modo voluto dal suo autore (dimensione, fine riga, fine paragrafo, tabelle, colori, ecc.) C. Braghin - HTML: nozioni di base

Struttura di file HTML • Un documento HTML in genere contiene immagini e fa riferimento attraverso dei link ad altri file che si trovano sullo stesso server o su di un server diverso • L’informzione (file HTML e immagini) viene conservata nel server in diverse cartelle che possono essere annidate l’una dentro l’altra: • Quando, tramite un link, si fa riferimento ad un file o ad una immagine, oltre al nome del file è necessario inserire anche la locazione in cui si trova. Quest’informazione può venire data in 2 modi: • Percorso relativo: il percorso relativo per il documento “page.html” dell’immagine è "/directory/foldertwo/page.html”. • Percorso assoluto: l’intero percorso dalla root directory. C. Braghin - HTML: nozioni di base

Come creare un file HTML? • Con un normale editor di testi. L’importante è che il file abbia l’estensione .html (o .htm - in Win3.x non erano supportate estensioni più lunghe di tre caratteri), altrimenti il browser non lo riconosce. • Con un editor specifico WYSIWYG(What You See Is What You Get), tipo Dreamweaver, Adobe GoLive o il composer di Mozilla/Netscape dalla versione 3.0 in poi. • Con un programma di videoscrittura che contiene l’opzione “salva come HTML” e permette di convertire il risultato in un file HTML. Il contenuto però può venire interpretato in modo indesiderato e non univoco, e spesso vengono aggiunti inutili tag che rendono il file più pesante. • Soluzione ibrida: con text-editor pensati per scrivere in HTML e che permettono di lavorare sul file sorgente (con i tag visibili) ma contengono menu e bottoni che suggeriscono i comandi. C. Braghin - HTML: nozioni di base

La guerra dei browser • HTML appartiene alla famiglia dei linguaggi SGML, ma è molto più semplice • appena introdotto era troppo povero, non permetteva frame né immagini, perché orientato alla trasmissione dei contenuti, poco al layout • Per accaparrarsi più utenti, i browser hanno cominciato ad inserire nel linguaggio nuovi tag proprietari • blink (Netscape): testo lampeggiante • marquee (Internet Explorer): testo scorrevole • La guerra dei browser ha portato un arricchimento delle possibilità offerte ma anche grossi problemi di incompatibilità • HTML 4.0 viene considerato lo standard a cui le nuove versioni e I browser devono fare riferimento, anche non risolve del tutto il problema di incompatibilità • In genere, è consigliabile testare la pagina HTML generata su diversi browser, oppure limitarsi ad utilizzare i TAG più standard. C. Braghin - HTML: nozioni di base

Problemi e limiti di HTML • Crescita disordinata e incompatibilità • HTML 4.0.1 • Contenuto e aspetto non vengono considerati separatamente • Cascading Style Sheet (CSS) fogli di stile • Il numero notevole di pagine web presenti oggi rende difficile qualunque modifica al linguaggio HTML che non sia retro-compatibile • Come fare? C. Braghin - HTML: nozioni di base

La scommessa del W3C: XML • XML, eXtensible Markup Language risolve molti problemi: • separa contenuto da presentazione • permette un’espandibilità senza fine del linguaggio (i tag vengono definiti dall’utente a seconda della necessità) • adatto a contenuti internazionali • adatto a dispositivi di visualizzazione diversi (browser,wap, palmari, ecc.) • utilizzato in molti settori: web services, scambio datitra applicazioni, accesso a basi di dati, ecc. C. Braghin - HTML: nozioni di base

I tag HTML (1) • I tag sono gli elementi della pagina HTML che servono per definire il tipo e il formato del contenuto, in questo modo il testo scritto appare nel formato voluto • Caratteristiche principali: • sono racchiusi da parentesi <angolate> • <HTML> • molti elementi possono avere argomenti (chiamati attributi) all'interno dei tag che definiscono parametri sulla gestione dell'elemento stesso da parte del browser • <BODY BGCOLOR=“red”> • la maggior parte dei tag ha un inizio (tag di apertura) e una fine (tag di chiusura) • <HTML> e </HTML> • Per chiudere un tag basta aggiungere / al tag iniziale • i tag possono essere scritti indifferentemente con lettere maiuscole o minuscole C. Braghin - HTML: nozioni di base

I tag HTML (2) - Regole di scrittura • Regole per una corretta scrittura (non tutte obbligatorie): • I tag vanno scritti sempre nello stesso modo • non <HTML> e </html> • I tag vanno aperti e chiusi sempre nello stesso ordine ma devono essere annidati fra loro e non sovrapposti: • <THIS><THAT></THIS></THAT> - tag sovrapposti, sbagliato • <THIS><THAT></THAT></THIS> - tag annidati, giusto • Esempio: non si deve scrivere <body><p>Contenuto della pagina</body></p> • I valori vanno inseriti tra “virgolette” o ‘apici’ • Il browser interpreta al meglio pagine web che non rispettino queste regole, ma browser diversi possono dare risultati visivi diversi. C. Braghin - HTML: nozioni di base

Struttura di un documento HTML (1) • Un documento HTML si compone di due parti identificate da un tag di apertura ed uno di chiusura, entrambe contenute in un tag principale: • <HTML> - tag principale necessario per identificare il tipo di documento. Deve essere sempre definito. • <HEAD> - intestazione, contiene il tag per definire il titolo della pagina e altre informazioni che non sono generalmente visualizzate insieme al testo del documento vero e proprio • <BODY> - corpo, la parte principale del documento contenente tutto il contenuto, comprese immagini, link ad altre pagine HTML e tag che modificano il layout di testo ed immagini • NOTA: Elementi permessi all'interno dell'HEAD, come il titolo (TITLE), non sono permessi all'interno del BODY, e viceversa. C. Braghin - HTML: nozioni di base

Struttura di un documento HTML (2) <HTML> <HEAD> <TITLE> Questo e’ il titolo che appare sulla striscia alta della finestra </TITLE> </HEAD> <BODY> Qui si scrive il documento. </BODY> </HTML> • Il tag <HTML> è esterno rispetto a tutti gli altri tag • Esempio1: primaPagina.html C. Braghin - HTML: nozioni di base

Come creare il primo file HTML (1) • 1. Aprire un editor di testo • 2. Creare un nuovo file e salvarlo con l’estensione .html • 3. Una volta scritti tutti i comandi HTML che ci sembrano opportuni nella nostra pagina WEB, salvare il file • 4. Aprire il browser (Netscape, Firefox, Internet Explorer, Safari,…) • 5. Selezionare il comando “Aprire file” dal menu File e scegliere il file appena creato • 6. Visualizzare il file nella finestra del browser • 7. Se si fanno modifiche al file e la finestra del browser è ancora aperta, selezionare il pulsante “Reload” della barra degli strumenti e saranno visibili le modifiche fatte (se le abbiamo precedentemente salvate nel nostro file originale). • Al momento la pagina è visibile "in locale", cioè solo sul computer su cui stiamo lavorando, per renderla visibile a tutti (tecnicamente si dice metterla "in linea" o "in rete") va inviata (insieme agli eventuali file di figure che abbiamo inserito) al gestore del Server Web che la collocherà sul computer opportuno. C. Braghin - HTML: nozioni di base

Come creare il primo file HTML (2) WordPad (o qualunque altro editor di testo) documento HTML scegliere il formato solo testo e salvare con estensione .html C. Braghin - HTML: nozioni di base

Intestazione - <HEAD> • La parte contenuta tra i tag <HEAD> e </HEAD> viene chiamata intestazione • contiene informazioni generali, o meta-informazioni, che riguardano il documento. • il contenuto dell'HEAD non viene visualizzato come una parte del testo del documento: il materiale da visualizzare e' contenuto all'interno del BODY. • Solo determinati tag possono essere posti all'interno dell'HEAD. In particolare, non può comparire direttamente del testo. • Un tag deve SEMPRE comparire nell’intestazione, e si tratta di <TITLE>: • <TITLE> contiene il titolo del documento. Questo elemento è obbligatorio -- tutti i documenti devono avere un TITLE. C. Braghin - HTML: nozioni di base

Altri elementi di <HEAD> • <BASE> - imposta l’URL di base del documento, utilizzata per risolvere i riferimenti relativi • permette di muovere il documento in un altra directory (o addirittura in un nuovo sito) senza alterare il funzionamento dei link a URL relativi • <STYLE> - permette di specificare uno stile per definire la formattazione del documento • <SCRIPT> - permette l’inserimento di script per “animare” la pagina (con JavaScript e VBScript) • <META> - contiene le meta-informazioni relative al documento • <META NAME="author” CONTENT="Francesco Stillitano"> • <META NAME="keywords" CONTENT="html documentazione guida url"> • <META NAME="editor" CONTENT="Win95 Notepad"> • L'attributo NAME comunque si riferisce a valori arbitrari definiti dall'utente. C. Braghin - HTML: nozioni di base

Corpo del documento - <BODY> • La parte contenuta tra i tag <BODY> e </BODY> viene chiamata corpo del documento • All'interno di <BODY> si trova il contenuto del documento, ovvero quello che si vedrà a video • Molteplici elementi possono essere contenuti nel <BODY>: • Immagini • Suoni o filmati • Testo, eventualmente organizzato in tabelle o form • Link • La sezione<BODY>contiene quindi tutti i tag che descrivono come la pagina viene visualizzata all’utente: • colori (per i font e per il background) • font utilizzati • immagini, link, tabelle… C. Braghin - HTML: nozioni di base

Attributi di <BODY> - Colore dello sfondo • BGCOLOR=“#rrggbb” • Attribuisce allo sfondo della pagina uno specifico colore RGB • Il colore può essere espresso sia col nome inglese che nel relativo codice RR GG e BB sono i codici colore esadecimali per i livelli di Rosso (red), Verde (green) e Blu (blue), che vanno da 0 a 255 -- cioè in esadecimale, da 00 a FF esadecimale -- • il colore "#000000" è il nero • Il colore "#FFFFFF" è il bianco • Se c'è anche un'immagine di background (vedi prossima slide), il valore di BGCOLOR e' usato per il colore al di sotto dell'immagine di background -- se l'immagine di background ha parti trasparenti, questo e' il colore che verra' visualizzato. • La maggior parte dei nuovi browser supporta al posto dei valori RGB anche i nomi dei colori più comuni in inglese • "black" = "#000000" = nero • "white" = "#ffffff" = bianco • Esempio2: body1_bg_color.html C. Braghin - HTML: nozioni di base

Attributi di <BODY> - Immagine come sfondo • BACKGROUND=“immagine.jpg” • inserisce un'immagine come sfondo della pagina (sono permesse immagini .gif .jpg o .png), indipendentemente dalle sue dimensioni • <BODY BACKGROUND="immagine.gif”> • <BODY BACKGROUND="http://altrosito.it/path/immagine.gif"> • se l’immagine non è sufficientemente grande, lo sfondo del documento viene riempito ripetutamente della stessa immagine • BGPROPERTIES=“fixed” • l'immagine adoperata a riempimento può essere tenuta ferma durante lo spostamento verticale (scrolling) sulla pagina (solo con Internet Explorer, o con CSS) • <body background="immagine.gif" bgproperties="fixed"> • Esempio3: body2_bg_image.html C. Braghin - HTML: nozioni di base

Il linguaggio HTML - Nozioni di base