Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Daniele Moraschi Email:  [email_address] Accademia di Belle Arti LABA di Brescia Computer Graphics
Pagina HTML Struttura <html> <head> <title> Titolo </title>   <meta  name=&quot; description &quot; content=&quot; Hello w...
Pagina HTML albero del documento HTML HEAD BODY H1 P IMG TITLE
Pagina HTML Sintassi <ul><li>Sintassi:  <tag>  contenuto  </tag> </li></ul><ul><li>Il contenuto apparirà in modo diverso a...
Pagina HTML Sintassi <ul><li>E' buona norma scrivere i tag sempre in minuscolo </li></ul><ul><li><html>  e non  <HTML> </l...
HTML Formattazione standard <ul><li>Intestazioni/titoli: </li></ul><ul><li><h1> titolo 1 </h1> </li></ul><ul><li><h2> tito...
HTML Formattazione standard <ul><li>Paragrafi </li></ul><ul><li><p> paragrafo 1 </p> </li></ul><ul><li><p> paragrafo 2 </p...
HTML Formattazione standard <ul><li>Manda a capo di una riga:  <br/>  </li></ul><ul><li>Da usare ad es. all'interno di un ...
HTML Formattazione standard <ul><li>Stili del testo: </li></ul><ul><li><b> testo in grassetto </b>  oppure  <strong> grass...
HTML Formattazione standard <ul><li>Liste numerate </li></ul><ul><li><ol> </li></ul><ul><li><li> voce 1 </li> </li></ul><u...
HTML Formattazione standard <ul><li>Liste di definizione </li></ul><ul><li><dl> </li></ul><ul><li><dt> titolo 1 </dt> </li...
HTML Formattazione standard <ul><li>Immagini: </li></ul><ul><li><img  src=” ../immagini/nome.jpg ” width=” 300px ” alt=” t...
HTML Formattazione standard <ul><li>I Link (ancore): </li></ul><ul><li><a  href=” www.google.com ” title=” vai alla home d...
HTML Formattazione standard <ul><li>Le tabelle: </li></ul><ul><li><table  border=” 1 ”  > </li></ul><ul><li><tr> </li></ul...
Reference HTML http://www.w3schools.com/tags/default.asp
Upcoming SlideShare
Loading in …5
×

Introduzione all'Html

1,174 views

Published on

Formattazione standard e principali tag.

Published in: Education
  • Be the first to comment

Introduzione all'Html

  1. 1. Daniele Moraschi Email: [email_address] Accademia di Belle Arti LABA di Brescia Computer Graphics
  2. 2. Pagina HTML Struttura <html> <head> <title> Titolo </title> <meta name=&quot; description &quot; content=&quot; Hello world example page &quot; /> <meta name=&quot; keywords &quot; content=&quot; web design &quot; /> </head> <body> <h1> Hello World! </h1> <p> Paragrafo </p> </body> </html> <html> apre il documento html <head> contiene informazioni come il titolo della pagina, i meta tags, la codifica dei caratteri ecc Dati non visualizzati dal Browser, ma che vengono presi in considerazione ad esempio dai motori di ricerca <body> contiene tutto ciò che dovrà apparire sullo schermo
  3. 3. Pagina HTML albero del documento HTML HEAD BODY H1 P IMG TITLE
  4. 4. Pagina HTML Sintassi <ul><li>Sintassi: <tag> contenuto </tag> </li></ul><ul><li>Il contenuto apparirà in modo diverso a seconda del tag utilizzato </li></ul><ul><li>I tag possono essere nidificati: </li></ul><ul><li><b> testo in bold <i> bold+corsivo </i> bold </b> </li></ul><ul><li>E' obbligatorio rispettare la gerarchia delle inclusioni: </li></ul><ul><li><b> testo in bold <i> bold+corsivo </b> ... </i> </li></ul><ul><li>ERRATO </li></ul><ul><li>I tag che non prevedono contenuti, chiudono se stessi: </li></ul><ul><li>Es. <br /> , <hr/> , <img src=” image.jpg ” /> </li></ul><ul><li>Ogni tag che viene aperto deve essere anche chiuso! </li></ul>
  5. 5. Pagina HTML Sintassi <ul><li>E' buona norma scrivere i tag sempre in minuscolo </li></ul><ul><li><html> e non <HTML> </li></ul><ul><li>I tag possono contenere attributi: </li></ul><ul><li><table width=” 300px ” > , </li></ul><ul><li><p align=” right ” > </li></ul><ul><li>I valori degli attributi vanno sempre racchiusi tra apici “ ” </li></ul><ul><li><table border= 1 > ERRATO </li></ul>
  6. 6. HTML Formattazione standard <ul><li>Intestazioni/titoli: </li></ul><ul><li><h1> titolo 1 </h1> </li></ul><ul><li><h2> titolo 2 </h2> </li></ul><ul><li><h3> titolo 3 </h3> </li></ul><ul><li><h4> titolo 4 </h4> </li></ul><ul><li><h5> titolo 5 </h5> </li></ul><ul><li><h6> titolo 6 </h6> </li></ul><ul><li>Dall' <h 1 > , che è il più importante, si va via via degradando fino all' <h6> </li></ul>
  7. 7. HTML Formattazione standard <ul><li>Paragrafi </li></ul><ul><li><p> paragrafo 1 </p> </li></ul><ul><li><p> paragrafo 2 </p> </li></ul><ul><li><p> paragrafo 3 </p> </li></ul><ul><li>E' l'unità di base entro cui suddividere un testo. Il tag <p> lascia una riga vuota prima della sua apertura e dopo la sua chiusura. </li></ul>
  8. 8. HTML Formattazione standard <ul><li>Manda a capo di una riga: <br/> </li></ul><ul><li>Da usare ad es. all'interno di un paragrafo </li></ul><ul><li>per iniziare una nuova riga di testo (br=break, interruzione di riga) </li></ul><ul><li>Separatore di sezioni: <hr/> </li></ul><ul><li>Traccia una linea orizzontale </li></ul><ul><li>Utile per separare in più sezioni logiche una pagina </li></ul>
  9. 9. HTML Formattazione standard <ul><li>Stili del testo: </li></ul><ul><li><b> testo in grassetto </b> oppure <strong> grassetto </strong> </li></ul><ul><li><i> testo in corsivo </i> oppure <em> corsivo/enfatizzato </em> </li></ul><ul><li><u> testo sottolineato </u> </li></ul><ul><li><strike> testo barrato </strike> </li></ul><ul><li><sup> testo in apice </sup> Esempio: E=mc <sup> 2 </sup> </li></ul><ul><li><sub> testo in pedice </sub> Esempio: H <sub> 2 </sub> O </li></ul><ul><li><address> Laba - via Don Vender, 66 – 25127 Brescia </address> </li></ul><ul><li><cite> blocco di citazione </cite> </li></ul><ul><li><acronym title=” Hypertext markup language ” > HTML </acronym> </li></ul>
  10. 10. HTML Formattazione standard <ul><li>Liste numerate </li></ul><ul><li><ol> </li></ul><ul><li><li> voce 1 </li> </li></ul><ul><li><li> voce 2 </li></ul><ul><li><ul> </li></ul><ul><li><li> voce 2.1 </li> </li></ul><ul><li><li> voce 2.2 </li> </li></ul><ul><li></ul> </li></ul><ul><li></li> </li></ul><ul><li><li> voce 3 </li> </li></ul><ul><li><li> voce 4 </li> </li></ul><ul><li></ol> </li></ul>Liste non numerate <ul> <li> voce 1 </li> <li> voce 2 </li> <li> voce 3 </li> <li> voce 4 </li> </ul>
  11. 11. HTML Formattazione standard <ul><li>Liste di definizione </li></ul><ul><li><dl> </li></ul><ul><li><dt> titolo 1 </dt> </li></ul><ul><li><dd> definizione 1 </dd> </li></ul><ul><li><dt> titolo 2 </dt> </li></ul><ul><li><dd> definizione 2 </dd> </li></ul><ul><li>: </li></ul><ul><li>: </li></ul><ul><li>: </li></ul><ul><li><dt> titolo N </dt> </li></ul><ul><li><dd> definizione N </dd> </li></ul><ul><li></dl> </li></ul>La lista inizia con il tag <DL> e finisce con il tag </DL> I titoli devono cominciare con il tag <DT> le definizioni con il tag <DD>
  12. 12. HTML Formattazione standard <ul><li>Immagini: </li></ul><ul><li><img src=” ../immagini/nome.jpg ” width=” 300px ” alt=” testo alternativo ” /> </li></ul><ul><li>Attributi: </li></ul><ul><li>src : url dell'immagine, il percorso può essere sia assoluto che relativo, oppure un URI </li></ul><ul><li>alt : testo alternativo che descrive l'immagine (letto dagli screen-reader) </li></ul><ul><li>width - height : modificano le dimensioni a video dell'immagine </li></ul>
  13. 13. HTML Formattazione standard <ul><li>I Link (ancore): </li></ul><ul><li><a href=” www.google.com ” title=” vai alla home di google ” > </li></ul><ul><li>testo del link </li></ul><ul><li></a> </li></ul><ul><li>Attributi: </li></ul><ul><li>href : url da linkare, può essere una pagina internet, un immagine, un </li></ul><ul><li>file ecc </li></ul><ul><li>title : testo descrittivo del link che appare al passaggio del mouse </li></ul><ul><li>Può contenere immagini: </li></ul><ul><li><a href=” www.google.com ” title=” vai alla home di google ” > </li></ul><ul><li><img src=” google_logo.jpg ” alt=” google logo ” /> </li></ul><ul><li></a> </li></ul>
  14. 14. HTML Formattazione standard <ul><li>Le tabelle: </li></ul><ul><li><table border=” 1 ” > </li></ul><ul><li><tr> </li></ul><ul><li><th> Titolo cella 1 </th> </li></ul><ul><li><th> Titolo cella 2 </th> </li></ul><ul><li></tr> </li></ul><ul><li><tr> </li></ul><ul><li><td> riga 1 - cella 1 </td> </li></ul><ul><li><td> riga 1 - cella 2 </td> </li></ul><ul><li></tr> </li></ul><ul><li><tr> </li></ul><ul><li><td> riga 2 - cella 1 </td> </li></ul><ul><li><td> riga 2 - cella 2 </td> </li></ul><ul><li></tr> </li></ul><ul><li></table> </li></ul>
  15. 15. Reference HTML http://www.w3schools.com/tags/default.asp

×