HTML
LE PAGINE WEB
COME SI SA, INTERNET E’ UN SISTEMA MONDIALE DI
RETI DI COMPUTER CHE PERMETTE DI UTILIZZARE
UN SISTEMA DI CONNESSIONE TRA COMPUTER.
SCOPO DI QUESTO CORSO E’ QUELLO IMPARARE LE
TECNICHE PER IL DISEGNO E LA STRUTTURAZIONE DI
UN DOCUMENTO IN INTERNET.
I DOCUMENTI CHE SI POSSONO CONSULTARE SU INTERNET
PRESENTANO:
•SFONDO COLORATO O FORMATO DA IMMAGINI
•CARATTERI CON COLORI E DIMENSIONI DIVERSIFICATE
•IMMAGINI
•POSSIBILITA’ DI COLLEGARSI E APRIRE ALTRI DOCUMENTI
CORRELATI
•ECC
PROGETTAZIONE DI UN SITO WEB
PER COSTRUIRE UN SITO BISOGNA PRIMA DI TUTTO DEFINIRE
GLI OBIETTIVI, POI PRECISARNE I CONTENUTI,
ORGANIZZARE I CONTENUTI IN PAGINE E CREARE UNA
STRUTTURA DI NAVIGAZIONE TRA LE PAGINE.
MOLTO IMPORTANTE E’ LA HOME PAGE.
PROGETTAZIONE DELLA STRUTTURA DEL SITO
LA PRESENTAZIONE DEI COLLEGAMENTI SULLE PAGINE
DETERMINA LA MODALITA’ DI NAVIGAZIONE E QUINDI LA
STRUTTURA DEL SITO.
ESISTONO DIVERSE STUTTURE:
A RETE:
AD ALBERO:
A STELLA:
A LISTA LINEARE:
MISTA:
html
Hyper
Text
Markup
Language
è un linguaggio usato per realizzare pagine web
Le pagine possono essere registrate su un
SERVER INTERNET
Possono essere visualizzate da un
BROWSER
che interpreta la pagine e le visualizza in forma
grafica
SITO INTERNET O SITO WEB
Insieme di pagine fra loro collegate che si
riferiscono ad uno stesso utente.
WEB EDITOR
Programma che facilita il lavoro di creazione
delle pagine generando in modo automatico
codice html
(FrontPage - Macromedia Dreamweaver)
Le pagine possono contenere
•disegni
•animazioni
•fotografie
•sfondi
•bottoni
•linee di separazione
•ecc.............
TRASFERIMENTO DEI FILE (UPLOAD)
UPLOAD
COMPUTER
MODEM
SERVER INTERNET
Per il trasferimento dei file che contengono le pagine dal proprio computer al server
internet si usa un programma di
FTP
File Transfer Protocol
L'utente deve possedere
•Permesso di accesso (ACCOUNT) al Server Internet che si compone di
•nome di identificazione
•password
forniti dall'amministratore del Server WEB
Il nuovo sito viene identificato da un nome simbolico del tipo: www.xyz123.it
I FORMATI DEI DATI
TESTI
•TEXT (.txt) insieme di righe senza particolari formattazioni
•DOC (.doc) testi creati con Word per windows
•RTF (.rtf) - Rich Text Format - permette di mantenere tutta la formattazione
originale che può essere letta ed interpretata da altre applicazioni offrendo la
possibilità di scambiare file di testo fra differenti programmi di word processor
(salvare il file nel formato rtf)
•PDF (.pdf) - Portable Document Format - Sono file creati con il programma
ADOBE ACROBAT e visualizzabili con il programma ACROBAT READER.
Questo formato viene usato per documenti di grandi dimensioni.
I documenti conservano l'aspetto dei documenti originali (layout).
Possono essere visualizzati su qualsiasi tipo di computer (windows, macintosh,
unix, linux)
DISEGNI E FOTOGRAFIE
PIXEL (picture element) è la più piccola unità che un
computer può visualizzare su un monitor.
Formano:
•caratteri
•grafici
•immagini
Ogni pixel porta con se delle informazioni (1, 4, 8, 16, 24, 32
byte di informazioni) relative alla posizione e al colore.
RISOLUZIONE VIDEO
Numero di pixel che definiscono larghezza e altezza
dell'immagine video.
Dipende dalla scheda.
•Scheda VGA standard
risoluzione video 640x480 pixel
16 colori
•Scheda Super VGA e XGA
risoluzione video: 640x480 - 800x600 - 1024x768 1280x1024
da 16 colori fino a 16,8 milioni di colori
FORMATI IMMAGINI
•BMP (.bmp) bitmap - DIP (.dip) device indipendent bitmap
Il formato definisce posizione e colore per ogni pixel.
L'immagine non può essere modificata nelle sue dimensioni.
Se ristretta viene tagliata.
•WMF (.wmf) - Windows Meta File
Formato di file per S.O. Windows che contiene comandi al S.O. per la
visualizzazione dell'immagine sullo schermo.
Consente una notevole riduzione dello spazio.
E' un formato di tipo vettoriale: le immagini possono essere ridimensionate senza
perdere la qualità.
•GIF (.gif) - Graphics Interchange Format
Uno dei formati più usato in Internet;
è basato su un metodo di compressione denominato LZW.
Sequenza di immagini in un file GIF = GIF animate
•JPEG (.jpg) - Joint Photographic Experts Group
Formato basato su algoritmi di compressione.
Molto usato in Internet perchè riesce a dare la massima qualità con la minima
dimensione.
SUONI
I formati più usati sono
WAV - Wave: Microsoft
AIFF - Audio Interchange File Format: Apple
AU - U-Law: Sun
Sono formati mono e stereo con frequenze variabili
MIDI (.mid) - Musical Instrument Digital Interface
Protocollo per riproduzione e registrazione su sintetizzatori digitali delle
schede audio dei computer.
I file .mid contengono le informazioni sul suono piuttosto che il suono
stesso e per questo occupano poco spazio.
MP3 - Formato standard per canzoni e motivi musicali sulla rete Internet.
E' basato su un algoritmo di compressione della musica digitale in modo
da ridurre fino a dieci volte le dimensioni dei documenti sonori,
mantenendo un suono di alta fedeltà.
FILMATI
MPEG (.mpg) - Moving Picture Experts Group
richiede:
•una buona quantità di memoria centrale
•un processore veloce
•grande quantità di spazio
Le dimensioni sono elevate anche per filmati di pochi minuti.
MOV (.mov) - Movie
I file di questo tipo possono essere visualizzati con il software Quick time.
AVI (.avi) - (Audio Visual)
Molto usato in Internet.
Fornisce un elevato grado di compressione (250 a 1) necessario per far viaggiare i filmati sulla
rete con tempi ridotti.
I file sono poi riproducibili sul computer usando un software standard REAL PLAYER che
integra REAL AUDIO per i suoni.
Usano la tecnologia STREAMING: i suoni e le immagini vengono decompressi e riprodotti
appena arrivano dalla rete al computer senza dover aspettare che venga scaricato l'intero file.
Tecnologia FLASH (.swf)
Per creare animazioni in ambiente WEB. Prodotto dalla MACROMEDIA.
I file possono essere importati all'interno di documenti html e visualizzati con il browser che
possiede il plug-in Flash Player (scaricabile gratuitamente dal sito macromedia).
UN DOCUMENTO PUBBLICATO SU INTERNET
PRENDE IL NOME DI PAGINA WEB.
LO STRUMENTO UTILIZZATO PER LA
CREAZIONE DI PAGINE WEB E’ IL LINGUAGGIO
HTML. HTML, E’ ACRONIMO DI HYPERTEXT
MARKUP LANGUAGE OVVERO “LINGUAGGIO
DI CONTRASSEGNI PER IPERTESTI “.PER
IPERTESTO SI INTENDE UN INSIEME DI UNITA’
DI INFORMAZIONI CONNESSE TRA DI LORO
ATTRAVERSO ASSOCIAZIONI DISPONIBILI PER
LA SCELTA DELL’UTENTE.
HTML E’ UN LINGUAGGIO COMPOSTO DA
CONTRASSEGNI CHE PERMETTONO DI COSTRUIRE
PAGINE WEB CONTROLLANDO LA PRESENZA, LA
DISPOSIZIONE E L’ASPETTO DI TUTTO CIO’ CHE IN
TALE PAGINA PUO’ COMPARIRE: TESTO
FORMATTATO, IMMAGINI, COLLEGAMENTI AD
ALTRI DOCUMENTI, ECC..
QUINDI HTML NON E’ UN LINGUAGGIO DI
PROGRAMMAZIONE MA DI DEFINIZIONE E DI
DISEGNO DELL’ASPETTO DI UN DOCUMENTO.
UN FILE HTML E’ UN FILE DI TIPO TESTO E
VIENE SCRITTO CON UN COMUNE
PROGRAMMA DI EDITOR TIPO BLOCCO
NOTE, IL FILE VA SALVATO CON
ESTENSIONE .HTM
PER PASSARE DAL TESTO A QUANTO
COMPARE SUL MONITOR OCCORRE UN
PROGRAMMA DI VISUALIZZAZIONE DETTO
BROWSER. TALE PROGRAMMA LEGGE IN
INPUT I DATI DEL FILE HTML E PRODUCE IN
OUTPUT SUL VIDEO LA VISUALIZZAZIONE
DELLA PAGINA WEB.
IL FILE HTML CONTIENE NON SOLO
OGGETTI CHE SARANNO VISTI DA CHI
CONSULTA LA PAGINA WEB, MA ANCHE I
COMANDI UTILI PER LA PRESENTAZIONE
DEL CONTENUTO DELLA PAGINA. QUESTI
COMANDI PRENDONO IL NOME DI TAG
(ETICHETTA).
TAG HTML
Sono costituiti da stringhe di caratteri compresi tra i simboli di
minore (<) e maggiore (>):
<codice parametro1, parametro2, ... parametroN>
la fine dell'azione prevista dal codice è indicata dal tag
corrispondente:
</codice>
Tutti i codici possono essere specificati indifferentemente in
maiuscolo o minuscolo, però è utile scrivere i tag sempre in
maiuscolo per distinguerli dalle frasi di testo.
IL PRIMO TAG E’ <HTML>.
IL DOCUMENTO SI SUDDIVIDE IN DUE PARTI:
L’ITESTAZIONE E IL CORPO.
L’INTESTAZIONE E’ CONTRADDISTINTA DAI
TAG <HEAD> E </HEAD>, MENTRE IL CORPO
E’ RACCHIUSO DA <BODY> E </BODY>.
L’INTESTAZIONE CONTIENE IL TITOLO
DELLA PAGINA.
LA PARTE PRINCIPALE E’ IL BODY E QUI SI
TROVA IL VERO CONTENUTO DELLA
PAGINA.
VEDI ESEMPIO1
•La sezioni corpo (BODY), contenente il documento vero e proprio con tutti gli
elementi caratteristici dell'ipertesto.
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>
Struttura di base
<html>
<head>
<title>la mia prima pagina web</title>
</head>
<body>
<p>Ecco la mia prima pagina in html destinata al web.</p>
</body>
</html>
•<html>
Inizio codice html vero e proprio, tutto ciò che sarà posto all'interno di
questo documento e fino al relativo tag di chiusura sarà inteso come
struttura del codice html
•<head>
Testata o head del documento, in questa sezione trovano posto tutti quei
tags che impartiscono direttive al browser quali: titolo, Meta Tags o meta
comandi, richiami ai fogli di stile, scripts, ed altro ancora.
Tutto ciò che si trova all'interno della struttura head non sarà visualizzato
nella pagina ma interpretato dal browser, una zona destinata ad uso
esclusivo dei soli comandi che impartiscono direttive ben specifiche.
•</head
•<body>
Corpo o body del documento, è in questa sezione che lavoreremo
maggiormente ed è proprio qui che andranno inseriti tutti i tags di html:
immagini, suoni, filmati, testo, form, tabelle, links e quant'altro faccia
parte di html.
•</body>
•</html>
Chiusura dei vari elementi (tags), da non dimenticare mai, solo così
potremo avere la certezza di una giusta e corretta interpretazione da parte
di tutti i browser.
ELEMENTI DI STRUTTURA
<head>...</head>
L'elemento <head> viene utilizzato per fornire informazioni sul documento, in questa
sezione trovano posto tutti quei tags che impartiscono direttive ai browser quali:
titolo, Meta comandi , richiami ai fogli di stile, script.
Notare che tutto ciò che si trova all'interno della struttura head non sarà visualizzato,
ma interpretato dal browser, quindi una zona destinata ad uso esclusivo dei soli
comandi che impartiscono direttive ben specifiche.
<html>
<head>
<base>
<link>
elementi di informazione quali:
<meta>
<style>
</head>
<title>
la parte restante del documento
<script>
</html>
<body>...</body>
L'elemento <body> contiene la pagina vera e propria, quello che si
vedrà a video: testo, immagini e tutti gli elementi che forniscono il
controllo e la formattazione della pagina stessa. I possibili attributi
sono: background, bgcolor, link, vlink, alink, text.
<body attributo>
Molti gli attributi associabili a questo tag:
Background: permette di adoperare un’immagine come sfondo
della pagina.
Es: <body background="nome_immagine.gif" >
Bgcolor: serve per colorare lo sfondo. Es:<body bgcolor="green">
Link, vlink, alink
text: si adopera per attribuire un colore al testo. Es:
<body text="green">
ECCO UN ESEMPIO
ECCO UN ESEMPIO
FORMATTAZIONE DEL TESTO
SI INTENDONO TUTTE QUELLE SPECIFICHE CHE
PERMETTONO DI DEFINIRE LA FORMA , LA GRANDEZZA,
LO STILE E IL COLORE DEI CARATTERI E INOLTRE LA
POSIZIONE DEL TESTO ALL’INTERNO DELLA PAGINA E
LA SUA SUDDIVISIONE IN PARAGRAFI.
IL TAG <BR> VA A CAPO
E NON VUOLE IL TAG DI FINE
IL TAG <P> RAGGRUPPA LE RIGHE IN UN PARAGRAFO
IL TAG DI FINE E’ OPZIONALE
ESEMPIO
ATTRIBUTI
UN ATTRIBUTO E’ UNA PROPRIETA’ ASSOCIATA AL
TAG. PERMETTE DI SPECIFICARE UNA FUNZIONE
AGGIUNTIVA RISPETTO A QUELLA DI BASE DEL TAG.
ALL’ATTRIBUTO DEVE ESSERE ASSEGNATO UN
VALORE.
SPECIFICHE DI ALLINEAMENTO DEL TESTO PER IL TAG <P>
ALIGN
ESEMPIO
=LEFT
ALLINEAMENTO A SINISTRA
=RIGHT
ALLINEAMENTO A DESTRA
=CENTER
ALLINEAMENTO AL CENTRO
=JUSTIFY
ALLINEAMENTO GIUSTIFICATO
INTESTAZIONE
UN TITOLO E’ L’ELEMENTO CHE DEVE DISTINGUERSI DAL TESTO.
SONO PREVISTI 6 LIVELLI DI TITOLI. VA DA <H1> AD <H6>
ESEMPIO
ANCHE PER IL TAG <HN> E’ POSSIBILE SPECIFICARE L’ATTRIBUTO
ALIGN.
ESEMPIO
LO STILE DEI CARATTERI
LO STILE DEL CARATTERE INDICA LA MODALITA’ CON CUI SI
PRESENTANO LE LETTERE E SONO NORMALMENTE QUATTRO:
GRASSETTO
TAG <B>
CORSIVO
TAG <I>
SOTTOLINEATO TAG <U>
BARRATO
ESEMPIO
TAG<S>
I FONT E LA DIMENSIONE DEL CARATTERE
L’ASPETTO E IL DISEGNO DEFINISCONO LA
FORMBASE (TYPEFACE) DEI CARATTERI.
ESISTONO UNA GRANDE QUANTITA’ DI CARATTERI .
I PIU’ USATI SONO:
•TYPEFACE
•ARIAL
•TIME NEW ROMAN
•COURIER-NEW
•COMIC
UN ALTRO ELEMENTO CHE CONTRADDISTINGUE I CARATTERI E’ LA
DIMENSIONE.
IL TYPEFACE, LO STILE E LA DIMENSIONE FORMANO IL FONT DI UN
CARATTERE.
IL LINGUAGGIO HTML PERMETTE DI SPECIFICARE IL FONT DEL TESTO DA
VISUALIZZARE. ALLO SCOPO VIENE UTILIZZATO IL TAG <FONT>.
POICHE’ IL FONT E DEFINITO DA TRE ELEMENTI TYPEFACE, STILE E
DIMENSIONE E POICHE’ LO STILE E’ DEFINITO ATTRAVERSO ALTRI TAG
SPECIFICI (<B>,<I>,<U> ECC.) AL TAG FONT SONO ASSOCIATI SOLTANTO
DUE ATTRIBUTI: FACE PER DEFINIRE L’ASPETTO E LA FORMA DEI
CARATTERI E SIZE PER DEFINIRE LA DIMENSIONE.
PER L’ATTRIBUTO FACE I VALORI AMMESSI SONO I NOMI DI UN TYPEFACE.
SE NON SPECIFICATO PER DEFAULT ASSUME TIME NEW ROMAN
L’ATTRIBUTO SIZE INDICA IL VALORE DELLA DIMENSIONE DEL
CARATTERE E VA DA 1 A 7. SE NON SPECIFICATO ASSUME IL VALORE 3.
ESEMPIO
ESEMPIO
ES.
ESEMPIO
ES
ESEMPIO
ES
ES
COLORI
HTML CI PERMETTE DI MODIFICARE SIA LO SFONDO
DELLA PAGINA CHE IL COLORE DEL TESTO. I COLORI
RACCOMANDATI DAL WWW CONSORTIUM SONO SEDICI
E POSSONO ESSERE IDENTIFICATI CON IL NOME O CON
UN NUMERO ESADECIMALE.
LA DEFINIZIONE DEI COLORI IN HTML E’ ORGANIZZATA
ATTRAVERSO GLI DEL TAG <BODY> E DEL TAG <FONT>
E’ POSSIBILE DEFINIRE IL COLORE DELLO SFONDO E IL
COLORE DEL TESTO PER L’INTERO CORPO USANDO GLI
ATTRIBUTI BGCOLOR E TEXT ASSOCIATI AL TAG
<BODY>
SE SI VUOLE MODIFICARE IL COLORE SOLTANTO DI UNA
PARTE DEL TESTO, SI USARE L’ATTRIBUTO COLOR
ASSOCIATO AL TAG <FONT>
ESEMPIO
LA DISPOSIZIONE DEL TESTO
ELENCHI PUNTATI E NUMERATI
HTML PERMETTE DI CREARE LISTE EVIDENZIATE CON SIMBOLI DI
VARIO GENERE O DI NUMERARE GLI ELENCHI IN SEQUENZA.
SONO PREVISTE TRE MODALITA’ DIVERSE DI CREAZIONE DI
ELENCHI:
•LA LISTA “DISORDINATA” CHE CONSISTE IN ELENCO DI VOCI,
CIASCUNO PRECEDUTO DA UN CARATTERE PARTICOLARE
•LA LISTA “ORDINATA” DOVE OGNI VOCE E’ PRECEDUTA DA UN
NUMERO O DA UNA LETTERA CHE INDICA LA POSIZIONE DELLA
VOCE ALL’INTERNO DELLA LISTA
•LA LISTA DI DEFINIZIONE IN CUI OGNI ELEMENTO IN CUI OGNI
ELEMENTO E’ COMPOSTO DA DUE PARTI: UNA CHE INDICA IL
TERMINE DA DEFINIRE E UNA CHE INDICA IL TESTO DELLA
DEFINIZIONE
PER I PRIMI DUE TIPI DI ELENCHI, SI UTILIZZANO DUE TAG
CHE SEGNALANO L’INIZIO DELL’ELENCO, <UL> E <OL>, E
OGNI VOCE DELLA LISTA E’ RACCHIUSA TRA I TAG <LI> E
</LI>.
<UL>
LISTA CASUALE
<OL> LISTA ORDINATA
<LI>
VOCE O ELEMENTO DELLA LISTA
SIA PER <UL> CHE PER <OL> E’ POSSIBILE SPECIFICARE IL TIPO DI
CONTRASSEGNO, L’ATTRIBUTO PER CAMBIARE IL CONTRASSEGNO E’
TYPE.
IN PARTICOLARE PER <UL> I VALORI AMMESSI SONO:
•DISC
DISCO O CERCHIO
•CIRCLE
CIRCONFERENZA VUOTA
•SQUARE QUADRATO
MENTRE PER L’ATTRIBUTO <UL> I VALORI
AMMESSI SONO:
A, a, I, i, L (PER DEFAULT)
PER IL TERZO ELENCO ,LA LISTA DI DEFINIZIONE
SI USA IL TAG <DL> CHE INTRODUCE UNA LISTA
IN CUI OGNI VOCE E’ COMPOSTA DA DUE PARTI: LA
PRIMA SPECIFICA I TERMINI DI DEFINIZIONE, LA
SECONDA PRESENTA LA DEFINIZIONE:
<DL>
LISTA DI DEFINIZIONE
<DT>
TERMINE DA DEFINIRE
<DD>
DEFINIZIONE
ESEMPIO
ESEMPIO
LINEA ORIZZONTALE
E’ POSSIBILE INSERIRE UNA LINEA ORIZZONTALE. IL TAG
APPOSITO E’ <HR>.
GLI ATTRIBUTI SONO:
ALIGN
WIDTH
SIZE
ESEMPIO
=LEFT
ALLINEAMENTO A SINISTRA
=RIGHT
ALLINEAMENTO A DESTRA
=CENTER
ALLINEAMENTO AL CENTRO
=NUMERO
LARGHEZZA IN PIXEL
=“N%”
LARGHEZZA % RISPETTO ALLA PAGINA
=NUMERO
SPESSORE IN PIXEL
LE TABELLE
LE TABELLE SONO UNO DEGLI ELEMENTI PIU’ SEMPLICI PER
ORGANIZZARE LA DISPOSIZIONE DEGLI OGGETTI DELLA PAGINA.
UNA TABELLA E’ FORMATA DA RIGHE E COLONNE , L’INTERSEZIONE DI
UNA RIGA CON UNA COLONNA SI CHIAMA CELLA.
PER DEFINIRE UNA TABELLA IN HTML SONO PREVISTE NOVE TAG:
IL PRIMO E’ <TABLE>
ALL’INTERNO DELLA COPPIA <TABLE> </TABLE> VANNO DEFINITE LE
RIGHE CHE COMPONGONO LA TABELLA CON IL TAG <TR> E
L’INTERNO DI CISCUNA RIGA SI DEFINISCONO LE CELLE DI DATI CON
IL TAG <TD>
ESEMPIO
LE INTESTAZIONI
E’ POSSIBILE DEFINIRE UNA RIGA DI INIZIALE CHE CONTENGA
IL NOME DI OGNI COLONNA, LE CELLE DELLA RIGA DI
INTESTAZIONE SI DISTINGUONO PERCHE’ SONO DEFINITE DAL
TAG <TH>IN LUOGO DEL<TD>. IL COTENUTO VIENE
PRESENTATO DIRETTAMENTE IN GRASSETTO.
BORDI E COLORI
PER MIGLIORARE LA TABELLA SI PUO’ DEFINIRE ,UN BORDO,
LA SPAZIATURA TRA LE CELLE E LASCIARE SPAZIO TRA IL
CONTENUTO DI UNA CELLA E IL BORDO DELLA STESSA.
BORDER
N° DI PIXEL
CELLSPACING
N° DI PIXEL
CELLPADDING
N° DI PIXEL
ESEMPIO
AMPIEZZA DEL BORDO
SPAZIO TRA CELLE
SPAZIO TRA BORDO E CELLE
SI POSSONO AGGIUNGERE DEGLI EFFETTI CROM5ATICI UTILIZZANDO
L’ATTRIBUTO BGCOLOR=“COLORE” CHE SPECIFICA IL COLORE
DELLO SFONDO, BORDERCOLOR=“COLORE” CHE SPECIFICA IL
COLORE DEL BORDO.
STRUTTURA E DIMENSIONE DI UNA TABELLA
PER COMPLETARE LA LISTA DEGLI ATTRIBUTI POSSIBILI NEL TAG
<TABLE>, SI DEVONO CITARE ANCHE ALIGN E WIDTH CHE
SPECIFICANO RISPETTIVAMENTE LA POSIZIONE DELLA TABELLA
ALL’INTERNO DELLA PAGINA E LA SUA LARGHEZZA.
ALIGN
WIDTH
ESEMPIO
LEFT
TABELLA A SINISTRA
RIGHT
TABELLA A DESTRA
CENTER
TABELLA AL CENTRO
N° PIXEL
LARGHEZZA IN PIXEL
N%
LARGHEZZA IN %
LE IMMAGINI
PER INSERIRE UNA FIGURA ALL’INTERNO DI UNA PAGINA WEB E’
POSSIBILE UTILIZZARE DUE TAG, <IMG> E <OBJECT>; IN
PARTICOLARE IL SECONDO SERVE PER INSERIRE UN OGGETTO DI
QUALSIASI NATURA NON NECESSARIAMENTE UN IMMAGINE.
IL TAG <IMG> NON NECESSITA DEL TAG DI CHIUSURA.
GLI ATTRIBUTI SONO:
SRC =URL
POSIZIONE DEL FILE
ALT = BREVE TESTO
TESTO ALTERNATIVO ALLA FIGURA
ALIGN= TOP
TESTO ALLINEATO IN ALTO
=MIDDLE
TESTO ALLINEATO IN CENTRO
=BOTTOM
TESTO ALLINEATO IN BASSO
ESEMPIO
ATTRIBUTI PER LA PRESENTAZIONE
DELLE IMMAGINI
PER CIASCUNA IMMAGINE E’ SOLITAMENTE DEFINITO IL
SUO INGOMBRO ESPRESSO COME NUMERO DI PIXELIN
ORIZZONTALE E IN VERTICALE, QUESTO NUMERO PERO’
PUO’ ESSERE MODIFICATO ALL’INTERNO DEL FILE HTML.
HEIGHT= N° PIXEL
ALTEZZA
WIDTH = N° PIXEL
LARGHEZZA
PER DISTANZIARE L’IMMAGINE DAL RESTO DEL TESTO O
DA ALTRE IMMAGINI :
HSPACE= N° PIXEL
SPAZIATURA ORIZZONTALE
VSPACE = N° PIXEL
SPAZIATURA VERTICALE
BORDER = N° PIXEL
LARGHEZZA BORDO
PROVATE A FARE DELLE PROVE CON UNA STESSA
IMMAGINE.
IL SUONO DI SOTTOFONDO
C’E’ LA POSSIBILITA’ DI ASSOCIARE UN BRANO MUSICALE A UNA
PAGINA WEB UTILIZZANDO IL TAG <BGSOUND>, CHE VA
INSERITO ALL’INTERNO DELLA SEZIONE <HEAD>. <BGSOUND>
DEVE ESSERE ACCOMPAGNATO DALL’ATTRIBUTO SRC CHE
RICHIEDE COME VALORE IL RIFERIMENTO AL FILE MUSICALE DA
INSERIRE.
ESEMPIO
IPERTESTO
FINO AD ORA ABBIAMO VISTO CHE L’ HTML CI CONSENTE DI
ORGANIZZARE E DISPORRE IL TESTO;INSERIRE IMMAGINI
SUONI QUINDI CHE CI PERMETTE DI COSTRUIRE DOCUMENTI
MULTIMEDIALI (DIVERSI MEZZI DI COMUNICAZIONE).
ORA VEDREMO LE MODALITA’ CHE HTML CI OFFRE PER
COSTRUIRE UN’IPERTESTO.
CON IL TERMINE IPERTESTO SI DEFINISCE UN TESTO CHE PUO’
ESSERE LETTO NON SOLO IN MODO SEQUENZIALE MA ANCHE
SEGUENDO RIFERIMENTI O “SALTI LOGICI” AL BISOGNO.
L’ESEMPIO PIU’ SEMPLICE DI IPERTESTO E’ UNO SCRITTO
CORREDATO DI NOTE. IL NUMERO ALL’INTERNO DEL TESTO
CHE INDICA LA NOTA , COSTITUISCE, DAL PUNTO DI VISTA
LOGICO L’ESEMPIO PIU’ SEMPLICE DI LINK.
I LINK
UN LINK INDICA LA POSIZIONE E LA MODALITA’ PER
ACCEDERE A UN ALTRO TESTO O A UN TESTO AGGIUNTIVO
LOGICAMENTE CORRELATO AL TESTO IN CONSULTAZIONE.
DAL PUNTO DI VISTA DEL LINGUAGGIO HTML SI POSSONO
DISTINGUERE I SEGUENI TIPI DI COLLEAMENTO:
A) COLLEGAMENTI TRA PARTI DEL MEDESIMO DOCUMENTO
B) COLLEGAMENTI TRA DOCUMENTI DIVERSI, MA COLLOCATI
SULLO STESSO ELABORATORE
C) COLLEGAMENTI TRA DOCUMENTI DISLOCATI SU DIVERSI
SITI.
LE ANCORE
NEL COLLEGAMENTO TRA DUE DOCUMENTI SONO DEFINITI
DUE PUNTI: IL PUNTO DI “PARTENZA” DOVE E’ INSERITA LA
DEFINIZIONE DEL COLLEGAMENTO E IL PUNTO DI
“ARRIVO”, CIOE’ IL PUNTO IN CUI IL COLLEGAMENTO
RIMANDA.
IL NOME DEL TAG PRINCIPALE CHE PERMETTE DI DEFINIRE
UN IPERTESTO PRENDE IL NOME DA QUESTA ANALOGIA TRA
COLLEGAMENTO E ANCORA:
IL TAG E’<A> E SERVE A DEFINIRE SIA IL PUNTO DI
PARTENZA CHE DI ARRIVO.
NEL TAG <A> INIZIALE E </A> FINALE E’ RACCHIUSO
L’OGGETTO CHE REALIZZA IL PUNTO DI PARTENZA.
GLI ATTRIBUTI SONO:
HREF
= COLLEGAMENTO IPERTESTUALE
NAME
=STRINGA DI CARATTERI
HREF VA POSTO NEL PUNTO DI PARTENZA DEL
COLLEGAMENTO, MENTRE NAME E’ L’ATTRIBUTO DEL
PUNTO D’ARRIVO.
ESEMPIO
ESEMPIO
E’ POSSIBILE FARE UN COLLEGAMENTO A PARTIRE DA
UN’IMMAGINE.
ESEMPIO
I FRAME
FRAME E’ UNA PAROLA INGLESE CHE PUO’ ESSERE
TRADOTTA “RIQUADRO” E VIENE USATA PER INDICARE LA
POSSIBILITA’ DI SUDDIVIDERE UNA PAGINA WEB IN DIVERSI
RIQUADRI. CIASCUNA AREA IN CUI E’ SUDDIVISA LA PAGINA
PUO’ VISUALIZZARE UN DIVERSO FILE HTML. IN UNA
SINGOLA PAGINA PUO ESSERE DEFINITO UN NUMERO
ILLIMITATO DI FRAME.
PERCOSTRUIRE UNA PAGINA CHE SIA SUDDIVISA IN RIQUADRI
I TAG FONDAMENTALI SONO <FRAMESET> E <FRAME>
<FRAMESET>
= INSIEME DEI FRAME
<FRAME>
= RIQUADRO
GLI ATTRIBUTI PER IL TAG <FRAMESET> SONO DUE
COLS
ROWS
=N° DI PIXEL
AMPIEZZA DEL FRAME IN PIXEL
=% SUL TOTALE
AMPIEZZA DEL FRAME IN %
=*
AMPIEZZA AUTOMATICA
=N° DI PIXEL
ALTEZZA DEL FRAME IN PIXEL
=% SUL TOTALE
ALTEZZA DEL FRAME IN %
=*
ALTEZZA AUTOMATICA
IL PRIMO FRAME OCCUPA IL 20%DELLA PAGINA IL SECONDO
QUELLO CHE RESTA
ESEMPIO
IL SECONDO FRAME OCCUPA 160 PIXEL DELLA PAGINA IL SECONDO
QUELLO CHE RESTA
ESEMPIO
DUE FRAME VERTICALI UGUALI.
ESEMPIO
DUE FRAME ORIZZONTALI UGUALI:
ESEMPIO
DUE FRAME ORIZZONTALI IL PRIMO PARI AL 16% DELL’ALTEZZA TOTALE
ESEMPIO
FRAMESET ANNIDATI
E’ POSSIBILE DEFINIRE NELLA STESSA PAGINA SEGMENTAZIONI SIA IN
SENSO VERTICALE SI ORIZZONTALE; CIO SI OTTIENE SFRUTTANDO LA
POSSIBILITA’ DI DEFINIRE FRAMESET ALL’INTERNO DI UN ALTRO
FRAMESET.
SE I FRAME DI UNA PAGINA WEB DEVONO AVERE UNA STRUTTUTA DEL
TIPO:
INTESTAZIONE
CORPO
PIE DI PAGINA
SINTESI O MENU
SI DEFINISCONO TRE FRAME ORIZZONTALI E QUINDI SI DIVIDE IL
SECONDO FRAMEORIZZONTALE IN DUE “SOTTOFRAME” VERTICALI
ESEMPIO
ABBIAMO QUATTRO DOCUMENTI E VOGLIMO DISPORLI NEL
SEGUENTE MODO:
PROGRAMMA:
GLI ATTRIBUTI DI FRAME: I BORDI
FRAMEBORDER
=0
=1
SENZA BORDO
BORDO RICHIESTO
I MARGINI
PER UNA MIGLIORE IMPAGINAZIONE DEL CONTENUTO DEI FRAME
E’ POSSIBILE ANCHE DEFINIRE DEI MARGINI VUOTI SIA
ORIZZONTALI CHE VERTICALI.
MARGINHEIGHT
=N° PIXEL
ALTEZZA DEL MARGINE
MARGINWIDHT
=N° PIXEL
LARGHEZZA DEL MARGINE
LE BARRE DI SCORRIMENTO
LE BARRE DI SCORRIMENTO VERTICALI ED ORIZZONTALI
VENGONO INSERITE AUTOMATICAMENTE QUANDO IL CONTENUTO
DI UNA PAGINA SUPERA LA DIMENSIONE DEL FRAME.
SCROLLING
=“YES”
PRESENZA DELLA BARRA
=“NO”
ASSENZA DELLA BARRA
=“AUTO”
SCELTA AUTOMATICA
LINK E FRAME
L’ULTIMO ATTRIBUTO CHE VIENE DESCRITTO E’ NAME. QUESTO
ATTRIBUTO VIENE UTILIZZATO PER DISTINGUERE UN FRAME DAGLI
ALTRI.
NAME
= “STRINGA”
NOME DEL FRAME
IL NOME DEL FRAME DIVENTA IMPORTANTE QUANDO E’ UTILIZZATO
IN ASSOCIAZIONE CON L’ATTRIBUTO TARGET DEL TAG <A…:
TARGET
=“STRINGA”
NOME DEL FRAME
NEL COLLEGAMENTO IPERTESTUALE SI PUO’ USARE
L’ATTRIBUTO TARGET PER SPECIFICARE IL NOME DEL
FRAME IN CUI VISUALIZZARE LA PAGINA IL CUI URL ( IL
NOME E’ASSEGNATO AL FRAME CON L’ATTRIBUTO DEL
TAG FRAME). L’ATTRIBUTO TARGET PUO’ ESSERE
IMPOSTO CON DIVERSI VALORI SPECIFICATI.
ESEMPIO
ESEMPIO