CMCC - Concetti Avanzati "CSS Framework, HTML5 e CSS3"

Obiettivi

• Conoscere le moderne sfide del Web Design
• Conoscere e Saper usare un Framework CSS
• Conoscere quali sono gli obiettivi delle nuove standardizzazioni in corso (CSS3 e HTML5)
• Approfondire il ruolo di HTML e CSS, insieme a JS in un'applicazione Web

Supporto a risoluzioni e dispositivi differenti

Supporto a risoluzioni e dispositivi differenti

• Generalizzando, possiamo dire che esistono 2 approcci possibili, e molto differenti, allo sviluppo Web con supporto ai dispositivi mobili:
  • sviluppare una versione mobile del sito web (o un app, o entrambi)
  • il Responsive Web Design

Responsive Web Design

• Il Responsive Web design (RWD) è una tecnica di Web design che fornisce un'esperienza ottimale in visualizzazione, navigazione e lettura ad un gran numero di device (dagli smartphone ai grandi monitor dei computer desktop)
• RWD riduce al minimo la necessità, da parte dell'utente, di ridimensionare e scorrere (per esempio orizzontalmente) l'applicazione Web che si sta visualizzando

Responsive Web Design: come si ottiene?

• Griglia fluida
• Immagini flessibili
• CSS3 media queries

Responsive Web Design: come si ottiene?

• Il concetto di griglia fluida richiede che gli elementi della pagina vengano dimensionati in unità di misura relative, come la percentuale, piuttosto che in unità assolute come pixel o punti
• Le immagini flessibili sono dimensionate in unità relative per evitare che fuoriescano dall'elemento che le contiene. In particolare, verranno ridimensionate in base alla risoluzione dello schermo
• Attraverso le media queries è possibile associare fogli di stile diversi al variare del dispositivo

Responsive Web Design: CSS3 media queries

• Il browser riporta la risoluzione dello schermo
• In base alla larghezza, viene servito un foglio di stile con un layout appropriato
• Nessuna interazione lato js

Progressive Enhancement

• Evoluzione della strategia nota come graceful degradation
• Consiste nell'implementazione dei seguenti principi:
  • il contenuto base deve essere accessibile a tutti i browser
  • le funzionalità base devono essere accessibili a tutti i browser
  • i contenuti devono essere gestiti mediante markup semantico
  • il layouting avanzato è fornito mediante fogli di stile esterni
  • la dinamicità deve essere fornita mediante file javascript esterni e non intrusivi
  • le preferenze del browser degli utenti devono essere rispettate
• Wikipedia: http://en.wikipedia.org/wiki/Progressive_enhancement

CSS Framework: cos'è?

• Un framework CSS è una libreria che consente di applicare il CSS alle pagine web in maniera più semplice e standard-compliant.
• Fornisce un'insieme di regole CSS direttamente utilizzabili
• Utilizzare un framework CSS permette allo sviluppatore WEB di velocizzare la fase di startup di un nuovo sito (bootstrap), e di ottenere un aspetto organico tra le varie pagine che lo compongono

Introduzione a Bootstrap

• Una collezione di strumenti gratuiti per la creazione di siti e applicazioni web responsive
• Fornisce un insieme di regole e strumenti per la gestione del layout della pagina
• Contiene template, basati su HTMS e CSS, per la tipografia, i form, i bottoni, i menu e altri componenti dell'interfaccia
• Fornisce semplici estensioni JavaScript per gestire l'interattività degli elementi della pagina (opzionali)

Bootstrap: alcuni numeri

• Free as in speech project (MIT License)
• Progetto più popolare su GitHub (64000 stars, 5100 watchers)
• La stable release è 3.1.0 (a fine Gennaio 2014)
• Sito Web http://getbootstrap.com/

Bootstrap: perchè dovrei usarlo?

• fornisce una soluzione pulita ed uniforme per lo sviluppo di interfacce Web
• supporta tutti i browser (addirittura IE7...)
• supporta HTML5 e CSS3
• contiene numerosi componenti, (eventualmente) semplici da personalizzare
• velocizza il processo di sviluppo di siti e applicazioni web

Bootstrap: browser support

• Firefox, Google Chrome, IE(>=7), Safari, Opera (desktop)
• Browser stock Mobile (iOS, Android, WP8)
• Info più dettagliate: http://getbootstrap.com/getting-started/#browsers

Bootstrap: key features

• grid layouting
• menu dropdown
• bottoni
• menu di navigazione
• breadcrumbs
• paginazione
• thumbnails
• carousel
• plugin js per popovers, modali e molto altro..

Bootstrap: key features

La libreria Bootstrap è organizzata in tre macro-raggruppamenti:

• CSS: fornisce lo stile dei principali elementi del documento, le regole tipografiche e il sistema di layouting basato su griglia
• Components: l'insieme dei componenti avanzati disponibili (icone, carousel, menu, navbar..)
• Javascript: set di plugin per modificare la logica dei componenti (utilizzo opzionale)

Bootstrap: basic template

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Bootstrap: grid system

• Bootstrap include un sistema a griglie http://getbootstrap.com/css/#grid fluido e responsivo che può scalare fino a 12 colonne in base alla dimensione dello schermo del device. Inoltre, include classi predefinite per semplici opzioni di layout.
• La configurazione della griglia si basa sull'utilizzo delle seguenti classi CSS:
  • .container
  • .row
  • .col-res-ncell (Es. col-xs-4)

Bootstrap: grid system

• Le classi CSS di ciascuna colonna sono composte da tre componenti:
  • col: identifica l'elemento come colonna della griglia
  • res [xs|sm|md|lg]: risoluzione dello schermo a cui si applica la configurazione
  • ncell [1,12]: numero di colonne della griglia da riservare
• È possibile assegnare a ciascuna colonna (.col-) di una riga (.row) più classi, che ne configurano il comportamento in base alla dimensione dello schermo
• Le dimensioni dello schermo supportate sono le seguenti:
  • xs=eXtraSmall, sm=SMall, md=MeDium, lg=LarGe
  • maggiori info: http://getbootstrap.com/css/#grid-options

Bootstrap: grid template

Disposizione orizzontale (link esempio)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Grid System</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="grid.css" rel="stylesheet">
  </head>
  <body>
    <div class="container">
      <h3>Tre colonne uguali</h3>
      <p>Ottieni 3 colonne di uguale larghezza <strong>sui desktop e su desktop grandi</strong>. Sui device mobile, sui tablet (e su risoluzioni inferiori) le colonne verranno automaticamente disposte in verticale.</p>
      <div class="row">
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4">.col-md-4</div>
      </div>
    </div>
  </body>
</html>

Bootstrap: grid template

Disposizione orizzontale (xs) (link esempio)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Grid System</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="grid.css" rel="stylesheet">
  </head>
  <body>
    <div class="container">
      <h3>Tre colonne uguali</h3>
      <p>Ottieni 3 colonne di uguale larghezza <strong>su tutte le risoluzioni supportate</strong>
      <div class="row">
        <div class="col-xs-4">.col-xs-4</div>
        <div class="col-xs-4">.col-xs-4</div>
        <div class="col-xs-4">.col-xs-4</div>
      </div>
    </div>
  </body>
</html>

Bootstrap: grid template

Mobile & Desktop (link esempio)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Grid System</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="grid.css" rel="stylesheet">
  </head>
  <body>
    <div class="container">
      <h3>Mobile & Desktop</h3>
      <p>Le colonne hanno una larghezza iniziale del 50% sul mobile ed arrivano fino al 33.3% su un desktop</p>
      <div class="row">
        <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
        <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
        <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
      </div>
    </div>
  </body>
</html>

Bootstrap: typography

• Le regole tipografiche di Bootstrap definiscono l'aspetto dei seguenti elementi:
  • titoli (h1...h6)
  • body e paragrafi
  • testo (grassetto, italico,..)
  • abbr, blockquote
  • liste (ol, ul)
  • tabelle
  • form
• Documentazione completa: http://getbootstrap.com/css/

Bootstrap: gli header

(link esempio)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Grid System</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="grid.css" rel="stylesheet">
  </head>
  <body>
    <div class="container">
      <h1>h1. Bootstrap heading <small>Testo secondario</small></h1>
      <h2>h2. Bootstrap heading <small>Testo secondario</small></h2>
      <h3>h3. Bootstrap heading <small>Testo secondario</small></h3>
      <h4>h4. Bootstrap heading <small>Testo secondario</small></h4>
      <h5>h5. Bootstrap heading <small>Testo secondario</small></h5>
      <h6>h6. Bootstrap heading <small>Testo secondario</small></h6>
    </div>
  </body>
</html>

Bootstrap: le tabelle

(link esempio)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Grid System</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="grid.css" rel="stylesheet">
  </head>
  <body>
    <div class="container">
      <table class="table">
        <thead>
          <tr>
            <th>#</th>
            <th>Nome</th>
            <th>Cognome</th>
            <th>Username</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>Luca</td>
            <td>Greco</td>
            <td>@luca</td>
          </tr>
          <tr>
            <td>2</td>
            <td>Domenico</td>
            <td>Martella</td>
            <td>@domenico</td>
          </tr>
          <tr>
            <td>3</td>
            <td>The</td>
            <td>Bird</td>
            <td>@twitter</td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>
</html>

Bootstrap: i forms

Esempio base (link esempio)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Grid System</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="grid.css" rel="stylesheet">
  </head>
  <body>
    <div class="container">
      <form role="form">
        <div class="form-group">
          <label for="exampleInputEmail1">Email</label>
          <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Inserisci una email">
        </div>
        <div class="form-group">
          <label for="exampleInputPassword1">Password</label>
          <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
        </div>
        <div class="form-group">
          <label for="exampleInputFile">Allega File</label>
          <input type="file" id="exampleInputFile">
          <p class="help-block">Qui ci andrebbe un messaggio di aiuto.</p>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox"> Ricordami
          </label>
        </div>
        <button type="submit" class="btn btn-default">Invia</button>
      </form>
    </div>
  </body>
</html>

Bootstrap: i bottoni

Sono disponibili diverse classi per creare velocemente bottoni stilizzati per ogni uso (link esempio)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Grid System</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="grid.css" rel="stylesheet">
  </head>
  <body>
    <div class="container">
      <!-- Standard button -->
      <button type="button" class="btn btn-default">Default</button>

      <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
      <button type="button" class="btn btn-primary">Primary</button>

      <!-- Indicates a successful or positive action -->
      <button type="button" class="btn btn-success">Success</button>

      <!-- Contextual button for informational alert messages -->
      <button type="button" class="btn btn-info">Info</button>

      <!-- Indicates caution should be taken with this action -->
      <button type="button" class="btn btn-warning">Warning</button>

      <!-- Indicates a dangerous or potentially negative action -->
      <button type="button" class="btn btn-danger">Danger</button>

      <!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
      <button type="button" class="btn btn-link">Link</button>
    </div>
  </body>
</html>

Bootstrap: le dimensioni dei bottoni

È possibile modificare rapidamente le dimensioni aggiungendo le classi .btn-lg, .btn-sm o .btn-xs (link esempio)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Grid System</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="grid.css" rel="stylesheet">
  </head>
  <body>
    <div class="container">
      <p>
        <button type="button" class="btn btn-primary btn-lg">Large button</button>
        <button type="button" class="btn btn-default btn-lg">Large button</button>
      </p>
      <p>
        <button type="button" class="btn btn-primary">Default button</button>
        <button type="button" class="btn btn-default">Default button</button>
      </p>
      <p>
        <button type="button" class="btn btn-primary btn-sm">Small button</button>
        <button type="button" class="btn btn-default btn-sm">Small button</button>
      </p>
      <p>
        <button type="button" class="btn btn-primary btn-xs">Extra small button</button>
        <button type="button" class="btn btn-default btn-xs">Extra small button</button>
      </p>
    </div>
  </body>
</html>

Bootstrap: i bottoni block-level

Aggiungendo la classe .btn-block è possibile espandere i bottoni a tutta la larghezza del container (link esempio)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Grid System</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="grid.css" rel="stylesheet">
  </head>
  <body>
    <div class="container">
      <button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
      <button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>
    </div>
  </body>
</html>

Bootstrap: lo stato dei bottoni

L'attributo disabled rende un bottone non cliccabile (e applica un fade del 50%) (link esempio)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Grid System</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="grid.css" rel="stylesheet">
  </head>
  <body>
    <div class="container">
      <button type="button" class="btn btn-lg btn-primary" disabled>Primary button (disabled)</button>
      <button type="button" class="btn btn-default btn-lg" disabled>Button (disabled)</button>
      <button type="button" class="btn btn-lg btn-primary">Primary button</button>
    </div>
  </body>
</html>

Bootstrap: le navbars

• Sono meta-componenti responsivi e vengono utilizzate come header di navigazione di un sito o una applicazione Web.
• Su dispositivi mobili vengono visualizzati in verticale con blocchi a comparsa e diventano barre orizzontali al crescere delle dimensioni dello schermo

Bootstrap: le navbars

(link esempio)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Grid System</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="grid.css" rel="stylesheet">
  </head>
  <body>
    <div class="container">
      <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
          <!-- Brand and toggle get grouped for better mobile display -->
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Brand</a>
          </div>

          <!-- Collect the nav links, forms, and other content for toggling -->
          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
              <li class="active"><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li><a href="#">Separated link</a></li>
                  <li class="divider"></li>
                  <li><a href="#">One more separated link</a></li>
                </ul>
              </li>
            </ul>
          </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
      </nav>
    </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Bootstrap: dropdown

Menu contestuali (a 2 stati) utili per mostrare elenchi di link. (resi interattivi dal plugin JavaScript dropdown) (link esempio)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Grid System</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="grid.css" rel="stylesheet">
  </head>
  <body>
    <div class="container">
      <div class="dropdown">
        <button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
          Dropdown
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
          <li role="presentation" class="divider"></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
        </ul>
      </div>
    </div>

    <script src="https://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Bootstrap: jumbotron

Si tratta di un componente leggero e flessibile che può essere esteso all'intero viewport per mostrare il contenuto chiave del sito (link esempio)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Grid System</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="grid.css" rel="stylesheet">
  </head>
  <body>
    <div class="container">
      <div class="jumbotron">
        <h1>Hello, world!</h1>
        <p>Contenuto mooooooolto importante...</p>
        <p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p>
      </div>
    </div>
  </body>
</html>

Bootstrap: full width jumbotron

Jumbotron full width e senza angoli arrotondati (link esempio)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Grid System</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="grid.css" rel="stylesheet">
  </head>
  <body>
    <div class="jumbotron">
      <div class="container">
        <h1>Hello, world!</h1>
        <p>Contenuto mooooooolto importante...</p>
        <p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p>
      </div>
    </div>
  </body>
</html>

Bootstrap: page header

Il posto giusto per un elemento h1 (link esempio)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Grid System</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="grid.css" rel="stylesheet">
  </head>
  <body>
    <div class="page-header">
      <h1>Example page header <small>Subtext for header</small></h1>
    </div>
  </body>
</html>

Bootstrap: menu di navigazione

link esempio

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Grid System</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="grid.css" rel="stylesheet">
  </head>
  <body>
    <ul class="nav nav-pills">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Profile</a></li>
      <li><a href="#">Messages</a></li>
    </ul>
  </body>
</html>

Bootstrap: menu laterale

Disposizione verticale mediante l'aggiunta della classe .nav-stacked (link esempio)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Grid System</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="grid.css" rel="stylesheet">
  </head>
  <body>
    <ul class="nav nav-pills nav-stacked">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Profile</a></li>
      <li><a href="#">Messages</a></li>
    </ul>
  </body>
</html>