web activité 3: Jeu de code (1h30)

« Activité 3 : Jeu de code (1h30) Vous souhaitez créer vos propres sites web ? Vous êtes au bon endroit ! Dans ce cours, vous découvrirez les bases sur comment utiliser HTML et CSS, les deux langages de programmation à la base de tous les sites web. 1. Html brut de brute [20'] a) Voici un code puis son résultat Le code html de la page (extrait du code complet présent en annexe ou aller sur cette page et afficher le code source). Démo html - tarifs Accueil Présentation Tarifs L'Écurie Nous contacter Bienvenue L’écurie du Hohrust est une écurie de propriétaires située à Wittisheim, à proximité de Sélestat dans le Bas-Rhin.

Nous vous proposons des pensions dans une écurie "toutes disciplines" (Dressage, CSO, Cross, …) et dans des installations neuves. Présentation ... b) Aperçu de la page c) Questionnement sur le code Question 1 : Compléter le tableau en précisant à quoi servent les balises (h2 / p / img / a / title) h2 p img a title Question 2 : Quelle sont les balises qui contiennent des liens vers des objets non présents dans la page (citer les balises et préciser le lien) ? Question 3 : Quel est le format des images affichées du site ? Question 4 : serait-il possible d'avoir d'autres fichiers avec d'autres formats ? 2. Stylé avec CSS [20'] a) Code CSS ajouté au code html précédent /*================================================================================* / /* Styles du site web de test */ /*================================================================================* / * { border: 0; margin: 0; padding: 0; outline: 0; font: 14px/20px Arial, Helvetica, sans-serif; } html, body {margin: 0;} body {color: BurlyWood;} html, body {height: 100%; width: 100%} a {text-decoration: none; font-family: 'Yanone Kaffeesatz', sans-serif;} p {margin-bottom: 20px; text-align: justify; font: 14px/20px Arial, Helvetica, sans-serif;} b {font-weight: bold;} ul {padding: 0; margin: 0; list-style: none;} img {vertical-align: top;} /*-------------------------------------------------------------------------------*/ /* titres */ /*-------------------------------------------------------------------------------*/ h1, h2, h3 {font-family: 'Oregano',cursive; font-weight: normal; text-transform: uppercase;} h2 {font-size: 48px; line-height: 48px; color: #fbd8b2; background: url(images/h2_frise.png) 0 bottom repeat-x;} h3 {font-size: 26px; line-height: 33px; color: #352518; background: url(images/h3_frise.png) 0 bottom repeat-x; padding-top: 41px; margin-bottom: 7px; padding-bottom: 22px;} h4 {font-size: 20px; color: #352518; margin-bottom: 5px; } ... Le code CSS est un ensemble de directives qui permettent de faire la mise en forme des balises : placement, colorisation, etc.

... Ces directives sont écrites dans des feuilles de style(s) qui sont organisées en cascade (CSS=Cascade Style Sheet) avec pour principe que le dernier qui a parlé a raison.

C'est à dire, le dernier style exprimé sera appliqué. Les pages de style permettent aussi de faire du "Responsive Design" c'est à dire de présenter les pages avec des style différents selon la taille (largeur en pixels) de l'écran et donc l'appareil qui affiche la page (PC, smartphone, objet connecté, etc.

…) b) Rendu visuel Avant, sans CSS Après, avec CSS d) Questionnement Question 5 : Observer la première version du fichier html, quelle ligne permet de le lier au fichier style.css ? Question.... »