CMCC - Introduzione ad HTML e CSS

Modern Web Basics

Obiettivi

Conoscere le basi di HTML e CSS
Conoscere il significato e le motivazioni per la separazione di aspetto e contenuto
Saper creare un semplice documento HTML
Saper creare un foglio di stile CSS ed applicarlo ad un documento HTML
Saper utilizzare i tool di sviluppo inclusi nei browser web

Introduzione ad HTML

Cos'è l'HTML (Definizione)

HTML: HyperText Markup Language
è un linguaggio per la definizione di documenti ipertestuali
standard mantenuto dalla W3C (World Wide Web Consortium):
- https://en.wikipedia.org/wiki/World_Wide_Web_Consortium
- https://it.wikipedia.org/wiki/World_Wide_Web_Consortium
derivato da SGML, negli anni si è evoluto gradualmente in HTML4
attraversata una breve parentesi XML con XHTML
aggiornato recentemente con HTML5

HTML4 / XHTML / HTML5

HTML4

<!DOCTYPE HTML PUBLIC
 "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
  <head>
    <meta http-equiv="Content-Type"
          content="text/html; charset=utf-8">
    <title>Bye bye, HTML4</title>
    <link rel="stylesheet" href="style.css"/>
  </head>
  <body>
    <p>Bye bye, HTML4</p>
  </body>
</html>

XHTML

<!DOCTYPE html PUBLIC
  "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xml:lang="en" lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Bye bye, XHTML!</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body id="home">
    <p>Bye bye, XHTML!</p>
  </body>
</html>

HTML5

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Hello HTML5!</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body id="home">
    <p>Hello HTML5!</p>
  </body>
</html>

HTML5

il nostro obiettivo è saper leggere, intepretare e scrivere la versione più recente dello standard

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Hello HTML5!</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body id="home">
    <p>Hello HTML5!</p>
  </body>
</html>

Documento HTML

un file in formato testo (non binario)
espresso secondo le regole dello standard HTML
composto da elementi organizzati in una struttura ad albero

DOCTYPE

indica la versione del formato HTML
per HTML5 sarà:

<!DOCTYPE html>

HTML: Tag ed Element

Tag - il vocabolario degli Elementi che possono essere utilizzati per comporre un documento HTML.

l'insieme dei tag è definito dalla W3C
alcuni tag possono contenerne altri
quando un tag ne contiene altri deve essere chiuso

Tag: alcune regole di sintassi

<tag>...</tag> <!-- OK -->
<tag>...</tag  <!-- ERRORE: tag non chiuso -->
<tag/>         <!-- OK: tag vuoto chiuso -->
<tag>          <!-- VERIFICARE: OK solo per i `void elements`:
area, base, br, col, embed, hr, img, input, keygen,
link, meta, param, source, track, wbr

http://www.w3.org/TR/html5/syntax.html#void-elements
<!-- NOTA: e questo è un commento -->

i tag html, head e body

il più semplice documento HTML è composto da:

un tag html come elemento radice (root) del documento
un tag head, contenuto nel tag html, per contenere degli elementi non visibili (es. i metadata del documento)
un tag body, contenuto nel tag html, per contenere gli elementi che ne rappresentano il contenuto (es. i paragrafi di testo o i menu)

i tag html, head e body

<!DOCTYPE html>
<html>
  <head></head>
  <body></body>
</html>

HTML5: passo dopo passo

Esercitazione con editor e live preview

01: Creazione del documento base

HTML preview

HTML sourcecode

<!DOCTYPE html>
<html>
  <head></head>
  <body></body>
</html>

02.1: Interpretazione degli spazi

HTML preview

HTML sourcecode

<p>Il testo e la spaziatura in
   html
  si comportano in<br/> modo
     particolare
</p>

02.2: Il "Poem Problem" e il tag pre

HTML preview

HTML sourcecode

<p>
    ...The Poem problem...

    My Bonnie lies over the ocean.
    My Bonnie lies over the sea.
    My Bonnie lies over the ocean.

    Oh, bring back my Bonnie to me.
</p>

<pre>
    ...The Poem problem...

    My Bonnie lies over the ocean.
    My Bonnie lies over the sea.
    My Bonnie lies over the ocean.

    Oh, bring back my Bonnie to me.
</pre>

02.2: Entities: encoding caratteri speciali

HTML preview

HTML sourcecode

<h1>Caratteri Speciali</h1>
<ul>
  <li> &gt; </li>
  <li> &lt; </li>
  <li> &amp; </li>
  <li> &bigcirc; </li>
  <li> &commat; </li>
  <li> &circledR; </li>
  <li> &copy; </li>
  <li> &ctdot; </li>
</ul>

03: I tag h

HTML preview

HTML sourcecode

<h1>Header Level1</h1>
<h2>Header Level2</h2>
<h3>Header Level3</h3>

<hr>

<h4>Header Level4</h4>
<h5>Header Level5</h5>
<h6>Header Level6</h6>

04: liste (ordinate e non ordinate)

HTML preview

HTML sourcecode

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item ...</li>
</ol>

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item ...</li>
</ul>

Tag: attributi

a tutti i tag è possibile associare degli attributi secondo la sintassi:
- attributo
- attributo="valore"
sono contenute all'interno del tag (aperto)
il significato degli attributi è definito dallo standard W3C

Tag: attributi id e class

id: identifica univocamente un elemento della pagina
class: identifica le classi di appartenenza di un elemento della pagina

Esempi di attributi dei tag

<html lang="el"> <!-- dichiarazione lingua del documento -->

<meta charset="uft-8"> <!-- dichiarazione set caratteri -->

<button disabled> <!-- attributo booleano -->

<body id="home">  <!-- unico elemento home -->

<p class="important r-menu"> <!-- uno degli elementi con classi
                                  important e r-menu -->

05.1: link: il tag a

HTML preview

HTML sourcecode

<p>
  <a href="01/html/fake-page.html">
    Questo testo
  </a>
  &egrave; un link ad una pagina HTML presente su questa macchina.
</p>

<p>
  <a href="http://www.google.it">
    Questo testo
  </a>
  &egrave; un link ad una pagina sul Web.
</p>

<a href="http://www.google.it" target="_blank">
  Vai su google.it
</a>
<p>
  Se si imposta l'attributo target a "_blank",
  il link verr&agrave; aperto in una nuova finestra/tab.
</p>

05.2: link: il tag img

HTML preview

HTML sourcecode

<p>
  Per inserire un'immagine si usa un tag &lt;img&gt;
  <br />
  <img src="../../res/learn_alcacoop.jpg"
       alt="HTML tutorial"
       style="height: 64px;" />
</p>

Questa immagine &egrave; linkata ad un url:

<a href="http://getfirefox.com">
  <img src="../../res/firefox-logo.png"
       alt="HTML tutorial"
       width="64" height="64" />
</a>

04: HTML5 blank page

HTML preview

HTML sourcecode

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>TITLE</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body id="home">
    <p>BODY</p>
  </body>
</html>

HTML: struttura ad albero

introduzione al DOM Inspector

il DOM Inspector è uno degli strumenti di sviluppo integrati nei principali browser

introduzione al DOM Inspector

DOM (Document Object Model): il formato di testo definito dalla W3C, HTML, viene letto ed interpretato da un engine web è diventa un sistema di oggetti collegati tra loro in una struttura ad albero

introduzione al DOM Inspector

il documento HTML, staticamente definito in un file di testo, diventa così un live document
vivo all'interno di un web engine, potrà essere modificato in tempo reale e reso interattivo

introduzione al DOM Inspector

Relazioni tra gli elementi del DOM

Root element, Parent/Childs, Siblings

root element: radice dell'albero degli elementi, che contiene tutti gli altri
parent element: elemento dell'albero che ne contiene altri
childs element: elemento dell'albero contenuto in un elemento parent
siblings element: elementi con parent comune, che si trovano allo stesso livello dell'albero

Relazioni tra gli elementi del DOM

Root element, Parent/Childs, Siblings

Tabelle HTML

HTML preview

HTML sourcecode

<table border="1">
  <tr>
    <td>100</td>
  </tr>
</table>

Tabelle HTML

HTML preview

HTML sourcecode

<table border="1">
  <tr>
    <td>100</td>
    <td>200</td>
    <td>300</td>
  </tr>
</table>

Tabelle HTML

HTML preview

HTML sourcecode

<table border="1">
  <tr>
    <th>col1</th>
    <th>col2</th>
  </tr>
  <tr>
    <td>100</td>
    <td>200</td>
  </tr>
</table>

Tabelle HTML

HTML preview

HTML sourcecode

<table>
  <thead>
    <tr>
      <th scope="col">Header 1</th>
      <th scope="col">Header 2</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Footer 1</td>
      <td>Footer 2</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
    </tr>
    <tr>
      <td>Cell 7</td>
      <td>Cell 8</td>
    </tr>
  </tbody>
</table>

Tabelle HTML: la tentazione del layouting

La tabella è spesso scambiata per una comoda scorciatoia per il layouting di una pagina...

Tabelle HTML: la tentazione del layouting

HTML preview

HTML sourcecode

<!DOCTYPE html>
<html>
    <head>
      <title>Table Layout Temptation</title>
      <link rel="stylesheet"
            href="06_table5.css"/>
    </head>
    <body>
      <table>
        <tr id="header">
          <td colspan="2">HEADER</td>
        </tr>
        <tr id="page-body">
          <td id="sidebar">SIDEBAR</td>
          <td id="content">CONTENT</td>
        </tr>
        <tr id="footer">
          <td colspan="2">FOOTER</td>
        </tr>
      </table>
    </body>
</html>

Tabelle HTML: la tentazione del layouting

Purtroppo questo approccio presenta diversi problemi, tutti riconducibili alla mancata/errata separazione tra aspetto e contenuto, in particolare:

accessibilità: la consultazione della pagina risulterà di difficile consultazione da parte di uno screen reader
adattabilità: l'adattamento del layout a risoluzioni e densità di schermo differenti risulterà più difficile

Tabelle HTML: la tentazione del layouting

Per fortuna i fogli di stile CSS consentono di risolvere il problema con maggiore eleganza e flessibilità e ha consentito la deprecazione di questo approccio già diversi anni fa.

Aspetto vs. Contenuto vs. Comportamento

HTML: il linguaggio da utilizzare per dare struttura ai nostri contenuti, la struttura dell'HTML dovrà rappresentare il più possibile il significato semantico dei contenuti della pagina
CSS: il linguaggio utilizzato per applicare gli stili ai blocchi identificati dall'HTML da tag, id e classi
JS: il linguaggio utilizzato per aggiungere lo strato di interattività (il comportamento) della pagina

i tag di struttura (div e span)

i tag div e span hanno la funzione di dividere la pagina in blocchi
allo scopo di strutturare i contenuti in categorie e sotto categorie

i tag di struttura (div e span)

ad esempio:

intestazioni, piè di pagina
barre di navigazione, barre laterali
contenuto principale della pagina
contenuti secondari
etc.

i tag di struttura (div e span)

HTML preview

HTML sourcecode

<div id="page-header">
  <h1>Site Title</h1>

  <div id="page-nav">
    <ul>
      <li><a href="./home.html">Home</a></li>
      <li><a href="./about.html">about</a></li>
    </ul>
  </div>
</div>

<div id="page-content">
  <div id="article">
    <div id="article-header">
      <h1>Article Title</h1>
      <span id="article-pubdate">02 Gennaio 2014</span>
    </div>
    <div id="article-content">
      Content...
    </div>
  </div>
  <div id="related-articles">
    Related...
  </div>
</div>

<div id="page-footer">
  <a href="#page-header">Back to top</a>
</div>

i nuovi tag di struttura HTML5

(article, section, ...)

HTML preview

HTML sourcecode

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Site Name - Article Title</title>
  </head>
  <body>
    <header id="site"> <!-- Page Header -->
      <h1>Site Name</h1>
    </header>
    <nav> <!-- Site Navbar -->
      <ul><li>Navbar Item</li></ul>
    </nav>
    <div id="content">
      <article> <!-- article -->
        <header> <!-- title e metadata -->
          <h1>Article Title</h1>
          <p>Article Metadata</p>
        </header>
        <!-- content e footer -->
        <p>Article Content</p>
        <footer>Article Footer</footer>
      </article>
      <!-- article secondary content -->
      <aside id="sidebar">
        <h3>Related Articles</h3>
        <p>...</p>
      </aside>
    </div>
    <!-- site footer -->
    <footer id="footer">Page Footer</footer>
  </body>
</html>

strutturare una pagina con i div

... o i nuovi tag struttura HTML5

i form, input e output

HTML preview

HTML sourcecode

<form id="login-form" action="process.php" method="POST">
  <fieldset>
    <legend>Login</legend>

    <div>
      <label for="email">Email:</label>
      <input name="email" type="email"
             placeholder="your email address"
             required autofocus>
    </div>

    <div>
      <label for="password">Password:</label>
      <input name="password" type="password"
             placeholder="6 chars password" required>
    </div>

    <div>
      <input name="login" type="submit" value="Login">
    </div>
  </fieldset>
</form>

i form, input e output

HTML preview

HTML sourcecode

<form onsubmit="return false"
      oninput="o.value = parseInt(a.value) + parseInt(b.value)">
  <input name="a" type="number" step="any"> +
  <input name="b" type="number" step="any"> =
  <output name="o"></output>
</form>