La presentazione è in caricamento. Aspetta per favore

La presentazione è in caricamento. Aspetta per favore

CORSO Di WEB DESIGN prof. Leonardo Moriello Lezione 3: i frame.

Presentazioni simili


Presentazione sul tema: "CORSO Di WEB DESIGN prof. Leonardo Moriello Lezione 3: i frame."— Transcript della presentazione:

1 CORSO Di WEB DESIGN prof. Leonardo Moriello Lezione 3: i frame

2 Anatomia di una pagina Web Il codice HTML si caratterizza sempre per la presenza al suo interno di tre TAG fondamentali: La struttura di base di ogni documento HTML è quindi articolata in questo modo:

3 Progettare una pagina web con notebook Benvenuti nel mio sito entra nel mio sito

4 Il browser sa che deve leggere tutto ciò che è contenuto entro i TAG... come codice HTML ed è in grado di riconoscere il punto di inizio e quello di chiusura rispettivamente della testa e del corpo del documento. Un documento HTML si divide in due parti fondamentali: l'intestazione e il corpo del documento.

5 = intestazione = intestazione Gli elementi e sono posti immediatamente dopo l'apertura del TAG e racchiudono l'intestazione vera e propria del documento. In questa parte del codice si deve mettere tutte le informazioni necessarie al browser per una corretta interpretazione del documento, l'utente non le visualizzerà sullo schermo. Tali informazioni verranno visualizzate solo aprendo la finestra del browser che fa visualizzare il codice sorgente.

6 L'intestazione fornisce: il titolo della pagina e le parole chiave per i motori di ricerca. Le parole chiave altro non sono che delle informazioni che vengono passate al browser tramite dei TAG specifici, e che servono ai motori di ricerca per comprendere il contenuto del sito. titolo del documento titolo del documento

7 La sezione è il corpo principale del documento HTML dove vanno inseriti tutti i contenuti che devono apparire nella pagina web. Vedremo adesso alcune caratteristiche generali del corpo del documento, come lo sfondo della pagina, il colore del testo ed il colore dei collegamenti ipertestuali, che possono essere specificate mediante attributi da aggiungere al tag. Per impostare un colore come sfondo della pagina web si usa l'attributo BGCOLOR. Il tag BODY

8 Se vogliamo realizzare una pagina con lo sfondo nero scriveremo allora: dove il codice del colore è in formato esadecimale. Si può indicare il colore mediante il nome in inglese anziché il formato esadecimale:

9 possibile impostare come sfondo della pagina web un'immagine in formato GIF o JPEG utilizzando l'attributo BACKGROUND secondo la sintassi:

10 Paragrafi (Tag BR, P, DIV) Il tag equivale ad un'interruzione di riga che non spezza il paragrafo. Infatti, il testo che segue va a capo mantenendo tutte le caratteristiche del testo precedente e senza che si crei spazio vuoto tra le righe. Il tag non richiede un corrispondente tag di chiusura, basta inserirlo nel punto in cui si vuole che la frase vada a capo. Il tag equivale ad un'interruzione di riga che non spezza il paragrafo. Infatti, il testo che segue va a capo mantenendo tutte le caratteristiche del testo precedente e senza che si crei spazio vuoto tra le righe. Il tag non richiede un corrispondente tag di chiusura, basta inserirlo nel punto in cui si vuole che la frase vada a capo. Il tag crea invece un'interruzione di paragrafo; il testo successivo va a capo, lasciando una riga di spazio vuoto, e può essere formattato in maniera diversa rispetto al testo precedente. Il tag può essere usato singolo oppure con la rispettiva chiusura. Il tag crea invece un'interruzione di paragrafo; il testo successivo va a capo, lasciando una riga di spazio vuoto, e può essere formattato in maniera diversa rispetto al testo precedente. Il tag può essere usato singolo oppure con la rispettiva chiusura.

11 Formattazione I principali tag di formattazione sono:... : testo in grassetto;... : testo in corsivo;... : testo sottolineato;... : testo barrato o depennato;... : testo apice;... : testo pedice.... : testo in grassetto;... : testo in corsivo;... : testo sottolineato;... : testo barrato o depennato;... : testo apice;... : testo pedice. Usare il tag... è sconsigliabile perché un testo sottolineato può creare confusione con i collegamenti ipertestuali che solitamente appaiono sottolineati.

12 Titoli Il tag per definire un titolo è... dove n è un valore che va da 1 a 6. Ciò significa che si possono avere sei livelli di titolazione, da (livello superiore) a (livello inferiore). È importante inserire dei titoli nei testi delle pagine web perché questo incrementa notevolmente la leggibilità e perché i motori di ricerca, quando catalogano i siti web, spesso si basano anche sui titoli presenti nella pagina per classificarne gli argomenti.

13 Immagini: Il tag IMG Per inserire un'immagine in una pagina HTML basta inserire il tag: ; questo tag non ha bisogno di chiusura. Affinché l'immagine venga visualizzata nella pagina web bisogna specificarne il nome, l'estensione e l'eventuale percorso. Usando il tag in questo modo l'immagine appare allineata alla base della riga di testo corrispondente, senza spazi aggiuntivi e mantiene le sue dimensioni assolute.

14 Il tag Il tag Per inserire un documento in una pagina HTML basta inserire il tag: Per inserire un documento in una pagina HTML basta inserire il tag: Quindi per creare un link dalla nostra home page.html ad un altra pagina occorre usare questo tag

15 Tabelle( ) Il tag per creare una tabella è con il rispettivo. Ogni riga si definisce con la coppia di tag.... All'interno di ogni riga si creano le celle desiderate; ogni cella si definisce con la coppia di tag.….. Tabelle( ) Il tag per creare una tabella è con il rispettivo. Ogni riga si definisce con la coppia di tag.... All'interno di ogni riga si creano le celle desiderate; ogni cella si definisce con la coppia di tag.…..

16 tabella menù pagina 1 pagina 2 pagina 3 PAGINA 1PAGINA 2 PAGINA 3

17 Curriculum-vitae La mia prima pagina web Curriculum-vitae cognome e nome: professione: esperienze lavorative: contatti Pagina web-Curriculum vitae

18 I Frame I Frames permettono di suddividere la finestra del browser in sezioni separate, ciascuna delle quali può essere aggiornata o contenere dati in modo completamente autonomo rispetto alle altre. Regole fondamentali: 1. ogni frame è una pagina HTML indipendente. 2.. I frame si agganciano ad una pagina principale detta 2.. I frame si agganciano ad una pagina principale detta frameset

19 Il framset altro non è che una pagina HTML che definisce la struttura e le proprietà della pagina Web, comprese le informazioni sul numero di frame visualizzati su una pagina, la dimensione dei frame, l'origine della pagina caricata in un frame e altre proprietà definibili.

20 Struttura del FRAMSET

21 Frameset –Home page Frame BODY Frame BANNER Frame Menu

22 BODY(CONTENUTO)MENU BANNER COLORI RGB

23 Supponiamo di voler costruire una pagina web che contiene tre frame. Di quante pagine HTML hai bisogno? La risposta è semplice: le pagine che ti occorrono sono quattro: il file frameset e i tre file con il contenuto che viene visualizzato all'interno dei frame. Quando si progetta una pagina mediante i set di frame, si deve salvare ciascuno di questi quattro file per garantire che la pagina funzioni correttamente nel browser.

24 Creare un pagina web - creare un documento HTML con il frameset -creare i normali documenti HTML che dovranno essere contenuti in ognuno di questi frame. -Quando una pagina frameset viene scaricata, il browser automaticamente scarica ognuna delle pagine associate -Un frameset è in poche parole un documento HTML che dice al browser come dividere lo schermo in finestre separate.

25 I tag del frameset ….... …… (Colonne) …… (Righe) L'elemento è l'elemento principale, possiede due attributi: rows e cols.

26 Pagina framset La Mia Pagina Frame

27 Pagina frame -barra di navigazione barra di navigazione chi sono portfolio contatti CHI SONO PORTFOLIO CONTATTI

28 Pagina frame -Banner Curriculum vitae La mia prima pagina Web

29 Pagina frame -Presentazione Presentazione Benvenuto nel mio sito Presentazione cognome e nome: professione: esperienze lavorative:


Scaricare ppt "CORSO Di WEB DESIGN prof. Leonardo Moriello Lezione 3: i frame."

Presentazioni simili


Annunci Google