Scribd
Carica
11 visualizzazioni84 pagine

01 HTML

Il documento fornisce una panoramica su HTML, un linguaggio di markup utilizzato per creare ipertesti attraverso tag che definiscono la struttura e la semantica dei contenuti. Viene trattata l'evoluzione di HTML dalle sue versioni iniziali fino a HTML5, evidenziando le sue funzioni principali, la struttura generale di un documento e l'importanza dei metadati. Inoltre, si discute dell'importanza della compatibilità con diversi browser e dispositivi, nonché delle pratiche per l'indicizzazione e l'adattabilità dei contenuti.

Caricato da

mbarbero665
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
11 visualizzazioni84 pagine

01 HTML

Il documento fornisce una panoramica su HTML, un linguaggio di markup utilizzato per creare ipertesti attraverso tag che definiscono la struttura e la semantica dei contenuti. Viene trattata l'evoluzione di HTML dalle sue versioni iniziali fino a HTML5, evidenziando le sue funzioni principali, la struttura generale di un documento e l'importanza dei metadati. Inoltre, si discute dell'importanza della compatibilità con diversi browser e dispositivi, nonché delle pratiche per l'indicizzazione e l'adattabilità dei contenuti.

Caricato da

mbarbero665
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/ 84

HTML

(HyperText Markup Language)

Andrea Atzeni
< [email protected] >

estensione di materiale prodotto dal Prof.


Antonio Lioy
HTML - Definizione
➢ linguaggio di markup per la creazione di "ipertesti"
▪ crea ipertesti

▪ usando "tag"
❖ parole chiave inserite in parentesi angolari ("<" e ">")
❖ aventi lo scopo di indicare e definire elementi del
documento

© A.Atzeni (Politecnico di Torino, 2024) Image created by runway text to image 2


HTML – funzioni principali
➢ definizione della struttura logica
▪ gerarchia che organizza testo, immagini, link, etc. del
documento
➢ definizione della semantica dei contenuti
▪ titolo del capitolo, paragrafo, pie di pagina
contenuto, principale, intestazione, …
➢ navigazione e interazione con l'utente
▪ tag per creazione di link ipertestuali
▪ tag per inserimento da parte dell'utente
➢ inserimento di media di tipo diverso
▪ testo, video, audio, …
➢ separazione tra struttura e presentazione (ultime versioni)

© A.Atzeni (Politecnico di Torino, 2024) 3


Struttura generale
di un documento HTML
<!DOCTYPE HTML ...> indica al browser versione di HTML da usare
<html> elemento radice del documento HTML, racchiude tutto il contenuto della pagina web
<head> racchiude sezione con metainformazioni e collegamenti a risorse esterne
<title> titolo </title> titolo nella scheda del browser
... altre intestazioni ...
</head>

<body> tutto il contenuto visibile di una pagina web


testo del documento
</body>

</html>

© A.Atzeni (Politecnico di Torino, 2024) 4


Versioni "storiche"
◼ HTML 1.0 (1991)
◼ struttura base del linguaggio
◼ HTML 2.0 (1995 = RFC-1886)
◼ codifica lo standard de facto del 1994, aggiunge vari tag
(immagini, liste, form, attributi di formattazione, ...)
◼ HTML 3.2 (1997)
◼ compatibile con 2.0, aggiunge vari tag (table, applet, apici,
pedici, testo attorno alle immagini, …)
◼ HTML 4.01 (dic’ 97 – apr’ 98 – dic’ 99)
◼ Aggiunta fogli di stile (CSS), frame, e vari altri attributi
◼ XHMTL 1.0, 1.1, 2.0 (gen’00 – mar’18)
◼ riscrittura di HTML 4.01 con XML – ritirato marzo 2018
◼ HTML 5 (6?, 7?)
© A.Atzeni (Politecnico di Torino, 2024) 5
HTML 5
◼ evoluzione e consolidamento di HTML
◼ versione "live" con WHATWG (Web Hypertext Application
Technology Working Group - Apple, Mozilla, Google, Opera)
◼ https://html.spec.whatwg.org/ (cambia frequentemente)
◼ W3C crea degli "snapshot" periodici per pubblicare le
versioni "ufficiali" (https://www.w3.org/standards/history/html)
◼ HTML 5 = first working draft 22/01/2008 - recommendation
28/10/2014 - retired 27/03/2018
◼ HTML 5.1 = fwd 17/12/12 - rec. 3/10/17 - ret. 28/01/21
◼ HTML 5.2 = fwd 18/10/16 - rec. 14/12/2017 - ret. 28/01/21
◼ HTML 5.3 = fwd 14/12/17 - rec. (never) - ret. 28/01/21
◼ HTML = recommendation 28/01/21
◼ livelli di supporto di HTML: https://html5test.opensuse.org/
© A.Atzeni (Politecnico di Torino, 2024) 6
Un documento HTML
◼ originariamente, un normale testo US-ASCII
◼ non ammesse lettere accentate e caratteri "estesi"
◼ versioni recenti (> 3.2) accettano (e preferiscono) altre
codifiche (ISO-8859-1, UTF-8, ...)
◼ ... arricchito con puntatori ipertestuali e ipermediali
◼ ... e con capacità di caratterizzazione semantica del testo
◼ ... ottenute mediante annotazioni espresse tramite i tag
◼ note pratiche:
◼ creare file con un editor TESTUALE (es. Notepad, Visual
studio, NO Microsoft Word). Deve contenere solo caratteri
"testuali" (e non caratteri di formattazione).
◼ file devono avere estensione .HTM o .HTML (attenzione a
Windows che per default "nasconde" le estensioni note, si
rischia di avere file con doppia estensione es. home.htm.txt)
© A.Atzeni (Politecnico di Torino, 2024) 7
I tag
◼ sono racchiusi tra i simboli "minore" e "maggiore"
◼ di solito sono accoppiati (start tag – end tag)
<h1> ... </h1>
ma possono essere anche soli (più raramente)
<img src="image.jpg" alt="Descrizione dell'immagine">
◼ regola generale: il tag finale è identico a quello iniziale,
preceduto dal simbolo /
◼ sono case insensitive in HTML (lowercase in XHTML)
◼ stile predominante: sempre minuscoli

© A.Atzeni (Politecnico di Torino, 2024) 8


Commenti
◼ inseribili in qualunque punto del testo
◼ possono occupare varie righe
◼ racchiusi tra <!-- e -->
◼ esempi:

<!-- questo è un commento -->

<!--
questo commento
occupa quattro righe
-->

© A.Atzeni (Politecnico di Torino, 2024) 9


Gli attributi
◼ attributi usati per caratterizzare meglio un tag
◼ ogni attributo è una variabile con un possibile valore
assegnato
◼ esempi:
◼ <input type="text" disabled>
◼ <input type="text" value=Tony>
◼ <input type="text" value="Tony">
◼ <input type="text" value='Tony'>

© A.Atzeni (Politecnico di Torino, 2024) Image created by runway text to image 10


I browser
◼ per visualizzare documenti HTML (e per navigarli) occorre un
programma apposito: un browser HTML
◼ un browser è un interprete:
◼ legge codice sorgente (HTML + estensioni)
◼ cerca di capirlo (sperando non contenga errori …)
◼ fa del suo meglio per visualizzare quanto descritto dal codice
sorgente
◼ attenzione! non tutti i browser visualizzano un documento
allo stesso modo
◼ browser testuale: Lynx
◼ browser grafici: Firefox, SeaMonkey, Chrome, Opera, Edge,
Safari, ...

© A.Atzeni (Politecnico di Torino, 2024) 11


La guerra dei browser
◼ non esiste un unico browser (preferenze personali, piattaforma
di uso, "spinte" commerciali, …)
◼ scrivere pagine HTML adatte a qualunque browser!
◼ alcune statistiche (feb-24):
◼ www.w3schools.com/browsers/
◼ Edge=10,4%, FX=4,7%, Chrome=78,1%, Safari=3,8%
◼ https://www.netmarketshare.com/ (fino a marzo 23)
◼ Edge=13,71%, FX=4,83%, Chrome=74,21%, Safari=3,26%
◼ grande variabilità, fate statistica per il vostro sito
◼ difficile identificare i browser con certezza
◼ privacy utenti/modalita "incognito"
◼ configurazione "manuale" dello user-agent
◼ Indici indiretti (es. Javascript) non sempre accurati
© A.Atzeni (Politecnico di Torino, 2024) 12
I browser - funzionalità aggiuntive
◼ "strumenti per sviluppatori" consentono molte analisi
avanzate
◼ Molto utili per comprendere funzionamento pagine web
◼ Elements – visione di struttura e proprietà HTML, modifiche in
"real time"
◼ Console - visione messaggi di log ed errori, eseguire comandi
◼ Sources – esaminare e debuggare il codice
◼ Network – esame delle interazioni di rete HTTP
◼ Performance – analisi delle prestazioni
◼ Memory – utilizzo della memoria
◼ Application – informazioni su cache, cookie, storage
◼ Security – informazioni sulla sicurezza delle connessioni
◼ ….
© A.Atzeni (Politecnico di Torino, 2024) 13
Document Type Declaration (DTD)
◼ indica il contesto semantico
◼ all'interno dei linguaggi markup
◼ necessario per capire
◼ il tipo di documento (HTML, XHTML, …)
◼ la versione utilizzata (es HTML 4.01, HTML 5, …)
◼ eventuali dettagli specifici della struttura
• regole su come strutturare i vari tag
• regole di validazione

© A.Atzeni (Politecnico di Torino, 2024) 14


Document Type Declaration (DTD)
◼ esempi
◼ per 4.01 (obsoleto):
• strict.dtd = tutti gli elementi non deprecati
• loose.dtd = include elementi deprecati
• frameset.dtd = loose + uso di frame
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

◼ per HTML5
<!doctype html>
© A.Atzeni (Politecnico di Torino, 2024) 15
Esempio (HTML5) - sorgente
<!doctype html>
<html lang="it">
<head>
<meta charset="utf-8">
<title>Esempio di pagina HTML</title>
</head>
<body>
<h1>Esempio</h1>
Qui posso inserire il testo del mio
documento che, se non uso i tag di formattazione,
viene visualizzato come semplice testo.
</body>
</html>

© A.Atzeni (Politecnico di Torino, 2024) 16


Esempio (HTML5) - visualizzazione
<title> ……………...

<h1> ………………..

testo ……………….
(notare divisione in
righe automatica in
base alla dimensione
della finestra e font
decisi in base alle
preferenze dell'utente)
© A.Atzeni (Politecnico di Torino, 2024) 17
Osservazioni
◼ il browser non segnala gli errori: li ignora!
◼ spazi e ritorni a capo:
◼ spazi multipli vengono trattati come uno spazio singolo
◼ i fine linea nel codice non hanno alcun effetto di formattazione
◼ titolo (ed in generale i dati dell’head) possono essere usati
dai sistemi automatici di indicizzazione
◼ HTML è un linguaggio estensibile
◼ spesso si aggiungono nuovi tag
◼ il browser ignora i tag (o gli attributi) non riconosciuti … ma
visualizza il testo racchiuso dal tag

© A.Atzeni (Politecnico di Torino, 2024) 18


Indicizzazione
◼ Crawler
◼ strumenti automatizzati che esplorano il web raccogliendo
informazioni da un sito a un altro
◼ scopo: a partire da un pool di link, visitare le pagine web,
recuperare i loro contenuti e analizzare la struttura della
pagina
◼ Algoritmi di indicizzazione
◼ analisi semantica e NLP del testo per estrarre informazioni
significative come parole chiave, frasi e concetti
◼ utilizzano metadati (tag alt per le immagini) e tecniche di
riconoscimento visivo per identificare e classificare
correttamente questi contenuti
◼ … e molteplici altri criteri (mobile-first, responsive design, …)

© A.Atzeni (Politecnico di Torino, 2025) 19


Meta-dati
◼ nella parte di <HEAD>
◼ dati utili per:
◼ indicizzare la pagina HTML
◼ fornire informazioni al server web e/o al browser
◼ sintassi:

<meta name="author" content="Andrea S. Atzeni">


<meta name="keywords" lang="it" content="html">
<meta name="description" content="Esempi HTML">
<meta charset="utf-8">
<meta http-equiv="refresh" content="60">

© A.Atzeni (Politecnico di Torino, 2024) 20


Adattabilità
◼ HTML (nelle versioni recenti) offre tag e strumenti per
permettere l'adattabilità a diversi contesti
◼ diversi linguaggi (localizzazione)
• permette struttura semantica del documento
• supporta diverse lingue (codifica unicode)
◼ diversi dispositivi
• permette uso di componenti specifici (es.
Geolocalizzazione)
• permette gestione di schermi di diverse dimensioni
• permette l'uso di diversi formati

© A.Atzeni (Politecnico di Torino, 2025) 21


Meta-dati: viewport
◼ porzione della pagina da mostrare nel browser:
◼ larghezza (width=…) ed altezza (height=…)
◼ fattore di scala iniziale (initial-scale=…), minimo (minimum-
scale=…) e massimo (maximum-scale=…)
◼ scalabile o fisso (user-scalable=…)
◼ importante per dispositivi mobili (piccolo schermo)
◼ sintassi (esempio):

<meta name="viewport"
content="width=device-width,
initial-scale=1.0,user-scalable=1"
>

© A.Atzeni (Politecnico di Torino, 2024) 22


Internazionalizzazione di HTML
◼ HTML < 4 usava solo ISO-8859-1
◼ HTML4
◼ usa per default ISO-8859-1
◼ ma permette di specificare l'alfabeto e la codifica usata tramite
vari tag ed attributi
◼ HTML5
◼ usa per default UTF-8
◼ ma permette di specificare l'alfabeto e la codifica usata tramite
vari tag ed attributi
◼ definizione del charset importante perché è anche quello
usato in caso di input da parte dell'utente (es. aree di testo in
un form)

© A.Atzeni (Politecnico di Torino, 2024) 23


Problemi di errato charset
◼ problemi di visualizzazione e interpretazione dei dati
◼ in un sito web o applicazione
◼ caratteri possono apparire come simboli strani, quadratini o
segni di domanda
◼ il browser non riesce a interpretare correttamente i dati,
causando una rappresentazione errata del testo
◼ i contenuti in lingue diverse (con caratteri speciali come
accenti, ñ, ü, ecc.) potrebbero non essere visualizzati
correttamente
◼ nelle richieste/risposte da un server (es. API REST) possibile
presenza dati corrotti o incompleti, e errori di elaborazione
◼ errata memorizzazione (es, nel database)
◼ errata indicizzazione

© A.Atzeni (Politecnico di Torino, 2025) 24


Determinare il charset
◼ UA determina la codifica usata in base ai seguenti elementi
(da priorità più alta a più bassa):
◼ HTTP response header per MIME-type
◼ es. Content-Type: text/html; charset=iso-8859-1
◼ specifico tag META nell’header HTML
◼ <meta http-equiv="Content-Type: text/html; charset=iso-
8859-1"> (HTML4, lecito in HTML5)
◼ <meta charset="utf-8" /> (preferito in HTML5)
◼ META sempre nei primi 1024 byte (es. dopo HEAD)
◼ N.B. occorre salvare i file con la codifica indicata
◼ verificare con https://validator.w3.org/i18n-checker/

© A.Atzeni (Politecnico di Torino, 2024) 25


Riferimenti a caratteri non US-ASCII
◼ Per massima compatibilità
▪ usare i primi 128 caratteri (0…127) uguali in tutti i charset
▪ codificare i caratteri > 127, obbligatorio codificare quei
caratteri con significato speciale
◼ sintassi &entity_name; (";" finale)
◼ https://www.w3schools.com/html/html_entities.asp
per avere ... si scrive ...
< &lt;
> &gt; OBBLIGATORIO
& &amp; perché sono
" &quot; caratteri riservati di HTML
È &Egrave;
é &eacute;
© &copy;
© A.Atzeni (Politecnico di Torino, 2024) 26
Il tag "link"
◼ nella parte di <HEAD>
◼ collegamento logico ad altri documenti correlati in qualche
modo a quello corrente
◼ può o può non avere effetto "visivo"
◼ possibili più tag <link>
◼ attributi:
◼ href=URL
◼ rel=alternate lang=…
◼ rel=alternate media=…
◼ rel=stylesheet
◼ rel=start / contents / prev / next / …
◼ type=MIME-type

© A.Atzeni (Politecnico di Torino, 2024) 27


Esempio di LINK
<head>
<title>Chapter 2</title>
<link rel="contents" href="../toc.html">
<link rel="next" href="chapter3.html">
<link rel="prev" href="chapter1.html">
<link rel="stylesheet"
type="text/css" href="mystyle.css">
<link rel="alternate"
media="aural" href="chapter2.mp3">
<link rel="alternate"
lang="it" href="chapter2_italian.html">
</head>
© A.Atzeni (Politecnico di Torino, 2024) 28
Favorite icon
◼ la piccola icona presente vicino alla URL
◼ un'immagine 16 x 16 pixel
◼ browser antichi:
◼ solo in formato MS icon
◼ in posizione fissa e con nome fisso = /favicon.ico
◼ primo passo verso lo standard:
<link rel="shortcut icon" href="/icons/my.ico"
type="image/vnd.microsoft.icon">
◼ browser attuali:
<link rel="icon"
type="image/png" href="/icons/my.png">

© A.Atzeni (Politecnico di Torino, 2024) 29


Validazione HTML
◼ scrivere codice "HTML" valido (=che rispetta correttamente
lo standard) serve per migliorare accessibilità, compatibilità
e performance
◼ aumenta probabilità di corretta interpretazione su tutti i
browser
◼ migliora la corretta indicizzazione sui motori di ricerca
• priorità a siti ben strutturati
◼ aiuta strumenti di assistenza (screen reader, tastiere
alternative
◼ maggiore leggibilità e comprensibilità
◼ minore presenza di bug

© A.Atzeni (Politecnico di Torino, 2024) 30


Strumenti di controllo per HTML
◼ https://validator.w3.org
◼ permette di verificare se una pagina è scritta rispettando
completamente la sintassi ufficiale
◼ può fornire spiegazioni dettagliate sugli errori e come
correggerli
◼ https://tidy.sourceforge.net
◼ “ripulisce” e corregge errori del codice HTML
◼ installabile localmente o usabile via rete
es. https://tidy.js.org/html
◼ problemi con HTML generato da un server dinamico (non
validabile una pagina sorgente contenente codice server-
side, come in PHP)

© A.Atzeni (Politecnico di Torino, 2024) 31


Strumenti di controllo per HTML
◼ per validare pagine create dinamicamente bisogna fare
l’operazione sul client invece che sul server
◼ occorre quindi:
◼ un plugin speciale per il browser
◼ visitare manualmente tutte le pagine da validare
◼ estensione per Firefox (e Chrome):
◼ https://addons.mozilla.org/en-US/firefox/addon/html-validator/
◼ https://chromewebstore.google.com/detail/html-
validator/mpbelhhnfhfjnaehkcnnaknldmnocglk?pli=1
◼ configurarlo in modalità "SGML parser" per avere gli stessi
risultati di validator.w3.org

© A.Atzeni (Politecnico di Torino, 2024) 32


Elementi strutturali (HTML5)
◼ <header> e <footer>
◼ intestazione e piè di pagina
◼ per tutta una pagina o per un blocco
◼ <nav>
◼ per racchiudere link utili per navigare il sito
◼ <section>
◼ <article>
◼ <main>
◼ <aside>
◼ informazioni addizionali / collaterali (es. sidebar)
◼ N.B. non sono annidabili

© A.Atzeni (Politecnico di Torino, 2024) 33


Elementi strutturali espandibili
◼ <details> definisce una parte che può essere espansa
◼ <summary> (all'interno di <details>) fornisce una breve
descrizione del contenuto
◼ esempio:

<details>
<summary>Descrizione di POLITO</summary>
<p>Il Politecnico di Torino ...</p>
</details>
<details>
<summary>Descrizione di POLIMI</summary>
<p>Il Politecnico di Milano ...</p>
</details>
details.html
© A.Atzeni (Politecnico di Torino, 2024) 34
I titoli
◼ esistono sei livelli di titolo o intestazione:
◼ <h1> . . . </h1>
◼ <h2> . . . </h2>
◼ <h3> . . . </h3>
◼ <h4> . . . </h4>
◼ <h5> . . . </h5>
◼ <h6> . . . </h6>

◼ attenzione!
◼ usarli per il significato logico, non per ottenere una certa
formattazione
◼ Ad esempio, è scorretto usare <hN> se non preceduto da
<hN-1>, o usare <hN> per ottenere fonti più grandi all'interno
di un paragrafo
© A.Atzeni (Politecnico di Torino, 2024) 35
Blocchi di testo
◼ <p> . . . </p>
inizia e termina un paragrafo
◼
◼ al termine di un paragrafo il browser va a capo (e può anche
lasciare un piccolo spazio verticale)
◼ <br>
◼inserisce un ritorno a capo
◼ <wbr>
permette di spezzare una parola (lunga) in un punto
◼
◼ … ma solo se necessario (ossia non è un obbligo)
◼ <hr>
◼ inserisce una retta orizzontale

© A.Atzeni (Politecnico di Torino, 2024) 36


Rette orizzontali (tag <HR>)
◼ è possibile specificare degli attributi:
◼ size= n_pixel (spessore)
◼ width= n_pixel (larg. assoluta)
◼ width= percentuale (larg. in % del contenitore)
◼ align=left / right / center

◼ per default la linea è centrata e con larghezza 100%

© A.Atzeni (Politecnico di Torino, 2024) 37


Elenchi e liste
◼ lista non ordinata:
◼ <ul> ... </ul>
◼ lista ordinata:
◼ <ol> ... </ol>

◼ un elemento di una (qualsiasi) lista:


◼ <li> ... </li>

© A.Atzeni (Politecnico di Torino, 2024) 38


Opzioni per le liste
◼ tipo di simbolo per le liste non ordinate:
◼ type=disc / circle / square
◼solo per HTML4, in HTML5 usare CSS
◼ numerazione delle liste ordinate:
◼ start= indice_primo_elemento
◼ type= A / a / I / i / 1
◼ … ossia:
◼ lista alfabetica (maiuscola o minuscola)
◼ numeri Romani (maiuscoli o minuscoli)
◼ numeri decimali
◼ reversed="reversed"

© A.Atzeni (Politecnico di Torino, 2024) 39


Esempio di elenco
Per superare l'esame 01NBE:
<ol type="I">
<li>frequentare
le lezioni</li>
<li>svolgere
le esercitazioni
di laboratorio</li>
</ol>

Per superare l'esame 01NBE:


browser I. frequentare le lezioni
(notare l'indentazione) II. svolgere le esercitazioni
di laboratorio
© A.Atzeni (Politecnico di Torino, 2024) 40
Definizioni
◼ elenco di definizioni:

<dl>
<dt> termine 1 </dt>
<dd> definizione 1 . . . </dd>
<dt> termine 2 </dt>
<dd> definizione 2 . . . </dd>
...
</dl>

© A.Atzeni (Politecnico di Torino, 2024) 41


Formattazione del testo
◼ una porzione di testo può essere caratterizzata per la
funzione che assume nel documento (stile logico) ...
◼ ... oppure per il modo in cui si desidera fisicamente
visualizzarla (stile fisico)
◼ gli stili logici da preferire ai fisici per lasciare più libertà
all’utente finale nel definire come il testo deve apparire su
video
◼ in HTML5 scomparsi (= non più validi, anche se ancora
"funzionanti" sul browser) i tag di formattazione fisica, e
diversi di formattazione logica se continene solo
coratteristiche di "presentazione"
▪ in questi casi, non usare il tag HTML, e invece
obbligatorio usare CSS.

© A.Atzeni (Politecnico di Torino, 2024) 42


Formattazione: stili fisici
◼ <b> ... </b>
testo in grassetto (bold)
◼
◼ <i> ... </i>
testo in corsivo (italico)
◼
◼ <u> ... </u>
testo sottolineato
◼
◼ <mark> ... </mark>
◼ testo evidenziato

© A.Atzeni (Politecnico di Torino, 2024) 43


Formattazione: stili fisici
◼ <tt> ... </tt>
testo a spaziatura fissa (tipo macchina da scrivere)
◼
◼ solo HTML4
◼ in HTML5 possibile usare stili logici corrispondenti (es.
<kbd> , <code>, <var>, <samp>
• ma comunque usare CSS per modificare aspetto grafico
◼ <sup> ... </sup>
testo sopraelevato (apice)
◼
◼ <sub> ... </sub>
testo sottoelevato (pedice)
◼
◼ <s> ... </s>
◼ testo sbarrato orizzontalmente (=cambiato)

© A.Atzeni (Politecnico di Torino, 2024) 44


Formattazione: stili logici
◼ <cite> citazione </cite >
◼ <code> codice (programma) </code>
◼ <em> enfasi </em>
◼ <kbd> tastiera </kbd>
◼ <samp> esempio </samp>
◼ <strong> rinforzo </strong>
◼ <var> variabile </var>
◼ <dfn> definizione </dfn>
◼ <del> testo cancellato </del>
◼ <ins> testo aggiunto </ins>

© A.Atzeni (Politecnico di Torino, 2024) 45


Altri stili logici
◼ <big> testo grande </big>
◼ solo HTML4 (in HTML5 usare CSS)
◼ <small> testo piccolo </small>
◼ si possono usare ripetutamente in modo annidato per
ottenere effetto maggiore
◼ esempi:

<small>&copy; 2024 by A.S.A.</small>

<big> <big>
testo (HTML4) molto grande
</big> </big>

© A.Atzeni (Politecnico di Torino, 2024) 46


Formattazione: blocchi di testo
◼ <address> . . . </address>
◼ indirizzo (tipicamente dell'autore del documento o di un
articolo)
◼ <blockquote> . . . </blockquote>
◼ grosse citazioni
◼ <q> . . . </q>
◼ citazione corta (in-line)
◼ <pre> . . . </pre>
◼ testo preformattato (la
spaziatura viene rispettata)

© A.Atzeni (Politecnico di Torino, 2024) 47


Dati
◼ <abbr [ title=…] >
◼ definisce un'abbreviazione
◼ <data value=…>
◼ specifica un valore da associare ad un dato (es. codice di un
prodotto)
◼ <time [ datetime=… ] >
◼ un riferimento temporale (data e/o ora e/o durata)
◼ se il testo interno al tag non è in formato standard allora è
obbligatorio l'attributo datetime col valore standard
◼ standard = AAAA-MM-GG HH:MM:SS.MMM±HHMM

© A.Atzeni (Politecnico di Torino, 2024) 48


Esempio: <abbr> e <data>

<abbr title="Politecnico di Torino">POLITO</abbr>


offers many courses, such as:
<ul>
<li>
<data value="01NBE">Web Programming</data>
</li>
<li>
<data value="02KRQ">Computer Security</data>
</li>
</ul>

© A.Atzeni (Politecnico di Torino, 2024) 49


Esempi: <time>
<!-- data assoluta, formato non standard -->
<time datetime="2018-03-18 12:00+01:00">
18-03-2018 12:00CET</time>
<!-- data assoluta, formato non standard -->
<time datetime="2018-03-18 12:00+01:00">
18 Marzo 2018 12:00CET</time>
<!-- data relativa (manca fuso orario)-->
<time>2018-03-18 12:00</time>
<!-- data relativa (manca ora)-->
<time>2018-03-18</time>
<!-- data relativa (manca giorno)-->
<time>12:00</time>
© A.Atzeni (Politecnico di Torino, 2024) 50
I collegamenti ( hyperlink )
◼ utilizzando un collegamento (detto àncora in HTML) è
possibile spostarsi automaticamente da una risorsa ad
un’altra
◼ il tag che identifica la presenza di un collegamento è
l’àncora, indicata con <a>

© A.Atzeni (Politecnico di Torino, 2024) 51


Come inserire un hyperlink
◼ aprire il tag di inizio àncora: <a
◼ inserire uno spazio
◼ inserire l’URL della risorsa, preceduto da href= e racchiuso
tra virgolette
◼ chiudere il tag di apertura con >
◼ inserire il testo da evidenziare (quello associato all’àncora,
detto "hot word")
◼ chiudere l’àncora: </a>

<a href="http://www.polito.it/">POLITO</a>

© A.Atzeni (Politecnico di Torino, 2024) 52


Link assoluti e relativi
◼ possibile omettere parti iniziali (complete) della URL
◼ in questo caso si parla di link "relativo"
◼ le parti mancanti assumono il valore della pagina corrente
◼ esempi di link relativi (supposti presenti nella pagina
http://www.lioy.it/01nbe/esame.html)

link relativo link assoluto


biblio.html http://www.lioy.it/01nbe/biblio.html
../cv.html http://www.lioy.it/cv.html
ris/a1.html http://www.lioy.it/01nbe/ris/a1.html
/faq.html http://www.lioy.it/faq.html

© A.Atzeni (Politecnico di Torino, 2024) 53


Protocol relative URL
◼ molte pagine disponibili sia come HTTP sia come HTTPS
◼ per mantenere la preferenza del client si può omettere lo
schema di accesso nella URL, così verrà usato lo stesso
schema della pagina corrente
◼ consideriamo il link <a href="//didattica.polito.it/">
◼ se è presente nella pagina http://www.polito.it allora verrà
acceduto come http://didattica.polito.it/
◼ se invece si trova nella pagina https://www.polito.it allora verrà
acceduto come https://didattica.polito.it/

© A.Lioy (Politecnico di Torino, 1994-2020) 54


Punti d’accesso a documenti

Link senza specifica di


un punto d’accesso Title

Address

Title doc01

Title doc02

Address

Address

© A.Lioy (Politecnico di Torino, 1994-2020) 55


Punti d’accesso a documenti
◼ nel documento “bersaglio” definire il punto d’accesso
tramite un’ancora con attributo NAME
<a name="cuc_ita">
La cucina italiana
</a>
◼ nel documento di partenza, includere nell’URL il nome del
punto di accesso
<a href="doc2.html#cuc_ita">
◼ il punto d'accesso può anche essere un qualsiasi elemento
identificato tramite il suo "id"
<h1 id="cuc_ita">
La cucina italiana
</h1>

© A.Atzeni (Politecnico di Torino, 2024) 56


Immagini
◼ <img src="polito.gif">
inserisce l'immagine contenuta nel file polito.gif
◼
◼ <img src="polito.gif"
alt="Foto del Politecnico">
◼ inserisce l'immagine polito.gif, ma, se il browser non prevede
l’uso della grafica, viene visualizzato il testo
Foto del Politecnico
◼ differenza tra inserimento o link ad un'immagine:
◼ <img src="polito.gif">
(inserisce l'immagine nella pagina)
◼ <a href="polito.gif"> (seguendo il link si
visita una pagina che contiene solo l'immagine)

© A.Atzeni (Politecnico di Torino, 2024) 57


Formato delle immagini
◼ <img width=w height=h ... >
◼ dimensione dell'immagine
◼ permette visualizzazione più rapida della pagina (non
occorre aver caricato tutta l’immagine per sapere quale
spazio occupa)
◼ <img vspace=v hspace=h ... >
(solo HTML4) distanze minime tra testo e immagine
◼
◼ <img border=b ... >
◼ (solo HTML4) dimensione del bordo

© A.Atzeni (Politecnico di Torino, 2024) 58


Dove memorizzare le immagini?
◼ le immagini (come altre parti della pagina, quali i file CSS o
JS) devono essere:
◼ sullo stesso server della pagina che le include
◼ o almeno nello stesso dominio di rete
◼ ciò per evitare problemi di attesa nel caricamento della
pagina (che si potrebbero verificare se l'immagine fosse su
un server diverso temporaneamente non raggiungibile)
◼ prestare molta attenzione all'uso di immagini protette da
copyright

© A.Atzeni (Politecnico di Torino, 2024) 59


Immagini cliccabili
◼ aree di un'immagine cliccabili
◼ coordinate
◼ (0,0) è in alto a sinistra
◼ relative a width/height definite in HTML
◼ aree definibili:
◼ rettangoli (shape=rect)
◼ cerchi (shape=circle)
◼ interno di un poligono irregolare (shape=polygon)
◼ tutta l'area (shape=default)
◼ principio del first-match
◼ importante quando due aree si sovrappongono!

© A.Atzeni (Politecnico di Torino, 2024) 60


Immagini cliccabili: esempio
<img src="colori.png" alt="colori"
usemap="#nomicolori" width="100" height="100"/>

<map name="nomicolori">
<area shape="rect" coords="0,0,50,100"
alt="blue" href="blue.html"/>
<area shape="circle" coords="75,25,25"
alt="red" href="red.html"/>
<area shape="circle" coords="75,75,25"
alt="green" href="green.html"/>
<area shape="default"
alt="white" href="white.html"/>
</map> colori.html
colori_errati.html
© A.Atzeni (Politecnico di Torino, 2024) 61
Tabelle
◼ <table ... > ... </table>
◼ attributi:
◼ align= left / center / right
◼ border= dimensione
◼ width= dimensione (n_pixel o %)
◼ cellspacing= dimensione
◼ cellpadding= dimensione
◼ summary= testo
◼ frame= void / above / below / hsides / lhs / rhs / vsides / box
/ border
◼ rules = none / groups / rows / cols / all

© A.Atzeni (Politecnico di Torino, 2024) 62


Dati in tabella
◼ <tr ... > ... </tr>
◼ una riga della tabella
◼ contiene celle normali (<td>) o di intestazione (<th>)
◼ <th ... > ... </th>
<td ... > ... </td>
un dato (oppure un’intestazione = heading) della tabella, che
può occupare più celle in orizzontale o verticale
◼ colspan= numero-colonne
◼ rowspan= numero-righe

© A.Atzeni (Politecnico di Torino, 2024) 63


Elementi (opzionali) di una tabella
◼ <thead>
◼ l’intestazione
◼ <tbody>
◼ il contenuto
◼ <tfoot>
◼ il footer
◼ <caption>
◼ la didascalia

© A.Atzeni (Politecnico di Torino, 2024) 64


Table: attributi di riga, header e dati
◼ align= allineamento-orizzontale
◼ left, center, right
◼ valign= allineamento-verticale
◼ top, middle, bottom
◼ baseline
◼ bgcolor= colore dello sfondo

© A.Atzeni (Politecnico di Torino, 2024) 65


Table: gruppi di colonne
◼ <colgroup span=n width=… align=… valign=…>
◼ gruppo strutturale di n colonne, ciascuna con gli attributi
specificati
◼ <col span=n width=… align=… valign=…>
◼ definizione di attributi per una o più colonne

© A.Atzeni (Politecnico di Torino, 2024) 66


DIV e SPAN
◼ introdotti in HTML 4.0
◼ servono a raggruppare parti per poter applicare più
facilmente una formattazione
◼ NON sono tag semantici
◼ DIV identifica un blocco (tipicamente i browser vanno a capo
alla fine del blocco)
◼ SPAN identifica una parte all’interno di un blocco
◼ molto usati (in HTML 4) per creare (con un opportuno CSS)
un layout di pagina senza usare table o frame
◼ “id” e “class” permettono i riferimenti al CSS
<div id="..." class="..."> ... </div>

<span id="..." class="..."> ... </span>


© A.Lioy (Politecnico di Torino, 1994-2020) 67
Etichette
◼ associare etichettare elementi
◼ a scopo visuale
◼ a scopo "programmatico"
• es. per aumentare il livello di accessibilità delle pagine
◼ <label> </label>
◼ definisce una "etichetta" testuale associata all'elemento che
contiene
◼ attributo "for" specifica l'elemento (tramite il suo id) a cui
l'etichetta si riferisce

© A.Atzeni (Politecnico di Torino, 2024) 68


Nuovi elementi HTML5
◼ Misure e scale
◼ <progress>, <meter>
◼ elementi grafici
◼ <svg>, <canvas>
◼ elementi multimediali
◼ <audio>
◼ <video>
◼ <source> e <track>
◼ figure
◼ <figure>, <figcaption>

© A.Atzeni (Politecnico di Torino, 2024) 69


Misurazioni
◼ <progress>
◼ Indica la percentuale di completamento
<label>
Uploading Document:
<progress value="70" max="100">70%</progress>
</label>

◼ <meter>
◼ Indica il valore di una misurazione all'interno di un intervallo

<label for="disk_c">Utilizzo disco C</label>


<meter id="disk_c" value="2" min="0" max="10">2 su 10</meter>
<label for="disk_d">Utilizzo disco D</label>
<meter id="disk_d" value="0.6">60%</meter>

© A.Atzeni (Politecnico di Torino, 2024) 70


Coordinate grafiche
◼ in HTML la pagina viene creata dall'alto in basso e quindi le
coordinate grafiche hanno l'asse Y orientato verso il basso

(0,0) X

© A.Atzeni (Politecnico di Torino, 2024) 71


SVG (Scalable Vector Graphics)
◼ SVG è un linguaggio XML per descrivere grafica 2D
◼ SVG 1.0 = W3C recommendation 4/9/2001
◼ SVG 1.1 (v2) = W3C recommendation 16/8/2011
◼ SVG 2.0 (Draft) = Editor's Draft 8/03/2023
• https://svgwg.org/
◼ possibile creare file grafici .svg (es. con inkscape)
◼ HTML5 ha tag SVG per disegnare nella pagina
◼ ogni elemento di SVG è disponibile nel DOM (es. se ne
possono cambiare le proprietà e definire eventi)
◼ ogni forma disegnata è un oggetto gestito dal browser (es.
se cambia un attributo il browser lo ridisegna subito ed
automaticamente)
◼ tutorial https://www.w3schools.com/graphics/svg_intro.asp
© A.Atzeni (Politecnico di Torino, 2024) 72
Esempio di grafica SVG
<svg width=200 height=100>
<rect width=200 height=100
style="fill:white;stroke-width:1;stroke:black"/>
<ellipse cx=100 cy=50 rx=85 ry=50 fill="blue"/>
<text fill="white" font-size="200%"
font-family="Verdana" x=70 y=60>SVG</text>
Che peccato, il tuo browser non supporta la
grafica SVG.
</svg>
svg.html

© A.Atzeni (Politecnico di Torino, 2024) 73


Esempio di file SVG
<?xml version="1.0" encoding="UTF-8"
standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg"
version="1.1" width="300" height="200"
viewBox="0 0 3 2">
<rect width=1 height=2 x=0 fill="#008d46"/>
<rect width=1 height=2 x=1 fill="#ffffff"/>
<rect width=1 height=2 x=2 fill="#d2232c"/>
</svg> svg_italy.svg

© A.Atzeni (Politecnico di Torino, 2024) 74


Canvas
◼ tag HTML che crea un'area per disegnare tramite script
client-side (es. JS)
◼ è possibile disegnare grafica 2D al volo con uno script
◼ gli oggetti grafici in Canvas sono disegnati pixel per pixel e
poi "dimenticati" dal browser, quindi se qualcosa deve
cambiare bisogna ridisegnare tutto (incluse le eventuali parti
della pagina che erano state "coperte" dalla grafica)
◼ tutorial
https://www.w3schools.com/graphics/canvas_intro.asp

© A.Atzeni (Politecnico di Torino, 2024) 75


Esempio di grafica con Canvas
<canvas id="myCanvas" width=200 height=100
style="border:1px solid black">
Che peccato, il tuo browser non supporta CANVAS.
</canvas>
<button onclick="drawLine()">Premimi per
disegnare una riga diagonale </button>

<!– note: this is Javscript! -→


function drawLine() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0); ctx.lineTo(200,100);
ctx.stroke();
}
canvas.html
© A.Atzeni (Politecnico di Torino, 2024) 76
Confronto grafica SVG-CANVAS
SVG CANVAS
Basata sulle forme Basata sui pixel (forme =
geometriche (vettori) insieme di pixel)
Indipendente da risoluzione Dipendente dalla risoluzione
(scalabile) (non scalabile)
Supporta gli eventi Non supporta gli eventi
Capacità testuali avanzate Capacità testuali semplici
Non adatto per grafica Adatto per grafica
complessa (es. videogiochi) complessa (es. videogiochi)
Lento ma adatto per Veloce ma non adatto per
rendering complessi (es. rendering complessi
Google maps)

© A.Atzeni (Politecnico di Torino, 2024) 77


Controllo audio
◼ tag <audio>
◼ attributi: autoplay, controls, loop, muted, preload={auto,
metadata, none}, src=URI
◼ formati supportati:
◼ MP3, type=audio/mpeg
◼ Ogg, type=audio/ogg
◼ Wav, type=audio/wav

<audio controls>
<source src="ciao.mp3" type="audio/mpeg">
<source src="ciao.wav" type="audio/wav">
Your browser does not support the AUDIO tag.
</audio>
audio.html
© A.Atzeni (Politecnico di Torino, 2024) 78
Controllo video
◼ tag <video>
◼ attributi: autoplay, controls, height, loop, muted, poster,
preload={auto, metadata, none}, src=URI, width
◼ formati supportati:
◼ MP4, type=video/mp4
◼ Ogg, type=video/ogg
◼ WebM, type=video/webm

<video controls>
<source src="ciao.mp3" type="audio/mpeg">
Your browser does not support the VIDEO tag.
</video>

© A.Atzeni (Politecnico di Torino, 2024) 79


Track
◼ specifica una traccia testuale da visualizzare assieme ad un
audio (es. testo della canzone) o ad un video (es. sottotitoli)
◼ attributi: kind={captions, chapters, descriptions, metadata,
subtitles}, label, src=URI, srclang
◼ NOTA: attualmente funziona solo col tag video (ma funziona
anche con sorgente audio)

<video controls>
<source src="song.mp3" type="audio/mpeg">
<track src="song.vtt" kind="subtitles"
srclang="en" label="Lyrics" default>
Your browser does not support the VIDEO tag.
</video>
video_track.html
© A.Atzeni (Politecnico di Torino, 2024) 80
Figure, Figcaption
◼ <figure> crea un blocco contenente una figura
◼ <figcaption> crea una didascalia per la figura al cui interno è
inserita

<figure>
<img src="voti.png" width="30em">
<figcaption>Istogramma dei voti</figcaption>
</figure>

© A.Atzeni (Politecnico di Torino, 2024) 81


Inline frame (iframe)
◼ una pagina esterna inserita come se fosse un singolo
oggetto (es. come un’immagine)
◼ collocabile quindi in qualunque punto della pagina
◼ molto usato per inserire video YouTube ed altro
◼ sintassi:
◼ <iframe src=uri …> . . . </iframe>
◼ height=… width=… name=… frameborder=… marginwidth=…
marginheight=… scrolling=yes/no/auto align=… vspace=…
hspace=…
◼ testo all’interno del tag viene ignorato dai browser che
capiscono iframe e visualizzato dagli altri (usarlo per
segnalazione di errore)

© A.Atzeni (Politecnico di Torino, 2024) 82


Esempio iframe con Youtube
◼ possibili parametri:
◼ autoplay=0 (default) o 1
◼ loop=0 (default) o 1
◼ controls=0 o 1 (default)
◼ playlist=elenco_di_video_separati_da_virgola (in aggiunta al
primo presente direttamente nella URI)
◼ documentazione completa
◼ https://developers.google.com/youtube/player_parameters

<iframe width="420" height="315"


src="https://www.youtube.com/embed/8unDAPuGilo?auto
play=1&loop=1&playlist=8unDAPuGilo&controls=0">
</iframe>
video_youtube.html

© A.Atzeni (Politecnico di Torino, 2024) 83


Attributi generali dei tag HTML
◼ id = "stringa"
◼ assegna un identificativo univoco ad un elemento
• àncora per un link
◼ riferimento 1) ad un elemento da parte di uno script, 2) ad un
campo di un form, 3) per uno stile specifico in CSS
◼ class = "class1 class2 …"
◼ assegna un identificativo condiviso da più elementi
◼ elenco di classi CSS da applicarsi all'elemento
◼ title = "titolo"
◼ visualizzato quando si punta l'elemento
◼ lang = "lingua"
◼ specifica la lingua del contenuto
◼ es:per lettura automatica del testo (valori: en it fr de …)
© A.Atzeni (Politecnico di Torino, 2024) 84

Potrebbero piacerti anche