Minicorso sull’ HTML

Download Report

Transcript Minicorso sull’ HTML 

1
HTML
Minicorso sull’ HTML
Tempo richiesto 4 ore
A cura di Leo Izzo
HTML




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.
2
HTML



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).
3
HTML




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.
4
HTML




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.
5
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.


6
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.




7
HTML



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>
8
HTML






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>
9
HTML




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
10
HTML
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

<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>







</H1>
11
HTML



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).
esempio
Link al file prova3.html
12
HTML




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
13
HTML






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.
14
TESTO PREFORMATTATO






<pre> per formattare il testo a piacere.
Es: <pre>
Muu (00)
V-------------\
||
||
<pre>
15
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 : &quot; &laquo; &copy;
Le entità con numero iniziano con la & aggiunte con il # e
termina con il ;
es: &#130; &#245;
Per scrivere la parola poiché : poich&eacute; oppure
poich&#233;
16
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
17
LISTE NON NUMERATE

<UL> al posto di <OL>
18
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
19
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.
20
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>


21
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.
22
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.
23
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>
24
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).
25
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
26
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
27
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.
28
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.
29
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
30
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.
31
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
32
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
33
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.
34
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
35
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
36
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>











37
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
38
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.
39
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
40
41
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.
42
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.
43
ESEMPIO SCHEDA

<
FORM METHOD= POST ACTION=“http://www.nomeserver.com/cgi-bin/nomescheda”>
– 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
44
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>
45
Esempio








<title>prova scheda1</title>
</head>
<body>
inserisci il tuo nome:<input name="Nome">
<Input type="submit">
</body>
</html>
vedi file scheda1.html
46
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>


47
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”>




48
Selezioni

Le selezioni permettono al lettore di selezionare uno o più oggetti da
un menù o da una lista.

<select name="colore">
–
–
–
–




</select>
Possiamo utilizzare l’attributo <value>per inoltrare un testo diverso da quello
selezionato
<select name="colore">
<option>neri
–
–
–
–

<option>neri
<option>biondi
<option>rossi
<option>castani
<option>biondi
<option>rossi
<option>castani
<option value=“strani”> giallo canarino
</select>
49
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>
50
Fine
51