LABORATORIO DI COMUNICAZIONE VISIVA | HTML+CSS | docente: Diana Quarti 1
HTML & MARKUP LANGUAGES
LABORATORIO DI COMUNICAZIONE VISIVA | HTML+CSS | docente: Diana Quarti 2
HTML DEVELOPMENT
Primi anni ‘90: Tim Berners-Lee sviluppò la prima versione dell’HTML al CERN di Ginevra (Svizzera), assieme al protocollo HTTP dedicato al trasferimento di documenti in tale formato.
Nel 1993 fu resa pubblica la prima versione dell’HTML, firmata inseme a Daniel Connolly.
LABORATORIO DI COMUNICAZIONE VISIVA | HTML+CSS | docente: Diana Quarti 3
STANDARD WEB
“…a set of standardized best practices for building web sites,
and a philosophy of web design and development that includes those methods.”
from Wikipedia
LABORATORIO DI COMUNICAZIONE VISIVA | HTML+CSS | docente: Diana Quarti 4
STANDARD WEB
Quali sono le tecnologie per un design conforme agli standard?
• HTML / XHTML for semantic markup of content
• Cascading Stylesheets (CSS) for the presentation of content
• JavaScript for functionality related to content
LABORATORIO DI COMUNICAZIONE VISIVA | HTML+CSS | docente: Diana Quarti 5
STANDARD UFFICIALI (MA ANACRONISTICI!)
• Risoluzione minima schermo: 1024 px di larghezza (quindi grid 960)
• Formato immagini: jpeg / png / gif• CSS2 + xhtml • PHP • Controllare la validazione• Dimensioni della home page (qualche kb al massimo)• Testi 12px di altezza• Colori fra i 216 web safe
LABORATORIO DI COMUNICAZIONE VISIVA | HTML+CSS | docente: Diana Quarti 6
STANDARD DI FATTO
• Risoluzione minima schermo: 960px / 1170 px di larghezza• Formato immagini: jpeg / png / gif / svg / webP• CSS3 + xhtml / html5• PHP • Controllare la validazione• Dimensioni della home page (qualche kb al massimo)• Testi 12px di altezza• Colori fra i 65000 (la tavolozza web safe non è piu rilevante)
LABORATORIO DI COMUNICAZIONE VISIVA | HTML+CSS | docente: Diana Quarti 7
HTML è l’acronimo di HyperText Markup Language
(Linguaggio di Marcatura di Ipertesti)
XHTML è l’acronimo di eXtensible HyperText Markup Language
Un file XHTML è una pagina HTML scritta in conformità con lo standard XML
DEFINIZIONE DI HTML
LABORATORIO DI COMUNICAZIONE VISIVA | HTML+CSS | docente: Diana Quarti 8
DEFINIZIONE DI HYPERTEXT - IPERTESTO
In informatica, l’ipertesto è insieme non lineare di documenti con informazioni di varia natura (testi, immagini, audio, filmati), collegati l’uno all’altro per mezzo di connessioni logiche e rimandi (link) che consentono all’utente di costruirsi di volta in volta un autonomo percorso di lettura.
LABORATORIO DI COMUNICAZIONE VISIVA | HTML+CSS | docente: Diana Quarti 9
MARKUP - MARCATURA
Il termine markup (o marcatura) deriva dall’ambiente tipografico dove si usava marcare con annotazioni le parti del testo che andavano evidenziate, corrette o editate in maniera particolare (corsivi, grassetti, ecc.) allo scopo di segnalarle al compositore o al dattilografo.
LABORATORIO DI COMUNICAZIONE VISIVA | HTML+CSS | docente: Diana Quarti 10
MARKUP LANGUAGE
La tecnica di composizione di un testo con l’uso di marcatori (o espressioni codificate) richiede una serie di convenzioni, ovvero di un linguaggio a marcatori di documenti.
In generale un linguaggio di markup descrive i meccanismi di rappresentazione (strutturali, semantici o presentazionali) del testo che, utilizzando convenzioni standardizzate, sono utilizzabili su più supporti.
LABORATORIO DI COMUNICAZIONE VISIVA | HTML+CSS | docente: Diana Quarti 11
LABORATORIO DI COMUNICAZIONE VISIVA | HTML+CSS | docente: Diana Quarti 12
LA SINTASSI DELL’HTML
L’HTML è il linguaggio con cui potete scrivere una pagina Web e quindi ha una sua “grammatica”.
Un documento html non è nient’altro infatti che un file di testo con delle indicazioni/marcature sui contenuti presenti nella pagina e sui contenitori logici che la compongono.
Le marcature vengono chiamate TAG:
• Hanno il compito di visualizzare le diverse parti di una pagina web.
• Hanno differenti nomi a seconda della loro funzione.
LABORATORIO DI COMUNICAZIONE VISIVA | HTML+CSS | docente: Diana Quarti 13
I tag vanno inseriti tra parentesi uncinate (<TAG>)
La chiusura del tag viene indicata con una “/” (Quindi: </TAG>).
Il contenuto va inserito tra l’apertura e la chiusura del tag medesimo, secondo questa forma:
<TAG attributi> contenuto </TAG>
LABORATORIO DI COMUNICAZIONE VISIVA | HTML+CSS | docente: Diana Quarti 14
Principali Tag di contenuto:
h1, h2, h3, h4, h5, h6, p, a, ul, ol, li, hr, table, img
Principali Tag di struttura:
html, body, div (html)
section, header, footer, article (nuovi tag html5)
CONTENUTI VS STRUTTURA
LABORATORIO DI COMUNICAZIONE VISIVA | HTML+CSS | docente: Diana Quarti 15
EMPTY TAGS
Alcuni particolari tag non hanno contenuto - perché ad esempio indicano la posizione di alcuni elementi (come il tag delle immagini o l’interruzione di linea) - conseguentemente questi tag non hanno neanche un tag di chiusura.
Se scriviamo il codice secondo lo standard XHTML il tag avrà una chiusura immediata al suo interno, mentre secondo lo standard HTML5 la chiusura interna non è necessaria.
La loro forma sarà dunque /XHTML vs HTML)
<TAG /> o <TAG attributi /> oppure <TAG> o <TAG attributi>
Ecco un esempio di immagine:
<img alt=”alt” /> oppure <img alt="alt">
LABORATORIO DI COMUNICAZIONE VISIVA | HTML+CSS | docente: Diana Quarti 16
Alucni esempi:
<br/> per inserire un’interruzione di linea
<hr/> per inserire un cambiamento tematico all’interno della pagina che viene visualizzato come una linea orizzontale
In alcuni empty tag sono molto importanti gli attributi:
<img src=”picture.jpg” alt= “This is my picture” /> per inserire un’immagine
LABORATORIO DI COMUNICAZIONE VISIVA | HTML+CSS | docente: Diana Quarti 17
COMMENTARE IL CODICE
È possibile inserire delle indicazioni significative per il developer, ma invisibili al browser.
Inserendo i commenti in punti specifici del documento ci permette di mantenere l’orientamento anche in file molto complessi e lunghi.
La sintassi di un commento è la seguente
<!-- questo è un commento -->
LABORATORIO DI COMUNICAZIONE VISIVA | HTML+CSS | docente: Diana Quarti 18
STRUTTURA DI UNA PAGINA BASE
Una pagina base HTML è suddivisa solitamente in tre sezioni:
Specifiche iniziali
Inizio codice
Testata - Fine testata
Corpo - Fine corpo
Fine codice
LABORATORIO DI COMUNICAZIONE VISIVA | HTML+CSS | docente: Diana Quarti 19
LABORATORIO DI COMUNICAZIONE VISIVA | HTML+CSS | docente: Diana Quarti 20
INDENTAZIONE
LABORATORIO DI COMUNICAZIONE VISIVA | HTML+CSS | docente: Diana Quarti 21
Doctype specifica il tipo di documento. È la prima riga da inserire.
DOCTYPE XHTML<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 //IT">
• HTML: il tipo di linguaggio utilizzato è l'HTML• PUBLIC: il documento è pubblico• W3C: il documento fa riferimento alle specifiche rilasciate dal W3C• XHTML 1.0 Transitional: il documento fa riferimento a una DTD ("Document Type Definition" cioè "Definizione del tipo di documento");
DOCTYPE HTML5<!DOCTYPE HTML>
SPECIFICHE INIZIALI: DOCTYPE
LABORATORIO DI COMUNICAZIONE VISIVA | HTML+CSS | docente: Diana Quarti 22
Contiene informazioni non immediatamente percepibili, ma che riguardano il modo in cui il documento deve essere letto e interpretato.
Questo è il luogo dove scrivere
• titolo e altri meta-tag (alcuni a esclusivo beneficio dei motori di ricerca)
• script (JavaScript)
• fogli di stile (css)
HEAD
LABORATORIO DI COMUNICAZIONE VISIVA | HTML+CSS | docente: Diana Quarti 23
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1” />Indica al browser che deve caricare il set di caratteri occidentale (e non - ad esempio - il set di caratteri giapponese).
CHARSET HTML5
<meta charset=”UTF-8”>
HEAD / META-TAG: CHARSET
LABORATORIO DI COMUNICAZIONE VISIVA | HTML+CSS | docente: Diana Quarti 24
Sintassi:
<title>Titolo di pagina max 60 caratteri</title>
Inserisce un titolo della pagina web, che compare nella parte alta della finestra del browser.
È un meta-tag, poiche compare nella parte dell’head di pagina e non è un tag di contenuto.
Molto importante per l’indicizzazione delle pagine sui motori di ricerca.
HEAD / META-TAG: <TITLE> / TITOLO DI PAGINA
LABORATORIO DI COMUNICAZIONE VISIVA | HTML+CSS | docente: Diana Quarti 25
Sintassi:
<meta name=”description” content=”descrizione massimo 120 caratteri”>
Inserisce una descrizione sommaria della pagina web.
Molto importante per l’indicizzazione delle pagine sui motori di ricerca.
HEAD / META-TAG <META NAME “DESCRIPTION”>
LABORATORIO DI COMUNICAZIONE VISIVA | HTML+CSS | docente: Diana Quarti 26
Sintassi:
<meta name=”keywords” content=”Comunicazione visiva, HTML, CSS, corso, Bicocca”>
Inserisce una serie di parole chiave della pagina web divise tra di loro da una virgola.
Serve come indicazione per l’indicizzazione delle pagine sui motori di ricerca.
HEAD / META-TAG <META NAME “KEYWORDS”>
LABORATORIO DI COMUNICAZIONE VISIVA | HTML+CSS | docente: Diana Quarti 27
Qui è racchiuso il contenuto vero e proprio del documento che viene visualizzato dal browser. Il contenuto della pagina verrà strutturato a seconda dei tag utilizzati:• Titoli - h1 e Sottotitoli - h2, h3, h4, h5, h6• Testi - p• Elenchi - ul-ol-li• Immagini - img• Link - a• Tabelle - table• Blocchi contenitore - div
BODY
LABORATORIO DI COMUNICAZIONE VISIVA | HTML+CSS | docente: Diana Quarti 28
Sintassi:
<h1>titolo</h1>
<h2>titolo</h2>
....
<h6>titolo</h6>
Inserisce un titolo. Semanticamente il tag H1 è il più rilevante per il posizionamento online, in accoppiata con il tag H2, generalmente chiamato “sottotitolo”.
TAG <H1> - <H6> : TITOLI DI PAGINA
LABORATORIO DI COMUNICAZIONE VISIVA | HTML+CSS | docente: Diana Quarti 29
Sintassi: <p>paragrafo di testo</p>
Inserisce un paragrafo di testo continuo e terminando il paragrafo stesso con una spaziatura finale di fine paragrafo (impostazione di default del browser).
TAG <P> : PARAGRAFI
LABORATORIO DI COMUNICAZIONE VISIVA | HTML+CSS | docente: Diana Quarti 30
Così come un libro si costituisce di un solo titolo principale, di alcuni sottotitoli di vario livello e di diversi paragrafi...
...anche la nostra pagina web dovra essere strutturata con:
un solo titolo per contenuto (h1)
dei sottotitoli (h2,h3, ecc.)
e più paragrafi (p).
STRUTTURAZIONE DEI CONTENUTI DELLA PAGINA
LABORATORIO DI COMUNICAZIONE VISIVA | HTML+CSS | docente: Diana Quarti 31
Inserisce un “a capo” nel testo senza introdurre interline e spaziate nel testo, come avviene spezzando con due tag <p> contigui (interruzione di riga).
Questo tag, non avendo contenuti, si apre e si chiude direttamente.
Sintassi: <br/> (xhtml) o <br> (html)
TAG <BR> : BREAK RULE
LABORATORIO DI COMUNICAZIONE VISIVA | HTML+CSS | docente: Diana Quarti 32
Inserisce una linea orizzontale e definisce un cambio di argomento nella pagina.
Sintassi: <hr/> (xhtml) o <hr> (html)
TAG <HR> : HORIZONTAL RULE
LABORATORIO DI COMUNICAZIONE VISIVA | HTML+CSS | docente: Diana Quarti 33
Esistono due tipi di elenchi:• Elenchi ordinati• Elenchi non ordinati
Sintassi
<elenco> <elemento>nome del primo elemento <elemento>nome del secondo elemento ………. ……</elenco>
GLI ELENCHI
LABORATORIO DI COMUNICAZIONE VISIVA | HTML+CSS | docente: Diana Quarti 34
Descrive una lista di oggetti (parole, immagini, link...) non ordinata, ovvero senza numerazione progessiva. Viene spesso utilizzato per creare dei menu.
• primo elemento• secondo elemento• ...
Sintassi
<ul><li>primo elemento </li><li>secondo elemento </li>……</ul>
TAG <UL> : UNORDERED LIST
LABORATORIO DI COMUNICAZIONE VISIVA | HTML+CSS | docente: Diana Quarti 35
Descrive una lista di oggetti (parole, immagini, link...) ordinata, ovvero con numerazione progessiva
1. primo elemento2. secondo elemento3. ...
Sintassi
<ol><li>primo elemento </li><li>secondo elemento </li>……</ol>
TAG <OL> : ORDERED LIST
LABORATORIO DI COMUNICAZIONE VISIVA | HTML+CSS | docente: Diana Quarti 36
Descrive un oggetto entro una lista.
Il tag LI non puo esistere senza un progenitore di lista (lista non ordinata o lista ordinata)
Sintassi
<li> oggetto in lista </li>
TAG <LI> : LIST ITEM
LABORATORIO DI COMUNICAZIONE VISIVA | HTML+CSS | docente: Diana Quarti 37
Gli elenchi possono essere nidificati all’interno di un altro elenco.
Sintassi
<ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea</li> </ul> </li> <li>Milk</li></ul>
ELENCHI NIDIFICATI