Voir la source de Web 2016-04-14

== Positionnement CSS ==

Voir la [[Positionnement sur le web|page dédiée]].

== Exercice 1 ==

Mettre en ligne l'ensemble des exercices et faire une page d'accueil qui pointe vers l'ensemble de ces pages.

== Exercice 2 ==

En s'inspirant des oeuvre d'Art Cinétique et d'Op Art, créer un ''tableau'' HTML (une page HTML et CSS avec une dimension picturale, à la manière de [http://www.newrafael.com/websites Rafaël Rozendaal].

Cette page utilisera des trames pour jouer sur des effets de moirage par superposition. Ce tableau proposera plusieurs configurations grâce à l'utilisation des différentes propriétés de positionnement et des unités relatives ou absolues des CSS.

* http://www.abstractbrowsing.net/
* https://www.youtube.com/watch?v=99vcyH4Q3WM&index=241&list=WL


== Ou bien ==

<gallery>
Fichier:gomringer3.jpg|Eugen Gomringer, ''Ping Pong''|alt=Eugen Gomringer
Fichier:Mondrian.jpg|Mondrian|alt=Mondrian
Fichier:Jose_lino_grunewald.jpg|José Lino Grünwald ''vai e vem''|alt=José Lino Grünwald
</gallery>

Reproduire l'une des trois œuvres ci-dessus en HTML et CSS. Pour y parvenir, vous pouvez:

* jouer sur la structure du HTML et l'imbrication des balises;
* utiliser la règle CSS ''position'' avec pour valeurs (à vous de décider) ''relative'', ''absolute'' ou ''fixed'';
* utiliser la règle CSS ''text-align'' avec pour valeurs (à vous de décider) ''right'', ''center'' ou ''left'';
* utiliser les règle CSS ''margin'' (marge exterieure) ou padding (marge intérieure);
* toute autre règle CSS qui vous semble convenir.

En revanche:

* '''vous ne pouvez pas utiliser de tableaux'''.

Vous pouvez travailler par deux ou par trois. Vous devez chacun mettre en ligne le résultat sur votre espace FTP personnel (sur chaque compte).

Vous devez également utiliser des unités relatives (par exemple ''%'') plutôt que des unités absolues (par exemple ''px'') afin que le résultat soit redimensionnement en conservant les proportions. L'exactitude au pixel prêt n'est importante, je préfère que l'accent soit mis sur la mise en page ''relationnelle'' (les éléments sont placés de manière relative les uns aux autres).