Guida HTML

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

• 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
• L’html può essere generato con un semplice editor

di testo.
• Lanciate start-programmi-accessori-blocco note.
• Scrivete ciò che vedete in basso

• 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
• A questo punto salvate il file. Oltre al Nome File

inserite anche la specifica .htm e salvate.
• 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.
• 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.
• Inutilmente cercherete di modificare la pagina in

questa visualizzazione.Dovete invece aprire dal
menù in alto Visualizza e poi html (stiamo
utilizzando Explorer).
• Si aprirà il Blocco note con cui abbiamo creato il

file e che ci consentirà nuove modifiche.
• 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.
• 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.
• 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.
• Il comando <b></b>indica il grassetto e si

visualizza così.
• 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.
• 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)
• 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.
• Andiamo avanti. Riaprite l’ormai noto html da

Visualizza del browser. Inserite altri tags come di
seguito, salvate, chiudete, aggiornate.
• Ecco ciò che accade.

• 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
• 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
• 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à…
• 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.
• 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.

Guida HTML

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Guida HTML

Uploaded by

Copyright:

Available Formats

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

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

• Non è un vero e proprio linguaggio di

• Le istruzioni vengono interpretate dai

• Lanciate il vostro Browser. Se usate IE dal

• Leggete la ragnatela di comandi.

• Tutti i comandi HTML sono facilmente

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

• I file html differiscono però dai file di testo

• Il browser con cui l’utente Internet esplora il

• I comandi sono chiamati “tags” e sono

• Generalmente sono costituiti da un’istruzione

• Ci sono però anche istruzioni che non sono

• Il comando iniziale e finale è quello che

• La pagina HTML comincia proprio con il

• All’interno ci sono due sezioni importanti: una

• La pagina è quindi principalmente così

<html> (inizia la pagina)

<head> (la parte delle

<body> (la parte che si

</html> (fine della pagina)

• Nel <head> della pagina si inseriscono alcune

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

• Per cui se scriverò

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

• Scrivete ciò che vedete in basso

• Ora salvate il vostro documento selezionando la

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

• Andate a recuperare la cartella provahtm e

• Con un doppio click lo aprirete e visualizzerete una

• Inutilmente cercherete di modificare la pagina in

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

• Inseriamo ora qualche tag principale e vediamo

• Non accade nulla nella pagina html? Dovete

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

• Come precedentemente riaprite l’html dal menù

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

• Ora divertiamoci. Inseriamo insieme una serie di

• Abbiamo inserito due tags importanti:

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

• Andiamo avanti. Riaprite l’ormai noto html da

• Ecco ciò che accade.

• Questo perché abbiamo inserito i seguenti tags:

• Se noi inseriamo una immagine in un documento

• Ecco perché le immagini, come altri oggetti che

• Bene. Ora che siete seriamente preoccupati

You might also like