diff --git a/css/screen.css b/css/screen.css new file mode 100644 index 0000000..d62446b --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/html/nouveau/nv.html b/html/nouveau/nv.html new file mode 100644 index 0000000..d319c43 --- /dev/null +++ b/html/nouveau/nv.html @@ -0,0 +1,70 @@ + + + + + + + + + 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 + + + +
+

+ Mon image sur la nouvelle page +

+
+ Les devises Shadok : Il vaut mieux mobiliser son intelligence sur des conneries que mobiliser sa connerie sur des choses intelligentes. +
+
+ + + + \ No newline at end of file diff --git a/html/p1.html b/html/p1.html new file mode 100644 index 0000000..fba867a --- /dev/null +++ b/html/p1.html @@ -0,0 +1,78 @@ + + + + + + + + + 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 ! + + \ No newline at end of file diff --git a/html/p2.html b/html/p2.html new file mode 100644 index 0000000..5564a4f --- /dev/null +++ b/html/p2.html @@ -0,0 +1,40 @@ + + + + + + + + + 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 ! + + \ No newline at end of file diff --git a/img/img1.jpg b/img/img1.jpg new file mode 100755 index 0000000..250baad Binary files /dev/null and b/img/img1.jpg differ diff --git a/img/img2.jpg b/img/img2.jpg new file mode 100755 index 0000000..d70866a Binary files /dev/null and b/img/img2.jpg differ diff --git a/img/img3.jpg b/img/img3.jpg new file mode 100755 index 0000000..da5af01 Binary files /dev/null and b/img/img3.jpg differ diff --git a/img/img4.jpg b/img/img4.jpg new file mode 100755 index 0000000..a60b59e Binary files /dev/null and b/img/img4.jpg differ diff --git a/img/img5.jpg b/img/img5.jpg new file mode 100755 index 0000000..2ed6246 Binary files /dev/null and b/img/img5.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..df0fc0d --- /dev/null +++ b/index.html @@ -0,0 +1,39 @@ + + + + + + + + + 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 ! + + \ No newline at end of file diff --git a/monSite.md b/monSite.md new file mode 100644 index 0000000..e869cbb --- /dev/null +++ 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 new file mode 100644 index 0000000..3cb7275 Binary files /dev/null and b/rendus/HM-accueil-outline4.png differ diff --git a/rendus/HM-accueil-outline5.png b/rendus/HM-accueil-outline5.png new file mode 100644 index 0000000..770b2e2 Binary files /dev/null and b/rendus/HM-accueil-outline5.png differ diff --git a/rendus/HM-page1-outline4.png b/rendus/HM-page1-outline4.png new file mode 100644 index 0000000..92dc032 Binary files /dev/null and b/rendus/HM-page1-outline4.png differ diff --git a/rendus/HM-page1-outline5.png b/rendus/HM-page1-outline5.png new file mode 100644 index 0000000..43c007f Binary files /dev/null and b/rendus/HM-page1-outline5.png differ diff --git a/rendus/rendu-index.png b/rendus/rendu-index.png new file mode 100644 index 0000000..6b915cd Binary files /dev/null and b/rendus/rendu-index.png differ diff --git a/rendus/rendu-nv.png b/rendus/rendu-nv.png new file mode 100644 index 0000000..0a7cfb1 Binary files /dev/null and b/rendus/rendu-nv.png differ diff --git a/rendus/rendu-page1.png b/rendus/rendu-page1.png new file mode 100644 index 0000000..fab4643 Binary files /dev/null and b/rendus/rendu-page1.png differ diff --git a/rendus/rendu-page2.png b/rendus/rendu-page2.png new file mode 100644 index 0000000..0ac4390 Binary files /dev/null and b/rendus/rendu-page2.png differ