HTML.

Presentazione sul tema: "HTML."— Transcript della presentazione:

1 HTML

2 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

3 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.

4 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:

5 A STELLA: A LISTA LINEARE: MISTA:

6 html Hyper Text Markup Language
Hyper Text Markup Language è un linguaggio usato per realizzare pagine web

7 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

8 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)

9 Le pagine possono contenere
disegni animazioni fotografie sfondi bottoni linee di separazione ecc

10 UPLOAD TRASFERIMENTO DEI FILE (UPLOAD) COMPUTER MODEM SERVER INTERNET
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:

11 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)

12 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.

13 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: 640x x x x1024 da 16 colori fino a 16,8 milioni di colori

14 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.

15 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à.

16 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).

17 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.

18 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.

19 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.

20 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).

21 <codice parametro1, parametro2, ... parametroN>
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.

22 IL PRIMO TAG E’ <HTML>
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

23 <HTML> <HEAD> </HEAD> <BODY> </BODY>
La sezioni corpo (BODY), contenente il documento vero e proprio con tutti gli elementi caratteristici dell'ipertesto.                                      <HTML>                                       <HEAD>                                        </HEAD>                                        <BODY>                                                </BODY>                                          </HTML>                                                                                                        

24 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>

25 <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

26 <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.

27 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> elementi di informazione quali: </head> la parte restante del documento </html> <base> <link> <meta> <style> <title> <script>

28 <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">

29 ECCO UN ESEMPIO

30 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

31 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 =LEFT ALLINEAMENTO A SINISTRA =RIGHT ALLINEAMENTO A DESTRA =CENTER ALLINEAMENTO AL CENTRO =JUSTIFY ALLINEAMENTO GIUSTIFICATO ESEMPIO

32 INTESTAZIONE LO STILE DEI CARATTERI
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. 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 TAG<S>

33 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

34 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. ES ES ES

35 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

36 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

37 <UL> LISTA CASUALE <OL> LISTA ORDINATA
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

38 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

39 LINEA ORIZZONTALE E’ POSSIBILE INSERIRE UNA LINEA ORIZZONTALE. IL TAG APPOSITO E’ <HR>. GLI ATTRIBUTI SONO: ALIGN =LEFT ALLINEAMENTO A SINISTRA =RIGHT ALLINEAMENTO A DESTRA =CENTER ALLINEAMENTO AL CENTRO WIDTH =NUMERO LARGHEZZA IN PIXEL =“N%” LARGHEZZA % RISPETTO ALLA PAGINA SIZE =NUMERO SPESSORE IN PIXEL ESEMPIO

40 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

41 LE INTESTAZIONI BORDI E COLORI
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 AMPIEZZA DEL BORDO CELLSPACING N° DI PIXEL SPAZIO TRA CELLE CELLPADDING N° DI PIXEL SPAZIO TRA BORDO E CELLE ESEMPIO

42 STRUTTURA E DIMENSIONE DI UNA TABELLA
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 LEFT TABELLA A SINISTRA RIGHT TABELLA A DESTRA CENTER TABELLA AL CENTRO WIDTH N° PIXEL LARGHEZZA IN PIXEL N% LARGHEZZA IN % ESEMPIO

43 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

44 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.

45 IL SUONO DI SOTTOFONDO ESEMPIO
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

46 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.

47 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: COLLEGAMENTI TRA PARTI DEL MEDESIMO DOCUMENTO COLLEGAMENTI TRA DOCUMENTI DIVERSI, MA COLLOCATI SULLO STESSO ELABORATORE COLLEGAMENTI TRA DOCUMENTI DISLOCATI SU DIVERSI SITI.

48 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.

49 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 E’ POSSIBILE FARE UN COLLEGAMENTO A PARTIRE DA UN’IMMAGINE.

50

51 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

52 ESEMPIO GLI ATTRIBUTI PER IL TAG <FRAMESET> SONO DUE
COLS =N° DI PIXEL AMPIEZZA DEL FRAME IN PIXEL =% SUL TOTALE AMPIEZZA DEL FRAME IN % = * AMPIEZZA AUTOMATICA ROWS =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 DUE FRAME VERTICALI UGUALI.

53 ESEMPIO DUE FRAME ORIZZONTALI UGUALI:
DUE FRAME ORIZZONTALI IL PRIMO PARI AL 16% DELL’ALTEZZA TOTALE

54 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: SI DEFINISCONO TRE FRAME ORIZZONTALI E QUINDI SI DIVIDE IL SECONDO FRAMEORIZZONTALE IN DUE “SOTTOFRAME” VERTICALI INTESTAZIONE CORPO PIE DI PAGINA SINTESI O MENU

55 ESEMPIO ABBIAMO QUATTRO DOCUMENTI E VOGLIMO DISPORLI NEL SEGUENTE MODO: PROGRAMMA:

56 GLI ATTRIBUTI DI FRAME: I BORDI
FRAMEBORDER = 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.

57 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

58 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