HTML

1. CORSO BASE
•Il Browser •Ipertesti
•Immagini
•LO Standard HTML
•Suoni
•I TAG •Tabelle
•Form
•Annidamento e Identizione
•I commenti
•Case unsensitive
•Struttura pagina-DOCTYPE
•HEAD
•BODY
BY, NC, SA Maria A.R. Consoli
Attribuzione - Non commerciale - Condividi allo
stesso modo : Commons Deed | Legal Code)
Corso HTML

2. L'HTML è il linguaggio con cui potete
indicare come i vari elementi vanno disposti
in una pagina Web.
Un documento html non è nient'altro infatti
che un file di testo con delle indicazioni sul
colore delle scritte, sulla posizione delle
immagini all'interno della pagina, su come
far scorrere il testo, e altre cose di questo
genere.
Maria A.R. Consoli 2
Corso HTML

3. Il Browser è il programma che usate quando navigate nel Web.
scarica i vari files che si trovano su un computer remoto (il server)
legge i documenti scritti in html
visualizza la pagina
Internet Explorer
Netscape Navigator
Mozilla (open source)
Opera
Maria A.R. Consoli 3
Corso HTML

4. CACHE: cartella in cui vengono memorizzati i files scaricati dal web .
Internet Explorer visualizza così il percorso della cache
Strumenti > Opzioni Internet > Generale > Impostazioni > Visualizza
file
rendering della pagina: visualizzazione di un file html da parte del
browser.
Motore di rendering: sezione del browser che si occupa di mostrare sul
video la pagina.
HTML:acronimo di Hypertext Markup Language ("Linguaggio di
contrassegno per gli Ipertesti")
W3C: (World Wide Web Consortium (http://www.w3.org/)) organismo che
si occupa di standardizzare la sintassi del linguaggio HTML
Maria A.R. Consoli 4
Corso HTML

5. Il W3C ha rilasciato diverse versioni di questo linguaggio (HTML 2.0, HTML
3.2, HTML 4.0); l'HTML si è evoluto in XHTML.
l'HTML verrà utilizzato ancora per diversi anni come linguaggio principe
delle pagine web.
Alcuni concetti dell'XHTML richiedono già una certa comprensione dei
problemi che si acquisisce solo con l'esperienza.
L'HTML è più immediato e consente di incominciare subito a produrre
documenti web;
Chi conosce l'XHTML non può non conoscere l'HTML. La conoscenza
dell'HTML è infatti il prerequisito essenziale di ogni webmaster.
Le differenze tra i due linguaggi non sono così marcate e passare dall'uno
all'altro non dovrebbe richiedere molta fatica.
Maria A.R. Consoli 5
Corso HTML

6. uno o più browser
un editor testuale per scrivere il codice HTML
CREARE IL FILE MODIFICARE IL FILE
1. Aprite in editor testuale, per 1. utilizzate i comandi Visualizza
esempio “Blocco note”; > HTML,
2. Scrivere il codice di una pagina; 2. cambiate il codice,
3. Salvare con l‟estensione "html", 3. salvate,
ad esempio miaPagina.html; 4. utilizzate il pulsante "aggiorna"
4. Chiudete l‟editor del browser
5. Troverete il file con l‟icona del 5. visualizzare le modifiche.
browser e si aprirà in
automatico cliccandoci su due
volte.
Maria A.R. Consoli 6
Corso HTML

7. Questo avviene perché l'estensione non è .html, ma .html.txt
Per visualizzare l'estensione del file in sistemi Windows andate
in una cartella e quindi:
Strumenti > Opzioni cartella > Visualizzazione
E poi togliere la spunta da:
"Nascondi le estensioni dei file per i tipi di file conosciuti"
infine premere il pulsante:
"Come cartella corrente”
Maria A.R.Consoli 7
Corso HTML

8. Questo succede perché la pagina visualizzata è sempre quella vecchia
memorizzata nella cache.
Ricordatevi di impostare la cache del vostro browser in modo che il file
html venga ricaricato ogni volta che richiamate la pagina.
In Internet Explorer:
Strumenti > Opzioni Internet > Generale > Impostazioni >
Ricerca versioni più recenti delle pagine memorizzate: all'apertura
della pagina
Maria A.R.Consoli 8
Corso HTML

9. Hanno il compito di visualizzare le diverse parti di una pagina web.
Hanno differenti nomi a seconda della loro funzione.
I tag vanno inseriti tra parentesi uncinate (<TAG>)
la chiusura del tag viene indicata con una "/" (Quindi: </TAG>).
Il contenuto va inserito tra l'apertura e la chiusura del tag medesimo,
secondo questa forma:
<TAG attributi> testo </TAG>
la struttura di un attributo è: attributo="valore"
Quindi in definita la struttura di un tag sarà:
<TAG attributo1="valore1" attributo2="valore2"> testo </TAG>
Maria A.R.Consoli 9
Corso HTML

10. Alcuni particolari tag non hanno contenuto - perché ad esempio
indicano la posizione di alcuni elementi (come il tag delle immagini) -,
conseguentemente questi tag non hanno neanche chiusura.
La loro forma sarà dunque:
<TAG attributi>
Ecco un esempio di immagine:
<IMG widht="20" height="20" src="miaImmagine.gif" alt="alt">
come si vede il tag non viene chiuso. Questo tipo di tag viene detto
"empty", cioè "vuoto".
Maria A.R.Consoli 10
Corso HTML

11. L'annidamento ci permette di attribuire
formattazioni successive al testo che
stiamo inserendo. esempio:
esempio: <P align="right">
<TAG1 attributi> testo 1
contenuto 1 <P align="left">
<TAG2> testo 2
contenuto 2 </P>
</TAG2> </P>
</TAG1>
Apertura e chiusura del tag si trovano allo
stesso livello, mentre il contenuto viene
spostato verso destra di un tab:
Questa procedura si chiama indentazione,
e grazie ad essa il codice HTML risulta più
leggibile
Maria A.R. Consoli 11
Corso HTML

12. indicazioni significative per il
webmaster, ma invisibili al
browser. esempio:
<!-- menu di sinistra -->
Inserendo i commenti in punti
specifici del documento ci <!-- barra in alto -->
permette di mantenere
l'orientamento anche in file molto <!-- eccetera -->
complessi e lunghi.
Sintassi
<!-- questo è un commento -->
Maria A.R. Consoli 12
Corso HTML

13. L'HTML è "case unsensitive”
Questo significa che è del tutto indifferente se scrivere i tag in maiuscolo o in
minuscolo.
<P ALIGN="RIGHT"> e <p align="right">
vengono letti allo stesso modo dal browser.
Per aumentare la leggibilità del codice è buona norma scrivere in maiuscolo il
nome del tag (es: <P>) e in minuscolo gli attributi (es: align="right").
Quindi:
<P align="right">
L'XHTML è "case sensitive"
per abituarsi già al linguaggio che verrà è consigliabile scrivere tutto in
minuscolo.
Maiuscolo e minuscolo, in ogni caso non costituiscono errore.
Maria A.R. Consoli 13
Corso HTML

14. Una apagina HTML è esempio:
suddivisa in tre sezioni:
SPECIFICHE
<html> <!– Inizio codice -->
Specifiche <head> <!-- testata -->
Inizio codice Qui il nostro contenuto
Testata </head> <!– Fine testata-->
Fine testata <body> <!-- Corpo -->
Corpo Qui il nostro contenuto
Fine corpo </body> <!– Fine corpo -->
Fine codice </html> <!– Fine codice -->
Maria A.R. Consoli 14
Corso HTML

15. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//IT">
specifica il tipo di documento. E‟ la prima riga da inserire.
HTML: il tipo di linguaggio utilizzato è l'HTML
PUBLIC: il documento è pubblico
W3C: il documento fa riferimento alle specifiche rilasciate dal W3C
DTD HTML 4.01 Transitional: il documento fa riferimento a una DTD ("Document
Type Definition" cioè "Definizione del tipo di documento");
la versione di HTML supportata è la 4.01 "transitional"
IT: la lingua con cui è scritta la DTD è l„italiano (EN: la lingua con cui è scritta la
DTD è l'inglese)
Maria A.R. Consoli 15
Corso HTML

16. Contiene informazioni non immediatamente percepibili, ma che riguardano il modo in cui il
documento deve essere letto e interpretato. Questo è il luogo dove scrivere
i meta-tag (alcuni sono ad esclusivo beneficio dei motori di ricerca),
 script JavaScript o VbScript,
 fogli di stile
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
indica al browser che deve caricare il set di caratteri occidentale (e non - ad esempio - il set di
caratteri giapponese).
<title>Nome del sito</title>
Il title è il titolo della pagina e compare in alto sulla barra del browser.
<base href=“indirizzo url ">
Il percorso assoluto a cui fare riferimento per trovare tutti i files a cui si fa riferimento.
<meta name="keywords" content=“parole da inserire nei motori di ricerca">
indica alcuni contenuti relativi al sito stesso. Le keywords compaiono separate da virgola, da
punto e virgola, oppure senza alcun segno di interpunzione.
Esempio
Maria A.R. Consoli 16
Corso HTML

17. Qui è racchiuso il contenuto vero e proprio del documento
Il contenuto della pagina verrà formattato a seconda dei tag utilizzati:
Sfondo
Margini
Lingua
Colori del testo e dei link
Titoli
Blocchi di testo
Allineamento
Andare a capo
Stile
Font, Colore, dimensione
Elenchi
Maria A.R. Consoli 17
Corso HTML

18. Imposta lo sfondo con un colore
Sintassi: <body bgcolor=“colore">
Bgcolor =background color #FFA500
Colore= uno dei colori indicati nella #0000FF
tabella
#FFFFFF
NOTA BENE #FFFF00
Il numero di colori che l‟utente ha a #808080
disposizione dipende dalla scheda
#A52A2A
video. Poiché non c‟è modo di
sapere quale scheda video abbia #000000
l‟utente, i webdesigner fanno
#FF0000
riferimento alla "palette sicura" dei
256 colori (palette web safe). #008000
#EE82EE
Esempio1 Maria A.R. Consoli 18
Corso HTML

19. Imposta lo sfondo con una immagine
Sintassi: <body background=“IMMAGINE">
ESEMPIO
Se l‟immagine “imgsfondo.gif” si trova nella stessa cartella della nostra pagina
<body background="imgSfondo.gif">
Se la sua posizione è diversa indicare il percorso assoluto
<body background=“www.itcdefelice.it/immages/imgSfondo.gif">
Se nella <HEAD> abbiamo dichiarato il tag “base”
<body background=“immages/imgSfondo.gif">
NOTA BENE
L‟immagine di sfondo verrà ripetuta in orizzontale e in verticale.
E‟ possibile abbinare i due tag:
<body bgcolor="#0000ff" background="imgSfondo.gif">
Esempio2 Maria A.R. Consoli 19
Corso HTML

20. Imposta i margini
Sintassi: <body rightmargin =“n” leftmargin=“n" topmargin=“n“
downmargin=“n”>
ESEMPIO
<body leftmargin=“2" topmargin=“3“ >
NOTA BENE
Il testo della pagina inizia al confine con il margine superiore, le eventuali immagini di
sfondo inizieranno sempre dal bordo pagina.
Se si utilizza un logo è bene eliminare i margini
<body bgcolor="#0000ff" background="imgSfondo.gif">
Esempio3 Maria A.R. Consoli 20
Corso HTML

21. Imposta la lingua
specifica ai motori di ricerca e al browser dell‟utente quale lingua
stiamo utilizzando
Sintassi: <body lang=“sigla lingua">
ESEMPIO
<body lang="it">
NOTA BENE
Si tratta di un attributo che vi sarà utile soprattutto se vi capiterà di sviluppare
dei siti multilingua
Maria A.R. Consoli 21
Corso HTML

22. Impostare il colore del testo per tutta la pagina
Sintassi: <body text=“colore">
ESEMPIO
<body text="red"> oppure <body text="#ffffff">
NOTA BENE
Usate la tabella vista per il colore dello sfondo
Esempio4 Maria A.R. Consoli 22
Corso HTML

23. Impostare il colore del link per tutta la pagina
Sintassi: <body link=“colore" alink=“colore" vlink=“colore">
link =collegamento a riposo (di default i link sono blu (#0000FF))
alink=collegamento attivo
vlink=collegamento visitato(di default i vlink sono (#800080).
ESEMPIO
<body link="red" alink=“brown" vlink="green">
NOTA BENE
Usate la tabella vista per il colore dello sfondo
Esempio5 Maria A.R. Consoli 23
Corso HTML

24. Elemento di blocco
Sintassi: <hx>titolo </hx>
“h“=heading(titolo)
X=numero da 1 a 6 (grandezze del titolo)
. Si tratta dunque di un elemento di blocco
ESEMPIO
<h3>titolo 3 </h3>
NOTA BENE
Il tag <hx> risulta in grassetto e lascia una riga vuota prima e dopo di sé
Le dimensioni del carattere dipendono dall‟impostazione utente
Esempio6 Maria A.R. Consoli 24
Corso HTML

25. Elemento di blocco
Sintassi: <p>paragrafo </p>
ESEMPIO
<p>esempio di paragrafo </p>
NOTA BENE
Il tag <P> lascia una riga vuota prima della sua apertura e dopo la sua
chiusura.
Esempio7
Maria A.R. Consoli 25
Corso HTML

26. Elemento di blocco
Sintassi: <div>testo</div
ESEMPIO
<div>Blocco di testo</div>
NOTA BENE
Il blocco di testo va a capo, ma - a differenza del paragrafo – non lascia spazi
prima e dopo la sua apertura.
Esempio8
Maria A.R. Consoli 26
Corso HTML

27. Elemento di blocco
Sintassi: <span>contenitore</span>
ESEMPIO
<span>ESEMPIO DI SPAN</span>
NOTA BENE
non va a capo
Esempio9
Maria A.R. Consoli 27
Corso HTML

28. Elemento di blocco
Sintassi: <p align=“orientamento">testo</p>
“Orientamento” =“left” oppure “right” oppure “justify”
ESEMPIO
<p align="left">testo</p><p align="right">testo</p><p
lign="justify">testo</p>
NOTA BENE
L‟attributo "align" è disapprovato dal W3C
Esempio10
Maria A.R. Consoli 28
Corso HTML

29. Sintassi: <br>(a capo) oppure <hr attributi> (a capo con una linea)
attributi:noshade sfuma la linea
"size" l‟altezza in pixel,
"width" larghezza in pixel
ESEMPIO
<br>
<hr noshade size="5" width="50%" >
Esempio11
Maria A.R. Consoli 29
Corso HTML

30. STILI FISICI
definiscono graficamente lo stile del carattere
<b>testo </b> grassetto RENDERING
testo
<i>testo</i> corsivo testo
<u>testo</u> sottolineato testo
<strike>testo</strike> tagliato testo
^testo apice
testo
_testo pedice Testo
Esempio12
Maria A.R. Consoli 30
Corso HTML

31. STILI LOGICI
forniscono informazioni sul ruolo svolto dal contenuto
SENZA RENDERING
<abbr>abbreviazione</<abbr> abbreviazione
<acronym>acronimo</acronym> acronimo
<code>codice</code> linguaggio di progr.
<q>citazione all‟interno della frase</q> breve citazione
Maria A.R. Consoli 31
Corso HTML

32. STILI LOGICI
forniscono informazioni sul ruolo svolto dal contenuto
CON RENDERING
<address>indirizzo</address>
<blockquote>blocco di citazione</blockquote> citazione: rientrato a destra
<cite>citazione</cite> citazione: corsivo
<dfn>definizione</dfn> definizione: corsivo
<em>enfasi</em> enfasi: corsivo
<kbd>keyboard</kbd> digitazione: spaziatura fissa
<samp>esempio</samp> esempio: spaziatura fissa
<strong>rafforzamento</strong> con forza: grassetto
<var>variabile</var> una variabile: corsivo
Esempio13
Maria A.R. Consoli 32
Corso HTML

33. Sintassi: <font face=“tipo di font o famiglia di font">testo</font>
<font face="Arial">testo in Arial</font> testo in Arial
<font face="Verdana">testo in Verdana</font> testo in Verdana
NOTA BENE
IL TAG <font> è disapprovato dal W3C. Il "font" di default è il "Times".
Non è possibile far sì che l‟utente visualizzi un testo in un carattere fantasioso
scelto da noi. Allo stato attuale dell‟arte l‟utente che naviga in internet può
visualizzare solo i caratteri che sono installati nel suo S.O.: in Windows si tratta
dei caratteri presenti in: Pannello di controllo > Tipi di caratteri
Maria A.R. Consoli 33
Corso HTML

34. Le famiglie di font
Maria A.R. Consoli 34
Corso HTML

35. Sintassi: <font color=“colore">testo </font>
ESEMPIO
<font color=“blu">testo blu </font>
NOTA BENE
Usate la tabella vista per il colore dello sfondo.
Questo tag viene utilizzato se si intende usare un colore diverso da quello
stabilito con il tag <text>.
Di solito si utilizza in abbinamento col tag <font>
Esempio: <font face="Verdana, Arial, Helvetica, sans-serif" color="blue">
Maria A.R. Consoli 35
Corso HTML

36. Sintassi: <font size=“n">testo di grandezza n</font>
n= misura del carattere da 1 a 7 oppure + o – n (relativamente a 3)
ESEMPIO
<font size="5">testo di grandezza 5</font>
<font size=“+2">testo di grandezza 5</font>
NOTA BENE
La dimensione del carattere di default nel browser Internet explorer è 3
La dimensione del carattere dipende dalle impostazioni del browser dell‟utente .
Di solito si utilizza in abbinamento col tag <font>
Es.: <font face="Verdana, Arial, Helvetica, sans-serif" color="blue“ size 5>
Esempio14
Maria A.R. Consoli 36
Corso HTML

37. •Elenchi ordinati
•Elenchi non ordinati
•Elenchi di definizioni
Sintassi
<elenco>
<elemento>nome del primo elemento
<elemento>nome del secondo elemento
……….
……
</elenco>
Maria A.R. Consoli 37
Corso HTML

38. Elenchi ordinati
Sintassi Esempio
<ol> <ol>
<li>nome del primo elemento <li> primo elemento
<li>nome del secondo <li>secondo elemento
elemento <li>terzo elemento
……….
</ol>
……
Testo fuori lista
</ol>
ol= order list
li=list item
Maria A.R. Consoli 38
Corso HTML

39. Elenchi ordinati
Sintassi Esempio
<ol type=“attributo”> <ol type=“a”>
<li>nome del primo elemento <li> primo elemento
<li>nome del secondo <li>secondo elemento
</ol> <li>terzo elemento
ol= order list </ol>
li=list item Testo fuori lista
Attributo:1=numeri arabi;
a=alfabeto minuscolo;
A=alfabeto maiuscolo; Esempio15
i=romani minuscoli;
I=romani maiuscoli
Maria A.R. Consoli 39
Corso HTML

40. Elenchi non ordinati
Sintassi Esempio
<ul>type=“attributo”> <ul type=“circle”>
<li>nome del primo elemento <li> primo elemento
<li>nome del secondo <li>secondo elemento
</ul> <li>terzo elemento
ul= unorder list </ul>
li=list item Testo fuori lista
Attributo:disc=pallino pieno;
circle=pallino vuoto;
square=quadrato pieno; Esempio16
Maria A.R. Consoli 40
Corso HTML

41. Elenchi di definizioni
Sintassi Esempio
<dl>> <dl>
<attr>nome del primo elemento <dd>nome del primo elemento
<attr>nome del secondo <dd>nome del secondo
</dl>
</dl>
dl= definition list
Attributo: dt=senza rientro;
dd= con rientro;
Esempio17
Maria A.R. Consoli 41
Corso HTML

42. I link sono "il ponte" che consente di passare da un testo all‟altro
Sono formati da:
•la risorsa verso cui il collegamento punta
•contenuto che "nasconde“ il collegamento (non importa se si tratta di
testo, di immagine o di files)
Sintassi: <a href=“risorsa">contenuto</a>
ESEMPIO
<a href=“www.cataniaedintorni.it">notizie su Catania e non solo</a>
Nota bene
Per motivi di sicurezza non è possibile eseguire un file ".exe" direttamente dal
web; l‟utente dovrà sempre prima scaricarlo sul proprio PC.
Esempio18
Maria A.R. Consoli 42
Corso HTML

43. Nota bene
E‟ opportuno dividere il sito in varie sezioni, in modo da avere tutti i documenti
dello stesso tipo all‟interno di un contesto omogeneo.
Per creare collegamenti verso i documenti più reconditi, destreggiandoci tra le
strutture più ramificateesistono due tecniche:
indicare un percorso assoluto
Viene utilizzato per far riferimento ad un percorso certo(se si è già in possesso
di un proprio sito)
http://www.itcdefelice.it/corsi/programmatori/materie.html
indicare un percorso relativo
Viene utilizzato per far riferimento ad un percorso ancora da definire(se non si è
già in possesso di un proprio sito)
Esempio percorso relativo
Maria A.R. Consoli 43
Corso HTML

44. o SEGNALIBRI
Servono per muoversi rapidamente in una pagina che non entra in una
schermata.
Ad una àncora viene assegnato un nome con:
<a name=“nome ancora"> testo </a>
Alla hotword si definisce il link con:
<a href="#nome dell’ancora"> testo </a>
Per creare un indice interno alla pagina si procede dunque in due fasi distinte:
creazione dell‟ancora a cui puntare (<a name="mioNome">)
creazione del collegamento all‟ancora appena creata e riferimento
attraverso il cancelletto (<a href="#mioNome">)
È bene non confondere le due fasi.
Esempio19
Maria A.R. Consoli 44
Corso HTML

45. L‟attributo title è molto importante, e serve per descrivere l‟elemento a cui
fa riferimento il link.
Sintassi:
<a title=“commento" href=URL" > testo</a>
Nota bene
L‟attributo title è molto importante per descrivere l‟elemento a cui fa riferimento
il link ed è anche utilissimo per migliorare la propria presenza nei motori di
ricerca, che ne vanno a leggere il contenuto.
Esempio 20
Maria A.R. Consoli 45
Corso HTML

46. ESEMPIO:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>ISTITUTO TECNICO COMMERCIALE DE FELICE CATANIA</title>
<base href="http://www.itcdefelice.it/miaCartella">
<meta name="keywords" content=“scuola, istituto, tecnico, superiore,
commerciale, de felice, catania">
</head>
Maria A.R. Consoli 46
Corso HTML

47. •Per far riferimento a un file che si trovi all‟interno della stessa
directory basta linkare il nome del file
<a href="paginaDaLinkare.html">pagina</a>
•Per far riferimento a un file contenuto in una cartella di livello
inferiore alla posizione corrente, nominare la cartella seguita
dallo "slash", e poi il nome del file.
<a href="prima/interna/interna.html">pagina interna</a>
•Per tornare su di un livello, è sufficiente utilizzare la
notazione
<a href="../../index.html">pagina interna</a>
Maria A.R. Consoli 47
Corso HTML