CORSO HTML

Corso HTML

lezione 1

Introduzione

L'HTML (Hyper Text Markup Language) è il linguaggio che viene usato per realizzare le pagine web. Queste sono particolari file di testo organizzati come ipertesti.
Non è un vero e proprio linguaggio di programmazione, ma un linguaggio di descrizione, di marcatura. Consiste infatti nel porre all'interno di un file di solo testo dei marcatori (Markup) o contrassegni, detti TAG che, letti e interpretati da un opportuno programma (chiamato browser=sfogliatore), produrranno le visualizzazioni e le azioni corrispondenti.

All'interno di pagine HTML, si possono includere programmi scritti in veri linguaggi di programmazione (linguaggi di scripting) come il JavaScript, e il VBScript.

Per iniziare a lavorare sulla costruzione di una pagina Web, si può utilizzare un qualsiasi editore di testi come il semplice blocco note di Windows, anche se l'utilizzo di editori visuali (come Frontpage), facilità molto il lavoro del programmatore che non dovendo scrivere tutto il codice può dedicarsi all'aspetto finale della pagina Web. La conoscenza dell'Html è però indispensabile per poter intervenire sul codice in caso di necessità. Per funzionare come pagina web, questo file di testo deve essere rinominato con il suffisso .HTML o .HTM e deve contenere, oltre al testo vero e proprio, anche le istruzioni che consentono al browser di riconoscerlo e gestirlo correttamente. Queste istruzioni sono chiamate Tag (marcatori). Tutti i TAG HMTL vengono racchiusi tra parentesi angolate, nella forma <TAG>, e vengono generalmente terminati da un tag di chiusura nella forma </TAG> posto alla fine della porzione di documento sulla quale si applica il TAG. Quando il browser incontra questi simboli capisce che si tratta d'istruzione da eseguire e non di testo da visualizzare sullo schermo. I tag in generale possono contenere attributi che ne definiscono determinate proprietà. Ogni attributo può assumere differenti valori.
La sintassi è: <TAG ATTRIBUTO="valore">; ad esempio: <BODY bgcolor=“red">.
Le virgolette che racchiudono il valore di un attributo a volte sono obbligatorie ed a volte no. In ogni caso sono sempre accettabili anche quando non sono necessarie.

È anche possibile includere coppie di tag all'interno di altre coppie di tag mantenendo una sequenza simmetrica.
Ad esempio, il tag <B> identifica il grassetto ed il tag <I> il corsivo. Così per formattare in grassetto e corsivo una parola si deve scrivere: <B><I>Testo</I></B> oppure: <I><B>Testo</B></I> ma non: <B><I>Testo</B></I> cioè l'ultimo tag aperto è il primo a dover essere chiuso.

Il primo tag che si deve scrivere in tutte le pagine html, è il tag <HTML> che andrà chiuso con </HTML> alla fine del codice. Qui di seguito vi mostro gli altri TAG ESSENZIALI che si usano per definire la struttura essenziale di ogni pagina web:
I tag <HTML> e </HTML> all'inizio ed alla fine del documento; essi indicano al browser che tutto ciò che è compreso nel mezzo è una pagina web.
I tag <HEAD> e </HEAD> racchiudono l'intestazione del documento dove si possono inserire informazioni che non vengono visualizzate nella pagina, ma che ne descrivono caratteristiche come titolo, autore e parole-chiave.
I tag <BODY> e </BODY> racchiudono il corpo del documento dove si inserisce il contenuto da visualizzare nella pagina (testo, collegamenti, immagini e così via).

I TAG DI INTESTAZIONE sono:<TITLE> e <META>.
Con <TITLE> si definisce il titolo della pagina web. Il titolo appare sulla barra superiore della finestra del browser quando la pagina viene visualizzata durante la navigazione. La sintassi è:
<HEAD> <TITLE>Titolo della pagina</TITLE> </HEAD>
Con il tag <META> è possibile specificare informazioni come: il nome dell'autore della pagina, una breve descrizione dei contenuti della pagina ed un elenco schematico di parole-chiave legate ai contenuti. Il tag <META> non richiede chiusura. Ad esempio:
Per inserire nell'intestazione il nome dell'autore si utilizza: <META NAME=author CONTENT="nome e cognome">
Per inserire nell'intestazione una descrizione del documento si utilizza: <META NAME=decription CONTENT="breve descrizione della pagina">
Per inserire nell'intestazione un elenco di parole-chiave che specificano l'argomento della pagina si utilizza: <META NAME=keywords CONTENT="parola1, parola2, parola3, parola4>

Il CORPO DELLA PAGINA Il tag <BODY> segna l’inizio del corpo principale del documento HTML dove vanno inseriti tutti i contenuti che devono apparire nella pagina web. Esso richiede il tag di chiusura </BODY>
Di seguito sono riportati i principali attributi del tag <BODY>:
BGCOLOR imposta un colore come sfondo della pagina web. Se vogliamo realizzare una pagina con lo sfondo nero scriveremo allora: <BODY BGCOLOR="#000000"> dove il codice del colore è in formato esadecimale.
Si può indicare il colore mediante il nome in inglese anziché il formato esadecimale: <BODY BGCOLOR="black">
Questa però non è una pratica comune perché non tutti i browser sono in grado di interpretare correttamente tale genere di espressione.

Con l'attributo BACKGROUND è possibile impostare come sfondo della pagina web un'immagine in formato GIF o JPEG secondo la sintassi:
<BODY BACKGROUND="percorso e nome del file">
Se l'immagine si trova nella stessa cartella della pagina HTML e si chiama sfondo.gif scriveremo:
<BODY BACKGROUND="sfondo.gif">
Inserendo un'immagine come sfondo della pagina web, questa viene automaticamente replicata dal browser in modo da coprire l'intero spazio visibile.

L'attributo TEXT serve per impostare il colore del testo della pagina secondo la sintassi: <BODY TEXT="#codice del colore">. Se non specificato, il colore di default del testo è il nero.

Tramite gli attributi del tag <BODY> si possono definire anche i colori dei collegamenti ipertestuali. I colori da definire sono tre: per i collegamenti ipertestuali in condizioni normali si usa l'attributo LINK="codice del colore"; per i collegamenti attivi, nel momento cioè in cui vi si fa clic, si usa l'attributo ALINK="codice del colore"; per i collegamenti già visitati si usa l'attributo VLINK="codice del colore".
la sintassi è: <BODY LINK="colore1" ALINK="colore2" VLINK="colore3">

I MARGINI I quattro attributi per definire la distanza in pixel sono: Topmargin, Bottommargin, Leftmargin, Rightmargin rispettivamente da: margine superiore, margine inferiore, margine sinistro e margine destro.
Un margine uguale a zero farà si che il testo inizi praticamente sul bordo della finestra del browser.
<body topmargin="30">
<body bottommargin="30">
<body leftmargin="30">
<body rightmargin="30">

FINE lezione 1

Esercizio1 Realizzare una pagina web con le seguenti caratteristiche:
titolo:”prima pagina web”
contenuto della pagina: questa è la mia prima pagina web.
N.B. utilizza BloccoNote per scrivere il codice; salva il file con nome “esercizio1” , con estensione html e prova ad avviarlo cliccando l'icona di internet explorer.

Esercizio 2 Realizza una pagina Web che abbia come titolo:” I Tag” e come testo:
“Va sottolineato che tutti i tag possono essere scritti sia in minuscolo che in maiuscolo senza che venga alterata o differenziata la loro funzione.”
Salvate il file con nome: “esercizio2.html"; Visualizzate il risultato con explorer
Modificate lo sfondo rendendolo giallo (yellow)
Salvate il file; Visualizzate il risultato con explorer (cliccare sul tasto aggiorna)
Modificate il colore del testo rendendolo blue
Salvate il file; Visualizzate il risultato con explorer

Esercizio 3 Utilizzando il file: “esercizio2”:
Impostate il margine superiore a 200 pixel; visualizzate il risultato
Impostate il margine sinistro a 300 pixel; visualizzate il risultato;
Cambiate il colore dello sfondo e del testo della pagina a vostro piacimento utilizzando la tabella dei colori posta in appendice

Esercizio 4 Realizzate una semplice pagina web con una frase, un testo, una poesia a vostra scelta
Ricordatevi di aggiungere il titolo alla pagina e salvatelo con il nome:”esempio3.html”
Create un disegno con paint e salvatelo con il nome:”sfondo”
Applicate il disegno come sfondo alla pagina web.

lezione 2

La formattazione del testo

Per la formattazione del testo HTML mette a disposizione una serie di TAG.

I principali tag sono:
<B>... </B>: testo in grassetto;
<I>... </I>: testo in corsivo;
<U>... </U>: testo sottolineato;
<Q>... </Q>: citazione breve tra apici;
<STRIKE>... </STRIKE>: testo barrato o depennato;
<SUP>... </SUP>: testo apice;
<SUB>... </SUB>: testo pedice.
<CITE>... </CITE>: citazione, il testo viene visualizzato in corsivo

I caratteri: Per definire le proprietà del carattere, dimensioni, colore, tipo di carattere adoperato per la scrittura del testo, usiamo gli attributi del tag <FONT>........</FONT>

FACE="nome" dove nome è il tipo di carattere (Comic Sans Serif, Times new Roman, ecc.)

COLOR="red"   oppure COLOR="#rrggbb" per indicare il colore

SIZE=+ o - "numero"    dove numero deve essere compreso tra 1e7 che vengono sommati o sottratti al numero di default che è 3 (dimensione standard)

Per tracciare una linea orizzontale da usare come divisorio, usiamo il tag <HR> che significa appunto Horizontal Rules.Anche questo tag prevede diversi attributi:

ALIGN="right" o "left" o "center"

COLOR=..... come per gli altri tag

NOSHADE la linea non prevede ombreggiatura

SIZE="numero" indica la dimensione in pixel

WIDTH= "numero" o "n%" indica la lunghezza della riga in pixel o in misura percentuale rispetto alla pagina

I paragrafi:Per mandare a capo il testo di una pagina web si usano i tag <BR>, <P> o <DIV>.
Il tag <BR> equivale ad un'interruzione di riga che non spezza il paragrafo. Infatti, il testo che segue va a capo mantenendo tutte le caratteristiche del testo precedente e senza che si crei spazio vuoto tra le righe. Il tag <BR> non richiede un corrispondente tag di chiusura.

Il tag <P> crea invece un'interruzione di paragrafo; il testo successivo va a capo, lasciando una riga di spazio vuoto, e può essere formattato in maniera diversa rispetto al testo precedente. Il tag <P> può essere usato singolo oppure con la rispettiva chiusura </P>.Il tag <P> ammette un attributo con tre possibili valori:
<P ALIGN=left> Allinea il testo al margine sinistro della pagina.
<P ALIGN=right> Allinea il testo al margine destro della pagina.
<P ALIGN=center> Centra il testo rispetto alla pagina. Di default, quindi se non diversamente specificato, l'allineamento si prevede a sinistra.

Il tag <DIV> che si usa con la chiusura </DIV> serve a creare un blocco di testo che va a capo e può assumere caratteristiche di formattazione diverse dal testo precedente senza tuttavia creare spazio vuoto tra il nuovo testo e quello precedente. Anche il tag <DIV> prevede gli attributi per la formattazione del testo.

Il tag <BLOCKQUOTE> </BLOCKQUOTE> genera un paragrafo rientrato verso destra.

I Titoli: Per la formattazione delle intestazioni, si usa il tag <Hn> </Hn> dove n può assumere i valori 1, 2, 3, 4, 5, 6 ,ed indica la dimensione dei caratteri in neretto,da una dimensione molto grande (n=1) a una dimensione piccola (n=6). Qui di seguito vedete la parola Titolo scritta nei diversi formati:

Titolo H1

Titolo H2

Titolo H3

Titolo H4

Titolo H5

Titolo H6

<H1>...</H1> Tutto il testo compreso fra questi due tags, utilizzerà dei caratteri molto grandi ed evidenziati in grassetto. Lascia una o due righe bianche sia al di sopra che al di sotto del testo. Viene utilizzato solitamente per titoli di pagina centrati rispetto allo schermo.
<H2>...</H2> Testo in grassetto di dimensioni leggermente inferiori al caso precedente, e con una o due righe bianche sopra e sotto il testo.
<H3>...</H3> Viene utilizzato per il testo normale, sia come dimensione che come aspetto estetico (font) del carattere. Lascia una o due righe bianche sopra e sotto il testo.
<H4>...</H4> Viene utilizzato per evidenziare in grassetto un testo con caratteri di dimensioni normali. Lascia inoltre una riga bianca sopra e sotto.
<H5>...</H5> Come il caso precedente, ma senza grassetto e lasciando una riga bianca al di sopra del testo.
<H6>...</H6> Carattere in grassetto di piccole dimensioni. Lascia una riga bianca al di sopra del testo.
TABELLA COLORI

Fare clik sul colore scelto per CONOSCERE il suo codice esadecimale.

FINE lezione 2

Esercizio1 Creare una pagina web con il titolo “esempio1” e nel body scrivere:
Nel mezzo del cammin di nostra vita
Mi ritrovai per una selva oscura
Che la dritta via era smarrita
Visualizzare la pagina con explorer
Ora aggiungete il tag <br> come riportato sotto:
Nel mezzo del cammin di nostra vita <br>
Mi ritrovai per una selva oscura <br>
Che la dritta via era smarrita <br>

Esercizio 2 Creare una pagina web con il titolo “esempio2” e nel body scrivere:
<p> Nel mezzo del cammin di nostra vita<br>
Mi ritrovai per una selva oscura <br>
Che la dritta via era smarrita <br></p>
<p> Ahi quanto a dir qual era è cosa dura <br>
esta selva selvaggia e aspra e forte <br>
che nel pensier rinova la paura! <br></p>
Visualizzare la pagina con explorer

Esercizio 3 Creare una pagina web con il titolo “esempio3” e nel body scrivere:
<p align=“center”> Nel mezzo del cammin di nostra vita <br>
Mi ritrovai per una selva oscura <br>
Che la dritta via era smarrita <br></p>
<p align=“right”> Ahi quanto a dir qual era è cosa dura <br>
esta selva selvaggia e aspra e forte <br>
che nel pensier rinova la paura! <br></p>
Visualizzare la pagina con explorer

Esercizio 4 Creare una pagina web con il titolo “esempio4” e nel body scrivere:
<div align=“center”>
Nel mezzo del cammin di nostra vita <br>
Mi ritrovai per una selva oscura <br>
Che la dritta via era smarrita <br>

Ahi quanto a dir qual era è cosa dura <br>
esta selva selvaggia e aspra e forte <br>
che nel pensier rinnova la paura! <br>
</div>
Visualizzare la pagina con explorer

Esercizio 5 CREARE UNA PAGINA WEB CHE CONTENGA IL SEGUENTE TESTO

Nel mezzo del cammin di nostra vita
mi ritrovai per una selva oscura
ché la diritta via era smarrita.

Ahi quanto a dir qual era è cosa dura
esta selva selvaggia e aspra e forte
che nel pensier rinova la paura!

Tant'è amara che poco è più morte;
ma per trattar del ben ch'i' vi trovai,
dirò de l'altre cose ch'i' v'ho scorte.

Io non so ben ridir com'i' v'intrai,
tant'era pien di sonno a quel punto
che la verace via abbandonai.

UTILIZZATE IL TAG FONT PER VARIARE IL TIPO, LE DIMENSIONI, IL COLORE IN OGNI SINGOLA TERZINA

Esercizio 6 Creare una pagina web che visualizzi il seguente testo:
Esempio 6 (normale)
Esempio 6 (grassetto)
Esempio 6 (corsivo)
Esempio 6 (sottolineato)
Esempio 6 (barrato)
H₂O
3³=27

Esercizio 7 Creare una pagina web con le seguenti caratteristiche:
Nel 1860 a Teano Garibaldi disse “obbedisco” al re Vittorio Eamanuele II. (suggerimento: usa il tag <q>)
Nel 1860 a Teano Garibaldi disse obbedisco al re Vittorio Eamanuele II. (suggerimento: usa il tag <cite>)
Nel decalogo didattico è riportato: Attraverso i processi della ricerca/riscoperta/reinvenzione/ricostruzione (problem solving), gli alunni, non solo comprendono ed apprendono, ma si formano, sviluppando le loro capacità ed i loro atteggiamenti (suggerimento: usa il tag <blockquote>)

Esercizio 8 Creare una pagina web così strutturata:

DIVINA COMMEDIA (suggerimento usa il tag <h1>)

INFERNO (suggerimento usa il tag <h2>)

PRIMO CANTO (suggerimento usa il tag <h3>)

Nel mezzo del cammin di nostra vita (suggerimento nessun tag)

mi ritrovai per una selva oscura
ché la diritta via era smarrita.

Ahi quanto a dir qual era è cosa dura
esta selva selvaggia e aspra e forte
che nel pensier rinova la paura!

lezione 3

Gli elenchi

Il linguaggio Html offre la possibilità di costruire elenchi ordinati, numerati e disordinati:

GLI ELENCHI DISORDINATI:Il tag è <UL> (Unordered List) con il rispettivo tag di chiusura</UL>. Nel mezzo del tag <UL>... </UL> ciascuna voce è identificata dal tag <LI> (list item). Esempio:
<UL> <LI> voce a <LI> voce b <LI> voce c </UL> dara come risultato:

voce a

voce b

voce c

Al tag <UL> si può aggiungere l'attributo TYPE="tipo di simbolo" che permette di scegliere un simbolo personalizzato. I valori previsti sono: disc: punto pieno circle: punto vuoto square: quadrato nero.

lGLI ELENCHI ORDINATI:Il tag è <OL> (Ordered List) con il rispettivo tag di chiusura</OL>. Nel mezzo del tag <OL>... </OL> ciascuna voce è identificata dal tag <LI>. Esempio:

                        <OL>
                       <LI> voce a
                       <LI> voce b
                       <LI> voce c
                    </OL>
Il risultato è:

voce a

voce b

voce c

lAl tag <OL> si può aggiungere l'attributo TYPE="tipo di numerazione" che permette di scegliere numeri o lettere.

lI valori previsti sono:
1:numeri arabi (default), I:numeri romani maiuscoli, i :numeri romani minuscoli, A:lettere maiuscole, a:lettere minuscole.

lSi può anche usare l'attributo START="numero" per far iniziare il conteggio da un qualsiasi valore.
ELENCO DI DEFINIZIONI:E' possibile creare anche elenchi di definizioni utilizzando i seguenti <TAG>:

lil tag è <DL> (Definition List) con il rispettivo tag di chiusura</DL>. Nel mezzo del tag <DL>... </DL> ciascuna voce è identificata dal tag <DT (Definition Term> con il rispettivo tag di chiusura</DT>. Nel mezzo del tag <DT>...<DT> ciascuna definizione, della voce, è identificata dal tag <DD> (Definition Description> con il tag di chiusura </DD> Esempio:

                        <DL>

                             <DT> voce a </DT>

                                   <DD> definizione della voce a </DD>

                             <DT> voce b </DT>

                                   <DD> definizione della voce b </DD>

                             <DT> voce c </DT>

                                   <DD> definizione della voce c </DD>

                          </DL>
darà come risultato:

     voce a

             definizione della voce a

     voce b

             definizione della voce b

     voce c

             definizione della voce c

FINE lezione 3

Esercizio1 Creare la seguente pagina web salvata come MATERIE.html:

Storia

Italiano

Geografia

Matematica

Scienze

Lingue

Economia aziendale

Ed. fisica

Esercizio 2 Creare una pagina web con il titolo MATERIEbis.html:

Storia

Italiano

Geografia

Matematica

Scienze

Lingue

Economia aziendale

Ed. fisica

Esercizio 3 Creare una pagina web con il titolo “esempio3 elenchi” in cui vengono elencati i diversi tipi di quadrilatero con i numeri latini e presentare una definizione per ogni tipo. Il risultato nel Web dovrà essere:

In base alle loro proprietà i quadrilateri possono essere:

Trapezi

Parallelogrammi

Rettangoli

Rombi

Quadrati

Definizioni

    Trapezi
          Quadrilateri con due lati paralleli
    Parallelogrammi
          Quadrilateri con i lati paralleli e opposti
    Rettangoli
          Parallelogrammi con angoli retti
    Rombi
          Parallelogrammi con tutti i lati uguali
    Quadrati
          Parallelogrammi con gli angoli retti e lati uguali

lezione 4

I collegamenti

In questa lezione conoscerai gli elementi necessari per arricchire le tue pagine Web di collegamenti ipertestuali. l documenti creati con il linguaggio Html, come spiegato nella prima lezione, sono da considerarsi veri e propri ipertesti visto che è possibile consultarli non solo in modo sequenziale, ma in modo dinamico cioè saltando da un argomento all'altro sia all' interno che all' esterno del documento.

Il linguaggio HTML permette di creare i seguenti tipi di collegamento:

Collegamenti tra parti del medesimo documento

Collegamenti tra documenti diversi, ma collocati sullo stesso elaboratore

Collegamenti tra documenti dislocati su diversi siti Internet

Collegamenti interni allo stesso documento: se si ha necessità di permettere lo spostamento con un click da una parte all'altra di una stessa pagina Web molto lunga, si deve definire una specie di segnalibro che individui il punto di arrivo. In questo ESEMPIO cliccando su comando2 ci si sposta in basso sulla spiegazione del comando2.

ELENCO COMANDI:

comando1
comando2

.....

.....

.....

.....

.....

.....

SPIEGAZIONE COMANDO 1:

.....

.....

.....

.....

.....

.....

.....

SPIEGAZIONE COMANDO 2:

il comando 2 serve a......

Per definire il punto di arrivo si utilizza l'attributo NAME:

<A NAME="nome scelto dal webmaster">. Vediamo cosa accadrebbe nel nostro esempio. Supponiamo di aver definito due destinazioni all'interno della nostra pagina:
<A NAME=“com1"> comando 1 </A> <A NAME=“com2"> comando 2 </A>
ora possiamo creare i collegamenti che ci portano alle due destinazioni secondo la sintassi:

<A HREF="#com1">comando1</A>

<A HREF="#com2">comando2</A>

Collegamento a documenti diversi interni allo stesso sito: In questo caso si prevede la possibilità di spostarsi da una pagina all'altra all'interno dello stesso sito.

<A HREF=“nomefile.html"> apre una nuova pagina html </A>

si può poi prevedere di collegarsi a qualsiasi altro documento ad esempio un file pdf, un documento excel, un file zip da scaricare. In questo caso la sintassi non cambia basta solo indicare il percorso esatto dove andare a cercare il file in oggetto.

<A HREF=“archivio/nomefile.zip"> scarica un file zip </A>

Si possono anche combinare collegamenti esterni ed interni, cioè definire un collegamento ipertestuale che punta ad un'ancora specifica all'interno di un'altra pagina web.
<A HREF=“SPIEGAZIONECOMANDI.html#com1"> Vai al comando 1 della pagina comandi</A>

Per inserire nella pagina web un indirizzo cliccabile, associato cioè alla casella e-mail corrispondente, in modo che l'invio del messaggio sia quasi automatizzato, la sintassi è:
<A HREF="mailto:mioindirizzo@libero.it"> Scrivimi per informazioni </A>
Cliccando su questo link ci si collegherà direttamente al software di posta predefinito, con il campo del destinatario già compilato.

Collegamento a risorse esterne al sito: Ad esempio si può predisporre un link ad un sito. Per creare un collegamento verso un'altro sito web è sufficiente inserire nel tag <A HREF> l'indirizzo completo del sito in questione:<A HREF=http://www.istruzione.it> Sito del MIUR </A>

Inserimento di un'immagine e creazione di un Link su un'immagine:
I collegamenti possono essere associati anche ad un'immagine. Quindi è possibile avere un'immagine cliccabile che ci porti ad un'altra pagina web, a un sito, ad una sezione e via dicendo. Per associare un collegamento ad un'immgine è necessario prima conoscere il tag per l'inserimento di un immagine in una pagina web:

<IMG SRC = "nomeimmagine"> Se si vuole collegare un link ad un immagine, si deve abbinare a questo Tag il tag Href.

Ad esempio:
<A HREF=“esrcizi.html"><IMG SRC=“quaderno_esercizi.gif" BORDER="0"></A>

BORDER=“valore" è un attributo che permette di definire un bordo all’immagine. Border=“0” significa immagine senza bordo.
Quando si clicca su un collegamento in una pagina web, viene caricata la nuova destinazione (immagine, pagina o sito) nella stessa finestra del browser. Per fare in modo che la destinazione del collegamento venga visualizzata in una nuova finestra del browser che si sovrappone a quella di partenza, si aggiunge al tag <A HREF> di partenza l'attributo TARGET. Ad esempio:
<A HREF="pagina2.html" TARGET="_blank"> Vai a pagina 2 </A>

E' poi possibile cliccare su un Link che ha come arrivo un'immagine.La sintassi è:
<A HREF="foto.jpg"> Vai a foto </A>
Anche in questo caso bisogna specificare correttamente il nome dell'immagine e l'eventuale percorso; supponendo che l'immagine si trovi nella cartella immagine si dovrà scrivere:
<A HREF="immagine/foto.jpg"> Vai a foto </A>

FINE lezione 4

Esercizio1 Creare la seguente pagina html: (seguite i suggerimenti)
Titolo della pagina:”Teorema di Pitagora”
Il testo della pagina:
Teorema di Pitagora (colore blue , in bold, dimensioni h6, centrato)
Il quadrato costruito sull’ipotenusa è uguale alla somma dei quadrati costruiti sui cateti
I²=C1²+C2²
Gli Esercizi si trovano nella seconda parte
Resto della teoria ………. (lasciate un bel po’ di spazio usando il tag: <br>, la parola calda sarà Esercizi)
ESERCIZI
Esercizio 1
Trovare l’ipotenusa conoscendo i cateti

Esercizio 2
Trovare i cateti conoscendo l’ipotenusa e un cateto

Esercizio 2 Creare due pagine html:
Prima pagina: (titolo: La vita)
Alessandro Manzoni nacque a Milano nel 1785, dal conte Pietro, un uomo di mediocre cultura, ricco possidente del contado di Lecco e da Giulia Beccaria, figlia del giurista Cesare Beccaria, uno dei più illustri rappresentanti dell’Illuminismo lombardo…
I promessi sposi …………………………… …….. Il cinque maggio ……….
Seconda pagina: (titolo: le opere)
I promessi sposi
Quel ramo del lago di Como, che volge a mezzogiorno, tra due catene non interrotte di monti, tutto a seni e a golfi, a seconda dello sporgere e del rientrare di quelli, vien, quasi a un tratto,

Il cinque maggio
Ei fu. Siccome immobile,Dato il mortal sospiro,Stette la spoglia immemore Orba di tanto spiro,Così percossa, attonita La terra al nunzio sta.

Inserire due collegamenti ipertestuali nella prima pagina in corrispondenza di “I promessi sposi” e “Il cinque maggio” verso la seconda pagina dal nome opere.
Inserire un collegamento ipertestuale nella seconda pagina verso la prima dal nome vita che permetta di tornare indietro cliccando sulla parola INDIETRO

Esercizio 3 Riprendere l'esercizio precedente ed aggiungere nella seconda pagina, in corrispondenza della poesia “il cinque maggio” il riferimento interno “5mag” utilizzando un segnalibro.
Nella prima pagina, modificare il collegamento ipertestuale in corrispondenza di “Il cinque maggio” aggiungendo il riferimento interno della seconda pagina

Esercizio 4 Cercare la foto di Alessandro Manzoni su internet e salvarla nella cartella esercizi con il nome “Manzoni. estensione” (l’estensione può essere: jpg, gif,bmp, ecc)
Nell’esercizio precedente aggiungere in corrispondenza di “Alessandro Manzoni” il collegamento ipertestuale alla sua foto:
Salvare e verificare il collegamento ipertestuale cliccando su “Alessandro Manzoni”

Esercizio 5 Nella cartella “materiale” create una pagina web contenenti i link ad almeno 10 siti di vostra preferenza.
Salvatela con il nome preferiti.html.

lezione 5

I tag per le immagini

In questa lezione imparerai a inserire immagini nella tua pagina Web. Per inserire un'immagine in una pagina HTML si utilizza il tag: <IMG> insieme con l’attributo SRC="nome immagine“ secondo la sintassi:
<IMG SRC="nomeimmagine.gif">. Questo tag non ha bisogno di chiusura. Se non si indicano attributi a questo tag, l'immagine appare allineata alla base della riga di testo corrispondente e mantiene le sue dimensioni assolute. Per personalizzare l'impaginazione dell'immagine, conosciamo gli attributi:

ALIGN=TOP/MIDDLE/BOTTOM Specifica, tramite uno dei tre parametri TOP, MIDDLE e BOTTOM, se il testo successivo dev'essere allineato in alto (TOP), al centro (MIDDLE) o in basso (BOTTOM) rispetto all'immagine.

ALT="testo" Specifica un testo alternativo che il browser dovrà utilizzare nel caso che non sia in grado di visualizzare correttamente l'immagine (o nel caso sia stata disattivata la funzione di caricamento automatico delle immagini). Si consiglia vivamente di utilizzarlo sempre, con descrizioni brevi che appaiono comunque al navigatore al passaggio del mouse sull'immagine.

WIDTH="150" HEIGHT="100"
Possiamo definire le dimensioni di visualizzazione di un'immagine specificando gli attributi WIDTH (larghezza in pixel) e HEIGHT (altezza in pixel). Nell' esempio: la larghezza è fissata a 150 e l'altezza a 100.

VSPACE="10" HSPACE="20" si può aumentare lo spazio vuoto che circonda l'immagine attraverso gli attributi VSPACE (spazio verticale, in pixel) e HSPACE (spazio orizzontale, in pixel), nell'esempio rispettivamente 10 e 20 pixel.

BORDER="5" L'attributo BORDER inserisce un bordo intorno all'immagine dove il valore di border indica lo spessore del bordo espresso in pixel.

In Internet, i formati grafici di gran lunga più utilizzati sono il GIF (Graphics Interchange Format) e il JPEG (Joint Photographer Expert Group). Le immagini gif possono contenere al massimo 256 diverse tonalità (colori), mentre quelle jpeg sono in ogni caso a più di 16 milioni di colori (si parla di True Color).
Possono poi essere utilizzate le immagini gif animate. Le ultime versioni di Netscape e Internet Explorer riconoscono speciali controlli inseriti in immagini che sono formate da una successione di immagini (che formano appunto una breve animazione). Anch'esse vengono realizzate con appositi programmi (ad esempio GIF Construction Set).

FINE lezione 5

Esercizio1 Assicuratevi che nella vostra cartella degli esercizi HTML vi sia un immagine o foto.
Create la seguente pagina web:

Prova inserimento di una immagine:

Esercizio 2 Cambiate le dimensioni dell’immagine dell’esercizio 1 , varie volte, e osservate i risultati.

Esercizio 3 Create la seguente pagina web:
TITOLO:Prova inserimento di una immagine. CONTENUTO: il faro è utile per la navigazione delle navi. Impedisce che esse urtino contro gli scogli.” (potete sostituire il testo con uno vostro a piacere ma deve essere altrettanto lungo).
Cambiate l’allineamento dell’immagine dell’esercizio 1 , varie volte, e osservate i risultati.

Esercizio 4 Riprendere la pagina web dell'esercizio precedente ed aggiungere un'altra immagine così:

Poi aggiungete nei due tag <IMG> gli attributi necessari per creare uno spazio tra le due immagini, un bordo spesso 5 pexel, una larghezza di       150 e un'altezza di 100 per la prima e una larghezza di 200 ed altezza di 132 per la seconda immagine

           Quest'immagine ha una larghezza di 200 e un'altezza di 132

Esercizio 5 Riprendere la pagina web dell'esercizio precedente ed aggiungete una descrizione della stessa che apparirà al passaggio del mouse. (provate a passare sull'immagine qui sopra)

Esercizio 6 Nella vostra cartella create una pagina web con almeno 5 foto di vostra scelta.
Le dimensioni delle foto devono essere 600x400
Inserite una breve descrizione sotto le foto
Separate le foto con una linea
Salvate il file con il nome foto.html

lezione 6

Le tabelle

In questa lezione imparerai a costruire le tue pagine Web utilizzando le tabelle. Le tabelle in HTML si utilizzano, oltre che per rappresentare dati, anche per costruire l'intera struttura di una pagina web. Con esse si può definire il layout di una pagina web in modo da disporre il testo su più colonne e di ottenere tipi di allineamenti complessi. Se ad esempio vogliamo realizzare una pagina che contenga: l’intestazione, il menù e il corpo, un modo per farlo è utilizzare una tabella a tre righe con i bordi invisibili.
Il tag per creare una tabella è <TABLE> ed il rispettivo tag di chiusura </TABLE>. Tra i 2 tag <TABLE> e </TABLE> ogni riga si definisce con la coppia di tag <TR>....</TR> (Table row). All'interno di ogni riga si creano le celle desiderate utilizzando la coppia di tag <TD>.....</TD> (Table data). Anche l'attributo <TABLE> prevede l'uso di attributi per definire la formattazione della tabella. L'attributo WIDHT esprime la larghezza di una tabella . Il valore può essere espresso in pixel con valore assoluto, o in percentuale rispetto alla larghezza della pagina. La sintassi è la seguente:
<TABLE WIDTH="600">....</TABLE> si crea una tabella con una larghezza di 600 pixel.
Con la sintassi:
<TABLE WIDTH="90%">....</TABLE> si crea una tabella con una larghezza pari all'90% della pagina.

Con l'attributo ALIGN="valore" del tag <TABLE> si può definire l'allineamento della tabella rispetto alla pagina. Il valore di ALIGN può essere left, center o right. Ha senso specificare l'allineamento solo nel caso in cui si è definita una tabella con una larghezza inferiore a quella della pagina.

Inserisci il codice sotto riportato in una pagina web per creare una tabella con quattro celle, vale a dire con due righe e due colonne:

<TABLE width="50%" align = "center" border ="5"> definisce la tabella
<TR> crea la riga
<TD>cella 1</TD>
<TD>cella 2</TD> </TR>
<TR> <TD>cella 3</TD> <TD>cella 4</TD> </TR>
</table>

Il risultato sarà il seguente:

cella1 cella2

cella3 cella4

Come vedete ho aggiunto l'attributo border al tag Table per ottenere la tabella così come appare sopra, potete provare a modificare il valore di border e ad omettere border: valutate poi il risultato.

L'attributo BORDER definisce quindi il bordo di una tabella secondo la sintassi:
<TABLE BORDER="spessore">.....</TABLE>
dove lo spessore deve essere espresso da un numero intero di pixel. Se non si imposta alcun valore il bordo delle celle resta invisibile.

Per impostare uno sfondo personalizzato di una tabella si usano gli attributi BGCOLOR="#colore" per definire un colore di sfondo omogeneo e BACKGROUND="image" per collocare sullo sfondo un'immagine. Questi due attributi possono essere inseriti all'interno del tag di apertura <TD> per assegnare la caratteristica ad una singola cella.

Spaziatura tra celle e spaziatura interna delle celle Con l'attributo CELLSPACING si definisce la spaziatura tra una cella e quelle adiacenti. La sintassi è:
<TABLE CELLSPACING="numero di pixel">...</TABLE>
In mancanza di indicazioni il valore predefinito è 2 pixel.
Con l'attributo CELLPADDING si definisce la spaziatura interna della cella, ovvero la quantità di spazio vuoto tra il margine della cella ed i suoi contenuti. La sintassi è:
<TABLE CELLPADDING="numero di pixel">...</TABLE>
In mancanza di indicazioni il valore predefinito è 1 pixel

LARGHEZZA E ALTEZZA DELLE CELLE: Nel tag <TD> si possono specificare gli attributi WIDTH e HEIGHT che permettono di definire la larghezza e l'altezza di ogni cella. Quindi con:
<TD WIDTH="numero di pixel o percentuale rispetto alla larghezza della tabella">...</TD> si fissa la larghezza della cella, e con:
<TD HEIGHT="numero di pixel o percentuale rispetto alla larghezza della tabella">...</TD>si fissa l'altezza della cella.

Espandere le celle: Espandere una cella su più righe equivale al comando Unisci e centra che già conoscete in EXCEL, per cui 2 o più celle adiacenti vengono unite diventando una cella unica. Per espandere un cella su più righe o su più colonne si usano gli attributi:
ROWSPAN e COLSPAN del tag <TD> secondo la sintassi: <TD ROWSPAN="numero">...</TD> estende la cella attraverso il numero di righe specificato. <TD COLSPAN="numero">...</TD> estende la cella attraverso il numero di colonne specificato.

Formattare il testo nelle celle Per l'allineamento orizzontale del contenuto di una cella si utilizza:
<TD ALIGN="valore">......</TD>
dove ALIGN può assumere i valori left (predefinito), center e right.
Per l'allineamento verticale dei contenuti di una cella si utilizza:
<TD VALIGN="valore">......</TD>
dove VALIGN può assumere quattro differenti valori:

- top: allineamento al margine superiore della cella;

- middle (predefinito): allineamento al centro dell'altezza della cella;

- bottom: allineamento al margine inferiore della cella;

FINE lezione 6

Esercizio1 Creare la seguente tabella: “orario scolastico settimanale” utilizzando gli appropriati tag studiati.(spaziatura tra celle 5, larghezza tabella 75%.)Scrivere in grassetto in rosso i giorni della settimana e ora;
Colorare in giallo lo sfondo della prima riga
Colorare il azzurro lo sfondo delle celle che contengono la disposizione
Portate la spaziatura tra le celle a 5 pixel

ORA LUNEDI MARTEDI MERCOLEDI GIOVEDI VENERDI

1A 1A

2A 1A 2B

2B 1B 2A 1B

2A DISP 2A 1B DISP

2B 2A 2A

2A 1A 2B

1B 1A

Esercizio 2 Riprodurre la seguente tabella con il corretto codice Html:

PREZZI

EURO

STERLINE

Esercizio 3 Creare una pagina Html con la seguente tabella che    rappresenta la struttura di una pagina web Attribuite un colore di sfondo    di vostro gradimento alle tre sezioni della tabella.

Intestazione

menù

corpo: scopo del sito