Post on 28-Nov-2014
description
HTML e CSS [1]Synergia – Matteo Magni
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
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]
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...
http://cypher.informazione.me/
http://code.google.com/r/admin-cypher/
Il nostro Course Builder
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)
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.
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)
Client - Server
• Il client effettua una Request al server che a sua volta risponderà con una Response.
• Il tutto in modo Stateless
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)
Browser
• Il browser è un software che ha la capacità di interpretare l'HTML e di visualizzarlo in forma di ipertesto.
“L'apparenza inganna”
HTML - Browser
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)
SGML -Semantica degli elementi
Lo Standard Generalized Markup Language (SGML).
La principale funzione di SGML è la stesura di testi chiamati Document Type Definition, in acronimo DTD, ciascuno dei quali definisce in modo rigoroso la struttura logica che devono avere i documenti di un determinato tipo; si dice che questi documenti rispetto a SGML costituiscono un linguaggio obiettivo, ovvero una applicazione.
Lo scopo è quello di marcare gli elementi di un documento web secondo le sue caratteristiche di contenuto. Seguendo questo approccio avremo una marcatura semantica, viceversa avremo una marcatura difficile da comprendere e incoerente.
DTD
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.
http://www.diodati.org/w3c/html401/intro/sgmltut.html
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.
Tecnologie Client Side
• HTML → contenuto
• Css →visualizzazione
• Javascript → interazione
HTML 4
HTML 4.01 Specification
W3C Recommendation 24 December 1999
http://www.w3.org/TR/html4/
In italianohttp://www.diodati.org/w3c/html401/cover.html
Tag HTML
Apertura e chiusura
<tag>contenuto</tag>
Tag senza “contenuto”
<tag/>
Annidamento
<tag1>
<tag2>Contenuto</tag2>
<tag3/>
</tag1>
Indentazione1) <tag1>
<tag2>contenuto</tag2>
<tag3/>
</tag1>
2) <tag1><tag2>contenuto</tag2><tag3/></tag1>
L'output è uguale ma il primo è molto più leggibile per il programmatore
Commenti
• I commenti sono porzioni di codice che il browser ignora e non fa vedere all'utente. Tale codice risulta invece molto utile per il programmatore al fine di spiegare le porzioni di codice.
<! Io sono un commento HTML>
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”>
</a>
Struttura di un documento HTML
<!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>Il mio primo documento HTML</TITLE>
</HEAD>
<BODY>
<P>Ciao mondo!</P>
</BODY>
</HTML>
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
Editor
Il Webmaster duro usa Blocco note, ma il webmaster saggio cosa usa?
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.
Editor - WYSIWYGWhat You See Is What You Get
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>
Entità HTML
• 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à.
< <
> >
Ci permette di fare:
<pre> <pre> →
<br/> <br/>→
http://it.wikibooks.org/wiki/HTML/Entit%C3%A0
Titoli
• <h1> il tag h1 è differente dal tag <title>
• <h2>
• ....
• </h6>
http://www.diodati.org/w3c/html401/struct/global.html#h-7.5.5
Elementi di Testo
– 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.).
http://www.diodati.org/w3c/html401/struct/text.html
Citazioni
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.
http://www.diodati.org/w3c/html401/struct/text.html#h-9.2.2
Domande?
Slide:
http://cypher.informazione.me/
Code:
https://github.com/inFormazione/Cypher/
mail:
matteo@magni.me