HTML e creazione di pagine Web. Giuseppe MORELLI

Transcript

1 HTML e creazione di pagine Web Giuseppe MORELLI

2 Agenda Il World Wide Web Architettura Principi di HTML Il linguaggio e le istruzioni principali I collegamenti Script Fogli di stile CSS (Cascade Style Sheet) HTML dinamico Introduzione a Frontpage di Microsoft

3 WWW: Architettura Si tratta di un sistema di strutturazione ed organizzazione di informazioni in rete. Questo tipo di organizzazione mira ad accelerare lo scambio di informazioni attraverso protocolli standardizzati, semplificando le attività di fruizione dell informazione. L architettura WWW è di tipo Client/Server ovvero siamo in presenza di un sistema in cui un calcolatore, il Server, offre un servizio mentre un altro, il Client, vi accede secondo una serie di regole.

4 .. In pratica

5 Il programma Server è invece quel programma preposto alla trasmissione dei dati in rete, cioè distribuisce i documenti richiesti dai vari utenti (tramite client). Fisicamente deve essere installato sulla macchina che ospita i documenti (es. Microsoft Internet Information Server per sistemi Windows, Apache per sistemi Unix).

6 Pagine Web Assieme al WWW è nato il linguaggio HTML. Questo permette la scrittura di documenti da pubblicare sui server per il successivo reperimento e la relativa fruizione da parte dei client. Utilizzando l HTML puro un documento (una pagina web) incapsula al suo interno sia i contenuti informativi del documento sia la codifica dell interfaccia con cui questi verranno presentati (pagina web statica).

7 Linguaggio HTML: definizioni L HTML é il linguaggio del web. Esistono molti editor che permettono di generare pagine web senza conoscere HTML. E tuttavia utile conoscere la struttura dei documenti scritti in tale linguaggio poiché: Evoluzione del linguaggio piú rapida di quella degli editor per ottenere risultati specifici talvolta é necessario apportare delle modifiche al codice generato dagli editor Anche glil editor migliori non sono privi di errore HTML é un linguaggio a tag

8 TAG: un tag é una istruzione fatta da una serie di caratteri maiuscoli o minuscoli, senza spazi, racchiusi fra I simboli < e >. Esistono due tipi di TAG: comando di markup:sono quelli che possono essere usati singolarmente; (<tag>) tag contenitori: sono quelli utilizzati incoppia ovvero:esiste un tag iniziale ed un tag finale che si differenziano slo nel fatto che nel tag finale il simbolo < é seguito dal simbolo /; il comando esplicitato ha effetto sul testo contenuto fra il tag iniziale e il tag finale(<tag1> </ tag1>)

9 Attributo:é un elemento che si trova all interno di un tag per specificare informazioni al comando HTML in questione. Per specificare un attributo di un tag é necessario inserire nel tag (tag iniziale) il nome dell attributo, il simbolo =, il valore dell attributo. (<tag attributo= valore > ) Un tag puó includere diversi attributi alcuni dei quali possono essere obbligatori altri facoltativi

10 Caratteri e separatori:in una pagina web, tutto ció che non é riconosciuto come tag, costituisce testo normale e viene visualizzato come tale. I normali caratteri usati come separatori (spazi, tabulazioni, ritorno a capo)all interno di codice HTML sono interpretati come singoli spazi, indipendentemente dal numero di ripetizione degli stessi. Se fosse necessario inserire caratteri separatori aggiuntivi e/o altri caratteri speciali (es. <, > é ) é possibile utilizzare il carattere speciale & (spazio= - < = < - > = > )

11 Se si commette qualche errore nell inserimento di un comando HTML, il browser non fará alcuna diagnosi e non visualizzerá alcun messaggio di errore. Il comando in questione verrá semplicemente ignorato. Sebbene non sia necessario che I comandi HTML rispettino un allineamento particolare, per maggiore leggibilitá e per rendere piú semplice la manutenzione del codice scritto é bene indentare il codice.

12 Le due parti di un file HTML Tutti le istruzioni di un file HTML sono all interno del tag contenitore <HTML> Il contenuto del tag HTML é suddiviso in due parti: Intestazione che si trova in un tag contenitore <HEAD>; questa sezione contiene di solito pochi Tag che servono per l identificazione della pagina web (titolo, meta..) Corpo contenuto nel tag contenitore <BODY>; questa sezione contiene tutte le istruzioni per la visualizzazione degli elementi nelle pagine (testo, immagini..)

13 I TAG in dettaglio <HEAD>.. </HEAD>: di solito al suo interno si trovano pochi comandi tra cui: <TITLE> Titolo </TITLE>: Questo é il titolo che appare nella barra del titolo del browser. Nessuna altra parte dell intestazione verrá visualizzata sullo schermo É possibile trovare anche dei comandi <META>. Si tratta di comandi particolari che sono utilizzati dai robot di ricerca per la catalogazione delle pagine nei morori di ricerca: <META Name= Nome CONTENT= valore >

14 <BODY> </BODY>:il tag body accetta diversi attributi alcuni dei quali sono particolarmente utili: BACKGROUND = Nome di file : permette di specificare il file immagine che si vuole utilizzare come sfondo della pagina web che si sta descrivendo (opzionale) BGCOLOR=colore: consente di assegnare allo sfondo della pagina un colore unico (opzionale) TEXT=colore: consente di assegnare un colore al testo dell intera pagina web (opzionale)

15 A proposito di colori.. HTML utilizza due metodi per fare riferimento ai colori Tramite il loro nome: Esiste un elenco di 216 colori conosciuti dai browser; tra questi esistono sicuramente quelli pú comuni quali white, yellow, black. Tramite un codice a 3 numeri: Il codice RGB (red, green, blue) é un codice esadecimale formato da tre numeri da 00 a FF che indicano rispettivamente la quantitá di rosso, verde e blue che il colore desiderato possiede.

16 Comandi relativi a paragrafi Abbiamo giá detto che i separatori (cosí anche il ritorno a capo) vengono interpretati come singolo spazio dal browser. Esistono dei comandi di formattazione che permettono di produrre delle interruzioni nella continuitá del testo. <BR>: equivale esattamente ad un ritorno a capo <P>: accettato sia come comando di markup che come tag contenitore, sul paragrafo cui si riferisce agisce come il tag precedente ma aggiunge una interlinea. Attributo interessante del tag <P> é ALIGN = left/center/ right che permette di specificare l allineamento del paragrafo cui si riferisce rispetto alla pagina. Se non specificato altrimenti il paragrafo risulterá allineato a sinistra (left)

17 <DIV> :Questo tag contenitore é utilizzato per raggruppare vari elementi della pagina web ai quali si vuole applicare una unica formattazione Anche questo tag accetta l attributo ALIGN con la stessa sintassi vista per il tag <P> <HR> : permette di separare due paragrafi attraverso una linea orizzontale con ombra. Accetta diversi attribuit: WIDTH = larghezza attraverso questo attributo si specifica la larghezza in pixel o in % (rispetto alla finestra) della linea SIZE = numero specifica lo spessore della linea NOSHADE elimina l ombreggaitura

18 Comandi per la formattazione del testo Funzioni di formattazione piú comuni: Grassetto, Corsivo, Sottolineato. Questo tipo di formatatzione puó essere applicata a qualunque testo e di qualsiasi lunghezza (dal singolo carattere a diversi paragrafi). Basta racchiudere il testo da modificare fra inizio e fine dell appropriato tag contenitore: Grassetto: <STRONG> </STRONG> o <B> </B> Corsivo: <EM> </EM> o <I> </I> Sottolineato: <U> </U>

19 <Hn>: si tratta di un tag contenitore che permette di ottenere una visualizzazione a 6 livelli di titolo (n=1..6) in ordine di importanza descrescente (titoli, sottotitoli). Ogni livello é preceduto e seguito da una interlinea. <PRE>: il tag contenitore PRE permette di inserire nella pagina da visualizzare del testo preformattato. Ovvero il browser utilizzerá caratteri monospazio per la rappresentazione del testo specificato e iseparastori contenuti nel testo verranno mantenuti tali.

20 In HTML la dimensione di un carattere si esprime in punti 1..7 (7=Massima; default = 3) Tag per la modifica della dimensione dei caratteri <BIG>: tag contenitore che permette di aumentare la dimensione dei caratteri di un punto <SMALL>: tag contenitore che permette di Diminuire la dimensione dei caratteri di un punto <FONT> : Il tag contenitore permette di specificare piú attributi per il testo contenuto fra il suo inizio e la fine: SIZE = num : dimensione dei caratteri COLOR = colore: colore del testo

21 Inserimento di commenti All interno del Codice HTML è Possibile inserire dei commenti ovvero del testo che non viene visualizzato/interpretato dal browser. Il tag da utilizzate è :

22 HTML ed elenchi Per visualizzare una serie di elementi o elenchi di oggetti esistono delle istruzioni particolari. Ovvero siamo in presenza di tre tipi di formattazione in grado di far risaltare una serie di oggetti correlati fra i paragrafi di un testo Elenchi Puntati: vengono utilizzati per visualizzare una serie di elementi in cui non è importatne l ordine; I rientri sono segnati da segni tipografici (punti elenco); il tag contenitore per un elenco puntato è <UL> </UL> (unordered list). Ogni elemento dell elenco deve essere preceduto dal tag <LI>. Il tag <UL> accetta l attributo TYPE per specificare il punto elenco preferito

23 Elenco Numerato: questo tipo di elenco è utilizzato per numerare o specificare l ordine esatto di una serie di oggetti e/o operazioni. In questo caso i rientri dell elenco vengono segnati da numeri posti in ordine crescente. Il tag contenitore per un elenco numerato è <OL> </OL> (ordered list). Anche in questo caso ogni elemento deve essere preceduto dal tag <LI>. Gli attributi TYPE e START del tag UL possono essere utilizzati per impostare rispettivamente il tipo di numerazione da utilizzare (numeri arabi, romani ) e l inizio del conteggio.

24 Elenco di definizioni: questo tipo di elenco è utilizzato quando si vogliono visualizzare degli elementi a coppie (Es: termine, definizione; capitolo,contenuti ). Inquesto caso il tag contenitore è <DL> </DL>(definition list). Ogni termine è preceduto dal tag <DT>, ogni definizione dal tag <DD> Elenchi nidificati: E possibile unire stili di elenchi diversi per ottenere elenchi misti es: 1. OL 2. OL Ul1 Ul1 Ul2 Ul2

25 Immagini e HTML Nelle pagine HTML si possono inserire attualmente solo due tipi di immagini.gif e.jpg o.jpeg. I due formati sono caratterizzati dal fatto che offrono un alto livello di compressione a scapito della qualità. E conveniente utilizzare i file.gif (256 colori) per la memorizzazione di disegni e/o diagrammi creati con il pc. Per le foto, al fine di garantire la visualizzazione del massimo livello di dettaglio, e conveniente utilizzare il formato.jpg

26 Inserimento di immagini <IMG>: è il tag da utilizzare per inserire immagini in una pagina HTML. E necessario specificare l attributo SRC = nomefile. Altri attributi sono accettati (ma non sono obbligatori) dal tag IMG: ALIGN=valore che consente di disporre il testo intorno all immagine ALT=valore: contiene la scritta che viene visualizzata al posto di una immagine fino a che questa non è caricata del tutto o quando ci si posiziona con il mouse sull immagine stessa. WIDTH & HEIGHT = valore: consentono di modificare le dimensioni di visualizzazione della immagine specificata nell attributo SRC

27 Immagini Trasparenti: Molte volte se lo sfondo utilizzato per la pagina web non é uniforme, quando nella pagina viene inserita una immagine viene a mancare la continuitá di questo sofndo che é interrotto dallo sfondo dell immagine inserita. Soluzione a questo problema é utilizzare le immagini in formato GIF. Tale formato infatti consente, in fase di creazionn dell immagine, di rendere un colore trasparente. Ovvero quando si sovrappone ad un altra immagine, questo colore viene ignorato e viene invece mostrato il colore di sfondo della immagine di fondo.

28 Utilizzo di immagini negli elenchi Per rendere piú attraenti gli elenchi puntati é possibile utilizzare un trucco che permette di sostituire I segni tipografici (bullet) con delle immagini. In questo caso basta utilizzare anziché iltag proprio degli elenchi puntati <UL> </UL> il tag degli elenchi di definizioni <DL> </DL> e come tag di livello solo il <DD> ed inserire I comandi IMG a questo livello Nota Path assoluti e relativi

29 I collegamenti Fino ad ora ci siamo occupati di tage e comandi relativi ad una singola pagina. Ma la forza del World Wide Web (grande ragnatela mondiale) é che all interno di una pagina si possono trovare, in qualunque punto, collegamenti ad altre pagine, ad altri siti. Questi collegamenti, indicati con testo e/o immagini, fanno riferimento ad indirizzi nella rete (Uniform Resource Locator) NOTA: Indirizzi IP e DNS

30 <A> é il tag contenitore che consente di inserire un collegamento ad una risors ain una pagina web. Esso accetta come attributi: HREF=nome_risorsa : attraverso questo attributo si specifica URL del file collegato. Es. <A HREF= nomefile.htm >Vai al file</a> visualizzerá nella pagina web la scritta Vai al file. L utente inoltre potrá cliccare su tale scritta e il browser aprirá il file nomefile.htm Esistono tre tipi di collegamento; il tag da utilizzare é sempre lo stesso, essi si differenziano per il modo di specificare la risorsa da collegare.

31 Collegamenti esterni:sono quei collegamenti che fanno riferimento a pagine contenute su alri siti o addirittura su altri server. In questo caso il nome della risorsa é rappresentato dal suo URL completo di protocollo. Se ad esempio volessi inserire in una pagina un collegamento al sito del giornale la repubblica dovrei scrivere: <A HREF= >Vai</a> Pagina di default

32 Collegamenti interni: sono i collegamenti che fanno riferimento a pagine contenute nello stesso server. In questo caso il nome della risorsa che viene specificato nell attributo HREF del tag <A> é il path del file HTML della pagina da collegare. <A HREF= nomefile.htm >Collegamento</a> ATTENZIONE AI PATH RELATIVI E ASSOLUTI

33 Collegamenti all interno dello stesso file: quando siamo in presenza di una pagina molto lunga é possibile suddividerla in sezioni ponendo le cosiddette ancore (segnalibri, bookmarks). <A NAME= nome_sezione > Tali ancore sono indirizzabili direttamente attraverso collegamenti ottenuti sempre con il tag <A>ma con l attributo HREF impostato come nel seguente esempio: <A HREF= #nome_sezione >Vai a nome_sezione</a> Si premette cioé al nome dell ancora definita il simbolo #

34 É possibile effettuare collegamenti anche da immagini es: <A HREF= animalideldeserto.htm > </A> <IMG SRC= cammello.gif > In questo caso cliccando sull immagine raffigurante il cammello si accede alla pagina indicata nell attributo HREF del tag A. Quando si effettua un collegamento con una immagine essa viene racchiusa in una cornice di colore blue. Per eliminare tale cornice basta impostare l attributo di IMG BORDER = 0

35 Quando si ha la necessitá di inserire nella pagina web un indirizzo ed automatizzare l invio della posta elettronica ll indirizzo desideratii si usa un collegamento simile al seguente: <A HREF= mailto:indirizzo di posta > Contattaci </A>

36 Le tabelle Una tabella in HTML é definita attraverso il tag contenitore <TABLE> </TABLE>. All internop del tag table si devono specificare tutte le righe e lo si fa attraveerso il tag <TR> </TR>. Per ogni riga della tabella si devono specificare poi le celle (una per ogni colonna) e lo si fa attraverso il tag contenitore <TD> </TD> Le celle (intersezioni fra righe e colonne di una tabella) possono contenere elementi di qualunque tipo: testo immagni e perfino altre tabelle

37 Es: <TABLE BORDER= 1> <TR> <TD> Mattina</TD> <TR> <TABLE> </TR> </TR> <TD> Pomeriggio </TD> <TD> </TD> <TD> </TD> Genera una tabella di una riga e di due colonne che sarebbe del tutto invisibile (testo a parte) se non si specifcasse l attributo di TABLE BORDER = size

38 <CAPTION> <CAPTION>: permette di specificare un titolo per la tabella; esso accetta l attributo ALIGN che puó assumere I valori TOP: permette di visualizzare titolo della tabella sopra la stessa BOTTOM: permette di visualizzare titolo al di sotto della tabella stessa <TH> </TH>:questo tag si puó utilizzare al posto del tag <TD> quando si vogliono evidenziare le intestazioni delle colonne

39 Attributi di TABLE BORDER: permette di specificare lo spessore del bordo della tabella WIDTH: permette di impostare la larghezza della tabella (in pixel o in %) CELLPADDING: permette di impostare lo spazio fra il bordo ed il contenuto di una cella CELLSPACING: permette di impostare lo spazio fra le celle BGCOLOR: permette di impostare il colore di sfondo della intera tabella

40 Attributi di TR/TD/TH ALIGN: per impostare l allineamento orizzontale degli elementi di una riga (LEFT, RIGHT, CENTER) VALIGN: per impostare l allineamento verticaale degli elementi di una riga (TOP, MIDDLE, BOTTOM) BGCOLOR: per impostare il colore di sfondo di una riga HEIGHT: permette di impostare l altezza di una riga BORDERCOLOR: per impostare il colore del bordo delle celle appartenti ad una riga

41 Attributi di TD/TH COLSPAN: permette di fare l unione di due celle vicine (la cella e quella alla sua destra) ROWSPAN: permette di fare l unione di due celle (la cella e quella sotto) <TABLE VALIGN=TOP BORDER= 2> <TR> <TD> Mattina </TD> <TD> Pomeriggio </TD> </TR> <TR> </TR> <TABLE> <TD COLSPAN=2> </TD> ROWSPAN = 2

42 Mappe Immagini Fare una mappa immagine significa suddividere l immagine in aree facilmente riconoscibili e creare per ogni area un collegamento interno o esterno. Prima cosa da fare é stabilire le coordinate espresse in pixel delle aree sensibili. Tali coordinate vengono poi inserite nei tag come mostato nella prossima slide. Si possono definire aree sensibili di tre forme geometriche: cerchio, rettangolo poligono

43 Una mappa si definisce con il tag <MAP> </ MAP> specificando l attributo obbligatorio NAME All interno questo tag conterrá tanti tag <AREA> quante sono le aree sensibili definite. Ciascun tag <AREA> dovrá avere I seguenti attributi impostati: SHAPE: indica la forma dell area (rect,circle,polygon) COORDS: coordinate che individuano l area tutte separate da virgola (rect:estremitá diag. Maggiore; circle:coordinate centroe+ raggio; polygon:coordinate dei punti in ordine)

44 <MAP NAME= mappa1 > <AREA shape= rect coords=1,1,10,10 href= link1.htm > <AREA shape= polygon coords=1,1,10,10,15,15,1,1 </MAP>.. Un immagine userá la mappa attraverso l attributo USEMAP di IMG. <IMG SRC= name.gif USEMAP= #mappa1 >

45 Moduli Vengono utilizzati dai proprietari dei siti web per il reperimento di informazioni da parte dell utente. L utente fornisce delle informazioni attraverso I controlli di testo, le caselle combinate, pulsanti Queste informazioni vengono inviate al server per l elaborazione e/o archiviazione. Assieme alle informazioni, il server riceve delle indicazioni sul modo di trattare le informazioni ricevute.

46 Un modulo é specificato attraverso il TAG contenitore <FORM> </FORM>. Accetta i seguenti attributi: NAME: questo attributo permette di assegnare un nome al modulo. METHOD: puó assumere i valori POST e GET ACTION: specifica il programma che il server deve lanciare quando gli vengono inviate le informazioni raccolte attraverso questo modulo. Un modulo oltre ai normali Tag html contiene I tag che permetto raccogliere informazioni (controlli) che vengono specificati attraverso il tag <INPUT>.

47 Il tag <INPUT> accetta i seguenti attributi: NAME: permette di assegnare un nome al controllo (importante per uso con ASP) TYPE: a seconda di questo valore nella pagina HTML verrá visualizzato un controllo diverso. I valori che puó assumere sono: Button, reset, Submit file text, password radio checkbox SIZE: lunghezza del controllo VALUE:valore assegnato (testo contenuto)

48 Frame I frame permettono di visualizzare sullo schermo diverse finestre contemporaneamente. Prima cosa da fare é quindi decidere il layouts della pagina da visualizzare. Per poter impostare I frame vengono utilizzati due Tag <FRAMESET> e <FRAME> <FRAMESET> </FRAMESET>: accetta come attributi COLS = dim1%,dim2%,dim3% ROWS = dim1%,dim2%,dim3% <FRAME>: accetta come attributi: NAME =: nome per identificare il frame SRC= Pagina da visualizzare NORESIZE per rendere il frame non ridimensionabile SCROLLLING = NO (elimina le barre di scorrimento)

49 In un sito che si basa su frame per ogni collegamento si dovrebbe specificare il frame su cui la nuova pagina va caricata. Questo si puó fare utilizzando l attributo TARGET del tag A. Il valore da attribuire a tale paramettro é il nome del frame target appunto.