SlideShare a Scribd company logo
1 of 2
Download to read offline
terrelibere.org/corsi


 Scrivere un documento HTML5 valido
  La prima dichiarazione che inseriamo nel codice è la seguente:

  <!DOCTYPE html>

  Possiamo aggiungere un attributo per la lingua:

  <html lang="en">


  All’interno della sezione <head> puoi inserire elementi javascript.
  Non occorre più indicare l’attributo type="text/javascript"
  Basta quindi:
  <script>
  ...
  </script>


  Stesso discorso per il tag <style>. L’attributo “css” è settato di default.
  <style>
  ...
  </style>

  Per quanto riguarda i tag “meta”, invece di scrivere:

  <meta http-equiv="Content-Type" content="text/html; charset=utf-
8" />

  si può semplicemente indicare:

  <meta charset=utf-8>

  All’interno del tag <body>, rimangono inalterati i tag <h1>, <h2>, <div>,
<span>,<p>, <ul>, <a> e così via.

    Si aggiungono i seguenti tag non presenti in HTML4:
       <nav> — per la barra dei menù
       <header> — per l’intestazione di un documento. Si può usare una sola volta in un
file
         <article> — tag speciale per includere un articolo o il post di un blog
       <section> — la sezione di un documento
       <footer> — il pié di pagina

  Per assicurare la compatibilità, è oppurtuno indicare nel CSS:
terrelibere.org/corsi


  article, aside, figure, footer, header, hgroup, menu, nav,
section { display:block; }

 Ecco una tipica pagina di base scritta in HTML5:

  <!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset=utf-8>
      <title>Una semplice pagina in HTML5</title>
  <style>
        body { margin:100px; }
        article, aside, figure, footer, header, hgroup, menu, nav,
section {
           display:block;
        }
      </style>
    </head>
    <body>
      <nav>
        <a href="simple-html5-document.html">home1</a>
        <a href="simple-html5-document.html">home2</a>
      </nav>
      <header>
        <h1>A simple HTML5 document</h1>
      </header>
      <article>
        <hgroup>
           <h1>Article 1 heading</h1>
           <h2>Article 1 sub-heading</h2>
        </hgroup>
        <section>
           <h3>Section 1 heading</h3>
        </section>
      </article>
      <article>
        <header>
           <h1>Article 2 heading</h1>
        </header>
        <section>
           <h2>Section 1 heading</h2>
        </section>
      </article>
      <footer>
        <p>This is the footer</p>
      </footer>
    </body>
  </html>

More Related Content

Viewers also liked

Algoritmi e strumenti per la Terapia Anticoagulante Orale
Algoritmi e strumenti per la Terapia Anticoagulante OraleAlgoritmi e strumenti per la Terapia Anticoagulante Orale
Algoritmi e strumenti per la Terapia Anticoagulante OraleSalvatore Cordiano
 
Corso di Versioning, Configuration & Document Management
Corso di Versioning, Configuration & Document ManagementCorso di Versioning, Configuration & Document Management
Corso di Versioning, Configuration & Document ManagementSalvatore Cordiano
 
Landing Page Testing To Increase Conversions
Landing Page Testing To Increase ConversionsLanding Page Testing To Increase Conversions
Landing Page Testing To Increase ConversionsAffiliate Summit
 
Corso di Concetti base di programmazione
Corso di Concetti base di programmazioneCorso di Concetti base di programmazione
Corso di Concetti base di programmazioneSalvatore Cordiano
 
Landingpage - Concetti base per la realizzazione di landingpage efficaci
Landingpage - Concetti base per la realizzazione di landingpage efficaciLandingpage - Concetti base per la realizzazione di landingpage efficaci
Landingpage - Concetti base per la realizzazione di landingpage efficaciMassimo Petrucci
 
Snapchat - Funzionalità e utilizzo per le Aziende Case Study & Best Practice
Snapchat - Funzionalità e utilizzo per le Aziende Case Study & Best PracticeSnapchat - Funzionalità e utilizzo per le Aziende Case Study & Best Practice
Snapchat - Funzionalità e utilizzo per le Aziende Case Study & Best PracticeGiuliano Ambrosio
 

Viewers also liked (8)

Algoritmi e strumenti per la Terapia Anticoagulante Orale
Algoritmi e strumenti per la Terapia Anticoagulante OraleAlgoritmi e strumenti per la Terapia Anticoagulante Orale
Algoritmi e strumenti per la Terapia Anticoagulante Orale
 
Corso di Versioning, Configuration & Document Management
Corso di Versioning, Configuration & Document ManagementCorso di Versioning, Configuration & Document Management
Corso di Versioning, Configuration & Document Management
 
Introduzione ai Social Media
Introduzione ai Social MediaIntroduzione ai Social Media
Introduzione ai Social Media
 
Landing Page Testing To Increase Conversions
Landing Page Testing To Increase ConversionsLanding Page Testing To Increase Conversions
Landing Page Testing To Increase Conversions
 
Corso di Concetti base di programmazione
Corso di Concetti base di programmazioneCorso di Concetti base di programmazione
Corso di Concetti base di programmazione
 
Corso di HTML5 e CSS
Corso di HTML5 e CSSCorso di HTML5 e CSS
Corso di HTML5 e CSS
 
Landingpage - Concetti base per la realizzazione di landingpage efficaci
Landingpage - Concetti base per la realizzazione di landingpage efficaciLandingpage - Concetti base per la realizzazione di landingpage efficaci
Landingpage - Concetti base per la realizzazione di landingpage efficaci
 
Snapchat - Funzionalità e utilizzo per le Aziende Case Study & Best Practice
Snapchat - Funzionalità e utilizzo per le Aziende Case Study & Best PracticeSnapchat - Funzionalità e utilizzo per le Aziende Case Study & Best Practice
Snapchat - Funzionalità e utilizzo per le Aziende Case Study & Best Practice
 

Similar to Corso HTML5. Una pagina base

Ancora anatomia, le pagine HTML(5)
Ancora anatomia, le pagine HTML(5)Ancora anatomia, le pagine HTML(5)
Ancora anatomia, le pagine HTML(5)nois3lab
 
Html5 - classi prime - multimedia
Html5 - classi prime - multimediaHtml5 - classi prime - multimedia
Html5 - classi prime - multimediaMatteo Ziviani
 
HTML5 e Css3 - 1 | WebMaster & WebDesigner
HTML5 e Css3 - 1 | WebMaster & WebDesignerHTML5 e Css3 - 1 | WebMaster & WebDesigner
HTML5 e Css3 - 1 | WebMaster & WebDesignerMatteo Magni
 
La Semantica del Web con HTML5 e Schema.org
La Semantica del Web con HTML5 e Schema.orgLa Semantica del Web con HTML5 e Schema.org
La Semantica del Web con HTML5 e Schema.orgSkillsAndMore
 
CSS corso base (classi seconde, mod 1)
CSS corso base (classi seconde, mod 1)CSS corso base (classi seconde, mod 1)
CSS corso base (classi seconde, mod 1)Matteo Ziviani
 
Guida pratica-html-e-css
Guida pratica-html-e-cssGuida pratica-html-e-css
Guida pratica-html-e-cssnickyes
 
Guida pratica-html-e-css
Guida pratica-html-e-cssGuida pratica-html-e-css
Guida pratica-html-e-cssnickyes
 
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
 
Inserire articoli correlati su blogger
Inserire articoli correlati su blogger Inserire articoli correlati su blogger
Inserire articoli correlati su blogger Stefano Vinci
 
Primo approccio al design adattivo
Primo approccio al design adattivoPrimo approccio al design adattivo
Primo approccio al design adattivoSalvatore Paone
 
Html e Css - 3 | WebMaster & WebDesigner
Html e Css - 3 | WebMaster & WebDesignerHtml e Css - 3 | WebMaster & WebDesigner
Html e Css - 3 | WebMaster & WebDesignerMatteo Magni
 
Corso base di Tecnologie WEB - una visione d'insieme
Corso base di Tecnologie WEB - una visione d'insiemeCorso base di Tecnologie WEB - una visione d'insieme
Corso base di Tecnologie WEB - una visione d'insiemeStudiabo
 
Fordatascientist - Tecnologie Web base
Fordatascientist - Tecnologie Web baseFordatascientist - Tecnologie Web base
Fordatascientist - Tecnologie Web baseAnnalisa Vignoli
 

Similar to Corso HTML5. Una pagina base (20)

Ancora anatomia, le pagine HTML(5)
Ancora anatomia, le pagine HTML(5)Ancora anatomia, le pagine HTML(5)
Ancora anatomia, le pagine HTML(5)
 
Html5 - classi prime - multimedia
Html5 - classi prime - multimediaHtml5 - classi prime - multimedia
Html5 - classi prime - multimedia
 
HTML5 e Css3 - 1 | WebMaster & WebDesigner
HTML5 e Css3 - 1 | WebMaster & WebDesignerHTML5 e Css3 - 1 | WebMaster & WebDesigner
HTML5 e Css3 - 1 | WebMaster & WebDesigner
 
La Semantica del Web con HTML5 e Schema.org
La Semantica del Web con HTML5 e Schema.orgLa Semantica del Web con HTML5 e Schema.org
La Semantica del Web con HTML5 e Schema.org
 
Html e tags
Html e tagsHtml e tags
Html e tags
 
CSS corso base (classi seconde, mod 1)
CSS corso base (classi seconde, mod 1)CSS corso base (classi seconde, mod 1)
CSS corso base (classi seconde, mod 1)
 
Fogli di stile CSS
Fogli di stile CSSFogli di stile CSS
Fogli di stile CSS
 
Guida pratica-html-e-css
Guida pratica-html-e-cssGuida pratica-html-e-css
Guida pratica-html-e-css
 
Guida pratica-html-e-css
Guida pratica-html-e-cssGuida pratica-html-e-css
Guida pratica-html-e-css
 
Lezione 4
Lezione 4Lezione 4
Lezione 4
 
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
 
Inserire articoli correlati su blogger
Inserire articoli correlati su blogger Inserire articoli correlati su blogger
Inserire articoli correlati su blogger
 
HTML e CSS
HTML e CSSHTML e CSS
HTML e CSS
 
Html
HtmlHtml
Html
 
Web writing 2
Web writing 2Web writing 2
Web writing 2
 
Primo approccio al design adattivo
Primo approccio al design adattivoPrimo approccio al design adattivo
Primo approccio al design adattivo
 
Html e Css - 3 | WebMaster & WebDesigner
Html e Css - 3 | WebMaster & WebDesignerHtml e Css - 3 | WebMaster & WebDesigner
Html e Css - 3 | WebMaster & WebDesigner
 
Corso base di Tecnologie WEB - una visione d'insieme
Corso base di Tecnologie WEB - una visione d'insiemeCorso base di Tecnologie WEB - una visione d'insieme
Corso base di Tecnologie WEB - una visione d'insieme
 
Fordatascientist - Tecnologie Web base
Fordatascientist - Tecnologie Web baseFordatascientist - Tecnologie Web base
Fordatascientist - Tecnologie Web base
 

More from Terrelibere Org Edizioni

Disegnare un albero di Natale con Illustrator
Disegnare un albero di Natale con IllustratorDisegnare un albero di Natale con Illustrator
Disegnare un albero di Natale con IllustratorTerrelibere Org Edizioni
 
Creare icone per la chat (tutorial illustrator)
Creare icone per la chat (tutorial illustrator)Creare icone per la chat (tutorial illustrator)
Creare icone per la chat (tutorial illustrator)Terrelibere Org Edizioni
 

More from Terrelibere Org Edizioni (20)

Demo social contest
Demo social contestDemo social contest
Demo social contest
 
Tl lezione-4
Tl lezione-4Tl lezione-4
Tl lezione-4
 
Lezione HTML5 3
Lezione HTML5 3Lezione HTML5 3
Lezione HTML5 3
 
Presentazione piattaforma eLearning
Presentazione piattaforma eLearningPresentazione piattaforma eLearning
Presentazione piattaforma eLearning
 
Corso HTML5. Esempi di App
Corso HTML5. Esempi di AppCorso HTML5. Esempi di App
Corso HTML5. Esempi di App
 
Rapporto editoria 2012 - Slide
Rapporto editoria 2012 - SlideRapporto editoria 2012 - Slide
Rapporto editoria 2012 - Slide
 
Breve storia dell'ebook
Breve storia dell'ebookBreve storia dell'ebook
Breve storia dell'ebook
 
Da InDesign a iPad (usando ePub)
Da InDesign a iPad (usando ePub)Da InDesign a iPad (usando ePub)
Da InDesign a iPad (usando ePub)
 
Disegnare una bottiglia con Illustrator
Disegnare una bottiglia con IllustratorDisegnare una bottiglia con Illustrator
Disegnare una bottiglia con Illustrator
 
Disegnare un albero di Natale con Illustrator
Disegnare un albero di Natale con IllustratorDisegnare un albero di Natale con Illustrator
Disegnare un albero di Natale con Illustrator
 
Disegnare un mappamondo con Illustrator
Disegnare un mappamondo con IllustratorDisegnare un mappamondo con Illustrator
Disegnare un mappamondo con Illustrator
 
Disegnare un anello con Illustrator
Disegnare un anello con IllustratorDisegnare un anello con Illustrator
Disegnare un anello con Illustrator
 
Disegnare un'astronave con Illustrator
Disegnare un'astronave con IllustratorDisegnare un'astronave con Illustrator
Disegnare un'astronave con Illustrator
 
Creare icone per la chat (tutorial illustrator)
Creare icone per la chat (tutorial illustrator)Creare icone per la chat (tutorial illustrator)
Creare icone per la chat (tutorial illustrator)
 
Linee guida per epub
Linee guida per epubLinee guida per epub
Linee guida per epub
 
Calibre 5
Calibre 5Calibre 5
Calibre 5
 
Calibre 4
Calibre 4Calibre 4
Calibre 4
 
Calibre 3
Calibre 3Calibre 3
Calibre 3
 
Calibre 2
Calibre 2Calibre 2
Calibre 2
 
Calibre 1
Calibre 1Calibre 1
Calibre 1
 

Corso HTML5. Una pagina base

  • 1. terrelibere.org/corsi Scrivere un documento HTML5 valido La prima dichiarazione che inseriamo nel codice è la seguente: <!DOCTYPE html> Possiamo aggiungere un attributo per la lingua: <html lang="en"> All’interno della sezione <head> puoi inserire elementi javascript. Non occorre più indicare l’attributo type="text/javascript" Basta quindi: <script> ... </script> Stesso discorso per il tag <style>. L’attributo “css” è settato di default. <style> ... </style> Per quanto riguarda i tag “meta”, invece di scrivere: <meta http-equiv="Content-Type" content="text/html; charset=utf- 8" /> si può semplicemente indicare: <meta charset=utf-8> All’interno del tag <body>, rimangono inalterati i tag <h1>, <h2>, <div>, <span>,<p>, <ul>, <a> e così via. Si aggiungono i seguenti tag non presenti in HTML4: <nav> — per la barra dei menù <header> — per l’intestazione di un documento. Si può usare una sola volta in un file <article> — tag speciale per includere un articolo o il post di un blog <section> — la sezione di un documento <footer> — il pié di pagina Per assicurare la compatibilità, è oppurtuno indicare nel CSS:
  • 2. terrelibere.org/corsi article, aside, figure, footer, header, hgroup, menu, nav, section { display:block; } Ecco una tipica pagina di base scritta in HTML5: <!DOCTYPE html> <html lang="en"> <head> <meta charset=utf-8> <title>Una semplice pagina in HTML5</title> <style> body { margin:100px; } article, aside, figure, footer, header, hgroup, menu, nav, section { display:block; } </style> </head> <body> <nav> <a href="simple-html5-document.html">home1</a> <a href="simple-html5-document.html">home2</a> </nav> <header> <h1>A simple HTML5 document</h1> </header> <article> <hgroup> <h1>Article 1 heading</h1> <h2>Article 1 sub-heading</h2> </hgroup> <section> <h3>Section 1 heading</h3> </section> </article> <article> <header> <h1>Article 2 heading</h1> </header> <section> <h2>Section 1 heading</h2> </section> </article> <footer> <p>This is the footer</p> </footer> </body> </html>