Minicorso sull’ HTML

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

Documents

Minicorso sull’ HTML