Differences

This shows you the differences between two versions of the page.

--- 2016_2017:s1:webdoc:td3 [2016/11/09 18:28]
logre
+++ 2016_2017:s1:webdoc:td3 [2016/11/09 18:49]
logre [| TD3 : Layout, au pixel près |]
@@ Line 1: / Line 1: @@
-----
 ====== | TD3 : Layout, au pixel près | ======
-----
@@ Line 122: / Line 122: @@
 </code>
-===== Barre de navigation =====
+===== Autour des boites =====
+Il est possible de définir des espacements autour des éléments HTML en CSS:
+  * les marges autour de l'élément : //margin//
+  * les marges à l'intérieur de l'élément : //padding//
+<code css>
+   margin:10px; /* marge de 10 pixels tout autour de l'élément*/
+   margin:1%; /*marge de 1% tout autour de l'élément*/
+   margin: 5px 6px 7px 8px; /*dans l'ordre : top right bottom left*/
+   margin-left:10px;
+   padding: 10px;
+   padding: 5px 6px 7px 8px;
+</code>
+Certains éléments ont des marges et/ou des paddings par défaut.
+Mettez en commentaire la ligne du script CSS fourni qui les désactive, et visualiser à nouveau l'HTML dans un navigateur.
+===== Mise en pratique =====
+==== Barre de navigation ====
 Votre site contiendra plusieurs pages.
@@ Line 139: / Line 159: @@
   - [[http://www.w3schools.com/cssref/pr_class_position.asp|La position (static, relative, absolute ou fixed).]] <code css> position : ... ;</code>
   - [[http://www.w3schools.com/cssref/pr_class_display.asp|Le display (inline, block, flex, none ...).]] <code css> display: ...; </code>
   - [[http://www.w3schools.com/css/css_float.asp|Le flottement (left, right) .]] <code css> float: ...; </code>
+==== Contenu ====
+<box round rgb(185,211,238) 95%|**A Faire** :  >
+  * En utilisant les balises HTML 5 //section//, //article// et //aside// créer une liste de projets démontrant toutes vos compétences pour former un portfolio.
+</box>
+Un projet doit être caractérisé par :
+- un titre
+- une date
+- un texte
+- un visuel éventuel
+- un lien vers une vidéo de démonstration ou un repo github
+=== IFrame ===
+Si votre projet est disponible sur le web, vous pouvez avoir envie d'avoir une miniature de celui-ci comme illustration de votre projet. C'est une utilisation possible des IFrames.
+<box round rgb(185,211,238) 95%|**A Faire** :  >
+  * Téléchargez le {{:2016_2017:s1:webdoc:iframe.zip|squelette}} d'utilisation d'une IFrame.
+  * Etudiez son fonctionnement, puis démontrez-en une utilisation au sein de votre propre page.
+</box>
+Les IFrames sont également utiles pour ajouter certains widgets fournis par des sites externes, comme un plan google maps, un google calendar, etc...
+===== Je sais répondre à =====
+<box round rgb(255,204,153) 97%|**Je sais répondre à :**   >
+  * Qu'est-ce que le flux d'affichage ?
+  * Comment décaler un élément dans ce flux ?
+  * Comment sortir un élément de ce flux ?
+  * Quels sont les types de marge sur lesquelles nous pouvons agir ?
+  * Comment placer les éléments relativement les uns aux autres ?
+  * A quoi sert l'attribut "float"? "clear" ?
+</box>

Cours au département INFO - IUT - UNS

User Tools

Site Tools

Differences

Page Tools