IL WEB. Il linguaggio HTML

Transcript

1 IL WEB Il World Wide Web (o web o WWW) nasce al CERN come strumento a disposizione degli scienziati per la condivisione di informazioni utili per la ricerca. Ben presto l uso del web si estende dal mondo scientifico a quello dell educazione e poi anche a quello delle organizzazioni governative e commerciali. Il web non è altro che un enorme ipertesto distribuito in cui le pagine sono memorizzate in milioni di server web sparsi in giro per il mondo. Ogni sito è collegato ad altri e questo crea la ragnatela ipertestuale entro cui si può navigare. Esistono poi dei motori di ricerca e dei portali che aiutano il navigatore fornendogli collegamenti ai siti di suo interesse. Il linguaggio HTML HTML (Hypertext Markup Language) è il linguaggio per la costruzione delle pagine web che permette di definire come devono essere visualizzate le pagine web e di realizzare legami ipertestuali tra pagine diverse. Quest ultima caratteristica ha permesso di fare del web un enorme contenitore di documenti correlati tra di loro. Si tratta di un linguaggio di markup (o 'di marcatura'), che permette di indicare come disporre gli elementi all'interno di una pagina. Un documento HTML è infatti un file di testo che contiene delle istruzioni dette tag o comandi che specificano le caratteristiche di visualizzazione del documento stesso. I browser leggono il file HTML e grazia all interpretazione dei tag li visualizzano come specificato nel file stesso. HTML non ha meccanismi che consentono di prendere delle decisioni ("in questa situazione fai questo, in quest'altra fai quest'altro"), e non è in grado di compiere delle iterazioni ("ripeti questa cosa, finché non succede questo"), né ha altri costrutti propri della programmazione. L'organizzazione che si occupa di standardizzare la sintassi del linguaggio HTML è il W3C: World Wide Web Consortium. La mia prima pagina HTML Per iniziare a scrivere pagine web avete bisogno di: uno o più browser per visualizzare le pagine un editor testuale per scrivere il codice HTML (potete usare il blocco note di Windows, o altri editor testuali come UltraEdit oppure Html Kit, che è gratuito. Nota: esistono degli editor visuali come FrontPage, DreamWeaver o GoLive che facilitano lo sviluppo delle pagine web, programmi specializzati per la scrittura di pagine HTML che semplificano il lavoro e software professionali per la realizzazione e gestione di interi siti, compresa la gestione di grafica sofisticata. Aprite una pagina con il blocco note e salvate il file in qualche cartella del vostro computer. Il file dovrà avere estensione "html", ad esempio miapagina.html.

2 Le istruzioni HTML sono formate da parole chiave racchiuse tra i simboli < e > che vengono scritte insieme al testo. Si introducono dei tag che hanno il formato <comando> e </comando> : tutto quello che è racchiuso tra coppie di tag deve essere interpretato secondo quanto specificato dal comando. Per cui la sintassi per inserire tag ha la seguente forma <TAG attributi>contenuto</tag> I tag del linguaggio permettono di creare tabelle, liste in cui l utente può inserire dati, creare immagini, etc Struttura di una pagina HTML Una pagina HTML inizia generalmente con una dichiarazione sulla versione di HTML che è stata usata seguita dal tag <html> che è chiuso alla fine del documento. Tale tag funge da contenitore per il documento e contiene due sezioni: 1. <head> </head>: contiene informazioni non immediatamente percepibili, ma che riguardano il modo in cui il documento deve essere letto e interpretato. Il testo compreso tra questi tag costituisce la parte di intestazione della pagina. All interno dell intestazione sono specificati il titolo del documento oltre ad altre caratteristiche che possono essere utilizzate dai browser o dai motori di ricerca per effettuare l indicizzazione della pagina. Si trattano di tag che non portano ad alcuna visualizzazione. Solo il testo compreso tra <title> e </title> è visualizzato nella barra del browser. Questo è il luogo dove scrivere - ad esempio - i meta-tag (alcuni sono ad esclusivo beneficio dei motori di ricerca), script Java Script, fogli di stile, etc Due tag presenti all interno di questa sezione sono: <meta http-equiv="content-type" content="text/html; charset=iso "> che indica al browser che deve caricare il set di caratteri occidentale <title>nome del sito</title> è il titolo della pagina che compare in alto sulla barra del browser 2. < body > < /body >: racchiude il contenuto vero e proprio del documento. Tutto quello che è contenuto in questa coppia di tag costituisce il corpo della pagina ovvero il documento visibile nella finestra del browser. All interno di questa coppia s inseriscono altri tag che forniscono al browser le direttive di formattazione Template di una pagina HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <html> <head>

3 <title> titolo del documento </title> </head> <body> contenuto del documento </body> </html> Nota: ogni documento HTML necessita di un titolo (che va inserito dentro la sezione definita da <head>) <title> titolo documento HTML </title> Alcuni tag commenti: ; il testo racchiuso tra <b> </b> deve essere visualizzato in grassetto (mentre <i> </i> indica il corsivo); per andare semplicemente a capo si usa il solo tag <br> (non vuole il tag di chiusura). Per saltare una riga ne occorrono due: <br><br>; per tracciare una linea orizzontale (ad es. per dividere la pagina in parti) si usa <hr> ("horizontal rule"). Anche questo tag non vuole quello di chiusura. Tag di formattazione <p> </p> delimita un paragrafo lasciando spazio prima e dopo la propria chiusura; <div> </div> non lascia spazio prima e dopo la propria chiusura, ma - essendo un elemento di blocco - va a capo; <span> </span> - essendo un elemento inline - non va a capo; <h1> </h1>, <h2> </h2>,, <h6> </h6> sono i tag per i titoli, per dare le varie dimensioni; h1 è il titolo più grande; con <em> </em> si da enfasi al testo; < pre ></pre> mantiene la formattazione del testo. I browsers effettuano in modo automatico il wrapping del testo; se si vuole evitare tale formattazione automatica del testo ad es. quando si scrivono particolari parole "Coca Cola" il trucco è usare &nbsp (forza uno spazio); in sostituzione dello spazio, per cui nel codice HTML scriveremo: Coca Cola Molti tag hanno degli attributi, la sintassi corretta per un tag è infatti <tag attributo = "valore"> testo </tag> Ad esempio per disporre un testo giustificato a destra scriveremo

4 <p align="right">testo</p> Molti di questi attributi definiscono le proprietà grafiche del tag, ad es. colore, dimensione del font, allineamento, etc. Ad esempio se vogliamo impostare un colore di sfondo è necessario impostare il relativo attributo del tag body. Così: <body bgcolor = "blue"> È preferibile in molti casi utilizzare la corrispondente codifica esadecimale del colore. Per inserire un immagine come sfondo è sufficiente utilizzare la seguente sintassi: <body background = "imgsfondo.gif"> È anche possibile combinare i due attributi, in modo che mentre l immagine di sfondo viene caricata, venga comunque visualizzata una colorazione della pagina: <body bgcolor="#0000ff" background="imgsfondo.gif"> Ancora un esempio sull uso degli attributi. Il tag <hr> traccia una linea orizzontale, e potremo ad esempio adoperare tale sintassi: <hr align="center" color="blue" width="60%" size="10" noshade> dove: align allinea a sinistra (left), centro (center) e destra (right) color decide il colore della linea (solo con Internet Explorer) width decide la larghezza della linea in percentuale dell'elemento che contiene il tag o in pixel; size decide lo spessore in pixel della linea l'attributo noshade è binario: se è specificato la linea è 2D, altrimenti 3D Con l evolversi del web che ha portato a delle pagine HTML non più statiche si tende sempre di più a separare il contenuto dalla formattazione (il colore ed altri parametri). Questo è ottenuto mediante i fogli di stile nei quali sono definite le regole di formattazione per i vari tag, il contenuto della pagina diventa: <p class = "formattatitoli"> titolo 1 </p> la colorazione del testo e affidata alla classe "formattatitoli", descritta altrove nel documento, o su un file separato. Dunque basta editare la classe "formattatitoli" per cambiare l'aspetto anche di centinaia di pagine.

5 Nota: alcuni particolari tag non hanno contenuto - perché ad esempio indicano la posizione di alcuni elementi (come il tag delle immagini) -, conseguentemente questi tag non hanno neanche chiusura. Liste Il tag da utilizzare per aprire un elenco ordinato è <ol> ("ordered list") e gli elementi sono individuati dal tag <li> ("list item"). <ol type = "a"> <li> primo elemento <li> secondo elemento <li> terzo elemento </ol> L'attributo type ha i seguenti valori: type = 1, i, I, a, A. E un attributo casesensitive (non è indifferente al fatto che usiamo maiuscole o minuscole). Gli elenchi non ordinati sono individuati invece dal tag <ul> ("unordered list"), e gli elementi dell elenco sono contraddistinti anch essi dal tag <li>. <ul type= disc > <li>primo elemento <li>secondo elemento <li>terzo elemento </ul> Anche in questo caso l attributo type definisce il tipo di bullet da type = disc (valore di default), circle, square. Inclusione di immagini La maggior parte dei browser presenti supportano le immagini in formato GIF (Graphic Interchange Format, utilizzate soprattutto per la grafica) e JPEG (Joint Photographic Experts Group, formato utilizzato soprattutto per le immagini fotografiche). Il tag di base per inserire un file grafico è questo <img src ="nomefile"> Come valore dell attributo src si deve specificare il pathname del file che si vuole caricare. Con lo svilupparsi dell'html anche il tag <img> si è evoluto arricchendosi di flags che permettono un ampio controllo sull'immagine inserita:

6 <img src="nomefile" low src="nomefile" height="x" width="x" alt="nome_alternativo" align="x" vspace="x" hspace="x" border="x">. I vari flags definiscono i seguenti attributi: low src indica un file grafico alternativo in bassa risoluzione che verrà caricato prima dell'immagine vera e propria; height e width indicano le dimensioni in pixel se si desidera riscalare il file; alt indica il nome alternativo che verrà visualizzato dai browser non grafici; align indica l'allineamento dell'immagine rispetto al testo che la circonda (RIGHT, LEFT, ABSBOTTOM, ABSMIDDLE, TEXTTOP, MIDDLE, BOTTOM); vspace è la distanza verticale dal testo (espressa in pixels); hspace è la distanza orizzontale dal testo (in pixels); border la dimensione del bordo dell'immagine (sempre in pixels). Link I link sono "il ponte" che consente di passare da un testo all altro: all interno della pagina web i link ci consentono di muoverci da un documento all altro del web. Si parla di ipertesti. I link sono definiti con il tag <a>. Ecco la sintassi per creare un link con riferimento a un sito web: <a href=" HTML.IT </a> Il parametro (href) del tag permette di specificare l URL cui il legame deve portare; il testo tra <a> e </a> e usato come label per il link (di default il colore e blu sottolineato) e può essere realizzato da una parola, una frase o un immagine. È indifferente che la destinazione sia una pagina HTML di un sito, un immagine, un file pdf, un file zip, o un file exe: il meccanismo del link funziona allo stesso modo indipendentemente dal tipo di risorsa; poi il browser si comporterà in modo differente a seconda della risorsa. Esempi: <a href= /sito/pascarel.html > sito Anna </a> specifica che la frase sito Anna realizza il collegamento alla pagina pascarel.html che si trova nella directory sito. <a href= /mio/pascarel.html ><img src= logo.jpg > </a> indica che è l immagine a realizzare il collegamento. <a href= ftp:// > indice </a>

7 cliccando indice si attiva il trasferimento del file dal server ftp. Potete anche specificare un indirizzo . In questo caso si aprirà direttamente il client di posta dell utente con l indirizzo pre-impostato. La sintassi è la seguente: <a href="mailto: pascarel@dima.unige.it"> Contatti </a> Per far riferimento a un file che si trovi all interno della stessa directory basta linkare" il nome del file. Per far riferimento a un file contenuto in una cartella di livello inferiore alla posizione corrente, basta nominare la cartella seguita dallo "slash", e poi il nome del file. Secondo la formula: cartella/nomefile.html. Per tornare su di un livello, è sufficiente utilizzare la notazione:../nomefile.html. Il path "/" si riferisce alla root della directory, ossia all home page. Se il link è relativo ad una pagina contenuta in un differente sito Web si deve ricorrere ai path assoluti, ossia si deve dare l intero indirizzo della pagina web (URL). Ad es. se si vuole inserire un link al sito si deve scrivere: <a href=" È anche possibile specificare in quale finestra la pagina linkata deve essere aperta: di default infatti la pagina viene aperta all interno del documento stesso, ma è possibile specificare che la pagina sia aperta in una nuova finestra: <a target = "_blank" href=" visita HTML.IT </a> Se lasciate il cursore del mouse per qualche secondo su un collegamento dotato di title, vedrete comparire una specie di etichetta con il testo specificato nel title: <a title="in HTML.it puoi trovare risorse per webmaster" href= target="_blank" >Visita HTML.it</a> Oltre che verso documenti esterni si possono definire link verso documenti interni alla stessa pagina (utili in caso di pagine di ampie dimensioni contenenti più argomenti); per definire dei link interni bisogna compiere due operazioni, la prima consiste di definire il target (cioè il punto di arrivo del link): <a name = "demo_target">questo è il target</a> E quindi definire il link con il solito href secondo questa modalità: <a href = "#demo_target">link verso un target interno</a>

8 Bisogna ricordarsi di utilizzare il simbolo # nell'href verso un target, inoltre i target possono essere sfruttati anche se usiamo un href da un documento esterno Tabelle <a href =" La sintassi per creare una semplice tabella è: <table border="3" align= center > <tr> <th>prima colonna</th> <th>seconda colonna</th> </tr> <tr> <td align="center">dati della prima colonna</td> <td align="center">dati della seconda colonna</td> </tr> </table> Abbiamo così definito una tabella (il tag <table> è il contenitore della tabella) con bordo (3, specificato in pixels) con degli Header (<th>) e dei dati (<td>), organizzata su due colonne (il tag <tr> permette di decidere quando andare a capo, è il contenitore delle righe). I dati sono centrati nelle colonne (mediante l attributo align = center). In particolare l attributo align, se riferito al tag <table>, sposta la tabella rispettivamente a sinistra (align= left di default), a destra (align= right ), o al centro (align= center ) del documento. Se riferito a <tr> o a <td> (<th>) è invece il contenuto delle celle ad essere allineato a sinistra, al centro oppure a destra (può essere riferito a celle o righe, il valori di default è left eccezion fatta per <th> il cui valore di default è center ). È inoltre possibile scegliere la larghezza della table con width = seguito dalla misura in pixel o in percentuale che rappresenta lo spazio disponibile tra i margini destro e sinistro il Cell padding, cioè la distanza fra testo e bordo delle celle, (aggiungendo cellpadding = ); il Cell spacing, cioè la distanza tra le celle, (aggiungendo cellspacing =); l'allineamento orizzontale e verticale dei dati (align e valign) ; i valori possibili sono top, middle (valore di default), bottom, baseline. il colspan ed il rowspan, cioè se la cella deve essere larga più di una cella standard (colspan e rowspan); se non vogliamo che i dati vengano disposti su più righe aggiungiamo nowrap: il colore della tabella mediante bgcolor o un immagine tramite background; la distanza orizzontale (verticale) tra la tabella e gli oggetti circostanti mediante l attributo hspace (vspace); un titolo per la tabella utilizzando il tag <caption> (chiusura obbligatoria). Possiamo assegnare un colore di sfondo tramite l attributo bgcolor.

9 Nota. i valori di default per cellspacing, cellpadding, colspan e rowspan sono uguali ad 1; quello di width è uguale a 80%; border è 0; l'align dell'header è center; l'align dei dati left e il valign è middle. E' possibile agire con tutti questi comandi su ogni singola cella della tabella inserendo i vari flag (align, width, bgcolor...) nel tag <td> invece che direttamente nel <table>, ottenendo così una varietà di effetti molto ampia. Ad esempio per creare la seguente tabella Prima colonna Seconda colonna Terza colonna dati prima/seconda colonna dati seconda colonna Ancora la prima... la seconda ed ecco la terza!! si usa il seguente codice: <table border="1" cellpadding="5" cellspacing="5"> <tr> <th align="right">prima colonna</th> <th align="left">seconda colonna</th> <th>terza colonna</th> </tr> <tr> <td align="center" valign="top" colspan="2">dati prima/seconda colonna</td> <td valign="bottom">dati seconda colonna</td> </tr> <tr> <td align="center">ancora la prima</td> <td>... la seconda</td> <td>ed ecco la terza!!</td> </tr> </table> Nota: alcuni tag possono essere solo opzionalmente chiusi, ad esempio <p> può anche non essere chiuso, o anche <tr>; tuttavia alcuni vecchi navigatori, più ligi alla sintassi di HTML, in mancanza dei tag di chiusura potrebbero visualizzare il contenuto in modo errato.

10 Commenti vari Un sito internet, per essere visibile da tutti, deve essere presente su un computer che faccia da server, che sia in grado cioè di distribuire i contenuti di un sito a chi ne faccia richiesta nel web. Per spostare il nostro sito internet sul server dobbiamo utilizzare il protocollo FTP. Esistono dei programmi che permettono di inserire immagini, tabelle, in maniera più intuitiva: si tratta degli editor visuali, quelli che gli anglosassoni chiamano editor WYSIWYG ("What you see is what you get", che significa "ciò che vedi è quello che ottieni"). Ad oggi gli editor visuali più utilizzati sono: Dreamweaver della Macromedia: un editor molto potente e pieno di funzionalità, ma forse proprio per questo inizialmente difficile da usare. Sicuramente il migliore. FrontPage della Microsoft: è l'editor che tutti solitamente utilizzano, perché incluso nel pacchetto Office. In realtà "sporca" molto il codice, visto che la sua attenzione è concentrata su Internet Explorer. Golive di Adobe: negli ultimi anni ha perso notevoli quote di mercato, rimane tuttavia un editor serio e una valida alternativa a FrontPage L'HTML è "case unsensitive"; un modo per imparare è guardare il codice scritto da altri; ogni browser ha un opzione che permette di visualizzare il codice sorgente (menu View -> Source); HTML Tidy è un utile strumento per rendere il codice HTML pulito e libero da errori