Laboratorio Alfabetizzazione Informatica 2: HTML.

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.

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


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.


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.


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.


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 :


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


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


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


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


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)


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


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


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

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

HTMLCaratteristiche

Vediamo il linguaggio di qualche pagina web– Tasto destro mouse HTML– VISUALIZZAHTML

In questo modo visualizziamo il FILE HTML SORGENTE

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

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.

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

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

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

HTMLCaratteristiche

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

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>

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)

HTMLLinguaggio

<HTML>

<HEAD>descrizione delle caratteristiche del documento</HEAD>

<BODY>documento vero e proprio</BODY></HTML>

Apriamo Blocco note e proviamo!!!!

HTMLLinguaggio

HEADla parte fondamentale è il titolo del documento che

verrà visualizzato come titolo nella finestra del browser

<HEAD><TITLE>Scienze della Comunicazione </TITLE></HEAD>

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

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>

HTMLLinguaggio

All’interno del comando BODY e’ possibile inserire:– Testo (e la relativa formattazione)– Liste– Tabelle

- Immagini– Collegamenti – Moduli

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

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

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

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

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

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

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

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

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.

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>

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

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}

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!

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

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>

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>

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


<OL>



</OL>

2) Liste numerate: ordered list

Opzioni type=1,A,a,I,i

start=numero


<OL type=i start=3>



</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 WWWInternet

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>

HTMLLinguaggio

Testo preformattato

È possibile dare disposizioni affinché una parte di testo non venga formattata

<PRE>

questo testo sarà lasciato come scritto

</PRE>

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.

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”

>

HTMLLinguaggio

Testo scorrevole

<MARQUEE> testo che scorre </MARQUEE>

N.B. Per l’accessibilità è meglio evitare testo “in movimento”

HTMLLinguaggio

Commenti

Può essere utile mettere dei commenti al codice nel documento che non sono visualizzati dal browser.

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

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 >

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/

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

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

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

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

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>

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:[email protected]">

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:

1. Il punto del documento a cui saltare (ANCORA)

2. Il testo che, se cliccato, porta al punto definito dall’ancora (LINK)

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>

TABELLE

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>

<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

>

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

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>

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

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

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

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}

FRAME

<frameset cols="33%, 33%,*">

<frameset rows="33%, 33%,*">

<frameset rows="50%,50%“ cols="50%,

50%">

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”

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>

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>

Laboratorio Alfabetizzazione Informatica 2: HTML.

Documents

Transcript of Laboratorio Alfabetizzazione Informatica 2: HTML.