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,157 views

Published on

Formattazione standard e principali tag.

Published in: Education
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,157
On SlideShare
0
From Embeds
0
Number of Embeds
71
Actions
Shares
0
Downloads
68
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

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

×