SlideShare une entreprise Scribd logo
1  sur  34
Mattoncini per il web Giorgio Carpoca
Programma ,[object Object],[object Object],[object Object]
Le   fondamenta ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Il lato oscuro ,[object Object],[object Object],[object Object],[object Object],[object Object]
Lo   chiamano   2.0 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Web Developer presso Iperclub spa MCP Microsoft Sviluppo applicazioni web .Net 2.0  [email_address]
U n mondo   di   statistiche Sistemi operativi Browser Risoluzione schermo
Architettura del web Richiesta di una pagina Risposta con il contenuto della pagina Server Client
Esempi di messaggi tra client e server  GET /wiki/Pagina_principale HTTP/1.1 Connection: Keep-Alive User-Agent: Mozilla/5.0 (compatible; Konqueror/3.2; Linux) (KHTML, like Gecko)  Accept: text/html, image/jpeg, image/png, text/*, image/*, */*  Accept-Encoding: x-gzip, x-deflate, gzip, deflate, identity  Accept-Charset: iso-8859-1, utf-8;q=0.5, *;q=0.5  Accept-Language: en  Host: it.wikipedia.org  HTTP/1.0 200 OK  Date: Mon, 28 Jun 2004 10:47:31 GMT Server: Apache/1.3.29 (Unix) PHP/4.3.4 X-Powered-By: PHP/4.3.4  Vary: Accept-Encoding,Cookie  Cache-Control: private, s-maxage=0, max-age=0, must-revalidate  Content-Language: it  Content-Type: text/html; charset=utf-8 Age: 7673  X-Cache: HIT from wikipedia.org Connection: close  Client Server
HTML, XML > XHTML ,[object Object],[object Object],[object Object]
[object Object],[object Object]
[object Object],[object Object],[object Object],[object Object],[object Object]
Struttura di una pagina Html Un documento HTML comincia con l'indicazione della definizione del tipo di documento ( Document Type Definition  o DTD), la quale segnala al browser l'URL delle specifiche HTML utilizzate per il documento, indicando quindi, implicitamente, quali elementi, attributi ed entità si possono utilizzare e a quale versione di HTML si fa riferimento. Di fatto, questa informazione serve al browser per identificare le regole di interpretazione e visualizzazione appropriate per lo specifico documento. Questa definizione deve pertanto precedere tutti i tag relativi al documento stesso. Dopo il DTD, il documento HTML presenta una struttura ad albero annidato, composta da sezioni delimitate da tag opportuni che al loro interno contengono a loro volta sottosezioni più piccole, sempre delimitate da tag. La struttura più esterna è quella che delimita l'intero documento, eccetto la DTD, ed è compresa tra i tag <html> e </html>. All'interno dei tag <html> lo standard prevede sempre la definizione di due sezioni ben distinte e disposte in sequenza ordinata: la sezione di intestazione o  header , delimitata tra i tag <head> e </head>, che contiene informazioni di controllo normalmente non visualizzate dal browser, con l'eccezione di alcuni elementi la sezione del corpo o  body , delimitata tra i tag <body> e </body>, che contiene la parte informativa vera e propria, ossia il testo, le immagini e i collegamenti che costituiscono la parte visualizzata dal browser.
Header ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Body ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Esempio   1 HTML ,[object Object],[object Object],[object Object],[object Object],[object Object]
Esempio   2 XML ,[object Object],[object Object]
Esempio 3 XHTML ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Principali tag HTML ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Tabelle ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Esempio 4   ,[object Object],[object Object],[object Object]
CSS ,[object Object],[object Object]
CSS regole generali ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
CSS regole ,[object Object],[object Object],[object Object],[object Object],[object Object]
CSS Attributo media ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
CSS ereditarietà e cascade ,[object Object],[object Object]
Box Model ,[object Object],[object Object],[object Object],[object Object]
Esempio CSS 2 colonne ,[object Object],[object Object]
Accessibilità ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
WCAG ,[object Object]
Linee Guida WCAG ,[object Object],[object Object],[object Object],[object Object],[object Object]
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
[object Object],[object Object],[object Object]
Link ,[object Object],[object Object],[object Object],[object Object],[object Object]

Contenu connexe

Tendances

Tendances (19)

Corso di HTML5 e CSS
Corso di HTML5 e CSSCorso di HTML5 e CSS
Corso di HTML5 e CSS
 
Html e CSS ipertesti e siti web 4.5
Html e CSS   ipertesti e siti web 4.5Html e CSS   ipertesti e siti web 4.5
Html e CSS ipertesti e siti web 4.5
 
Html base - classi prime - multimedia
Html base - classi prime - multimediaHtml base - classi prime - multimedia
Html base - classi prime - multimedia
 
Struttura di una pagina html
Struttura di una pagina htmlStruttura di una pagina html
Struttura di una pagina html
 
Wordpress - Primi passi | Mafaldida
Wordpress  - Primi passi | MafaldidaWordpress  - Primi passi | Mafaldida
Wordpress - Primi passi | Mafaldida
 
Html 5: una breve guida!
Html 5: una breve guida!Html 5: una breve guida!
Html 5: una breve guida!
 
HTML5
HTML5HTML5
HTML5
 
Guida introduttiva al css
Guida introduttiva al cssGuida introduttiva al css
Guida introduttiva al css
 
Dal Click Al Web Server
Dal Click Al Web ServerDal Click Al Web Server
Dal Click Al Web Server
 
Introduzione al CSS
Introduzione al CSSIntroduzione al CSS
Introduzione al CSS
 
Html5
Html5Html5
Html5
 
HTML e CSS Prima Lezione
HTML e CSS Prima LezioneHTML e CSS Prima Lezione
HTML e CSS Prima Lezione
 
HTMLslide html
HTMLslide htmlHTMLslide html
HTMLslide html
 
I Linguaggi Del Web (1° Giornata)
I Linguaggi Del Web (1° Giornata)I Linguaggi Del Web (1° Giornata)
I Linguaggi Del Web (1° Giornata)
 
Html5 e css3 nuovi strumenti per un nuovo web
Html5 e css3 nuovi strumenti per un nuovo webHtml5 e css3 nuovi strumenti per un nuovo web
Html5 e css3 nuovi strumenti per un nuovo web
 
Fogli di stile CSS
Fogli di stile CSSFogli di stile CSS
Fogli di stile CSS
 
Html e Css - 1 | WebMaster & WebDesigner
Html e Css - 1 | WebMaster & WebDesignerHtml e Css - 1 | WebMaster & WebDesigner
Html e Css - 1 | WebMaster & WebDesigner
 
Html TAGS 2
Html TAGS 2Html TAGS 2
Html TAGS 2
 
Blog
BlogBlog
Blog
 

En vedette

Responsive web design RT
Responsive web design RTResponsive web design RT
Responsive web design RTJservice
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web DesignSimone Viani
 
Laboratorio di Web Design 2014/15 - Introduzione al corso
Laboratorio di Web Design 2014/15 - Introduzione al corsoLaboratorio di Web Design 2014/15 - Introduzione al corso
Laboratorio di Web Design 2014/15 - Introduzione al corsoGiovanni Buffa
 
Introduction to Responsive Web Design
Introduction to Responsive Web DesignIntroduction to Responsive Web Design
Introduction to Responsive Web DesignClarissa Peterson
 
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesResponsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesVitaly Friedman
 

En vedette (11)

Responsive web design RT
Responsive web design RTResponsive web design RT
Responsive web design RT
 
prada attestato
prada attestatoprada attestato
prada attestato
 
CSS - Box Model
CSS - Box ModelCSS - Box Model
CSS - Box Model
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Css1
Css1Css1
Css1
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Hello Bootstrap!
Hello Bootstrap!Hello Bootstrap!
Hello Bootstrap!
 
Laboratorio di Web Design 2014/15 - Introduzione al corso
Laboratorio di Web Design 2014/15 - Introduzione al corsoLaboratorio di Web Design 2014/15 - Introduzione al corso
Laboratorio di Web Design 2014/15 - Introduzione al corso
 
Introduction to Responsive Web Design
Introduction to Responsive Web DesignIntroduction to Responsive Web Design
Introduction to Responsive Web Design
 
Responsive Webdesign
Responsive WebdesignResponsive Webdesign
Responsive Webdesign
 
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesResponsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
 

Similaire à Presentazione Corso - Parte 1

Html e Css - 1 | WebMaster & WebDesigner
Html e Css - 1 | WebMaster & WebDesigner Html e Css - 1 | WebMaster & WebDesigner
Html e Css - 1 | WebMaster & WebDesigner Matteo Magni
 
Breve introduzione alle tecnologie HTML5 + (DOM) + CSS
Breve introduzione alle tecnologie HTML5 + (DOM) + CSS Breve introduzione alle tecnologie HTML5 + (DOM) + CSS
Breve introduzione alle tecnologie HTML5 + (DOM) + CSS Giuseppe Vizzari
 
Corso HTML per l'editoria
Corso HTML per l'editoriaCorso HTML per l'editoria
Corso HTML per l'editoriaDiego La Monica
 
corso web developer - Introduzione al web
corso web developer - Introduzione al webcorso web developer - Introduzione al web
corso web developer - Introduzione al webRiccardo Piccioni
 
Introduzione a Internet
Introduzione a InternetIntroduzione a Internet
Introduzione a Internetdadahtml
 
HTML + CSS - Lezione 1
HTML + CSS - Lezione 1HTML + CSS - Lezione 1
HTML + CSS - Lezione 1Vincenzo Caico
 
Guida introduttiva al codice HTML
Guida introduttiva al codice HTMLGuida introduttiva al codice HTML
Guida introduttiva al codice HTMLEnrico Mainero
 
Open web programming
Open web programmingOpen web programming
Open web programmingnois3lab
 
Ottimizzare un sito web per i motori di ricerca
Ottimizzare un sito web per i motori di ricercaOttimizzare un sito web per i motori di ricerca
Ottimizzare un sito web per i motori di ricercaMaurizio Pelizzone
 
Lab Web Prof.Di Blasi 2008
Lab Web Prof.Di Blasi 2008Lab Web Prof.Di Blasi 2008
Lab Web Prof.Di Blasi 2008ninam87
 
Lab Web Prof.Di Blasi 2008
Lab Web Prof.Di Blasi 2008Lab Web Prof.Di Blasi 2008
Lab Web Prof.Di Blasi 2008alexzaffi86
 

Similaire à Presentazione Corso - Parte 1 (20)

Lezione HTML
Lezione HTMLLezione HTML
Lezione HTML
 
Xml Xslt
Xml  XsltXml  Xslt
Xml Xslt
 
Html e Css - 1 | WebMaster & WebDesigner
Html e Css - 1 | WebMaster & WebDesigner Html e Css - 1 | WebMaster & WebDesigner
Html e Css - 1 | WebMaster & WebDesigner
 
HTML (+ DOM) + CSS
HTML (+ DOM) + CSSHTML (+ DOM) + CSS
HTML (+ DOM) + CSS
 
Breve introduzione alle tecnologie HTML5 + (DOM) + CSS
Breve introduzione alle tecnologie HTML5 + (DOM) + CSS Breve introduzione alle tecnologie HTML5 + (DOM) + CSS
Breve introduzione alle tecnologie HTML5 + (DOM) + CSS
 
Web writing 2
Web writing 2Web writing 2
Web writing 2
 
Corso HTML per l'editoria
Corso HTML per l'editoriaCorso HTML per l'editoria
Corso HTML per l'editoria
 
Html e tags
Html e tagsHtml e tags
Html e tags
 
corso web developer - Introduzione al web
corso web developer - Introduzione al webcorso web developer - Introduzione al web
corso web developer - Introduzione al web
 
Introduzione a Internet
Introduzione a InternetIntroduzione a Internet
Introduzione a Internet
 
HTML + CSS - Lezione 1
HTML + CSS - Lezione 1HTML + CSS - Lezione 1
HTML + CSS - Lezione 1
 
Presentazione wicket
Presentazione wicketPresentazione wicket
Presentazione wicket
 
Lamp Ld2008
Lamp Ld2008Lamp Ld2008
Lamp Ld2008
 
Guida introduttiva al codice HTML
Guida introduttiva al codice HTMLGuida introduttiva al codice HTML
Guida introduttiva al codice HTML
 
HTMLslide
HTMLslide HTMLslide
HTMLslide
 
Open web programming
Open web programmingOpen web programming
Open web programming
 
Xml annessi e connessi
Xml annessi e connessiXml annessi e connessi
Xml annessi e connessi
 
Ottimizzare un sito web per i motori di ricerca
Ottimizzare un sito web per i motori di ricercaOttimizzare un sito web per i motori di ricerca
Ottimizzare un sito web per i motori di ricerca
 
Lab Web Prof.Di Blasi 2008
Lab Web Prof.Di Blasi 2008Lab Web Prof.Di Blasi 2008
Lab Web Prof.Di Blasi 2008
 
Lab Web Prof.Di Blasi 2008
Lab Web Prof.Di Blasi 2008Lab Web Prof.Di Blasi 2008
Lab Web Prof.Di Blasi 2008
 

Presentazione Corso - Parte 1

  • 1. Mattoncini per il web Giorgio Carpoca
  • 2.
  • 3.
  • 4.
  • 5.
  • 6. Web Developer presso Iperclub spa MCP Microsoft Sviluppo applicazioni web .Net 2.0 [email_address]
  • 7. U n mondo di statistiche Sistemi operativi Browser Risoluzione schermo
  • 8. Architettura del web Richiesta di una pagina Risposta con il contenuto della pagina Server Client
  • 9. Esempi di messaggi tra client e server GET /wiki/Pagina_principale HTTP/1.1 Connection: Keep-Alive User-Agent: Mozilla/5.0 (compatible; Konqueror/3.2; Linux) (KHTML, like Gecko) Accept: text/html, image/jpeg, image/png, text/*, image/*, */* Accept-Encoding: x-gzip, x-deflate, gzip, deflate, identity Accept-Charset: iso-8859-1, utf-8;q=0.5, *;q=0.5 Accept-Language: en Host: it.wikipedia.org HTTP/1.0 200 OK Date: Mon, 28 Jun 2004 10:47:31 GMT Server: Apache/1.3.29 (Unix) PHP/4.3.4 X-Powered-By: PHP/4.3.4 Vary: Accept-Encoding,Cookie Cache-Control: private, s-maxage=0, max-age=0, must-revalidate Content-Language: it Content-Type: text/html; charset=utf-8 Age: 7673 X-Cache: HIT from wikipedia.org Connection: close Client Server
  • 10.
  • 11.
  • 12.
  • 13. Struttura di una pagina Html Un documento HTML comincia con l'indicazione della definizione del tipo di documento ( Document Type Definition o DTD), la quale segnala al browser l'URL delle specifiche HTML utilizzate per il documento, indicando quindi, implicitamente, quali elementi, attributi ed entità si possono utilizzare e a quale versione di HTML si fa riferimento. Di fatto, questa informazione serve al browser per identificare le regole di interpretazione e visualizzazione appropriate per lo specifico documento. Questa definizione deve pertanto precedere tutti i tag relativi al documento stesso. Dopo il DTD, il documento HTML presenta una struttura ad albero annidato, composta da sezioni delimitate da tag opportuni che al loro interno contengono a loro volta sottosezioni più piccole, sempre delimitate da tag. La struttura più esterna è quella che delimita l'intero documento, eccetto la DTD, ed è compresa tra i tag <html> e </html>. All'interno dei tag <html> lo standard prevede sempre la definizione di due sezioni ben distinte e disposte in sequenza ordinata: la sezione di intestazione o header , delimitata tra i tag <head> e </head>, che contiene informazioni di controllo normalmente non visualizzate dal browser, con l'eccezione di alcuni elementi la sezione del corpo o body , delimitata tra i tag <body> e </body>, che contiene la parte informativa vera e propria, ossia il testo, le immagini e i collegamenti che costituiscono la parte visualizzata dal browser.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.