EXERCICE 1 : TRAVAILLER EN LIGNE A l'aide des informations de connexion qui vous ont été remises, connectez-vous au serveur NFrance, qui nous propose gracieusement l'hébergement en ligne. Pour vous connecter, lancer le logiciel filezilla. Il s'agit d'un logiciel libre et gratuit, qui gère le transfert des fichiers sur un serveur et que vous pouvez installer sur votre ordinateur personnel. Vue sur le local, i.e. les fichiers sur l'ordinateur Vue sur le serveur, c'est à dire les fichiers déposés sur l'espace d'hébergement. Pour l'instant, pas de connexion=> pas de fichier Pour se connecter au serveur, il existe 2 manières : occasionnelle (celle que vous allez utiliser aujourd'hui) (connexion rapide) régulière (celle que vous utiliserez sur votre ordinateur personnel). Connexion occasionnelle : Il faut compléter les informations en haut de la fenêtre (encadré rouge dans l'image précédente). insérer vos infos de connexion Elisabeth Pecatte 1
Connexion occasionnelle : A partir du menu, "fichier"/gestionnaire des sites/nouveau site : insérer vos infos de connexion Le site est ensuite directement accessible depuis l'icône. Une fois connecté, vous allez placer les fichiers du TP précédent sur le serveur, à l'intérieur du dossier "html". Si vous n'avez pas ce dossier, il faut tout d'abord le créer. EXERCICE 2 Reprendre l exercice du premier TP sur la fiche de recette. Placer le fichier HTML sur le serveur. Créer un dossier CSS dans lequel vous mettrez votre feuille de style. Vous allez ajouter les différents identifiants, classes, sélecteurs et règles nécessaires pour obtenir le visuel ci-dessous. Quelques précisions vous sont données à la suite de l'image. Elisabeth Pecatte 2
Quelques indications : Couleur de l ensemble du texte : #333; Les titres de niveau sont en vert (écrire la valeur en hexadécimal) Elisabeth Pecatte 3
La police utilisée pour l ensemble du texte : Century Gothic, Helvetica, sans-serif. (voir fontfamily) Police pour le titre 2 : Broadway. Obtenez-vous le même affichage que ci-dessous? Pourquoi? Sur le site dafont.com, télécharger la police "bebas neue". Dézipper le fichier téléchargé, puis, sur le site fontsquirrel.com, utiliser le webfont generator. Dézipper le fichier obtenu. Sur le serveur, créer un dossier "font". Charger, dans ce dossier, les fichiers "bebasneue-webfont.eof", "bebasneue-webfont.svg", "bebasneuewebfont.ttf", "bebasneue-webfont.woff" A l'aide de @font-face, attribuer cette police aux titres de niveau 2 Pour les titres de niveau 1, installer une fonte google. Pour cela, sur le site https://www.google.com/fonts, choisir la fonte Oswald. Elisabeth Pecatte 4
Puis, cliquer sur use Choisir Normal 400, puis appliquer les instructions 3 et 4 à insérer dans l'entête du fichier HTML à utiliser dans la règle css pour le sélecteur h1 Vérifier l'affichage. Le titre1 est de taille 2em, le titre2 en 1.8em et petites majuscules. Les ingrédients sont également en petites majuscules. Les liens sont en orange, italiques et plus gras. Les lignes paires de la liste d ingrédient sont écrites en rouge, les autres items sont écrits en vert. Dans la partie «Préparation», ajouter des balises <strong> aux mots «cake» et «olives». (utiliser l'outil "Rechercher/Remplacer" de notepad++.) Apporter les modifications nécessaires pour afficher les balises en vert. Elisabeth Pecatte 5
Dans Firefox, modifier la taille par défaut du navigateur. (Options /options puis onglet "contenu"). Mettre par exemple, la taille par défaut à 26px. Enregistrer et visualiser dans le navigateur, votre fichier : remarquez la taille des caractères et celle de l'image. Remettre la taille initiale et zoomer la page à l'aide des touche (CTRL +) : remarquez la taille des caractères et celle de l'image. Que pouvez-vous conclure sur l'unité "em"? Elisabeth Pecatte 6