1 minicorso sull html a cura di leo izzo h t m l tempo richiesto 4 ore
TRANSCRIPT
1
Minicorso sull’ HTML
A cura di Leo Izzo
H T M LH T M L
Tempo richiesto 4 ore
2
HTML = Hyper Text Markup Language
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.
HTML
3
IPERTESTO
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
4
HTML: Un linguaggio per la realizzazione di ipertesti.
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.
HTML
5
VANTAGGI
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.
HTML
6
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.
7
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.
8
I TAG
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>
HTML
9
LE INTESTAZIONI
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>
HTML
10
PARAGRAFI e COMMENTI
<P> Esempio di un paragrafo semplice </P> <P> Realizzato dalla 4C inf. </p> IL SEGUENTE COMANDO E’ UN COMMENTO <! Questo è un commento
HTML
11
ESEMPIO COMPLETO DI FILE
<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>
HTML
12
La creazione dei Link
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).
HTML
esempio Link al file prova3.html
13
STILE DEI CARATTERI. STILI LOGICI
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
HTML
14
Stili fisici e linee orizzontali
<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.
HTML
15
TESTO PREFORMATTATO
<pre> per formattare il testo a piacere. Es: <pre> Muu (00) V-------------\ || || <pre>
16
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é
17
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
18
LISTE NON NUMERATE
<UL> al posto di <OL>
19
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
20
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.
21
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>
22
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.
23
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 e l’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.
24
Immagini e link Immagini in lineaImmagini 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 esterneImmagini 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>
25
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).
26
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
27
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
28
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.
29
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 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
<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
31
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.
32
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
33
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
34
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.
35
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
36
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
37
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>
38
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
39
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.
40
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
41
PARTE TERZA
I MODULI
42
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.
43
CREAZIONE DI UNA SCHEDA
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.
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.
44
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
45
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>
46
Esempio
<title>prova scheda1</title> </head>
<body> inserisci il tuo nome:<input name="Nome"> <Input type="submit"> </body> </html> vedi file scheda1.html
47
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>
48
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”>
49
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>
50
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>
51
Fine