Prima lezione modulo HTML e CSS del corso per WebMaster & WebDesigner 2013

1. HTML e CSS [1]
Synergia – Matteo Magni

2. whoami
• Matteo Magni
• Web Developer & System Administrator
• http://www.linkedin.com/in/matteomagni
• http://twitter.com/ilbonzo
• http://www.slideshare.net/ilbonzo
• matteo@magni.me

3. Corso
Web Master & Web Designer
• HTML e CSS
• Dreamweaver
• SEO e Web Marketing
• Grafica per il Web
• Web Usability
• Javascript
• HTML5 e Css3
• jQuery
• Joomla
• [Progetto]

4. Google Course Builder
http://code.google.com/p/course-builder/
E' un progetto per avere una piattaforma di
e-learning sviluppato da Google al fine di
integrare i vari strumenti di Big G, come
video, docs, groups, ecc...

5. Il nostro Course Builder
http://cypher.informazione.me/
http://code.google.com/r/admin-cypher/

6. Github
https://github.com/inFormazione/Cypher/

7. Nascita del World Wide Web
Tim Berners-Lee e Robert
Cailliau nel 1990 misero a punto
il protocollo HTTP e una prima
specifica del linguaggio HTML,
sulla base dei quali sono stati
realizzati un primo programma
browser/editor ipertestuale per il
WWW, utilizzato all'interno del
CERN nel 1991. (Wikipedia)

8. W3C :Nell'ottobre del 1994 Tim Berners Lee, padre del Web, fondò al MIT
(Massachusetts Institute of Technology), in collaborazione con il CERN (il laboratorio dal
quale proveniva), un'associazione di nome World Wide Web Consortium (abbreviato
W3C), con lo scopo di migliorare gli esistenti protocolli e linguaggi per il World Wide Web
e di aiutare il web a sviluppare tutte le sue potenzialità.
• Il web ormai non è più uno strumento per «appassionati», ma è diventato parte integrante della vita
comune delle persone. Attualmente esistono diversi tipi di apparecchi (come cellulari e PDA) che
accedono ad internet. Ciò è possibile solo grazie ad un «comune linguaggio di comunicazione» (nello
specifico, il protocollo di comunicazione e linguaggio in cui è scritto il file) tra server, PC ed altri dispositivi.
Il W3C si occupa di aggiornare e creare queste specifiche.
• Il Web ha un potenziale praticamente illimitato, ed apre nuove strade ai portatori di handicap, anche gravi.
Il W3C cerca di studiare i modi per rendere quanto più agevole l'accesso al web da parte di questa
categoria di persone.
• Il web è unico perché è libero. Chiunque può creare un documento html e metterlo liberamente online. Il
W3C cerca di evitare che interessi di qualsiasi genere possano porre un freno a questa assoluta libertà
ed è anche un sito per aiutare a sviluppare le potenzialità comunicative degli esseri umani.

9. HTTP
• L'HyperText Transfer Protocol
(HTTP) (protocollo di
trasferimento di un ipertesto) è
usato come principale sistema per
la trasmissione d'informazioni sul
web. Le specifiche del protocollo
sono gestite dal World Wide Web
Consortium (W3C). Un Server
HTTP generalmente resta in
ascolto sulla porta 80 usando il
protocollo TCP. (Wikipedia)

10. Client - Server
• Il client effettua una
Request al server
che a sua volta
risponderà con una
Response.
• Il tutto in modo
Stateless

11. HTML
• L'HyperText Markup Language (HTML) (traduzione letterale:
linguaggio di descrizione per ipertesti) è il linguaggio solitamente
usato per i documenti ipertestuali disponibili nel World Wide Web. In
tali documenti, un tratto di testo può essere contrassegnato
inserendo delle etichette, tag, che ne descrivono la funzione, il
colore, il link, o altre caratteristiche. Il contenuto servito dai siti web
in seguito a una richiesta dell'utente solitamente consiste di un
documento HTML: un web browser scarica da uno o più web server
il contenuto HTML ed eventuali documenti collegati e li elabora,
ossia ne interpreta il codice, al fine di generare la visualizzazione
della pagina desiderata sullo schermo del computer. (wikipedia)

12. Browser
• Il browser è un
software che ha la
capacità di
interpretare l'HTML
e di visualizzarlo in
forma di ipertesto.

13. “L'apparenza inganna”

14. HTML - Browser

15. Markup language
L'HTML non è un linguaggio di
programmazione, ma un
linguaggio di markup, ossia
descrive le modalità di
impaginazione, formattazione o
visualizzazione grafica (layout)
del contenuto, testuale e non, di
una pagina web. Tuttavia, l'HTML
supporta l'inserimento di script e
oggetti esterni quali immagini o
filmati. (wikipedia)

16. SGML -Semantica degli
elementi
Lo Standard Generalized Markup Lo scopo è quello di marcare gli
Language (SGML). elementi di un documento web
La principale funzione di SGML è la secondo le sue caratteristiche di
stesura di testi chiamati Document contenuto. Seguendo questo
Type Definition, in acronimo DTD, approccio avremo una marcatura
ciascuno dei quali definisce in modo semantica, viceversa avremo una
rigoroso la struttura logica che marcatura difficile da comprendere e
devono avere i documenti di un incoerente.
determinato tipo; si dice che questi
documenti rispetto a SGML
costituiscono un linguaggio obiettivo,
ovvero una applicazione.

17. DTD
http://www.diodati.org/w3c/html401/intro/sgmltut.html
Il Document Type Definition (definizione del tipo
di documento) è uno strumento utilizzato dai
programmatori il cui scopo è quello di definire le
componenti ammesse nella costruzione di un
documento XML.

18. Cosa fa il DTD
• Definisce gli elementi leciti all'interno del documento. Non si possono usare
altri elementi se non quelli definiti. Una specie di "vocabolario" per i file che
lo useranno.
• Definisce la struttura di ogni elemento. La struttura indica cosa può
contenere ciascun elemento, l'ordine, la quantità di elementi che possono
comparire e se sono opzionali o obbligatori. Una specie di "grammatica".
• Dichiara una serie di attributi per ogni elemento e che valori possono o
devono assumere questi attributi.
• Fornisce infine alcuni meccanismi per semplificare la gestione del
documento, come la possibilità di dichiarare entity e la possibilità di
importare parti di altri DTD.

19. Tecnologie Client Side
• HTML → contenuto
• Css →visualizzazione
• Javascript → interazione

20. HTML 4
HTML 4.01 Specification
W3C Recommendation 24 December 1999
http://www.w3.org/TR/html4/
In italiano
http://www.diodati.org/w3c/html401/cover.html

21. Tag HTML
Apertura e chiusura Indentazione
<tag>contenuto</tag> 1) <tag1>
<tag2>contenuto</tag2>
Tag senza “contenuto”
<tag3/>
<tag/>
</tag1>
Annidamento 2) <tag1><tag2>contenuto</tag2>
<tag3/></tag1>
<tag1>
<tag2>Contenuto</tag2> L'output è uguale ma il primo è
molto più leggibile per il
<tag3/> programmatore
</tag1>

22. Commenti
• I commenti sono porzioni
di codice che il browser
ignora e non fa vedere
all'utente. Tale codice
<!­­
Io sono un commento risulta invece molto utile
HTML per il programmatore al
­­> fine di spiegare le
porzioni di codice.

23. Attributi
Gli attributi vengono usati per aggiungere una caratteristica o una
proprietà ad un elemento.
Un attributo è una coppia nome-valore che può essere presente
all'interno del tag di apertura di un elemento, dopo il nome dell'elemento
stesso.
<img src=”pippo.png”/>
<a href=”http://google.com”>
Google
</a>

24. Struttura di un documento
HTML
<!DOCTYPE HTML PUBLIC
"­//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/stric
t.dtd">
<HTML>
<HEAD>
<TITLE>Il mio primo
documento HTML</TITLE>
</HEAD>
<BODY>
<P>Ciao mondo!</P>
</BODY>
</HTML>

25. Elementi documento HTML
• L'elemento HTML
– http://www.diodati.org/w3c/html401/struct/global.html#h-7.3
• L'elemento HEAD
– http://www.diodati.org/w3c/html401/struct/global.html#h-7.4.1
• L'elemento TITLE
– http://www.diodati.org/w3c/html401/struct/global.html#h-7.4.2
• L'elemento BODY
– http://www.diodati.org/w3c/html401/struct/global.html#h-7.5.1

26. Editor
Il Webmaster duro usa Blocco note, ma il
webmaster saggio cosa usa?

27. Editor (2)
Con syntax highlighting si intende la caratteristica di un software, solitamente editor di
testo, di visualizzare un testo con differenti colori e font in base a particolari regole
sintattiche. Questa caratteristica, utilizzata soprattutto per il codice sorgente, facilità la
scrittura in un linguaggio strutturato come un linguaggio di programmazione o un
linguaggio di markup che dispone di una sintassi e di una grammatica precise.

28. Editor - WYSIWYG
What You See Is What You Get

29. Righe e Paragrafi
• <p>
• <br/>
• <pre>
<pre>
Higher still and higher
From the earth thou springest
Like a cloud of fire;
The blue deep thou wingest,
And singing still dost soar, and soaring ever singest.
</pre>

30. Entità HTML
http://it.wikibooks.org/wiki/HTML/Entit%C3%A0
• Le entità sono dei particolari codici che servono per rappresentare
caratteri speciali, i quali potrebbero avere problemi di visualizzazioni
su computer e sistemi operativi differenti. Il codice per inserire una
entità nella pagina è: &entità.
< &lt;
> &gt;
Ci permette di fare:
<pre> → &lt;pre&gt;
<br/> → &lt;br/&gt;

31. Titoli
http://www.diodati.org/w3c/html401/struct/global.html#h-7.5.5
• <h1> il tag h1 è differente dal tag <title>
• <h2>
• ....
• </h6>

32. Elementi di Testo
http://www.diodati.org/w3c/html401/struct/text.html
– EM: Denota enfasi.
– STRONG: Denota un'enfasi più forte
– CITE: Contiene una citazione o un riferimento ad altre fonti.
– DFN: Indica che questa è l'istanza di definizione del termine racchiuso.
– CODE: Designa un frammento di codice informatico.
– SAMP: Designa un campione prodotto da programmi, script, ecc.
– KBD: Denota del testo che deve essere immesso dall'utente.
– VAR: Denota un'istanza di una variabile o di un argomento di
programma.
– ABBR: Denota un'abbreviazione (es., WWW, HTTP, URI, Mass., ecc.).
– ACRONYM: Denota un acronimo (es., WAC, radar, ecc.).

33. Citazioni
http://www.diodati.org/w3c/html401/struct/text.html#h-9.2.2
BLOCKQUOTE
• I programmi utente di tipo visuale generalmente
riproducono BLOCKQUOTE come un blocco rientrato.
Q
• I programmi utente di tipo visuale devono garantire che il
contenuto dell'elemento Q sia riprodotto racchiuso tra
virgolette. Gli autori non dovrebbero mettere le virgolette
all'inizio e alla fine del contenuto dell'elemento Q.

34. Domande?
Slide:
http://cypher.informazione.me/
Code:
https://github.com/inFormazione/Cypher/
mail:
matteo@magni.me