2-Struttura Pagina

Programmazione Web 1
Struttura pagina HTML

KARIM MOUSSALLI – SCUOLA SPECIALIZZATA SUPERIORE D’ARTE APPLICATA
2022 - 2023
Riassunto ➢ Nomenclatura corretta di file e
lezione scorsa cartelle che compongono un sito
web
➢ Struttura ad albero di file e cartelle
➢ Percorsi relativi ed assoluti
Percorsi relativi ➢ Quale altro tag di html (che
e assoluti non abbiamo visto nelle slide,
ma lo abbiamo visto
sicuramente in un codice
sorgente
" di una pagina) utilizza
i percorsi relativi o assoluti?
Tag <img>
<img src="risorse/immagini/gatto.jpeg" alt="gatto"/>
Nome del tag: img
Per esteso: image
È un elemento vuoto
Serve a creare una immagine
Tag <img>
Attributi obbligatori del tag <img>

Tag <img>
Nome attributo Valore attributo Nome Valore
attributo attributo
Tag <img>
src sta per SouRCe Il percorso (relativo) per alt sta per Questo
Specifica il arrivare alla risorsa alternative valore verrà
gatto.jpeg rispetto alla Il valore di visualizzato
percorso per
posizione del file html questo in caso di
la risorsa immagine errore
contenente questo tag attributo
sarà
visualizzato
Proviamo insieme in caso di
errore
Struttura ➢ Fino ad ora siamo stati in grado
pagina html di far interpretare degli elementi
html ad un browser
➢ Tutto ciò, però, è un
comportamento scorretto, non
previsto dal linguaggio html!
➢ Spesso i browser sono molto
tolleranti nei confronti degli
errori commessi e cercano in
ogni caso di visualizzare
qualcosa
Struttura ➢ Fino ad ora siamo stati in grado
pagina html di far interpretare degli elementi
html ad un browser
➢ Tutto ciò, però, è un
comportamento scorretto, non
previsto dal linguaggio html!
Sintatticamente ➢ Spesso i browser sono molto
sbagliato tolleranti nei confronti degli
errori commessi e cercano in
ogni caso di visualizzare
qualcosa
Struttura ➢ Esiste una sintassi corretta che
pagina html viene definita come struttura di
una pagina web
➢ Questa struttura la troverete su
qualsiasi sorgente pagina di
qualsiasi sito che andrete a
visitare
Struttura ➢ La struttura di un documento HTML
pagina HTML può essere riassunta così:
<!doctype html>
<html>
<head>
...
</head>
<body>
...
</body>
</html>
Dichiarazione DOCTYPE
<!doctype html> ➢ Il doctype o DTD (Document Type
<html> Definition) si trova sempre in testa ad un
<head>
documento html
...
➢ Il DTD ha il compito di informare al
</head>
<body>
browser in quale versione del linguaggio
... html è stato scritto la pagina
</body> ➢ Nel nostro esempio, la versione è la 5
</html> (l’ultima)
<!doctype html> ➢ L’istruzione doctype non fa
parte del linguaggio html,
<html> cioè non è un elemento,
<head> dunque non è un tag (come si
</head> vede dal modo di scrivere
l’istruzione, la sintassi non è
<body>
quella di un elemento
</body> contenitore, né quella di un
</html> elemento vuoto)
<!doctype html> ➢ In altre parole il doctype non è altro che
<html> la dichiarazione del tipo di documento
<head> corrente ed è stato concepito per
... comunicare al browser quale versione di
</head>
html viene utilizzata
<body>
➢ Questo tipo di informazione non è secondaria
...
➢ Senza di essa, per esempio, le regole di stile CSS
</body> non avrebbero effetto sulla formattazione
</html>
<!doctype html>
Versione html5
<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Versione html4.01
<!doctype html> Gli elementi di struttura:
<html> ➢ Definiscono la struttura della
<head> pagina e sono sempre
presenti in ogni pagina html
</head>
➢ Gli elementi di struttura sono
<body> univoci
</body> ➢ Gli elementi di struttura sono 3:
</html> ➢ <html>
➢ <head>
➢ <body>
Elemento html
<!doctype html> ➢ L’elemento html è la prima istruzione html (tag)
<html> situata in un file html
<head> ➢ È un elemento contenitore
... ➢ Contiene due elementi annidati chiamati head e
</head> body
<body> ➢ L’elemento html delimita i confini del documento
... html
</body> ➢ Tutto ciò che è racchiuso al suo interno viene
</html> interpretato come linguaggio html
Elemento head
<!doctype html> ➢ L’elemento head è il primo elemento
<html> annidato del tag html
<head> ➢ È un elemento contenitore
...
➢ L’elemento head contiene altri elementi
</head>
annidati
<body>
...
➢ Questi elementi annidati non vengono
</body> visualizzati direttamente dal browser,
</html> ma forniscono informazioni aggiuntive di
controllo e di servizio per il browser
I tags ➢ Questi tags, lo ricordiamo, non
vengono visualizzati direttamente
dell’head all’interno della pagina web
<!doctype html> ➢ All’interno del tag <head> è
<html> possibile inserire i seguenti tags:
<head> ➢ <title> ➔ il titolo della pagina
... ➢ <meta> ➔ informazioni aggiuntive della pagina
</head> ➢ <link> ➔ risorse esterne (ad esempio file .css)
<body> ➢ <style> ➔ definisce lo stile CSS
➢ <script> ➔ definisce gli script (ad esempio
... javascript)
</body>
</html>
Gli elementi dell’head: <title>
<!doctype html> ➢ L’elemento title contiene il
<html> titolo del documento html
<head>
➢ Dal browser si può osservare il
<title>titolo pagina</title>
</head> contenuto del tag title sulla
<body> linguetta della pagina e non
</body> all’interno della pagina
</html>
Tags dell’head: <title>
<title>Titolo della pagina</title>

Nome del tag: title
È un elemento contenitore
Rappresenta il titolo della pagina
Vediamolo dal vivo!
Esempio tag title
<!doctype html>
<html>
<head>
</head>
<body>
</body>
</html>
I tags ➢ Oggi è sempre più difficile essere
dell’head: presenti nelle prime posizioni di un
motore di ricerca
<meta> ➢ Questo perchè le pagine presenti in rete sono
diventate tante
➢ Grazie all’inserimento di alcuni
meta tags potrete migliorare la
vostra posizione rispetto
all’attuale posizione
Gli elementi dell’head: <meta>
➢ I meta tags forniscono delle
<!doctype html> informazioni aggiuntive di
<html> controllo e di servizio per il
<head>
browser
<meta charset="utf-8" /> ➢ Il tag <meta charset="utf-8" />
</head> indica al browser la codifica dei
<body> caratteri da adottare, con
</body> particolare riferimento alle
</html> lettere accentate
➢ Questo tag è necessario nel
caso in cui si vuole sviluppare un
sito in italiano
Tags dell’head:
meta charset tag
<meta charset="utf-8" />
Nome del tag: meta
Nome esteso: meta tag
È un elemento vuoto
Tags dell’head:
meta charset tag
<p>Perché impostare la codifica

➔
html è importante</p>
Tags dell’head:
meta charset tag
Per mostrare correttamente una pagina html, con particolare
riferimento alle lettere accentate, il browser deve conoscere la
codifica dei caratteri.
Tags dell’head:
meta charset tag
Il meta charset tag comunica al browser che la codifica dei caratteri
(o charset) adottato dal documento html corrente è l’UTF-8
È l’unico meta tag che ha un solo attributo
L’attributo di questo tag si chiama charset
Il valore per un documento che contiene dei caratteri accentati è utf-8
<meta charset="utf-8">
<!doctype html> ➢ Esistono altri meta tags
<html> che forniscono delle
<head> informazioni aggiuntive
ai motori di ricerca per
<meta name ="..." content ="..." /> permetterci di
</head> migliorare la posizione
<body> del sito
</body>
</html>
Tags dell’head:
meta description tag
<meta name="description" content="Riassunto della pagina web" />
I meta tag sono spesso accompagnati da due attributi

Il primo attributo si chiama name ed il secondo si chiama content
Il valore del attributo name, per il meta description tag, è "description"
Il valore del attributo content, per il meta description tag, è un breve
riassunto della pagina web (ca. 140 caratteri)
Tags dell’head:
meta author tag
<meta name="author" content="Karim Moussalli" />

Il valore del attributo name, per il meta author tag, è "author"
Il valore del attributo content, per il meta author tag, è il nome
dell’autore della pagina
Tags dell’head:
meta copyright tag
<meta name="copyright" content="Nome copyright" />

Il valore del attributo name, per il meta copyright tag, è "copyright"
Il valore del attributo content, per il meta copyright tag, è il copyright
della compagnia della pagina
Esistono altri meta tags ...
<!doctype html>
<html>
<head>
<meta name ="..." content ="..." />
</head>
<body>
</body>
</html>
L’elemento <head>
➢ Gli elementi del head sono:
<!doctype html> ➢ <title>
<html> ➢ <meta>
Questo tag non lo
vedremo, ma per
<head> ➢ og: tag interesse personale vi
consegnò delle slides
</head> ➢ <link>
➢ <style> Questi tre tags che
<body> ➢ <script> sono contenuti
nell’elemento head li
</body> vedremo più in là
insieme ai fogli di stile
</html> (CSS) e javascript
Elemento body
<!doctype html> ➢ L’elemento body è il secondo elemento
<html> annidato del tag html
<head>
➢ È un elemento contenitore
...
➢ L’elemento body contiene altri elementi
</head>
<body>
annidati
... ➢ Questi elementi annidati sono quelli che
</body> vengono visualizzati direttamente dal
</html> browser
➢ Ad esempio tutti i tag che abbiamo visto fino
ad adesso: <p>, <b>, <a>, <img>, etc

2-Struttura Pagina

Caricato da

Informazioni sul documento

Titolo originale

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

2-Struttura Pagina

Caricato da

Copyright:

Formati disponibili

Programmazione Web 1

Struttura pagina HTML

Attributi obbligatori del tag <img>

<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<title>Titolo della pagina</title>

<p>Perché impostare la codifica

I meta tag sono spesso accompagnati da due attributi

I meta tag sono spesso accompagnati da due attributi

I meta tag sono spesso accompagnati da due attributi

Potrebbero piacerti anche