Initial Commit

Ajout d’un exercice sur les chemins relatifs et les images.
tecg-cpw · Oct 11, 2016 · c78693b · c78693b
commit c78693b
Show file tree

Hide file tree

Showing 19 changed files with 356 additions and 0 deletions.
diff --git a/css/screen.css b/css/screen.css
@@ -0,0 +1,43 @@
+html{
+	background-color: rgb(241,241,241);
+	margin : 0;
+}
+body{
+	background-color: #fff;
+	padding: 0 2em;
+	font:20px/1.4 Chalkboard;
+	width:30em;
+	margin: 0 auto;
+	box-shadow: 0 0 5px #999;
+}
+h1{
+	color:#AA0E02;
+}
+h2{
+	color:#93BB41;
+}
+nav {
+	margin-bottom: 2em;
+}
+nav li, a {
+	color:blue;
+}
+header{
+	margin-left:-2em;
+	margin-right: -2em;
+	padding : 0.5em 2em;
+}
+footer{
+	margin-left:-2em;
+	margin-right: -2em;
+	padding : 0.5em 2em;
+	background-color: #472A7C;
+	color:white;
+}
+img{
+	display:block;
+	margin: auto;
+}
+ul{
+	margin-bottom: 0;
+}
diff --git a/html/nouveau/nv.html b/html/nouveau/nv.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>  
+<!-- 
+* Complétez le head et nommez correctement la page
+* Balisez le contenu
+* Complétez les chemins relatifs et les attributs nécessaires pour
+  1. afficher correctement l’image
+  2. réaliser le menu
+  3. lier la feuile de style
+* Veillez à la correction typographique de votre texte
+-->
+<html>
+    <head>
+        <meta>
+        <link   rel="stylesheet"
+                type="text/css"
+                href="adresse_du_fichier_css"
+                media="screen"
+                title="Normal">
+    </head>
+    <body>
+                Nouvelle page  de mon site
+
+                Ma nouvelle page
+                    s'apelle nv.html 
+                    se trouve dans le sous-dossier "nouveau" du dossier html de mon site
+                </li>
+            </ul>            
+        </header>
+        <section>
+            <h2>
+                Mon image sur la nouvelle page
+            </h2>
+            <div>
+                <img src="" alt="Les devises Shadok : Il vaut mieux mobiliser son intelligence sur des conneries que mobiliser sa connerie sur des choses intelligentes." />
+            </div>
+        </section>
+        <nav>
+            <h2>
+                Mon menu sur la nouvelle page
+            </h2>
+            <ul>
+                <li>
+                    <a href="">Un lien vers la page 1</p></a>
+                </li>
+                <li>
+                    <a href="">Un lien vers la page 2</a> 
+                </li>
+                <li>
+                    <a href="">Un lien vers ma nouvelle page</a>
+                </li>
+                <li>
+                    <a href="">Retour vers la page d'accueil</a>
+                </li>
+            </ul>
+        </nav>
+        <footer>
+            <h2>
+                Mon footer
+            </h2>
+            <div>
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, fuga minus harum nisi tenetur veritatis dolores eveniet rem sit dignissimos consequatur iste id ab ! Iure sit hic non voluptatibus alias !  
+                </p>
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, fuga minus harum nisi tenetur veritatis dolores eveniet rem sit dignissimos consequatur iste id ab ! Iure sit hic non voluptatibus alias ! 
+                </p>
+            </div>
+        </footer>
+    </body>
+</html>
diff --git a/html/p1.html b/html/p1.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>  
+<!-- 
+* Complétez le head et nommez correctement la page
+* Balisez le contenu
+* Complétez les chemins relatifs et les attributs nécessaires pour
+  1. afficher correctement l’image
+  2. réaliser le menu
+  3. réaliser le lien dévitement du contenu (« aller au menu »)
+  4. lier la feuille de style
+* Veillez à la correction typographique de votre texte
+-->
+<html>
+    <head>
+        <meta>
+        <link   rel="stylesheet"
+                type="text/css"
+                href="adresse_du_fichier_css"
+                media="screen"
+                title="Normal">
+    </head>
+    <body>
+                Page 1 de mon site
+                    Aller au menu
+
+                Ma page 1
+                    s'apelle p1.html 
+                    se trouve dans le dossier html de mon site
+
+                Mon image sur la page 1
+                    Les devises Shadok : En essayant continuellement, on finit par réussir. Donc : plus ça rate, plus on a de chance que ça marche.
+
+                Mon contenu
+                    Plein de contenu ici, c'est le contenu de ma page. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, fuga minus harum nisi tenetur veritatis dolores eveniet rem sit dignissimos consequatur iste id ab ! Iure sit hic non voluptatibus alias ! 
+
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, fuga minus harum nisi tenetur veritatis dolores eveniet rem sit dignissimos consequatur iste id ab ! Iure sit hic non voluptatibus alias !  
+
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, fuga minus harum nisi tenetur veritatis dolores eveniet rem sit dignissimos consequatur iste id ab ! Iure sit hic non voluptatibus alias ! 
+
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, fuga minus harum nisi tenetur veritatis dolores eveniet rem sit dignissimos consequatur iste id ab ! Iure sit hic non voluptatibus alias !  
+
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, fuga minus harum nisi tenetur veritatis dolores eveniet rem sit dignissimos consequatur iste id ab ! Iure sit hic non voluptatibus alias ! 
+
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, fuga minus harum nisi tenetur veritatis dolores eveniet rem sit dignissimos consequatur iste id ab ! Iure sit hic non voluptatibus alias !  
+
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, fuga minus harum nisi tenetur veritatis dolores eveniet rem sit dignissimos consequatur iste id ab ! Iure sit hic non voluptatibus alias ! 
+
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, fuga minus harum nisi tenetur veritatis dolores eveniet rem sit dignissimos consequatur iste id ab ! Iure sit hic non voluptatibus alias !  
+
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, fuga minus harum nisi tenetur veritatis dolores eveniet rem sit dignissimos consequatur iste id ab ! Iure sit hic non voluptatibus alias ! 
+
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, fuga minus harum nisi tenetur veritatis dolores eveniet rem sit dignissimos consequatur iste id ab ! Iure sit hic non voluptatibus alias !  
+
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, fuga minus harum nisi tenetur veritatis dolores eveniet rem sit dignissimos consequatur iste id ab ! Iure sit hic non voluptatibus alias ! 
+
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, fuga minus harum nisi tenetur veritatis dolores eveniet rem sit dignissimos consequatur iste id ab ! Iure sit hic non voluptatibus alias !  
+
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, fuga minus harum nisi tenetur veritatis dolores eveniet rem sit dignissimos consequatur iste id ab ! Iure sit hic non voluptatibus alias ! 
+
+                Mon menu sur la page 1
+                    Un lien vers la page 1
+                    Un lien vers la page 2
+                    Un lien vers ma nouvelle page
+                    Retour vers la page d'accueil
+
+                Mon footer
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, fuga minus harum nisi tenetur veritatis dolores eveniet rem sit dignissimos consequatur iste id ab ! Iure sit hic non voluptatibus alias !  
+
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, fuga minus harum nisi tenetur veritatis dolores eveniet rem sit dignissimos consequatur iste id ab ! Iure sit hic non voluptatibus alias ! 
+
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, fuga minus harum nisi tenetur veritatis dolores eveniet rem sit dignissimos consequatur iste id ab ! Iure sit hic non voluptatibus alias !  
+
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, fuga minus harum nisi tenetur veritatis dolores eveniet rem sit dignissimos consequatur iste id ab ! Iure sit hic non voluptatibus alias ! 
+
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, fuga minus harum nisi tenetur veritatis dolores eveniet rem sit dignissimos consequatur iste id ab ! Iure sit hic non voluptatibus alias !  
+
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, fuga minus harum nisi tenetur veritatis dolores eveniet rem sit dignissimos consequatur iste id ab ! Iure sit hic non voluptatibus alias ! 
+    </body>
+</html>
diff --git a/html/p2.html b/html/p2.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>  
+<!-- 
+* Complétez le head et nommez correctement la page
+* Balisez le contenu
+* Complétez les chemins relatifs et les attributs nécessaires pour
+  1. afficher correctement l’image
+  2. réaliser le menu
+* Veillez à la correction typographique de votre texte
+-->
+<html>
+    <head>
+        <meta>
+        <link   rel="stylesheet"
+                type="text/css"
+                href="adresse_du_fichier_css"
+                media="screen"
+                title="Normal">
+    </head>
+    <body>
+                Page 2 de mon site
+
+                Ma page 2
+                    s'apelle p2.html 
+                    se trouve dans le dossier html de mon site
+
+                Mon image sur la page 2
+                    Les devises Shadok : En essayant continuellement, on finit par réussir. Donc : plus ça rate, plus on a de chance que ça marche.
+
+                Mon menu sur la page 2
+                    Un lien vers la page 1
+                    Un lien vers la page 2
+                    Un lien vers ma nouvelle page
+                    Retour vers la page d'accueil
+
+                Mon footer
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, fuga minus harum nisi tenetur veritatis dolores eveniet rem sit dignissimos consequatur iste id ab ! Iure sit hic non voluptatibus alias !  
+
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, fuga minus harum nisi tenetur veritatis dolores eveniet rem sit dignissimos consequatur iste id ab ! Iure sit hic non voluptatibus alias ! 
+    </body>
+</html>
diff --git a/img/img1.jpg b/img/img1.jpg
diff --git a/img/img2.jpg b/img/img2.jpg
diff --git a/img/img3.jpg b/img/img3.jpg
diff --git a/img/img4.jpg b/img/img4.jpg
diff --git a/img/img5.jpg b/img/img5.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>  
+<!-- 
+* Complétez le head et nommez correctement la page
+* Balisez le contenu
+* Complétez les chemins relatifs et les attributs nécessaires pour
+  1. afficher correctement l’image
+  2. réaliser le menu
+  3. lier la feuille de style
+* Veillez à la correction typographique de votre texte
+-->
+<html>
+    <head>
+        <meta>
+        <link   rel="stylesheet"
+                type="text/css"
+                href="adresse_du_fichier_css"
+                media="screen"
+                title="Normal">
+    </head>
+    <body>
+                Page d'accueil de mon site
+                Ma page d'accueil doit obligatoirement
+                    s'appeler index.html
+                    se trouver à la racine du site
+
+                Mon image sur la page d'accueil
+                    Les devises Shadok : Il vaut mieux pomper même s'il ne se passe rien que risquer qu'il se passe quelque chose de pire en ne pompant pas
+
+                Mon menu sur la page d'accueil
+                    Un lien vers la page 1
+                    Un lien vers la page 2
+                    Un lien vers ma nouvelle page
+
+                Mon footer
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, fuga minus harum nisi tenetur veritatis dolores eveniet rem sit dignissimos consequatur iste id ab ! Iure sit hic non voluptatibus alias !
+
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, fuga minus harum nisi tenetur veritatis dolores eveniet rem sit dignissimos consequatur iste id ab ! Iure sit hic non voluptatibus alias !
+    </body>
+</html>
diff --git a/monSite.md b/monSite.md
@@ -0,0 +1,86 @@
+#Mon site
+
+##Énoncé
+
+Réaliser le site « monSite » contenant 4 pages :
+
+- une page d’accueil (fichier `index.html`)
+- page 1 (fichier `page1.html`)
+- page 2 (fichier `page2.html`)
+- nouvelle page (fichier `nv.html`)
+
+Les fichiers html, images et css sont fournis et déjà correctement organisés dans les dossiers et sous-dossiers requis. L’arboresence est la bonne et doit rester telle quelle, vous n’avez pas le droit d’y toucher. 
+
+Les rendus finaux que vous devez obtenir se trouvent dans le dossier rendus.
+
+Vous trouverez également dans ce dossier des copies d’écran des outlines que vous devez obtenir pour la page d’accueil et la page 1 selon les deux algorithmes (html4 et html5). Les outlines à obtenir pour les deux autres pages sont semblables.
+
+Votre travail consiste à compléter les 4 fichiers html fournis en suivant les consignes indiquées en commentaire au début de chacun des fichiers.
+
+
+##Rappels théoriques et conseils
+
+###Les ressources doivent être liées en utilisant les chemins relatifs :
+
+- `./` = je reste où je suis
+- `../` = je remonte d’un niveau
+
+###Vos balises img doivent posséder 4 attributs reneignant :
+
+-  l’adresse du fichier image 
+-  le texte alternatif
+-  la largeur de l’imgae (pourquoi ?)
+-  la hauteur de l’image (pourquoi ?)
+
+Consulter le livre de référence pour toutes informations utiles
+
+###vérifiez la correction typographique en vous servant du memento fourni au cours :
+
+- apostrophes
+- guillemets
+- majuscules
+- tirets
+- points de suspension
+- ligatures
+- …
+
+###Bonnes pratiques à respecter :
+
+- Le texte alternatif d’une image doit être le texte contenu dans l’image lorsqu’il y en a un dans l’image (recommandation en matière d’accessibilité)
+
+##Résultats attendus
+
+Voici une capture d’écran de la page d’accueil avec la feuille de style appliquée :
+
+![Rendu de la page d’accueil avec CSS](rendus/rendu-index.png "rendu avec CSS de la solution : index.html")
+
+Voici une capture d’écran de la page 1 avec la feuille de style appliquée :
+
+![Rendu de la page 1 avec CSS](rendus/rendu-page1.png "rendu avec CSS de la solution : page1.html")
+
+Le plan de votre page d’accueil doit correspondre au résultat suivant :
+
+![Capture du plan du document selon l’algorithme HTML4 pour la page d’accueil](rendus/HM-accueil-outline4.png "capture des Headings fournis par headingsMap pour la page index.html")
+
+![Capture du plan du document selon l’algorithme HTML5 pour la page d’accueil](rendus/HM-accueil-outline5.png "capture de l’outline HTML5 fourni par headingsMap pour la page index.html")
+
+Le plan de votre page 1 doit correspondre au résultat suivant :
+
+![Capture du plan du document selon l’algorithme HTML4 pour la page 1](rendus/HM-page1-outline4.png "capture des Headings fournis par headingsMap pour la page page1.html")
+
+![Capture du plan du document selon l’algorithme HTML5 pour la page 1](rendus/HM-page1-outline5.png "capture de l’outline HTML5 fourni par headingsMap pour la page page1.html")
+
+Les pages doivent bien entendu être valides.
+
+##Références utiles à lire en matière d’accessibilité :
+
+[Directives d’accessibilité concernant le title sur le site anysurfer](http://www.anysurfer.be/fr/en-pratique/directives/directive/2-2-1-chaque-page-possede-un-titre-significatif)
+
+[Directives d’accessibilité concernant l’attribut alt d’une image sur le site anysurfer](http://www.anysurfer.be/fr/en-pratique/directives/directive/2-3-1-chaque-image-a-un-attribut-alt)
+
+[L'attribut alt sur le site de la WAI](http://www.w3.org/WAI/GL/techniques.htm)
+
+[Contenu de l’attribut alt sur le site de la WAI](http://www.w3.org/WAI/GL/techniques.htm#Appendix%20B)
+
+
+
diff --git a/rendus/HM-accueil-outline4.png b/rendus/HM-accueil-outline4.png
diff --git a/rendus/HM-accueil-outline5.png b/rendus/HM-accueil-outline5.png
diff --git a/rendus/HM-page1-outline4.png b/rendus/HM-page1-outline4.png
diff --git a/rendus/HM-page1-outline5.png b/rendus/HM-page1-outline5.png
diff --git a/rendus/rendu-index.png b/rendus/rendu-index.png
diff --git a/rendus/rendu-nv.png b/rendus/rendu-nv.png
diff --git a/rendus/rendu-page1.png b/rendus/rendu-page1.png
diff --git a/rendus/rendu-page2.png b/rendus/rendu-page2.png