This shows you the differences between two versions of the page.
Both sides previous revision Previous revision Next revision | Previous revision Last revision Both sides next revision | ||
2017_2018:s1:webdoc:td3 [2017/11/22 13:09] pourcelot [Barre de navigation] |
2017_2018:s1:webdoc:td3 [2017/11/23 09:23] pourcelot [Autour des boites] |
||
---|---|---|---|
Line 3: | Line 3: | ||
Ce TD se base énormément sur l'expérimentation. Faite preuve de logique. Tester des choses. Des squelettes de code sont fournis pour vous faire gagner du temps, mais les mécanismes sont à découvrir ! | Ce TD se base énormément sur l'expérimentation. Faite preuve de logique. Tester des choses. Des squelettes de code sont fournis pour vous faire gagner du temps, mais les mécanismes sont à découvrir ! | ||
+ | <note>La liste des documents à rendre se trouve à la fin du TD.</note> | ||
===== Structure d'une page web HTML5 ===== | ===== Structure d'une page web HTML5 ===== | ||
Line 29: | Line 29: | ||
===== Objectif du TD ===== | ===== Objectif du TD ===== | ||
- | Nous vous proposons de créer une section de type blog sur votre site web en utilisant les balises de l'exemple. | + | |
- | Ce TD vous sert à les expérimenter, pour vous faire une idée de comment mettre en page votre site fil-rouge (cf Section //Présentez-vous// du [[2016_2017:s1:webdoc:td1|TD1]]). | + | Ce TD vous sert à les expérimenter, pour vous faire une idée de comment mettre en page le mini site web que vous avez créé dans les TD précédents (cf Section //Présentez-vous// du [[2016_2017:s1:webdoc:td1|TD1]]). |
Pour cela vous vous aiderez de l'exemple suivant et des informations données dans les rubriques ci-après. | Pour cela vous vous aiderez de l'exemple suivant et des informations données dans les rubriques ci-après. | ||
[[http://www.alsacreations.com/article/lire/1376-html5-section-article-nav-header-footer-aside.html|Plus d'infos sur les différentes balises HTML utilisées.]] | [[http://www.alsacreations.com/article/lire/1376-html5-section-article-nav-header-footer-aside.html|Plus d'infos sur les différentes balises HTML utilisées.]] | ||
- | <box round rgb(185,211,238) 95%|**A Faire** : > | ||
- | * Créez une nouvelle page xHTML qui vous servira de portfolio pour démontrer votre expérience à travers des projets. | ||
- | * Commencez par créer les sections //header//, //nav//, //section//, //aside// et //footer// de votre page. | ||
- | * Concevez une feuille de style définissant des couleurs de fond différentes pour chaque zone afin de bien voir leurs mouvements lorsque vous toucherez à la mise en page. | ||
- | </box> | ||
===== Le flux d'affichage ===== | ===== Le flux d'affichage ===== | ||
Line 137: | Line 132: | ||
Mettez en commentaire la ligne du script CSS fourni qui les désactive, et visualiser à nouveau l'HTML dans un navigateur. | Mettez en commentaire la ligne du script CSS fourni qui les désactive, et visualiser à nouveau l'HTML dans un navigateur. | ||
+ | <note tip>Les marges permettent également de centrer des conteneurs (block). | ||
+ | Il suffit de préciser la largeur de l'élément (''width''), puis de fixer ''margin-left'' et ''margin-right'' à ''auto''. | ||
+ | <code> | ||
+ | #monbloc {width: 500px; | ||
+ | margin-left:auto; | ||
+ | margin-right:auto;} | ||
+ | </code> | ||
+ | </note> | ||
+ | |||
+ | <note tip>Par défaut, lorsqu'on indique la taille d'un conteneur, à l'aide des propriétés CSS ''width'' et ''height'', les bordures et les marges externes ne sont pas prises en compte. | ||
+ | |||
+ | Il est souvent plus pratique lorsque l'on crée une mise en page de faire en sorte que les dimensions indiquées soient celles du conteneur //marges comprises//. Pour changer la méthode de calcul de la taille d'un conteneur pour //tous// les éléments de la page, écrivez ''*{box-sizing: border-box;}'' au début de votre feuille CSS.</note> | ||
===== Mise en pratique ===== | ===== Mise en pratique ===== | ||
Line 157: | Line 164: | ||
</box> | </box> | ||
Quelques propriétés CSS à tester sur vos éléments pour comprendre leur comportement : | Quelques propriétés CSS à tester sur vos éléments pour comprendre leur comportement : | ||
- | - [[http://www.w3schools.com/cssref/pr_class_position.asp|La position (static, relative, absolute ou fixed).]] <code css> position : ... ;</code> (un [[http://fr.learnlayout.com/position.html|résumé en français]]. | + | - [[http://www.w3schools.com/cssref/pr_class_position.asp|La position (static, relative, absolute ou fixed).]] <code css> position : ... ;</code> Un [[http://fr.learnlayout.com/position.html|résumé en français]]. |
- [[http://www.w3schools.com/cssref/pr_class_display.asp|Le display (inline, block, flex, none ...).]] <code css> display: ...; </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> | - [[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 === | === IFrame === | ||
Line 188: | Line 183: | ||
+ | <note important> | ||
+ | **À rendre** : | ||
+ | |||
+ | - Les **réponses aux questions** de ce TD (sous la forme d'une page HTML valide avec mise en forme CSS (profitez en pour utiliser quelques techniques vues dans ce TD). | ||
+ | - Une **version HTML de votre CV**. Intégrez ensuite votre CV sur la page Web crée lors des TD précédents en utilisant une iframe. Rendez le tout (page web + CV intégré) sous forme d'une archive **ZIP**. Rajoutez également un lien pour pouvoir afficher votre CV sur une page indépendante. | ||
+ | |||
+ | Vous pouvez faire un rendu par binôme, à condition de bien faire apparaître les deux noms du binôme dans tous les documents à rendre. | ||
+ | </note> | ||
+ | |||
+ | Les dates et modalités de rendu seront fixées par l'enseignant en charge du TD. | ||