Il linguaggio HTML - Nozioni di base

Transcript

1 Corso IFTS Informatica, Modulo 3 Progettazione pagine web statiche (50 ore) Il linguaggio HTML - Nozioni di base Dott. Chiara Braghin braghin@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 2 1

2 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 3 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 4 2

3 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 5 Problemi e limiti di HTML Crescita disordinata e incompatibilità HTML 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 6 3

4 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 dati tra applicazioni, accesso a basi di dati, ecc. C. Braghin - HTML: nozioni di base 7 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 8 4

5 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 9 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 10 5

6 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 11 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 12 6

7 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 13 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 14 7

8 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 15 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 16 8

9 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 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 17 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=" 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 18 9