1 Minicorso sull HTML A cura di Leo Izzo H T M L Tempo richiesto 4 ore

2 HTML = Hyper Text Markup Language t Serve per produrre documenti nel WWW (World Wide Web) t Il WWW è un sistema di informazioni interattivo, concatenato, distribuito e grafico. t Il Web è un sistema di informazioni ipertestuali. t Quindi alla base del WWW cè lipertesto. HTML

3 IPERTESTO t Lidea che si cela dietro lipertesto è di non leggere il testo in forma sequenziale, ma di saltare con facilità da un punto allaltro del testo con operazioni di link. t Il Web in realtà è un sistema ipermediale, infatti incorpora oltre al testo tanti altri oggetti (immagini, video, suoni). t Il Web è distribuito (Internet), è dinamico ( aggiornato di continuo). HTML

4 HTML: Un linguaggio per la realizzazione di ipertesti. t E un documento di testo che contiene dei codici di formattazione della pagina t Il Browser riconosce i TAG e in base a questi riconosce come visualizzare gli elementi della pagina. t In un editor HTML non si possono controllare: i font,il corpo, linterlinea, larghezza dei caratteri. t E un linguaggio molto limitato. HTML

5 VANTAGGI t E compatto e può essere trasferito tramite rete a grande velocità. t Possono essere visualizzati su qualsiasi piattaforma (device-independent). t E ridotto e facile da apprendere. t Il file prodotto è di puro testo. HTML

6 GLI EDITOR Editor di puro testo aiutano a creare file richiamando i tag e gestendo link.( Arachnophilia) t Editor WYSIWYG ( Frontpage -Dreamweaver) t Convertitori. File creati con programmi di videoscrittura. (word) t Usare tutti gli strumenti, ma può essere necessario utilizzare il linguaggio HTML direttamente usando gli editor di tag.

7 WYSIWYG t What you see is what you get t La capacità di un programma grafico di visualizzare esattamente sullo schermo la pagina una volta stampata (pubblicata). t Ciò che si vede è ciò che si ottiene. t DREAMWEAVER t FRONTPAGE t Rif. Articolo Pc Professionale N°101 settembre

8 I TAG t I documenti html sono scritti da puro codice ASCII e dai TAG. t Esistono tre tag necessari all interno di un file HTML. t Indica che si tratta di un documento html. contiene particolari tag es il titolo. prova esempio di home page ITIS J.F.K KENNEDY HTML

9 LE INTESTAZIONI t Le intestazioni permettono di dividere le Parti del testo. t la home page del nostro istituto t La storia t Le classi t La mitica 4c. Informatica t I progetti HTML

10 PARAGRAFI e COMMENTI t Esempio di un paragrafo semplice t Realizzato dalla 4C inf. t IL SEGUENTE COMANDO E UN COMMENTO t <! Questo è un commento HTML

11 ESEMPIO COMPLETO DI FILE t t prova esempio di home page t t BODY> t ITIS J.F.K KENNEDY t VIA INTERNA, 7 PORDENONE ITALY. t la home page del nostro intituto t La storia t FOTO E STORIA DELL ISTITUTO. t Le classi t La mitica 4c. Informatica t I progetti t <! La pagina è curata dalla 4c inf. t HTML

12 La creazione dei Link t Il tag detto tag di ancoraggio viene usato creare dei link. t Es. Rientro al t Creare un secondo foglio ( La storia e prevedere la voce, rientro al menu principale). HTML esempio Link al file prova3.html

13 STILE DEI CARATTERI. STILI LOGICI t Lo stile logico indica il modo in cui il testo deve essere utilizzato e non il modo di essere visualizzato. t indica che i caratteri devono essere enfatizzati in qualche modo t evidenzia una parola o una frase t inserisce una citazione HTML

14 Stili fisici e linee orizzontali t grassetto t corsivo t font mono-spaziato t sottolineatura t linea orizzontale nella pagina. Non ha tag di chiusura t linea spezzata. Non ha tag di chiusura. Fa ripartire il testo dal margine sinistro. HTML

15 TESTO PREFORMATTATO t per formattare il testo a piacere. t Es: t Muu (00) t V \ t || || t

16 CARATTERI SPECIALI t I file html sono ASCII puri. t Vengono definiti un set di caratteri speciali chiamati entità per aggirare il problema dei caratteri speciali. t Possono avere due forme: t Entità con nome ed iniziano con la & e terminano con il ; t es : " « © t Le entità con numero iniziano con la & aggiunte con il # e termina con il ; t es: ‚ õ t Per scrivere la parola poiché : poiché oppure poiché

17 LE LISTE t liste numerate e sono racchiuse nei tag t es: la mia classe t t pippo. t paperino t topolino> t t il risultato, utilizzando il browser, sarà : t la mia classe t 1. pippo t 2. paperino t 3. topolino

18 LISTE NON NUMERATE t al posto di

19 Liste a menu e directory t o al posto di t sono liste semplici simile a quelle di paragrafo, solo che alcuni browser possono far rientrare le righe e le colonne oppure formattarle diversamente rispetto ai paragrafi. t RICORDIAMO: t LISTA A GLOSSARIO

20 IMMAGINI t Le immagini possono essere in-linea o esterne. t Per le immagini di linea si usa il formato GIF – JPG ed appaiono e vengono caricate insieme alla pagina. Ovviamente il browser deve essere grafico. t Le immagini esterne sono collegate ai link e vengono prelevate su richiesta. t Per le immagini di linea si possono utilizzare i formati GIF o JPEG. t Attenzione il formato Gif è molto più diffuso e le immagini sono caricate senza problemi da tutti i browser. t Tuttavia nel 1995 sembrò affermarsi un nuovo formato PNG (ping). t Per ulterioni dettagli vedi corso su immagine e grafica per il WEB.

21 Immagini t con gl attributi SRC, ALT E ALIGN. t PER INSERIRE UNA IMMAGINE: – t Srivendo: siamo noi si inserisce un immagine all interno di un testo. t ALIGN consente di controllare lallineamento con il testo con i valori ALIGN= TOP, ALIGN = MIDDLE, ALIGN = BOTTOM t ALT usata per quei browser che non possono visualizzare immagini. t Le immagini ed il testo: t il sogno di tutti >

22 Immagini t Usare le immagini il meno possibile, e comunque rappresentarle come icone. t Renderle compatte riducendole in un formato piccolo, oppure ridurre il numero di colori. t Regola: Le immagini dovrebbero occupare meno di 40Kb. t Riutilizzare le stesse immagini il più possibile.

23 GIF e JPG t Gif= Graphics Interchange Format. –Utilizza solo 256 colori e quindi le foto tendono ad essere sgranate e poco definite. –Lalgoritmo di compressione è il LZW, ed il proprietario ha chiesto i diritti duso dellalgoritmo e quindi potrebbe cadere in disuso. t JPEG= join photographic experts group. –Può avere qualsiasi numero di colori e lalgoritmo di compressione funzione bene per le immagini fotografiche. Però è poco adatto per le immagini in bianco e nero o per immagini con blocchi estesi di colore uniforme. –Il formato utilizzato si chiama lossy ed elimina i bit dellimmagine per renderla più compatta.

24 Immagini e link t Immagini in linea – t Una immagine può funzionare come link – t Normalmente le immagini che richiedono link sono circondate da un bordo il cui spessore può essere cambiato con lattributo BORDER nel tag IMG> – t Immagini esterne –Le immagini esterne non appaiono nella pagina WEB e sono memorizzate in modo distinto rispetto alla pagina. Dopo aver creato limmagine esterna, basta creare un link allimmagine stessa. – clicca qui

25 I COLORI t Due principali modelli –HSB: Hue,Saturation, Brightness (tinta,saturazione e luminosità) –RGB: Modello gestito dal PC (vedi immagini su file html in linea) t Immagini trasparenti ed interlacciate. –A differenza della trasparenza, linterlacciamento non cambia laspetto, ma determina il modo in cui limmagine viene salvata e poi visualizzata al caricamento( esempio effetto dissolvenza).

26 IMMAGINI MAPPATE t Nelle immagini mappate, le varie parti di unimmagine attivano link differenti. t Normalmente vengono create utilizzando un particolare programma funzionante sul server ed utilizzando: –Un particolare file HTML; –Un file di mappatura (residente sul server) che indica le regioni dellimmagine e le relative pagine web. –Un file scriptCGI che colleghi tutto. t Ricordiamo tra i programmi più usati: Mapedit e Mapthis

27 IMMAGINI MAPPATE SUL CLIENT t Si usano i seguenti tag MAP - AREA- SHAPE E USEMAP – <MAP NAME =napname coordinate e link – t Le coordinate vengono definite allinterno di un nuovo tag – t SHAPE= RECT o POLY o CIRC t RECT= x1,y1 x2,y2 rispettivamente angolo superiore sinistro e angolo opposto. t CIRC=x,y z centro e raggio

28 USEMAP t Lultimo passo consiste nellinserimento dellimmagine nella pagina web, dove al posto di IMG si usa USEMAP. – t Essendo USEMAP un indirizzo URL standard il nome mappa è preceduto dal simbolo # e chiede al browser di ricercare nome_mappa allinterno della pagina web.

29 Seconda parte (uso del colore) t I colori in HTML possono essere specificati in due modi: –tramite il codice esadecimale - utilizzando il nome del colore pedefinito. – oppure bgcolor = green. t Per cambiare il colore del testo: –Text: controlla il testo –link controlla il link –Vlik controlla il colore dei link già visitati –Alink controlla il colore dei link sul quale è stato premuto ma non rilasciato il pulsante del mouse.

30 Esempi : COLORE t –Crea uno sfondo nero, testo bianco e link non visitati di colore viola. Link al file prova_sui_colori.html

31 Multimedialità ed animazioni t La multimedialità in internet a causa della scarsa velocità, è costituita da piccoli file audio e video. ( anche se oggi….. vedi ADSL). t ascoltala t Vengono usate applicazioni helper se il browser è solo in grado di salvare il file su disco e di richiamare lapplicazione in grado di gestirla. t Il browser è in grado di riconoscere il tipo di file dallestensione o da una serie di codici inviati dal server detti content-type.

32 AUDIO t I tipi di file molto comuni sono i file AU ( di Sun Microsystem) usati in tutte le piattaforme, ma con una qualità scadente. t Quelli di qualità migliore, ma dedicati sono il formato AIFF per il macintosh e WAVE per il Windows. t Infine il formato RealAudio viene utilizzato per ascoltare direttamente dal server, senza dover scaricare direttamente tutto il brano. t Vedi esempio link nel file canzone1.html

33 File video t I file video, come i file audio possono essere riprodotti dai browser solo se sono in un formato accettabile. t Lo standard corrente è il formato MPEG, Microsoft Video (AVI) e Apple QuickTime. Gli ultimi due possono includere una traccia audio. t Mentre i file mpeg per la traccia audio richiedono un proprio lettore. t Vedi file ilvideononce.html

34 Multimedialità nel Web t Internet cresce, e con i nuovi browser è possibile integrare le pagine web con i file video ed audio attraverso nuovi tag HTML, tramite funzionalità avanzate tipo java e sia con i moduli plag-in, ovvero applicazioni helper strettamente integrati ne browser.

35 VIDEO IN LINEA t Internet explorer include una estensione del tag che consente di riprodurre file AVI dentro pagine Web. t <IMG DYNSRC="videononvita.avi t Da notare che si possono utilizzare tutti gli attributi più comuni del tag IMG. t E conveniente utilizzare sempre una immagine in sostituzione del video casomai questo non fosse reperibile. t <IMG DYNSRC="videononvita.avi src =leo vita.jpg alt="[ma cè speranza] t Controls consente di avere dei semplici controlli sul file aci, (fermare e riavviare il video). t Loop : determina il numero di volte in cui verrà riprodotto il film, Loop =infinite (consente la riproduzione allinfinito). t Start: Start=fileopen (impostazione standard) il video viene avviato non appena vengono caricati la pagina e il video. START=mouseover viene avviato quando si porta il mouse sullimmagine. t Vedi file : ILVIDEONONCE.HTML

36 AUDIO IN LINEA t Questi vengono caricati senza controllo e servono come musica di sottofondo alla pagina web. t <BGSOUND SRC=sample4.wav t sono consentiti gli attributi loop come per i file video. t I formati supportati da explorer sono: AU,WAV,MIDI. t Vedi esempio AUDIOLINEA.HTML

37 GLI APPLET t Sono programmi java interpretati dal browser e richiamati dal file HTML t t class ciaoancora t t <applet code="ciaoancora.class" width=220 heigth=50 t align="left" vspace=50 hspace=50> t t ciao da questo applet t mentre vspace e hspace sono stati usati per inserire spazi verticali ed orizzontali. t

38 TESTI SCORREVOLI (MARQUEE) t QUESTO TESTO SCORRE t Lattributo behavior può assumere i valori : scroll,slide e alternate t scroll e standard, slide si ferma quando raggiunge il margine, alternate fa rimbalzare il testo da sinistra verso destra. t Direction : right o lest determina il verso. t Scrollmount determinana la velocità di spostamento del testo e il valore numerico ad esso assiciato corrisponde al numero di pixel per ogno movimento del testo. t Scrolldelay, determina la durata del passo espressa in millisecondi. t Per cambiare laspetto del testo usare bgcolor. t Heiht e width determina le dimensioni del riquadro che circonda il testo scorrevole. Hspace e vspace, lo spazio compreso tra i bordi e il testo

39 I FRAME t I frame (riquadri) danno un aspetto innovativo alle pagine web. t Bisogna utilizzare il tag, che sostituisce il : – – esempio di frame – –frame name = centrale src=centrale.htm> – – Da notare che vengono assegnate dei nomi alle aree, nomi che serviranno ai link dove visualizzare il documento richiamato.

40 I FRAME t Lattributo cols dice al browser di dividere lo schermo in colonne. t Volendo dividere in righe cols si sostituisce con rows. t ESEMPI: – Il primo riquadro ha la larghezza di 100 pixel il secondo corrisponde al 50% della larghezza della finestra t Per creare strutture complesse i possono anche essere nidificati. – Definiscono due colonne delle quali la prima occupa il 30% della finestra o dell area disponibile, mentre la seconda occupa lo spazio rimanente, i frame interni si riferiscono alle colonne Es_1frame.html

41 PARTE TERZA I MODULI

42 I MODULI t Fino ad ora sono state illustrate le istruzione per la creazione di pagine on-line, senza possibilità di interazione da parte dellutente. t I moduli, detti anche schede o form in inglese, trasformano le pagine web trasformandole in vere applicazioni interattive per gestire sondaggi o scelte in base ad un input a scelta. t Queste istruzioni sono diventate uno standard a partire dall HTML 2.0 e sono supportate da tutti i moderni browser.

43 CREAZIONE DI UNA SCHEDA t E costituita da due operazioni indipendenti: – la creazione degli elementi della scheda –la realizzazione del programma script che dovrà essere richiamato dal server ( chiamato script CGI o script) e che si occupa di elaborare le informazioni che l utente invia utilizzando la scheda. t La scheda si crea con il tag e chiusura –Il form include due argomenti: METHOD ACTION –METHOD = a GET o POST e determinano il modo in cui le informazioni verranno inviate allo script (sul server) che si deve occupare della loro elaborazione. –ACTION : Indica lo script sul server che deve essere richiamato nel momento in cui viene inoltrata questa scheda.

44 ESEMPIO SCHEDA t –Questa form, richiama uno script chiamato nome-scheda che si trova nella directory cgi-bin del server t Bisogna definire successivamente il codice HTML che definisce larea di testo: –Inserisci il tuo nome: t INPUT è il tag più utilizzato ed accetta due attributi: –TYPE E NAME –Il type descrive il tipo di elemento : text, radio, e altri pulsanti tipo checkbox per le caselle di selezione. Se omesso per default = ad una casella testo. –Il name indica il nome dell elemento che lo script riceve dalla scheda sotto forma di una serie di coppie nome=valore

45 Esempio t – – prova 1 di scheda – – come ti chiami ? –form method=post action= –

46 Esempio t prova scheda1 t t inserisci il tuo nome: t t vedi file scheda1.html

47 Campi lunghi t VEDI FILE SCHEDA2.HTML t Il tag Input può includere i seguenti attributi: t Size : indica la lunghezza dei caratteri, (lo standard è pari a 20 car.) t maxlength: Indica il numero di caratteri che lutente può immettere. t AREE DI TESTO: – commenti. –

48 PULSANTI OPZIONE t VEDI ESEMPIO SCHEDA3.HTML t Lattributo e: radio INPUT TYPE=RADIO NAME=W LA SQUOLA t Lattributo password evita di visualizzare quanto si scrive sul video. t Attributo radio consente una scelta fra tante t Lattributo checkbox attiva una o più caselle t Oltre che a definire un valore standard, è possibile includere un pulsante di annullamentoReset t

49 Selezioni t Le selezioni permettono al lettore di selezionare uno o più oggetti da un menù o da una lista. t – neri – biondi – rossi – castani t t Possiamo utilizzare lattributo per inoltrare un testo diverso da quello selezionato t t neri – biondi – rossi – castani – giallo canarino t

50 Selezioni t E possibile preselezionare un valore diverso dal primo t – neri – biondi – rossi – castani – blu t t Per selezionare più opzioni t – neri – biondi – rossi – castani – blu – gialli t

51 Fine