Sei sulla pagina 1di 31

www.ipbz.it a cura del settore Nuove tecnologie e informazione, Luisanna Fiorini luisanna.fiorini@scuola.alto-adige.

it

HTML
(Hyper-Text Markup
Language)
www.ipbz.it a cura del settore Nuove tecnologie e informazione, Luisanna Fiorini luisanna.fiorini@scuola.alto-adige.it

• L’HTML è il “linguaggio” utilizzato per la


creazione delle pagine visualizzate in Internet.

• Non è un vero e proprio linguaggio di


programmazione, bensì un “Markup
Language”, cioè una serie di istruzioni
composte da informazioni che definiscono le
caratteristiche di un documento e ne guidano
la composizione sullo schermo.

• Le istruzioni vengono interpretate dai


Browser: i più diffusi sono Internet Explorer e
Netscape.
www.ipbz.it a cura del settore Nuove tecnologie e informazione, Luisanna Fiorini luisanna.fiorini@scuola.alto-adige.it

• Lanciate il vostro Browser. Se usate IE dal


menù principale selezionare Visualizza e quindi
HTML. Se usate Netscape dal menù principale
selezionare Visualizza e quindi Pagina
sorgente.

• Leggete la ragnatela di comandi.

• Tutti i comandi HTML sono facilmente


riconoscibili perché sono sempre racchiusi tra i
segni di minore e maggiore (< e >)
www.ipbz.it a cura del settore Nuove tecnologie e informazione, Luisanna Fiorini luisanna.fiorini@scuola.alto-adige.it

• Un file “html” (o “htm” per PC MS-DOS), è un


semplice file di testo (cioè contenente solo
caratteri ASCII)

• I file html differiscono però dai file di testo


destinati ad essere semplicemente letti perché
contengono dei comandi, scritti secondo un
linguaggio che è, appunto, l’html.
www.ipbz.it a cura del settore Nuove tecnologie e informazione, Luisanna Fiorini luisanna.fiorini@scuola.alto-adige.it

• Il browser con cui l’utente Internet esplora il


World Wide Web (Explorer o Netscape)
interpreta le istruzioni presenti nei files html
per trasformarle nelle caratteristiche grafiche
che poi appaiono sullo schermo (colore,
caratteri, impaginazione, immagini, links….)
www.ipbz.it a cura del settore Nuove tecnologie e informazione, Luisanna Fiorini luisanna.fiorini@scuola.alto-adige.it

• I comandi sono chiamati “tags” e sono


sempre contenuti fra minore e maggiore:
< e >.

• Generalmente sono costituiti da un’istruzione


iniziale <I> = (da qui in poi corsivo) e da
un’istruzione finale </I> = (da qui in poi fine
corsivo).

• Ci sono però anche istruzioni che non sono


accoppiate, cioè hanno un inizio ma non
necessitano di una fine: ad esempio “a capo”
che si indica solo con <BR> e paragrafo che si
indica con <P>
www.ipbz.it a cura del settore Nuove tecnologie e informazione, Luisanna Fiorini luisanna.fiorini@scuola.alto-adige.it

• Il comando iniziale e finale è quello che


determina l’identificazione da parte del
Browser ed è il più ovvio.

• La pagina HTML comincia proprio con il


comando <html> e termina con </html>.

• All’interno ci sono due sezioni importanti: una


chiamata head (testa) che noi non vediamo
visualizzata nella pagina ma che contiene
informazioni preziose, e una chiamata body
(corpo) che contiene tutto ciò che vogliamo si
visualizzi (immagini, testo, tabelle…)
www.ipbz.it a cura del settore Nuove tecnologie e informazione, Luisanna Fiorini luisanna.fiorini@scuola.alto-adige.it

• La pagina è quindi principalmente così


composta

<html> (inizia la pagina)

<head> (la parte delle


informazioni nascoste)
</head>

<body> (la parte che si


visualizza nella finestra
del browser)
</body>

</html> (fine della pagina)


www.ipbz.it a cura del settore Nuove tecnologie e informazione, Luisanna Fiorini luisanna.fiorini@scuola.alto-adige.it

• Nel <head> della pagina si inseriscono alcune


informazioni che serviranno per i motori di ricerca
e per dare un titolo alla pagina, ovvero ciò che
apparirà in alto sulla finestra del browser.

• Per indicare il titolo della pagina si usa il tag:


<title> e </title>.

• Per cui se scriverò


<title>Questo è il mio primo corso html</title>.
Si visualizzerà questo
www.ipbz.it a cura del settore Nuove tecnologie e informazione, Luisanna Fiorini luisanna.fiorini@scuola.alto-adige.it

• L’html può essere generato con un semplice editor


di testo.
• Lanciate start-programmi-accessori-blocco note.

• Scrivete ciò che vedete in basso


www.ipbz.it a cura del settore Nuove tecnologie e informazione, Luisanna Fiorini luisanna.fiorini@scuola.alto-adige.it

• Ora salvate il vostro documento selezionando la


destinazione, ovvero la cartella in cui volete
salvare. Se non avete una cartella specifica
createla come di seguito e chiamatela provahtm
www.ipbz.it a cura del settore Nuove tecnologie e informazione, Luisanna Fiorini luisanna.fiorini@scuola.alto-adige.it

• A questo punto salvate il file. Oltre al Nome File


inserite anche la specifica .htm e salvate.
www.ipbz.it a cura del settore Nuove tecnologie e informazione, Luisanna Fiorini luisanna.fiorini@scuola.alto-adige.it

• Andate a recuperare la cartella provahtm e


apritela. Troverete un file che ha come icona il
vostro browser. Da questo momento utilizzeremo
Explorer che trovate nel cd del corso.
www.ipbz.it a cura del settore Nuove tecnologie e informazione, Luisanna Fiorini luisanna.fiorini@scuola.alto-adige.it

• Con un doppio click lo aprirete e visualizzerete una


pagina (vuota) in html con il title sulla barra del
browser: “Il mio primo documento html”, proprio
come avevate scritto.
www.ipbz.it a cura del settore Nuove tecnologie e informazione, Luisanna Fiorini luisanna.fiorini@scuola.alto-adige.it

• Inutilmente cercherete di modificare la pagina in


questa visualizzazione.Dovete invece aprire dal
menù in alto Visualizza e poi html (stiamo
utilizzando Explorer).
www.ipbz.it a cura del settore Nuove tecnologie e informazione, Luisanna Fiorini luisanna.fiorini@scuola.alto-adige.it

• Si aprirà il Blocco note con cui abbiamo creato il


file e che ci consentirà nuove modifiche.
www.ipbz.it a cura del settore Nuove tecnologie e informazione, Luisanna Fiorini luisanna.fiorini@scuola.alto-adige.it

• Inseriamo ora qualche tag principale e vediamo


che effetto fa. Per prima cosa scrivete la frase
“Inseriamo il testo qui dopo il <body>” scrivendola
proprio dopo … il <body>, salvate e chiudete.
www.ipbz.it a cura del settore Nuove tecnologie e informazione, Luisanna Fiorini luisanna.fiorini@scuola.alto-adige.it

• Non accade nulla nella pagina html? Dovete


aggiornare la pagina. Dal menù in alto Aggiorna.

• Come mai la parola <body> non si visualizza?


Perché essendo contenuta tra <e> viene
interpretata come un comando.
www.ipbz.it a cura del settore Nuove tecnologie e informazione, Luisanna Fiorini luisanna.fiorini@scuola.alto-adige.it

• Come precedentemente riaprite l’html dal menù


Visualizza.
• Cancellate i simboli <> intorno alla parola body.
• Scrivete come di seguito e salvate, chiudete e
aggiornate la pagina.
www.ipbz.it a cura del settore Nuove tecnologie e informazione, Luisanna Fiorini luisanna.fiorini@scuola.alto-adige.it

• Il comando <b></b>indica il grassetto e si


visualizza così.
www.ipbz.it a cura del settore Nuove tecnologie e informazione, Luisanna Fiorini luisanna.fiorini@scuola.alto-adige.it

• Ora divertiamoci. Inseriamo insieme una serie di


tags e vediamo cosa succede. Riaprite l’html dal
menù Visualizza(ormai avrete facilità) e scrivete
ciò che segue (sempre dopo il <body>!!), salvate,
chiudete e aggiornate la pagina del browser.
www.ipbz.it a cura del settore Nuove tecnologie e informazione, Luisanna Fiorini luisanna.fiorini@scuola.alto-adige.it

• Abbiamo inserito due tags importanti:


2. <bgcolor="#000000“> nel body cambia il colore
dello sfondo (nero)
3. <font color="#FFFFFF"></font> cambia il colore
del testo (bianco)
www.ipbz.it a cura del settore Nuove tecnologie e informazione, Luisanna Fiorini luisanna.fiorini@scuola.alto-adige.it

• Cosa indicano "#000000“ e "#FFFFFF“ ? Sono le


cifre di un codice esadecimale con cui il browser
interpreta i colori. I numeri esadecimali si basano
su un sistema di numerazione in base 16 che
comprende le cifre da 0 a 9 e da A a F.. Nessuna
paura: non dovete certo ricordarli a memoria!
• Ogni editor html vi da la possibilità di sceglierli e li
traduce lui, per fortuna! Esistono anche Utility che
permettono di miscelare i tre colori fondamentali
RGB e li traducono in codice.
www.ipbz.it a cura del settore Nuove tecnologie e informazione, Luisanna Fiorini luisanna.fiorini@scuola.alto-adige.it

• Andiamo avanti. Riaprite l’ormai noto html da


Visualizza del browser. Inserite altri tags come di
seguito, salvate, chiudete, aggiornate.
www.ipbz.it a cura del settore Nuove tecnologie e informazione, Luisanna Fiorini luisanna.fiorini@scuola.alto-adige.it

• Ecco ciò che accade.


www.ipbz.it a cura del settore Nuove tecnologie e informazione, Luisanna Fiorini luisanna.fiorini@scuola.alto-adige.it

• Questo perché abbiamo inserito i seguenti tags:


2. font face="verdana“ (per il carattere)
3. font size="5“ (per il corpo del testo)
4. <center></center> (per centrare il testo)
5. <p> (paragrafo, a capo)
• Riassumiamo altri principali tags:
7. <TABLE> </TABLE> Istruzione di inizio e fine di
un tabella con bordo invisibile
8. <TABLE BORDER> </TABLE> Istruzione di
inizio e fine di tabella con bordo visibile
9. <tr> </tr> Inizio e fine di una riga
10.<td> </td> Inizio e fine di una cella
www.ipbz.it a cura del settore Nuove tecnologie e informazione, Luisanna Fiorini luisanna.fiorini@scuola.alto-adige.it

• E ancora tags:
2. <a href=“indirizzo pagina o file >Indirizzo
visualizzato</A> .
Istruzione completa in grado di funzionare per i
link. Appare la fatidica manina e collega al file,
all’oggetto o all’url.
3. <HR> Istruzione non accoppiata che crea una
barra orizzontale di separazione.
4. <IMG SRC=“immagine.jpg”> Istruzione
singola per inserire una immagine. Su questo tag
apriamo un approfondimento
www.ipbz.it a cura del settore Nuove tecnologie e informazione, Luisanna Fiorini luisanna.fiorini@scuola.alto-adige.it

• Se noi inseriamo una immagine in un documento


Word, o Power Point, l’immagine diventa parte
integrante del documento e se spostiamo il
documento l’immagine rimane in esso e si sposta
contestualmente.
• Nell’html ciò non avviene. Ricordate? I codici
servono a dare ordini alla pagina che si crea in
base ad essi. Ciò significa che se inserisco un tag
immagine <IMG SRC=“immagini/prova.jpg”>
lui va a cercare l’immagine prova.jpg nella cartella
immagini. La trova e la inserisce. Se
successivamente l’immagine viene spostata in
un’altra cartella o il file html viene spostato… ecco
ciò che accadrà…
www.ipbz.it a cura del settore Nuove tecnologie e informazione, Luisanna Fiorini luisanna.fiorini@scuola.alto-adige.it
www.ipbz.it a cura del settore Nuove tecnologie e informazione, Luisanna Fiorini luisanna.fiorini@scuola.alto-adige.it

• Ecco perché le immagini, come altri oggetti che


volete inserire nel documento html, vanno salvati
in sottocartelle e non spostati successivamente se
non all’interno e contestualmente alla cartella
principale dove saranno anche i file html.
www.ipbz.it a cura del settore Nuove tecnologie e informazione, Luisanna Fiorini luisanna.fiorini@scuola.alto-adige.it

• Bene. Ora che siete seriamente preoccupati


(forse) sulla difficoltà dell’html, possiamo passare
all’utilizzo di software che producono in
automatico i tags rispondendo a comandi che
siamo abituati a dare in molti programmi che
generano presentazioni e testi.
• L’editor html che utilizzeremo genererà quindi
tutto automaticamente in modalità WYSIWYG
(l'acronimo che sta per l'inglese What You See Is
What You Get, quello che vedi è quello che ottieni)
• Ma sarà sempre importante, saper aprire l’html e
controllare l’esattezza dei tags: è una abitudine
salutare.