Outils pour utilisateurs

Outils du site


cours2012:concepts_et_outils_pour_internet:preparation_colle_2

Préparation colle du mercredi 7 novembre

Exercices

  • Toujours les mêmes définitions (voir colle précédente).
  • Une maquette ⇒ ajouter les *toutes* balises HTML (et leurs éventuelles classes CSS). Elles seront fournies en vrac.
  • Une maquette avec tout ses balises ⇒ écrire le code HTML correspondent aux balises
  • Une maquette avec les balises et des sélecteurs CSS ⇒ compléter les propriétés CSS (utiliser les bonnes techniques).
  • Une code HTML ⇒ écrire des sélecteurs CSS.
  • Des fichiers HTML et CSS ⇒ compléter les liens vers les images et ancres !.

Les supports des exercices seront tirés des TP !

Exemple liens

Les fichiers :

TP-site-Twin-Towers/
    avant-le-11-septembre.html
    glossaire.html
    css/
        fonts/
            Walkway_SemiBold-webfont.eot
        images-interface/
            fond-logo.png
        styles.css
    images-contenu/
        av_11_sep_theo.png

avant-le-11-septembre.html :

<!DOCTYPE html>
<html lang="fr">
  <head>
  <!-- … -->
  <link rel="stylesheet" href="________________________________________">
  <!-- … -->
  </head>
  <body>
    <!-- … -->
    <img src="________________________________________" 
      alt="image1 article théorique">
    <!-- lien vers le terme du glossaire -->
    <p>Les <a href="________________________________________">Twin Towers</a> 
      font partie d'un centre d'affaire</p>
    <!-- … -->
  </body>
</html>

glossaire.html :

  <!-- … -->
  <dl>
    <dt id="world-trade-center">World Trade Center</dt>
    <dd>Le centre des affaires de Manhattan.</dd>
 
    <dt id="twin-towers">Twin Towers</dt>
    <dd>Tour 1 et tour 2 du World Trade Center.</dd>
    <!-- … -->
  </dl>
  <!-- … -->

styles.css :

@font-face {
    font-family: 'WalkwaySemiBoldRegular';
    src: url('________________________________________');
}
 
body>header hgroup>h1:after {
  content: url('________________________________________');
  position: absolute;
  bottom:-0.5em;
  right:-125px;
}
cours2012/concepts_et_outils_pour_internet/preparation_colle_2.txt · Dernière modification: 2012/10/21 22:00 (modification externe)