Scribd
Carica
0 visualizzazioni

03_hypertext_markup_language

Il documento tratta dei fondamenti di HTML, evidenziando la sua importanza per la creazione di pagine web attraverso l'uso di markup e strutture gerarchiche. Viene descritto il Document Object Model (DOM) come rappresentazione interna di un documento HTML, che consente la manipolazione dinamica dei contenuti tramite script. Inoltre, si discute il ruolo di SGML come metalinguaggio per definire linguaggi di markup, incluso HTML.

Caricato da

roberto.laforgia03
Copyright
© © All Rights Reserved
Formati disponibili
Scarica in formato PDF, TXT o leggi online su Scribd
0 visualizzazioni

03_hypertext_markup_language

Il documento tratta dei fondamenti di HTML, evidenziando la sua importanza per la creazione di pagine web attraverso l'uso di markup e strutture gerarchiche. Viene descritto il Document Object Model (DOM) come rappresentazione interna di un documento HTML, che consente la manipolazione dinamica dei contenuti tramite script. Inoltre, si discute il ruolo di SGML come metalinguaggio per definire linguaggi di markup, incluso HTML.

Caricato da

roberto.laforgia03
Copyright
© © All Rights Reserved
Formati disponibili
Scarica in formato PDF, TXT o leggi online su Scribd
Sei sulla pagina 1/ 61

Fondamenti del Web

Ingegneria del Software e Fondamenti Web

Corso di Laurea in Ingegneria


Informatica e dell’Automazione
Anno Accademico 2023/2024

Prof. Antonio Ferrara

Antonio Ferrara | Fondamenti del Web (Ingegneria del Software e Fondamenti Web)
3 HyperText
Markup Language
Antonio Ferrara | Fondamenti del Web (Ingegneria del Software e Fondamenti Web)
Introduzione
ad HTML
L’obiettivo principale di HTML è quello di permettere i riferimenti incrociati fra documenti mediante hyperlinks
(collegamenti ipertestuali), ovvero di rendere i documenti ipertesti

HTML fu sviluppato da Berners-Lee al CERN di Ginevra assieme ad HTTP, sulla base del metalinguaggio SGML
Attualmente è mantenuto da W3C ed è giunto alla versione 5

Esso è il linguaggio principale per la descrizione della struttura delle pagine Web (impaginazione e formattazione)
Ad esempio ci permette di definire titoli, paragrafi, tabelle, elenchi, form, …
Oggi HTML è usato principalmente per disaccoppiare la parte logica e semantica di una pagina web dalla sua
rappresentazione

Oggi i documenti HTML sono in grado di incorporare molte tecnologie, che offrono la possibilità di aggiungere al
documento ipertestuale controlli sofisticati sulla resa grafica, interazioni dinamiche con l'utente, animazioni interattive e
contenuti multimediali

La rappresentazione della pagina web secondo la descrizione di HTML è effettuata dal browser

Antonio Ferrara | Fondamenti del Web (Ingegneria del Software e Fondamenti Web)
Introduzione
ad HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Sample page</title>
</head>
<body>
<h1>Sample page</h1>
<p>This is a <a href="demo.html">simple</a> sample.</p>
<!-- this is a comment -->
</body>
</html>

• Un documento HTML rappresenta un insieme di elementi/testo annidati


• Ogni elemento è rappresentato da un tag di inizio (come <body>), un contenuto e un tag di fine (come </body>)
• Gli elementi vuoti (in generale, quelli di embedding) sono elementi senza contenuto e possono non essere chiusi
(es. <img src="immagine.png">)
• Gli elementi forniscono significato al testo (es. h1), informazioni sulla formattazione (es. b) o permettono di inserire elementi
addizionali (es. img)
• I tag devono essere annidati senza alcun tipo di sovrapposizione (<p>Questo <em>codice</p> è</em> errato)

Antonio Ferrara | Fondamenti del Web (Ingegneria del Software e Fondamenti Web)
Elementi
in HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Sample page</title>
</head>
<body>
<h1>Sample page</h1>
<p>This is a <a href="demo.html">simple</a> sample.</p>
<!-- this is a comment -->
</body>
</html>

• In generale, un documento HTML può contenere elementi block-level ed elementi inline


• Un elemento block-level forma un blocco strutturale e separato all’interno della pagina (es. titoli, tabelle, header, footer,
paragrafi, …), e può essere annidato all’interno di un altro elemento block-level
• Un elemento inline è generalmente contenuto all’interno di elementi block-level e agisce normalmente sul testo
• HTML5 ha superato questa semplice classificazione con una nuova classificazione più accurata ma complessa

Antonio Ferrara | Fondamenti del Web (Ingegneria del Software e Fondamenti Web)
Elementi
in HTML Ogni elemento definito in HTML5 ha un content model, ovvero una descrizione dei
contenuti attesi
Un elemento HTML5 deve avere contenuti che rispecchino il suo content model

• Metadata è un tipo di contenuto che definisce la presentazione o il comportamento del


resto del contenuto o la relazione del documento con altri documenti (es. title, style,
script, link, …)
• Flow rappresenta quasi tutti gli elementi contenuti nel corpo del documento e le
applicazioni
• Sectioning è un tipo di contenuto che definisce gli scope di header e footer
• Heading rappresenta le intestazioni delle sezioni
• Phrasing rappresenta il testo del documento e gli elementi che permettono di
formattarlo all’interno del suo paragrafo (una “esecuzione” di phrasing content
rappresenta il concetto di paragrafo)
• Embedded è il contenuto incorporato nel documento
• Interactive è quel tipo di contenuto che permette l’interazione dell’utente (anche col
testo)

Antonio Ferrara | Fondamenti del Web (Ingegneria del Software e Fondamenti Web)
Attributi
in HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Sample page</title>
</head>
<body>
<h1>Sample page</h1>
<p>This is a <a href="demo.html">simple</a> sample.</p>
<!-- this is a comment -->
</body>
</html>

• Ogni tag può avere degli attributi nel tag di inizio (come href="demo.html") che controllano il modo in cui esso funziona
• Le virgolette (o gli apici) possono essere omessi dai valori degli attributi se questi non contengono sono spazi
• Alcuni attributi possono essere trovati senza valore, in quanto si tratta di attributi booleani il cui unico valore concesso è, in
generale, il nome dell’attributo stesso
(es. <input type="text" disabled=“disabled"> può essere scritto come <input type="text" disabled> e realizza
l’opposto di <input type="text">)
• Alcuni attributi sono comuni a tutti gli elementi di HTML (fra questi troviamo class, hidden, id, lang, style, title)
Antonio Ferrara | Fondamenti del Web (Ingegneria del Software e Fondamenti Web)
Dal documento HTML
al Document Object Model - DOCTYPE: html
- html lang="en"
- head
<!DOCTYPE html>
- #text:
<html lang="en">
<head> - title
- #text: Sample page
<title>Sample page</title>
- #text:
</head>
<body> - #text:
<h1>Sample page</h1> - body
<p>This is a <a href="demo.html">simple</a> sample.</p> - #text:
<!-- this is a comment --> - h1
</body> - #text: Sample page
</html> - #text:
- p
- #text: This is a
• La struttura che il browser utilizza per rappresentare un documento HTML è - a href="demo.html"
- #text: simple
quella del Document Object Model (DOM) ottenuto trasformando il documento - #text: sample.
in un albero (operazione di parsing) - #text:
• I nodi dell’albero sono, in generale, un Document, e altri nodi (vedi più avanti) fra - #comment: this is a comment
- #text:
cui Element, Text e Comment

Antonio Ferrara | Fondamenti del Web (Ingegneria del Software e Fondamenti Web)
Dal documento HTML
al Document Object Model
L’albero DOM costruito può essere quindi manipolato da script Web API
presenti all’interno della pagina e inglobati mediante l’elemento Troverai questo
script contenitore quando

Ogni elemento, infatti, ha delle API che permettono di richiameremo alcune


API importanti!
manipolarlo

In generale, le API del DOM HTML permettono di:


<form name="main">
• Accedere e controllare gli elementi HTML Result: <output name="result"></output>
• Accedere e manipolare i dati di un form <a href='link.html'>Link</a>
<script>
• Interagire con il contenuto di immagini e con il contenuto di document.forms.main.elements.result.value = 'Hello World’;
elementi canvas var a = document.links[0];
a.href = 'sample.html';
• Gestire i media connessi ed elementi media (audio e video) a.protocol = 'https';
• Effettuare il drag and drop di contenuti a.setAttribute('href', 'https://example.com/');
</script>
• Accedere alla cronologia di navigazione del browser
</form>
• Accedere e manipolare cookie e storage

Antonio Ferrara | Fondamenti del Web (Ingegneria del Software e Fondamenti Web)
Il Document
Object Model
Window

Document

Element
DocumentType
Il Document Object Model (DOM) permette di descrivere la struttura di un
documento, rappresentato mediante un’istanza dell’interfaccia Document
Questo oggetto rappresenta una pagina caricata nel browser ed è l’entry point per il
Element (html)
contenuto della pagina, ovvero contiene l’albero DOM
Element

Ogni nodo dell’albero DOM è basato sull’interfaccia Node (classe base astratta) che Element

fornisce proprietà per ottenere informazioni sul nodo e metodi per creare, eliminare
e organizzare i nodi all’interno del DOM

Gli oggetti Node possono essere di diversi tipi, fra cui Document, DocumentType,
Element, Text, Comment o ProcessingInstruction
Esempio di documento
con cinque nodi (tre elementi),
inseriti in un nodo Window

Antonio Ferrara | Fondamenti del Web (Ingegneria del Software e Fondamenti Web)
L’interfaccia
Node Come detto, ogni nodo implementa proprietà e
metodi che permettono di muoversi all’interno
<!doctype html> dell’albero ed estenderlo
<html>
<head> childNodes firstChild
<title>My home page</title> body
</head> 0 h1
<body>
My home page
<h1>My home page</h1>
<p>Hello, I am Marijn and this is my home page.</p> previousSibling

<p>I also wrote a book! Read it 1 p


<a href="http://eloquentjavascript.net">here</a>.</p> Hello, I am Marijn... parentNode
</body> nextSibling
</html>
2 p
I also wrote a book! ...
Web API
lastChild
Node.baseURI Node.nodeName Node.previousSibling
Node.childNodes Node.nodeType Node.appendChild() Web API
Node.firstChild Node.nodeValue Node.insertBefore()
Node.lastChild Node.parentNode Node.removeChild() Element.innerHTML
Node.nextSibling Node.parentElement Node.replaceChild() Element.outerHTML

Antonio Ferrara | Fondamenti del Web (Ingegneria del Software e Fondamenti Web)
L’interfaccia
Document
Ogni documento (HTML e XML) è rappresentato all’interno di un DOM come un oggetto dell’interfaccia Document
L’interfaccia Document descrive le proprietà e i metodi comuni a ogni tipo di documento
L’elemento documento è il nodo Element figlio di un documento, è accessibile con la proprietà documentElement, ed è
rappresentato dall’elemento HTML html
Anche un nodo DocumentType è figlio diretto di un documento

Web API

Document.URL Document.readyState
Document.doctype Document.title
Document.documentElement Document.append()
Document.forms Document.createElement()
Document.links Document.createEvent()
Document.images Document.createTextNode()
Document.cookie Document.getElementById()
Document.lastModified Document.getElementsByClassName()
Document.location Document.getElementsByTagName()

Antonio Ferrara | Fondamenti del Web (Ingegneria del Software e Fondamenti Web)
Definizione di
HTML
HTML è stato definito come un’applicazione dello Standard
Generalized Markup Language (SGML), un metalinguaggio per la
definizione di linguaggi di markup
SGML discende da GML (1969) ed è diventato uno standard ISO nel
1986

L’obiettivo di SGML era quello di permettere di definire annotazioni


e schemi di scrittura human- e machine-readable collettivamente
chiamati markup:
• Layout di pagina
• Caratteri
• Formattazione
• Istruzioni per la stampa
• Istruzioni di elaborazione

In generale, i documenti delle applicazioni SGML non si focalizzano primariamente sulla resa visiva, quanto invece sui ruoli
logico-semantici di ciascuna parte del documento
Antonio Ferrara | Fondamenti del Web (Ingegneria del Software e Fondamenti Web)
Linguaggi
di markup
Il termine markup deriva dall’ambiente tipografico, dove alcune parti del contenuto di un documento veniva contrassegnate
(appunto, marcate) allo scopo di segnalarle all’editore
Qualunque indicazione “esterna” al testo (es. punteggiatura, spazi, sottolineature, evidenziazioni) rappresentano la marcatura di
un documento

• Markup puntuazionale: consiste nell’usare un insieme prefissato di segni per fornire informazioni sintattiche sul testo
• Markup presentazionale: consiste nell’indicare direttive grafiche per rendere più chiara la presentazione del contenuto
• Markup procedurale: consiste nell’indicare con precisione ad un sistema automatico che effetto attivare e che procedura (serie
di istruzioni) eseguire nella visualizzazione del contenuto (es. LaTeX)
• Markup descrittivo: consiste nell’identificare strutturalmente il tipo di ogni elemento del documento

Il markup può inoltre distinguersi in:


• specifico, se dipende dal sistema nel quale viene generato e usato e contiene informazioni per la resa in quel sistema
• generico (o descrittivo o di contenuto), se contiene informazioni generiche su struttura e contenuto del documento che saranno
renderizzate diversamente a seconda del sistema all’interno del quale il documento sarà fruito

Antonio Ferrara | Fondamenti del Web (Ingegneria del Software e Fondamenti Web)
Metalinguaggi
di markup (SGML)
Un linguaggio di metamarkup (o metalinguaggio di markup) come SGML permette quindi di fornire regole di interpretazione del
markup e di estendere o controllare il significato del markup

In particolare, SGML è un metalinguaggio per la definizione di markup descrittivo mediante elementi delimitati da tag e inseriti
all’interno di una struttura gerarchica (la presentazione è rimandata a fogli di stile esterni)

Un’applicazione/documento SGML (come HTML) consiste di tre parti:


• una dichiarazione SGML, che specifica, fra le altre cose, caratteri e delimitatori che possono apparire nell’applicazione
• un Document Type Definition (DTD), che definisce costrutti di markup validi e può includere definizioni addizionali (come entità
numeriche)
• istanza del documento che contiene contenuto e usa il markup definito nel DTD

Antonio Ferrara | Fondamenti del Web (Ingegneria del Software e Fondamenti Web)
Metalinguaggi
di markup (SGML)
15 marzo 2022

Caro Giovanni,
<!DOCTYPE letter [
come va? Quando ti decidi a venire a trovarmi?
<!ELEMENT letter - - (data, saluti, corpo,
chiusura, firma) > Ci sentiamo presto
<!ATTRLIST letter Fabio
filecode NUMBER #REQUIRED
secret (yes|no) “no”>
<!ELEMENT corpo - - (para)*> <letter filecode=“9710260023”>
<!ELEMENT (data, saluti, chiusura, firma) <data>15 marzo 2022</data>
- - (#PCDATA)> <saluti>&saluto Giovanni, </saluti>
<!ELEMENT para - - (#PCDATA | enfasi)> <corpo>
<!ELEMENT enfasi - - (#PCDATA)> <para>come va?</para>
<!ENTITY saluto “Caro”> <para>Quando ti <enfasi> decidi
]> </enfasi> a venire a trovarmi?
</para>
</corpo>
<chiusura>Ci sentiamo presto</chiusura>
<firma>Fabio</firma>
</letter>

Antonio Ferrara | Fondamenti del Web (Ingegneria del Software e Fondamenti Web)
Dichiarazione
SGML
Set di caratteri

Partendo da un BASESET noto di caratteri, permette di specificare un nuovo set DESCSET che può eventualmente mappare
in maniera differente i bit ai caratteri del BASESET

Sintassi concreta

Introduce i dettagli della sintassi concreta per il documento, ovvero quali delimitatori, caratteri speciali, e lunghezze
ammettere
In particolare, DELIM permette di specificare i caratteri dei delimitatori: STAGO (Start of TAG Open, <), ETAGO (End of TAG
Open, </), TAGC (TAG Close, >)

Antonio Ferrara | Fondamenti del Web (Ingegneria del Software e Fondamenti Web)
Document Type Definition
di SGML
La definizione del tipo di documento permette di specificare le regole che consentono di verificare la correttezza
strutturale di un documento
Vengono elencati gli elementi ammissibili, il contesto in cui possono apparire, ed altri eventuali vincoli strutturali
Concretamente, permette di modellare una classe di documenti mediante la sintassi dei suoi costrutti di markup
Può essere dichiarato all’interno o all’esterno del documento

<!DOCTYPE mydoc SYSTEM "document.dtd">

<!DOCTYPE mydoc [
<!ELEMENT ...
]>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"


"http://www.w3.org/TR/html4/strict.dtd">

Antonio Ferrara | Fondamenti del Web (Ingegneria del Software e Fondamenti Web)
Document Type Definition
di SGML
Elementi Sono le parti di un documento dotate di senso proprio
La definizione di un elemento deve specificare il suo nome, informazioni su tag di inizio e fine e la struttura
del suo contenuto: <!ELEMENT NOME ST ET CONTENTMODEL>

<!ELEMENT OL - - (LI)+>
<!ELEMENT BR - O EMPTY>
<!ELEMENT OPTION - O #PCDATA>
<!ELEMENT TABLE - - (CAPTION?, (COL* | COLGROUP*), THEAD?, TFOOT?, TBODY+)>

Start tag (ST) ed end tag (ET) possono essere obbligatori (-) o meno (O)
Il content model specifica quali sono gli elementi leciti all’interno di un elemento, in quale numero e quale
posizione rispetto agli altri
Può contenere ANY, EMPTY, #PCDATA o un content model più elementare
Il separatore , rappresenta un AND ordinato, mentre | rappresenta un OR
I quantificatori sono i classici ? (0 o 1), * (0 o più), + (1 o più)

Antonio Ferrara | Fondamenti del Web (Ingegneria del Software e Fondamenti Web)
Document Type Definition
di SGML
Elementi <TABLE>
<THEAD><TR>Table 1
<TBODY><TR><TD>1<TD>2<TD>3
<TR><TD>6<TD>8<TD>5
<TBODY><TR><TD>23456</TD><TD>12345</TD>
<!ELEMENT TABLE - - (CAPTION?, (COL* | COLGROUP*), THEAD?, </TABLE>
TFOOT?, TBODY+)>
<!ELEMENT THEAD - O (TR)+ -- table header --> " Tabella valida
<!ELEMENT TFOOT - O (TR)+ -- table footer -->
<!ELEMENT TBODY O O (TR)+ -- table body -->
<!ELEMENT COLGROUP - O (COL)* -- table column group -->
<!ELEMENT COL - O EMPTY -- table column --> <TABLE>
<!ELEMENT TR - O (TH|TD)+ -- table row --> <THEAD><TR>Table 2
<TBODY><TR><TD>1<TD>2<TD>3
<TR><TD>6<TD>8<TD>5
Estratto di HTML 4.01 Strict DTD <TFOOT><TR>Marzo 2022</TR>
</TABLE>

# Tabella non valida

Antonio Ferrara | Fondamenti del Web (Ingegneria del Software e Fondamenti Web)
Document Type Definition
di SGML
Attributi La dichiarazione con ATTLIST permette di specificare quali attributi possono caratterizzare ciascun elemento,
e per ciascuno indicare il tipo di dato (es. CDATA, NUMBER, ID, una lista come (left|right|center), o
un’entità come Talign)
La terza colonna prevede di indicare un valore di default letterale, oppure #REQUIRED, o #FIXED con un
valore preciso, o anche #IMPLIED se l’applicazione può determinarne uno internamente
<!ATTLIST TABLE
width CDATA #IMPLIED
cols NUMBER #IMPLIED
align %Talign; #IMPLIED
>

Entità SGML permette anche di definire entità che funzionano da macro che possono essere espanse altrove nel DTD
<!ENTITY % TAlign “(left|center|right)">
<!ENTITY % heading "H1|H2|H3|H4|H5|H6">

È necessario definire entità anche per rappresentare quei caratteri riservati al markup che possono essere richiamati
nel documento come &entity_name; o &#entity_number
Ad es. <, >, &, ", ' sono espressi come &lt;, &gt;, &amp;, &quot; e &apos; rispettivamente, o come &#60;,
&#62;, &#38;, &#34; e &#39;
Antonio Ferrara | Fondamenti del Web (Ingegneria del Software e Fondamenti Web)
Cenni
di XML
XML (eXtensible Markup Language) è, come SGML, un metalinguaggio di markup
Esso nasce, infatti, come un sottoinsieme più rigido di SGML, avendo un set di caratteri e una sintassi concreta fissati

<?xml version="1.0" encoding="UTF-8"?> La creazione di nuovi linguaggi XML è basata principalmente su


<utenti> due possibilità:
<utente anni="20"> • DTD: le Document Type Definition di XML sono simili a quelle di
<nome>Ema</nome> SGML ma sono più rigide in quanto rendono impossibile definire
<indirizzo>Torino</indirizzo>
strutture con tag omessi o violazione di vincoli di nesting
</utente>
• XML Schema: fornisce maggiore flessibilità nella definizione dei
<utente anni="54">
<nome>Max</nome> vincoli; il linguaggio di XML Schema è a sua volta un’applicazione
<indirizzo>Roma</indirizzo> di XML, così che gli sviluppatori possono usare la stessa sintassi
</utente> per definire il documento e i suoi vincoli
</utenti>

Antonio Ferrara | Fondamenti del Web (Ingegneria del Software e Fondamenti Web)
Cenni
di XML
Struttura di un documento XML

• Ogni documento XML ha una dichiarazione e un singolo


elemento radice che contiene tutti gli altri elementi
• I tag iniziale e finale dell’elemento radice non possono essere nel
contesto di altri elementi
• Gli elementi XML possono essere non vuoti (es. <book>…</
book>) oppure vuoti (es. <pages … />, chiusi contestualmente
alla loro apertura) e possono contenere attributi con valori fra
virgolette
• Il parsing di un documento XML porta alla realizzazione di un
Document Object Model

Antonio Ferrara | Fondamenti del Web (Ingegneria del Software e Fondamenti Web)
Cenni
di XML
XML DTD

<?xml version="1.0" encoding="UTF-8"?> <?xml version=“1.0” encoding=“UTF-8”?>


<!DOCTYPE books SYSTEM "books.dtd"> <!ELEMENT books (book+)>
<books> <!ELEMENT book (title, author+, summary?)>
<book> <!ELEMENT title (#PCDATA)>
<title>Fondamenti del Web</title> <!ELEMENT author EMPTY>
<author firstName=“Mario” lastName=“Rossi” /> <!ATTLIST author
</book> firstName CDATA #REQUIRED
</books> lastName CDATA #REQUIRED
>

Molto simile al DTD di SGML, ma più semplice


Non richiede di specificare informazioni sui tag di apertura e chiusura

Il DTD fornisce gli strumenti per definire vincoli di base ma rende difficile la definizione di vincoli più complessi
Inoltre, risulta impossibile definire vincoli di tipo semantico (es. agli attributi di author vengono assegnati valori numerici)

Antonio Ferrara | Fondamenti del Web (Ingegneria del Software e Fondamenti Web)
Cenni
di XML
XML Schema Definition (XSD)

La specifica XSD è stata introdotta nel W3C dopo l’introduzione di XML e non ha alcun corrispondente in SGML
Rappresenta un’alternativa al DTD che fornisce una tipizzazione più forte e utilizza la sintassi XML

XML Schema supporta tipi di dati semplici e complessi:


• I tipi di dati semplici sono definiti imponendo vincoli addizionali sui tipi built-in
• I tipi di dati complessi sono composti ricorsivamente da tipi di dati semplici e complessi
Poter esprimere vincoli sofisticati permette di alleggerire la logica applicativa per il controllo di vincoli

I tipi di dati disponibili come built-in in XSD sono più ricchi e flessibili di quelli definiti in XSD

XSD, inoltre, introduce il supporto ai namespace, ovvero nomi qualificati che permettono di distinguere elementi di diverse
applicazioni XML

Antonio Ferrara | Fondamenti del Web (Ingegneria del Software e Fondamenti Web)
Cenni
di XML
Symple Type con re
strizioni
<xs:element name
=“age”>
XML Schema Definition (XSD) <xs:simpleType>
<xs:restriction
base=“xs:integer
<xs:minInclusive ”>
<?xml version="1.0" encoding="UTF-8"?> value=“0”>
<xs:maxInclusive
<xs:schema xmlns:xs=“http://www.w3.org/2001/XMLSchema"> </xs:restriction
value”120”>
>
<xs:element name="books"> </xs:simpleType>
<xs:complexType> </xs:element>

<xs:sequence>
<xs:element name="title" type="xs:string" />
<xs:element name="author" minOccurs="1" maxOccurs=“unbounded”>
<xs:complexType>
<xs:attribute name="firstName" type="xs:string" user="required" />
<xs:attribute name="lastName" type="xs:string" user="required" />
</xs:complexType>
</xs:element>
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:schema>
Antonio Ferrara | Fondamenti del Web (Ingegneria del Software e Fondamenti Web)
Cenni
di XML
Documenti ben formati e validi

Un documento XML è ben formato se include una dichiarazione del documento, soddisfa l’annidamento degli elementi ed altri
vincoli sintattici, e non include entità non definite
Un documento XML ben formato è valido se soddisfa i vincoli specificati nel DTD o nello schema associato

Vantaggi e applicazioni di XML

XML permette di descrivere oggetti in formato testuale human-readable e machine-readable


XML consente la serializzazione (memorizzazione, trasmissione e ricostruzione) di una struttura dati arbitraria
XML standardizza il processo di accettazione di un formato unico da parte di due sistemi che si scambiano informazioni
Per questi motivi, XML è diventato uno dei formati più utilizzati per lo scambio di dati sulla rete Internet
Esempi pratici sono RSS, SVG e protocolli di comunicazione come SOAP e XMPP
I messaggi scambiati tramite la tecnica AJAX sono storicamente XML
Inoltre, XML ha posto le basi per la definizione del linguaggio XHTML, evoluzione di HTML basata su XML

Antonio Ferrara | Fondamenti del Web (Ingegneria del Software e Fondamenti Web)
Evoluzione
di HTML (e XHTML)
HTML 1.0 1992 Prima proposta da parte di Tim Berners-Lee

HTML 2.0 1994 Primi tentativi di astrazione


I moduli di rendering dei browser associavano comportamenti fissati con ogni elemento HTML

HTML 3.2 1996 Inclusione di tabelle, applet, etc.

HTML 4.0 1997 Miglioramento dell’astrazione mediante l’introduzione del meccanismo dei fogli di stile
Inserimento di meccanismi per lo scripting, supporto all’elemento OBJECT
Supporto a differenti lingue (caratteri internazionali, direzione del testo, punteggiatura, …)

HTML 4.01 1999 Standard approvato e raccomandato


Specifica 3 DTD: Strict, Transitional (che include gli elementi deprecati) e Frameset (che a Transitional
aggiunge anche i frame)

Antonio Ferrara | Fondamenti del Web (Ingegneria del Software e Fondamenti Web)
Evoluzione
di HTML (e XHTML)
XHTML 1.0 2000 Riformulazione di HTML 4.01 come applicazione XML (anziché SGML)
Elimina la “tolleranza” e i pochi vincoli di SGML (peggiorati dalla tolleranza dei browser)
Impone vincoli sintattici più rigorosi
Promuove l’interoperabilità con altri formati di dati
L’estensibilità rispetto a frammenti di altre applicazioni XML è garantita grazie ai namespace
I browser non devono essere tolleranti nei confronti di documenti non validi
XHTML richiede, ad esempio, di chiudere tag e inserire i valori degli attributi fra virgolette
XHTML è case-sensitive rispetto a nomi di elementi e attributi, mentre HTML no
Ha creato disallineamenti di validità con HTML (es. <br> vs <br /> vs <br></br>)
Il W3C decide di abbandonare HTML per dedicarsi a XHTML

XHTML 1.1 2001 Evoluzione di XHTML basata su modularizzazione del contenuto

2009 Lo sviluppo di XHTML 1.x e 2.x viene abbandonato dal W3C

Antonio Ferrara | Fondamenti del Web (Ingegneria del Software e Fondamenti Web)
Evoluzione
di HTML (e XHTML)
2004 Nasce un gruppo di lavoro alternativo al WC3 composto da Apple, Mozilla Foundation, Opera Software e
Google e denominato Web Hypertext Application Technology Working Group (WHATWG)
Cominciano lo sviluppo di una nuova versione di HTML

HTML 5.0 2008 HTML 5 rappresenta una “unificazione” di HTML e XHTML


I documenti HTML 5 dovrebbero essere documenti XML ben formati
La sintassi può essere html (non è basata su SGML, quindi non ha DTD) oppure XML
La gestione degli errori come in XHTML rimane rigorosissima
La gestione degli errori come HTML rimane più pragmatica ma è ora definita da precise regole e i
documenti “tag soup” vengono resi in maniera consistente sui diversi dispositivi
Fornisce cambiamenti incrementali rispetto a HTML 4.01 e XHTML 1.0:
• Supporto a contenuti multimediali
• Introduzione di API per lo sviluppo di applicazioni web complesse (Canvas, Web Messaging, Web
Workers, WebSocket, Server-sent Events, Web storage, File, WebRTC, …)
• Sezioni espandibili ed elementi per arricchire la semantica del documento

HTML 5.1 2014 HTML 5.1 2016 HTML 5.2 2017 HTML 5.3 2021 Raccomandazioni W3C

Antonio Ferrara | Fondamenti del Web (Ingegneria del Software e Fondamenti Web)
Significato
di un documento HTML
I documenti HTML sono delle descrizioni di contenuti interattivi indipendenti dalla loro rappresentazione
Uno stesso documento può essere renderizzato ad esempio sullo schermo di un qualunque dispositivo, su un sintetizzatore
vocale, o su un dispositivo braille

La definizione precisa di come tale renderizzazione deve essere effettuata può essere scritta mediante un linguaggio di stile
come CSS, che può essere incorporato all’interno del documento

<!DOCTYPE html>
<html lang="en">
<head>
<title>Sample styled page</title>
<style>body { background: navy; color: yellow; }</style>
</head>
<body>
<h1>Sample styled page</h1>
<p>This page is just a demo.</p>
</body>
</html>

Antonio Ferrara | Fondamenti del Web (Ingegneria del Software e Fondamenti Web)
Significato
di un documento HTML
È importante, oggi, separare la semantica del documento, descritta in HTML, dalla sua presentazione, da effettuare, appunto,
mediante linguaggi di stile

L’uso di markup di presentazione (come ad esempio <font color=“red”>) porta ad avere diversi problemi:
• Accessibilità ridotta su dispositivi differenti
• Alti costi di mantenimento per effettuare modifiche
• Documenti di dimensione maggiore

L’idea migliore è quella di utilizzare l’elemento style


Esiste anche l’attributo style per gli elementi, che permette di specificare direttamente lo stile di un elemento, ma è bene
utilizzarlo solo in fase di prototipazione

Molti degli elementi storici di HTML, per loro natura con effetti di presentazione, sono stati ridefiniti per rimanere media-
independent
Fra questi tag troviamo b, i, hr, s, small e u

Antonio Ferrara | Fondamenti del Web (Ingegneria del Software e Fondamenti Web)
Significato
di un documento HTML

<!DOCTYPE HTML> <body>


<html lang="en"> <h1>ACME Corporation</h1>
<head> <h2>The leaders in arbitrary fast delivery since 1920</h2>
<title>My Page</title> ...
</head>
<body>
# Sbagliato!
<h1>Welcome to my page</h1>
<body>
<p>I like cars and lorries and have a big Jeep!</p>
<hgroup>
<h2>Where I live</h2>
<h1>ACME Corporation</h1>
<p>I live in a small hut on a mountain!</p>
<h2>The leaders in arbitrary fast delivery since 1920</h2>
</body>
</hgroup>
</html>
...
" Corretto! " Corretto!

Antonio Ferrara | Fondamenti del Web (Ingegneria del Software e Fondamenti Web)
Significato
di un documento HTML
<!DOCTYPE HTML> <!DOCTYPE HTML>
<html lang="en-GB"> <html lang="en-GB">
<head> <title> Demonstration </title> </head> <head> <title> Demonstration </title> </head>
<body> <body>
<table> <blockquote>
<tr> <td> My favourite animal is the cat. </td> </tr> <p> My favourite animal is the cat. </p>
<tr> </blockquote>
<td> <p>
—<a href=“https://example.org/~ernest/"> —<a href="https://example.org/~ernest/">Ernest</a>,
<cite>Ernest</cite></a>, in an essay from 1992
in an essay from 1992 </p>
</td> </body>
</tr> </html>
</table>
</body>
</html> " Corretto!

# Sbagliato!

Antonio Ferrara | Fondamenti del Web (Ingegneria del Software e Fondamenti Web)
Significato
di un documento HTML
Vi sono elementi HTML che funzionano puramente da container per scopi stilistici, di scripting e di presentazione
Essi, cioè, non portano con sé alcun significato semantico

Si tratta, in particolare, dell’elemento block-level div (divisione o contenitore) e dell’elemento inline span

I div e gli span, comunque, sono estremamente utilizzati perché permettono di “raggruppare” e targetizzare elementi
rispetto a scopi di scripting o di layout
A questi scopi, li troviamo spesso insieme agli attributi class e id

<div class="comment">
<p class="author">Antonio</p>
<p class="text">This is my comment</p>
</div>

### Attenzione però a non forzare la mano: usiamo gli elementi giusti per fare le cose giuste!
<span style="font-size: 32px; margin: 21px 0; display: block;”>Top heading</span>

Antonio Ferrara | Fondamenti del Web (Ingegneria del Software e Fondamenti Web)
Struttura
di un documento HTML
Secondo la specifica, un documento HTML contiene di norma un DOCTYPE e un elemento documento html,
che contiene a sua volta un header head con dichiarazioni relative all’intero documento e un corpo body con il
contenuto vero e proprio del documento
• Spazi bianchi all’in
tern o di HTML sono opzio
re a li z z a to può suggerito un line brea nali, ma è
<!DOCTYPE HTML> Il documen to H TM L k dopo il DOCTYPE, d
n d o il v a li d a tore opo il tag
<html> essere valida to s e co <html> e dopo ogni
commento
• Spazi bianchi prim
<head> scelto a di html o prima di
head vengono in
li d a tore s e g n ale rà errori e generale eliminati, qu
<title>Hello</title> Il va elli dopo html vengo
ci come presenti alla fin no considerati
fornirà consigli prati e del testo
</head> rg • Per gli elementi inli
https://validator.w3.o ne: spazi e tab prima
di line break
<body> vengono eliminati, i ta
b e i line break sono c
<p>Welcome to this example.</p> come spazi, spazi con onvertiti
secutivi sono elimina
inizio e fine contenuto ti e spazi a
</body> sono eliminati
</html> • Per gli elementi a b
locco: ogni riga è tratt
ata come un
blocco e semplificata
come fosse un eleme
quindi vengono elimin nto inline,
Prima di HTML 5, DOCTYPE doveva riferirsi a un DTD ati i blocchi vuoti

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" “http://www.w3.org/TR/html4/loose.dtd">


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Antonio Ferrara | Fondamenti del Web (Ingegneria del Software e Fondamenti Web)
Head
di un documento
L’elemento head di un documento HTML non contiene contenuto visualizzato nel browser ma informazioni come titolo della
pagina, icona, link a risorse CSS e JS, metadati, etc.

<head lang="it-IT"> • title: permette di specificare il titolo del documento (visualizzato in


<meta charset=“utf-8”> alto e nei segnalibri)
<base href=“https://www.example.org/"> • base: elemento vuoto che permette di stabilire, con l’attributo href,
<link rel="stylesheet" il document base URL
href="my-css-file.css"> (es. <base href="https://www.example.org/">)
<script src="my-js-file.js" defer>
• link: permette di specificare relazioni fra il documento e una
</script>
risorsa esterna (comunemente usato per collegare fogli di stile e
<title>My test page</title>
icone); la relazione è specificata con l’attributo rel e può essere una
</head>
delle keyword degli HTML link type; l’attributo media permette di
Web API specificare a quale media si applica la relazione
(es. <link href="main.css" rel="stylesheet">, <link
HTMLTitleElement.text
href="favicon.ico" rel="icon">, tecnica del preload)
• style: permette di incorporare codice CSS nel documento

Antonio Ferrara | Fondamenti del Web (Ingegneria del Software e Fondamenti Web)
Head
di un documento
All’interno dell’head del documento compare spesso l’elemento meta
Si tratta di un elemento estremamente flessibile per l’inclusione di metadati importanti relativi al documento

<meta charset="utf-8">
Mediante l’attributo charset è possibile specificare il set di caratteri utilizzato nel documento (è consigliato utf-8 che
contiene praticamente tutti i caratteri dei linguaggi umani)

<meta name="author" content="Antonio F.”>


<meta name="description" content=“Semplici esempi
per la realizzazione di documenti HTML">

Mediante le coppie di attributi name e content è possibile indicare metadati (application-name, author,
description, generator, keywords, viewport), alcuni dei quali sono estremamente utili per il SEO

Antonio Ferrara | Fondamenti del Web (Ingegneria del Software e Fondamenti Web)
Head
di un documento
Altri metadati sono proprietari e sono progettati per fornire specifiche
informazioni a determinati siti
Per esempio Open Graph Data è un protocollo di metadati inventato da
Facebook per permettere alle pagine web di diventare rich object
all’interno del grafo sociale

<meta property="og:image" content=“logo.png">


<meta property=“og:type” content=“website”>
<meta property="og:description" content="The Mozilla
Developer Network (MDN) provides information about
Open Web technologies including HTML, CSS, and APIs
for both Web sites and HTML5 Apps.
It also documents Mozilla products, like Firefox OS.">
<meta property="og:title" content="Mozilla Developer Network">

Analogamente, le Twitter Cards forniscono a Twitter informazioni per arricchire i collegamenti nei tweet
<meta name="twitter:title" content="Mozilla Developer Network">

Antonio Ferrara | Fondamenti del Web (Ingegneria del Software e Fondamenti Web)
Head
di un documento
L’elemento meta permette, inoltre, di specificare informazioni sulla viewport, utile per la responsività della pagina sui diversi
dispositivi

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

La viewport è la “finestra virtuale” in


cui sono visualizzate le pagine web
Nei dispositivi mobili, spesso, la
viewport ha dimensione maggiore
dello schermo ed il contenuto viene
rimpicciolito per adattare la viewport
allo schermo
Il metatag viewport è stato
introdotto da Apple per stabilire la
dimensione della viewport a priori

Antonio Ferrara | Fondamenti del Web (Ingegneria del Software e Fondamenti Web)
Head
di un documento
Un altro attributo associato all’elemento meta è http-equiv, che permette di specificare alcuni header HTTP direttamente
nella pagina HTML
Chiaramente, il meccanismo può funzionare solo per quegli header che il browser processa una volta ricevuta la risorsa

<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8”>


Sostituito in HTML 5 da <meta charset=“utf-8”>

<meta http-equiv=“refresh” content=“3;url=https://www.google.com”>


Permette di effettuare, dopo 3 secondi il redirect a www.google.com
Ovviamente <meta http-equiv=“refresh” content=“3”> permette di effettuare il refresh della pagina ogni
3 secondi

Antonio Ferrara | Fondamenti del Web (Ingegneria del Software e Fondamenti Web)
Corpo
di un documento
All’interno del tag body vi è la parte visibile della pagina web • È important
e rispettare la
gerarchia deg
Gli elementi base del corpo di un documento sono quelli di heading (h1, h2, h3, h4, h5, h6) ed li heading
• È preferibile
avere un solo
il paragrafo p, tutti elementi di blocco elemento h1 n
ella pagina
I browser presentano di default header e paragrafi con dimensioni e font weight appositi
I motori di ricerca utilizzano gli header per indicizzare la struttura delle pagine web

<h1>The Crushing Bore</h1>


<p>By Chris Mills</p>
<h2>Chapter 1: The dark night</h2>
<p>It was a dark night. Somewhere, an owl hooted. The rain lashed
down on the ...</p>
<h2>Chapter 2: The eternal silence</h2>
<p>Our protagonist could not so much as a whisper out of the
shadowy figure ...</p>
<h3>The specter speaks</h3>
<p>Several more hours had passed, when all of a sudden the
specter sat bolt upright and exclaimed, "Please have mercy on my
soul!"</p>

Antonio Ferrara | Fondamenti del Web (Ingegneria del Software e Fondamenti Web)
Corpo
di un documento

Altri elementi fondamentali del testo sono quelli che permettono di dare enfasi e importanza
L’enfasi su una particolare parte del testo può essere data mediante l’elemento em, mentre una parte di forte importanza del
testo può essere marcata con strong

Nei browser, i tag semantici em e strong sono resi di default rispettivamente con testo in corsivo e testo in grassetto
Per questo motivo sono spesso stati arbitrariamente confusi con i e b che invece sono tag puramente presentazionali

HTML 5 ha ridefinito i, b e u (underline) per renderli elementi semantici, ciascuno utile ad esprimere il significato che
generalmente viene associato a tale formattazione (es. parole straniere e termini tecnici in corsivo, parole chiave in grassetto,
errori con la sottolineatura, etc.)

Antonio Ferrara | Fondamenti del Web (Ingegneria del Software e Fondamenti Web)
Liste
ordinate e non ordinate
La realizzazione di liste in HTML è gestita mediante due appositi elementi
• ul, che permette di realizzare unordered lists (non ordinate)
• ol, che permette di realizzare ordered lists (ordinate)

Ogni lista ha, al suo interno, un certo numero di elementi, marcati con il tag <li>
Gli elementi li possono, a loro volta, annidare un’altra lista

<ol>
<li>Apri il portafogli</li>
<li>Verifica che sia tutto ok
<ul>
<li>Controlla le banconote</li>
<li>Controlla le carte di credito</li>
</ul>
</li>
<li>Chiudi il portafogli</li>
</ol>

Antonio Ferrara | Fondamenti del Web (Ingegneria del Software e Fondamenti Web)
Altri elementi <blockquote cite="https://www.huxley.net/bnw/four.html">

di formattazione
<p>Words can be like X-rays, if you use them
properly—they’ll go through anything. You read and
you’re pierced.</p>
</blockquote>
<p>—Aldous Huxley, <cite>Brave New World</cite></p>
<dl>
<dt>Politecnico di Bari</dt>
<dd>Università nel Sud Italia a carattere
scientifico-tecnologico</dd>
<dt>Fondamenti del Web</dt>
<dd>Insegnamento erogato presso il Politecnico di
Bari</dd>
</dl>
<pre><code>var para = document.querySelector('p');
para.onclick = function() {
alert('Owww, stop poking me!');
}</code></pre>

<p>You shouldn't use presentational elements like


<code>&lt;font&gt;</code> and <code>&lt;center&gt;</
<p><abbr title="Hypertext Markup Language”>HTML</abbr> code>.</p>
is used to structure our web documents.</p>

<p>If x<sup>2</sup> is 9, x must equal 3 or -3.</p>

Antonio Ferrara | Fondamenti del Web (Ingegneria del Software e Fondamenti Web)
Esercizi
Esercizio 3.1

Realizzare la pagina Web rappresentata nell’immagine utilizzando i


tag introdotti

Successivamente, validare il documento

Antonio Ferrara | Fondamenti del Web (Ingegneria del Software e Fondamenti Web)
Collegamenti
ipertestuali
I collegamenti ipertestuali rappresentano la principale innovazione del Web
La realizzazione di un hyperlink in HTML è possibile mediante l’elemento inline anchor a

Creiamo un link a <a href=“http://www.google.it”>Google</a>

Pur essendo un elemento inline, l’elemento anchor può anche effettuare il wrapping di elementi block-level

L’attributo href permette di specificare l’URL di destinazione


Gli URL possono essere relativi o assoluti (nel secondo caso devono specificare il nome di dominio completo)
È possibile riferirsi a frammenti specifici di un documento (identificate con l’attributo id) mediante la convenzione di URL
<h2 id="Mailing_address">Mailing address</h2>
<p><a href=“contacts.html#Mailing_address”>Contattaci tramite email</a></p>

Altri attributi significativi sono:


• title, che permette di specificare una descrizione visibile come tooltip posizionandosi sul link con il mouse
• target=‘_blank’, che permette di aprire la nuova risorsa in una nuova scheda del browser
• download, il file viene salvato anziché “navigato” (come valore è possibile specificare un filename di salvataggio)
Antonio Ferrara | Fondamenti del Web (Ingegneria del Software e Fondamenti Web)
Strutturare il contenuto
di una pagina Web
Header Da non confondere con head e con h1, …, h6
Solitamente è una grande striscia all’inizio della pagina,
consistente fra le diverse pagine del sito, ottenuta con
l’elemento header
L’elemento header può essere usato anche in sezioni e
articoli e include un elemento di sectioning (h1, …, h6)

Main È possibile inserire il contenuto principale nell’elemento


main (uno per pagina), composto a sua volta da uno o più
section e article

Navigation L’elemento nav contiene di solito una lista ordinata o non


ordinata di link che permettono di navigare il sito o altre
risorse esterne

Footer L’elemento footer permette di raggruppare gli elementi di


chiusura di una pagina, una sezione, un articolo

Aside L’elemento aside permette di raggruppare gli elementi che


Non dimentichiamo i div per blocchi a cui non riusciamo a dare un significato
costituiscono la sidebar di una pagina web
preciso, ad es. un widget per il carrello che appare in un e-commerce

Antonio Ferrara | Fondamenti del Web (Ingegneria del Software e Fondamenti Web)
Esercizi
Esercizio 3.2

Realizzare una pagina web completa come descritto di seguito

• Includere il titolo e i seguenti link


<link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@300&display=swap"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?
family=Fredoka:wght@300&family=Lora:wght@600&display=swap" rel="stylesheet">
• L’intestazione della pagina deve prevedere un solo grande titolo
• Realizzare un menu di navigazione con link a 4 pagine e la seguente barra di ricerca
<form>
<input type="search" name="q" placeholder="Cerca nel sito...">
<input type="submit" value="Vai">
</form>
• Il contenuto principale della pagina è fatto da un’intestazione, un paragrafo, una sottosezione con due paragrafi e un’altra
sottosezione con due paragrafi
• Nella barra laterale inserire link a 4 articoli correlati
• Inserire un footer con un copyright
Antonio Ferrara | Fondamenti del Web (Ingegneria del Software e Fondamenti Web)
Immagini
e oggetti multimediali
to c h e il c o n te n uto
Dal mome n
t o i m g è p re se n te
dell’elemen
te s r c a n z iché
HTML permette l’embedding di immagini all’interno del documento nella s o rg e n
l d o c u m e n to H T ML,
ne
t o è d e tt o re p la ced
<img src=“images/immagine.jpg” l’elemen
s so a n c h e p e r a ltri
I motori di ricerca le (vale lo st e
alt=“Testo alternativo mostrato ggono
e n t i co m e v i d e o)
quando non è possibile visualizzare anche i nomi delle im elem
magini
l’immagine” width=“400” height=“200” per fare indicizzazio
ne!
title=“Un gattino che canta”>

Perché potremmo non visualizzare l’immagine? URL errato, formato non supportato, utenti con disabilità che usano uno screen
reader, motori di ricerca

Perché può essere utile specificare le dimensioni dell’immagine? Nell’attesa che l’immagine si carichi la pagina assume già la
sua “forma” finale (possiamo anche farlo da CSS)

L’immagine è un elemento inline, ma…

Antonio Ferrara | Fondamenti del Web (Ingegneria del Software e Fondamenti Web)
Immagini
e oggetti multimediali

<figure> <div class="figure">


<img src="images/dinosaur.jpg"> <img src="images/dinosaur.jpg">
<figcaption>A T-Rex on display in the <p>A T-Rex on display in the
Manchester University Museum.</figcaption> Manchester University Museum.</p>
</figure> </div>

Entrambe le soluzioni funzionano, ma nella prima abbiamo creato un elemento semantico che lega un contenuto alla sua caption

L’elemento figure (insieme a figurecaption) realizza un elemento block-level che (potenzialmente) può contenere
qualunque tipo di oggetto a supporto del testo (immagini, audio, video, tabelle, snippet di codice, …)

Quando si immagina un sito web responsivo, è necessario fare in modo che gli utenti di un dispositivo mobile non siano costretti
a scaricare immagini ad alta risoluzione come quelle usate nella versione desktop, oppure che si possano servire immagini
diverse (es. tagliate) in base alla dimensione del dispositivo utilizzato
L’idea è quella di creare immagini responsive mediante le tecniche di resolution switching e art direction

Antonio Ferrara | Fondamenti del Web (Ingegneria del Software e Fondamenti Web)
Immagini
e oggetti multimediali
A partire da HTML5, è possibile inserire elementi audio e video

<audio src=“jazz.ogg"></audio>
Attributi utili sono autoplay, controls, loop e preload che accetta come attributi none, auto e metadata
In alternativa, possiamo lasciare che il browser scelga il miglior formato disponibile
<audio controls>
<source src="jazz.ogg" type="audio/ogg">
<source src="jazz.mp3" type="audio/mpeg">
</audio>

Analogamente, è anche possibile inserire un oggetto video


<video src="rabbit.webm" controls>
<track kind="subtitles" src="subtitles_es.vtt" srclang="es" label="Spanish">
<p>Your browser doesn't support HTML5 video. Here is the <a href=“rabbit.webm">video</a>.</p>
</video>
L’attributo poster per un video permette di specificare un’immagine da visualizzare come anteprima
Altri attributi tipici dei video sono width e height

Antonio Ferrara | Fondamenti del Web (Ingegneria del Software e Fondamenti Web)
Web
form
<form action="/my-handling-form-page" method="post">
I form rappresentano uno dei principali modi di <ul>
<li>
interazione degli utenti con le applicazioni web
<label for="name">Name:</label>
I dati immessi nei form possono essere inviati ai server <input type="text" id="name" name="user_name">
per ulteriori elaborazioni o essere utilizzati client-side </li>
<li>
per aggiornare l’interfaccia in qualche maniera
<label for="mail">E-mail:</label>
<input type="email" id="mail" name="user_email">
</li>
<li>
<label for="msg">Message:</label>
<textarea id="msg" name="user_message"></textarea>
</li>
<li class="button">
<input type="submit">Send your message</input>
</li>
</ul>
</form>

Antonio Ferrara | Fondamenti del Web (Ingegneria del Software e Fondamenti Web)
Web
form
Input Questo elemento può assumere diverse forme a seconda del valore dell’attributo type

<input type=“text” id=“comment” name=“comment”>


<input type=“password” id=“pwd” name=“pwd”>
<input type="hidden" id="timestamp" name="timestamp" value=“1286705410”>

<input type="checkbox" id="carrots" name="vegetable" value="carrots" checked>


<input type="checkbox" id="cabbage" name="vegetable" value=“peas”>

<input type="radio" id="soup" name="meal" value="soup" checked>


<input type="radio" id="curry" name="meal" value="curry">

<input type="file" name="file" id="file" accept="image/*" multiple>


<input type="file" accept=“image/*;capture=camera">

<input type="submit" value="This is a submit button">


<input type="reset" value="This is a reset button">
<input type="button" value="This is an anonymous button">

Attributi comuni sono placeholder e gli attributi booleani readonly (valore non modificabile ma inviato), disabled (valore
non modificabile e non inviato), required e autofocus

Antonio Ferrara | Fondamenti del Web (Ingegneria del Software e Fondamenti Web)
Web
form * Si può accompagnare con
gli attributi min, max e step
Input type di HTML5

email date* time* url number* tel

Altri valori per type definiti in HTML5 sono color, range* (ovvero uno slider), datetime-local*, month*, week*, search
(quest’ultimo ha un aspetto leggermente diverso da text in molti browser, di solito contiene una X per pulire la casella di testo
e memorizza gli input precedenti)

I valori di type, insieme a required, min e max, minlenght e maxlength per le stringhe, e pattern (che permette di
specificare una regex attesa) permettono di effettuare una prima validazione client-side dell’input
Antonio Ferrara | Fondamenti del Web (Ingegneria del Software e Fondamenti Web)
Web
form
Altri elementi

<textarea cols="30" rows=“8”>Esempio di textarea</textarea>


L’attributo resize può avere valori both, horizontal, vertical o none per la gestione del
ridimensionamento della casella

<label for="myFruit">What's your favorite fruit?</label>


<input type="text" name="myFruit" id="myFruit" list="mySuggestion">
<datalist id="mySuggestion">
<option>Apple</option>
<option>Banana</option>
<option>Blackberry</option>
<option>Blueberry</option>
<option>Lemon</option>
<option>Lychee</option>
<option>Peach</option>
<option>Pear</option>
</datalist>
Antonio Ferrara | Fondamenti del Web (Ingegneria del Software e Fondamenti Web)
Web
form
Altri elementi

<select id="simple" name="simple"> I diversi elementi option possono


<option>Banana</option> essere anche suddivisi in gruppi e
<option selected>Cherry</option>
<option>Lemon</option> annidati in elementi optgroup
</select>

<select id="multi" name="multi" multiple size="2">


<optgroup label="fruits">
<option>Banana</option>
<option selected>Cherry</option>
<option>Lemon</option>
</optgroup>
<optgroup label="vegetables">
<option>Carrot</option>
<option>Eggplant</option>
<option>Potato</option>
</optgroup>
</select>
Antonio Ferrara | Fondamenti del Web (Ingegneria del Software e Fondamenti Web)
Web
form
Organizzare un form

<label for=“username”>Username</label>
<input type="text" name="username" id="username">
Permette di definire l’etichetta per l’input con id uguale a username
In alternativa, label può anche racchiudere un elemento del form
<label><input type="radio" name="day" value="Friday" checked>Friday</label>

L’elemento fieldset permette di <fieldset>


raggruppare input ed etichette in sezioni <legend>Login</legend>
<label>
(come l’elemento section)
Username
Esso può essere accompagnato anche <input type="text" name="username">
dall’elemento legend, che è molto utile </label>
anche in termini di accessibilità <label>
Password
<input type="text" name="password">
</label>
</fieldset>

Antonio Ferrara | Fondamenti del Web (Ingegneria del Software e Fondamenti Web)
Web
form
Inviare i dati di un form

Inviare i dati inseriti all’interno di un elemento form è possibile mediante gli attributi action e method
L’attributo action permette di specificare la risorsa target verso cui sarà effettuata la richiesta
L’attributo method, invece, permette di specificare se utilizzare una GET o una POST

<form action="http://www.foo.com" method=“METHOD">


<div>
<label for="say">What greeting do you want to say?</label>
<input name="say" id="say">
</div>
GET /?say=Hi&to=Mom HTTP/2.0
<div> Ricordate cosa biso
gna fare Host: foo.com
Quale metodo è
<label for="to">Who do you se si vuole inviare u
n file? più sicuro?
want to say it to?</label>
POST / HTTP/2.0
<input name="to" id="to"> Host: foo.com
</div> Content-Type: application/x-www-form-urlencoded
<div> Content-Length: 13

<button>Send my greetings</button> say=Hi&to=Mom


</div>
</form>
Antonio Ferrara | Fondamenti del Web (Ingegneria del Software e Fondamenti Web)
Creare
tabelle
La creazione di tabelle in HTML deve essere finalizzata alla strutturazione di dati
<table>
<colgroup> tabulari
<col class=“left”><col>
</colgroup> Fino a un po’ di tempo fa, gli sviluppatori utilizzavano spesso le tabelle per la
<tr>
<th colspan="2">Animals</th> realizzazione di layout
</tr> Questa soluzione, priva di semantica, aveva senso quando il supporto a CSS era
<tr>
<th colspan="2">Hippopotamus</th> limitato e oggi deve essere evitata
</tr>
<tr> • Il contenuto di una tabella è sempre incluso nell’elemento
<th rowspan="2">Horse</th>
<td>Mare</td> table
</tr> • Ogni cella è realizzata mediante l’elemento td
<tr>
<td>Stallion</td> • Diverse celle possono essere raggruppate in una riga tr
</tr>
<tr> • Gli attributi colspan e rowspan per le celle permettono di
<th colspan="2">Crocodile</th>
</tr> stabilire celle multicolonna o multiriga
<tr>
<th rowspan="2">Chicken</th>
• Una cella th rappresenta una cella di intestazione
<td>Hen</td> • Gli elementi thead, tbody e tfoot permettono di
</tr>
<tr> raggruppare semanticamente intestazione, corpo e footer
<td>Rooster</td>
</tr> • Gli elementi col ad inizio tabella (in colgroup) permettono di
</table>
referenziare le colonne per associarne stili
Antonio Ferrara | Fondamenti del Web (Ingegneria del Software e Fondamenti Web)
Esercizi
Esercizio 3.3

Realizzare due pagine HTML per un sito web di ricette di cucina

La prima pagina da realizzare, che chiameremo recipe.html, deve ospitare una ricetta, e deve presentare, oltre un menu di
navigazione, una barra laterale con altre ricette collegate
La ricetta deve essere introdotta, dopo il titolo, da un paragrafo di introduzione, da un’immagine (o da un video) e dalla lista degli
ingredienti

La seconda pagina da realizzare, che chiameremo contact.html, deve contenere un form completo per l’invio di una richiesta al
gestore del sito web

Entrambe le pagine devono essere dotate di un menù di navigazione

Antonio Ferrara | Fondamenti del Web (Ingegneria del Software e Fondamenti Web)

Potrebbero piacerti anche