Minicorso sull’ HTML

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

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

IPERTESTO HTML • L’idea che si cela dietro l’ipertesto è di non leggere il testo in forma sequenziale, ma di saltare con facilità da un punto all’altro del testo con operazioni di link. • Il Web in realtà è un sistema ipermediale, infatti incorpora oltre al testo tanti altri oggetti (immagini, video, suoni). • Il Web è distribuito (Internet), è dinamico ( aggiornato di continuo).

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

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

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

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

I TAG HTML • I documenti html sono scritti da puro codice ASCII e dai TAG. • Esistono tre tag necessari all’ interno di un file HTML. • <HTML> Indica che si tratta di un documento html. <HEAD> contiene particolari tag es il titolo. <TITLE> prova esempio di home page </TITLE> </HEAD> <BODY> <H1> ITIS J.F.K KENNEDY </H1> </BODY> </HTML>

LE INTESTAZIONI HTML • Le intestazioni permettono di dividere le Parti del testo. • <H1> la home page del nostro istituto </H1> • <H2> La storia </H2> • <H2> Le classi </H2> • <H3> La mitica 4c. Informatica </H2> • <H2> I progetti </H2>

PARAGRAFI e COMMENTI HTML • <P> Esempio di un paragrafo semplice </P> • <P> Realizzato dalla 4C inf. </p> • IL SEGUENTE COMANDO E’ UN COMMENTO • <! Questo è un commento

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

La creazione dei Link HTML • Il tag <A> detto tag di ancoraggio viene usato creare dei link. • Es. Rientro al <A HREF=“menu principale </A> • Creare un secondo foglio ( La storia e prevedere la voce, rientro al menu principale). esempio Link al file prova3.html

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

Stili fisici e linee orizzontali HTML • <B> grassetto • <I> corsivo • <TT> font mono-spaziato • <U> sottolineatura • <HR> linea orizzontale nella pagina. Non ha tag di chiusura • <BR> linea spezzata . Non ha tag di chiusura. Fa ripartire il testo dal margine sinistro.

TESTO PREFORMATTATO • <pre> per formattare il testo a piacere. • Es: <pre> • Muu (00) • V-------------\ • || || • <pre>

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

LE LISTE • <LI> liste numerate e sono racchiuse nei tag < OL> • es: <P> la mia classe <p> • <ol> • <li> pippo . • <li> paperino • <li> topolino> • <ol> • il risultato, utilizzando il browser, sarà : • la mia classe • 1. pippo • 2. paperino • 3. topolino

LISTE NON NUMERATE • <UL> al posto di <OL>

Liste a menu e directory • <menu> o <DIR> al posto di <OL> • 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. • RICORDIAMO: • <dt> LISTA A GLOSSARIO

IMMAGINI • Le immagini possono essere in-linea o esterne. • 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. • Le immagini esterne sono collegate ai link e vengono prelevate su richiesta. • Per le immagini di linea si possono utilizzare i formati GIF o JPEG. • Attenzione il formato Gif è molto più diffuso e le immagini sono caricate senza problemi da tutti i browser. • Tuttavia nel 1995 sembrò affermarsi un nuovo formato PNG (ping). • Per ulterioni dettagli vedi corso su immagine e grafica per il WEB.

Immagini • <IMG> con gl attributi SRC, ALT E ALIGN. • PER INSERIRE UNA IMMAGINE: • <IMG SRC=“FOTO.GIF”> • Srivendo:<H1> <IMG SRC=“FOTO.GIF”> siamo noi </H1> si inserisce un immagine all’ interno di un testo. • ALIGN consente di controllare l’allineamento con il testo con i valori ALIGN= TOP, ALIGN = MIDDLE, ALIGN = BOTTOM • ALT usata per quei browser che non possono visualizzare immagini. • Le immagini ed il testo: • <H1> <IMG src=“foto.gif> il sogno di tutti ></H1>

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

GIF e JPG • Gif= Graphics Interchange Format. • Utilizza solo 256 colori e quindi le foto tendono ad essere sgranate e poco definite. • L’algoritmo di compressione è il LZW, ed il proprietario ha chiesto i diritti d’uso dell’algoritmo e quindi potrebbe cadere in disuso. • JPEG= join photographic experts group. • Può avere qualsiasi numero di colori el’algoritmo 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 dell’immagine per renderla più compatta.

Immagini e link • Immagini in linea • <IMG SCR=“immagine.jpg”> • Una immagine può funzionare come link • <A HREF=“indice.html”><Img SRC=“imm.gif”></A> • Normalmente le immagini che richiedono link sono circondate da un bordo il cui spessore può essere cambiato con l’attributo BORDER nel tag IMG> • <IMG SRC=“IMG.gif” BORDER=5> • Immagini esterne • Le immagini esterne non appaiono nella pagina WEB e sono memorizzate in modo distinto rispetto alla pagina. Dopo aver creato l’immagine esterna, basta creare un link all’immagine stessa. • <p> clicca qui <A HREF=“nat1.gif”><IMG SRC=“nattuno.gif”></A></p>

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

IMMAGINI MAPPATE • Nelle immagini mappate, le varie parti di un’immagine attivano link differenti. • 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 dell’immagine e le relative pagine web. • Un file scriptCGI che colleghi tutto. • Ricordiamo tra i programmi più usati: Mapedit e Mapthis

IMMAGINI MAPPATE SUL CLIENT • Si usano i seguenti tag “MAP - AREA- SHAPE E USEMAP” • <MAP NAME =“napname” • coordinate e link • </MAP> • Le coordinate vengono definite all’interno di un nuovo tag <AREA> • <AREA SHAPE="RECT" COORDS="252,61 354,177 " HREF="filpold2.html"> • SHAPE= RECT o POLY o CIRC • RECT= x1,y1 x2,y2 rispettivamente angolo superiore sinistro e angolo opposto. • CIRC=x,y z centro e raggio

USEMAP • L’ultimo passo consiste nell’inserimento dell’immagine nella pagina web, dove al posto di IMG si usa USEMAP. • <IMG SRC="natas4.gif" USEMAP="#natas4" > • <MAP NAME="NATAS4"> • <AREA SHAPE="RECT" COORDS="252,61 354,177 " HREF="filpold2.html"> • <AREA SHAPE="CIRC" COORDS="128,219 50 " HREF="TANTAFOTO.html"> • </MAP> • Essendo USEMAP un indirizzo URL standard il nome mappa è preceduto dal simbolo # e chiede al browser di ricercare nome_mappa all’interno della pagina web.

Seconda parte (uso del colore) • I colori in HTML possono essere specificati in due modi: • tramite il codice esadecimale - utilizzando il nome del colore pedefinito. • <body BGCOLOR= “#934CE8”> oppure bgcolor = green. • Per cambiareil 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.

Esempi : COLORE • <body Bgcolor =“#00000” text=“#FFFFFF” link=“#9805ff”> • Crea uno sfondo nero, testo bianco e link non visitati di colore viola. Link al file prova_sui_colori.html

Multimedialità ed animazioni • La multimedialità in internet a causa della scarsa velocità, è costituita da piccoli file audio e video. ( anche se oggi….. vedi ADSL). • <a href="nonvita.wav">ascoltala</a> • Vengono usate applicazioni ‘helper’ se il browser è solo in grado di salvare il file su disco e di richiamare l’applicazione in grado di gestirla. • Il browser è in grado di riconoscere il tipo di file dall’estensione o da una serie di codici inviati dal server detti content-type.

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

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

Multimedialità nel Web • 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.

VIDEO IN LINEA • Internet explorer include una estensione del tag <IMG> che consente di riprodurre file AVI dentro pagine Web. • <IMG DYNSRC="videononvita.avi” • Da notare che si possono utilizzare tutti gli attributi più comuni del tag IMG. • E conveniente utilizzare sempre una immagine in sostituzione del video casomai questo non fosse reperibile. • <IMG DYNSRC="videononvita.avi” src =“leo vita.jpg “ alt="[ma c’è speranza]” • Controls consente di avere dei semplici controlli sul file aci, (fermare e riavviare il video). • Loop : determina il numero di volte in cui verrà riprodotto il film, Loop =infinite (consente la riproduzione all’infinito). • 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 sull’immagine. • Vedi file : ILVIDEONONCE.HTML

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

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

TESTI SCORREVOLI (MARQUEE) • <MARQUEE> QUESTO TESTO SCORRE </MARQUEE> • L’attributo behavior può assumere i valori : scroll,slide e alternate • scroll e standard, slide si ferma quando raggiunge il margine , alternate fa rimbalzare il testo da sinistra verso destra. • Direction : right o lest determina il verso. • 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. • Scrolldelay, determina la durata del passo espressa in millisecondi. • Per cambiare l’aspetto del testo usare bgcolor. • 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

I FRAME • I frame (riquadri) danno un aspetto innovativo alle pagine web. • Bisogna utilizzare il tag <FRAMSET>, che sostituisce il <BODY>: • <html> • <head> • <title> esempio di frame </title> • </head> • <framset cols=“100,*”> • <frame name=“sx” scr=“sx.htm> • frame name = “centrale” src=“centrale.htm”> • </framset> • Da notare che vengono assegnate dei nomi alle aree, nomi che serviranno ai link dove visualizzare il documento richiamato.

I FRAME • L’attributo cols dice al browser di dividere lo schermo in colonne. • Volendo dividere in righe cols si sostituisce con rows. • ESEMPI: • <Framset cols =“100,50%,*”> Il primo riquadro ha la larghezza di 100 pixel il secondo corrisponde al 50% della larghezza della finestra • Per creare strutture complesse i <framset> possono anche essere nidificati. • <frameset rows=“*,80”> • <framset cols=“30%,*> • <frame src=“riquadro_indice.html”> • <frame src=“riquadro_argomenti”> • </frameset> • <frame src=“riquadro firma”> • </frameset> 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

PARTE TERZA I MODULI

I MODULI • Fino ad ora sono state illustrate le istruzione per la creazione di pagine on-line, senza possibilità di interazione da parte dell’utente. • 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. • Queste istruzioni sono diventate uno standard a partire dall’ HTML 2.0 e sono supportate da tutti i moderni browser.

CREAZIONE DI UNA SCHEDA • E’ costituita da due operazioniindipendenti: • 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. • La scheda si crea con il tag <FORM> e chiusura </FORM> • 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.

ESEMPIO SCHEDA • <FORM METHOD= POST ACTION=“http://www.nomeserver.com/cgi-bin/nome-scheda”> • Questa form, richiama uno script chiamato nome-scheda che si trova nella directory cgi-bin del server www.nomeserver.com • Bisogna definire successivamente il codice HTML che definisce l’area di testo: • Inserisci il tuo nome:<INPUT NAME=“Nome”> • 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

Esempio • <HTML> • <head> • <title> prova 1 di scheda </title> • </head> • <body> • <h2> come ti chiami ? </h2> • form method=“post” action=“http://www.lizzo.it/cgi/post-query”> • </body> • </html>

Esempio • <title>prova scheda1</title> • </head> • <body> • inserisci il tuo nome:<input name="Nome"> • <Input type="submit"> • </body> • </html> • vedi file scheda1.html

Campi lunghi • VEDI FILE SCHEDA2.HTML • Il tag Input può includere i seguenti attributi: • Size : indica la lunghezza dei caratteri, (lo standard è pari a 20 car.) • maxlength: Indica il numero di caratteri che l’utente può immettere. • AREE DI TESTO: • <Text area name=“commenti” rows=“20” cols=“30”>commenti. • </texarea>

PULSANTI OPZIONE • VEDI ESEMPIO SCHEDA3.HTML • L’attributo e: radio INPUT TYPE=“RADIO” NAME=“W LA SQUOLA” • L’attributo password evita di visualizzare quanto si scrive sul video. • Attributo radio consente una scelta fra tante • L’attributo checkbox attiva una o più caselle • Oltre che a definire un valore standard, è possibile includere un pulsante di annullamento”Reset” • <input type=“reset” value=“valori standard”>

Selezioni • Le selezioni permettono al lettore di selezionare uno o più oggetti da un menù o da una lista. • <select name="colore"> • <option>neri • <option>biondi • <option>rossi • <option>castani • </select> • Possiamo utilizzare l’attributo <value>per inoltrare un testo diverso da quello selezionato • <select name="colore"> • <option>neri • <option>biondi • <option>rossi • <option>castani • <option value=“strani”> giallo canarino • </select>

Selezioni • E’ possibile preselezionare un valore diverso dal primo • <select name="colore"> • <option>neri • <option selected>biondi • <option>rossi • <option>castani • <option>blu • </select> • Per selezionare più opzioni • <select name="colore" multiple=3> • <option>neri • <option>biondi • <option>rossi • <option>castani • <option>blu • <option>gialli • </select>

Minicorso sull’ HTML