HTML - Primi Passi

1,413 views

Published on

Primi passi con HTML e la struttura di una pagina web generica.
Lezione svolta nel corso del 5° A.T.A. dell'I.I.S.S. "De Pace" di Lecce.
http://androe.com

Published in: Technology
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,413
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
0
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • HTML - Primi Passi

    1. 1. HTML
    2. 2. UTENTE connesso con un computeruno smartphone un tablet
    3. 3. UTENTE INTERNET connesso con la Rete un computeruno smartphone un tablet
    4. 4. UTENTE INTERNET SERVER dove risiede connesso con la Rete il sito web richiesto un computeruno smartphone un tablet
    5. 5. INDIRIZZO WEB http://google.itUTENTE INTERNET SERVER dove risiede connesso con la Rete il sito web richiesto un computeruno smartphone un tablet
    6. 6. INDIRIZZO WEB http://google.itUTENTE INTERNET SERVER dove risiede connesso con la Rete il sito web richiesto un computeruno smartphone un tablet
    7. 7. INDIRIZZO WEB http://google.it DOCUMENTO HTML (pagina web)UTENTE INTERNET SERVER dove risiede connesso con la Rete il sito web richiesto un computeruno smartphone un tablet
    8. 8. INDIRIZZO WEB http://google.it DOCUMENTO HTML (pagina web)UTENTE INTERNET SERVER dove risiede connesso con la Rete il sito web richiesto un computeruno smartphone un tablet
    9. 9. INDIRIZZO WEB http://google.it DOCUMENTO HTML (pagina web)UTENTE INTERNET SERVER dove risiede connesso con la Rete il sito web richiesto un computeruno smartphone un tablet
    10. 10. HTML
    11. 11. ELEMENTIdi una pagina web
    12. 12. pagina websenza CSS
    13. 13. HEADER (testata)
    14. 14. HEADER (testata)MENU di navigazione
    15. 15. HEADER (testata)MENU di navigazione CONTENUTO
    16. 16. HEADER (testata)MENU di navigazione CONTENUTO COLONNA LATERALE suddivisa in “blocchi”
    17. 17. HEADER (testata)MENU di navigazione CONTENUTO COLONNA LATERALE suddivisa in “blocchi” FOOTER (pié di pagina)
    18. 18. HEADER (testata)MENU di navigazione CONTENUTO COLONNA LATERALE suddivisa in “blocchi” FOOTER (pié di pagina) BODY
    19. 19. HTML
    20. 20. <html></html>
    21. 21. <html> <head> </head> <body> </body></html>
    22. 22. <html> <head> <title>La Musica</title> </head> <body> </body></html>
    23. 23. <html> <head> <title>La Musica</title> </head> <body> </body></html>
    24. 24. <html> <head> <title>La Musica</title> </head> <body> ... UN SACCO DI ROBA !!! ... </body></html>
    25. 25. <body></body>
    26. 26. <body></body>
    27. 27. <div>
    28. 28. <div> l’elemento <div> definisceuna sezione della pagina HTML
    29. 29. <div> l’elemento <div> definisceuna sezione della pagina HTML
    30. 30. <body> <div> </div></body>
    31. 31. <body> <div id=”contenitore”> </div></body>
    32. 32. id
    33. 33. id l’attributo id specificaun “nome” unico per un elemento HTML
    34. 34. <body> <div id=”contenitore”> </div></body>
    35. 35. <body> <div id=”contenitore”> </div></body>
    36. 36. <body> <div id=”contenitore”> </div></body>
    37. 37. <body> <div id=”contenitore”> <div id=”header”> </div> </div></body>
    38. 38. <body> <div id=”contenitore”> <div id=”header”> <h1> </h1> </div> </div></body>
    39. 39. <body> <div id=”contenitore”> <div id=”header”> <h1> Il mini sito della Musica </h1> </div> </div></body>
    40. 40. <h1> l’elemento <h1> indicail titolo più importante del documento HTML
    41. 41. <h1> <h2> <h3> <h4> <h5> <h6>i titoli in un documento HTML
    42. 42. <body> <div id=”contenitore”> <div id=”header”> <h1> Il mini sito della Musica </h1> </div> </div></body>
    43. 43. <body> <div id=”contenitore”> <div id=”header”> <h1> Il mini sito della Musica </h1> </div> <div id=”menu”> </div> </div></body>
    44. 44. <body> <div id=”contenitore”> <div id=”header”> <h1> Il mini sito della Musica </h1> </div> <div id=”menu”> </div> </div></body>
    45. 45. <body> <div id=”contenitore”> <div id=”header”> <h1> Il mini sito della Musica </h1> </div> <div id=”menu”> <ul> </ul> </div> </div></body>
    46. 46. <ul> l’elemento <ul> indica un elenco puntatoall’interno del documento HTML
    47. 47. <li> l’elemento <li> indica un elemento dell’elenco <ul>all’interno del documento HTML
    48. 48. <ul> <li>Elemento 1</li> <li>Elemento 2</li> <li>Elemento 3</li></ul> esempio del codice
    49. 49. Elemento 1 Elemento 2 Elemento 3come lo vedremo sul browser
    50. 50. <body> <div id=”contenitore”> <div id=”header”> <h1> Il mini sito della Musica </h1> </div> <div id=”menu”> <ul> </ul> </div> </div></body>
    51. 51. <body> <div id=”contenitore”> <div id=”header”> <h1> Il mini sito della Musica </h1> </div> <div id=”menu”> <ul> <li> </li> </ul> </div> </div></body>
    52. 52. <body> <div id=”contenitore”> <div id=”header”> <h1> Il mini sito della Musica </h1> </div> <div id=”menu”> <ul> <li> Home </li> </ul> </div> </div></body>
    53. 53. <body> <div id=”contenitore”> <div id=”header”> <h1> Il mini sito della Musica </h1> </div> <div id=”menu”> <ul> <li> Home </li> <li> </li> </ul> </div> </div></body>
    54. 54. <body> <div id=”contenitore”> <div id=”header”> <h1> Il mini sito della Musica </h1> </div> <div id=”menu”> <ul> <li> Home </li> <li> Chi Siamo </li> </ul> </div> </div></body>
    55. 55. <body> <div id=”contenitore”> <div id=”header”> <h1> Il mini sito della Musica </h1> </div> <div id=”menu”> <ul> <li> Home </li> <li> Chi Siamo </li> <li> </li> </ul> </div> </div></body>
    56. 56. <body> <div id=”contenitore”> <div id=”header”> <h1> Il mini sito della Musica </h1> </div> <div id=”menu”> <ul> <li> Home </li> <li> Chi Siamo </li> <li> Foto </li> </ul> </div> </div></body>
    57. 57. <body> <div id=”contenitore”> <div id=”header”> <h1> Il mini sito della Musica </h1> </div> <div id=”menu”> <ul> <li> Home </li> <li> Chi Siamo </li> <li> Foto </li> <li> Video </li> </ul> </div> </div></body>
    58. 58. <body> <div id=”contenitore”> <div id=”header”> <h1> Il mini sito della Musica </h1> </div> <div id=”menu”> <ul> <li> Home </li> <li> Chi Siamo </li> <li> Foto </li> <li> Video </li> </ul> </div> </div></body>
    59. 59. <body> <div id=”contenitore”> <div id=”header”> <h1> Il mini sito della Musica </h1> </div> <div id=”menu”> <ul> <li> Home </li> <li> Chi Siamo </li> <li> Foto </li> <li> Video </li> </ul> </div> </div></body>
    60. 60. <body> <div id=”contenitore”> <div id=”header”> <h1> Il mini sito della Musica </h1> </div> <div id=”menu”> <ul> <li> Home </li> <li> Chi Siamo </li> <li> Foto </li> <li> Video </li> </ul> </div> </div></body>
    61. 61. <body> <div id=”contenitore”> <div id=”header”> <h1> Il mini sito della Musica </h1> </div> <div id=”menu”> <ul> <li> Home </li> <li> Chi Siamo </li> <li> Foto </li> <li> Video </li> </ul> </div> </div></body>
    62. 62. <body> <div id=”contenitore”> <div id=”header”> <h1> Il mini sito della Musica </h1> </div> <div id=”menu”> <ul> <li> Home </li> <li> Chi Siamo </li> <li> Foto </li> <li> Video </li> </ul> </div> </div></body>
    63. 63. <body> <div id=”contenitore”> <div id=”header”> <h1> Il mini sito della Musica </h1> </div> <div id=”menu”> <ul> <li> Home </li> <li> Chi Siamo </li> <li> Foto </li> <li> Video </li> </ul> </div> <div id=”contenuto”> </div> </div></body>
    64. 64. <body> <div id=”contenitore”> <div id=”header”> <h1> Il mini sito della Musica </h1> </div> <div id=”menu”> <ul> <li> Home </li> <li> Chi Siamo </li> <li> Foto </li> <li> Video </li> </ul> </div> <div id=”contenuto”> </div> </div></body>
    65. 65. <body> <div id=”contenitore”> <div id=”header”> <h1> Il mini sito della Musica </h1> </div> <div id=”menu”> <ul> <li> Home </li> <li> Chi Siamo </li> <li> Foto </li> <li> Video </li> </ul> </div> <div id=”contenuto”> </div> </div></body>
    66. 66. <body> <div id=”contenitore”> <div id=”header”> <h1> Il mini sito della Musica </h1> </div> <div id=”menu”> <ul> <li> Home </li> <li> Chi Siamo </li> <li> Foto </li> <li> Video </li> </ul> </div> <div id=”contenuto”> </div> </div></body>
    67. 67. <div id=”contenuto”></div>
    68. 68. <div id=”contenuto”> <h1> </h1></div>
    69. 69. <div id=”contenuto”> <h1> La Musica: le origini </h1></div>
    70. 70. <div id=”contenuto”> <h1> La Musica: le origini </h1> <p> </p></div>
    71. 71. <div id=”contenuto”> <h1> La Musica: le origini </h1> <p> </p></div>
    72. 72. <div id=”contenuto”> <h1> La Musica: le origini </h1> <p> <img src=”speaker.jpg” width=”400” height=”300” alt=”cassa” /> </p></div>
    73. 73. <div id=”contenuto”> <h1> La Musica: le origini </h1> <p> <img src=”speaker.jpg” width=”400” height=”300” alt=”cassa” /> </p></div>
    74. 74. <img> l’elemento <img> indica un’immagine all’interno del documento HTMLcon l’aiuto degli attributi src, width, height e alt
    75. 75. src definisce il percorso del filewidth definisce la larghezza dell’immagineheight definisce l’altezza dell’immagine alt definisce il testo alternativo all’immagine
    76. 76. <img>
    77. 77. <img >
    78. 78. <img src=”immagine.jpg” >
    79. 79. <img src=”immagine.jpg” >
    80. 80. <img src=”immagine.jpg” width=”400” height=”300” >
    81. 81. <img src=”immagine.jpg” width=”400” height=”300” >
    82. 82. <img src=”immagine.jpg” width=”400” height=”300” >
    83. 83. <img src=”immagine.jpg” width=”400” height=”300”alt=”Immagine a caso” >
    84. 84. <img src=”immagine.jpg” width=”400” height=”300”alt=”Immagine a caso” />
    85. 85. <div id=”contenuto”> <h1> La Musica: le origini </h1> <p> <img src=”speaker.jpg” width=”400” height=”300” alt=”cassa” /> </p> <p> </p></div>
    86. 86. <div id=”contenuto”> <h1> La Musica: le origini </h1> <p> <img src=”speaker.jpg” width=”400” height=”300” alt=”cassa” /> </p> <p> </p></div>
    87. 87. <div id=”contenuto”> <h1> La Musica: le origini </h1> <p> <img src=”speaker.jpg” width=”400” height=”300” alt=”cassa” /> </p> <p> La musica è larte e la scienza dellorganizzazione dei suoni nel corso del tempo. Si tratta di arte in quanto complesso di norme pratiche adatte a conseguire determinati gradevoli effetti sonori, che riescono ad esprimere linteriorità dellindividuo, si tratta di scienza in quanto studio della nascita, dellevoluzione e dellanalisi dellintima struttura della musica. </p></div>
    88. 88. <div id=”contenuto”> <h1> La Musica: le origini </h1> <p> <img src=”speaker.jpg” width=”400” height=”300” alt=”cassa” /> </p> <p> La musica è larte e la scienza dellorganizzazione dei suoni nel corso del tempo. Si tratta di arte in quanto complesso di norme pratiche adatte a conseguire determinati gradevoli effetti sonori, che riescono ad esprimere linteriorità dellindividuo, si tratta di scienza in quanto studio della nascita, dellevoluzione e dellanalisi dellintima struttura della musica. </p></div>
    89. 89. <div id=”contenuto”> <h1> La Musica: le origini </h1> <p> <img src=”speaker.jpg” width=”400” height=”300” alt=”cassa” /> </p> <p> La musica è larte e la scienza dellorganizzazione dei suoni nel corso del tempo. Si tratta di arte in quanto complesso di norme pratiche adatte a conseguire determinati gradevoli effetti sonori, che riescono ad esprimere linteriorità dellindividuo, si tratta di scienza in quanto studio della nascita, dellevoluzione e dellanalisi dellintima struttura della musica. </p> <p>Il generare suoni avviene mediante il canto o mediante strumenti musicali che, attraverso i principi dellacustica, provocano la percezione uditiva e lesperienza emotiva voluta dallartista. </p></div>
    90. 90. <div id=”contenuto”> <h1> La Musica: le origini </h1> <p> <img src=”speaker.jpg” width=”400” height=”300” alt=”cassa” /> </p> <p> La musica è larte e la scienza dellorganizzazione dei suoni nel corso del tempo. Si tratta di arte in quanto complesso di norme pratiche adatte a conseguire determinati gradevoli effetti sonori, che riescono ad esprimere linteriorità dellindividuo, si tratta di scienza in quanto studio della nascita, dellevoluzione e dellanalisi dellintima struttura della musica. </p> <p>Il generare suoni avviene mediante il canto o mediante strumenti musicali che, attraverso i principi dellacustica, provocano la percezione uditiva e lesperienza emotiva voluta dallartista. </p> <p>Il significato del termine musica non è comunque univoco ed è molto dibattuto tra gli studiosi per via delle diverse accezioni utilizzate nei vari periodi storici. </p></div>
    91. 91. <div id=”contenuto”> <h1> La Musica: le origini </h1> <p> <img src=”speaker.jpg” width=”400” height=”300” alt=”cassa” /> </p> <p> La musica è larte e la scienza dellorganizzazione dei suoni nel corso del tempo. <strong>Si tratta di arte</strong> in quanto complesso di norme pratiche adatte a conseguire determinati gradevoli effetti sonori, che riescono ad esprimere linteriorità dellindividuo, si tratta di scienza in quanto studio della nascita, dellevoluzione e dellanalisi dellintima struttura della musica.</p> <p>Il generare suoni avviene mediante il canto o mediante strumenti musicali che, attraverso i principi dellacustica, provocano la percezione uditiva e lesperienza emotiva voluta dallartista. </p> <p>Il significato del termine musica non è comunque univoco ed è molto dibattuto tra gli studiosi per via delle diverse accezioni utilizzate nei vari periodi storici. </p></div>
    92. 92. <strong> il tag <strong> indica il grassetto di un testoall’interno del documento HTML
    93. 93. <div id=”contenuto”> <h1> La Musica: le origini </h1> <p> <img src=”speaker.jpg” width=”400” height=”300” alt=”cassa” /> </p> <p> La musica è larte e la scienza dellorganizzazione dei suoni nel corso del tempo. <strong>Si tratta di arte</strong> in quanto complesso di norme pratiche adatte a conseguire determinati gradevoli effetti sonori, che riescono ad esprimere linteriorità dellindividuo, si tratta di scienza in quanto studio della nascita, dellevoluzione e dellanalisi dellintima struttura della musica.</p> <p>Il <em>generare suoni</em> avviene mediante il canto o mediante strumenti musicali che, attraverso i principi dellacustica, provocano la percezione uditiva e lesperienza emotiva voluta dallartista. </p> <p>Il significato del termine musica non è comunque univoco ed è molto dibattuto tra gli studiosi per via delle diverse accezioni utilizzate nei vari periodi storici. </p></div>
    94. 94. <em> il tag <em> indica il corsivo di un testoall’interno del documento HTML
    95. 95. <div id=”contenuto”> <h1> La Musica: le origini </h1> <p> <img src=”speaker.jpg” width=”400” height=”300” alt=”cassa” /> </p> <p> La musica è larte e la scienza dellorganizzazione dei suoni nel corso del tempo. <strong>Si tratta di arte</strong> in quanto complesso di norme pratiche adatte a conseguire determinati gradevoli effetti sonori, che riescono ad esprimere linteriorità dellindividuo, si tratta di scienza in quanto studio della nascita, dellevoluzione e dellanalisi dellintima struttura della musica.</p> <p>Il <em>generare suoni</em> avviene mediante il canto o mediante strumenti musicali che, attraverso i principi dellacustica, provocano la percezione uditiva e lesperienza emotiva voluta dallartista. </p> <p>Il significato del termine musica non è comunque univoco ed è molto dibattuto tra gli studiosi per via delle diverse accezioni utilizzate nei vari periodi storici. </p></div>
    96. 96. <div id=”contenuto”> <h1> La Musica: le origini </h1> <p> <img src=”speaker.jpg” width=”400” height=”300” alt=”cassa” /> </p> <p> La musica è larte e la scienza dellorganizzazione dei suoni nel corso del tempo. <strong>Si tratta di arte</strong> in quanto complesso di norme pratiche adatte a conseguire determinati gradevoli effetti sonori, che riescono ad esprimere linteriorità dellindividuo, si tratta di scienza in quanto studio della nascita, dellevoluzione e dellanalisi dellintima struttura della musica.</p> <p>Il <em>generare suoni</em> avviene mediante il canto o mediante strumenti musicali che, attraverso i principi dellacustica, provocano la percezione uditiva e lesperienza emotiva voluta dallartista. </p> <p>Il significato del termine <a href=”http://www.google.it”>musica</a> non è comunque univoco ed è molto dibattuto tra gli studiosi per via delle diverse accezioni utilizzate nei vari periodi storici.</p></div>
    97. 97. <a>il tag <a> indica un collegamento all’interno del documento HTML con l’aiuto dell’attributo hrefche ne definisce la “destinazione”
    98. 98. <a href=”http://www.google.it”>testo del link</a>
    99. 99. COSA NON FARE
    100. 100. COSA NON FARE
    101. 101. COSA NON FARE1. dimenticare di chiudere i tag HTML
    102. 102. <p>Il significato del termine musica è<strong>dibattuto tra gli studiosi pervia delle diverse accezioni utilizzatenei vari periodi storici.</p>
    103. 103. <p>Il significato del termine musica è<strong>dibattuto tra gli studiosi pervia delle diverse accezioni utilizzatenei vari periodi storici.</p> NO
    104. 104. <p>Il significato del termine musica è<strong>dibattuto<strong> tra glistudiosi per via delle diverseaccezioni utilizzate nei vari periodistorici.</p> NO
    105. 105. <p>Il significato del termine musica è<strong>dibattuto</strong> tra glistudiosi per via delle diverseaccezioni utilizzate nei vari periodistorici.</p> SÌ
    106. 106. COSA NON FARE1. dimenticare di chiudere i tag HTML
    107. 107. COSA NON FARE1. dimenticare di chiudere i tag HTML2. chiudere i tag HTML con ordine
    108. 108. <p><strong>Il generare suoni avvienemediante il canto o mediante strumentimusicali </p> </strong> NO
    109. 109. <p><strong>Il generare suoni avvienemediante il canto o mediante strumentimusicali</strong> </p> SÌ
    110. 110. COSA NON FARE1. dimenticare di chiudere i tag HTML2. chiudere i tag HTML con ordine
    111. 111. COSA NON FARE1. dimenticare di chiudere i tag HTML2. chiudere i tag HTML con ordine3. racchiudere un tag <div>, <h1>, <h2>, <p> (ecc) da un <a> per creare un link
    112. 112. <a> <h2> La Musica: le origini</h2> </a><a> <p>Il significato del termine musica èdibattuto tra gli studiosi per via dellediverse accezioni utilizzate nei variperiodi storici. </p> </a> NO
    113. 113. <a> <h2> La Musica: le origini</h2><p>Il significato del termine musica èdibattuto tra gli studiosi per via dellediverse accezioni utilizzate nei variperiodi storici. </p> </a> NO
    114. 114. <h2> <a> La Musica: le origini </a> </h2><p><a>Il significato del termine musica èdibattuto tra gli studiosi per via dellediverse accezioni utilizzate nei variperiodi storici. </a> </p> SÌ
    115. 115. androe.com

    ×