laboratorio alfabetizzazione informatica 2: html
TRANSCRIPT
![Page 1: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/1.jpg)
Laboratorio Alfabetizzazione Informatica
2: HTML
![Page 2: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/2.jpg)
Guida
http://www.html.it/guida
![Page 3: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/3.jpg)
HTML
e’ un linguaggio per la costruzione di ipertesti. E’ costituito da un insieme di comandi che permettono di definire la struttura e l’aspetto di un ipertesto, di inserire oggetti (immagini, tabelle, moduli) e di creare link ipertestuali interni al documento oppure ad altri documenti.
![Page 4: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/4.jpg)
HTMLHyperText Markup Language
Linguaggio base per produrre documenti per World Wide Web (WWW o WEB)
Documenti WEBpagine ipermediali/ipertestuali (collegati da link) che contengono:• testo• immagini• suoni• legami ipertestuali a
- altre pagine- programmi- immagini, suoni, ...
Pagine localizzate su server WWW e visualizzate da un client
WWW
![Page 5: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/5.jpg)
HTMLHyperText Markup Language
Normale testo lettura sequenziale
Link permettono, a chi ‘naviga’ l’ipertesto, di accedere alle sue componenti in un ordine non rigido, seguendo un percorso a piacere tra quelli possibili al suo interno.
![Page 6: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/6.jpg)
HTMLHyperText Markup Language
Anche se i documenti che si trovano sul Web hanno una natura ipertestuale, l’uso di questo termine non e’ necessariamente collegato all’accessibilita’ di un documento sul Web. Un ipertesto puo’ infatti essere memorizzato su un supporto (un disco fisso, un floppy) a cui si accede localmente.
![Page 7: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/7.jpg)
HTMLHyperText Markup Language
Un documento HTML e’ costituito da un semplice testo, che in quanto tale puo’ essere visualizzato attraverso qualsiasi editor di testo. Per vedere il documento HTML come ipertesto e’ necessaria invece un’applicazione (browser) che interpreta i comandi contenuti nel testo producendo la visualizzazione definita rispetto a questi comandi.
![Page 8: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/8.jpg)
HTMLHyperText Markup Language
L'HTML è il linguaggio con cui potete indicare come i vari elementi vanno disposti in una pagina Web. Un documento html è un file di testo con indicazioni sul colore, sulla posizione delle immagini, su come formattare il testo ecc.
Il BROWSER è il programma che si usa quando si naviga nel Web (es. Netscape Navigator, Microsoft Internet Explorer, NCSA Mosaic, Sun HotJava, FIREFOX) e serve principalmente a :
![Page 9: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/9.jpg)
HTMLHyperText Markup Language
• scaricare i files che si trovano su un computer remoto (il server) e che fanno riferimento a un certo indirizzo
• legge i documenti scritti in html e visualizza la pagina seguendo le indicazioni scritte nel codice HTML
Alla base di HTML esiste una standardizzazione che garantisce che ad ogni comando (testuale) corrisponda una certa visualizzazione da parte del browser, qualunque esso sia (Netscape o Explorer).
![Page 10: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/10.jpg)
HTMLHyperText Markup Language
Le pagine WWW sono trasferite attraverso la rete Internet usando un protocollo particolare HTTP (HyperText Transfer Protocol) costruito al di sopra di TCP/IP (Transfer Control Protocol / Internet Protocol )
Localizzate mediante un ben preciso sistema di indirizzamento: URL (Uniform Resource Locator)
Ogni indirizzo è formato da:• Protocollo• Indirizzo• Pathname della pagina
![Page 11: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/11.jpg)
HTMLHyperText Markup Language
TCP/IP: TCP (Transmission Control Protocol): si incarica
di suddividere le informazioni in pacchetti e di garantire la trasmissione dei dati.
IP (Internet Protocol): instrada i pacchetti nella rete e sceglie il percorso più breve per arrivare a destinazione. La garanzia sull’effettivo arrivo dei pacchetti è però affidata al TCP.
Ogni macchina dispone di un proprio indirizzo Ip che la identifica in modo univoco sulla rete. L' indirizzo Ip si compone di 4 cifre, separate ciascuna da un punto. Ogni cifra varia da 0 a 255 (es. 158.24.154.35).
![Page 12: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/12.jpg)
HTMLHyperText Markup Language
Internet: rete geografica mondiale che collega le reti di diversi paesi
Milioni di nodi collegati Organizzata a domini:• un dominio per ogni nazione• sottoreti e sottodomini per ogni nazione
![Page 13: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/13.jpg)
HTMLHyperText Markup Language
Ogni sottorete e sottodominio ha un nome
=> indirizzamento gerarchico
ES:
di.unito.it: dominio Dip. di Informatica (di)
nel dominio Univ. di Torino (unito)
nel dominio Italia (it)
![Page 14: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/14.jpg)
HTMLHyperText Markup Language
Funzione di naming realizzata in modo distribuito:
DNS (Domain Name Service)Ogni dominio è responsabile degli indirizzi
fisici dei nodi nel dominio o delle macchine server dei sottodomini
![Page 15: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/15.jpg)
HTMLHyperText Markup Language
ES: devo contattare rigel.doc.ic.ac.uk dalla mia macchina
orion.di.unito.it
La richiesta viene passata da orion verso l'alto• al server di che la riconosce come non locale• al server unito che la riconosce come non locale• al server it che la passa al server uk• uk localizza l'indirizzo di ac e passa la richiesta• ac localizza l'indirizzo di ic e passa la richiesta• ic localizza doc e passa la richiesta• doc restituisce l'indirizzo di rigel che ritorna indietro
![Page 16: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/16.jpg)
HTMLHyperText Markup Language
Internet fornisce vari servizi
• Trasferimento dati: (protocollo FTP) • Posta elettronica: (protocollo MAILTO) • Collegamento Remoto: (protocollo TELNET) • Liste di discussione: News • Basi di dati in rete (ES: Hytelnet Strumento di ricerca che consente di
sfogliare ipertesti che elencano siti, in particolare università e biblioteche, via Telnet Melvyl Catalogo biblioteche Università California)
• Network Information Retrieval (motori di ricerca es. Google o Yahoo)
• Navigazione in rete testuale: Gopher (Metodo per accedere a dati ed informazioni sparse per la rete Internet, presentate all'utente sotto forma di menu. )
• Navigazione in rete ipertestuale: WWW
![Page 17: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/17.jpg)
HTMLCaratteristiche
HTML è un linguaggio di formattazione di documenti Un documento HTML è un file di testo (file ASCII) contenente
dei comandi per• formattazione• inserimento parti multimediali• link ipertestuali I comandi (TAGS) hanno una forma sintattica particolare
<NOME-COMANDO> informazioni
</NOME-COMANDO> I comandi (tags) hanno nomi mnemonici
![Page 18: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/18.jpg)
HTMLCaratteristiche
Vediamo il linguaggio di qualche pagina web– Tasto destro mouse HTML– VISUALIZZAHTML
In questo modo visualizziamo il FILE HTML SORGENTE
![Page 19: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/19.jpg)
HTMLCaratteristiche
Per creare un file HTML e’ possibile usare due strumenti:
Un editor di testo (WordPad,Blocco note);
Un applicazione per la preparazione di documenti HTML (Frontpage, Netscape Composer, Pagemill) del tipo WYSIWYG (“what you see is what you get”);
![Page 20: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/20.jpg)
HTMLCaratteristiche
nel primo caso occorre conoscere HTML e scrivere i comandi tramite l’editor di testo
nel secondo caso la conoscenza di HTML non e’ necessaria, in quanto l’applicazione permette all’utente di comporre il documento a partire dall’aspetto risultante: i comandi vengono aggiunti man mano dall’editor a seconda degli elementi (testo, grafica, ecc) inseriti dall’utente.
![Page 21: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/21.jpg)
HTMLCaratteristiche
Il file HTML creato tramite l’editor deve essere salvato come documento testuale con estensione html; in caso contrario, il documento verrebbe visualizzato come testo e non come documento HTML.
Salvare con estensione .htmlSalva come: Tutti i fileCodifica: Ansi
![Page 22: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/22.jpg)
HTMLCaratteristiche
Mentre si edita un documento HTML attraverso l’editor, e’ possibile contemporaneamente visualizzarlo con il browser (in quanto quest’ultimo si limita a ‘leggere’ il documento). Ogni volta che si fanno delle modifiche al documento, tuttavia, e’ necessario aggiornarne la visualizzazione nel browser tramite il pulsante Aggiorna di Explorer
![Page 23: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/23.jpg)
HTMLCaratteristiche
I comandi HTML sono denominati TAG; devono sempre essere scritti all’interno di parentesi uncinate (<nome del tag>). I tag – tranne alcune eccezioni – devono essere aperti e chiusi, e la loro influenza si esercita sul testo contenuto al loro interno (tra l’apertura e la chiusura del tag, che avviene facendo precedere il comando dal carattere “/”)
Gli spazi bianchi e gli a capo vengono ignorati dai browser
![Page 24: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/24.jpg)
HTMLCaratteristiche
Non e’ permesso inserire alcun elemento di formattazione nel testo HTML (corsivo, grassetto, ecc.), se non tramite i comandi HTML appositi!.
![Page 25: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/25.jpg)
HTMLCaratteristiche
I tag possono contenere dei parametri, associati a un valore.
I parametri (scelti tra un insieme predefinito) sono scritti di seguito al nome del comando, all’interno delle parentesi
Ogni parametro e’ seguito dal segno di uguale e dal valore assegnatogli (tra virgolette).
<FONT COLOR= “red”> testo che comparira’ scritto in rosso
</FONT>
![Page 26: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/26.jpg)
HTMLCaratteristiche
STRUTTURA DEL DOCUMENTO
Un documento HTML e’ interamente contenuto all’interno del tag HTML e si compone di due parti essenziali:
Head (intestazione) Body (corpo del documento)
![Page 27: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/27.jpg)
HTMLLinguaggio
<HTML>
<HEAD>descrizione delle caratteristiche del documento</HEAD>
<BODY>documento vero e proprio</BODY></HTML>
Apriamo Blocco note e proviamo!!!!
![Page 28: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/28.jpg)
HTMLLinguaggio
HEADla parte fondamentale è il titolo del documento che
verrà visualizzato come titolo nella finestra del browser
<HEAD><TITLE>Scienze della Comunicazione </TITLE></HEAD>
![Page 29: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/29.jpg)
HTMLLinguaggio
Head può contenere anche alcune informazioni generali (tipo di editor usato, contenuto del documento, ecc.).
ATTN: poiché il titolo viene usato anche per costruire gli indici automatici usati dai motori di ricerca è importante che esso sia significativo
![Page 30: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/30.jpg)
HTMLLinguaggio
BODY
Contiene il documento (pagina) vero e proprio che verrà visualizzato nella finestra del browser
Il testo può essere inserito liberamente nella parteBODY e verrà visualizzato secondo le direttive diformattazione. <BODY> corpo della pagina </BODY>
![Page 31: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/31.jpg)
HTMLLinguaggio
All’interno del comando BODY e’ possibile inserire:– Testo (e la relativa formattazione)– Liste– Tabelle
- Immagini– Collegamenti – Moduli
![Page 32: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/32.jpg)
HTMLLinguaggio
HEADERS
<H1> titolo1 </H1>...
<H6> titolo6 </H6> permettono di indicare quali parti di testo vengono
usatecome titoliH1, ..., H6 sono usati anche per controllare le
dimensioni dei caratteri: H1 corrisponde a caratteri grandi, ..., H6 a caratteri piccoli
![Page 33: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/33.jpg)
HTMLLinguaggio
COMANDI PER ANDARE A CAPO <BR> a capo<P> a capo e inizio nuovo paragrafo (salta una linea) OSS:
• HTML non è sensibile ai caratteri maiuscoli e minuscoli nei comandi (non è Case Sensitive)
• HTML non è sensibile ai blank e alle linee vuote
Alcuni comandi non vengono chiusi (“empty tag”) in quanto non si applicano a uno specifico contenuto: tra questi, ad esempio, il tag <BR> che corrisponde all’ “a capo”.
![Page 34: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/34.jpg)
HTMLLinguaggio
ATTRIBUTI DI BODY
Il comando BODY ha degli attributi che permettono di:
<BODY bgcolor="colore sfondo"
text="colore testo" background="pathname del file con
immagine per lo sfondo" link="colore link da visitare" vlink="colore link visitati" >
![Page 35: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/35.jpg)
HTMLLinguaggio
Il colore può essere specificato con
• nome in inglese
• codice esadecimale # 00 00 00 (rosso verde blu vengono combinati
numericamente per formare tutti i colori) OSS: di default si ha sfondo grigio, testo nero, link
da visitare blu, link visitati rossi
![Page 36: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/36.jpg)
HTMLLinguaggio
Tabella colori in esadecimale
I colori in HTML si specificano utilizzando il sistema RGB (Red, Green, Blu), scrivendoli in esadecimale preceduti da “#”.
Miscelando questi valori è possibile ottenere una scala cromatica.
LINK A TABELLA ESADECIMALE INTERATTIVA:
http://users.libero.it/luclep/itaint.htm
![Page 37: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/37.jpg)
HTMLLinguaggio
Soltanto 216 colori sono quelli che vengono considerati "sicuri” o web safe.Sono colori che si vedono nello stesso modo, indipendentemente dal browser in cui appaiono.Gli unici 216 colori che si vedono sempre e comunque allo stesso modo, sono quelli composti da coppie di:00, 33, 66, 99, CC e FF.Es: “#990066” è web safe
“#99006F” non è web safe
http://www.asciitable.it/colorihtml.asp
![Page 38: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/38.jpg)
HTMLLinguaggio
DIMENSIONI CARATTERI<BASEFONT> e <FONT>
Dimensioni dei caratteri da 1 (piccolo) a 7 (grande)
<BASEFONT size=4> <FONT size=3> testo a dimensione 3 </FONT>
... si ritorna a basefont <FONT size=+1> dim+1 del precedente </FONT>
... si ritorna al precedente
![Page 39: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/39.jpg)
HTMLLinguaggio
Il comando FONT ha in realtà tre parametri• size per cambiare la dimensione• color per cambiare il colore• face per cambiare il font OSS: l'ultimo parametro funziona solo su alcuni browser <FONT size=“5” color="red" face=“Courier”>Questo testo viene visualizzato in rosso, ha
dimensione 5 e font Courier</FONT>...Si ritorna a colore, dimensione, font precedenti
![Page 40: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/40.jpg)
HTMLLinguaggio
Per inserire la formattazione (a capo, corsivo, grassetto, centratura del testo, ecc.) si utilizzano i comandi appositi: inserire la formattazione nel testo HTML con l’editor NON raggiungerebbe questo effetto, anzi produrrebbe una visualizzazione scorretta del documento.
La formattazione del testo inserita nel documento HTML, invisibile tramite l’editor, verrebbe interpretata dal browser come parte del documento e conseguentemente visualizzata.
![Page 41: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/41.jpg)
HTMLLinguaggio
ALLINEAMENTO
Il comando <P> ha un parametro align per l'allineamento del testo nel paragrafo
<P align=left> testo allineato a sinistra </P><P align=right> testo allineato a destra </P><P align=center> testo allineato al centro </P> OSS: la centratura del testo si può ottenere anche
con il comando <CENTER> testo da centrare
</CENTER>
![Page 42: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/42.jpg)
HTMLLinguaggio
FORMATOEsistono vari modi per cambiare il formato dei caratteri• Stili fisici (poco consigliati)• Stili Logici 1. STILI FISICI<B> testo </B> testo in grassetto<I> testo </I> testo in corsivo<TT> testo </TT> testo typewriter<S> testo </S> testo barrato<U> testo </U> testo sottolineato
![Page 43: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/43.jpg)
HTMLLinguaggio
2. STILI LOGICI
<EM> testo </EM>{emphasized (di solito corsivo)}
<CITE> testo </CITE>{per titoli libri (di solito in corsivo)}
<CODE> testo </CODE>{per codice di computer (font con caratteri a
grandezza fissa)}
<STRONG> testo </STRONG> {bold}
![Page 44: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/44.jpg)
HTMLLinguaggio
INDICI E PEDICI
a<SUB> 1 </SUB> produce a1
b<SUP> 2 </SUP> produce b2
Alla fine di un documento si può usare il comando <ADDRESS> che consente di firmare la pagina!
![Page 45: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/45.jpg)
HTMLLinguaggio
TABELLA DEI PRINCIPALI COMANDI DI FORMATTAZIONE DEL TESTO:
<I> … </I> Corsivo<B> … </B> Grassetto<H1>… </H1>,<H6> … </H6>Titolo (varie dim.)<P Paragrafoalign= “left”/ “right”/ … >Allineamento delparagrafo<BR> A capo<FONT Tipo e dim. color= “nome” size= “numero” > del carattere
![Page 46: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/46.jpg)
HTMLLinguaggio
Liste di elementi
Può essere utile poter costruire liste di elementi come quella seguente:
HTML fornisce vari comandi per creare le liste
1. LISTE NON NUMERATE <UL>
2. LISTE NUMERATE <OL>
3. LISTE DI DEFINIZIONE <DL>
![Page 47: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/47.jpg)
1) Liste non numerate: unordered list
<UL>
<LI> elemento della lista (list item)
</UL> chiude la lista non numerata
Il menu prevede due primi
<UL>
<LI> penne all’arrabbiata
<LI> lasagne al forno
</UL>
![Page 48: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/48.jpg)
1) Liste non numerate: unordered list
<UL> ha l'opzione type<UL type=disc><UL type=circle><UL type=square>
N.B. Il type di default è disc
![Page 49: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/49.jpg)
2) Liste numerate: ordered list
<OL> apre la lista numerata<LI> elemento della lista (list item)
</OL> chiude la lista numerata
Il menu prevede due primi
<OL>
<LI> penne all’arrabbiata
<LI> lasagne al forno
</OL>
![Page 50: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/50.jpg)
2) Liste numerate: ordered list
Opzioni type=1,A,a,I,i
start=numero
Il menu prevede due primi
<OL type=i start=3>
<LI> penne all’arrabbiata
<LI> lasagne al forno
</OL>N.B. Il type di default è 1
![Page 51: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/51.jpg)
3) Liste di definizioni
<DL> apre la lista di definizione
<DT> termine da definire (definition term)
<DD> definizione (definition description)
</DL> chiude la lista di definizione
![Page 52: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/52.jpg)
3) Liste di definizioni
ES: Alcune definizioni:<DL> <DT> HTML<DD> ling. per scrivere pagine WWW<DT> Internet<DD> rete mondiale di calcolatori</DL>
Produce
Alcune definizioni:HTML
ling. per scrivere pagine WWWInternet
rete mondiale di calcolatori
![Page 53: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/53.jpg)
ANNIDAMENTO DEI COMANDI
I comandi di HTML possano essere annidati, cioe’ “inscatolati” uno nell’altro.
All’interno del comando BODY, che racchiude l’intero documento, sono contenuti altri comandi: liste, formattazione del testo, ecc.
Annidando i comandi si possono ottenere effetti sofisticati:– un’immagine all’interno di un link crea un link
associato all’immagine– i punti di una lista possono contenere testo formattato
o un link.
![Page 54: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/54.jpg)
ANNIDAMENTO DEI COMANDI
Si possono annidare liste, non necessariamente dello stesso tipo.
Menu:
<UL>
<LI> Dolci
<OL> <LI> Budino
<LI> Crostata
</OL>
<LI> Frutta
</UL>
![Page 55: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/55.jpg)
HTMLLinguaggio
Testo preformattato
È possibile dare disposizioni affinché una parte di testo non venga formattata
<PRE>
questo testo sarà lasciato come scritto
</PRE>
![Page 56: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/56.jpg)
HTMLLinguaggio
Citazioni lunghe (STILE LOGICO)
Usato per racchiudere, all'interno di un testo, lunghe citazioni provenienti da altre pagine, ma anche da libri,
articoli di giornale, etc. Il testo è rientrato a destra, non in corsivo.
<BLOCKQUOTE>
citazione
</BLOCKQUOTE>
N.B: <CITE> è per citazioni brevi. Il testo è in corsivo.
![Page 57: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/57.jpg)
HTMLLinguaggio
Linee orizzontali
Per separare parti di testo si può usare il comando <HR> che produce
Questo comando ha tre opzioni
<HR size=numero {spessore in pixel}
width=“numero | numero% “ {lunghezza in pixel o in percentuale}
align=“left | right | center” {default centro}
color=“codice esadecimale | nome colore”
>
![Page 58: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/58.jpg)
HTMLLinguaggio
Testo scorrevole
<MARQUEE> testo che scorre </MARQUEE>
N.B. Per l’accessibilità è meglio evitare testo “in movimento”
![Page 59: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/59.jpg)
HTMLLinguaggio
Commenti
Può essere utile mettere dei commenti al codice nel documento che non sono visualizzati dal browser.
<!-- Questo è un commento -->
![Page 60: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/60.jpg)
HTMLLinguaggio
Come l’immagine di sfondo, anche le immagini che fanno parte nel documento HTML non si trovano dentro il documento, ma sono in un file a parte: è buona norma creare una cartella IMG per tutte le immagini
Il comando per inserire le immagini e’ IMG (un tag vuoto):
<IMG src=“nome_del_file_di_immagine”>
![Page 61: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/61.jpg)
IMMAGINI
Osservazioni: Se il nome non e’ corretto (l’estensione è
errata, ad esempio) oppure il file indicato non e’ nella cartella in cui si trova l’immagine, l’immagine non puo’ essere visualizzata!
i browsers supportano formati quali GIF, JPEG, BITMAP
![Page 62: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/62.jpg)
IMMAGINI
Il comando IMG ha vari attributi<IMG src=“pathname o URL dell'immagine …”
file di immagine width=“numero px/%”
larghezza dell’immagine height=“numero px/%”>
altezza dell’immagine
![Page 63: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/63.jpg)
IMMAGINI
align=“left | right”
più allineamenti particolari con il testo
alt=text testo alternativo all'immagine
border=numero larghezza in pixel del bordo
hspace=numero spazio in pixel a destra e sinistra dell'immagine
vspace=numero spazio in pixel sopra e sotto l'immagine >
![Page 64: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/64.jpg)
IMMAGINI
I percorsi dei file (pathname)
Percorsi assoluti:Per creare un collegamento assoluto è sufficiente fare riferimento all’url nella barra degli indirizzi.Si usano per lo più, quando si ha la necessità di fare riferimento a risorse situate in siti esterni.
Es: http://www.html.it/guida/
![Page 65: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/65.jpg)
IMMAGINI
Percorsi relativi:Per accedere a documenti situati all’interno del vostro sito (quindi del computer su cui state lavorando “in locale”)
Se il file si trova nella stessa directory basta il nome del file
<IMG src="foto2.jpg“>
![Page 66: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/66.jpg)
IMMAGINI
Se il file si trova in una directory diversa occorre indicare cartella/nome file
<IMG src="IMG/foto2.jpg“>
I blank nei nomi dei file si indicano con %20 (meglio rinominare senza spazi!)
<IMG src="IMG/puss%20in%20boots.jpg“>
![Page 67: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/67.jpg)
IMMAGINI
Align:Left Right Centerbottom allinea la prima riga di testo sulla
sinistra nella parte bassa dell'immagine (è così di default).
middle allinea la prima riga di testo sulla sinistra al centro dell'immagine.
top allinea la prima riga di testo sulla sinistra nel lato superiore dell'immagine.
![Page 68: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/68.jpg)
IMMAGINI
Per centrare l’immagine usate il tag <CENTER>:
<CENTER>
<IMG scr=“sole.jpg”>
</CENTER>
![Page 69: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/69.jpg)
Come organizzare le cartelle del sito
Creare una cartella con il nome del vostro sito (ad es. sul desktop) Es: SITO_Daniela
Dentro SITO_Daniela mettere tutti i file html che compongono le pagine del vostro sito
Creare dentro SITO_Daniela la cartella che conterrà tutte le immagini Es: IMG o IMMAGINI
Creare dentro SITO_Daniela la cartella che conterrà tutti i suoni o i video (se ne avete) Es:SUONI e/o VIDEO
![Page 70: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/70.jpg)
Come salvare un’immagine dal web
Per SALVARE UN’IMMAGINE da Internet:1. Tasto destro sull’immagine2. “Salva immagine con nome” (non copia e
incolla!!!!!!!!!!)3. Se necessario rinominarla senza spazi4. Salvarla nella cartella delle immagini del vostro
sito (es. IMG)
N.B. L’estensione da dare nel codice html è jpg e non jpeg!!!
![Page 71: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/71.jpg)
LINK
I collegamenti (link) sono l’elemento ipertestuale per eccellenza
Il testo corrispondente a un link (hot words) viene evidenziato e cliccandovi sopra si accede a un altro documento, che viene aperto nella finestra del browser al posto di quello corrente
Passando sopra al link con il mouse, la freccia si trasforma in una manina.
![Page 72: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/72.jpg)
LINK
Il comando per creare un link e’ A (“anchor”), associato al parametro href (in inglese, sta per riferimento ipertestuale):
<A href=“percorso di un file o URL”>documento collegato
testoTesto, IMMAGINE, Bottone che apparira’
attivo </A>
![Page 73: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/73.jpg)
LINK
Come abbiamo visto precedentemente, il link cambia colore dopo essere stato visitato (cliccato), attraverso i tag del Body
link="colore link da visitare" vlink="colore link visitati"
![Page 74: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/74.jpg)
LINK
Link ad una pagina web tramite del testo cliccabile
<A href="http://www.di.unito.it/lab_html.html"
>
Laboratori di HTML </A>
Link a programma per spedire mail tramite testo cliccabile
<A href="mailto:[email protected]">
spedisci una mail a Console </A>
![Page 75: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/75.jpg)
LINK
Link ad una pagina web tramite immagine cliccabile
<A href="http://www.di.unito.it/aa.html">
<IMG src="pippo.jpg"> </A>
Link ad un file nel nostro pc tramite testo cliccabile
<A href="file:pippo.html">
collegamento al file pippo </A>
![Page 76: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/76.jpg)
LINK
LE ANCORE
Particolari tipi di link che consentono di saltare in un punto preciso dello STESSO documento.
Formate da 2 elementi:
1. Il punto del documento a cui saltare (ANCORA)
2. Il testo che, se cliccato, porta al punto definito dall’ancora (LINK)
![Page 77: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/77.jpg)
LINK
1. L’ANCORA. Occorre darle un nome con:
<A name=“sezione3”> Sezione 3: le immagini </A>
2. Il LINK. Occorre dire a quale ancora deve riferirsi, con:
<A href="#sezione3"> vai alla sezione 3</A>
![Page 78: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/78.jpg)
TABELLE
Per creare una tabella si usa il comando
<TABLE>
tabella
</TABLE>
<TABLE> ha vari attributi che servono per stabilire le caratteristiche della tabella
![Page 79: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/79.jpg)
TABELLE
<TABLE
border=numero larghezza in pixel dei bordi
align=left | right | center
allineamento della tabella nella pagina
cellspacing=numero spazio in pixel tra le celle
cellpadding=numero
spazio tra bordo e contenuto delle celle
width=numero | percentuale
larghezza della tabella in pixel o in % >
![Page 80: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/80.jpg)
TABELLE
<TR> (table row) per creare righe della tabella
<TR> nuova riga </TR>
<TRalign=left | right | center
allineamento nella tabella
valign=top | middle | bottom |baselineallineamento del testo rispetto alle celle
bgcolor = “colore” bordercolor = “colore” bordercolordark = “colore” per le ombre dei bordi
>
![Page 81: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/81.jpg)
TABELLE
<table> <tr>Questa è la prima riga.</tr> <tr>Questa è la seconda riga.</tr></table>
Questa è la prima riga
Questa è la seconda riga
![Page 82: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/82.jpg)
TABELLE
<TD> per inserire dati <TD> inserimento di una dato </TD> <TH> per il titolo delle colonne <TH> titolo della colonna (bold e
centrato) </TH> <CAPTION> titolo tabella <CAPTION align=top | bottom>
titolo della tabella </CAPTION>
![Page 83: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/83.jpg)
TABELLE
prima seconda terza
1 2 3
a b c
i ii iii
![Page 84: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/84.jpg)
TABELLE
I comandi TD e TH hanno vari attributi: <TD (TH)
width=numero | percentuale {larghezza della cella in pixel o in
%} colspan=numero
{numero di colonne nella cella}rowspan= numero
{numero di righe nella cella} nowrap {non andare a capo nelle
celle} >
![Page 85: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/85.jpg)
TABELLE
COLSPANPermette di raggruppare le celle all'interno delle colonne in modo
da avere ad esempio una riga da 2 colonne e un’altra da 3.
<table border="1" > <tr><td >prima colonna</td> <td >seconda colonna</td> <td> terza colonna</td> </tr> <tr> <td> </td> <td colspan="2">cella che occupa 2 colonne</td> </tr></table>
![Page 86: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/86.jpg)
TABELLE
Prima colonna Seconda colonna Terza colonna
Cella che occupa 2 colonne
![Page 87: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/87.jpg)
TABELLE
ROWSPAN
Permette di creare celle che occupino più di una riga.
<table border="1" > <tr> <td > </td> <td rowspan="2"> cella che occupa 2 righe</td> <td> </td> </tr>
<tr> <td></td> <td></td> </tr></table>
![Page 88: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/88.jpg)
TABELLE
Cella che occupa due righe
![Page 89: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/89.jpg)
FRAME
In molti casi può essere utile dividere un documento HTML in più parti, ognuna delle quali può a sua volta contenere un documento HTML gestibile in modo separato
ATTN: non tutti i browser supportano i frame (Nescape a partire dalla versione 2.0; MS Explorer a partire da 3.0)
![Page 90: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/90.jpg)
FRAME
frame.html
![Page 91: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/91.jpg)
FRAME
Il file “totale” che contiene tutti i frame (frame.html):
non ha il comando <BODY> ... </BODY> che è rimpiazzato dal tag<FRAMESET>...</FRAMESET>
ha il tag <FRAME> che definisce quali pagine sono contenute nei frame
ha una parte finale <NOFRAMES>...</NOFRAMES>
che viene visualizzata nel caso in cui il browser non supporti i frame
![Page 92: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/92.jpg)
FRAME
<FRAMESET> si usa per definire la suddivisione della pagina completa (frame.html) Occorre decidere in quante righe e/o colonne suddividere la pagina e
definire le dimensioni di ciascuna riga e/o colonna.
<FRAMESETrows="numero1, ..., numeroN"
{altezze in pixel delle righe}
"percent1, ..., percentN" {altezza in % (somma<100%!!)}
cols="numero1, ..., numeroN" "percent1, ..., percentN">NB. Si può usare anche * per indicare il resto della pagina o
la grandezza relativa (vedi esempi…)
![Page 93: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/93.jpg)
FRAME
<FRAMESET rows="50,50,80">
<FRAMESET rows="20%,50%,30%">
<FRAMESET rows="30,*,20,20">{il resto nella seconda riga}
<FRAMESET rows="2*,*">{la prima riga deve essere il doppio della seconda}
![Page 94: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/94.jpg)
FRAME
<frameset cols="33%, 33%,*">
<frameset rows="33%, 33%,*">
<frameset rows="50%,50%“ cols="50%,
50%">
![Page 95: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/95.jpg)
FRAME
Altri attributi di <Frameset>
frameborder="no" (di default è yes)
framespacing=“n°“ border=”n°” (spessore del bordo. I 2 attributi sono equivalenti, ma è bene inserirli entrambi per assicurarsi che tutti i browser li supportino)
bordercolor=”colore”
![Page 96: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/96.jpg)
FRAME
<Frame> si usa per indicare quali file .html devono essere contenuti nei frame definiti con FRAMESET
NB: ci sarà un tag <frame> per ogni riga e/o colonna<FRAME
src="URL" {URL del file .html}name="nome della finestra"
{usato per riferimenti}scrolling="yes" | "no" | "auto"
{scrollbar associate al frame}noresize
{impedito resize da parte dell'utente}marginwidth="numero"
{larghezza dei margini in pixel}marginheight="numero"
{altezza dei margini in pixel }>
![Page 97: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/97.jpg)
FRAME
<NOFRAME> serviva per browser particolarmente obsoleti (come Mosaic 2) che non erano in grado di leggere e visualizzare una struttura frameset. Occorre quindi inserire ad esempio l’avvertimento che il sito è strutturato a frame, o un contenuto alternativo (es un link ad una versione del sito senza frame), oppure una descrizione per i motori di ricerca.
<NOFRAMES>Il tuo browser non supporta i frame; cliccare<A href=“home_2.html"> qui </A> per vedere la pagina
senza frame</NOFRAMES>
![Page 98: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/98.jpg)
FRAME
<html> <head>
<title>prova di frame</title> </head> <frameset rows="50%,50%" cols="50%, 50%"> <frame src="prima.html"> <frame src="seconda.html"> <frame src="terza.html"> <frame src="quarta.html"> <noframes> <p>Qui può essere indicato il link a<A href="senzaFrame.html"> una versione del sito</a> che non utilizzi un layout a frame</p> </noframes> </frameset> </html>
ATTENZIONE AL MODO IN CUI I TAG SONO ANNIDATI!!!
![Page 99: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/99.jpg)
FRAME
Per visualizzare il codice HTML di ciascun frame nel riquadro desiderato cliccare con il tasto destro del mouse.
Con Internet Explorer:
selezionare HTML Con Mozilla:
selezionare this frame > view frame source
![Page 100: Laboratorio Alfabetizzazione Informatica 2: HTML](https://reader035.vdocumenti.com/reader035/viewer/2022081420/5542eb67497959361e8d336b/html5/thumbnails/100.jpg)
FRAME
<FRAMESET cols="40%,60%” ><FRAME src="frodo.html"
name="finestra1" scrolling="yes" noresize>
<FRAME src="http://www.ilsignoredeglianelli.it" name="finestra2"
scrolling="yes" noresize ></FRAMESET>
<NOFRAMES>Il tuo browser non supporta i frame; cliccare<A href="frodo.html"> qui </A> per vedere la pagina
senza frame</NOFRAMES>