Les pages Web


html5

Pour le contenu

css3

Pour l'apparence

schema
html5

HyperText Markup Language

  • décrit le contenu
  • language interprété par le navigateur web
  • le navigateur doit être compatible
  • le document doit être bien écrit
  • et les mauvais documents / développeurs ?

HTML 4.01

  • dernière normalisation (1999 !)
  • 2 modes d'écriture:
    • SGML: concis, mais irrégulier
    • XML (aka XHTML 1.0): moins concis, mais régulier
  • 100+ balises: les mots compris
  • 3 grammaires définissent l'entrelacement des mots

HTML 5

  • figé en 2014
  • de la sémantique et du multimédia
  • déjà supporté par les navigateurs décents

Un document basique

                  
<?xml version="1.0" encoding="UTF-8"?>
<!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>
    <title>Blank XHTML 1 Strict Page</title>
  </head>
  <body>
  </body>
</html>                                    

Showtime

Visualiser le HTML correspondant depuis:

  • éditeur de texte
  • navigateur

Erreurs courantes

warning
  • <u>Foo <b>bar</u></b>
  • <P>foo</P>
  • <p>foo<br>bar<p>
  • <img alt="text' src=img/toto.jpg/>

Vérifier le HTML

http://validator.w3.org

  • validité = portabilité
  • erreurs = malheur
css3

Cascaded StyleSheet

  • language décrivant la forme d'une page HTML
  • document bien écrit/ compatibilité / mauvais développeurs/...

Un code HTML, plusieurs styles

Default - Sky - Beige - Simple - Serif - Night
Moon - Solarized

(CSS Zen Garden)

Styler un document XHTML

  • séparer le fond de la forme
  • les feuilles sont listées dans l'en-tête
  • les balises link et les attributs media indiquent les feuilles à considérer
<head>
...
<link rel="stylesheet" type="text/css" href="common.css" media="screen" />
<link rel="stylesheet" type="text/css" href="page.css" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
...
</head>
            

CSS en pratique

  • des sélecteurs
  • des styles à appliquer pour la sélection
  • Cascading: les éléments du document héritent des règles des parents
  • un style par défaut propre à chaque navigateur
/* Ceci est un exemple de feuille de style*/
p {  
  text-indent: 10pt;
  color: #111;
  text-align: justify;
}

.footer {
  text-align: center;
  font-weight: lighter;
}

class et id

Pour typer des éléments particulier à styler

<p>Du texte et <a>un lien</a></p>
  <ul id="menu1">
    <li class="impair premier">Item 1</li>
    <li class="pair" id="hop">Item 2</li>
    <li class="impair">Item 3</li>    
  </ul>
  <ul id="menu2">
    <li class="impair premier">Item 1</li>
    <li class="pair">Item 2</li>
    <li class="impair">Item 3</li>    
  </ul>
  • un seul attribut id dans le document
  • un ou plusieurs attributs class
  • on peut combiner class et id

Sélecteurs simples

p, li {color: blue;}

a {font-weight: bold;}

* {color: red;}  

#menu2 a {color: inherit;}

#menu1 {
  border: solid orange 5px;
}
.pair {
  text-decoration: line-through;
}
.premier {
  font-variant: small-caps;
}
  

Du texte et un lien


Menu 2:

Sélecteurs composés

On repose sur la hierarchie des balises

.premier {
  color: green;
}
#menu3 .premier {
  color: blue;
}
#menu3 .pair {
  font-size: 10pt;
}
.impair a {
  font-size: 15pt;
}
Menu 3:


Menu 4:

Pseudo-classes, pseudo-élements

Géré dynamiquement par le navigateur

#menu5 {
  font-variant: small-caps;
}
#menu5:first-letter {
  font-size: 40pt;
}
#menu5 li:hover  {
  text-decoration: underline;
}
#menu6 a:visited {
  color: darkgray;
}
#menu6 a:hover {cursor: pointer;}
#menu6 ul:first-child {
  font-size: 25pt;
}
a:before {content: '\02605';}

Le modèle de boite

Tout élément XHTML est inclu dans sa boite


block

(<hX>, <div>, <li>, ...)
  • alignement vertical
  • occupe toute la largeur de la fenêtre

inline

(<strong>, <a>, <span>, ...)
  • alignement horizontal
  • occupe toute la largeur du contenu
box model W3C

Showtime:

Inline1Inline2
Block1
Block2

Placer les boites


  • un simple flot continu
  • même pas Web 1.0
    • menus ?
    • en-tête / pied-de page
    • colonnes

Re-positionnement

  • display: inline,block,none
  • float: left, right
  • visibility: hidden
  • position:relative,fixed,absolute

Re-positionnement

Showtime

Boite1
Boite2
Boite3
Boite4

Erreurs classiques


warning
  • un contenu qui dépasse de sa boite
  • sélecteur pour les classes (.), pour les id(#)
  • subir l'héritage
  • définir un sélecteur plusieurs fois

http://jigsaw.w3.org/css-validator/

Résumé

html5
  • décrit le contenu d'une page
  • interprété par le navigateur
  • un language normalisé: validator.w3.org
css
  • décrit l'apparence d'une page
  • des sélecteurs et des styles en cascade
  • un language normalisé: http://jigsaw.w3.org/css-validator/
  • un bon style supporte plusieurs résolutions