Les briques du Web

Une initiation au développement Front-End avec HTML5, CSS3 et JavaScript

Ce site est le support de cours du module de DUT Informatique M1105 : création de documents numériques. L'objectif de ce module est de vous initier à la création de documents Web en vous présentant les technologies et les langages qui servent de socle au World Wide Web.

Après avoir lu l'ensemble des chapitres et fait (consciencieusement) l'ensemble des exercices de ce cours, vous devriez pouvoir déchiffrer aisément le code source ci-dessous.

<!doctype html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <title>Page personnelle d'Olivier Nocent</title>
    <style>
      body {
        color: #AE562B;
        font-family: sans-serif;
      }

      #portrait {
        float: left;
      }
    </style>
  </head>
  <body>
    <header>
      <h1>Page personnelle d'Olivier Nocent</h1>
      <p>Enseignant-chercheur en informatique</p>
    </header>
    <div role="main">
      <img id="portrait" src="me.jpg" alt="Portrait d'Olivier Nocent">
      <p>
      </p> 
    </div>
  </body>
</html>

Mais avant d'en arriver là, je vous invite à consulter le planning du cours et à commencer par lire l'introduction.

Semaine 37 (12/09 → 17/09)

Introduction

Qu'est-ce que le World Wide Web ? Que se passe-t-il lorsque je saisis une adresse dans mon navigateur web ? Configuration de l'environnement de développement : contenu du répertoire public, choix de l'éditeur de texte, ...

Anatomie d'un document Web

À quoi ressemble le code d'une page Web ? Quels langages et pour quoi faire ?

Bonnes pratiques

Les choses à faire et, surtout, à ne pas faire.


Semaine 38 (19/09 → 24/09)

Texte

Structuration et annotation du contenu textuel.

Listes

Différents types de liste.


Semaine 39 (26/09 → 01/10)

Hypertexte

Liens hypertextes, ancres.

Tableaux


Semaines 40 et 41 (03/10 → 15/10)

Couleur

Différents modèles de couleur, transparence.

Images

Formats d'image pour le Web, zones cliquables.

Audio et vidéo

Jeudi 20 octobre

Devoir surveillé No 1

Semaines 42, 43 et 44 (17/10 → 05/11)

Mise en page

Flot, modèle de boîte, positionnement.


Semaine 45 (7/11 → 12/11)

Sélecteurs CSS avancés


Semaine 46 (14/11 au 19/11)

Requêtes de média

Jeudi 17 novembre

Devoir surveillé No 2

Semaines 47 et 48 (21/11 → 03/12)

Formulaires

Semaines 49 et 50 (05/12 → 17/12)

JavaScript

Jeudi 8 décembre

Devoir surveillé No 3

Semaines 1 et 2 (03/01 → 14/01)

Front-end frameworks : Bootstrap, Materialize