Web Design

Alessandro Sarzina

Obiettivi corso:
- Concetti base di linguaggio di markup
- Basi di HTML e CSS3
- Come realizzare una pagina web

HTML
- Elementi, tag
- Attributi
- Semantica degli attributi
- Immagini
- Hyperlink

CSS
- Sintassi
- Proprietà
- Selettori
- CSS Precedence
- CSS Box model
- Tabelle e contenuti embedded
- Progettare per ogni schermo
- Layout di pagina: Flexbox e Grid
- Animazioni

Esame
- Due quiz durante il corso (Google Forms)
- Un progetto in HTML e CSS (Creazione di un sito web statico)
- Discussione e domande sul progetto

Piccolo sito web da realizzare a casa. Il giorno dell'esame ci saranno alcune domande orali
inerenti al lavoro fatto e agli argomenti studiati durante il corso.

Il progetto completo va inviato almeno una settimana prima dell’orale per una
pre-valutazione. Prima è inviato meglio è, per avere aiuto e, di conseguenza, migliorare il
voto.

L’obiettivo dell’esame è sviluppare un piccolo sito web con argomento a scelta libera (blog,
sito aziendale, ecc).
Il progetto deve includere almeno 3 pagine con layout diverso. In particolare:
- home page di presentazione
- almeno altre 2 pagine con layout diversi (e diversi dalla homepage).

L’aspetto grafico (design) NON è un requisito di questo corso e non è valutato

Requisiti importanti:

- il sito deve essere "responsive", cioè adattabile a display desktop e smartphone

- libera scelta di colori, font, immagini, testi, design e layout

- unico vincolo: creare un header, una navbar e un footer replicati in ogni pagina

Consigli per l’esame

- scrivere codice semplice ma corretto e funzionante

- prestare massima attenzione alla correttezza formale del codice (evitare errori
HTML e CSS)

- non copiare codice da temi grafici o altri siti (soprattutto non copiare codice di cui
si ignora il funzionamento, es. JavaScript)

- prestare massima attenzione al “responsive” e al layout delle pagine

- rispettare le specifiche ma ogni miglioramento aumenta il voto

 World Wide Web VS Internet

Internet
Internet è una rete di computer che si connettono e comunicano tra loro a livello globale.

Internet funziona grazie a una serie di “linguaggi” che consentono alle informazioni di
viaggiare tra la rete di computer. Questi sono conosciuti come protocolli. Ad esempio,
alcuni protocolli comuni per il trasferimento di e-mail sono IMAP, POP3 e SMTP.

Proprio come la posta elettronica è uno strato/servizio in Internet, il World Wide Web è un
altro strato/servizio che utilizza diversi protocolli.

- 1967 Progetto Arpanet (Advanced Research Projects Agency NETwork,

Dipartimento della difesa USA)

- 1969 Collegamento ad Arpanet dei primi computer di 4 università

- 1972 Prima demo pubblica

- 1983 TCP/IP protocollo ufficiale Arpanet e nasce la parola “Internet”

- 1986 L’Italia si collega ad Arpanet (4° paese al mondo)

- 1986 Entra in funzione la rete ad uso civile NSFNET

- 1990 Arpanet è dismessa

- A metà anni novanta proliferano i service provider privati

World Wide Web

- Il World Wide Web è solo uno dei servizi di internet

- Sistema di documenti "ipertestuali" interconnessi a cui si accede via Internet

- Inizialmente creato per facilitare la condivisione di documenti di ricerca

- Nasce al CERN di Ginevra

Tim Berners-Lee ha proposto di usare i sistemi ipertestuali per collegare e accedere a

informazioni di vario tipo come una rete di nodi in cui l'utente può navigare a proprio
piacimento.
- Marzo 1989 -> Tim BL Pubblicò la sua visione di quello che sarà il web nel
documento: “Information Management: A Proposal”
- 1990 -> Primo Web Browser in uso al Cern

- 1991 -> Pubblicata la prima pagina web

https://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html

- 1993 -> Il CERN rilascia il codice sorgente in pubblico dominio

- Line Mode Browser - feb 1992. By Berners Lee. Il primo browser multi- piattaforma.

- Viola WWW Browser - marzo 1992. Uscito con un linguaggio di stylesheet e

scripting (molto prima di JavaScript e CSS).

- Mosaic Browser - 5 gennaio 1993. Realizzato all’University dell’Illinois.

- Il primo browser ad avere una certa diffusione

- Il primo browser a supportare immagini online con il testo

- Netscape Navigator 1.0 - Dicembre 1994. Il primo web browser di successo, ha

introdotto le tabelle nell’HTML.

- Opera 1.0 - Aprile 1995. Originariamente un progetto di ricerca di un compagnia

telefonica Norvegese, disponibile ancora oggi: opera.com.

- Internet Explorer 1.0 - Agosto 1995. Rilasciato con MS Windows 95.

- Netscape Navigator 2 - Settembre 1995. Supporto a Javascript e GIF animate

- Internet Explorer 3 - Agosto 1996. Supporto parziale ai CSS

- 1996-1998: Commercialization of the Web

- 1999-2001: "Dot-com" boom and bust

- Google, Ebay, MySpace, Amazon, Facebook, etc

- Semantic Web

- Web 3.0 - Decentralized web / Tecnologie Blockchain

Come funziona il WWW?

HTML (Hypertext Markup Language) - Linguaggio di markup in cui scriviamo le nostre

pagine web.

HTTP (Hypertext Transfer Protocol) - È stato sviluppato appositamente per il World Wide
Web.
Questo protocollo richiede il documento "HTML" dal server e lo serve al web browser.

URL (Uniform Resource Locator) - È l'indirizzo che indica dove un determinato documento
risiede sul web.
<protocollo>: // <nodo> / <posizione>

Le pagine che compongono un sito web sono fisicamente ospitate da un web server.

Un Web Server gestisce le richieste di visualizzazione di pagine web di un web browser

1. Il server è raggiungibile nella rete e in ascolto di nuove richieste

2. Il client è eseguito dall’utente
3. L’utente, attraverso il client, elabora una richiesta
4. Il client invia la richiesta (attraverso la rete) al server
5. Il server elabora la richieste e produce un risultato
6. Il server invia il risultato (attraverso la rete) al client
7. Il client mostra il risultato all’utente
Browser

I browser sono i programmi che permettono di navigare in internet. Interpretano le

pagine descritte in HTML e le visualizzano sullo schermo.

1. Il portale web dell’accademia (http://www.accademiasantagiulia.it)

2. Il browser è messo in esecuzione dall’utente
3. L’utente scrive nel browser l’indirizzo http://www.accademiasantagiulia.it
4. Il browser invia una richiesta HTTP GET a http://www.accademiasantagiulia.it
5. Il server elabora la richiesta cerca la pagina
6. Il server manda la risposta al browser
7. Il browser interpreta il contenuto dell’homepage e lo mostra all’utente

HTTP (Cenni)
HyperText Transfer Protocol

- Realizza lo scambio di informazioni tra client e server

- Insieme di regole che definiscono come i messaggi sono formati e come vengono
passati fra browser e server Web.
- Le specifiche del protocollo sono gestite dal World Wide Web Consortium (W3C)

HTTP (Caratteristiche)
HyperText Transfer Protocol

- Scambio di messaggi di richiesta e risposta

- Protocollo stateless
- Metadati sulla risorsa (es. dimensione, tipo [html, text, img, etc], data ultima
modifica etc)
- Basato sul meccanismo di naming degli URL per identificare le risorse Web

HTTP - URL
HTTPs (Cenni)
HyperText Transfer Protocol over Secure Socket Layer

- HTTPS trasmette i dati in HTTP semplice su un protocollo di trasporto (SSL/TSL) che

crittografa tutti i dati.
- Garantisce l'identificazione del sito web che si sta visitando e del server web che lo
ospita.
- Il server ascolta su una porta diversa dalla porta 80 (per default la porta 443) e si
usa uno schema di URI diverso: https://
- I certificati SSL devono essere emessi da un'autorità di certificazione attendibile
(Certificate Authority)
- I browser, i sistemi operativi e i dispositivi mobili mantengono l'elenco dei
certificati (CA root certificates)
- Se il certificato non è attendibile, il browser presenterà messaggi di errore non
attendibili all'utente finale

Come si crea un sito web?

Per realizzare un sito web, abbiamo bisogno di HTML, CSS e JavaScript.

HTML
Rappresenta il contenuto, organizzato in una struttura logica: le parole, i titoli dei capitoli,
le figure, i diagrammi, ecc.

CSS
Riguarda la presentazione o lo stile della pagina.

JavaScript
È il linguaggio che permette di dar vita alle azioni che una pagina può intraprendere,
come l'interazione con l’utente, e la personalizzazione e modifica della pagina in base a
qualche parametro.

HTML - HyperText Markup Language

HyperText è un testo visualizzato su un computer o dispositivo che fornisce l'accesso ad

altri testi tramite collegamenti (link), noti anche come collegamenti ipertestuali.

L’HyperText può contenere riferimenti a pagine, immagini o suoni che si trovano in altre
parti del documento o in documenti esterni.

I collegamenti sono realizzati specificando l’indirizzo URL (Uniform Resource Locator)

della pagina da raggiungere.
Markup: significa annotare un documento di testo con informazioni aggiuntive:

● sezioni
● paragrafi
● titoli
● enfasi
● tabelle
● etc

HTML non è un linguaggio di programmazione, è un linguaggio di istruzioni che

definiscono le caratteristiche di un documento e ne guidano la composizione sullo
schermo.

- Descrive una pagina web

- Inizialmente nato per descrivere la struttura, non l’aspetto estetico
- In pratica è come se dicesse: “questa è l’intestazione, questo il corpo, il titolo, il
paragrafo, ecc.”
- Usa parentesi angolari ("<" e ">") per separare le annotazioni dal testo normale. In
HTML queste annotazioni sono chiamate “tag".

Per riassumere…

E’ il linguaggio utilizzato per creare pagine web e altri tipi di

documenti visualizzabili in un browser. Insieme all'HTML vengono
utilizzate altre tecnologie per modificare la
presentazione/apparenza di una pagina web (CSS) o la sua
funzionalità (JavaScript).

HTML è composto da elementi. Questi elementi strutturano la pagina web e ne

definiscono il contenuto.

DOM - Document Object Model

- E’ una rappresentazione/modello del documento sotto
forma di albero
- Nativamente supportato dai browser
HTML Documents
● Struttura gerarchica ad albero
● Quando un elemento è contenuto in un altro elemento, viene considerato figlio
(child) di quell'elemento.
● Si dice che l'elemento figlio sia annidato (nested) all’interno dell'elemento genitore

All’interno di un elemento ne possiamo inserire altri. Alcuni elementi non hanno

contenuto e sono chiamati elementi vuoti.

Tag
● Utilizzati per organizzare un file di testo tale che rappresenti un albero di elementi
che compongono il documento html
● Sono frammenti di testo che informano il computer dove un elemento inizia e
finisce
● Sono quasi sempre a coppie: un tag di apertura e uno di chiusura

I tag sono case insensitive, cioè scriverli in maiuscolo o minuscolo è la stessa cosa. E’
convenzione scriverli in minuscolo. Di solito i tag rappresentano un elemento che è
completamente descritto dai suoi attributi.

Attributi
- Contengono informazioni extra di un elemento
- Servono per specificare la funzione e la tipologia di un elemento

L’attributo è utilizzato all'interno del tag di apertura a cui è applicato e deve essere
aggiunto dopo uno spazio dal nome del tag

- Un elemento nella pagina Web può essere distinto da un numero qualsiasi di

attributi unici (id) o comuni (class)
- Definiti solo all’interno del tag di apertura

La migliore pratica è nominare id e classi per aumentare:

- Chiarezza
- Coerenza
- Brevità

● Gli attributi sono una coppia nome-valore separati dal carattere =

● I valori sono racchiusi tra virgolette "", ma si possono usare anche gli apici ''

L’unica eccezione alla coppia nome-valore è se l’attributo è un ‘attributo booleano’:

- hanno solo due tipi di valori: vero o falso
- invece di scrivere ‘true’ o ‘false’ per il suo valore si aggiunge il nome dell’attributo
per indicare true e si omette per indicare false
Un tag può avere più attributi.
Alcuni tag hanno attributi praticamente obbligati.
Attributi data - data attributes
● Sono attributi inseriti in un tag allo scopo di gestire alcune informazioni utili per
l’interfaccia utente
● Sono ignorati dal browser, non influenzano la resa grafica della pagina
Attributi globali e non globali
● Sono attributi applicati a un'istanza specifica di un tag
● Può essere applicato a uno o a più tag
Esempi:
● Start è un attributo per il tag <ol> e non può essere applicato sui tag <p> o <h1>, è
specifico solo per gli elenchi ordinati <ol>.
● Un altro attributo specifico del tag <ol> è reversed.
● L’attributo width può essere applicato a diversi tag come: <img>, <input> e <video>.
Lang
● L'attributo lang indica la lingua del testo nell'elemento a cui è collegato.
● L'identificazione della lingua dei contenuti è sempre più importante, poiché i
browser adattano lo stile e altri aspetti dell'esperienza dell'utente in base alla
lingua del contenuto: ad esempio, se crei una pagina in giapponese, il browser
applicherà automaticamente un carattere che produce forme giapponesi per i
caratteri.
● Altre funzionalità, come il controllo ortografico e il voice-browser per le persone
con problemi visivi, funzionano anche in modo diverso a seconda della lingua in
cui si trova il contenuto

Commenti
● I commenti aggiungono del testo rivolto principalmente alle persone
● Il browser ignora completamente il contenuto del commento

I commenti non possono essere nidificati.

Identazione
● Per evidenziare l'annidamento degli elementi si usa “identare” il codice
● Apertura e chiusura del tag sono allo stesso livello, mentre il contenuto viene
spostato verso destra di un paio di spazi

Headings
- Sei diverse intestazioni
- I titoli sono gerarchici
- In ordine di dimensione
- Importanti per strutturare la pagina

Div
● Uno degli elementi più popolari
● Abbreviazione di "division"
● Contenitore che divide la pagina in sezioni
● Utili per raggruppare elementi nell'HTML
● Può contenere qualsiasi testo o altri elementi HTML
Paragraph & span
- I paragrafi (<p>) contengono un blocco di testo.
- <span> contiene brevi parti di testo o altro HTML. Sono usati per separare piccoli
pezzi di contenuto che sono sulla stessa linea di altri contenuti.

Styling text
● Il tag <em> generalmente viene visualizzato come enfasi in corsivo.
● Il tag <strong> generalmente renderà l'enfasi in grassetto.
● L'elemento di interruzione di riga <br> è composto solo da un tag
○ Utilizzabile all'interno nel codice HTML
○ l'interruzione di riga verrà visualizzata nel browser.

Images
● Il tag <img> consente di aggiungere un'immagine a una pagina web.
● Il tag <img> è un tag che si chiude automaticamente (la fine del tag <img> ha una
barra in avanti /).
● Il tag <img> ha un attributo obbligatorio chiamato src (source), deve essere l’URL
dell'immagine.

- L'attributo alt (testo alternativo), dovrebbe essere una descrizione dell’immagine.

- Utili ai browser a riga di comando / Crawler web o quando il browser non riesce a
caricare l’immagine
- Accessibilità (es. gli utenti ipovedenti spesso navigano sul web con l'aiuto del
software di lettura dello schermo)
- Ottimizzazione dei motori di ricerca (SEO)

HTML Document standard

● <!DOCTYPE html> (document type declaration) Consente ai browser Web di
sapere il tipo e la versione di documento che si sta utilizzando (in questo caso
HTML5)
● Non aggiunge contenuto al documento

Per creare struttura e contenuto HTML, dobbiamo aggiungere tag di apertura e chiusura
<html> dopo aver dichiarato <!DOCTYPE html>.

● L'elemento <head> contiene i metadati per una pagina web.

● I metadati sono informazioni sulla pagina che non vengono visualizzate
direttamente sulla pagina web. A differenza delle informazioni all'interno del tag
<body>, i metadati nella head sono informazioni sulla pagina stessa.
● La scheda di un browser mostra il titolo specificato nel tag <title>. Il tag <title> è
sempre all'interno di <head>.

Liste
● Gli elenchi (o liste) sono utili per per organizzare il testo
● Usati anche per strutturare la pagina (es. menù)
● Utili semanticamente
3 tipi di lista:
- ordinate
- non ordinate
- definizione

Liste non ordinate

● Il tag unordered list <ul> permette di creare una lista non ordinata di elementi.
● Le singole voci dell'elenco devono essere aggiunte all'elenco utilizzando il tag <li>.

Possiamo annidare le liste

creando strutture ad albero.
E’ sufficiente inserire un elenco
all’interno di un elemento.

Liste ordinate
● Il tag ordered list <ol>
permette di creare una
lista ordinata di elementi.
● Le singole voci dell'elenco devono essere aggiunte all'elenco utilizzando il tag <li>.

Possiamo cambiare il tipo di numerazione con l’attributo type applicato al tag <ol>.

Liste di definizione
● Per associare a ogni voce un testo descrittivo
● Tag <dl>
● Gli elementi dell’elenco
sono composti da due
parti <dt> e <dd>.ù

Contenuto e stile
Quando scriviamo contenuti HTML è fondamentale separare il contenuto dalla sua
presentazione. Lo stile deve essere inserito nei fogli di stile (CSS).

La separazione dell'HTML dai CSS semplifica la manutenzione di un sito, la condivisione

dei fogli di stile tra le pagine e l'adattamento delle pagine ai diversi ambienti.
Separando contenuto e aspetto è più facile lavorare a file distinti in modo indipendente.
Utile soprattutto quando lavorano più persone al progetto.

Web semantico
Il termine web semantico è stato inventato da Tim Berners-Lee per indicare un’evoluzione
del Web dove i documenti sono associati a informazioni (metadati) che ne specificano il
contesto semantico in un formato adatto all’interrogazione, all'interpretazione e
all’elaborazione automatica.

Tag semantici
I tag semantici sono tag HTML che descrivono espressamente il loro significato.

HTML5 ha introdotto molti nuovi tag semantici in grado di identificare essi stessi le diverse
sezioni di una pagina web e i contenuti in esse presenti (senza dover ricorrere a specifici
attributi).
Tag di Stile vs Tag Semantici
● I tag di stile, in HTML4, si
concentravano esclusivamente
sulla presentazione e sul design
(come dovrebbe apparire il
testo sullo schermo).

● I tag semantici si riferiscono al

significato delle parole in una
lingua. Aggiungono un
significato al testo e danno un
ruolo agli elementi.

<b> vs <strong>

Bold è uno stile che rende le lettere più spesse, quindi si distingue tra gli altri testi, ma non
ha alcun significato semantico (ad esempio per i browser vocali, gli screen reader e altri
tipi di modi per accedere al Web).

Strong è indicazione di importanza: potrebbe significare “parlare con urgenza o serietà”

durante la lettura del testo ad alta voce. È semantico nel senso che gli insegniamo a essere
più forte del testo che circonda, il che è diverso dal dare istruzioni su come dovrebbe
apparire il testo nel caso di <b>. Rappresenta l'importanza, la serietà o l'urgenza dei suoi
contenuti.

<i> vs <em>

Italic: corsivo, inclina il testo. Di solito in corsivo scriviamo i nomi di riviste, libri, programmi
televisivi, ecc. E’ pensato esclusivamente per scopi di presentazione, non significa niente
per chi non può leggere il testo (bot, assistenti vocali, etc).

Emphasis è usata per sottolineare l'enfasi dei suoi contenuti. La parola in una frase che
sottolinei può cambiare l'intero significato.
Elementi Semantici
I TAG che suggeriscono lo scopo del contenuto presente al loro interno si dicono
“semantici”.

Esempi:
• Per aggiungere un paragrafo, si utilizzerà il tag di paragrafo <p>.
• Per aggiungere un'intestazione, si utilizzerà i tag di intestazione <h1> - <h6>
• Per aggiungere un'immagine, dovremmo usare il tag immagine.
• Etc

L'utilizzo dei tag “giusti” è importante

● Gli elementi semantici sono utili sia allo sviluppatore che al browser (es. SEO,
tecnologie assistive etc).
● Forniscono molte più informazioni sul contenuto e sulla struttura del documento
HTML.
<article>, <section>, <header>, <nav> e <footer>
● Introdotti in HTML5 per definire la struttura della pagina Web.
● L'uso di questi elementi semantici migliora l'elaborazione automatizzata dei
documenti (es. dai motori di ricerca, quando esegue la scansione di un tag <nav>,
riconosce automaticamente che include il contenuto relativo alla navigazione).
● Migliora anche l'accessibilità delle pagine web: le tecnologie assistive dipendono
dalla struttura del documento per presentare le informazioni agli utenti.

<figcaption> e <figure>
● <figure> serve per raggruppare un elemento con la sua didascalia
● L'elemento <figure> può contenere un <figcaption> (uno solo come primo o ultimo
elemento, non obbligatorio), una o più immagini o altri elementi
● <figcaption> è utilizzato per fornire una didascalia o una spiegazione all'immagine
(figura).
● Mentre l'attributo alt spiega l'immagine per la tecnologia assistiva, <figcaption>
può essere usato per fornire informazioni aggiuntive per tutti gli utenti.

<cite> e <blockquote>
● Il tag <blockquote> specifica una sezione citata da un'altra fonte
● Solitamente il testo ha un’identazione (rientro a sinistra)
● <cite> è usato per descrivere un riferimento a un lavoro creativo (es. un libro, un
film o un sito web)

<address>
<picture>
● Il tag <picture> consente di specificare più sorgenti/fonti per un immagine
● Il tag <picture> contiene due tag diversi: uno o più elementi <source> e un
elemento <image>

L'elemento source ha i seguenti attributi:

- srcset (obbligatorio): definisce l'URL dell'immagine da visualizzare
- media: accetta qualsiasi query multimediale valida che potresti definire all'interno
dei CSS
- type: definisce il tipo MIME (https://developer.mozilla.org/en-US/docs/Web/
HTTP/Basics_of_HTTP/MIME_types)

● Il browser utilizza i valori degli attributi per caricare l'immagine più appropriata;
usa il primo elemento <source> corrispondente e ignora gli elementi <source>
successivi.
● Il tag <img> viene utilizzato per fornire la compatibilità con le versioni precedenti
se un browser non supporta l'elemento o se nessuno dei tag <source> corrisponde.

Come usare gli elementi semantici?

● Quando usiamo <header> e quando usiamo i tag <h1> e <h6>?
● Posso usare elementi semantici come <header>, <footer> e <nav> più volte nella
mia pagina Web?
● Posso usare <article>, <section> o <div>?

<header> vs <h1> - <h6>

- <header> è semplicemente un'area per aggiungere qualsiasi contenuto
introduttivo della pagina. Può contenere intestazioni, paragrafi, tabelle, immagini,
loghi e persino la navigazione.

- <h1> a <h6> sono titoli. <h1> è per la voce più importante e <h6> è per la meno
importante

header e footer multipli

- Gli elementi header e footer sono riferiti all'elemento padre (section, article, div o
body) in cui sono utilizzati.

- Se si dispone di più sezioni o articoli, è possibile avere un'intestazione e un piè di

pagina per ciascuno.

header e footer globali

- Gli elementi header e footer possono essere utilizzati in tutto il sito: nella parte
superiore e inferiore del corpo della pagina Web.

- Header di solito contiene in genere loghi, intestazione principale, area di ricerca e

navigazione a livello di sito

- Footer spesso contiene in genere informazioni di authoring, riferimenti e altri

collegamenti, informazioni sul copyright ecc.
<article>
- L’elemento <article> è contenuto autonomo

- Un elemento <article> può essere annidato all'interno di un altro: ad esempio, se

hai un post sul blog possiamo includere un post sul forum o un articolo di giornale
annidandolo in un altro tag <article>.

<section>
- L'elemento della sezione è usato per tagliare una pagina (es. i capitoli di un libro,
etc).

- Le sezioni possono essere nidificate. Le sezioni possono anche far parte di un

articolo, elementi a parte o nav.

- Un elemento <article> può utilizzare gli elementi della sezione per suddividere i
suoi contenuti in gruppi.

Block vs Inline elements

Gli elementi HTML sono distinti in due categorie:
- Block level elements - Occupano l’intero spazio dell’elemento padre. Il browser di
solito li rappresenta con una nuova riga prima e dopo.
- Inline elements - Possono iniziare ovunque in una linea, non iniziano in una nuova
riga. Di solito contengono testo.
<div>
- È usato per definire una divisione o una sezione del documento.
- Non è un elemento semantico
- È un contenitore generico, può contenere una varietà di elementi come paragrafi,
immagini, collegamenti, tabelle, ecc.
- Può essere usato per raggruppare gli elementi per scopi di stile. Dovrebbe essere
usato solo se è possibile usare nessun altro elemento semantico al suo posto.

<span>
- Per aggiungere uno stile a una parte di una frase (in linea)
- Manipolare parte di una frase usando JavaScript
- Quando nessun altro elemento HTML è applicabile, puoi usare <span> (e <div>) per
aggiungere attributi come class e id

div vs span

DIV - Block level elements

● Utilizzato all'interno del corpo della pagina.
● Occupa un blocco di spazio e inizia in una nuova riga.
● Di solito ha una linea vuota sopra e sotto il blocco. Possono contenere elementi
inline e altri elementi a livello di blocco.
es. <p>, <h1> - <h6>.

SPAN - Inline elements

● Possono iniziare ovunque in una linea.
● Possono contenere solo dati (come il testo) o altri elementi in linea.
es. <em>, <strong>.

Cosa può contenere un elemento?

Ogni elemento HTML è membro di una o più categorie di contenuto.
Immagini
È un tipo di elemento inline, il browser lo mostra in linea con il testo.
Attributi obbligatori:
- src
- alt

src
L'attributo src(source) del tag <img> indica dove recuperare l'immagine.

Esistono due diversi tipi di URL che possiamo utilizzare:

1. Percorso di un file immagine all'interno della nostra applicazione:
"images/my-image.png" - Riferimento relativo
2. Percorso di un file immagine che risiede altrove sul Web:
"https://placeimg.com/600/400/animals" - Riferimento assoluto

Riferimento assoluto
- Basta richiamare la risorsa col suo URL completo
- Si chiama riferimento assoluto perché è valido da qualsiasi posizione lo si richiami
Riferimento relativo
- Il percorso per raggiungere la risorsa va descritto a partire
- Non serve specificare protocollo e dominio ma solo il percorso del file

Il tipo di formato di file immagine (ad es. png, jpeg, ecc.) non dipende dall'elemento <img>
ma dal browser che esegue il rendering del contenuto.

Alcuni formati come png, jpeg, gif e bmp sono ampiamente supportati dai browser.

- Non includere spazi nel percorro dell'immagine.

- Utilizzare lettere minuscole per tutte le directory, i nomi di file e le estensioni di file.
Alcuni web server sono case sensitive, considerano diversamente nomi con lettere
maiuscole e minuscole.

Procurare le immagini
- Non tutte le immagini trovate in rete si possono usare in un sito web, la maggior
parte sono protette da copyright
- Anche immagini scattate in proprio possono avere limitazioni: se è ritratta una
persona potrebbe servire la liberatoria
- Esistono siti con raccolte di immagini copyleft, cioè utilizzabili gratuitamente
- Citare sempre la fonte delle immagini usate

Formati immagine
- Le immagini JPEG (Joint Photographic Experts Group) si comprimono bene e sono
lo standard per le foto. Ma non supportano alcun tipo di animazione o trasparenza.
Compressione di tipo lossy, cioè prevede perdita di qualità

- Le immagini PNG (Portable Network Graphics) supportano la trasparenza e i canali

alfa. Ciò li rende utili per le immagini non rettangolari che potrebbero dover
sovrapporre diversi colori di sfondo o altri elementi nella pagina.
 - SVG (Scalable Vector Graphics) sono definiti matematicamente e supportano
l'animazione. Inoltre, poiché sono definiti da funzioni matematiche, vengono
ridimensionati in qualsiasi dimensione senza preoccuparsi di pixel, risoluzione o
dati di immagine.
- Ciò rende le immagini SVG un formato eccellente da usare, se possibile. SVG è
ottimo per grafici, mappe, forme geometriche e illustrazioni lineari.
- SVG è anche un linguaggio di markup a sé stante ed è molto simile all’HTML.

- Le immagini GIF (Graphic Interchange Format) sono limitate a 256 colori,

prevedono trasparenze e consentono di creare piccoli video (GIF animate)
- GIF è un formato proprietario (brevetto scaduto nel 2003)
- Le best practices di Google consigliano di sostituire le GIF con video nei siti web

- WebP è un nuovo formato per immagini specifico per il web sviluppato da Google
(WebM è l’equivalente di audio/video)
- WebP supporta la trasparenza e può comprimere immagini in modo lossy e
lossless
- Immagini di dimensione 25/30 % inferiore di un JPEG di pari qualità

Attributi delle immagini

alt
alt (alternate text) di un immagine.

<img src = “image/my-image.png” alt = "Aggiungi una breve descrizione di testo

dell'immagine qui">

Utilizzando questo attributo, puoi fornire una breve descrizione di cosa tratta l'immagine.
Questa descrizione dovrebbe trasmettere informazioni sull'immagine o sulla sua funzione
nella pagina.

- per gli utenti che non sono in grado di vedere l’immagine utilizzando la tecnologie
assistive

- utile fornire informazioni rilevanti per i motori di ricerca.

- contribuisce al significato semantico: offre significato all'immagine e suggerisce lo

scopo del contenuto dell'immagine.

- Se l'immagine è puramente a scopo di presentazione o decorazione, dobbiamo

lasciare alt vuoto. La tecnologia assistiva ignorerà quindi questo contenuto.

Immagini in un sito web

- Rappresentano un concetto, un’illustrazione o una fotografia che aggiunge
informazioni al contenuto
- Sfondo per un pulsante o un link
- Mostra una citazione o un messaggio sotto forma di testo in un'immagine
- Può essere usata a fini decorativi
title

- L'attributo title dovrebbe fornire ulteriori informazioni sull’immagine.

- E’ necessario utilizzare l’attributo alt in quanto non vi è alcuna garanzia che
l'attributo title sia utilizzato dalle tecnologie assistive.
- L'attributo title non dovrebbe essere invocato per informazioni importanti e non
dovrebbe essere usato al posto dell'attributo alt.

'height' and 'width'

- Gli attributi width e height possono essere utilizzati per ridimensionare l'immagine
in pixel
- Non è necessario definire sia la larghezza che l'altezza. E’ sufficiente specificare
l'altezza o la larghezza e il rapporto tra le dimensioni sarà rispettato

E’ generalmente una cattiva pratica codificare le dimensioni direttamente nell’HTML.

- Tuttavia, se si aggiunge l'immagine in alcuni contenuti e deve essere di una certa

dimensione per il flusso visivo del lettore, è consigliabile aggiungerla a HTML
utilizzando gli attributi di altezza e larghezza.

- Questo è utile anche se stai cambiando o rimuovendo l'immagine: puoi

semplicemente rimuoverla dal tuo HTML e non occuparti di ricordare di rimuoverlo
anche dal tuo CSS.

Hyperlink
Il collegamento ipertestuale è qualsiasi testo o immagine che con un click / tap ci porta in
un altra “pagina”.

Tips:
- Applicare collegamenti ipertestuali a frasi brevi.
- Rendere significativa la frase di collegamento. Evitare frasi come "Clicca qui" o
"Leggi altro". Il link dà già indicazione che dovrebbe essere cliccato.
- Non utilizzare il testo troppo breve. È poco visibile il collegamento ipertestuale se
viene utilizzato su una parola o un carattere ed è difficile per gli utenti fare clic/tap
con il touchscreen.
- Aspetto: i collegamenti hanno un aspetto predefinito nella maggior parte dei
browser, blu e sottolineati.

<a>
L'elemento <a> (ancora), col suo attributo href, crea un hyperlink a pagine web, file,
indirizzi email, elementi all’interno della pagina stessa, o qualunque altra cosa indirizzabile
con un URL.

<a> vs <link>
- L'elemento <a> non deve essere confuso con<link>
- Il tag <link> è usato per definire un collegamento tra un documento e una risorsa
esterna come un foglio di stile.
Attributi dei link:
- href, target, download, rel, hreflang, accesskey
href
href punta all'URL a cui il link dovrebbe passare. Sebbene sia un attributo opzionale, senza
di esso, il tag <a> non è un collegamento ipertestuale e la formattazione è indistinguibile
dal testo normale.

L'attributo href accetta un URL. Questo URL può essere sotto forma di:
- un collegamento a un sito Web esterno noto anche come URL assoluto: <a
href="https://qwant.com"></a>
- un collegamento a un file o una pagina all'interno dello stesso sito Web, noto
anche come URL relativo: <a href="contacts.html"></a>
- un collegamento a un elemento sulla stessa pagina. L'elemento, è referenziato
usando il suo ID. Per esempio. Se vuoi collegare un div con id ='dettagli', il tag di
ancoraggio corrispondente sarà: <a href="#details"></a>
- protocolli come: mailto (per indirizzi email): <a
href="mailto:[email protected]"></a>

Target specifica la destinazione in cui deve essere aperto l'URL collegato in href. Può avere
i valori:
- _self
- _blank

download
- L'attributo download è nuovo in HTML5
- Consente a un link di scaricare un file anziché spostarsi in un'altra posizione
- Prende il nome del file come valore ma il valore è facoltativo

Moduli - Form
- I moduli (o form) permettono di raccogliere informazioni degli utenti
- Per funzionare è necessario un web server in grado di elaborare le richieste (non è
argomento di questo corso)
- I form di solito sono composti da uno o più campi (input) e un pulsante per
confermare e inviare i dati
- Il tag fondamentale per creare un form è <form>
- <form> necessita di due attributi: action e method
- L’attributo action indica l’URL a cui vanno inviati i dati. E’ un indirizzo del web
server che elabora la richiesta.
- E’ possibile inviare i dati per email (anziché a un web server) usando il proprio
client di posta. Per farlo il valore di action deve avere il prefisso mailto:
- L’attributo method indica il metodo (o verbo) HTTP con cui sono inviati i dati al web
server
- method in genere può assume due valori: GET o POST
- in GET i dati sono inviati in un solo step concatenati all’URL del web server
(limitazione sul numero caratteri)
- in POST i dati sono inviati in due step: prima è contattata la pagina del web server,
poi sono inviati i dati. Per questo motivo i dati non sono nell’URL (nessun limite
sulla lunghezza dei dati)
- Il tag <form> introduce un elemento vuoto
- Servono altri tag per popolarlo (caselle di testo, elenchi a discesa, ecc), di solito
corredati da etichette di testo per spiegare il funzionamento.
<input>
Per inserire un campo di testo si usa il tag <input> con l’attributo type che ne indica il tipo.
I valori ammessi per type sono:

e molti altri.

Select rappresenta un controllo che fornisce un menù di opzioni a scelta singola o

multipla. Le opzioni sono definite con tag <option> contenuti in <select>.

<textarea>
Una textarea è un controllo per inserire testo multi-linea. E’ utile quando l’utente deve
scrivere testo di una certa lunghezza.

<label>
L’etichetta di un campo del form non andrebbe inserito con semplice testo, ma con il tag
<label>. Per esplicitare a quale campo riferita si usa l’attributo for.

Inviare i dati di un form

Per inviare i dati inseriti dall’utente serve un input (o un pulsante) di tipo submit. Al click i
dati sono inviati al web server all’URL specificato nell’attributo action del form.

Il submit DEVE essere all’interno dell’elemento <form>.

CSS - Cascading Style Sheets

Usando i CSS, possiamo determinare l'aspetto visivo dei nostri elementi HTML
indipendentemente dal codice HTML stesso.

- Separare il contenuto dalla forma, per riadattare facilmente un contenuto a media

diversi

- La struttura del documento HTML è più pulita e facilmente modificabile

- Applicando lo stesso file CSS a tutte le pagine di un sito, si ottiene facilmente

uniformità di stile

<style> e <link>
- La migliore pratica quando si lavora con i CSS è tener separato lo stile in un file
esterno usando il tag <link>
- Per posizionare i CSS direttamente in un documento HTML, usiamo il tag <style>.
Questo tag può apparire ovunque in un documento HTML, tuttavia, la pratica più
comune è quella di inserirlo in <head>
- Lo stile può essere aggiunto direttamente a un elemento tramite l’attributo
globale style

Sintassi CSS

- Sintassi diversa rispetto a HTML

- Ogni indicazione di stile si chiama regola

- Il selettore è l’elemento da modificare

- La dichiarazione contiene le proprietà, cioè l’aspetto grafico degli elementi da
modificare
- E’ possibile modificare più di una proprietà in un’unica regola

Dichiarazione
- La dichiarazione di una regola CSS si apre e si chiude con parentesi graffe {}
- Una dichiarazione può contenere un qualsiasi numero di proprietà

Proprietà e valori
Sintatticamente ogni coppia è costituita dal nome della proprietà, seguita da due punti (:)
seguita da un valore e terminata da un punto e virgola;

Alcune proprietà possono raggruppare più valori. Si chiamano proprietà abbreviate

(shorthand property). L’ordine è fondamentale!

Commenti nel CSS

I commenti iniziano con / * e devono terminare con * / e possono estendersi su più righe.
Non possono essere annidati.
Selettori
• Il selettore è la parte di una regola CSS che seleziona il contenuto a cui applicare lo stile

• Esistono diversi tipi di selettori:

Selettori di tipo elemento (o tag)

Un selettore senza segni di punteggiatura corrisponde a un tag HTML.

Il selettore “p” applicherà la regola CSS a tutti i tag <p> nel documento.

Selettori di tipo id
Il selettore di ID è un cancelletto (#) seguito direttamente dall’ID.

Utilizzato per identificare un preciso elemento.

Selettori di tipo classe

Il selettore di tipo classe è rappresentato da un punto (.) seguito dal nome della classe
stessa.

I valori dell'attributo class possono essere condivisi da più tag e più classi possono essere
assegnate a un tag.

Selettori raggruppati
Ipotizziamo di avere regole CSS identiche per più selettori.

E’ una bad practice ripetere più volte le stesse regole: una eventuale modifica va applicata
n volte. Scomodo e rischioso.

Si raggruppano i selettori separati da “,” e si scrive una volta sola la dichiarazione.

Selettori specializzati
La regola di stile per una classe può anche essere definita per uno specifico tag o un
qualsiasi sotto-gruppo di selettori.

In questo modo si evita di applicarla a qualsiasi elemento avente una certa classe.

Se due selettori di tipi diversi (come tag e classe) appaiono uno accanto all'altro senza
spaziature che li separano, allora formano un selettore specializzato.

Se è utilizzato un selettore “tag” deve comparire al primo posto.

La regola si applicherà solo agli elementi blockquote che hanno anche la classe speech.

Selettori combinatori
I selettori combinatori sono selettori che stabiliscono una relazione tra due o più semplici
selettori, come “A è figlio di B” oppure "A è adiacente a B”:

- selettori discendenti
- selettori discendenti diretti
- selettori fratelli adiacenti
- selettori fratelli generici

Selettori discendenti
Una regola di stile si può applicare anche a elementi in base ai suoi elementi antenati o
genitori.

Il selettore è composto da tag, identificatori o selettori di classe separati da uno spazio.

Qualsiasi tag <a> ovunque all'interno di un <blockquote> ovunque all'interno della sezione
#intro sarà in grassetto.

Permette di applicare uno stile a solo agli elementi “figli” diretti (child).

Si utilizza il simbolo > tra due selettori per limitare l'applicazione ai figli diretti del genitore.

Nell’esempio la regola è applicata a tutte le ancore direttamente all’interno dell’elemento

con id #intro.

Selettori fratelli adiacenti

Selezionano gli elementi B immediatamente adiacenti a elementi A e con medesimo
genitore.
Utilizza il simbolo + tra due selettori.

Selettori fratelli generici

Selezionano gli elementi B adiacenti a elementi A e con medesimo genitore, ma non
necessariamente adiacenti.
Utilizza il simbolo ~ tra due selettori.

Selettori di tipo attributo

Il CSS permette di creare selettori sulla base del valore o della presenza di determinati
attributi nei tag.

L’attributo va scritto tra parentesi quadre [ ]. Ad esempio per selezionare tutti gli elementi
<a> che hanno l’attributo target.
Per selezionare tag aventi un attributo con un valore specifico.

Selettori di pseudo-classi
CSS permette di creare selettori sulla base delle pseudo-classi, cioè sulla base dello stato di
un elemento.
Selettori di pseudo-elementi
Questi selettori fanno riferimento a una parte di un elemento, ad esempio la prima lettera
o la prima riga di un paragrafo.

Gli pseudo-elementi sono separate dal selettore col carattere “::”

Esistono due pseudo-elementi particolari che, oltre a modificare l’aspetto di un elemento,

consentono di inserire del contenuto prima e dopo un elemento definendone
contestualmente lo stile:
- ::before
- ::after

Selettori globali
L'asterisco (*) può essere utilizzato per “agganciare” qualsiasi tag. Spesso Utile se
combinato con altri selettori in un selettore discendente.

CSS III