Scribd
Carica
150 visualizzazioni57 pagine

HTML

Il documento descrive le basi di HTML, introducendo la storia e lo scopo di HTML, spiegando cos'è HTML e come funziona, e fornendo esempi di tag HTML comuni come <head>, <body>, <p>, <h1-6> e <span>.

Caricato da

Giuseppe Panariello
Copyright
© © All Rights Reserved
Per noi i diritti sui contenuti sono una cosa seria. Se sospetti che questo contenuto sia tuo, rivendicalo qui.
Formati disponibili
Scarica in formato PDF, TXT o leggi online su Scribd
150 visualizzazioni57 pagine

HTML

Il documento descrive le basi di HTML, introducendo la storia e lo scopo di HTML, spiegando cos'è HTML e come funziona, e fornendo esempi di tag HTML comuni come <head>, <body>, <p>, <h1-6> e <span>.

Caricato da

Giuseppe Panariello
Copyright
© © All Rights Reserved
Per noi i diritti sui contenuti sono una cosa seria. Se sospetti che questo contenuto sia tuo, rivendicalo qui.
Formati disponibili
Scarica in formato PDF, TXT o leggi online su Scribd
Sei sulla pagina 1/ 57

HTML

HTML- prof.F.Velotti
Un pò di storia...
1992:HTML (Hyper Text Markup Language) è un linguaggio per la
definizione di ipertesti. Definito (insieme ad HTTP) da Tim
Berners-Lee del CERN di Ginevra.
Scopo: permettere lo scambio dei dati sperimentali tra i
fisici
• 1993: diffusione di Mosaic (web browser sviluppato da
NCSA)
• 1995: fondazione del World Wide Web Consortium (W3C)
• 1999: standardizzazione di HTML 4.0
• 2014: standardizzazione di HTML 5 (versione attuale)

HTML- prof.F.Velotti
HTML (HyperText Markup Language)

E'un linguaggio di contrassegno (o 'di marcatura'), che


permette di indicare come disporre gli elementi
all'interno di una pagina:
– HyperText = Iperdocumento testuale, cioè un documento speciale
che contiene collegamenti (link) con altri elementi interni o esterni
– Markup Language = il testo viene “marcato” o “segnato” con dei
simboli (tag) per indicare determinate caratteristiche dei testi

Oggi è standardizzato dal World Wide Web Consortium (W3C)

NON è un linguaggio di programmazione!


HTML- prof.F.Velotti
HTML e Browser
Ciascun browser interpreta i codici del
sito web in maniera leggermente
differente.

Ciò significa che il sito può apparire


diverso ai visitatori a seconda del
browser utilizzato.

HTML- prof.F.Velotti
Documento HTML

Suffisso .htm (o .html)


File di testo

 si può creare con un qualunque editor di testo

 con un word processor che consenta


salvataggio in formato testo

 con tool per la creazione di pagine HTML


come Composer, Dreamweaver, Visual Studio
Code ecc.

HTML- prof.F.Velotti
Editor HTML

Sono software (di varia complessità) specializzati


nella creazione di pagine HTML

EDITOR TESTUALI EDITOR WYSIWYG


(What You See Is What You Get)

HTML- prof.F.Velotti
TAG
Un tag identifica quindi un comando per il Browser

Hanno una sintassi del tipo


<nome_tag>

Tranne casi particolari esiste, per ogni tag di


apertura, un tag di chiusura
<nome_tag> tag di apertura
</nome_tag> tag di chiusura

Tutto ciò che è compreso tra i tag di apertura e


chiusura viene formattato dal browser secondo
le caratteristiche
HTML-del tag
prof.F.Velotti
TAG: ATTRIBUTI
Oltre al nome, un tag può essere caratterizzato da
attributi secondo la sintassi

<nome_tag nome_attr=valore_attr>

• Gli attributi vanno indicati solo nei tag di apertura


• Specificano meglio il comando corrispondente al tag in
cui sono inseriti definendo

HTML- prof.F.Velotti
TAG:esempi
<TAG> tag vuoti (empty)
Esempio: <BR>

<TAG>contenuto</TAG>
Esempio: <B><I>Questo testo è in grassetto e italico</I></B>

<TAG attr1="val1" attr2="val2"> contenuto</TAG>


Esempio: <P align=“CENTER”>Testo centrato</P>

HTML- prof.F.Velotti
Qualche nota
- l'HTML perdona troppi errori
- gli spazi bianchi non hanno significato
- non è “case sensitive”, significa che è del tutto
indifferente se scrivere i tag in maiuscolo o in
minuscolo.

HTML- prof.F.Velotti
Struttura di una pagina HTML
<!DOCTYPE html > Intestazione (facoltativa)

HTML- prof.F.Velotti
Il primo file html
<HTML>
<HEAD>
<TITLE>Prima</TITLE>
</HEAD>
<BODY>
Hello world
</BODY>
</HTML

HTML- prof.F.Velotti
<!DOCTYPE>
Secondo il W3C (consorzio internazionale che si occupa di
armonizzare l'utilizzo dell'HTML) deve essere il primo
elemento ad aprire il documento (va posto prima di <HTML>).

Le informazioni fornite da DOCTYPE riguardano il tipo di


documento visualizzato ed è necessaria alla comunicazione tra
browser e server.

L'uso di DOCTYPE non è obbligatorio e può essere omesso.


Il suo utilizzo aiuta il server Web ad interpretare
correttamente il documento, ma la sua assenza non condiziona
la corretta visualizzazione.

HTML- prof.F.Velotti
<!DOCTYPE>
All'interno di una pagina basata sul markup
HTML 5 sarà sufficiente inserire:

<!DOCTYPE html>

HTML- prof.F.Velotti
<HTML>…..</HTML>
Tutti gli elementi ed il contenuto di un documento HTML
sono compresi all'interno dei marcatori incaricati di
aprire e chiudere il file.
<HTML> …</HTML>

Sono tag che vanno inseriti obbligatoriamente

HTML- prof.F.Velotti
<HEAD>...</HEAD>
L'HEAD (intestazione) contiene le informazioni
necessarie al browser per una corretta interpretazione
del documento, ma che non sono visualizzate all'interno
dello stesso.
Tra i tag che permettono la definizione dell’intestazione e
che quindi caratterizzano una pagina si hanno:
<TITLE>
<META>
<SCRIPT>

HTML- prof.F.Velotti
<HEAD>...</HEAD>
metadata per convogliare informazioni utili ad applicazioni
esterne (es. motori di ricerca) o al browser

collegamenti verso file di servizio esterni (CSS, script,... )


• inserimento di script (codice eseguibile) utilizzati dal
documento
• informazioni di stile (CSS locali)

il titolo associato alla pagina e visualizzato nella finestra


principale del browser

HTML- prof.F.Velotti
<HEAD>
<TITLE>.... </TITLE>
L'elemento <TITLE></TITLE> è il più utilizzato all'interno
del tag <HEAD> e fornisce il titolo alla pagina.

Il titolo viene solitamente visualizzato dai browser


nell'intestazione di pagina.

• La sintassi è:
<TITLE>
La mia prima home page di prova
</TITLE>

HTML- prof.F.Velotti
<HEAD>
<META HTTP-EQUIV>

<META HTTP-EQUIV=refresh content=”5″>

Permette il ricaricamento automatico del


documento dopo un certo numero di secondi.

Per caricare una pagina differente da quella che si sta


visualizzando è necessario impostare un URL completo
all’interno di CONTENT:
<META HTTP-EQUIV=refresh CONTENT=”5;
URL=http://www.html.it”>

HTML- prof.F.Velotti
<HEAD>
<SCRIPT>
Al suo interno va inserito il codice eseguito lato client
• In questo modo si crea una pagina dinamica “lato
client”
• Il linguaggio solitamente usato è una versione di
Java detto JavaScript

HTML- prof.F.Velotti
<BODY>…. </BODY>
• Contiene tutti gli elementi della pagina che vengono
visualizzati

• È posto dopo </HEAD> e sempre all’interno dei tag


<HTML></HTML>

• Imposta vari attributi di visualizzazione per il


documento

HTML- prof.F.Velotti
<!DOCTYPE html >
<html>
<head>
<title> il titolo del tuo documento </title>
</head>
<body>
il contenuto del tuo documento
</body>
</html>

HTML- prof.F.Velotti
Tag BODY- bgcolor
Attraverso l’attributo BGCOLOR è possibile definire
il colore di sfondo della pagina

<BODY BGCOLOR=#00FF00>

<BODY BGCOLOR=”green”>

HTML- prof.F.Velotti
Colore
I colori in esadecimale vanno inseriti utilizzando il
segno # seguito da tre coppie di valori esadecimali,
strettamente nella sequenza
Red Green Blu
È comunque possibile, per i colori principali, utilizzare
direttamente il nome dei colori: red, green, blue, white,
black, …

HTML- prof.F.Velotti
Tag BODY- background
Per impostare un’immagine di sfondo è necessario
impostare il relativo attributo del tag body.

● Esempio

<body background=“imgSfondo.gif">

L’immagine viene ripetuta in orizzontale e verticale

HTML- prof.F.Velotti
BODY- Text

● Se non impostate nessun colore per il testo allora il


testo di una pagina è nero.

● E’ possibile assegnare un colore per il testo di tutta


la pagina utilizzando l’attributo text del tag body:
<body text="red">

HTML- prof.F.Velotti
Titoli - <Hn> </Hn>
Le pagine Web dovrebbero essere interrotte
da opportuni titoli che ripartiscono il flusso
dei testi in sezioni più facili da gestire.
<Hn>, dove n è un intero tra 1 e 6

Esempio:
<H1>Primi passi in HTML (es.H1)</H1>
<H2>Utilizzo dei tag Hn</H2>
<H3>Esempio H3 </H3>
HTML- prof.F.Velotti
Titoli - <Hn> </Hn>
Esempio:
<H1>Primi passi in HTML (es.H1)</H1>
<H2>Utilizzo dei tag Hn</H2>
<H3>Esempio H3 </H3>

HTML- prof.F.Velotti
Paragrafo - <P> </P>
● Il paragrafo è l’unità di base entro cui suddividere un
testo

● Il tag <P> lascia una riga vuota prima della sua apertura
e dopo la sua chiusura.

HTML- prof.F.Velotti
Blocchi di testo - <DIV> </DIV>
● Il tag <DIV> marca un blocco di testo

● Il blocco di testo va a capo, ma – a differenza


del paragrafo – non lascia spazi prima e dopo la
sua apertura

HTML- prof.F.Velotti
<SPAN>
<SPAN> è un tag contenitore che può essere usato per
racchiudere una porzione di testo in linea ossia senza
un’interruzione di linea né prima né dopo di esso.
<SPAN> fa sì che il testo in esso racchiuso diventi un
elemento del documento, rendendo possibile applicare
a tale testo uno stile.

<h1>My <span style="color:red">Important </span>Heading </h1>

My Important Heading
HTML- prof.F.Velotti
Tag per lo stile
Con "stile di un testo" si intende la variante di
un carattere tipografico.
Attraverso combinazioni dei tag per lo stile è
possibile dare un particolare formato al testo.
Ad esempio:

– <FONT ...> per cambiare il font


– <B> grassetto
– <I> italico
– <U> sottolineato
- <MARK> evidenziato
HTML- prof.F.Velotti
<FONT face=“nome_font” size=“dim”
color=colore>.... </FONT>

HTML permette di scegliere:


- il colore (attributo COLOR),
- le dimensioni (attributo SIZE)
- il tipo di carattere (attributo FACE)
del testo racchiuso dal tag contenitore <FONT>

Esempi di utilizzo:
<FONT face="Arial" size=”4” color=”red”>testo
in Arial </FONT>

HTML- prof.F.Velotti
FONT- Esempio
Impostando l’attributo color del tag
contenitore <FONT> si può modificare il
colore dei caratteri

HTML- prof.F.Velotti
Tag empty (vuoti)
Tag che non prevedono un contenuto e cioè tag che non
delimitano alcuna parte di testo e non hanno ovviamente
bisogno di un tag finale;

- <BR> , vai a capo


- <HR>, traccia una riga
- <IMG> inserisci un’immagine salvata in un file
esterno

HTML- prof.F.Velotti
<IMG>
Sintassi
<IMG src=“nome_file” height=“altezza”
width=“larghezza” alt=“testo alternativo”/>

Ad esempio:
<IMG SRC=“logo.gif” ALT=“Logo” WIDTH=“224”
HEIGHT=“69”>

HTML- prof.F.Velotti
<IMG>
Indicando dimensioni diverse dall’originale è possibile
adattare l’immagine

Il testo alternativo (attributo alt) viene visualizzato


in caso di fallito caricamento dell’immagine o accanto
al mouse durante il passaggio sull’immagine

Sono ammessi gli attributi ALIGN, BORDER

HTML- prof.F.Velotti
Elenchi ordinati <OL>
● Elenco ordinato è una serie progressiva ordinata e
individuata da lettere o numeri
● La lista è definita con il tag contenitore <OL>
(ordered list).
● Gli elementi sono individuati dal tag <LI> (list item)

HTML- prof.F.Velotti
Elenchi ordinati <OL>
l’attributo TYPE specifica il tipo di numerazione da usare nella lista.
I valori dell'attributo TYPE sono:
 “1” La lista utilizza i numeri arabi: 1, 2, 3, 4, …
 “a” La lista utilizza le lettere minuscole: a, b, c, d, …
 “A” La lista utilizza le lettere maiuscole: A, B, C, D, …
 “i” La lista utilizza i numeri romani, con lettere minuscole: i, ii, iii,
iv, …
 “I” La lista utilizza i numeri romani, con lettere maiuscole: I, II, III,
IV, …

HTML- prof.F.Velotti
Elenchi puntati <UL>
<UL> (unordered list)
– produce un elenco (lista) di elementi (parti di testo)
– ogni elemento è evidenziato all’inizio da un simbolo grafico
(di solito cerchietto o quadratino)
<LI> (list item)
– per identificare un elemento della lista
esempio:
<UL>
<LI>Primo elemento </LI>
<LI>Secondo elemento </LI>
<LI>Terzo elemento </LI>
</UL>

HTML- prof.F.Velotti
Elenchi puntati <UL>
L’attributo TYPE di <UL> serve a scegliere tra tre possibili
modi di visualizzare il punto elenco.

I valori dell'attributo TYPE sono:

 “disc” Il punto elenco dovrebbe essere disegnato come un


cerchio pieno
 “circle” Il punto elenco dovrebbe essere disegnato come un
cerchio vuoto
 “square” Il punto elenco dovrebbe essere disegnato come
un quadratino

HTML- prof.F.Velotti
Tabelle
<TABLE> apre la tabella
</TABLE> chiude la tabella
<TR> “table row”: indica l’apertura di una riga
<TD> “table data”: indica una cella su una riga

HTML- prof.F.Velotti
Tabelle: titolo e intestazione
Il tag per il titolo è <CAPTION> e deve essere
inserito subito dopo il tag <TABLE>.

Il tag per le intestazioni è <TH> e deve essere


inserito:
• nella prima riga se si vuole dare
un'intestazione alle colonne;
• prima del primo elemento di ogni riga se si
vogliono intestare le righe.
HTML- prof.F.Velotti
<TABLE>
<CAPTION>
Titolo: Intestazione colonne
</CAPTION>
<TR>
<TH>Prima colonna</TH>
<TH>Seconda colonna</TH>
</TR>
<TR>
<TD>(1,1)</TD>
<TD>(1,2)</TD>
</TR>
<TR>
<TD>(2,1)</TD>
<TD>(2,2)</TD>
</TR>
</TABLE>

HTML- prof.F.Velotti
Tabella: attributo colspan
Il tag <TD> e il tag <TH> definiscono l’attributo COLSPAN,
che permette di creare una cella che occupa più colonne.

HTML- prof.F.Velotti
Tabella: attributo rowspan
È possibile creare una cella che occupa più righe, grazie
all’attributo ROWSPAN definito da <TD> e <TH>.

HTML- prof.F.Velotti
Tabelle: formattazione
Il tag <TABLE> ammette attributi quali:
– Border: definisce la dimensione in pixel del bordo delle
celle
– height, weight: dimensione minima (compatibilmente con il
contenuto) della tabella
– Cellpadding: margine del testo all’interno della
cella
– Cellspacing: distanza tra le celle
- Bgcolor: colore di sfondo sia per l’intera tabella.
Per assegnare un colore di sfondo solo ad una cella l’attributo
BGCOLOR va specificato nel tag <TD> o <TH> della cella in
questione sia per una singola cella
HTML- prof.F.Velotti
LINK <a>
Il web è costituito non da testi ma da ipertesti
Un link è “un ponte” tra una pagina e un’altra.
Ogni link richiede la definizione di un punto di partenza e
di un punto di arrivo.
Entrambi possono essere file html, immagini, video ecc.

<A HREF="http://www.miosito.it"> link a mio sito</A>

Link a mio sito

HTML- prof.F.Velotti
LINK <a>
Un link è costituto da due componenti:
punto di partenza, ovvero l'oggetto (es. testo o
immagine) cliccando sul quale il link viene
attivato (“parola calda”)

punto di arrivo , ovvero l'indirizzo verso cui il


collegamento punta

<A href=“indirizzo”> parolacalda </A>

HTML- prof.F.Velotti
Indirizzi

Gli indirizzi sono di due tipi:


• indirizzi esterni
(che specificano altri documenti)

• indirizzi interni
(che specificano altre parti dello stesso
documento)

HTML- prof.F.Velotti
Indirizzi e URL
Per collegare un link ad un altro documento è
necessario conoscere l’URL di tale documento,
ossia l’indirizzo che esso ha sul web.
È possibile creare un collegamento ipertestuale a
qualunque file esistente sul WWW, non soltanto
a documenti HTML.
Esempio:
<A href="http://www.miosito.it/file1.html>File 1</A>
<A href=“file1.html”>File 1</A>
<A href=“cartella1/cartella2/file1.html”>File 1</A>
HTML- prof.F.Velotti
Indirizzi interni
Si possono definire punti del documento che
potranno essere destinazioni di link
<A href=“#puntoX”> vai al paragrafo X </A>

<P ID=“puntoX”> bla bla … </P>

Nota: è possibile usare l’attributo NAME oppure ID per


definire il punto di arrivo
<P NAME=“puntoX”> bla bla … </P>

HTML- prof.F.Velotti
Colore del link
I link assumono colori diversi a seconda che:
– Non siano mai stati visitati: colore blue
– Sia stati già visitati: colore viola
– Il mouse sta cliccando sul link (link attivo): colore blue

Attraverso gli attributi LINK, ALINK e VLINK del tag <BODY>


è possibile modificare i colori predefiniti
Ad esempio:
<body link="red" alink="yellow" vlink="green">

HTML- prof.F.Velotti
Caratteri speciali
Ci sono molti caratteri che, se scritti direttamente in
un file HTML, non vengono visualizzati
correttamente del browser: essi vengono detti
appunto caratteri speciali.
Rientrano in questo insieme lettere accentate, lettere
con dieresi o con cediglia, simboli particolari quali ©,
®, §.
Sono caratteri speciali anche ‘<’ e ‘>’, per un’ovvia
ragione!

HTML- prof.F.Velotti
Caratteri speciali
E' possibile visualizzare un qualunque carattere indicando
il simbolo ‘&’ seguito dal nome del carattere seguito da
un punto e virgola oppure seguito dal simbolo ‘#’ e dal
numero del carattere
Ad esempio:
< &#060; &lt;
> &#062; &gt;
spazio non interrompibile &#160; &nbsp;
À &#192; &Agrave;
à &#224; &agrave;
© &#169; &copy;
HTML- prof.F.Velotti
Esempio

HTML- prof.F.Velotti
Esempio: Codice Html
<HTML>
<HEAD>
<TITLE>La mia Home Page!</TITLE>
</HEAD>
<BODY>
<HR>
<B> <I> Grassetto Corsivo </B> </I>
<HR>
<U> Sottolineato </U>
<HR>
Per andare <BR> <B> a capo </B> <BR> devo usare <BR>
&lt;BR&gt;
<HR>
invece se voglio fare in modo che la parola
<font color="red"><B><U><I>Coca&nbsp;Cola</I></U></B></font>
non si separi mai devo usare &amp;nbsp
<HR>
</BODY>
</HTML>
HTML- prof.F.Velotti

Potrebbero piacerti anche