Laboratorio Alfabetizzazione Informatica 2: HTML

Guida http://www.html.it/guida

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.

HTML HyperText Markup Language Linguaggio base per produrre documenti per World Wide Web (WWW o WEB) Documenti WEB pagine 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

HTML HyperText 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.

HTML HyperText 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.

HTML HyperText 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.

HTML HyperText 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 :

HTML HyperText 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).

HTML HyperText 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

HTML HyperText 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).

HTML HyperText 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

HTML HyperText 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)

HTML HyperText 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  

HTML HyperText 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

HTML HyperText 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

HTML Caratteristiche 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

HTML Caratteristiche Vediamo il linguaggio di qualche pagina web Tasto destro mouse HTML VISUALIZZAHTML In questo modo visualizziamo il FILE HTML SORGENTE

HTML Caratteristiche 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”);

HTML Caratteristiche 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.

HTML Caratteristiche Salva come: Tutti i file Codifica: Ansi 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 .html Salva come: Tutti i file Codifica: Ansi

HTML Caratteristiche 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

HTML Caratteristiche 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

HTML Caratteristiche Non e’ permesso inserire alcun elemento di formattazione nel testo HTML (corsivo, grassetto, ecc.), se non tramite i comandi HTML appositi!.

HTML Caratteristiche testo che comparira’ scritto in rosso 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>

STRUTTURA DEL DOCUMENTO HTML Caratteristiche 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)

HTML Linguaggio <HTML> <HEAD>   <HTML> <HEAD> descrizione delle caratteristiche del documento </HEAD> <BODY> documento vero e proprio </BODY> </HTML>  Apriamo Blocco note e proviamo!!!!

HTML Linguaggio <TITLE> Scienze della Comunicazione HEAD la parte fondamentale è il titolo del documento che verrà visualizzato come titolo nella finestra del browser <HEAD> <TITLE> Scienze della Comunicazione </TITLE> </HEAD>

HTML Linguaggio 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

HTML Linguaggio BODY Contiene il documento (pagina) vero e proprio che verrà visualizzato nella finestra del browser   Il testo può essere inserito liberamente nella parte BODY e verrà visualizzato secondo le direttive di formattazione. <BODY> corpo della pagina </BODY>

HTML Linguaggio All’interno del comando BODY e’ possibile inserire: Testo (e la relativa formattazione) Liste Tabelle - Immagini Collegamenti Moduli

HTML Linguaggio HEADERS <H1> titolo1 </H1> ...   <H1> titolo1 </H1> ... <H6> titolo6 </H6> permettono di indicare quali parti di testo vengono usate come titoli H1, ..., H6 sono usati anche per controllare le dimensioni dei caratteri: H1 corrisponde a caratteri grandi, ..., H6 a caratteri piccoli

COMANDI PER ANDARE A CAPO HTML Linguaggio 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”.

HTML Linguaggio 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" >

HTML Linguaggio 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

Tabella colori in esadecimale HTML Linguaggio 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

HTML Linguaggio 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

<BASEFONT> e <FONT> HTML Linguaggio 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

HTML Linguaggio <FONT size=“5” color="red" face=“Courier”> 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

HTML Linguaggio 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.

<CENTER> testo da centrare HTML Linguaggio 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>

HTML Linguaggio FORMATO Esistono vari modi per cambiare il formato dei caratteri Stili fisici (poco consigliati) Stili Logici   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

HTML Linguaggio 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}

HTML Linguaggio 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!

HTML Linguaggio TABELLA DEI PRINCIPALI COMANDI DI FORMATTAZIONE DEL TESTO: <I> … </I> Corsivo <B> … </B> Grassetto <H1>… </H1>,<H6> … </H6>Titolo (varie dim.) <P Paragrafo align= “left”/ “right”/ … >Allineamento delparagrafo <BR> A capo <FONT Tipo e dim. color= “nome” size= “numero” > del carattere

HTML Linguaggio Liste di elementi Può essere utile poter costruire liste di elementi come quella seguente: HTML fornisce vari comandi per creare le liste LISTE NON NUMERATE <UL> LISTE NUMERATE <OL> LISTE DI DEFINIZIONE <DL>

1) Liste non numerate: unordered list <UL> <LI> elemento della lista (list item) </UL> chiude la lista non numerata  Il menu prevede due primi <LI> penne all’arrabbiata <LI> lasagne al forno </UL>

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

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>

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

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

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 WWW Internet rete mondiale di calcolatori

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.

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>

HTML Linguaggio Testo preformattato È possibile dare disposizioni affinché una parte di testo non venga formattata   <PRE> questo testo sarà lasciato come scritto </PRE>

Citazioni lunghe (STILE LOGICO) HTML Linguaggio 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.

HTML Linguaggio 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” >

HTML Linguaggio Testo scorrevole <MARQUEE> testo che scorre </MARQUEE> N.B. Per l’accessibilità è meglio evitare testo “in movimento”

HTML Linguaggio Commenti Può essere utile mettere dei commenti al codice nel documento che non sono visualizzati dal browser.   <!-- Questo è un commento -->

HTML Linguaggio <IMG src=“nome_del_file_di_immagine”> 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”>

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

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

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 >

Es: http://www.html.it/guida/ 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/

<IMG src="foto2.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“>

IMMAGINI <IMG src="IMG/foto2.jpg“> 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“>

IMMAGINI Align: Left Right Center bottom 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.

<IMG scr=“sole.jpg”> IMMAGINI Per centrare l’immagine usate il tag <CENTER>: <CENTER> <IMG scr=“sole.jpg”> </CENTER>

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

Come salvare un’immagine dal web Per SALVARE UN’IMMAGINE da Internet: Tasto destro sull’immagine “Salva immagine con nome” (non copia e incolla!!!!!!!!!!) Se necessario rinominarla senza spazi Salvarla nella cartella delle immagini del vostro sito (es. IMG) N.B. L’estensione da dare nel codice html è jpg e non jpeg!!!

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.

LINK <A href=“percorso di un file o URL”> documento collegato 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 testo Testo, IMMAGINE, Bottone che apparira’ attivo </A>

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"

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:lconsole@di.unito.it"> spedisci una mail a Console </A>

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>

LINK LE ANCORE Particolari tipi di link che consentono di saltare in un punto preciso dello STESSO documento. Formate da 2 elementi: Il punto del documento a cui saltare (ANCORA) Il testo che, se cliccato, porta al punto definito dall’ancora (LINK)

LINK L’ANCORA. Occorre darle un nome con: <A name=“sezione3”> Sezione 3: le immagini </A> Il LINK. Occorre dire a quale ancora deve riferirsi, con: <A href="#sezione3"> vai alla sezione 3</A>

TABELLE <TABLE> tabella </TABLE> Per creare una tabella si usa il comando <TABLE> tabella </TABLE>   <TABLE> ha vari attributi che servono per stabilire le caratteristiche della tabella

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

TABELLE <TR> (table row) per creare righe della tabella <TR> nuova riga </TR>  <TR align=left | right | center allineamento nella tabella valign=top | middle | bottom |baseline allineamento del testo rispetto alle celle bgcolor = “colore” bordercolor = “colore” bordercolordark = “colore” per le ombre dei bordi >

Questa è la seconda riga TABELLE <table> <tr>Questa è la prima riga.</tr> <tr>Questa è la seconda riga.</tr> </table> Questa è la prima riga Questa è la seconda riga

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>

TABELLE prima seconda terza 1 2 3 a b c i ii iii

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

TABELLE COLSPAN Permette 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>

TABELLE Prima colonna Seconda colonna Terza colonna Cella che occupa 2 colonne

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>

TABELLE Cella che occupa due righe

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)

FRAME frame.html

<NOFRAMES>...</NOFRAMES> 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

FRAME <FRAMESET> <FRAMESET rows="numero1, ..., numeroN" 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. <FRAMESET rows="numero1, ..., numeroN" {altezze in pixel delle righe} "percent1, ..., percentN" {altezza in % (somma<100%!!)} cols="numero1, ..., numeroN" > NB. Si può usare anche * per indicare il resto della pagina o la grandezza relativa (vedi esempi…)

FRAME <FRAMESET rows="50,50,80"> {il resto nella seconda riga} <FRAMESET rows="2*,*"> {la prima riga deve essere il doppio della seconda}

FRAME <frameset cols="33%, 33%,*"> <frameset rows="33%, 33%,*"> <frameset rows="50%,50%“ cols="50%, 50%">

frameborder="no" (di default è yes) framespacing=“n°“ border=”n°” 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”

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

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>

ATTENZIONE AL MODO IN CUI I TAG SONO ANNIDATI!!! 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!!!

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

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>