HTML

1
Acronimo di Linguaggio semplice che

HyperText Markup permette la creazione di
Language pagine web
Codice che ci permette Definisce la struttura di

di marcare pagine web HTML una pagina, tramite
l'utilizzo di tag
con ipertesto.
Gli stili includono

Definisce una serie di informazioni di
stili fissi: paragrafi, formattazione, come stile e
titoli, elenchi e tabelle dimensione dei caratteri
2
I tag
Tutte le pagine sono costituite da specifici marcatori (TAG) che hanno nomi differenti a
seconda della loro funzione. I marcatori vanno inseriti tra parentesi angolari e la chiusura del
tag viene indicata con una barra /
<tag>contenuto</tag>
Alcuni tag supportano determinati attributi con le relative proprietà
<tag attributo=“proprietà”>... </tag attributo>

3
Sezione head: contiene dei tag che non

verranno rappresentati nel documento, ma
che sono utili o necessari per definire
informazioni del documento stesso
Sezione body: contiene dei tag che

definiscono la natura degli oggetti da
visualizzare all'interno del browser. Questi
elementi possono essere raggruppati in:
● elementi di blocco
● elementi inline
4
Sezione body
A Elementi di blocco B Elementi inline
Definiscono la struttura del documento e

È un elemento che rimani in linea con il
formano blocchi separati. Ogni blocco ha le
testo del contenuto e ha sempre le
seguenti caratteristiche:
seguenti caratteristiche:
§ Formano un blocco e si dispone
§ Si dispone orizzontalmente in linea con
verticalmente sotto con una riga vuota
il contenuto del suo contenitore
§ Occupa tutta la larghezza disponibile in
§ Prende la lunghezza e l'altezza minimali
rapporto alle misure del suo
in rapporto al suo contenuto
contenitore
§ Può contenere altri elementi solo di
§ La sua altezza cambia in rapporto al suo
tipo inline
contenuto
5
Attributi
DI STILE COMUNI DI EVENTI
ID: assegna un identificatore

specifica gli aspetti all’elemento in questione. Il Sugli elementi è
di formattazione valore deve essere unico possibile attivare
dello stile CLASS: assegna un nome di degli eventi, e
dell'elemento una classe a un elemento quindi l'esecuzione
corrente title: offre informazioni di un codice
aggiuntive
6
<html>
Intestazione della <head>

pagina <title>Titolo pagina</title>
Inizio e fine </head>
della pagina
html
Corpo della <body>
pagina (ciò che Contenuto della pagina (altri tag, testo,
si vede sul immagini, link ecc)
browser) </body>
</html>
Titolo DELLA pagina
<title>titolo della pagina</title>
(Solo questo tag viene messo nella sezione head)
§ <h1>titolo enorme</h1>
§ <h2>titolo grande</h2>
§ <h3>titolo medio</h3>
Titolo NELLA pagina
§ <h4>titolo piccolo</h4>
§ <h5>titolo piccolissimo</h5>
§ <h6>titolo minuscolo</h6>
Testo semplice Nessun tag, basta che sia scritto nella sezione body
Per andare a capo

(Se si vuole lasciare uno spazio mentre si va a capo, aggiungere <br />
tanti tag <br /> quanto il numero di spazi che si intende lasciare)
9
Allineamento paragrafo
(Viene messo a capo e distanziato automaticamente)
SINISTRA A DESTRA AL CENTRO GIUSTIFICA
<p> <p align=“right”> <p align=“center”> <p align=“justify”>

paragrafo Paragrafo allineato a destra Paragrafo allineato al centro Paragrafo ordinato
</p> </p> </p> </p>
11
Carattere testo
IN GRASSETTO IN CORSIVO SOTTOLINEATO

<strong>Testo grassettato</strong> <i>Testo in corsivo</i> <u>Testo sottolineato</u>
12
Attributi degli elenchi
Lista ordinata N. di partenza della lista Tipo di elenco numerato

<ol> <ol start=“(n dal quale si vuole partire)”> <ol type=“(A / a / 1 / i)”>
<li>primo elemento dell’elenco</li> <li>primo elemento dell’elenco</li> <li>primo elemento dell’elenco</li>

<li>secondo elemento dell’elenco</li> <li>secondo elemento dell’elenco</li> <li>secondo elemento dell’elenco</li>
</ol> </ol> </ol>
Lista non ordinata Tipo di elenco non Sottoelenco

ordinato
<ol >
<ul>
<ul type=“(square / circle / disc)”>
<li>primo elemento dell’elenco</li>
<li>primo elemento dell’elenco</li> <ol>
<li>secondo elemento dell’elenco</li> <li>primo elemento dell’elenco</li>
<li>secondo elemento dell’elenco</li> <li>primo elemento del
sottoelenco</li>
</ul>
</ul>
</ol>
13
Elenchi ordinati
<ol>

<li>secondo elemento dell’elenco</li>
</ol>
§ “Ol” sta per “order list”

§ Inserire tanti tag <li>…</li> quanto il
numero di elementi che si intende
mettere nell’elenco
<ol start=“(n dal quale si vuole partire)”>

</ol>
Volendo si può anche partire da un

certo numero aggiungendo un
attributo al tag
14
<ol start=“(n dal quale si vuole partire)”type=“(tipo di elenco numerato)”> Volendo si può scegliere il tipo di elenco numerato
<li>primo elemento dell’elenco</li> tramite un attributo. Si possono scegliere le lettere
<li>secondo elemento dell’elenco</li> maiuscole, le lettere minuscole e i numeri romani
</ol>
15
Elenchi non ordinati
<ul>

</ul>
§ “Ul” sta per “unorder list”

§ Inserire tanti tag <li>…</li> quanto il
numero di elementi che si intende mettere
nell’elenco
<ul type=“(tipo di elenco)”>

</ul>
Volendo si può scegliere il tipo di elenco

tramite un attributo. Si possono
scegliere i quadratini (square) cerchi
(circle) e pallini (disc)
16
Sottoelenco
<ol start=“(n dal quale si vuole partire)”type=“(tipo di elenco

numerato)”>

<ol>
<li>primo elemento del sottoelenco</li>
<li>secondo elemento del sottoelenco</li>
<ol>
</ol>
Per aggiungere una sottoelenco,

basta inserire la lista desiderata
nello spazio dell’elemento della lista
a cui si vuole aggiungere il sotto
elenco
17
Creazione di tabelle
01 Le tabelle vengono utilizzate nella grafica
02 È una griglia con un TOT di colonne e righe.
03 L’incontro tra una colonna e una riga, viene chiamato cella
04 Il tag “table” ha bisogno di altri due tag che definiscono il

numero di righe (tr) e colonne (td).
18
Ø Il numero di colonne
viene definito in base al
numero dei tag td
all’interno del tag tr
Ø Il numero delle righe

viene definito in base al
numero dei tag tr
all’interno del tag table
19
Attributi della tabella
LARGHEZZA BORDO COLLEGAMENTO

<table width=“(ampiezza della tabella)”> <table border=“(bordo della tabella)”>
<tabke align=“(tipo di allineamento)”>
<tr> <tr>
<td>…</td> <tr>
<td>…</td>
<td>…</td> <td>…</td>
<td>…</td>
</tr> <td>…</td>
</tr>
</table> </tr>
</table>
</table>
ALTEZZA RIGA LARGHEZZA CELLA UNIONE CELLE

<table>
<table> <tr> <tr>
<tr height=“(altezza della riga)”> <td width=“(ampiezza della <td colspan=“(n. di celle de
<td >…</td> cella)”>…</td> unire)”>…</td>
<td>…</td> <td>…</td> <td>…</td>
</table> </table> </tr>
20
<table width=“(ampiezza della tabella)”

border=“(spessore)”>
<tr>
<td>…</td>
<td>…</td>
</tr>
<tr>
<td>…</td>
<td>…</td>
</tr>
</table>
§ Per impostare la larghezza

della tabella si inserisce
l’attributo widht=“(n.di
pixel)” al tag table.
§ Per impostare uno
spessore, si inserisce
l’attributo border=“..”
21
<table width=“(ampiezza della tabella)”

border=“(spessore)”
align=“(allineamento)”>
<tr height=“(altezza della riga)”>

<td width=“(ampiezza della
cella)”>…</td>
<td>…</td>
</table>
§ Per impostare l’allineamento

della tabella inserire l’attributo
align al tag table.
§ Per dare un’altezza ad una
determinata riga, si inserisce
l’attributo height=“(n.pixel)” al
tag tr.
§ Volendo dare una larghezza ad
una cella, si inserisce
l’attributo width al tag td
22
<tr>
<td colspan=“(n. di
celle de unire)”>…</td>
<td>…</td>
</tr>
Se si vuole unire due o

più celle basta inserire
l’attributo colspan alla
cella a cui bisogna
unire un’altra cella
23
Immagini e collegamenti
A Immagini B Collegamenti
I collegamenti ipertestuali sono dei

Per poter inserire un’immagine nel link che ci permettono di accedere a
linguaggio html, scriviamo “img” contenuti esterni al sito, e si
all’interno di un tag che ha però suddividono in relativo o assoluto; un
bisogno di un attributo “src” (search) collegamento avviene attraverso un
per poter trovare l’immagine scelta; tag definito “a”, che da solo però non
si può trascrivere il nome del file assegna nessuna informazione, perciò
all’interno di una nostra cartella ha bisogno di un attributo “href”;
esplicitando precedentemente il dopodiché scriviamo il nome della
nome della cartella. pagina da collegare, senza
dimenticarci l’estensione.
24
Attributi delle immagini e collegamenti
IMMAGINE TESTO ALTERNATIVO COLLEGAMENTI RELATIVI
<img src=“(indicare da dove bisogna

prendere l’immagine: es.
prendere l’immagine: es. <a href=“(nome del file a cui si vuole
images/cracovia.png)” alt=“(testo
images/cracovia.png)”/> indirizzare)” > (testo da visualizzare
alternativo)” />
nell’anteprima del browser) </a>
COLLEGAMENTI LINK SU UN’ALTRA ETICHETTA LINK

ASSOLUTO FINESTRA
<a href=“(nome del file a cui si vuole

<a href=“http://www.google.it” > (testo da <a href=“http://www.google.it” indirizzare)” title=“(etichetta)”> (testo da
visualizzare nell’anteprima del browser) target=“_blank”>(testo da visualizzare visualizzare nell’anteprima del browser)
</a> nell’anteprima del browser) </a> </a>
25

alternativo)” />
Se vogliamo inserire un testo

alternativo all’immagine (in
caso non si caricasse
l’immagine o accessibilità
per ipovedenti e non vedenti
che leggono il nome
dell’immagine con
programmi particolari, basta
aggiungere l’attributo alt
26
COLLEGAMENTI RELATIVI
<a href=“(nome del file a cui si vuole

indirizzare)” > (testo da visualizzare
nell’anteprima del browser) </a>
Collegamenti relativi:
l’indirizzo è riferito
relativamente al proprio sito
COLLEGAMENTI ASSOLUTI
<a href=“http://www.google.it” > (testo

da visualizzare nell’anteprima del
browser) </a>
Collegamenti assoluti:
l’indirizzo è riferito a un sito
esterno
27
<a href=“http://www.google.it”
target=“_blank”>(testo da
visualizzare nell’anteprima del
browser) </a>
Per chiedere di aprire un

link in una nuova pagina di
navigazione utilizziamo
l’attributo “target”.
28
<a
href=“(nome del file a cui si vuole
indirizzare)”
title=“(etichetta)”>
(testo da visualizzare nell’anteprima del
browser)
</a>
Inseriamo il tag “title” per

visualizzare in anteprima
con il mouse il sito su cui
stiamo per navigare prima
di aprire un link.
29
Attributi delle immagini, collegamenti e
pagina
COLLEGAMENTO MAIL COLLEGAMENTO TRAMITE ALLINEAMENTO

IMMAGINE IMMAGINE NEL
PARAGRAFO
<a href=“(link pagina)” title=“(titolo link)”
<a href=mailto: “(email da indirizzare)”> target=“_blank” <img src=“(indicare da <p align=“justify”>
(email) </a> dove bisogna prendere l’immagine: es. <img src=“(indicare da dove bisogna
images/cracovia.png)” alt=“(testo prendere l’immagine: es.
alternativo)”/> </a> images/cracovia.png)” align=“(posizione
immagine)”/>
(Testo)
</p>
ALLINEAMENTO TESTO IN SFONDO PAGINA SFONDO TABELLA

UNA CELLA <body bgcolor=“(#colore esadecimale)”
<table background=“(indicare da dove
<table width=“(ampiezza della tabella)”> bisogna prendere l’immagine: es.
<tr> images/cracovia.png)”>
<td <tr>
valign=“(top/botton/middle)>…</td> <td>…</td>
<td>…</td> <td>…</td>
</tr> </tr>
</table> </table>
30
<a href=mailto: “(email da

indirizzare)”> (email) </a>
Per assegnare un
collegamento a una mail
inserire il target href=mailto:
“email”
31
<a href=“(link pagina)” title=“(titolo

link)” target=“_blank” <img
src=“(indicare da dove bisogna
alternativo)”/> </a>
Per assegnare un
collegamento tramite un
immagine, basta inserire nel
tag a l’attributo href
32
<p align=“justify”>
images/cracovia.png)” align=“(posizione
immagine)”/>
(Testo)
</p>
Per poter allineare l’immagine

a un paragrafo, inserire
l’attributo align al tag img
<table width=“(ampiezza della tabella)”>

<tr>
<td
valign=“(top/botton/middle)>…</td>
<td>…</td>
</tr>
</table>
Per allineare in verticale un

testo in una cella aggiungere
l’attributo valign al tag td
33
<body bgcolor=“(#colore esadecimale)”
Per poter assegnare uno

sfondo alla pagine inserire nel
tag body l’attributo bgcolor
<table background=“(indicare da dove

bisogna prendere l’immagine: es.
images/cracovia.png)”>
<tr>
<td>…</td>
<td>…</td>
</tr>
</table>
Per poter assegnare uno

sfondo immagine alla tabella
inserire nel tag table l’attributo
background
34
MENÙ DELLA PAGINA

INDEX= HomePage > apro con “Blocco note”
<a href=“index.html”
<hr/>
<a href=“chi-siamo.html”>CHI SIAMO</a>
<hr/>
<a href=“attivita.htm”>ATTIVITÀ </a>
<hr/>
<a href=“contatti.html”>CONTATTI</a>
1. Copio index.html e lo rinomino come “chi-

siamo.html”
2. Cambio <h3>Home Page</h3>
3. Ripetere gli stessi passaggi per gli altri
elementi del Menù
Fine
Fonte: https://www.youtube.com/channel/UClgLGD-
CKafd3oeaoqDp0CA
Zahoui Hajar, Dell’Aquila Barbara, Torchia Dimitri

HTML

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

HTML

Caricato da

Copyright:

Formati disponibili

1

Acronimo di Linguaggio semplice che

Codice che ci permette Definisce la struttura di

Gli stili includono

Alcuni tag supportano determinati attributi con le relative proprietà

<tag attributo=“proprietà”>... </tag attributo>

Sezione head: contiene dei tag che non

Sezione body: contiene dei tag che

A Elementi di blocco B Elementi inline

Definiscono la struttura del documento e

DI STILE COMUNI DI EVENTI

ID: assegna un identificatore

Intestazione della <head>

Per andare a capo

SINISTRA A DESTRA AL CENTRO GIUSTIFICA

<p> <p align=“right”> <p align=“center”> <p align=“justify”>

IN GRASSETTO IN CORSIVO SOTTOLINEATO

Lista ordinata N. di partenza della lista Tipo di elenco numerato

<li>primo elemento dell’elenco</li> <li>primo elemento dell’elenco</li> <li>primo elemento dell’elenco</li>

</ol> </ol> </ol>

Lista non ordinata Tipo di elenco non Sottoelenco

<li>primo elemento dell’elenco</li>

§ “Ol” sta per “order list”

<ol start=“(n dal quale si vuole partire)”>

<li>primo elemento dell’elenco</li>

Volendo si può anche partire da un

<li>primo elemento dell’elenco</li>

§ “Ul” sta per “unorder list”

<ul type=“(tipo di elenco)”>

<li>primo elemento dell’elenco</li>

Volendo si può scegliere il tipo di elenco

<ol start=“(n dal quale si vuole partire)”type=“(tipo di elenco

<li>primo elemento dell’elenco</li>

Per aggiungere una sottoelenco,

01 Le tabelle vengono utilizzate nella grafica

02 È una griglia con un TOT di colonne e righe.

03 L’incontro tra una colonna e una riga, viene chiamato cella

04 Il tag “table” ha bisogno di altri due tag che definiscono il

Ø Il numero delle righe

LARGHEZZA BORDO COLLEGAMENTO

ALTEZZA RIGA LARGHEZZA CELLA UNIONE CELLE

<table width=“(ampiezza della tabella)”

§ Per impostare la larghezza

<table width=“(ampiezza della tabella)”

<tr height=“(altezza della riga)”>

§ Per impostare l’allineamento

Se si vuole unire due o

I collegamenti ipertestuali sono dei

IMMAGINE TESTO ALTERNATIVO COLLEGAMENTI RELATIVI

<img src=“(indicare da dove bisogna

COLLEGAMENTI LINK SU UN’ALTRA ETICHETTA LINK

<a href=“(nome del file a cui si vuole

<img src=“(indicare da dove bisogna

Se vogliamo inserire un testo

<a href=“(nome del file a cui si vuole

<a href=“http://www.google.it” > (testo

Per chiedere di aprire un

Inseriamo il tag “title” per

COLLEGAMENTO MAIL COLLEGAMENTO TRAMITE ALLINEAMENTO

ALLINEAMENTO TESTO IN SFONDO PAGINA SFONDO TABELLA

<a href=mailto: “(email da

<a href=“(link pagina)” title=“(titolo

Per poter allineare l’immagine

<table width=“(ampiezza della tabella)”>