La presentazione è in caricamento. Aspetta per favore

La presentazione è in caricamento. Aspetta per favore

1/69 IL LINGUAGGIO HTML 2/69 Definizioni SITO WEB SITO WEB: Insieme di informazioni (testuali, grafiche o sonore) consultabili telematicamente, che lautore.

Presentazioni simili


Presentazione sul tema: "1/69 IL LINGUAGGIO HTML 2/69 Definizioni SITO WEB SITO WEB: Insieme di informazioni (testuali, grafiche o sonore) consultabili telematicamente, che lautore."— Transcript della presentazione:

1

2 1/69 IL LINGUAGGIO HTML

3 2/69 Definizioni SITO WEB SITO WEB: Insieme di informazioni (testuali, grafiche o sonore) consultabili telematicamente, che lautore organizza, struttura e rende visibilmente attraenti allo scopo di offrire ad una grande quantità di persone una forma di comunicazione. PROGETTARE UN SITO PROGETTARE UN SITO: Raccogliere il materiale, individuare i contenuti da presentare, organizzare i dati definendone la struttura delle relazioni, definire il tipo di architettura ed individuare la tipologia di utenza. BUON SITO BUON SITO: Se è USABILE (soddisfa i bisogni dellutente – è facile laccesso e la navigazione), se riesce a COMUNICARE EFFICACEMENTE, se le INFORMAZIONI sono COMPRENSIBILI e i CONTENUTI risultano COMPLETI. IPERTESTO link IPERTESTO: Testo costituito da segmenti autonomi di informazioni legati tra loro dalink, ossia Nodi Associativi che permettono al lettore di navigare liberamente da una pagina allaltra. ARCHITETTURA ARCHITETTURA: Il modo in cui un sito organizza le proprie pagine.

4 3/69 MODELLO CLIENT-SERVER MODELLO CLIENT-SERVER: un Server è un software che risiede su di un computer collegato in rete e che eroga un particolare servizio. Gli utenti per usufruire dei servizi offerti da un Server devono utilizzare un particolare software, il Client (i Client WWW sono detti browser), che è in grado di inoltrare le richieste al Server BROWSER: programma usato per la navigazione sul Web e che svolge principalmente due compiti: - scaricare i vari files che si trovano su un computer remoto (il server) e che fanno riferimento a un certo indirizzo - leggere i documenti scritti in html, e a seconda delle indicazioni ivi contenute, visualizzare la pagina in un modo, piuttosto che in un altro URL URL: Uniform Resource Locator - si intende un luogo (o indirizzo Internet) in cui si trova una determinata risorsa che si vuole utilizzare. Formato: protocollo://nome del dominio/cammino/nome del file Definizioni

5 4/69 PROTOCOLLO PROTOCOLLO: indica il tipo di risorse a cui si sta accedendo (ftp, http..) Es. protocollo ftp (ftp://ftp.sci.univr.it/index.html) permette di copiare il file index.html dal dominio specificato al computer locale. Es. protocollo http (http://www.scienze.univr.it/index.html ) permette di ricercare e visualizzare in locale il documento index.html dall'indirizzo specificato. DOMINIO DOMINIO: specifica la posizione fisica dove si trova la risorsa che si vuole recuperare. Si può rappresentare o con indirizzo IP (Internet Protocol) o utilizzando un nome che corrisponde all'indirizzo IP. HTML HTML: HyperText Markup Language - Linguaggio per pubblicare informazioni sul WWW Definizioni

6 5/69 Html: Html: (Hyper text markup language) Linguaggio di impaginazione per la creazione di documenti ipertestuali contenenti testo, immagini, suoni ed altri oggetti multimediali. I documenti creati con questa sintassi hanno estensione.html o.htm ASP: ASP: (Active Server Pages) Tecnologia sviluppata da Microsoft per la creazione di pagine web dinamiche e l'integrazione di database relazionali. Le pagine create con le Active server pages hanno estensione.asp Php: Php: (Hypertext preprocessor). Utilizzato per rendere le pagine Web più dinamiche ed interagire con i database My Sql. I documenti diffusi con questa tecnologia dovranno avere estensione.php Linguaggi di programmazione per la creazione di siti web

7 6/69 Linguaggio HTML HTML: Linguaggio di programmazione per la creazione di pagine Web HTML (acronimo di Hypertext Markup Language - Linguaggio di contrassegno per gli Ipertesti): - non è un linguaggio di programmazione (sono linguaggi di programmazione il C, il C++, il Pascal, il Java, e sono linguaggi di scripting il PHP, l'ASP, il PERL, il JavaScript). - è un linguaggio di contrassegno (o 'di marcatura'), che permette di indicare come disporre gli elementi all'interno di una pagina: le indicazioni vengono date attraverso degli appositi marcatori, detti "tag". - non ha meccanismi che consentono di prendere delle decisioni e non è in grado di compiere delle iterazioni, né ha altri costrutti propri della programmazione. - pur essendo dotato di una sua sintassi, non presuppone la logica ferrea e inappuntabile dei linguaggi di programmazione.

8 7/69 Linguaggio HTML Per creare pagine web occorre avere a disposizione: - uno o più browser per visualizzare le pagine - un editor testuale per scrivere il codice HTML (Es. Blocco Note di Windows) Estensione del file: il file potrà avere estensione html o htm. Un documento scritto in html è costituito da 2 elementi: TESTO 1. il TESTO (che si vuole pubblicare) COMANDI 2. una serie di COMANDI (tag) per la formattazione del testo, linserimento di link ipertestuali e di grafica

9 8/69 I TAG: -Possiedono nomi diversi a seconda della loro funzione - Possono assumere diverse forme: Tag Semplici o vuoti Tag Semplici o vuoti: servono a formattare le pagine xxxxx Tag ad apertura/chiusuracontenitori Tag ad apertura/chiusura detti contenitori: utilizzati per manipolare i dati posti al loro interno. Linguaggio HTML – I TAG

10 9/69 I TAG TAG VUOTO TAG VUOTO : Es: inserisce una linea orizzontale nel punto in cui viene inserito; l'attributo height="5px" determina lo spessore della linea, "5px indica 5 pixel (1 pixel=dimensione di un punto dello schermo). TAG CONTENITORI TAG CONTENITORI costituiti da: tag iniziale (che ha lo stesso formato di un tag vuoto), un testo (su cui agisce il tag) tag finale (che segna la fine dell'effetto dei tag).

11 10/69 Esempi di TAG indica linizio del documento Html; non obbligatorio ma consigliato Il Mio Documento Il Mio Documento Definisce il titolo (Il Mio Documento) del documento che stiamo per creare. Definisce linizio del corpo vero e proprio del documento. Verrà chiuso da un tag testo testo Definisce un livello di intestazione. Esistono 6 livelli di intestazione diversi, da H1 ad H6, associati a fonti di larghezza decrescente (H1 = fonte più larga, H6=fonte più piccola) testo testo Definisce lapertura e la chiusura di un paragrafo. Il tag di chiusura può essere omesso.
causa un ritorno a capo (Break). testo Il testo compreso tra questi tag verrà visualizzato in corsivo (Italic)

12 11/69 testo Il testo compreso tra questi tags verrà visualizzato in grassetto (Bold) click here Definisce un link ipertestuale ad un documento esterno, ad esempio: click here (facendo click su click here il browser punterà al documento documento.html) Inserisce nel testo limmagine contenuta nel file immagine.gif &(vocale)acute; &(vocale)grave; &(vocale)acute; una vocale con laccento grave, ad es.: è: è ì: ì una vocale con laccento acuto; ad es.: ú: ú è: é Definisce la chiusura del corpo del messaggio Definisce la chiusura del documento Esempi di TAG

13 12/69 HTML: struttura del documento xxxxxxxxxxxxx bla bla bla bla bla Un documento HTML è normalmente diviso in due sezioni:

14 13/69 - contiene informazioni non immediatamente percepibili, ma che riguardano il modo in cui il documento deve essere letto e interpretato. Due tag presenti in questa sezione: indica al browser che deve caricare il set di caratteri occidentale (e non - ad esempio - il set di caratteri giapponese). Nome del sito Il title è il titolo della pagina e compare in alto sulla barra del browser. Corso su HTML Qui il nostro contenuto HTML: struttura del documento

15 14/69 La mia prima pagina web La mia prima pagina web La mia prima pagina web HTML: struttura del documento I tag contenuti all'interno del tag 'head' servono per definire le proprietà del documento.

16 15/69 I TAG - commenti Utilizzati per rendere il codice più leggibile, possono essere inseriti nei punti più significativi: Si tratta di indicazioni significative per il webmaster, ma invisibili al browser. Consentono di mantenere lorientamento anche in file molto complessi e lunghi. La sintassi è la seguente: e ci permette di "commentare" i vari punti della pagina. Ad esempio:

17 16/69 Esempio Il mio documento Il mio documento di prova Cosí questo è il mio primo testo di prova. Premendo in questo punto potete visitare l'Università di Lecce. Questo testo viene visualizzato in neretto mentre il testo che segue viene visualizzato in corsivo. In questo punto viene visualizzato un disegno. Di tutto il codice scritto i browser visualizzeranno solo ciò che è presente nel corpo (body) del listato; quindi fra gli elementi e,

18 17/69 I TAG - Allineamento e indentazione I tag possono essere annidati l'uno dentro l'altro. Anzi molto spesso è necessario farlo. Esempio: contenuto 1 contenuto 2 Potremmo quindi avere: testo 1 testo 2

19 18/69 I TAG - Allineamento e indentazione E una buona norma utilizzare dei caratteri di tabulazione per far rientrare il testo ogni volta che ci troviamo in presenza di un annidamento e man mano che entriamo più in profondità nel documento. Questa procedura si chiama indentazione, e grazie ad essa il codice HTML risulta più leggibile. Si confronti ad esempio: testo 1 testo 2 con: testo 1 testo 2

20 19/69 Allineamento del testo L'attributo 'align', consente lallineamento del testo a sinistra, a destra o al centro della pagina AllineamentoSintassi Testo allineato a sinistra testo Testo allineato a destra testo Testo giustificato testo

21 20/69 Le liste Esistono tre tipi di liste: Elenchi ordinati Elenchi non ordinati Elenchi di definizioni In tutti e tre i casi la sintassi ha questa forma: nome del primo elemento nome del secondo elemento

22 21/69 Gli elenchi ordinati Esempio: Elenco elementi primo elemento secondo elemento terzo elemento testo che segue la lista Le liste ordinate richiedono due tag HTML: - contenitore che delimita la lista - contenitore che introduce ogni elemento della lista. Molti browser numerano automaticamente gli elementi della lista; per default, i numeri sono quelli arabi e la numerazione inizia da 1.

23 22/69 Lo stile di enumerazione visualizzata di default dal browser è quello numerico, ma è possibile indicare uno stile differente specificandolo per mezzo dellattributo type. Esempio: primo elemento secondo elemento terzo elemento Gli elenchi ordinati

24 23/69 Gli elenchi ordinati: stili consentiti Valore dellattributo typeStile di numerazione type=1 (default) Numeri arabi primo secondo terzo type=aAlfabeto minuscolo primo secondo terzo type=AAlfabeto maiuscolo primo secondo terzo

25 24/69 Valore dellattributo typeStile di numerazione type=iNumeri romani minuscoli primo secondo terzo type=INumeri romani maiuscoli primo secondo terzo Gli elenchi ordinati: stili consentiti

26 25/69 Liste L'attributo start consente di indicare l'inizio della numerazione quando questo è diverso da uno. Esempio: Primo elemento della lista Secondo elemento della lista 10. Primo elemento della lista 11. Secondo elemento della lista

27 26/69 Gli elenchi non ordinati Esempio: primo elemento secondo elemento terzo elemento : unordered list è il tag da usare per aprire un elenco ordinato : list item individua gli elementi

28 27/69 Gli elenchi non ordinati Il tipo di segno grafico utilizzato per individuare gli elementi dellelenco di default dipende dal browser. E possibile scegliere un altro tipo di segno: Valore dellattributo typeStile di numerazione type=disc (default) Visualizza un punto pieno primo secondo terzo type=circleVisualizza un cerchio vuoto primo secondo terzo type=squareVisualizza un quadrato pieno primo secondo terzo

29 28/69 Esempio: Ecco i principali tag per delimitare il testo: Il tag p individua l'apertura di un nuovo paragrafo Il tag div individua l'apertura di un nuovo blocco di testo Il tag span individua l'apertura di un elemento inline, cui attribuire una formattazione atraverso gli stili ci sono poi altri tag che... Gli elenchi di definizioni : individua gli elenchi di definizioni : definition term indica il termine da definire : definition description è la definizione vera e propria del termine

30 29/69 Primo elemento della lista esterna Secondo elemento della lista esterna Terzo elemento con lista Primo elemento della lista interna Secondo elemento della lista interna Liste annidate Primo elemento della lista esterna Secondo elemento della lista esterna Terzo elemento con lista 1. Primo elemento della lista interna 2. Secondo elemento della lista interna

31 30/69 bgcolor Attributo bgcolor Per definire il colore di sfondo di una pagina Web è sufficiente quindi impostare: oppure ff0000 codice esadecimale del colore azzurro. Il simbolo # fa parte del codice del colore ed indica al browser che il valore che segue è un numero esadecimale che rappresenta il colore. background Attributo background Consente di inserire un'immagine nello sfondo di una pagina Web. I browser visualizzano l'immagine a partire dall'angolo superiore sinistro della finestra e la ripetono fino a riempire tutto lo sfondo della pagina (effetto mattonella o tiling). E anche possibile combinare i due attributi in modo che, mentre limmagine di sfondo viene caricata, venga comunque visualizzata una colorazione della pagina:

32 31/69 Black (nero) = "#000000" Green (verde) = "#008000" Silver (argento) = "#C0C0C0" Lime (verde limone/tiglio) = "#00FF00" Gray (grigio) = "#808080" Olive (verde oliva) = "#808000" White (bianco) = "#FFFFFF" Yellow (giallo) = "#FFFF00" Maroon (marron) = "#800000" Navy (blu marino) = "#000080" Red (rosso) = "#FF0000" Blue (blu) = "#0000FF" Purple (viola) = "#800080" Teal = "#008080" Fuchsia (fucsia) = "#FF00FF" Aqua (acqua marina) = "#00FFFF" Codici esadecimali dei colori

33 32/69 Tag di formattazione All'interno del tag 'body' è possibile individuare blocchi di testo per i quali si vuole imporre una formattazione particolare per poter evidenziare una parte del testo che si ritiene importante. : Indica al browser di eseguire un a capo. Viene utilizzato per formattare i testi o per inserire delle righe vuote in un documento. : Visualizza una linea orizzontale (filetto). Possiede alcuni attributi di personalizzazione: ' align : determina la posizione orizzontale (allineamento) della linea all'interno della pagina. ' size : determina lo spessore della linea. ' width : determina la lunghezza della linea (espresso sia in numero di pixel sia come % della larghezza dello schermo) Espressione : specifica che Espressione dovrà essere in grassetto Espressione : specifica che Espressione dovrà essere in corsivo Espressione : specifica che Espressione dovrà essere sottolienato Espressione : specifica che Espressione dovrà essere sbarrato

34 33/69 Modifica del font Esempio: CIAO Tag per la definizione del font Specifica il colore Specifica la dimensione del carattere Specifica il tipo di carattere

35 34/69 Titoli, paragrafi, blocchi di testo e contenitori Nome tag Descrizione

H sta per heading, ossia titolo. E formattato in grassetto e lascia una riga vuota prima e dopo di sé.

Il paragrafo è lunità di base entro cui suddividere un testo. Il tag lascia una riga vuota prima della sua apertura e dopo la sua chiusura.
Il blocco di testo va a capo, ma - a differenza del paragrafo – non lascia spazi prima e dopo la sua apertura. Lo span è un contenitore generico che può essere annidato (ad es.) allinterno dei DIV. Si tratta di un elemento inline, che cioè non va a capo e continua sulla stessa linea del tag che lo include.

36 35/69 Link Costituiscono il ponte che consente di passare da un testo allaltro. Sono formati da due elelmenti: il contenuto che nasconde il collegamento la risorsa verso cui il collegamento punta I link possono avere lo scopo di: Raggiungere un'altra parte del documento. Aprire un altro documento nello stesso sito Web. Aprire un documento che si trova in qualche altro sito del WWW

37 36/69 Link Uno schema di link (storyboard) è un diagramma che illustra come sono collegate due o più pagine Web.

38 37/69 I link interni o ancore Per creare un indice interno alla pagina si procede in due fasi distinte: creazione dellancora a cui puntare ( ) creazione del collegamento allancora appena creata e riferimento attraverso il cancelletto ( ) Ciascuna ancora può avere un nome: Es: Stiamo per esaminare la struttura…. Eccetera… In un ipotetico indice è allora possibile far riferimento allancora presente allinterno del documento attraverso un link che punti ad essa: Es: vai al primo paragrafo

39 38/69 Link a documenti esterni 'href' Per creare un riferimento ipertestuale si usa l'attributo 'href' che specifica il percorso delle directory ed il nome del file da raggiungere Indice l'indirizzo URL è locale o relativo Home page di Pippo lindirizzo URL è assoluto Invia i tuoi commenti a il browser attiverà un programma di posta elettronica (quale particolare programma dipende dalla configurazione del browser) per proporre una finestra per inviare un messaggio di posta elettronica con l'indirizzo già scritto e pari a quello specificato nell'attributo 'href' dopo la stringa 'mailto:'. Link: indirizzi

40 39/69 Link: attributi Target: consente di specificare in quale finestra la pagina linkata deve essere aperta: di default infatti la pagina viene aperta allinterno del documento stesso, ma è possibile specificare che la pagina sia aperta in una nuova finestra: Es. visita GOOGLE Title: serve per specificare un testo esplicativo per lelemento a cui lattributo è riferito (il title si può infatti utilizzare anche per elementi differenti dalle ancore). Es. Visita GOOGLE Hreflang: indica la lingua del documento Es. Nel sito del Word Wide Web Consortium puoi trovare le specifiche dellHTML in lingua inglese

41 40/69 Link: attributi Modificare il colore E possibile colorare i link allinterno della pagina annidando il tag allinterno del link: Es. Torna alla home page di Il tag BASE I percorsi relativi fanno di norma riferimento alla directory in cui si trova il file HTML che stiamo scrivendo. Se tuttavia vogliamo far riferimento a un differente percorso per tutti i percorsi relativi, possiamo farlo specificandolo grazie al tag base, che va incluso nella head del documento. Ad esempio con: E poi nel documento si scriverà: collegamento al mio file che farà riferimento a:

42 41/69 Link: possibili stati Per modificare il colore del link Per modificare il colore ai link visitati Per modificare il colore dei link attivi La sintassi completa per impostare i link è, quindi: Collegamento normale: link Collegamento visitato: visited Collegamento attivo: active

43 42/69 Le immagini Il formato grafico da utilizzare per inserimento di immagini è: GIF e JPG Sarebbe opportuno inserire tutte le immagini utilizzate in ununica cartella IMMAGINI

44 43/69 Le immagini Ecco come appariranno i tags allinterno del documento ELENCO.HTML (contenuto nella cartella "immagini"): Esempi:

45 44/69 Le immagini: attributi align Influenza la disposizione dell'immagine rispetto al testo che la precede e la segue. Può assumere uno dei seguenti valori: left, right, top, bottom, middle alt Inserisce una descrizione dell'immagine. Tale descrizione viene visualizzata dai browser mentre l'immagine viene prelevata; si sostituisce alle immagini se il browser ne ha disabilitato il prelievo automatico e, infine, appare sullo schermo ogni qualvolta il puntatore del mouse si porta sull'immagine. Esempio: border Quando unimmagine è associata a un altro documento appare circondata da una cornice. L'attributo 'border' ne determina lo spessore in pixel. È possibile fare in modo che tale cornice non venga visualizzata: basta assegnare il valore zero all'attributo 'border. Esempio

46 45/69 Tabelle Esempio: prima cella seconda cella terza cella quarta cella I tag per creare una tabella sono i seguenti: apre la tabella table row: indica lapertura di una riga table data: indica una cella allinterno di una riga

47 46/69 Tabelle: attributi border permette di specificare di quanti pixel deve essere il bordo delle tabelle. width definisce la larghezza della tabella relativamente allo schermo, espressa con i valori percentuali, oppure in assoluto, in pixel. Esempio: oppure bgcolor determina il colore di sfondo della tabella. Esempio: oppure )

48 47/69 Tabelle E possibile specificare larghezza ed altezza delle tabelle mediante gli attributi width ed height che possono essere riferiti a tutti e tre i tag (,, ). Esempio: prima cella seconda cella terza cella quarta cella

49 48/69 Tabelle Esempio: prima cella seconda cella terza cella quarta cella

50 49/69 Tabelle: tag opzionali è lintestazione, il titolo con un commento esplicativo sulla tabella è la testa, la parte iniziale della tabella in cui sono contenute le indicazioni sul contenuto delle celle è il piede, la conclusione della tabella, quella che consente ad esempio di tirare le somme è il corpo, la parte centrale con il contenuto vero e proprio della tabella,, sono tag che consentono di individuare gruppi di righe

51 50/69 Tabelle Esempio Esempio di tabella n. Prodotti 1 Caffè 2 Tè Esempio di tabella n.Prodotti 1Caffè 2Tè

52 51/69 Tabelle: raggruppamento celle : Consente di raggruppare le celle allinterno delle colonne Esempio:

53 52/69 : Consente di raggruppare le celle allinterno delle righe Esempio: Tabelle: raggruppamento celle

54 53/69 E possibile annidare le tabelle le une dentro le altre. Esempio: Tabelle: annidamento

55 54/69 I Suoni Kde start (file WAV 278 kb) I più comuni file audio utilizzabili in rete sono quelli WAVE breve filmato (formato avi 81 KB) I Video Digitali Impostare la lingua del documento Questo attributo non carica automaticamente il set di caratteri necessari alla visualizzazione della lingua, ma si limita a specificare che il documento (o parte del documento) è nella lingua indicata.

56 55/69 Testo scorrevole ……. Questo tag consente di rendere scorrevoli sia le scritte che le immagini Esempio CIAO Esempio Attributi Loop=n numero di iterazioni (-1 scorrimento continuo) Behavior= funzionamento scroll slide alternate (il testo rimbalza da una parte allaltra dello schermo) Direction= verso di scorrimento left right Up down

57 56/69 I Frame Il tag frame permette di suddividere una finestra di un browser in sotto finestre ciascuna delle quali può visualizzare un documento HTML indipendente dagli altri. Esempio di frame L'attributo scr serve per poter indicare quali file html devono essere caricati nei vari frame.

58 57/69 I Frame Sebbene i documenti che riempiono i frame siano normali documenti HTML, il documento che contiene i frame non ha il tag all'interno del codice HTML. Il tag sostituisce il tag nel documento con i frame. Esempio di frame annidati Il tag ha sostanzialmente due importanti attributi: -Rows, permette di specificare il numero e la grandezza delle righe, nel caso in cui venga omesso, significa che ci troviamo di fronte a una struttura a colonne. -Cols, permette di specificare il numero e la grandezza delle colonne e, nel caso in cui venga omesso significa che ci troviamo di fronte una struttura a righe

59 58/69 I Frame: sistemi di misura della grandezza dei riquadri dimensione fissaQuesta sintassi crea un frameset di 2 righe con 3 colonne ciascuna, per un totale di 6 riquadri: Laltezza della 1a riga è di 150 pixel, mentre la seconda si adatta al resto della pagina. Le tre colonne sono larghe rispettivamente: 100 pixel, 200 pixel, e la terza colonna si adatta al resto della pagina percentuale Questa sintassi crea un frameset che si adatta alla risoluzione. La grandezza dei riquadri è espressa in percentuale: proporzionaleIn questo caso la ripartizione è proporzionale: per quel che riguarda le righe: laltezza viene suddivisa in 4 parti (1+3); la prima riga ne occupa 1 parte e la seconda riga ne occupa 3 per quel che riguarda le colonne: laltezza viene suddivisa in 6 parti (3+2+1); la prima colonna occupa 3 parti, la seconda riga ne occupa 2 e la terza 1

60 59/69 Frameset: attributi Lattributo frameborder (di default impostato a yes) permette di specificare se nel frameset devono essere presenti i bordi. framespacing funziona solo con Internet Explorer e permette di impostare lo spazio tra un frame e laltro. Di fatto equivale allattributo border, che permette di specificare lo spessore dei bordi in pixel. Per mantenere la compatibilità con Internet Explorer 4 (che non legge lattributo border), di solito si specificano sia il framespacing, sia il border. bordercolor permette di specificare il colore dei bordi del frameset.

61 60/69 Frame: attributi Lattributo scrolling (di default impostato a yes) specifica se si vuol consentire o meno allutente di poter scorrere il frame. Nel caso sia impostato a no, il frame non ha la barra di scorrimento anche nel caso in cui il contenuto della pagina HTML vado oltre la cornice. scrolling può anche essere impostato ad auto.In questo caso la barra di scorrimento compare in automatico, ma solo se necessario. noresize impedisce al singolo frame di essere ridimensionato. Se usato insieme a scrolling=no, di fatto blocca il contenuto del frame. Un uso maldestro di questa tecnica potrebbe però impedire all'utente la corretta visualizzazione dei contenuti.

62 61/69 Frame: attributi frameborder consente di far apparire o meno i bordi del frame (i valori ammessi sono "0" e "1", ovvero "no" e "yes"). Questo attributo permette di specificare un valore differente da quello impostato nel frameborder del marginheight e marginwidth permettono di impostare la distanza verticale (marginheigth) e orizzontale (marginwidth) tra i bordi del frame e il suo contenuto.

63 62/69 Frameset: il target dei link Lattributo target consente di specificare qual è la destinazione del link; con questa sintassi siamo dunque in grado di caricare il contenuto di un collegamento nel riquadro che riteniamo più opportuno: Esistono, poi, delle parole chiave che consentono di ricaricare i link in destinazioni predefinite: target=_blank Apre il link in una nuova finestra, senza nome target=_self Apre il link nel frame stesso (è così di default) target=_parent Il documento viene caricato nel frameset precedente a quello corrente (più esattamente nel frame genitore). Il comportamento di _parent è particolarmente evidente in una struttura annidata in cui alcune pagine HTML contengono a loro volta dei frameset: in questo caso viene caricato il contenuto del link nel frameset immediatamente precedente alla pagina del link. target=_top Il documento viene caricato nella finestra originale, cancellando ogni struttura a frame. Più esattamente il documento viene carictao nella parte più alta ("top") della struttura, ed è questo il motivo per cui il frameset stesso viene annullato e sostituito dal contenuto del link.

64 63/69 HTML: separare il layout dal contenuto Problema: Se avessimo tutti i titoli del nostro documento in rosso e in grassetto e decidessimo di trasformarli in verde e in corsivo, con lHTML classico (cioè lHTML 3.2) dovremmo modificare a mano ogni tag contente le indicazioni della formattazione. Fogli di stile: consentono di separare il contenuto dalla formattazione titolo 1 titolo 1

65 64/69 HTML: MAIUSCOLO O MINUSCOLO? LHTML è case unsensitive, cioè indipendente dal formato. Questo significa che è del tutto indifferente se scrivere i tag in maiuscolo o in minuscolo. e vengono letti allo stesso modo dal browser. - Per aumentare la leggibilità del codice è consigliabile scrivere in maiuscolo il nome del tag (es: ) e in minuscolo gli attributi (es: align=right). Quindi:

66 65/69 HomePage.htm Biografia.htm Esercitazione: riprodurre le seguenti due pagine

67 66/69 Index.htm Benvenuti nella mia pagina personale Benvenuti nella mia pagina personale! Esplorando questo sito potrete consultare la mia biografia

68 67/69 La mia biografia La mia biografia Data di nascita 03/09/1980 Luogo di nascita Lecce Studi effettuati Laurea in Biologia Biografia.htm …

69 68/69 Esperienze lavorative Collaborazione presso laboratorio di analisi … Biografia.htm

70 69/69 Riferimenti: IL LINGUAGGIO HTML


Scaricare ppt "1/69 IL LINGUAGGIO HTML 2/69 Definizioni SITO WEB SITO WEB: Insieme di informazioni (testuali, grafiche o sonore) consultabili telematicamente, che lautore."

Presentazioni simili


Annunci Google