La presentazione è in caricamento. Aspetta per favore

La presentazione è in caricamento. Aspetta per favore

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.

Copie: 1
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.

Presentazioni simili


Presentazione sul tema: "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."— Transcript della presentazione:

1

2 HTML

3 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

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

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

6 A STELLA: A LISTA LINEARE: MISTA:

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

8 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

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

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

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

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

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

14 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

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

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

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

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

19 HTML E UN LINGUAGGIO COMPOSTO DA CONTRASSEGNI CHE PERMETTONO DI COSTRUIRE PAGINE WEB CONTROLLANDO LA PRESENZA, LA DISPOSIZIONE E LASPETTO 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 DELLASPETTO DI UN DOCUMENTO.

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

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

22 TAG HTML Sono costituiti da stringhe di caratteri compresi tra i simboli di minore ( ): la fine dell'azione prevista dal codice è indicata dal tag corrispondente: 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.

23 IL PRIMO TAG E. IL DOCUMENTO SI SUDDIVIDE IN DUE PARTI: LITESTAZIONE E IL CORPO. LINTESTAZIONE E CONTRADDISTINTA DAI TAG E, MENTRE IL CORPO E RACCHIUSO DA E. LINTESTAZIONE CONTIENE IL TITOLO DELLA PAGINA. LA PARTE PRINCIPALE E IL BODY E QUI SI TROVA IL VERO CONTENUTO DELLA PAGINA. VEDI ESEMPIO1 ESEMPIO1

24 La sezioni corpo (BODY), contenente il documento vero e proprio con tutti gli elementi caratteristici dell'ipertesto.

25 la mia prima pagina web Ecco la mia prima pagina in html destinata al web. Struttura di base

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

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

28 ELEMENTI DI STRUTTURA... L'elemento 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. elementi di informazione quali: la parte restante del documento

29 ... L'elemento 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. Molti gli attributi associabili a questo tag: Background: permette di adoperare unimmagine come sfondo della pagina. Es: Bgcolor: serve per colorare lo sfondo. Es: Link, vlink, alink text: si adopera per attribuire un colore al testo. Es:

30 ECCO UN ESEMPIO

31 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 ALLINTERNO DELLA PAGINA E LA SUA SUDDIVISIONE IN PARAGRAFI. IL TAG VA A CAPO E NON VUOLE IL TAG DI FINE IL TAG RAGGRUPPA LE RIGHE IN UN PARAGRAFO IL TAG DI FINE E OPZIONALE ESEMPIO

32 ATTRIBUTI UN ATTRIBUTO E UNA PROPRIETA ASSOCIATA AL TAG. PERMETTE DI SPECIFICARE UNA FUNZIONE AGGIUNTIVA RISPETTO A QUELLA DI BASE DEL TAG. ALLATTRIBUTO DEVE ESSERE ASSEGNATO UN VALORE. SPECIFICHE DI ALLINEAMENTO DEL TESTO PER IL TAG ALIGN =LEFT ALLINEAMENTO A SINISTRA =RIGHT ALLINEAMENTO A DESTRA =CENTER ALLINEAMENTO AL CENTRO =JUSTIFY ALLINEAMENTO GIUSTIFICATO ESEMPIO

33 INTESTAZIONE UN TITOLO E LELEMENTO CHE DEVE DISTINGUERSI DAL TESTO. SONO PREVISTI 6 LIVELLI DI TITOLI. VA DA AD ESEMPIO ANCHE PER IL TAG E POSSIBILE SPECIFICARE LATTRIBUTO 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 CORSIVO TAG SOTTOLINEATO TAG BARRATO TAG ESEMPIO

34 I FONT E LA DIMENSIONE DEL CARATTERE LASPETTO 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

35 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. POICHE IL FONT E DEFINITO DA TRE ELEMENTI TYPEFACE, STILE E DIMENSIONE E POICHE LO STILE E DEFINITO ATTRAVERSO ALTRI TAG SPECIFICI (,, ECC.) AL TAG FONT SONO ASSOCIATI SOLTANTO DUE ATTRIBUTI: FACE PER DEFINIRE LASPETTO E LA FORMA DEI CARATTERI E SIZE PER DEFINIRE LA DIMENSIONE. PER LATTRIBUTO FACE I VALORI AMMESSI SONO I NOMI DI UN TYPEFACE. SE NON SPECIFICATO PER DEFAULT ASSUME TIME NEW ROMAN LATTRIBUTO SIZE INDICA IL VALORE DELLA DIMENSIONE DEL CARATTERE E VA DA 1 A 7. SE NON SPECIFICATO ASSUME IL VALORE 3. ESEMPIO ES. ES

36 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 E DEL TAG E POSSIBILE DEFINIRE IL COLORE DELLO SFONDO E IL COLORE DEL TESTO PER LINTERO CORPO USANDO GLI ATTRIBUTI BGCOLOR E TEXT ASSOCIATI AL TAG SE SI VUOLE MODIFICARE IL COLORE SOLTANTO DI UNA PARTE DEL TESTO, SI USARE LATTRIBUTO COLOR ASSOCIATO AL TAG ESEMPIO

37 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 ALLINTERNO 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

38 PER I PRIMI DUE TIPI DI ELENCHI, SI UTILIZZANO DUE TAG CHE SEGNALANO LINIZIO DELLELENCO, E, E OGNI VOCE DELLA LISTA E RACCHIUSA TRA I TAG E. LISTA CASUALE LISTA ORDINATA VOCE O ELEMENTO DELLA LISTA SIA PER CHE PER E POSSIBILE SPECIFICARE IL TIPO DI CONTRASSEGNO, LATTRIBUTO PER CAMBIARE IL CONTRASSEGNO E TYPE. IN PARTICOLARE PER I VALORI AMMESSI SONO: DISC DISCO O CERCHIO CIRCLE CIRCONFERENZA VUOTA SQUARE QUADRATO

39 MENTRE PER LATTRIBUTO I VALORI AMMESSI SONO: A, a, I, i, L ( PER DEFAULT ) PER IL TERZO ELENCO,LA LISTA DI DEFINIZIONE SI USA IL TAG 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: LISTA DI DEFINIZIONE TERMINE DA DEFINIRE DEFINIZIONE ESEMPIO

40 LINEA ORIZZONTALE E POSSIBILE INSERIRE UNA LINEA ORIZZONTALE. IL TAG APPOSITO E. 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

41 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, LINTERSEZIONE DI UNA RIGA CON UNA COLONNA SI CHIAMA CELLA. PER DEFINIRE UNA TABELLA IN HTML SONO PREVISTE NOVE TAG: IL PRIMO E ALLINTERNO DELLA COPPIA VANNO DEFINITE LE RIGHE CHE COMPONGONO LA TABELLA CON IL TAG E LINTERNO DI CISCUNA RIGA SI DEFINISCONO LE CELLE DI DATI CON IL TAG ESEMPIO

42 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 IN LUOGO DEL. 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

43 SI POSSONO AGGIUNGERE DEGLI EFFETTI CROM5ATICI UTILIZZANDO LATTRIBUTO 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, SI DEVONO CITARE ANCHE ALIGN E WIDTH CHE SPECIFICANO RISPETTIVAMENTE LA POSIZIONE DELLA TABELLA ALLINTERNO 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

44 LE IMMAGINI PER INSERIRE UNA FIGURA ALLINTERNO DI UNA PAGINA WEB E POSSIBILE UTILIZZARE DUE TAG, E ; IN PARTICOLARE IL SECONDO SERVE PER INSERIRE UN OGGETTO DI QUALSIASI NATURA NON NECESSARIAMENTE UN IMMAGINE. IL TAG 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

45 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 ALLINTERNO DEL FILE HTML. HEIGHT= N° PIXEL ALTEZZA WIDTH = N° PIXEL LARGHEZZA PER DISTANZIARE LIMMAGINE 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.

46 IL SUONO DI SOTTOFONDO CE LA POSSIBILITA DI ASSOCIARE UN BRANO MUSICALE A UNA PAGINA WEB UTILIZZANDO IL TAG, CHE VA INSERITO ALLINTERNO DELLA SEZIONE. DEVE ESSERE ACCOMPAGNATO DALLATTRIBUTO SRC CHE RICHIEDE COME VALORE IL RIFERIMENTO AL FILE MUSICALE DA INSERIRE. ESEMPIO

47 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 UNIPERTESTO. 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. LESEMPIO PIU SEMPLICE DI IPERTESTO E UNO SCRITTO CORREDATO DI NOTE. IL NUMERO ALLINTERNO DEL TESTO CHE INDICA LA NOTA, COSTITUISCE, DAL PUNTO DI VISTA LOGICO LESEMPIO PIU SEMPLICE DI LINK.

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

49 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 E SERVE A DEFINIRE SIA IL PUNTO DI PARTENZA CHE DI ARRIVO. NEL TAG INIZIALE E FINALE E RACCHIUSO LOGGETTO CHE REALIZZA IL PUNTO DI PARTENZA.

50 GLI ATTRIBUTI SONO: HREF = COLLEGAMENTO IPERTESTUALE NAME =STRINGA DI CARATTERI HREF VA POSTO NEL PUNTO DI PARTENZA DEL COLLEGAMENTO, MENTRE NAME E LATTRIBUTO DEL PUNTO DARRIVO. ESEMPIO E POSSIBILE FARE UN COLLEGAMENTO A PARTIRE DA UNIMMAGINE. ESEMPIO

51

52 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 E = INSIEME DEI FRAME = RIQUADRO

53 GLI ATTRIBUTI PER IL TAG 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 ESEMPIO DUE FRAME VERTICALI UGUALI. ESEMPIO

54 DUE FRAME ORIZZONTALI UGUALI: ESEMPIO DUE FRAME ORIZZONTALI IL PRIMO PARI AL 16% DELLALTEZZA TOTALE ESEMPIO

55 FRAMESET ANNIDATI E POSSIBILE DEFINIRE NELLA STESSA PAGINA SEGMENTAZIONI SIA IN SENSO VERTICALE SI ORIZZONTALE; CIO SI OTTIENE SFRUTTANDO LA POSSIBILITA DI DEFINIRE FRAMESET ALLINTERNO 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 SINTESI O MENU INTESTAZIONE CORPO PIE DI PAGINA

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

57 GLI ATTRIBUTI DI FRAME: I BORDI FRAMEBORDER =0 SENZA BORDO =1 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.

58 SCROLLING =YES PRESENZA DELLA BARRA =NO ASSENZA DELLA BARRA =AUTO SCELTA AUTOMATICA LINK E FRAME LULTIMO 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 LATTRIBUTO TARGET DEL TAG

59 NEL COLLEGAMENTO IPERTESTUALE SI PUO USARE LATTRIBUTO TARGET PER SPECIFICARE IL NOME DEL FRAME IN CUI VISUALIZZARE LA PAGINA IL CUI URL ( IL NOME EASSEGNATO AL FRAME CON LATTRIBUTO DEL TAG FRAME). LATTRIBUTO TARGET PUO ESSERE IMPOSTO CON DIVERSI VALORI SPECIFICATI. ESEMPIO


Scaricare ppt "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."

Presentazioni simili


Annunci Google