CRÉATION DE SITES INTERNET

Transcription

1 Institut d'enseignement de promotion sociale de la Fédération Wallonie-Bruxelles Arlon - Athus - Musson - Virton CRÉATION DE SITES INTERNET VIA UN SYSTÈME DE GESTION DE CONTENU Dominique Lieffrig

2 TABLE DES MATIÈRES ÉTUDE PRÉALABLE FAITES LE BILAN DE L EXISTANT ORGANISEZ VOTRE PLAN D ACTION INSTALLEZ LA STRUCTURE DU SITE INTERNET CRÉEZ DU CONTENU ET GÉREZ LA VIE DU SITE ORGANISEZ VOTRE PRÉSENCE EN LIGNE FAITES LA PROMOTION DE VOTRE SITE PENSEZ AU RÉFÉRENCEMENT AVEC UN SITE, ON N A JAMAIS FINI... 9 LES CMS (CONTENT MANAGEMENT SYSTEM) DÉFINITION QUELQUES CMS JOOMLA EN QUELQUES MOTS QU'EST-CE QUE JOOMLA? D OÙ VIENT CE NOM? LEXIQUE APACHE, PHP, MYSQL, JOOMLA: COMMENT S Y RETROUVER? JOOMLA EN LOCAL OU CHEZ UN HÉBERGEUR PRÉPARONS NOTRE ENVIRONNEMENT INSTALLER DIFFÉRENTS OUTILS Installer quelques outils de base (navigateurs, modules pour Firefox ) Installer WampServer Problème pouvant être rencontré lors de l installation de WampServer WampServer et sécurité CRÉER «UN SITE JOOMLA» EN LOCAL SE CONNECTER ET SE DÉCONNECTER DU BACKEND (PARTIE ADMINISTRATION) À FAIRE DIRECTEMENT APRÈS L INSTALLATION D UN NOUVEAU SITE JOOMLA Définir l éditeur par défaut Définir les valeurs par défaut de certains paramètres pour l éditeur JCE Le paramètre «Autoriser l accès à la racine» pour l éditeur JCE Quelques paramètres relatifs aux tableaux pour l éditeur JCE Définir les valeurs par défaut de certains paramètres pour les articles Définir les valeurs par défaut de certains paramètres pour les menus, les modules Ne pas indexer (référencer) le site Définir le nom du site, une description RETROUVER CERTAINES DONNÉES TECHNIQUES CONVENTIONS... 45

3 CAS N 1: PARTONS D'UN TEMPLATE (MODÈLE) EXISTANT SITE «CLUB DE MARCHE» PRÉSENTATION DU CONTEXTE GÉRER LES TEMPLATES Définition Installer un nouveau template (modèle) Définir le modèle utilisé par défaut Désinstaller un modèle Voir les positions disponibles dans un modèle GÉRER LES EXTENSIONS Définition Installer des extensions Voir les extensions installées Désactiver une extension Désinstaller une extension ENVOYONS QUELQUES IMAGES INTÉGRER DU CONTENU Gérer les articles Créer des articles Dépublier un article Supprimer un article Retrouver un article dans la Corbeille Paramètres divers concernant les articles Gérer l en-tête (header) Le logo Le diaporama (slideshow) Gérer la barre de menus Créer la barre de menus principale Créer un module pour afficher le menu principal Créer et publier un module en pied de page ALLONS UN PEU PLUS LOIN Appliquer une mise en forme au niveau des articles Intégrer une galerie photos dans un article Créer des catégories d articles Modifier certains articles existants et créer des articles supplémentaires Catégorie «Le Club» L article «Agenda» Ajouter des catégories d évènements et des évènements dans icagenda Créer/activer un module «icagenda» Insérer le module «icagenda» dans l article «Agenda» Créer un lien de menu de type «icagenda Liste des évènements» Catégorie «Infos utiles» Compléter le menu principal TRANSFÉRER UN SITE JOOMLA VERS UN ESPACE D HÉBERGEMENT Les données fournies par votre hébergeur

4 7.2 Transférer la base de données de votre serveur local vers votre espace d hébergement Créer une base de données dans l espace d hébergement Exporter la base de données de votre serveur local Importer la base de données dans la base située dans l espace d hébergement Ajouter un utilisateur ayant accès à la base de données Transférer les fichiers Adapter le fichier configuration.php Configurer le site mis en ligne SAUVEGARDE ET SÉCURITÉ DE VOTRE SITE WEB LA SÉCURITÉ: APERÇU GLOBAL Sauvegarde, sauvegarde, sauvegarde Effectuer les mises à jour Mots de passe N'installez que les extensions utiles Ne pas utiliser les sites «warez» Choisissez un bon hébergeur Droits sur les dossiers et fichiers Extensions tierces aesecure AdminTools Autres extensions SAUVEGARDER, DÉPLACER, RESTAURER UN SITE Sauvegarder à l'aide du composant Akeeba Backup Téléchargement et installation d'akeeba Backup Akeeba Backup configuration post-installation Sauvegarder votre site avec Akeeba Backup Transfert d'une sauvegarde Akeeba sur votre disque Restauration de vos sauvegardes Akeeba avec Akeeba Kickstart Création d'une base de données Extraction des données de la sauvegarde Sauvegarde manuelle SÉCURISER VOTRE SITE WEB EN PRATIQUE CONCLUSION CAS N 2: RENFORCEMENT SITE «CARNETS DE VOYAGES» PRÉSENTATION DU CONTEXTE METTRE EN PLACE LA BASE DU SITE CRÉER LE FORMULAIRE «DE DEMANDE POUR DEVENIR RÉDACTEUR» ET GÉRER LES SOUMISSIONS GÉRER LE MENU CRÉER LES MODULES MANQUANTS NE PAS AUTORISER LES INSCRIPTIONS DE NOUVEAUX UTILISATEURS À PARTIR DU SITE GÉRER LES RÉDACTEURS DU SITE Créer un nouveau groupe d utilisateurs

5 7.2 Créer un niveau d accès pour le groupe «Rédacteurs_Carnets» Créer de nouveaux utilisateurs dans le groupe «Rédacteurs_Carnets» Donner les droits voulus aux utilisateurs du groupe «Rédacteurs_Carnets» Prévoir des entrées de menus pour les rédacteurs Créer une entrée de menu «Proposer un article» Créer une entrée de menu «Liste des articles» Activer JCE Editor pour la gestion des articles dans le frontend Très important à savoir par rapport à la gestion des soumissions d articles par des tierces personnes et ce via les fonctions natives de Joomla SAUVEGARDER LE SITE ET TRANSFÉRER LE SITE CHEZ UN HÉBERGEUR HTML HTML ET CSS: DEUX LANGAGES INCONTOURNABLES Les rôles de HTML et CSS Les différentes versions de HTML et CSS Les versions de HTML Les versions de CSS LES BALISES ET LEURS ATTRIBUTS Les balises Les balises en paires Les balises orphelines Les attributs Liste des balises Balises de premier niveau Balises d'en-tête Balises de structuration du texte Balises de listes Balises de tableau Balises de formulaire Balises «sectionnantes» Balises génériques LES PARAGRAPHES LES TITRES MISES EN FORME DE BASE Mettre en valeur Mettre un peu en valeur Mettre bien en valeur Marquer le texte N'oubliez pas: HTML pour le fond, CSS pour la forme LES LISTES Liste non ordonnée Liste ordonnée En résumé LES LIENS Un lien vers un autre site

6 7.2 Un lien vers une ancre Cas pratiques d'utilisation des liens Un lien qui affiche une infobulle au survol Un lien qui ouvre une nouvelle fenêtre Un lien pour envoyer un Un lien pour télécharger un fichier En résumé LES IMAGES Les différents formats d'images Savez-vous ce qu'est un format d'image? Le JPEG Le PNG Le GIF Il existe un format adapté à chaque image Les erreurs à éviter Insérer une image Insertion d'une image Ajouter une infobulle Miniature cliquable Les figures Création d'une figure Bien comprendre le rôle des figures En résumé LE LANGAGE HTML PAR LA PRATIQUE Site concernant des plantes, des techniques de culture Installation du site Utiliser des balises HTML au sein des articles Les balises <h1>, <h2>, <p>, <br />, <em>, <strong>, <u>, <ul>, <li> En utilisant la barre d outils de l éditeur JCE Encoder le code source directement (le code est fourni) Encoder le code source directement (le code n est pas fourni) Les balises <h1>, <h2>, <p>, <br />, <strong>, <mark>, <ol>, <li> En utilisant la barre d outils de l éditeur JCE Encoder le code source directement (le code est fourni) Encoder le code source directement (le code n est pas fourni) Les balises <h1>, <table>, <tr>, <td>, <a> (liens externes) En utilisant la barre d outils de l éditeur JCE Compléter l article en insérant directement le code source voulu Les balises <h1>, <table>, <tr>, <td>, <a> (liens internes) En utilisant la barre d outils de l éditeur JCE Compléter l article en insérant directement le code source voulu Les balises <h1>, <h2>, <p>, <img> En utilisant la barre d outils de l éditeur JCE Compléter l article en insérant directement le code source voulu Associons les balises <img> et <a> En utilisant la barre d outils de l éditeur JCE Compléter l article en insérant directement le code source voulu

7 Exerçons-nous Les balises <h1>, <p>, <br />, <span>, <div>, <strong> En utilisant la barre d outils de l éditeur JCE Encoder le code source directement (le code est fourni) Compléter les articles, le menu CSS APPROCHE GÉNÉRALE Présentation Où les styles peuvent-ils être insérés? Dans un fichier.css (recommandé) Dans l'en-tête <head> du fichier HTML Directement dans les balises (non recommandé) Et Joomla dans tout cela? Appliquer un style à une balise Appliquer un style en utilisant les attributs class ou id Appliquer un style: les sélecteurs avancés En résumé FORMATAGE DU TEXTE À L AIDE DE STYLES Introduction La taille Une taille absolue Une valeur relative La police Modifier la police utilisée Utiliser une police personnalisée Italique, gras, souligné Mettre en italique Mettre en gras Soulignement et autres décorations L alignement Les flottants Faire flotter une image Stopper un flottant En résumé LA COULEUR ET LE FOND Introduction Couleur du texte Indiquer le nom de la couleur La notation hexadécimale La méthode RGB Couleur de fond Le CSS et l'héritage Exemple d'héritage avec la balise <mark> Images de fond Appliquer une image de fond

8 3.4.2 Options disponibles pour l'image de fond Combiner les propriétés Plusieurs images de fond La transparence La propriété opacity La notation RGBa En résumé LES BORDURES ET LES OMBRES Bordures standard Bordures arrondies Les ombres En résumé APPARENCES DYNAMIQUES Gestion des survols Gestion des clics et des sélections En résumé LE LANGAGE CSS PAR LA PRATIQUE Effectuer une copie du template Modifier un template en n intervenant pas directement dans le code Modifier un template en intervenant dans le code CSS Modifier la taille, la couleur, la police des caractères Modifier la couleur de fond Définir une image de fond Créer des bordures Gérer les survols Actions diverses CAS N 4: RENFORCEMENT SITE «LES ARBRES» APERÇU DU SITE PRÉPARER LES IMAGES METTRE EN PLACE LA BASE DU SITE CHARGER LES IMAGES DANS LE SITE PRÉPARER LA GALERIE PHOTOS AVEC PHOCA GALLERY Créer une catégorie «Galerie - Arbres» Ajouter les images CRÉER LES CATÉGORIES ET LES ARTICLES COMPLÉTER, GÉRER LE MENU CONFIGURER L AGENDA ET INSÉRER DES ÉVÉNEMENTS CONFIGURER LES ÉLÉMENTS VOULUS POUR LES RECHERCHES CRÉER LE FORMULAIRE D INSCRIPTION À LA NEWSLETTER CRÉER, GÉRER LES MODULES COMPLÉTER CERTAINS ARTICLES MODIFIER QUELQUES STYLES CSS Effectuer une copie du template «projecto» Aligner le logo à gauche avec les autres éléments de la page

9 13.3 Réduire la hauteur du menu Modifier l alignement des commandes présentes dans les menus «ESSENCES», «BOTANIQUE» et «VIDÉOS» Modifier la hauteur du bouton «Recherche» Sauvegarder le site Transférer le site vers un espace d hébergement «externe»

10 ÉTUDE PRÉALABLE 1

11 1 Faites le bilan de l existant 01. Cadrez le sujet Réfléchissez bien au site web que vous voulez créer, et pourquoi vous souhaitez le faire. 02. Listez les documents, fichiers déjà en votre possession: textes, photos, vidéos Pour créer votre site, vous allez pouvoir vous appuyer sur un certain nombre de contenus que vous avez déjà ou que vous devrez créer. Rassemblez tout l existant. 03. Cherchez des informations complémentaires sur votre problématique Il n y a désormais plus aucun sujet dont on ne parle pas quelque part sur Internet. Pour savoir ce que l on dit de vous, de votre produit, de votre service, de votre association, de votre club, de votre hôtel, de votre ville, de votre thème, effectuez des recherches grâce aux moteurs de recherche et autres outils. Sachez donc utiliser les requêtes avancées de Google. 04. Si cela se justifie, analysez votre marché et vos concurrents Dans la thématique de votre site, s il y a déjà des concurrents qui ont un site et le font vivre. Listez-les, suivez ce qu ils font. - Analyse de la concurrence: votre marché est-il peu ou très concurrentiel? Cette analyse vous permettra de connaître vos concurrents sur la toile qui sont parfois différents de vos concurrents dans la réalité. Analysez leur positionnement, et leur stratégie (comment se positionnent vos concurrents et que font-ils sur Internet?) vous aidera dans la mise en place de la vôtre. - Analyse du trafic Vous pouvez également faire une estimation du volume de recherches effectuées dans les moteurs de recherches sur des mots clés correspondants à votre activité. Vous pourrez ainsi estimer la part de marché que vous souhaitez acquérir sur votre activité sur les trois premières années par exemple. 05. Listez vos forces et faiblesses Faites une (rapide) analyse SWOT (Strengths (forces), Weaknesses (faiblesses), Opportunities (opportunités), Threats (menaces)) pour bien avoir en tête vos atouts et vos points faibles (techniques, humains, financiers, temps disponible, etc.). Décidez en connaissance de cause si vous y allez ou non. 06. Identifier ses cibles Vous devez identifier les cibles que vous souhaitez atteindre avec votre site Internet. Est-ce un site Internet BtoC (vous vous adressez aux consommateurs finaux directement: aux particuliers) ou est-ce un site internet BtoB (business to business, vous vous adressez aux professionnels uniquement)? Vous pouvez aussi identifier des catégories d'internautes cibles (classes d'âge, catégories professionnelles ). Il faut aussi prendre en compte le fait que votre activité concerne un public local, régional, national ou international (site multilingue). Pendant toute la durée de création et de promotion de votre site Internet, n'oubliez pas qui sont vos cibles. Adaptez le contenu de votre site Internet ainsi que vos actions de promotion aux besoins de vos cibles. 2

12 2 Organisez votre plan d action 01. Ecrivez votre stratégie Mettez noir sur blanc votre vision du projet. Définissez précisément l objectif principal de votre site et quelques sous-objectifs. Cela vous aidera à ne pas vous éparpiller par la suite. 02. Listez vos contenus Grâce à votre site, vous allez aborder un très grand nombre de sujets dans vos articles. Listez toutes vos idées. Elles peuvent concerner tout ce dont vous souhaitez parler, indiquez surtout ce qui intéresse les futurs visiteurs du site. Définissez le plan du site, listez toutes les rubriques et pages que vous souhaitez créer. N oubliez pas d indiquer l objectif de chaque page (un seul objectif par page). Avec ce que vous avez déjà en votre possession, commencez à répartir les contenus et imaginez la manière avec laquelle ce qui manque peut être créé. 03. Listez les tactiques C est le moment de lister toutes vos idées qui vont vous permettre d atteindre les objectifs. Cela peut concerner par exemple le marketing, la vente, les partenaires potentiels que vous souhaitez contacter, etc. Bâtissez un calendrier avec toutes ces actions. 04. Eteignez votre ordinateur et prenez une feuille blanche À l aide d un crayon, dessinez votre site idéal, en essayant d imaginer la structure des pages et la manière avec laquelle l internaute va accéder à vos contenus. Ajoutez tout ce que vous souhaitez, puis simplifiez et simplifiez encore. 05. Réalisez un cahier des charges Un cahier des charges vise à définir exhaustivement les «spécifications de base» de votre site Internet à réaliser. Le cahier des charges sert à formaliser les besoins et à les expliquer aux différents acteurs pour s'assurer que tout le monde est d'accord. En réalisant le cahier des charges, vous allez pouvoir visualiser l'ensemble des pages et sous-pages de votre site Internet mais aussi lister l'ensemble des fonctionnalités dont vous aurez besoin sur votre site (par exemple moteur de recherche interne, module de paiement, backoffice (pour modifier vous-même certains contenus du site), module d'inscription à une newsletter, formulaire de contact...). Le cahier des charges vous permettra de bien définir et cerner votre projet, ne le négligez pas, il est primordial. Si vous faites appel à un prestataire externe pour créer le site, ce cahier des charges servira à sélectionner votre prestataire (dans le cas d'un appel d'offres) car vous allez leur soumettre votre cahier des charges afin qu'ils puissent effectuer des devis chiffrés. Si vous n'avez pas le temps de travailler sur le cahier des charges, vous pouvez demander à votre prestataire de le rédiger pour vous, mais prenez soin à bien le lire et le comprendre avant de le valider. Le cahier des charges définit le temps de développement et le prix que cela va vous coûter. Une fois qu'il est validé, il est très difficile voire coûteux de faire marche arrière. 3

13 En résumé, nous retrouverons dans ce cahier des charges: une étude technique et détaillée du projet et de ses fonctionnalités, le choix de la solution technique à utiliser (CMS Open Source, développement sur mesure), la stratégie de référencement (naturel - payant), la définition de l'arborescence et des rubriques du site, le plan d'hébergement + nom de domaine + garantie technique + maintenance, le délai de réalisation un échéancier. 06. Définissez un budget Comme pour la création d'une entreprise, la création d'un site Internet nécessite de mettre en place un business plan. Même un «petit site» a un coût et il vaut mieux l'anticiper. Définissez le budget que vous souhaitez allouer à votre site Internet, vous pouvez ensuite le décomposer en: coûts de création du site Internet (développement), coûts de nom de domaine (coût annuel) et d'hébergement (coût mensuel ou annuel), coûts de maintenance et de mises à jour, coûts de référencement (si vous passez par une agence web ou cabinet de référencement) = coûts annuels ou mensuels, coûts de promotion de votre site web, 07. Effectuez un choix: externaliser ou internaliser la création du site Internaliser la création du site Internet consiste à intégrer son développement au sein de votre entreprise avec votre équipe de collaborateurs internes. Attention, les compétences pour la création d'un site Internet sont diverses, vous aurez besoin: d'un graphiste, d'un intégrateur (html, css). Il va créer une maquette fonctionnelle en se basant sur la maquette graphique. Cette maquette fonctionnelle permet d avoir un rendu réel du site dans un navigateur, mais les contenus sont factices. Il s agit du squelette. d'un développeur web (php, java, ou.net), d'un référenceur. Avantages de l'internalisation: vous maîtrisez tout le projet de A à Z, la maintenance et les évolutions seront simplifiées. Inconvénients de l'internalisation: vous êtes seul responsable de la bonne mise en route du site et du timing de réalisation (ceci dit, cela peut parfois devenir un avantage), il est difficile de rassembler toutes les compétences voulues. Externaliser la création de votre site Internet consiste à confier la réalisation de votre projet à des professionnels (agence web, agence de référencement...) 4

14 Avantages de l'externalisation: vous confiez votre projet à des professionnels qui ont une très bonne expertise et un retour d'expérience important sur la création de site Internet, le risque de retard de réalisation est pris en charge par l'agence web, l'agence possède au sein de ses équipes, des graphistes, des développeurs, des référenceurs... toutes les compétences nécessaires pour la bonne réalisation de votre projet. Inconvénients de l'externalisation: tout votre projet est dans les mains d'un tiers, le coût de développement peut être très élevé, la maintenance et l'évolution de votre site Internet auront un coût puisque vous devrez passer par le prestataire pour les réaliser (il est conseillé de négocier à l'avance les modalités de maintenance et d'évolutions). 08. Créez la charte graphique - Web Design Partez à la recherche d une identité visuelle: définition de l'univers graphique (couleurs, typos, logos...). Réalisation de maquettes graphiques personnalisées et validation. 3 Installez la structure du site internet 01. Choisissez et achetez un nom de domaine Très important, le nom de domaine: il ne faut pas négliger cette étape. Si votre site est une marque, alors vous pouvez/devez prendre le nom de cette marque si le domaine est disponible. Sinon le choix de votre nom de site est primordial: choisissez un nom de domaine qui soit: simple à retenir pour vos internautes, facilement identifiable, pas trop long, idéalement, un nom de domaine doit comporter un mot ou des mots-clés représentatifs de votre activité, facilement référencé par les moteurs de recherche (si le mot-clé principal peut être inclus dans le nom de domaine c'est mieux!), un minimum «marketable»! Pensez toujours à vérifier que ce nom de domaine soit disponible avec les extensions qui vous intéressent. 02. Choisissez une solution de gestion de contenu Dans le présent cours, c est Joomla qui sera utilisé. 03. Choisissez une solution d hébergement Une fois votre site «terminé», il vous faut trouver un hébergeur afin que votre site soit «en ligne». Vous pouvez internaliser l'hébergement de votre site si vous possédez des serveurs et une équipe capable d'intervenir sur ceux-ci. 5

15 Avantages: pas de coûts supplémentaires, possibilité de faire évoluer l'architecture avec les besoins du site. Inconvénients: nécessite des équipes disponibles 24h/24h afin d'avoir un service continu et de qualité (éviter des coupures de votre site), exige des compétences techniques très pointues, vous êtes responsable de la sécurité des serveurs qui pourraient être utilisés, par exemple, par des spammeurs Vous pouvez également externaliser l'hébergement de votre site Internet chez un hébergeur professionnel soit sur des serveurs mutualisés soit sur des serveurs dédiés. Avantages: les équipes de l'hébergeur interviennent 24h/24h sur les machines et garantissent un fonctionnement continu de votre site Internet, les serveurs sont préconfigurés ce qui permet de gagner du temps, dans le cas de serveurs mutualisés, le coût est faible. Inconvénients: sur un serveur mutualisé, vous partagez le serveur avec d'autres clients donc pas de possibilité de garantir la performance et la disponibilité du serveur, pour le serveur dédié, le coût est assez élevé. Si vous êtes un particulier, il ne faut pas hésiter, passez par un hébergeur externe. 04. Installez le CMS (Content Management System système de gestion de contenu) choisi sur votre hébergement Cette installation peut se faire une fois que le site aura été développé en local. On peut également décider de travailler directement en ligne. Cette solution est intéressante si plusieurs personnes travaillent sur le projet. 05. Paramétrez la configuration initiale du site Une fois le site créé, il y a un certain nombre de paramètres à définir si ce n est déjà fait: titre du site, description du site, fuseau horaire, demander ou non l indexation des pages par les moteurs de recherche, implémenter des outils de statistiques, mettre en place des techniques permettant d améliorer la sécurité, mettre en place une stratégie de sauvegarde. Tout cela sera vu de manière détaillée dans la suite du cours 06. Configurez un compte pour accéder notamment à Google Analytics et aux autres outils destinés aux webmasters (Google Webmaster Tools) Google Analytics est l'outil d'analyse du trafic web de référence pour les éditeurs de sites internet, les responsables marketing et les référenceurs. Gratuit (pour une partie) et simple d'utilisation, il est également accessible aux utilisateurs novices. Il leur permet 6

16 de suivre au jour le jour l'évolution des visites ou des pages web consultées sur leur site, et fournit des informations précieuses pour le référencement naturel, l'optimisation de la navigation et pour suivre le comportement des visiteurs d'un site. 4 Créez du contenu et gérez la vie du site Une fois que vous aurez fait tous ces réglages, il vous faut créer du contenu. Vous allez: créer des articles et ajouter du texte, des images, des vidéos, etc. créer des formulaires, mettre des documents téléchargeables à disposition, Relisez, corrigez les fautes (faites relire si possible). Vérifiez que tout apparaît correctement en ligne et ce avec plusieurs navigateurs et éventuellement plusieurs appareils: ordinateurs, tablettes, smartphones Une fois que le site sera finalisé et en ligne, n oubliez pas de permettre aux moteurs de recherche d indexer celui-ci. 5 Organisez votre présence en ligne Faites la promotion de votre site Au-delà de votre seul site Internet, vous allez devoir développer votre écosystème web en organisant votre présence en ligne. Il y a des milliers de sites et d applications utiles. Voici quelques idées: Créez votre profil Google+ Ouvrez une page YouTube pour vos vidéos (Dailymotion, Vimeo peuvent également être utilisés). Utilisez Google Analytics. Créez votre fiche sur Google Maps. Partagez des photos sur Panoramio (ou Flickr). Utilisez Google Trends qui vous donne la tendance des recherches sur le web. Créez une page Fan Facebook, créez un compte Twitter. Si vous n en avez pas besoin tout de suite, réservez au moins le nom qui vous correspond. Autres éléments à ne pas oublier pour faire la promotion de votre site gratuitement: Communiquez l'adresse de votre site Internet sur tous vos supports papiers. Ajoutez l'adresse de votre site dans la signature de vos mails, sur vos courriers, sur vos factures, sur vos plaquettes commerciales, sur vos dépliants Mentionnez l'existence de votre site Internet sur votre messagerie de téléphone surtout si les personnes peuvent y trouver des réponses à leurs questions. N'oubliez pas d'indiquer l'adresse de votre site sur les publicités offlines: dans vos annonces «presse», catalogues, ou encore annonces «radio», «télé». Faites des échanges de bons procédés avec vos partenaires, échangez des liens avec les sites Internet de vos partenaires ou faites la promotion mutuelle de vos services surtout s'ils sont complémentaires. 7

17 La promotion payante: Il existe également plusieurs leviers de promotion d'un site Internet appelés plus généralement les leviers webmarketing. En voici quelques exemples: Le référencement payant ou achat de liens sponsorisés Surtout lors de la création d'un site qui n'est pas encore référencé naturellement, la mise en place de campagnes de liens sponsorisés permet de vous positionner en première page de résultats des moteurs de recherche sur les mots-clés qui vous intéressent. Il existe trois acteurs majeurs sur le marché: Google, Bing et Yahoo, mais Google avec Google Adwords est de loin le plus important puisqu'il détient plus de 90% des parts de marché des moteurs de recherche. Une campagne de liens sponsorisés doit être optimisée et suivie quotidiennement. Demandez conseil à une agence web ou à un cabinet de référencement. L' ing L' ing consiste à l'envoi d'un courrier électronique à un plus ou moins grand nombre d'internautes. Une campagne d' ing a généralement pour but de promouvoir un produit ou un service, ou à informer les lecteurs abonnés à votre newsletter. Attention, il existe des règles à respecter dans le cadre d un mailing. L'achat d'espaces publicitaires L'achat d'espaces publicitaires consiste à acheter des espaces sur des sites tiers (dont la cible vous intéresse) afin d'y afficher votre publicité. Vous faites ainsi la promotion de votre site sur un site tiers. Passez par des régies publicitaires qui détiennent un portefeuille de sites qui pourront vous intéresser... L'affiliation L'affiliation consiste à entrer dans un programme par lequel vous rémunérez via une commission les sites partenaires qui en établissant des liens vers vos produits ou votre site, vous apporteront du trafic, des ventes... L'affiliation se fait par le biais de plateformes d'affiliation. 6 Pensez au référencement Le référencement de votre site internet est la clé de la réussite de celui-ci! Un site non référencé est un site invisible! Le trafic d'un site Internet dépend énormément de la qualité de son référencement, s'il est mal référencé sur les moteurs, il est presque certain que les internautes ne le trouveront pas. La qualité du référencement de votre site se traduit donc par un bon positionnement dans les pages de résultats des moteurs de recherche. Le référencement d'un site commence dès la création de celui-ci, il s'agit d'un travail d'optimisation. Afin d assurer cette optimisation, il est vivement conseillé d installer un outil de tracking. Sur Internet tout peut être tracké / tracé! Les outils de tracking permettront: de quantifier vos visiteurs (nombre de visites, nombre de pages vues, temps passé sur le site...), d'analyser le comportement de vos visiteurs une fois sur le site (quelles pages sont les plus visitées, nombre de formulaires remplis, nombre de ventes réalisées ), de comprendre d'où viennent vos visiteurs (zone géographique, moteur de recherche utilisé, trafic direct, actions de promotions...), 8

18 de connaître les types d appareils utilisés pour visiter votre site, de quantifier le retour des actions de promotion réalisées. L'outil web d analyse le plus reconnu sur le marché est celui de Google appelé Google Analytics. Il est gratuit (en partie) et très complet et a déjà été cité dans les pages qui précèdent. Les données émanant de tels outils vous permettront d'optimiser votre site de manière à ce que celui-ci soit efficace. Ces outils d'analyse vous permettent également d'identifier quelles sont les actions de promotion mises en place les plus rentables. Un chapitre complet du cours sera consacré au référencement. 7 Avec un site, on n a jamais fini Un site demande un travail régulier et fréquent: Suivi du bon fonctionnement - Correctifs Évolutions Formation des personnes susceptibles d effectuer des mises à jour sur le site Sauvegarde du site internet et des bases de données Animation - Fidélisation - Actions marketing - Newsletter - ing - Campagne de promotion Une partie des notions reprises dans cette rubrique «Étude préalable» sont extraites du site Elles ont parfois été modifiées, complétées, restructurées. 9

19 LES CMS (CONTENT MANAGEMENT SYSTEM) 10

20 1 Définition L'acronyme anglais CMS signifie «Content Management System». En français, nous traduirons cela par «Système de Gestion de Contenu». Cela désigne une famille d'applications permettant d organiser et de gérer intégralement l apparence et le contenu de votre site web. Via ces outils, les mises à jour de contenu pourront être réalisées très facilement. Par «contenu», il faut entendre: textes, images, vidéos Les CMS peuvent être utilisés sans connaissances préalables en programmation. Il faut cependant bien noter que quelques connaissances en langage HTML et CSS peuvent s avérer extrêmement utiles. En général, une interface web intuitive permet à l'administrateur de gérer le site web. C'est ainsi que ces systèmes sont souvent utilisés par les organisations qui souhaitent un site web non-statique, dont l'ajout de contenu est facile. Dans le cas d un hébergement externe, puisque l'ensemble du contenu est directement sur l'espace d'hébergement (et non sur un ordinateur personnel) cela permet de pouvoir accéder au site depuis n'importe quel ordinateur (ou autre appareil) relié à Internet afin notamment d effectuer des mises à jour. 2 Quelques CMS De très nombreux CMS sont disponibles sur le marché. En voici quelques-uns. Drupal Très célèbre, il s installe et s utilise facilement. Drupal se distingue par un code source apprécié des développeurs. Si vous prévoyez de personnaliser le fonctionnement de Drupal, vous serez heureux de vous baser sur un code facile à modifier et robuste (les dernières versions exploitent le framework web Symfony2 apprécié des développeurs). Des connaissances en HTML / CSS, PHP et Symfony2 vous seront très utiles pour créer vos propres extensions. Joomla! C est l un des CMS les plus célèbres avec Drupal et Wordpress. Joomla est très simple à installer et à utiliser. Sa communauté d utilisateurs est dynamique, ce qui est un point important à vérifier quand on utilise un CMS open source. NB: le point d'exclamation après le nom fait partie de la marque commerciale ce n est pas une expression de surprise à chaque fois que nous l'utilisons. Afin de faciliter la lecture, dans les notes qui suivent, le point d exclamation ne sera pas repris. SPIP SPIP est un CMS français, ce qui explique certainement qu il soit si répandu dans l'hexagone, notamment dans les administrations, universités et associations. Facile à installer et assez simple d usage dans la pratique, il manque cependant de notoriété et dispose d un nombre d extensions restreint. TYPO3 C est le plus ancien des CMS de cette liste (lancé en 1997!). Il est toujours activement maintenu, bien qu en perte de vitesse comparé à Wordpress, Joomla et Drupal. Typo3 est puissant et très modulaire, mais reste réservé à des utilisateurs avancés et sa configuration peut se révéler particulièrement complexe. 11

21 WordPress Wordpress est un outil très utilisé pour la création de sites web. Pourtant, à la base, Wordpress n est pas prévu pour créer des sites complets, mais est un moteur de blog, qui permet de publier des billets d actualité. Si Wordpress est aujourd hui tout à fait capable de se comporter comme un CMS, on sent par contre toujours qu il s agit plutôt d un moteur de blog à l origine. Il est simple à utiliser et suivi par une très grande communauté active, qui fournit une impressionnante quantité d extensions à télécharger. Quand il s agit de créer un blog ou un petit site très simple, Wordpress est rapide à mettre en place. 12

22 JOOMLA EN QUELQUES MOTS 13

23 1 Qu'est-ce que Joomla? Joomla est un système de gestion de contenu (en anglais, CMS, pour Content Management System) créé par une équipe internationale de développeurs récompensée à maintes reprises, celle-là même qui a hissé Mambo vers les sommets. Joomla est un CMS Open Source distribué sous licence GNU/GPL 1 (gratuit) avec lequel vous pourrez mettre en ligne du contenu et mettre à disposition de vos visiteurs des services (forum, boutique en ligne, galerie photos, etc.), le tout sans connaissance technique particulière. 2 D où vient ce nom? Joomla est la transcription phonétique d'un mot swahili qui signifie "tous ensemble", ou encore "en un tout". Ce nom a été choisi parmi les milliers de propositions faites par la communauté, il a même été passé au banc d'essai par des professionnels du marketing et des marques, convaincus eux aussi que Joomla était le meilleur choix. Ce qui rend Joomla différent, c'est l engagement des créateurs et gestionnaires à le rendre aussi simple que possible, tout en offrant un maximum de fonctionnalités. Au final, des non techniciens pourront parfaitement gérer eux-mêmes leur site, sans être obligés de passer par des solutions propriétaires aux coûts exorbitants. Joomla, ce n'est pas seulement une application, ce sont aussi des personnes. La communauté Joomla est composée de développeurs, de designers, d'administrateurs systèmes, de traducteurs, de rédacteurs et, le plus important, d'utilisateurs finaux. 3 Lexique Source: ACL Le système ACL (Access Control List) de Joomla regroupe les droits et accès des utilisateurs du site. C'est grâce à ce système que vous pouvez décider qui voit quoi et qui peut faire quoi, aussi bien dans la partie backend que frontend de votre site. Administration L'administration ou backend est la partie cachée du site. C'est ici que les administrateurs organisent le site, gèrent le contenu, les modules, les modèles, les utilisateurs... Vous pouvez accéder à l'administration de votre site à l'adresse Alias Les alias dans Joomla sont utilisés pour définir les URL (Uniform Ressource Locator: adresse d une page web) simplifiées qui mèneront à chacun de vos articles. Ces alias sont définissables dans les menus et dans les articles. Les alias peuvent être définis automatiquement par Joomla, il est cependant conseillé de les définir soi-même afin d obtenir des éléments qui soient les plus explicites possibles et qui puissent améliorer le référencement. 1 Le terme GNU/GPL désigne le type de licence d'utilisation le plus en vigueur dans le monde du logiciel libre (opensource). Cette licence permet notamment d'utiliser un logiciel librement, de le modifier, de le redistribuer et de mettre en circulation des versions du logiciel améliorées, en conservant à celui-ci le même type de licence d'utilisation. 14

24 Article Un article est une entité contenant du texte, des images, des vidéos, des liens (dirigeant vers d'autres articles du site ou sur des sites externes)... Un article peut être placé dans une catégorie. Afin de faciliter la rédaction des articles, Joomla est doté d'un éditeur WYSIWYG (What you see is what you get, signifiant littéralement en français «ce que vous voyez est ce que vous obtenez»). Il est possible de créer/modifier/gérer les articles par l'administration du site. Selon, les droits dont vous héritez, il est également possible de modifier ces articles depuis le frontend du site. Backend Le backend, ou l'administration, est la partie cachée du site. C'est ici que les administrateurs organisent le site, gèrent le contenu, les modules, les templates, les utilisateurs... Vous pouvez accéder au backend de votre site à l'adresse Catégorie Dans Joomla, une catégorie est une collection d'articles. Les catégories peuvent s'imbriquer entre elles à l'infini. Désormais, une catégorie peut contenir des articles et/ou des catégories. CSS CSS (Cascading Style Sheets : feuilles de style en cascade) est un langage informatique qui sert à décrire la présentation des documents HTML. Editeur Un éditeur WYSIWYG (What You See Is What You Get) est une extension vous permettant de mettre en forme votre texte. Grâce à lui, vous tapez votre texte, vous soulignez, donnez des couleurs, des puces, créez des liens... et le code HTML correspondant se crée automatiquement. Joomla comporte nativement l'éditeur TinyMCE. D autres éditeurs sont disponibles. Extension Joomla est un CMS nativement riche en fonctionnalités, mais si vous construisez un site avec Joomla et que vous avez besoin de fonctionnalités non présentes par défaut, vous pourrez facilement l'étendre en y installant des extensions. Il existe différents types d'extensions sous Joomla: les Modules, les Plugins, les Templates et les Langues. Chacune de ces extensions gère une fonctionnalité bien spécifique. Frontend À l inverse du backend, le frontend est la partie publique du site. C'est la partie à laquelle les internautes ont accès. FTP (client) Un client FTP (File Transfer Protocol) est un logiciel vous permettant de transférer vos dossiers et fichiers de votre ordinateur vers votre hébergeur et inversement. Lors d'une sauvegarde d'un site, vous devez sauvegarder la base de données ET les dossiers et fichiers. Comme client FTP gratuit, compatible Mac, Windows, Linux, et facile d'utilisation, on peut par exemple citer Filezilla. GNU/GPL GNU: Le nom du projet GNU provient d'un acronyme récursif «GNU is Not UNIX» ("GNU ce n'est pas UNIX"). UNIX était un système d'exploitation très répandu dans les années 80, pour cette raison, Richard Stallman a conçu GNU de sorte qu'il soit très compatible avec UNIX pour permettre une migration aisée vers GNU. Ce nom permet de reconnaître que GNU présente des 15

25 similitudes avec UNIX, mais il met également en avant que ces deux systèmes n'ont pas de liens de parenté directe. À l'inverse d'unix, GNU est un Logiciel Libre. NB: le logo du projet GNU est une tête de gnou. GPL: General Public License Le terme GNU/GPL désigne le type de licence d'utilisation le plus en vigueur dans le monde du logiciel libre (open source). Cette licence permet notamment d'utiliser un logiciel librement, de le modifier, de le redistribuer et de mettre en circulation des versions du logiciel améliorées, en conservant à celui-ci le même type de licence d'utilisation. Langue Les Langues sont certainement les extensions les plus basiques. Les fichiers de langues peuvent être packagés de deux manières différentes, soit comme un pack de fichiers de langue pour le noyau de Joomla, soit comme un pack de fichiers de langue pour une extension. Ces fichiers sont essentiellement des clés/valeurs ou des chaînes de caractères. Ces chaînes de caractères permettent la traduction des textes statiques qui sont assignés avec le code source de Joomla. Ces packs de langue affecteront aussi bien le frontend que le backend. Mise à jour L'équipe Joomla travaille en permanence sur l'amélioration du CMS. Régulièrement, des bugs et/ou des failles de sécurité sont découverts. Joomla met donc rapidement à disposition une mise à jour. Depuis Joomla 2.5, ces mises à jour sont réalisables en quelques clics depuis l'administration de votre site. Avant chaque mise à jour, il est vivement conseillé de faire une sauvegarde complète du site. Javascript Javascript est un langage de script principalement utilisé dans les pages HTML. À l'opposé des langages serveurs (qui s'exécutent sur le site), Javascript est exécuté sur l'ordinateur de l'internaute par le navigateur lui-même. Ainsi, ce langage permet une interaction avec l'utilisateur en fonction de ses actions (lors du passage de la souris au-dessus d'un élément, du redimensionnement de la page...). HTML L'HTML est un langage informatique utilisé sur l'internet. Ce langage est utilisé pour créer des pages web. L'acronyme signifie HyperText Markup Language, ce qui signifie en français "langage de balisage d'hypertexte". Ce n'est pas à proprement parlé un langage de programmation, mais plutôt un langage qui permet de mettre en forme du contenu. Les balises permettent de mettre en forme le texte et de placer des éléments interactifs, tel des liens, des images ou bien encore des animations. Ces éléments ne sont pas dans le code source d'une page codée en HTML mais "à côté" et la page en HTML ne fait que reprendre ces éléments. Pour visualiser une page en HTML il est nécessaire d'utiliser un navigateur web. Modèle Cf. «Template». 16

26 Module Les modules sont des extensions légères et flexibles utilisées pour le rendu des pages. Ces modules peuvent être comparés à des «boîtes» permettant l affichage d un grand nombre d éléments constituant une page. Nous utiliserons des modules pour: afficher un diaporama, afficher un menu, afficher un contrôle de connexion, afficher un formulaire à compléter, afficher une zone contenant la météo, PHP Le PHP est un langage informatique utilisé sur l'internet. Le terme PHP est un acronyme récursif de "Hypertext Preprocessor". Ce langage est principalement utilisé pour produire un site web dynamique. Il est courant que ce langage soit associé à une base de données, telle que MySQL. Exécuté du côté serveur (l'endroit où est hébergé le site), les visiteurs ne doivent pas avoir de logiciels ou de plugins particuliers. Néanmoins, les webmasters qui souhaitent développer un site en PHP doivent s'assurer que l'hébergeur prend en compte ce langage. Lorsqu'une page PHP est exécutée par le serveur, alors celui-ci renvoie généralement au client (aux visiteurs du site) une page web qui peut contenir du HTML, XHTML, CSS, JavaScript. Plugin Un Plugin est un type d'extensions pour Joomla. Les Plugins proposent des fonctionnalités associées à des événements déclencheurs. Joomla propose nativement un ensemble d'événements pour plugins, mais toute extension peut créer ou personnaliser des événements. Lorsqu'un événement particulier intervient, toutes les fonctions du plugin associées à l'événement sont exécutées en suivant une séquence. Exemples: Plugins «Authentification»: permettent de se connecter au backend ou au frontend, Plugin «Filtre de langue»: permet d afficher le site dans la langue choisie par l utilisateur, Plugin «Contenu - Navigation entre les pages»: affiche les liens «Suivant» et «Précédent» dans le bas des articles, Plugin «Extensions Joomla»: gère les mises à jour des extensions. Position de module Les positions des modules sont les emplacements que peuvent occuper vos différents modules (menu, connexion, fil d'ariane, recherche...). Vous pouvez attribuer une position à un module en l'éditant. Sur votre site, les positions de modules sont prédéfinies par le modèle que vous utilisez. Préfixe des tables Le préfixe des tables de la base de données est une chaîne de caractères précédant le nom des tables Joomla. Utiliser un préfixe vous permet de faire tourner plusieurs installations Joomla sur la même base de données. Le préfixe est défini aléatoirement lors de l installation mais il est également possible de choisir ce préfixe lors de cette étape. 17

27 Sauvegarde Une sauvegarde de votre site vous permet de le restaurer suite, par exemple, à une mauvaise manipulation ou un piratage. Pour sauvegarder entièrement votre site, vous devez sauvegarder votre base de données ET vos fichiers. Il est recommandé de sauvegarder régulièrement votre site, et pour faire cela il existe des outils pratiques et gratuits comme par exemple Akeeba. Template (ou modèle) Un template est un type d'extensions Joomla. Un Template est en réalité le design de votre site Joomla. Avec un template, vous pouvez changer le look ou l'atmosphère de votre site web. Les Templates sont relativement simples à construire (avec de bonnes bases en HTML et CSS), et vous apportent un maximum de flexibilité pour afficher votre site web comme vous le souhaitez. 4 Apache, PHP, MySQL, Joomla: comment s y retrouver? Lors de l installation de Joomla en local, il va être question de différents outils: Apache, PHP, MySQL Rien de mieux qu un petit schéma pour éclaircir tout cela. Serveur sur lequel le site Joomla est hébergé Application Apache Server Interprète PHP Base de données MySQL 18

28 5 Joomla en local ou chez un hébergeur Joomla peut être installé localement, donc sur votre ordinateur. Il s agit d une solution idéale pour réaliser notamment tous les premiers essais. Une fois que vous souhaiterez mettre votre site en ligne, il faudra passer par les services d un hébergeur. Pour faire fonctionner Joomla en local sur votre ordinateur, il faut que plusieurs composants soient installés: Serveur Apache 2.x ou ultérieure (le serveur IIS peut également être utilisé), PHP (ou version ultérieure), MySQL 5.1 (ou version ultérieure, d autres bases sont supportées: Microsoft SQL Server, PostgreSQL). L installation de tous ces éléments est reprise ci-après. 19

29 PRÉPARONS NOTRE ENVIRONNEMENT 20

30 1 Installer différents outils 1.1 Installer quelques outils de base (navigateurs, modules pour Firefox ) Sur votre ordinateur, installez les éléments suivants: différents navigateurs: Firefox, Google Chrome, Internet Explorer, Safari (éventuellement), les modules complémentaires suivants au niveau de Firefox: MeasureIt, ColorZilla, Firebug, FileZilla, le programme de retouches photos «Gimp» (ou Photoshop ), l éditeur de code «Notepad ++», l outil de classement et de retouches très basiques «Picasa». Les liens permettant d obtenir ces outils se trouvent sur le site: (menu «Étudiants»). 1.2 Installer WampServer WampServer est une plate-forme de développement Web sous Windows pour des applications Web dynamiques. Cette plate-forme se base sur l application serveur Apache, le langage de scripts PHP et des bases de données MySQL. Elle possède également phpmyadmin pour gérer plus facilement vos bases de données. Pour installer WampServer: 1 ) Vérifiez la version de Windows se trouvant sur votre ordinateur: 32 bits ou 64 bits. Pour ce faire, formez la combinaison de touches: touche «Windows»+ touche «Pause/Break». Sinon, beaucoup d autres possibilités existent, en passant notamment par le panneau de configuration. Vous obtenez alors l information voulue: 2 ) Via le site Internet (rubrique «Étudiants»), téléchargez le fichier compressé correspondant à votre système: 32 ou 64 bits. 32 bits: wampserver2.5-apache mysql php b.zip 64 bits: wampserver2.5-apache mysql php b.zip 21

31 3 ) Décompressez (extraction) le fichier téléchargé puis effectuez un double-clic sur celui-ci. 4 ) Vous obtiendrez probablement un avertissement de sécurité, cliquez sur «Exécuter». 5 ) Suivez les différentes étapes proposées. 22

32 Cette fenêtre n apparaîtra pas si le dossier en question n existe pas. Quick Launch icon: icône de lancement rapide présente juste à droite du bouton «démarrer» (avant Windows 8). 23

33 24

34 6 ) Donnez l autorisation de lancement. 7 ) Si tout se passe bien, dans le coin inférieur droit de l écran, vous devez voir le pictogramme relatif à Wamp devenir vert:. Lors du démarrage des services, il doit passer par les couleurs suivantes: rouge => orange => vert 25

35 8 ) Effectuez un clic droit sur le pictogramme présent dans le coin inférieur droit, cliquez sur «Language» puis sur «french». 9 ) Vous pouvez démarrer un navigateur (Firefox par exemple) puis encodez «localhost» dans la barre d adresse puis Return/Enter. Vous accédez à la configuration du serveur. Suivant la configuration de votre ordinateur, il est possible que la fenêtre suivante apparaisse lors de l installation. Si tel est le cas, cliquez simplement sur «Ouvrir». 26

36 Si l icône de WampServer ne passe pas au vert, cela signifie que certains services n ont pas démarré. Parmi les différentes causes possibles, on peut citer: Le serveur IIS (Internet Information Services) qui est en fonctionnement. Dans ce cas, arrêtez IIS (via le Gestionnaire des services Internet). Skype peut bloquer Apache. Si tel est le cas, il est impératif de changer, dans les options de Skype, l'utilisation du port 80 ou 443 par un autre port (Outils -> Options -> Paramètres avancés -> Connexion: Modifiez le port (par exemple: 34249) et décochez la case «Utiliser les ports 80 et 443». 1.3 Problème pouvant être rencontré lors de l installation de WampServer Si vous rencontrez le message d erreur figurant ci-dessous lors de l installation de WampServer, désinstallez ce dernier puis commencez par installer «Microsoft Visual C Redistribuable». Si votre système d exploitation fonctionne en 32 bits, exécutez le fichier suivant: vcredist_x86.exe Si votre système d exploitation fonctionne en 64 bits, exécutez les fichiers suivants: vcredist_x86.exe ET vcredist_x64.exe Ces fichiers sont mis à votre disposition sur le site Internet (rubrique «Étudiants»). 27

37 1.4 WampServer et sécurité Si vous ne souhaitez pas utiliser WampServer à partir d autres dispositifs de votre réseau (ordinateur, tablette, smarttv, smartphone ), veillez à ce que WampServer ne soit pas en ligne. Effectuez un clic gauche sur le pictogramme de WampServer dans la zone de notification puis vérifiez qu il est indiqué «Passer en ligne» (ce qui signifie que WampServer n est pas en ligne). Ne cliquez pas sur cette option. NB: lorsqu ils ne vous sont pas nécessaires, vous pouvez également, si vous le souhaitez, arrêter les services Apache et MySQL. Ne pas oublier de les redémarrer quand cela est nécessaire. 2 Créer «un site Joomla» en local Procédure pour installer «une instance» de Joomla (donc un site): 1 ) Via le site Internet (rubrique «Étudiants»), téléchargez le fichier compressé correspondant à Joomla: Joomla_3.3.3-Stable-Full_Package_French_v2.zip (ou version plus récente). 2 ) Décompressez (extraction) le fichier téléchargé. NB: cette opération peut s avérer relativement longue. Conservez ces fichiers dans un dossier que vous nommerez de manière très explicite (par exemple: joomla_fichiers_originaux). En effet, ils sont précieux car chaque fois que vous souhaiterez implémenter un nouveau site, ce sont ces fichiers qui seront utilisés. 28

38 3 ) Démarrez l Explorateur de fichiers, atteignez le dossier suivant: C:\wamp\www 4 ) Créez un dossier dont le parent sera «C:\wamp\www». Ce dossier sera nommé en utilisant des lettres et des chiffres mais en évitant les caractères accentués, les espaces et les caractères spéciaux. Dans le présent exemple, le nom sera «site04». 5 ) Ouvrez le dossier qui vient d être créé et copiez les fichiers, précédemment téléchargés, dans ce dossier. Vous devez obtenir quelque chose de semblable à ce qui suit. 6 ) Démarrez un navigateur, Firefox par exemple. 7 ) Dans la barre d adresse du navigateur, atteignez l adresse suivante: localhost/site04 8 ) L installation débute. Suivez les différentes étapes proposées. Dans la première étape, définissez le nom du site, indiquez une adresse , choisissez un identifiant et un mot de passe. Ces dernières informations vous permettront d accéder à l administration du site. 29

39 Par défaut, en local, le nom d utilisateur est «root» et il n y a pas de mot de passe pour accéder à la base de données. Ce n est évidemment pas le cas pour une base de données hébergée à l extérieur. 30

40 L installation s effectue. 9 ) Demandez la suppression du répertoire d installation. 31

41 10 ) Cliquez sur «Administration». 11 ) Encodez l identifiant et le mot de passe (définis en début d installation) puis cliquez sur «Connexion». 12 ) Vous accédez à l administration du site (backend). 32

42 13 ) Cliquez sur le lien suivant (coin supérieur droit de la fenêtre) afin d accéder au frontend du site. 14 ) Vous accédez au frontend. 3 Se connecter et se déconnecter du backend (partie administration) Pour vous connecter au backend afin d administrer votre site web: 1 ) Atteignez l adresse suivante (à adapter suivant le nom de votre site): localhost/site04/administrator/ 2 ) Encodez vos données de connexion puis cliquez sur «Connexion». 33

43 Pour vous déconnecter de l administration (du backend): Cliquez sur le bouton suivant présent dans le coin supérieur droit de l écran: «Déconnexion». puis sur 4 À faire directement après l installation d un nouveau site Joomla 4.1 Définir l éditeur par défaut Supposons dans le cas présent que vous souhaitiez utiliser l éditeur JCE (cet éditeur nous permettra d encoder du texte et de le mettre en forme, d insérer des images, des liens ). Cet éditeur sera disponible si l extension voulue a été installée, ce qui est expliqué un peu plus loin dans les notes (installation d extensions: page 54). Supposons ici que l extension ait déjà été installée. 1 ) Connectez-vous à l administration du site (si ce n est déjà fait). 2 ) Cliquez sur «Système» puis «Configuration». 3 ) Faites le choix voulu dans la liste «Éditeur par défaut» puis cliquez sur «Enregistrer & Fermer». 34

44 4.2 Définir les valeurs par défaut de certains paramètres pour l éditeur JCE Le paramètre «Autoriser l accès à la racine» pour l éditeur JCE Lorsque vous souhaiterez, par exemple, insérer des liens hypertextes internes à partir de l éditeur JCE, il est important que vous ne soyez pas limité au dossier «Images» mais que vous puissiez accéder en tant qu administrateur à la racine de l hébergement. Pour ce faire, une fois l extension JCE installée (installation d extensions: page 54): 1 ) Une fois connecté à la partie administation du site, cliquez sur «Composants» puis sur «JCE Administration». 2 ) Cliquez sur «Profils JCE». 3 ) Cliquez sur «Default». 4 ) Cliquez sur «Paramètres de l éditeur» puis sur «Fichier système». 5 ) Sélectionnez «Oui» au niveau de la propriété «Autoriser l accès à la racine» puis enregistrez. 35

45 4.2.2 Quelques paramètres relatifs aux tableaux pour l éditeur JCE Lorsque vous souhaiterez insérer des tableaux à partir de l éditeur JCE, il est intéressant que certains paramètres soient définis par défaut, comme par exemple, l épaisseur de la bordure, les espacements intérieurs Ceci vous évitera de devoir tout définir à chaque création de tableaux. Pour ce faire, une fois l extension JCE installée (installation d extensions: page 54): 1 ) Une fois connecté à la partie administation du site, cliquez sur «Composants» puis sur «JCE Administration». 2 ) Cliquez sur «Profils JCE». 3 ) Cliquez sur «Default». 4 ) Cliquez sur «Paramètres des plug-ins». 5 ) Faites défiler la page et cliquez dans la rubrique «Tableaux». 36

46 6 ) Remontez dans la page web et définissez certains paramètres comme illustré ci-dessous. 7 ) Enregistrez et fermez. 37

47 4.3 Définir les valeurs par défaut de certains paramètres pour les articles Lorsqu un article est publié, il est possible de demander que son titre soit affiché ou non, que la catégorie à laquelle l article appartient soit affichée ou non, que le nombre d affichage de l article apparaisse ou pas Plutôt que de redéfinir ces paramètres à chaque création d articles, vous pouvez les définir par défaut. Pour définir les valeurs par défaut de certains paramètres pour les articles: 1 ) Connectez-vous à l administration du site (si ce n est déjà fait). 2 ) Cliquez sur «Système» puis sur «Configuration». 3 ) Cliquez dans la liste de gauche sur «Articles». 38

48 4 ) Définissez les paramètres comme vous le souhaitez puis enregistrez. 39

49 Note concernant les tags La version 3.1 de Joomla a apporté un nouveau composant offrant une fonctionnalité de taille: le système de Tags. Ce système va par exemple vous permettre d'assigner vos articles à plusieurs Tags, puis d'afficher ces articles (venant de catégories différentes) sur la même page : celle du Tag. Mais pas seulement, il va vous permettre d'afficher par Tag n'importe quel type de contenu. Vous pourrez ainsi afficher sur la même page: des articles, des liens web (du composant Liens web), des Fiches contact (du composant Fiche de contact), des Fils d'actualité (du composant Fils d'actualité), ou tout autre contenu venant d'une extension tierce et intégrant ce système de Tag. Cela revient à la possibilité de classer vos articles dans plusieurs catégories (cette fonctionnalité est très demandée par les utilisateurs Joomla). Les Tags peuvent également s'imbriquer à l'infini (de la même manière que les catégories). 4.4 Définir les valeurs par défaut de certains paramètres pour les menus, les modules Pour définir les valeurs par défaut de certains paramètres pour les menus, les modules comme nous l avons fait pour les articles: 1 ) Connectez-vous à l administration du site (si ce n est déjà fait). 2 ) Cliquez sur «Système» puis sur «Configuration». 40

50 3 ) Cliquez dans la liste de gauche sur le type de composants concerné. Ci-après, c est le cas des «templates» qui a été traité. 4 ) Définissez les valeurs comme vous le souhaitez puis enregistrez. 41

51 4.5 Ne pas indexer (référencer) le site Lorsqu un site est en cours de création et qu il est hébergé à l extérieur (pas en local), il est important de veiller à ce qu il ne soit pas indexé par les moteurs de recherche tant qu il n est pas finalisé. Pour empêcher l indexation par les moteurs de recherche: 1 ) Connectez-vous à l administration du site (si ce n est déjà fait). 2 ) Cliquez sur «Système» puis sur «Configuration». 3 ) Dans l onglet «Site» (pas visible ci-après), vous trouvez l option «Robots». 4 ) Sélectionnez la valeur «No index, no follow»: n indexe ni le contenu, ni les liens (Google ne suivra pas les liens situés dans les pages). 5 ) Enregistrez. NB: une fois le site finalisé en ligne, il ne faudra pas oublier de modifier ce paramètre. 42

52 4.6 Définir le nom du site, une description Pour définir ou modifier le nom du site, indiquer une description, définir des mots-clés : 1 ) Connectez-vous à l administration du site (si ce n est déjà fait). 2 ) Cliquez sur «Système» puis sur «Configuration». 3 ) Via l onglet «Site» notamment, définissez les paramètres voulus puis enregistrez. 43

53 5 Retrouver certaines données techniques Où retrouve-t-on le nom de la base de données dans laquelle toutes les données de contenu sont stockées? 1 ) Connectez-vous à la partie administration (si ce n est déjà fait). 2 ) Cliquez sur «Système» puis sur «Configuration». 3 ) Cliquez sur «Serveur». Vous obtenez les informations voulues: type de base de données, nom de la base, préfixe des tables Vous trouvez également l emplacement du dossier temporaire. Note: Le dossier temporaire (tmp) correspond à l'endroit où Joomla stocke temporairement les fichiers durant les procédures d'installation. Il n'est pas rare que des fichiers restent «coincés» dans ce répertoire, cela ne gêne pas le bon fonctionnement du site mais occupe inutilement de l'espace. Vous pouvez donc de temps à autre vider ce dossier. 44

54 CONVENTIONS 45

55 Posons quelques conventions pour nommer les objets, définir les alias Quelques principes de base: Pas d accents ni d espaces dans les noms, les alias Dans un site multilingue, on utilisera un suffixe: allemand: -de anglais: -en français: -fr néerlandais: -nl Les préfixes: Objet Préfixe Séparateur de mots article art - catégorie d articles cat - formulaire frm - barre de menus menu - entrée de menu mnu - sous-menu smnu - commande dans une entrée de menu cmd - barre de menus fantômes menuf - entrée de menu fantôme mnuf - Nom des dossiers et des fichiers: tout en minuscules, pas d accents, pas d espaces. Utilisation du caractère de soulignement ( _ ) si on souhaite séparer des mots. 46

56 CAS N 1: PARTONS D'UN TEMPLATE (MODÈLE) EXISTANT SITE «CLUB DE MARCHE» 47

57 Au terme de l étude de ce premier cas, vous serez capable de(d ): installer un template (modèle), désinstaller un (modèle), identifier les positions disponibles dans un template (modèle), installer une extension, activer et désactiver une extension, désinstaller une extension, créer des articles et appliquer une mise en forme de base, créer et utiliser des modules de différents types, implémenter un diaporama, une galerie photos, un agenda créer et publier une barre de menus. Donc, dans ce premier cas: l aspect graphique compte très peu voire pas du tout, nous utiliserons peu d'html, nous ne coderons pas nous-mêmes en CSS. 1 Présentation du contexte L objectif est de créer un site Internet pour le club de marche «Les Cent Pas». Maquette du site: Logo Diaporama (slideshow) Accueil Le Club Agenda Infos utiles Photos Liens Contact Copyright xxxxx Mentions légales Politique de confidentialité Contact Détail des entrées de menus: Accueil Le Club o Le conseil d administration o Historique o Affiliation o Règlement interne o Comptes-rendus AG Agenda 48

58 Infos utiles o Le pense-bête du randonneur o Le matériel o Quelques règles d or Photos Liens Contact 2 Gérer les templates 2.1 Définition Pour rappel: un template (modèle) est un type d'extensions Joomla. Un template correspond au design de votre site Joomla. Avec un template, vous pouvez changer le look ou l'atmosphère de votre site web. Les modèles sont «assez simples» à construire (avec de bonnes bases en HTML CSS), et vous apportent un maximum de flexibilité pour afficher votre site web comme vous le souhaitez. 2.2 Installer un nouveau template (modèle) Pour installer le template (modèle) qui sera mis à votre disposition: 1 ) Connectez-vous à l interface d administration (si ce n est déjà fait). 2 ) Cliquez sur «Extensions» puis sur «Gestion des extensions» 3 ) Cliquez sur «Parcourir». 49

59 4 ) Parcourez les dossiers et double-cliquez sur le fichier correspondant au modèle voulu. 5 ) Cliquez sur «Envoyer & Installer». 6 ) Le système confirme le succès de l installation. 2.3 Définir le modèle utilisé par défaut Pour définir le modèle qui sera utilisé par défaut: 1 ) Connectez-vous à l interface d administration (si ce n est déjà fait). 2 ) Cliquez sur «Extensions» puis sur «Gestion des templates». 3 ) Vous obtenez la liste des modèles. Cliquez sur le bouton suivant afin de définir le modèle voulu par défaut. 4 ) Cliquez sur le bouton de prévisualisation. 50

60 5 ) Vous obtenez un aperçu du site avec le template actif. 2.4 Désinstaller un modèle Il faut noter que le modèle qui est défini par défaut ne peut pas être désinstallé. Vous obtiendrez un message du type suivant: Erreur Le style par défaut ne peut être supprimé Objectif: Désinstaller le modèle nommé «protostar». 1 ) Connectez-vous à l interface d administration (si ce n est déjà fait). 2 ) Cliquez sur «Extensions» puis sur «Gestion des extensions». 3 ) Cliquez sur «Gestion» dans la colonne de gauche. Filtrez les données pour ne voir que les templates. Sélectionnez le modèle que vous souhaitez désinstaller et cliquez sur «Désinstaller». Le système ne demande pas de confirmer la suppression. 51

61 4 ) Le système confirme que le template a été désinstallé. 2.5 Voir les positions disponibles dans un modèle Avant tout, il faut activer la prévisualisation de la position des modules, à moins que cela n ait été défini via les paramètres par défaut du site. 1 ) Connectez-vous à l interface d administration (si ce n est déjà fait). 2 ) Cliquez sur «Extensions» puis sur «Gestion des templates». Cliquez sur «Paramètres». 3 ) Sélectionnez la valeur «Activé» au niveau de la propriété «Prévisualisez la position des modules» puis enregistrez. 4 ) Au niveau de la liste des modèles cliquez sur le pictogramme présent à gauche du template pour lequel vous souhaitez voir les positions. Comme illustré à la page suivante, vous obtenez une fenêtre montrant la structure du template. 52

62 53

63 3 Gérer les extensions 3.1 Définition Pour rappel: Joomla est un CMS nativement riche en fonctionnalités, mais si vous construisez un site avec Joomla et que vous avez besoin de fonctionnalités non présentes par défaut, vous pourrez facilement l'étendre en y installant des extensions. Il existe différents types d'extensions sous Joomla: les Modules, les Plugins, les Templates et les Langues. Chacune de ces extensions gère une fonctionnalité bien spécifique. 3.2 Installer des extensions Si vous voulez essayer une nouvelle extension pour laquelle vous n avez pas reçu d avis d autres personnes, dont vous ne connaissez pas l auteur effectuez d abord des tests sur un site «brouillon» et faites une sauvegarde de votre site avant d installer l extension. Pour installer une nouvelle extension: 1 ) Connectez-vous à l interface d administration. 2 ) Cliquez sur «Extensions» puis sur «Gestion des extensions». 3 ) Cliquez sur «Parcourir». 4 ) Effectuez un double-clic sur le fichier correspondant à l extension que vous souhaitez installer. 54

64 5 ) Cliquez sur «Envoyer & Installer». 6 ) Le système confirme que l installation a été effectuée avec succès. En suivant cette procédure, installez les extensions suivantes. Les fichiers sont disponibles sur le site (rubrique «Étudiants»). Nom Description - Fichier Site web Admin Tools Admin Tools est le système de sécurité le plus complet existant pour Joomla Akeeba Backup Better Preview GoogliC Analytics Fichier: com_admintools core.zip PUIS Fichier: admintools-fr_3-0-0.zip Notamment via l option «Composants» vous pouvez vérifier la présence de cette extension. Akeeba Backup est le système de sauvegarde le plus complet existant pour Joomla Fichier: com_akeeba core.zip PUIS Fichier: akeebabackup-fr_ zip Notamment via l option «Composants» vous pouvez vérifier la présence de cette extension. Outil permettant de facilement obtenir un aperçu des articles lors de la création. Fichier: betterpreview-v3.3.2.zip GoogliC Analytics est un plugin qui vous permet d'insérer facilement le code de suivi des statistiques Google Analytics sur votre site. s.com/admin-toolssecurite-dusite/extensionsjoomla/securite/admintools-securite-dp1 s.com/akeeba-backupsauvegarde/extensionsjoomla/sauvegarde/ake eba-backupsauvegardes nl/extensions/betterpre view m/fr/extensions/googli c-analytics 55

65 Il offre de plus la possibilité d'exclure des groupes d'utilisateurs et des parties de domaine. icagenda JCE Editor Maximenu CK Fichier: plg_system_googlic_analytics_v124.zip icagenda est un composant de gestion complète d'un calendrier d'évènements. Fichier: icagenda_pro_3.3.8.zip Editeur de contenus Fichier: com_jce_243_fr-en.zip Maximenu CK est un module qui vous permet de créer un menu déroulant avec des effets de déroulement des sous menus. Vous pouvez organiser et personnaliser votre menu comme vous le voulez grâce à de nombreuses options et des thèmes graphiques. m/fr/extensions/icagen da 2/telecharger/pack-jcecomplet r/extensionsjoomla/maximenu-ck Fichier: mod_maximenuck_8.0.4_j3.zip Slideshow CK Xmap Un plug-in payant permet de faciliter la personnalisation du menu. Le module Slideshow CK permet d'afficher vos images ou vidéos sous forme d un diaporama. Fichier: mod_slideshowck_1.4.5_j3.zip Xmap est un générateur de carte de site pour la consultation en frontal du site (format HTML) et pour les moteurs de recherche (format XML). Fichier: pkg_xmap-2-3-4_fr.zip r/extensionsjoomla/slideshow-ck s.com/composantxmap/extensionsjoomla/xmap-plan-dusite Si vous installez le plug-in «Maximenu_CK params» (qui est payant), il ne faut pas oublier de l activer. Si nécessaire, pensez toujours à activer les plug-ins après l installation. 56

66 3.3 Voir les extensions installées Pour voir l ensemble des extensions installées, une fois connecté à l administration, cliquez sur «Extensions» puis sur «Gestion des extensions». Vous obtenez une liste semblable à ce qui suit. Il faut noter que des possibilités de filtrage existent. Heureusement, vu le nombre d extensions que nous pouvons rencontrer dans un site. 3.4 Désactiver une extension Il est possible de désactiver une extension qui n est plus nécessaire durant un certain temps. Cette technique peut également être intéressante pour détecter des conflits entre extensions. Une extension désactivée peut être réactivée à tout moment, c est donc bien différent d une désinstallation. 1 ) Connectez-vous à l interface d administration (si ce n est déjà fait). 2 ) Cliquez sur «Extensions» puis sur «Gestion des extensions». 3 ) Cliquez sur «Gestion» dans la colonne de gauche, recherchez l extension que vous souhaitez désactiver puis utilisez le bouton présent dans la colonne «Statut». 57

67 3.5 Désinstaller une extension Supposons qu une extension soit devenue inutile, il est alors vivement conseillé de la désinstaller. Pour désinstaller une extension: 1 ) Connectez-vous à l interface d administration (si ce n est déjà fait). 2 ) Cliquez sur «Extensions» puis sur «Gestion des extensions». 3 ) Cliquez sur «Gestion» dans la colonne de gauche, recherchez l extension que vous souhaitez désinstaller, cochez celle-ci puis utilisez le bouton «Désinstaller». Note En fonction des besoins, il est possible de cocher plusieurs extensions puis d utiliser le bouton «Désinstaller». Cependant, dans certains cas (tout dépend des extensions concernées), cela peut poser des problèmes et provoquer l affichage de messages d erreur. Il suffit alors d effectuer la désinstallation extension par extension. 4 Envoyons quelques images Au préalable, il est très important d avoir redimensionné les images et d avoir allégé le poids des fichiers. Objectif: envoyer l image qui correspond au logo du club de marche dans un nouveau dossier du site (images/entete/logo) 1 ) Connectez-vous à l interface d administration (si ce n est déjà fait). 2 ) Cliquez sur «Contenu» puis sur «Gestion des médias». 58

68 3 ) Cliquez sur «Créer un nouveau dossier». NB: par défaut le nouveau dossier aura comme parent le dossier «images» du site. 4 ) Nommez le dossier puis cliquez sur «Créer un dossier». 5 ) Le dossier est créé. Cliquez sur celui-ci afin de l ouvrir. 6 ) Cliquez sur «Créer un nouveau dossier». 59

69 7 ) Nommez le dossier puis cliquez sur «Créer un dossier». 8 ) Le nouveau dossier est créé. 9 ) Cliquez sur «Transférer». 10 ) Cliquez sur «Parcourir». 60

70 11 ) Parcourez les dossiers afin de rechercher le fichier qui correspond au logo puis effectuez un double-clic sur celui-ci. 12 ) Cliquez sur «Démarrer l envoi». 13 ) Le logo a été copié dans le dossier voulu. 61

71 En suivant une procédure analogue, transférez les photos suivantes dans un dossier nommé «diaporama». Ce dossier doit être enfant du dossier «entete». Aperçu du résultat obtenu dans le gestionnaire de médias: Note Ce type de transfert de fichiers peut également se faire soit via l Explorateur de fichiers de Windows si on travaille localement soit via un client FTP (FileZilla par exemple) si le site se trouve chez un hébergeur externe. 62

72 5 Intégrer du contenu 5.1 Gérer les articles Dans un premier temps, nous allons simplifier l exercice, en créant un article par entrée de menu. Nous ne gérons pas pour le moment, les commandes dans chaque entrée de menu. Accueil Le Club Agenda Infos utiles Photos Liens Contact Créer des articles Pour rappel: un article est une entité contenant du texte, des images, des vidéos, des liens (dirigeant vers d'autres articles du site ou sur des sites externes)... Procédure pour créer un article: 1 ) Connectez-vous à l interface d administration (si ce n est déjà fait). 2 ) Cliquez sur «Contenu» puis sur «Gestion des articles». NB: en restant sur «Gestion des articles», vous pouvez également voir apparaître une option «Ajouter un article». 3 ) Cliquez sur «Nouveau». 4 ) Définissez le titre, un alias, le statut, un contenu pour le nouvel article puis enregistrez. 63

73 Répétez la même procédure pour créer les différents articles. Un conseil: accordez de l importance à l alias défini pour vos articles afin de vous y retrouver facilement Dépublier un article Lorsqu un article est dépublié, il n est pas supprimé mais ne sera tout simplement plus visible sur le site. Le fait d avoir des articles non publiés est intéressant dans différents cas: article en cours de préparation et non finalisé, article rendu temporairement indisponible volontairement, article conservé dans un historique, Pour dépublier un article: 1 ) Connectez-vous à l interface d administration (si ce n est déjà fait). 2 ) Cliquez sur «Contenu» puis sur «Gestion des articles». 64

74 3 ) Recherchez l article à dépublier (différents outils de recherche sont disponibles). 4 ) Utilisez le bouton permettant de publier/dépublier dans la colonne «Statut» Supprimer un article Pour supprimer un article: 1 ) Connectez-vous à l interface d administration (si ce n est déjà fait). 2 ) Cliquez sur «Contenu» puis sur «Gestion des articles». 3 ) Recherchez l article à supprimer (différents outils de recherche sont disponibles). 4 ) Cochez l article à supprimer puis cliquez sur «Corbeille» Retrouver un article dans la Corbeille Pour voir les articles se trouvant dans la Corbeille, il faut se placer dans la partie «Gestion des articles» puis utiliser les outils de recherche et filtrer sur base du statut «Dans la corbeille». 65

75 5.1.5 Paramètres divers concernant les articles De nombreuses options sont disponibles lors de la création d un article. Celles-ci sont réparties dans différents onglets. Pour connaître la signification d une propriété, il suffit de positionner la souris sur son intitulé et d attendre l affiche de l info-bulle. Intéressons-nous principalement aux deux premiers onglets. Clé de référence: le mot entré dans ce champ sera ajouté à l'url, afin d'apporter un mot clé supplémentaire pouvant être repéré par les robots de référencement. Référence externe: permet de saisir la clé de référence LTS (Long Time Support) (par exemple, Help35: Content_Article_Manager). 66

76 5.2 Gérer l en-tête (header) Le logo Dans le cas présent, le logo peut être inséré via certaines options du template. On suppose que l image qui correspond au logo a déjà été chargée dans un dossier du site (cf. page 58). Pour insérer le logo: 1 ) Connectez-vous à l interface d administration (si ce n est déjà fait). 2 ) Cliquez sur «Extensions» puis sur «Gestion des templates». 3 ) Cliquez sur le template voulu. 4 ) Activez l onglet «Paramètres avancés», définissez différentes propriétés (Logo height, logo width, logo link ) puis cliquez sur «Sélectionner». 67

77 5 ) Dans le cas présent, comme énoncé précédemment, on suppose que l image qui correspond au logo a déjà été chargée dans un dossier du site. Ouvrez le dossier voulu en utilisant l explorateur proposé. NOTE Il est possible que le système n affiche aucun dossier et aucune image. Il faut alors dérouler la liste «Répertoire», sélectionner par exemple «entete/logo», cliquer sur «Répertoire parent» puis cliquer sur le dossier voulu. Tout ceci pour contourner un petit bug. NB: une option présente dans le bas de la fenêtre permet d envoyer un fichier dans un dossier existant. Ceci peut être intéressant si le fichier voulu n avait pas été copié sur le site au préalable. 6 ) Sélectionnez le fichier voulu puis cliquez sur «Insérer». 68

78 7 ) Enregistrez. 8 ) Demandez un aperçu du site en cliquant sur le bouton adéquat présent dans le coin supérieur droit de l écran. Vous pouvez constater que le logo est bien affiché Le diaporama (slideshow) On suppose que les photos devant figurer dans le diaporama ont déjà été chargées dans un dossier du site. Pour insérer le diaporama en en-tête: 1 ) Connectez-vous à l interface d administration (si ce n est déjà fait). 2 ) Cliquez sur «Extensions» puis sur «Gestion des modules». 3 ) On peut constater qu il existe déjà un module de type «Slideshow CK» non publié. Ce module a été créé lors de l installation de l extension correspondante. Sélectionnez et mettez à la Corbeille tous les autres modules. Cliquez sur le titre du module «Slideshow CK». 69

79 4 ) Définissez le titre et effectuez les choix repris ci-après dans les différents onglets voulus. CAPITAL: la position Utilisez bien les positions présentées à la suite du modèle nous intéressant. NB: avec la version gratuite de cette extension, la seule source des images est le «Gestionnaire de slides». Il n est pas possible de définir un dossier comme source en se limitant à la version gratuite. 5 ) Sélectionnez l onglet «Gestionnaire de slides» et supprimez les slides proposés par défaut en utilisant le bouton en forme de croix. 70

80 6 ) Cliquez sur «Ajouter un slide». 7 ) Cliquez sur «Sélectionner l image». 8 ) Utilisez l explorateur proposé pour ouvrir le dossier contenant la première photo à utiliser dans le diaporama. NB: nous supposons que les photos ont déjà été chargées dans un dossier du site. 71

81 9 ) Une fois le dossier voulu atteint, sélectionnez la première photo, encodez une description, un titre (ces données seront utilisées par les moteurs de recherche) puis cliquez sur «Insérer». 10 ) Pour insérer une deuxième photo, cliquez sur «Ajouter un slide» puis suivez toute la procédure vue précédemment. 72

82 11 ) Voici un aperçu de la fenêtre une fois que nous avons inséré quelques photos. Notes Pour chaque slide, il est possible de personnaliser la durée d affichage sinon c est la valeur par défaut qui sera utilisée. Il vous est possible de définir un titre et une description pour chaque slide. Vous pouvez définir un lien sur chaque slide. Ce lien conduisant vers la page web de votre choix. Le bouton suivant: permet de facilement modifier l ordre des slides. 73

83 12 ) Une fois toutes les photos insérées, cliquez sur l onglet «Options de styles» et définissez certains paramètres comme repris ci-après. 74

84 13 ) Cliquez sur l onglet «Options des effets» et définissez les paramètres voulus. 14 ) Enregistrez. 15 ) Prévisualisez le site. Vous pouvez constater la présence du diaporama. 75

85 5.3 Gérer la barre de menus Dans un premier temps, nous allons simplifier le cas, en ne créant que les entrées du menu et pas les commandes figurant dans chaque entrée. Accueil Le Club Agenda Infos utiles Photos Liens Contact Créer la barre de menus principale Pour définir le menu principal: 1 ) Connectez-vous à l interface d administration (si ce n est déjà fait). 2 ) Cliquez sur «Menus» puis sur «Gestion des menus». 3 ) Vous pouvez constater la présence d un menu prédéfini lors de l installation du site Joomla. Cochez ce menu puis cliquez sur «Modifier». NB: vous pouvez aussi supprimer le menu prédéfini et en créer un nouveau si vous préférez. NB: l intitulé du menu déjà prédéfini peut être différent. 4 ) Définissez le titre du menu puis cliquez sur «Enregistrer & Fermer». 5 ) Dans la fenêtre suivante, cliquez sur «Menu principal». 76

86 6 ) Un lien de menu existe déjà (élément prédéfini). Cliquez sur celui-ci. NB: l intitulé de l option déjà prédéfinie peut être différent. 7 ) Renommez la commande si nécessaire. Cliquez sur «Sélection» en vis-à-vis de «Type de lien de menu» puis sélectionnez «Articles» puis «Article» dans la fenêtre qui apparaît. Ensuite, cliquez sur «Sélection» en vis-à-vis de «Sélectionner un article» puis sélectionnez l article «Accueil». 8 ) Activez l onglet «Paramètres d affichage de la page» puis sélectionnez la valeur «Non» au niveau de la propriété «Afficher l en-tête de page». Cliquez sur «Enregistrer & Fermer». 77

87 9 ) Vous voyez le lien qui vient d être créé. 10 ) Cliquez sur «Nouveau». 11 ) Définissez le titre du menu suivant, un alias puis cliquez sur «Sélection» en vis-à-vis de «Type de lien de menu». 12 ) Sélectionnez «Articles» puis «Article». En effet, nous voulons faire pointer le lien vers un article. 13 ) Cliquez sur «Sélection» en vis-à-vis de «Sélectionner un article». 78

88 14 ) Sélectionnez l article vers lequel le nouveau lien doit pointer. 15 ) Cliquez sur «Enregistrer & Fermer». Répétez la procédure pour les différents menus. 79

89 Au niveau de l aperçu du site, on peut constater que le menu n apparaît pas. C est normal. Il faut créer un module Créer un module pour afficher le menu principal Si ce n est déjà fait, partons d une liste des modules «toute propre». Il faut évidemment conserver le module qui correspond au diaporama mais vous pouvez cocher tous les autres modules proposés par défaut et ne nous intéressant pas spécialement. Ensuite, cliquez sur «Corbeille». Il restera ce qui suit. Ensuite pour créer un module permettant l affichage du menu principal: 1 ) Dans la partie «Gestion des modules», cliquez sur «Nouveau». 2 ) Sélectionnez le type de module souhaité. Dans notre cas, il s agit d un module de type «Menu». 80

90 3 ) Encodez un titre pour le module, sélectionnez le menu devant être affiché dans ce module, demandez que le titre du module soit masqué, définissez la position du module. CAPITAL: la position Utilisez bien les positions présentées à la suite du modèle nous intéressant. 4 ) Sélectionnez l onglet «Assignation des menus» et vérifiez que ce module est bien assigné à toutes les pages du site. 5 ) Enregistrez puis demandez un aperçu du site et nous avons notre menu! Et il fonctionne. 81

91 5.4 Créer et publier un module en pied de page Pour créer les éléments devant figurer en pied de page: 1 ) Connectez-vous à l interface d administration (si ce n est déjà fait). 2 ) Cliquez sur «Extensions» puis sur «Gestion des modules». 3 ) Cliquez sur «Nouveau». 4 ) Sélectionnez le type «Contenu personnalisé». 5 ) Encodez le contenu du pied de page en prévoyant les emplacements voulus pour les liens hypertextes. Ensuite, le curseur étant placé à l endroit où le lien «Mentions légales» doit figurer, cliquez sur «Article» car l objectif est d insérer un lien hypertexte pointant vers l article «Mentions légales». 82

92 6 ) Cliquez sur l article «Mentions légales». 7 ) Le lien hypertexte apparaît. 8 ) Insérez les liens suivants. 9 ) Veillez à donner un nom explicite au module, demandez que le titre du module soit masqué et définissez la position du module. 83

93 10 ) Assignez ce module à toutes les pages puis enregistrez. L aperçu du site nous montre que le pied de page est bien présent. 6 Allons un peu plus loin 6.1 Appliquer une mise en forme au niveau des articles Objectif n 1: compléter l article «Accueil» afin d obtenir ce qui suit. Procédure: 1 ) À partir de l interface d administration, cliquez sur «Contenu» puis sur «Gestion des articles». 2 ) Cliquez sur l article «Accueil» précédemment créé. 84

94 3 ) Encodez le texte voulu. 4 ) L objectif est ensuite de mettre en forme la portion de texte «BIENVENUE». Sélectionnez «BIENVENUE» puis cliquez sur le bouton «Insérer/Modifier un style XHTML»:. 5 ) Complétez certaines options comme illustré ci-après. 85

95 6 ) Cliquez sur «Appliquer & Fermer». Vous obtenez un aperçu de la mise en forme obtenue. 86

96 7 ) Sélectionnez la portion de texte «Alors n'hésitez pas... à franchir le pas!». 8 ) Cliquez sur le bouton permettant d appliquer une mise en gras. 9 ) Activez l onglet «Publication» puis complétez la zone «Description» (250 caractères maximum) et «Mots-clés» (1000 caractères maximum). 87

97 10 ) Enregistrez l article puis prévisualisez le site. Jetons un petit coup d œil sur le code HTML. Pour ce faire, à partir de l article édité dans la partie administration, cliquez sur «Toggle Editor» (si on clique dans la zone blanche située à côté cela fonctionne également). Le code HTML apparaît. Pour rebasculer dans le mode «Éditeur», cliquez sur «Toggle Editor». 88

98 Objectif n 2: compléter l article «Liens» pour obtenir ce qui suit. Procédure: 1 ) À partir de l interface d administration, éditez l article «Liens», encodez les quelques mots suivants et revenez à la ligne. 2 ) Le curseur étant bien placé, cliquez sur le bouton suivant: 3 ) Complétez la fenêtre qui apparaît de la manière suivante. 4 ) Cliquez sur «Insérer». 89

99 5 ) En utilisant la même technique, insérez d autres liens. NB: les fenêtres rencontrées sont présentées ci-après. 90

100 6 ) Prévisualisez le site et plus particulièrement l article «Liens». 91

101 Objectif n 3: compléter la page «Contact» afin d obtenir ce qui suit. Procédure: 1 ) À partir du volet «Administration» du site, éditez l article «Contact» puis encodez les éléments de texte sans vous préoccuper de la mise en forme. 92

102 2 ) Sélectionnez les lignes devant être marquées par des puces. Cliquez sur le bouton «Liste à puce» et effectuez le choix voulu. 3 ) Sélectionnez la phrase «Une permanence est assurée» puis cliquez sur le bouton «Insérer/Modifier un style XHTML». 4 ) Dans la fenêtre «Styles» qui suit, effectuez les choix voulus dans l onglet «Bordure». Ensuite, cliquez sur «Appliquer & Fermer». 93

103 5 ) En veillant à ce que la phrase «Une permanence est assurée» soit toujours sélectionnée, cliquez sur le bouton de mise en gras puis sur celui permettant de centrer le texte. NB: la mise en gras et le centrage peuvent également être définis via la fenêtre «Styles» présentée précédemment. 6 ) Enregistrez l article «Contact». 7 ) Prévisualisez le site et plus particulièrement la page «Contact». 6.2 Intégrer une galerie photos dans un article La première étape est de préparer les photos à présenter sur le site. Cette préparation consiste notamment en un redimensionnement et à un allégement du poids. Beaucoup d outils existent: Gimp, Photoshop Dans le cas présent les photos ont déjà été préparées. Nous travaillerons avec des photos d une largeur de 690 px. 94

104 Chargez sur le site les photos concernant «Les Fagnes» en utilisant la procédure présentée dans le point 4 (page 58). Vous pouvez créer un dossier nommé «galeries» puis un sous-dossier «les_fagnes». Ce chargement peut également se faire par une simple copie dans le dossier voulu si vous travaillez en local ou par un transfert FTP pour un hébergement externe. Procédure: 1 ) Si ce n est déjà fait, installez l extension «Playlist CK» en suivant une procédure analogue à celle présentée dans le cadre du point «3.2 Installer des extensions» à la page 54. Le module Playlist CK permet d'afficher vos images ou vidéos avec de beaux effets. Le fichier concerné se nomme «mod_playlistck_1.1.2_j3» et il est mis à votre disposition sur le site (rubrique «Étudiants») ou sur le site de l auteur 2 ) Accédez à la gestion des modules: «Extensions» / «Gestion des modules». Vous pouvez constater qu un module de type «Playlist CK» existe déjà. Il n est pas publié. NB: si ce module n était pas présent, il suffit de demander la création d un nouveau module du type voulu. 3 ) Cliquez sur le module «Playlist CK». 4 ) Dans l onglet «Module», définissez le titre du module, demandez que le titre soit masqué, définissez une position en encodant un intitulé librement, il ne s agit pas dans le cas présent d une position existant dans le template. Demandez que ce module soit publié (il sera publié là où nous y ferons appel). 95

105 5 ) Activez l onglet «Assignation des menus» et assignez le module à toutes les pages. Ceci ne signifie pas que le module apparaîtra sur toutes les pages mais qu il sera disponible sur l ensemble des pages. 6 ) Activez l onglet «Gestionnaire de slides» et comme nous l avons fait pour le diaporama (cf. point page 69), supprimez les slides déjà présents et en utilisant le bouton «Ajouter un slide» chargez les photos voulues en définissant, si vous le souhaitez, un titre, une description pour chaque photo. 96

106 7 ) Les onglets «Options de styles» et «Options des effets» permettent de paramétrer le contrôle d affichage des photos: affichage des miniatures seules ou avec le titre et la description, durée d affichage de chaque photo, lecture automatique ou non 8 ) Enregistrez et fermez le module. 97

107 9 ) À présent, notre objectif est de faire apparaître cette galerie photos dans l article «Photos». Pour ce faire, accédez à la gestion des articles («Contenu» / «Gestion des articles») puis cliquez sur l article «Photos» que nous avions créé précédemment. 10 ) Modifiez le contenu de l article. Valeur définie dans la propriété «Position» du module 11 ) Prévisualisez le site et plus particulièrement l article «Photos». 98

108 Si, avec cette extension, on veut disposer de la possibilité de charger toutes les photos d un dossier en stipulant simplement celui-ci et ne pas être obligé de charger les photos une à une, il faut installer un plugin supplémentaire qui lui est payant. 6.3 Créer des catégories d articles Nous allons créer des catégories d articles afin de regrouper certains d entre eux. 1 ) Une fois connecté à l interface d administration, cliquez sur «Contenu» puis sur «Gestion des catégories». 2 ) Cliquez sur «Nouveau». 3 ) Définissez le titre de la catégorie, son alias puis cliquez sur «Enregistrer & Fermer». 4 ) Définissez la catégorie «Infos utiles» de la même manière. 99

109 6.4 Modifier certains articles existants et créer des articles supplémentaires L objectif ici est de modifier certains articles existants et de créer les articles qui correspondront aux commandes de menus suivantes (elles sont soulignées). Le Club o Le conseil d administration o Historique o Affiliation o Règlement interne o Comptes-rendus AG Infos utiles o Le pense-bête du randonneur o Le matériel o Quelques règles d or Catégorie «Le Club» Pour gérer les articles, il suffit de passer, par exemple, par «Contenu / Gestion des articles». L article «Le Club» qui existe déjà peut être complété de la manière suivante. 100

110 Article «Le conseil d administration» Article «Historique» 101

111 Article «Affiliation» Article «Règlement interne» Dans le cas présent, l objectif est d insérer un lien permettant le chargement du règlement interne au format PDF. 1 ) Placez le curseur à l endroit où le lien doit être inséré puis cliquez sur le bouton «Insérer/Modifier un lien». 2 ) Dans la fenêtre suivante, cliquez sur le bouton «Explorer». 102

112 3 ) Dans le cas présent, nous souhaitons créer un nouveau dossier. Cliquez sur «Nouveau dossier». 4 ) Nommez le dossier puis cliquez sur «Valider». 5 ) Veillez à bien être placé dans le dossier voulu, «pdf» dans le cas présent, puis cliquez sur le bouton «Envoyer». 103

113 6 ) Cliquez sur «Explorer» (sinon vous pouvez également faire glisser le fichier). 7 ) Atteignez le fichier concerné puis effectuez un double-clic sur celui-ci. 8 ) Cliquez sur «Envoyer». 104

114 9 ) Veillez à ce que le fichier voulu soit sélectionné puis cliquez sur «Insérer». 10 ) Complétez les propriétés voulues puis cliquez sur «Insérer». 105

115 Le lien voulu est inséré. Article «Comptes-rendus AG» En suivant une procédure analogue à celle vue pour l article «Règlement interne», créez l article suivant. NB: le dossier «pdf» ne doit pas être créé à nouveau s il l a déjà été L article «Agenda» Nous partons de l hypothèse que l extension «icagenda» a déjà été installée (cf. page 56) Ajouter des catégories d évènements et des évènements dans icagenda Pour ajouter des catégories d évènements: 1 ) Partant de l interface d administration, cliquez sur «Composants» puis sur «!Cagenda». 2 ) Cliquez sur «Ajouter une catégorie». 106

116 3 ) Définissez le titre de la catégorie, la couleur voulue 4 ) Enregistrez et fermez la fenêtre puis créez la catégorie «Evènements organisés par d autres organismes» et enregistrez et fermez. Vous devez obtenir ce qui suit. Pour ajouter des évènements: 1 ) Partant de la fenêtre précédente, cliquez sur «Évènements» puis sur «Nouveau». 107

117 2 ) Définissez l évènement en utilisant les différents onglets voulus. 108

118 3 ) Enregistrez et fermez l évènement créé. 109

119 En suivant cette procédure, créez quelques évènements Créer/activer un module «icagenda» Pour créer/activer un module «icagenda»: 1 ) Cliquez sur «Extensions» puis sur «Gestion des modules». 2 ) Si aucun module de type «icagenda - Calendar» n existe déjà, utilisez le bouton «Nouveau» pour créer un module du type souhaité. Si un module du type voulu existe déjà mais n a pas encore été publié, cliquez sur celui-ci. 3 ) Définissez les propriétés voulues puis enregistrez 110

120 Insérer le module «icagenda» dans l article «Agenda» Pour insérer l agenda dans l article voulu, éditez l article «Agenda» et complétez celui-ci de la manière suivante. Enregistrez et fermez l article. Valeur définie dans la propriété «Position» du module Créer un lien de menu de type «icagenda Liste des évènements» Avec le composant icagenda, il est nécessaire de créer un lien de menu de type «icagenda Liste des évènements». Nous ne souhaitons pas utiliser ce lien de menu, il s agira donc d un menu «fantôme». 1 ) Cliquez sur «Menus / Gestion des menus / Ajouter un menu». 2 ) Définissez le nom de la barre de menus fantômes puis enregistrez et fermez. 111

121 3 ) Dans la barre de menus fantômes, créez le menu fantôme voulu (de type «icagenda Liste des évènements»). 4 ) Enregistrez et fermez. 112

122 6.4.3 Catégorie «Infos utiles» Complétez l article «Infos utiles» de la manière suivante. 113

123 Créez les articles suivants. Article «Le pense-bête du randonneur» 114

124 Article «Le matériel» Avant tout, envoyez quelques images vers le site dans un nouveau dossier «materiel» (cf. page 58). Créez l article voulu en insérant un tableau. NB: dans la suite du cours, l utilisation des tableaux sera souvent évitée et sera, chaque fois que cela est possible, remplacée par l utilisation de «div». Dans l éditeur, vous trouvez différents boutons relatifs aux tableaux. Nous supposons que les paramètres voulus ont été définis par défaut pour l éditeur JCE (cf. page 36). 115

125 Contenu de l article: Cliquez sur «Toogle Editor» afin de basculer vers le code HTML. Nous allons supprimer les traits de bordure et définir la largeur voulue pour la première colonne. 116

126 Article «Quelques règles d or» 117

127 6.5 Compléter le menu principal Complétez le menu principal de la manière suivante en sélectionnant les articles devant être liés aux différentes commandes de menus. 118

128 C est la propriété «Lien parent» qui doit être utilisée pour lier certaines commandes à l entrée de menu voulue. Votre menu est alors complété: 119

129 7 Transférer un site Joomla vers un espace d hébergement Dans ce point, nous allons transférer un site d un serveur local vers un serveur distant sans utiliser d utilitaires de sauvegarde et de restauration. L utilisation d outils de sauvegarde et de restauration sera abordée dans le chapitre suivant. 7.1 Les données fournies par votre hébergeur Une fois que vous aurez choisi une formule d hébergement pour votre site, l hébergeur vous communiquera certaines informations techniques. ATTENTION: toutes les données présentées ci-après ne sont pas toujours fournies. L accès au panneau de contrôle et les données FTP peuvent suffire car ensuite via le panneau de contrôle vous pouvez créer vos bases de données Panneau de contrôle (d autres dénominations peuvent être utilisées: Control Panel, panneau de configuration) Adresse /URL pour accéder au panneau de contrôle: Nom d utilisateur: Mot de passe: FTP Hôte: Nom d utilisateur: Mot de passe: xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx (adresse FTP) xxxxxxxxxx xxxxxxxxxx Serveur IMAP: Serveur POP3: Serveur SMTP: Webmail: xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx Xxxxxxxxxx (adresse / URL) MySQL Hôte: Base de données: Nom d utilisateur: Mot de passe: xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx phpmyadmin phpmyadmin: Nom d utilisateur: Mot de passe: xxxxxxxxxx (adresse / URL) xxxxxxxxxx xxxxxxxxxx 7.2 Transférer la base de données de votre serveur local vers votre espace d hébergement Créer une base de données dans l espace d hébergement La première étape consiste à créer la base de données au niveau de l hébergement. C est dans cette base que nous viendrons importer les données de notre site qui est actuellement en local. 1 ) En utilisant les données fournies par l hébergeur (généralement en passant par le panneau de contrôle), accédez à phpmyadmin. NB: d un hébergeur à l autre, l interface peut être différente. 120

130 2 ) Cliquez sur «Nouvelle base de données». Attention: suivant la version de phpmyadmin, l option peut être différemment disposée. 3 ) Encodez le nom de la nouvelle base de données. Retenez bien ce nom, il sera nécessaire plus loin dans la procédure. Cliquez sur «Créer». 4 ) Vous retrouvez la nouvelle base de données dans la liste. Notes: Avec certaines formules d hébergement, vous n avez droit qu à une seule base de données. La procédure de création d une nouvelle base de données peut être différente chez certains hébergeurs. 121

131 7.2.2 Exporter la base de données de votre serveur local Nous supposons que les services de WampServer ont été démarrés. Procédure pour exporter la base de données locale: 1 ) Accédez à phpmyadmin. 2 ) Cliquez sur «Exporter». Sélectionnez l option «Personnalisée -» puis la base de données que vous souhaitez copier vers votre hébergeur. Il s agit de la base liée au site Internet qui sera copié chez l hébergeur. 122

132 Dans le cas présent, nous allons importer la base de données locale dans la base de données distante dont «le berceau» a déjà été créé. L instruction CREATE DATABASE n est donc pas cochée. 3 ) Cliquez sur «Exécuter». 123

133 4 ) Sélectionnez l option «Enregistrer le fichier» puis cliquez sur OK. 5 ) Sélectionnez un dossier et définissez un nom pour le fichier. Cliquez sur «Enregistrer» Importer la base de données dans la base située dans l espace d hébergement Procédure pour importer la base de données dans la base située dans l espace d hébergement: 1 ) Connectez-vous au panneau de contrôle de votre espace d hébergement en utilisant les données qui vous ont été communiquées par votre hébergeur. 2 ) Accédez à phpmyadmin. NB: d un hébergeur à l autre, l interface peut être différente. 124

134 3 ) Cliquez sur la base dans laquelle l importation va être réalisée puis cliquez sur «Importer». 4 ) Cliquez sur «Parcourir». 5 ) Recherchez puis effectuez un double-clic sur le fichier précédemment généré et contenant les données à importer. 6 ) Cliquez sur «Exécuter». 125

135 7 ) Le système affiche un message confirmant que l importation est terminée Ajouter un utilisateur ayant accès à la base de données Vous devez ajouter un utilisateur ayant accès à la base de données précédemment créée. La procédure pour réaliser cette action peut fortement différer d un hébergeur à un autre. Le nom de cet utilisateur et le mot de passe lui correspondant seront indiqués dans le fichier «configuration.php». 7.3 Transférer les fichiers Il nous reste à transférer les fichiers relatifs à Joomla, aux extensions vers l espace d hébergement. Pour ce faire: 1 ) Démarrez FileZilla (notre client FTP (File Transfer Protocol)). 2 ) Ouvrez le menu «Fichier» puis sélectionnez «Gestionnaire de Sites». 3 ) Cliquez sur «Nouveau Site». 4 ) Définissez un nom pour la connexion FTP, l hôte, le protocole, le type d authentification, l identifiant NB: le type d authentification «Demander le mot de passe» est contraignant dans le sens où à chaque lancement de FileZilla, le système vous demandera d encoder le mot de passe lors de la connexion. Cependant, il est prudent de travailler de cette manière. 5 ) Cliquez sur «Connexion». 126

136 6 ) Le système vous demande d introduire le mot de passe. Ensuite, cliquez sur «OK». 7 ) Atteignez le dossier (en local) contenant les fichiers du site à copier vers l espace d hébergement. Sélectionnez les dossiers, fichiers puis faites les glisser de la gauche vers la droite. ATTENTION Suivant l hébergement, il faut parfois (et même souvent) envoyer les fichiers dans un dossier bien précis chez l hébergeur. Par exemple: httpdocs 8 ) La copie s effectue alors. Cela peut prendre un certain temps et même un temps certain. Patientez. 127

137 7.4 Adapter le fichier configuration.php Le fichier «configuration.php» venant de votre site local n est pas adapté pour l hébergement distant. Nous allons l adapter. Pour appliquer la procédure qui suit, nous supposons que le programme Notepad++ est installé sur votre ordinateur. 1 ) Ouvrez le dossier contenant le site en local. 2 ) Effectuez un copier/coller du fichier «configuration.php». Vous pouvez coller ce fichier où vous le souhaitez sur votre ordinateur. 3 ) Effectuez un clic droit sur le fichier «configuration.php» que vous venez de coller dans le dossier de votre choix. Dans le menu contextuel, cliquez sur l option «Edit with Notepad++». 128

138 4 ) Modifiez le fichier «configuration.php» au niveau des paramètres suivants. $host: serveur contenant la base de données. Cette information peut être trouvée via phpmyadmin. Cette donnée diffère d un hébergeur à un autre. $user et $password correspondent à ce qui a été défini dans le point à la page 126. $db: nom de la base de donnée créée dans l espace d hébergement. Dans le cadre du cours, un fichier vous sera fourni et la procédure sera expliquée pour que vous sachiez comment connaître les valeurs à donner à $log_path et à $tmp_path. 129

139 5 ) Enregistrez le fichier précédemment modifié puis transférez-le dans l espace d hébergement en remplacement de la version précédente. 6 ) Atteignez le site distant en utilisant l adresse que vous avez choisie chez votre hébergeur (nom de domaine ou sous-domaine). 7.5 Configurer le site mis en ligne Une fois le site en ligne, il faut: tester le bon fonctionnement des différentes parties du site; via la configuration du site, autoriser le référencement (l indexation) du site par les moteurs de recherche, sauf évidemment, si vous ne souhaitez pas qu il soit indexé. Cette autorisation se fera via «Système/Configuration/Robots»; optimiser le référencement; mettre en place une stratégie de sécurité et de sauvegarde; 130

140 SAUVEGARDE ET SÉCURITÉ DE VOTRE SITE WEB 131

141 1 La sécurité: aperçu global Source: Merci à Simon Grange pour ses publications. Une fois que votre site Joomla est en ligne, vous n'avez pas fini votre travail. Déjà, il est presque certain que vous allez vouloir ajouter de nouveaux contenus, modifier du contenu existant et peut être aussi ajouter de nouvelles fonctionnalités à votre site. Mais ce n'est pas le sujet de ce chapitre, une tâche qui va vous demander également un peu d'investissement concerne la sécurité de votre site. Le but de ce chapitre est de vous donner les moyens de remettre rapidement votre site sur pied si vous rencontrez un problème survenu après le piratage de votre site, une mauvaise manipulation (de votre part ou de celle d'un autre administrateur du site), d'un problème rencontré par votre hébergeur... mais surtout d'éviter ces problèmes. Voici les quelques règles que vous devrez constamment respecter. 1.1 Sauvegarde, sauvegarde, sauvegarde La règle numéro 1 est sans aucun doute les sauvegardes. Même si vous vous faites hacker, si vous faites des sauvegardes régulières de votre site, vous pourrez, dans la grande majorité des cas, restaurer votre site. Ces sauvegardes ne doivent surtout pas être stockées sur le serveur sur lequel est votre site, vous devez les transférer, et les tester. Une sauvegarde non testée ne doit pas être considérée comme une sauvegarde. D'une manière générale, vous devez sauvegarder régulièrement votre site. Vous devez le sauvegarder avant et après avoir installé, désinstallé ou mis à jour une extension ou avant et après avoir fait la mise à jour de Joomla lui-même. Vous devez faire une sauvegarde après avoir créé du contenu. Vous devez faire une sauvegarde avant et après avoir apporté des modifications et surtout, vous devez faire une sauvegarde avant de faire toute intervention dont vous n'êtes pas certain du résultat. Si vous plantez votre site ou si un piratage survient, il y a des chances pour que la meilleure des solutions soit de restaurer une sauvegarde. Si cette sauvegarde est ancienne de 3 mois, vous perdrez 3 mois de travail. Pour sauvegarder un site Joomla, il faut faire une sauvegarde des fichiers ET de la base de données. Pour voir comment sauvegarder votre site, reportez-vous au point 2 figurant à la page Effectuer les mises à jour La règle numéro 2 consiste à toujours faire les mises à jour de Joomla et des extensions installées sur le site. Avec Joomla 3, les mises à jour se font en quelques clics. Pour les extensions tierces, certaines se font également en quelques clics, et pour les autres, vous devez simplement 132

142 télécharger un patch à installer comme n'importe quelle extension ou à envoyer par FTP. Cela ne prend que quelques minutes. A chaque mise à jour, les développeurs rendent publiques les changements qu'apporte le patch, il est donc important de faire rapidement ces mises à jour. En effet, si le développeur d une extension indique que telle mise à jour corrige tel problème de sécurité, tout le monde est mis au courant de la faille qui existait. Avant de faire une mise à jour, pensez à faire une sauvegarde. 1.3 Mots de passe La règle numéro 3 consiste à choisir des mots de passe solides. Evitez tous les mots simples, votre nom, votre prénom, votre date de naissance... Pour construire un mot de passe solide, choisissez par exemple une phrase, sélectionnez toutes les premières lettres (ou les deuxièmes, ou les troisièmes) et faites-en un mot. Mettez une lettre sur deux de ce mot en majuscule, et ajoutez des numéros. Cette phrase sera simple à retenir, et le mot de passe difficile à casser. Des caractères spéciaux peuvent également être ajoutés. De même, il est fortement déconseillé de choisir "admin" comme nom d utilisateur lorsque vous êtes le super utilisateur du site. Si vous utilisez FileZilla, ne stockez pas vos mots de passe (ils sont stockés non-cryptés). Ce point sera à nouveau abordé plus loin dans les présentes notes. 1.4 N'installez que les extensions utiles Ne faites pas l'erreur d'installer des extensions en grand nombre. Vous ne devez installer sur votre site que les extensions utiles à son fonctionnement. Beaucoup de débutants installent des extensions qu'ils trouvent sympas, ou tout simplement pour les tester. Avant d'installer une extension sur votre site, assurez-vous qu'elle sera utile, qu'elle répond à vos besoins, et installez-la sur un site de tests au préalable afin de l'essayer. Si vous avez sur votre site des extensions inutiles, désinstallez-les. Chaque extension demande de la maintenance, et chaque extension non à jour est une porte d'entrée pour les hackers. Vous pouvez également consulter la Vulnerable Extensions List qui référence toutes les extensions Joomla vulnérables: Cette liste doit être considérée avec prudence, en effet, certaines extensions dangereuses peuvent ne pas y figurer et il peut arriver qu une extension qui a été mise à jour, afin de corriger une faille, y figure encore. 1.5 Ne pas utiliser les sites «warez» Les sites warez sont des sites sur lesquels on trouve des contenus piratés (extensions, logiciels, musique, vidéos ) mis à disposition sans paiement des droits aux auteurs de ces contenus. Le terme «warez» vient d une déformation du mot anglais «wares» qui signifie «marchandises». 133

143 Sans parler du fait qu'en téléchargeant des extensions provenant de sites warez, on vole le travail d'un développeur; en les installant sur un site, on risque d installer également du code malicieux intégré par les personnes proposant ces extensions. Par la suite, ces codes servent de portes pour les pirates. Pour rappel, les Templates (modèles) sont également considérés comme étant des extensions. 1.6 Choisissez un bon hébergeur De nombreux utilisateurs souhaitent à tout prix héberger leur site chez un hébergeur gratuit. Alors nous allons le dire une fois pour toute: il n'est pas possible de faire fonctionner correctement Joomla 3 sur ces "hébergeurs". Et si par chance vous parvenez à installer Joomla sur un de ces hébergeurs, non-seulement vous rencontrerez des bugs, mais vous rencontrerez certainement aussi des problèmes de sécurité. Mais pour effectuer des tests durant 90 jours, vous avez: Seul petit bémol, c est en anglais. 1.7 Droits sur les dossiers et fichiers Vous avez parfois besoin de modifier les fichiers et dossiers de votre site Joomla. Avant de toucher à ces droits, soyez certain de ce que vous faites et/ou demandez conseil à votre hébergeur. Pour une question simple de sécurité, ces droits ne doivent JAMAIS être en 777 (sauf sur recommandation spéciale de votre hébergeur). Généralement, ils doivent être en 705/755 pour les dossiers et 604/644 pour les fichiers. Le premier chiffre correspond à vos droits. Le second à votre groupe. Le troisième à tous les utilisateurs. Quelques exemples: Droits de votre utilisateur: Lecture et écriture (6) 134

144 Droits de votre groupe: Lecture seule (4) Droits de tous les utilisateurs: Lecture seule (4) Valeur octale: CHMOD 644 (droits par défaut d'un fichier) Droits de votre utilisateur: Tous les droits (7) Droits de votre groupe: Lecture et exécution (5) Droits de tous les utilisateurs: Lecture et exécution (5) Valeur octale: CHMOD 755 (droits par défaut d'un répertoire) Droits de votre utilisateur: Tous les droits (7) Droits de votre groupe: Tous les droits (7) Droits de tous les utilisateurs: Tous les droits (7) Valeur octale: CHMOD 777 (fortement déconseillé pour des raisons de sécurité!) Droits de votre utilisateur: Lecture et écriture (6) Droits de votre groupe: Lecture et écriture (6) Droits de tous les utilisateurs: Aucun droit (0) Valeur octale: CHMOD Extensions tierces Vous trouverez plusieurs extensions vous permettant d'améliorer la sécurité de votre site. Voici quelques exemples aesecure L extension aesecure vous permet de sécuriser votre site Joomla à différents niveaux. L'extension intercepte tous les accès à votre site internet avant même que l'url n'atteigne vos pages php. De cette manière, Joomla ne verra même pas une URL dangereuse, car elle sera bloquée préalablement par aesecure. aesecure vous permet également de "cacher" votre page de connexion à l'administration, de vérifier les droits de vos fichiers et dossiers, de "cacher" votre version de Joomla, etc. aesecure est très simple à mettre en place, et surtout très simple à administrer car toutes les fonctionnalités sont accessibles à partir d'un seul écran. Chaque fonctionnalité peut être activée/désactivée simplement en cliquant sur un bouton. Vous retrouverez plus de détails sur aesecure plus loin dans ce cours AdminTools L extension Admintools est un composant Joomla, vous proposant différentes fonctionnalités, comme "cacher" la page de connexion de votre administration, modifier le préfixe des tables de votre base de données, apporter des sécurités supplémentaires en modifiant votre fichier htaccess. Il a été question de l installation de cette extension à la page

145 1.8.3 Autres extensions Sur le JDE/JED (journal des extensions: ou en français (beaucoup moins d extensions proposées): vous trouverez d autres extensions liées à la sécurité. Vous pouvez également trouver d'autres applications intéressantes, par exemple Crawlprotect, une extension externe à Joomla qui bloque les attaques envers votre site. Même si vous respectez à la lettre toutes ces règles, vous devez garder en tête que le risque 0 n'existe pas. Il y a toujours une chance, aussi infime qu'elle soit que vous vous fassiez hacker. Dans ce cas, vous aurez fait la majorité du travail si vous avez respecté la Règle n

146 2 Sauvegarder, déplacer, restaurer un site À présent, nous allons voir comment faire une sauvegarde d'un site Joomla 3, comment transférer cette sauvegarde en local (sur votre ordinateur), et comment la réinstaller sur un serveur local afin de la tester. Il existe plusieurs façons de sauvegarder un site Joomla, nous allons en voir deux, la sauvegarde à l'aide du composant Akeeba Backup qui permet de sauvegarder un site en quelques clics et la sauvegarde «manuelle». Pour rappel, les données d'un site Joomla sont stockées à deux endroits différents: dans différents fichiers relatifs à l application Joomla, aux extensions dans une base de données. Pour que la sauvegarde soit complète, et pour que le site fonctionne, il faut évidemment sauvegarder ces deux parties. 2.1 Sauvegarder à l'aide du composant Akeeba Backup Akeeba Backup est un composant gratuit permettant de faire une sauvegarde d'un site Joomla (fichiers + base de données) et de réinstaller cette sauvegarde sur n'importe quel serveur (local ou distant) remplissant les pré-requis de Joomla Téléchargement et installation d'akeeba Backup Pour télécharger Akeeba Backup, il suffit de vous rendre sur le site (menu «Étudiants») ou sur le site de l'auteur et de choisir la dernière version stable. Ensuite, Akeeba Backup s'installe comme n'importe quelle extension Joomla. La procédure a déjà été abordée dans le cadre du point 3.2 à la page 54. Si Akeeba Backup n'est pas en français, vous pouvez télécharger les fichiers de langue comme expliqué dans le tableau figurant à la page 55. Akeeba Backup est donc installé sur votre site. Pour accéder au panneau d'administration d'akeeba, rendez-vous dans «Composants» puis «Akeeba Backup» Akeeba Backup configuration post-installation La première fois que vous accédez à l administration d Akeeba Backup, vous devez prendre connaissance de certaines informations relatives à Akeeba. 1 ) Cliquez sur «Show post-installation messages». 137

147 2 ) Cliquez sur «Run the Configuration Wizard». Vous pouvez suivre l évolution de la configuration. 3 ) Cliquez sur «Configuration». 138

148 4 ) Vous pouvez par exemple choisir le répertoire où seront placées vos sauvegardes. Par défaut, ce répertoire est «administrator/components/com_akeeba/backup». Pour des raisons de sécurité, il est important d'en choisir un nouveau. Il est également possible de définir le nom de la sauvegarde par défaut Dans le cas présent, nous travaillons en local. 5 ) Dans le cas présent, seul le dossier de sauvegarde a été modifié. 139

149 6 ) Cliquez sur «Enregistrer & Fermer». 7 ) La configuration est réalisée. Ensuite, cliquez sur «Show post-installation messages». NB: si vous «perdez» cette page, vous la retrouverez automatiquement en vous replaçant dans le volet «Administration» d Akeeba Backup. 8 ) Cliquez sur «Upgrade profiles to ANGIE». 9 ) Cliquez sur les différents boutons «Cacher ce message» après avoir lu ceux-ci. 140

150 10 ) Le système vous indiquera que vous avez lu et caché tous les messages Sauvegarder votre site avec Akeeba Backup Pour sauvegarder votre site avec Akeeba Backup: 1 ) Connectez-vous à l administration du site (si ce n est déjà fait). 2 ) Cliquez sur «Composants» puis sur «Akeeba Backup». 3 ) Cliquez sur «Sauvegarder». 141

151 4 ) Choisissez une description pour votre sauvegarde. Par défaut, la date du jour sera utilisée. Vous pouvez inscrire un commentaire pour votre sauvegarde. Cliquez sur le bouton «Sauvegarder». Vous pouvez suivre la progression de la sauvegarde. Surtout, NE QUITTEZ PAS CETTE PAGE avant la fin de la sauvegarde, sinon elle serait interrompue. Selon la taille du site, cela peut prendre plusieurs minutes et vous pouvez parfois avoir l impression que la sauvegarde est bloquée (le pourcentage de progression stagne voire régresse) alors qu il n en est rien. 142

152 5 ) Une fois la sauvegarde terminée Akeeba vous affiche un message. 6 ) Cliquez sur le bouton «Gestion des sauvegardes» afin d afficher toutes les sauvegardes effectuées. Vous avez accès à toutes vos sauvegardes, vous pouvez les télécharger (attention: cf. remarque ci-après), les supprimer une fois que vous les avez sauvegardées ailleurs Transfert d'une sauvegarde Akeeba sur votre disque Une fois votre sauvegarde effectuée, vous souhaiterez la transférer en lieu sûr et peut être (c est vivement conseillé) l'installer en local ou sur un autre serveur afin de vérifier qu'elle soit complète. Votre sauvegarde est contenue dans une archive ayant l extension.jpa du style: site-xxxxxxx-aaaammjj-xxxxxx.jpa Si votre site est en local, c est simple, votre sauvegarde peut être récupérée en utilisant l Explorateur de fichiers en vous rendant dans le dossier défini lors de la sauvegarde. Si votre site est hébergé sur un serveur web externe, vous pouvez télécharger le fichier de sauvegarde via votre l administration: Composants Akeeba Backup Gestion des sauvegardes colonne «Gérer & télécharger». Mais cela n'est pas la meilleure solution (une fenêtre popup vous le rappellera si vous cliquez sur le bouton). Il est vivement conseillé de transférer cette sauvegarde par FTP. Pour cela, il suffit de vous connecter à votre serveur à l'aide d'un client FTP, comme FileZilla par exemple, et de vous rendre dans le dossier que vous avez configuré dans le paramètre «Répertoire des sauvegardes». Si vous n'avez pas modifié le répertoire (mais comme indiqué précédemment, il est conseillé de le modifier), vos sauvegardes sont rangées dans le répertoire administrator/components/com_akeeba/backup, sinon, dans le répertoire que vous avez choisi. En utilisant FileZilla, une fois que vous êtes dans le dossier contenant la sauvegarde, faites glisser le fichier voulu de la droite vers la gauche dans un dossier que vous choisirez localement. 143

153 2.1.5 Restauration de vos sauvegardes Akeeba avec Akeeba Kickstart Il existe différentes façons de restaurer une sauvegarde Akeeba Backup, vous pouvez découvrir ces différentes façons en consultant la documentation officielle d'akeeba Backup. Nous allons étudier comment restaurer votre site sur un serveur local en utilisant Akeeba Kickstart. Pour cela, nous aurons besoin: d'une archive.jpa contenant la sauvegarde de votre site, d'un ordinateur avec un serveur local (MAMP, XAMPP, WAMP...), du pack Akeeba Kickstart téléchargeable sur le site (menu «Étudiants») ou sur le site Akeeba: Ensuite, vous pouvez suivre les étapes reprises ci-après Création d'une base de données Pour créer une base de données: Connectez-vous à votre interface phpmyadmin, puis créez une nouvelle base: NB: tous les services de WampServer doivent être démarrés. Retenez bien le nom que vous avez donné à votre base. 144

154 Extraction des données de la sauvegarde 1 ) Pour extraire les données de la sauvegarde Akeeba, créez un nouveau dossier à la racine de votre serveur (c:\wamp\www) et placez-y l'archive.jpa. Pour des raisons pratiques d'organisation, vous pouvez créer des dossiers et sous-dossiers afin de facilement vous y retrouver. Par exemple (à adapter): 2 ) Ensuite, décompressez (effectuez une extraction) le pack kickstart-core-xxxx que vous avez précédemment téléchargé. Dans ce pack, vous allez trouver les deux fichiers suivants: kickstart.php (qui permet de décompresser l'archive), fr-fr.kickstart.ini (qui permet d'avoir l'interface en français). 3 ) Placez ces deux fichiers dans le dossier dans lequel vous avez placé votre archive.jpa 4 ) Avec un navigateur, atteignez l adresse où vous avez placé les fichiers comme expliqué précédemment. Dans le cas exposé précédemment, il s agit de: localhost/tests_sauvegardes/site01/ _ ) Cliquez sur kickstart.php (ou ajoutez-le directement dans la barre d'adresses). 145

155 6 ) La page suivante s'affiche. Après avoir pris connaissance du message, cliquez sur le lien «Cliquez ici». 7 ) Si vous avez suivi ce tutoriel depuis le début, vous n'avez rien à modifier, cliquez simplement sur le bouton «DÉMARRER». 146

156 8 ) L'extraction se lance. Ne quittez surtout pas cette page, et laissez l'extraction se faire. Suivant la taille du site, cela peut prendre quelques minutes ou plus... 9 ) Si tout se déroule correctement, vous arrivez sur cette page. Cliquez sur le bouton afin de lancer le programme d'installation. 147

157 10 ) Si tout est au vert, cliquez sur «Suivant». NB: l essentiel est que tous les indicateurs à gauche soient au vert. À droite, il peut y avoir certains éléments à l orange. 11 ) Définissez les données voulues pour la restauration de la base de données puis cliquez sur «Suivant». 12 ) La fenêtre popup suivante s'ouvre pendant l'insertion des contenus dans la base de données. 148

158 13 ) Une fois la restauration de la base terminée, cliquez sur le bouton «Étape suivante». 14 ) Entrez un nom pour le site, ainsi qu'une adresse mail valide. Choisissez un identifiant, associez lui un mot de passe. ATTENTION, modifiez également le répertoire temporaire et le répertoire des logs de manière adéquate. Cliquez sur le bouton «Suivant». C:\wamp\www\tests_sauvegardes\site01\ _2047\tmp C:\wamp\www\tests_sauvegardes\site01\ _2047\logs À adapter selon votre cas. 15 ) Cliquez sur le bouton «Supprimez le répertoire d installation». 149

159 16 ) Ensuite, une fenêtre popup s'ouvre. Cliquez sur «Visitez le frontal du site». Une fois le site visualisé en mode Frontend, fermez l onglet présentant le site et vous découvrirez le bouton «NETTOYAGE», présenté ci-après. Celui-ci provoque la suppression des fichiers suivants: Nous supposons donc que le fichier de sauvegarde «site-localhost jpa» dans l exemple présenté, a été conservé à un autre emplacement sinon, vous allez le perdre. 17 ) Cliquez sur «Nettoyage». 18 ) Les boutons suivants permettent d accéder au frontal ou à l administration du site. Note: Vous pouvez accéder à votre site à l'adresse (ces adresses doivent être adaptées à vos cas): localhost/tests_sauvegardes/site01/ _2047/ localhost/tests_sauvegardes/site01/ _2047/administrator 19 ) Faites plusieurs vérifications/tests (aussi bien en Frontend qu'en Backend) afin de vous assurer que tout fonctionne correctement. 20 ) Stockez précieusement votre archive.jpa 150

160 2.2 Sauvegarde manuelle Sauvegarder un site manuellement n'a rien de compliqué si vous avez en votre possession: vos identifiants FTP, vos identifiants à l'interface phpmyadmin de votre hébergeur. Si vous n'avez pas ces données, demandez-les à votre hébergeur. Comme nous venons de le voir, un site Joomla est composé de deux parties qu il faut sauvegarder. Pour transférer vos fichiers et dossiers, vous avez besoin d'un client FTP. Par exemple, vous pouvez utiliser FileZilla qui est un client FTP compatible Windows, Mac et Linux et qui est gratuit. La procédure est semblable à ce qui a été expliqué au point «7.3 Transférer les fichiers» figurant à la page 126. La seule différence réside dans le fait que les fichiers seront copiés de l hébergeur vers un disque dur local. Les fichiers seront glissés de la droite vers la gauche dans l interface de FileZilla. Pour sauvegarder la base de données de votre site, vous devez vous connecter à l'interface phpmyadmin de votre hébergeur puis vous pouvez utiliser l option «Exporter» en veillant bien à exporter toute la base de données. Vous obtiendrez ainsi un fichier.sql que vous pourrez télécharger sur votre ordinateur. Ensuite, réimportez la base de données sur votre serveur MySQL local. Copiez les fichiers du site dans un dossier librement défini au niveau de C:\wamp\www. Adaptez le fichier «configuration.php» puis atteignez le site (en local) via le navigateur de votre choix. Si tout fonctionne correctement, conservez précieusement les fichiers et la base de données sauvegardés. Datez vos sauvegardes. 3 Sécuriser votre site web En pratique Voici quelques conseils pour effectuer une sécurisation de base de votre site Joomla. Des dizaines d autres points pourraient être abordés. Il en sera question ultérieurement. Ajoutez la ligne suivante dans le fichier «index.php» du template utilisé afin de cacher le fait qu il s agit d un site Joomla: <?php JFactory::getDocument()->setGenerator('');?> Activez le mode SEF (Search Engine Friendly) si ce n est déjà fait. Passez par «Système» puis «Configuration» pour vérifier ce point. Ceci permet de ne pas avoir des URL trop techniques s affichant dans la barre d adresses du navigateur et qui permettraient à un hacker de procéder par «essais/erreurs» pour atteindre d autres parties du site. De plus, c est très bien pour le référencement d activer le mode SEF. 151

161 Chaque fois que cela est possible (certains hébergeurs pourraient vous y contraindre), n activez pas la couche FTP dans Joomla (par défaut elle ne l est pas). Passez par «Système» puis «Configuration» (onglet «Serveur») pour vérifier ce point. Ne maintenez pas le mode «Débogage système» activé sur un site en ligne. Passez par «Système» puis «Configuration» (onglet «Système») pour vérifier ce point. 152

162 Si ce n est déjà fait, installez l extension «Admin Tools». Ne faites ce qui suit que lorsque le site est hébergé chez un hébergeur externe sur un serveur utilisant Linux et non pas Windows. Ne faites donc pas cette opération lorsque le site est en local (sur votre ordinateur). Atteignez «Admin Tools» en cliquant sur «Composants» puis sur «Admin Tools».Dans la fenêtre qui apparaît, cliquez sur «Protection d accès à l Administration». Définissez un identifiant et un mot de passe (différents des autres identifiants et mots de passe déjà définis précédemment). Ces données vous seront demandées avant de pouvoir atteindre la fenêtre de connexion à l administration. Si votre accès à l'administration du site devient impossible, supprimez les fichiers «.htaccess» et «.htpasswd» du répertoire «administrator» en utilisant votre client FTP (FileZilla) ou le gestionnaire de fichiers de votre serveur (Explorateur de fichiers Windows ). 153

163 4 Conclusion Sauvegardez votre site! Personne ne le répètera jamais assez: les sauvegardes sont très importantes. En cas de problème, de mauvaise manipulation, de piratage, de problème chez l'hébergeur à partir du moment où vous avez une sauvegarde complète de votre site, plus de 80% du travail nécessaire à le remettre en ligne est fait. Faites des sauvegardes. Sauvegardez votre site régulièrement Il est important de sauvegarder votre site de façon régulière (la fréquence dépend de l activité sur le plan des mises à jour ), afin de perdre le moins de travail possible si un problème arrive. Sauvegardez votre site avant chaque mise à jour (de Joomla ou d'une extension) et avant chaque nouvelle installation d'une extension. Testez vos sauvegardes Comme déjà dit, une sauvegarde non-testée ne doit pas être considérée comme une sauvegarde. Donc transférez vos sauvegardes en local et/ou sur un site de test et testez-les afin de vous assurer qu elles sont complètes et utilisables. Ne laissez pas vos sauvegardes sur le même serveur que celui de votre site, les éventuels hackeurs y auraient accès. Dès que votre sauvegarde est effectuée, transférez-la, testez-la et rangez-la en lieu sûr. Source et compléments: 154

164 CAS N 2: RENFORCEMENT SITE «CARNETS DE VOYAGES» 155

165 Au terme de l étude de ce deuxième cas, vous serez capable de(d ): installer un template (modèle), désinstaller un (modèle), identifier les positions disponibles dans un template (modèle), installer une extension, activer et désactiver une extension, désinstaller une extension, créer des articles et appliquer une mise en forme de base, créer et utiliser des modules de différents types, implémenter des galeries photos, créer et publier un menu, implémenter un fil de navigation, insérer un module de recherche interne, insérer un module de connexion, créer un formulaire de contact, insérer des QR Codes, créer des nouveaux utilisateurs et de gérer les droits d accès, modifier certains contenus via le frontend, transférer le site chez un hébergeur. Donc, dans ce deuxième cas, nous utiliserons peu d'html et peu de CSS. 1 Présentation du contexte L objectif est de créer un site Internet permettant à différentes personnes de partager des carnets de voyages: récits, photos, liens Pour qu une personne puisse ajouter des carnets de voyages sur le site, elle devra compléter un formulaire. Après avoir analysé la demande, l administrateur du site pourra créer un nouveau rédacteur au niveau du site. Les rédacteurs pourront agir au travers du frontend. Maquette du site: Bannière supérieure Fil de navigation Module de recherche Menu vertical Module de connexion Copyright xxxxx Mentions légales Politique de confidentialité Contacts 156

166 Aperçu du site: 2 Mettre en place la base du site Procédure à suivre: 1 ) Installez une nouvelle instance de Joomla pour notre nouveau site. Celui-ci sera nommé «site02». Le nom donné à la base de données peut être «bd_site02». Si nécessaire, la procédure figure à la page ) Installez le template (modèle) «carnets_voyages» contenu dans le fichier «carnets_voyages.zip» (si nécessaire, cf. point «2.2 Installer un nouveau template (modèle)» figurant à la page 49). Activez ce template comme modèle par défaut pour la partie frontend. 3 ) Installez les extensions suivantes (si nécessaire, cf. point «Installer des extensions» figurant à la page 54). Admin Tools Akeeba Backup BetterPreview BreezingForms Lite GoogliC Analytics JCE Editor JSN Image Show Mediabox CK (ne pas oublier d activer cette extension) Playlist CK Xmap 157

167 4 ) Effectuez les actions reprises au point «4 À faire directement après l installation d un nouveau site Joomla» figurant à la page ) Transférez les photos voulues via l outil «Gestion des médias» ou tout autre outil susceptible de convenir. 6 ) Créez les articles suivants (si nécessaire, cf. point «5.1 Gérer les articles» figurant à la page 63). Accueil Pour les carnets de voyages: Créez une catégorie d articles nommée «Carnets» (si nécessaire, cf. point «6.3 Créer des catégories d articles» figurant à la page 99). Créez les articles suivants, ils seront classés dans la catégorie «Carnets». 158

168 Bolivie Le trait horizontal ci-dessus correspond à un lien «Lire la suite» que vous pouvez créer via le bouton suivant de l éditeur: Ensuite l objectif est de placer la photo à gauche et le texte d introduction à droite. Pour ce faire, sélectionnez la photo puis cliquez sur le bouton «Insérer/Modifier un style XHTML»:. 159

169 Complétez la boîte de dialogue de la manière suivante puis appliquez et fermez. Voici ce qui sera obtenu moyennant une configuration correcte du lien de menu qui conduira vers les carnets de voyage. En suivant une procédure analogue, créez les articles suivants. Ceux-ci doivent être classés dans la catégorie «Carnets». Argentine 160

170 Pyrénées Liens Les éléments ci-dessus ont été insérés dans un tableau: 6 lignes et 1 colonne. Adresses concernées: Pour obtenir la présentation souhaitée, sélectionnez «Vaccinations» puis cliquez sur le bouton «Insérer/Modifier un style XHTML». 161

171 Complétez la boîte de dialogue proposée de la manière suivante. Effectuez un clic droit dans la cellule contenant le mot «Vaccinations» puis sélectionnez «Cellule / Propriétés de la cellule». 162

172 Activez l onglet «Avancé», définissez la couleur de fond souhaitée puis validez. Il faut ensuite répéter la procédure pour les différentes lignes en utilisant les couleurs adéquates. Les couleurs des caractères et du fond des cellules sont utilisées en alternance. Photos Pour insérer les galeries photos dans l article «Photos», installez l extension «JSN ImageShow» si ce n est déjà fait. Ensuite cliquez sur «Composants» puis sur «JSN ImageShow». Pour créer une première galerie, suivez les illustrations reprises ci-après. NB: la «showlist» permet de choisir les photos devant apparaître dans la galerie. 163

173 Une fois le titre défini, cliquez sur «Enregistrer». Au niveau de l onglet «Source des images de SHOWLIST», cliquez sur «Image Folder». Atteignez le dossier contenant les photos voulues puis faites les glisser de la gauche vers la droite. 164

174 Cliquez sur «Enregistrer», puis cliquez sur «Menu» puis sur «Showcases / Create new showcase». NB: le «showcase» permet de définir comment les photos seront présentées (showcase = vitrine). Définissez notamment un titre pour le nouveau showcase. Cliquez sur «Enregistrer». 165

175 Dans l onglet «THEMES DU SHOWCASE», sélectionnez un thème. Tous les éléments sont personnalisables via différentes propriétés soit en passant par les onglets soit en cliquant dans l aperçu. 166

176 Dans le cas présent, il a été demandé de cacher les informations du panneau de présentation. Cliquez sur «Enregistrer» puis sur «Menu / Démarrage». NB: il ne faut pas s étonner si le système demande d enregistrer les modifications même si cela a déjà été fait. Les options obtenues et présentées ci-après permettent d obtenir la syntaxe qui permettra d insérer la galerie dans un article par exemple. 167

177 Dans le cas présent, nous faisons encore plus simple. Ouvrez l article «Photos» puis cliquez sur le bouton «ImageShow». 168

178 Effectuez les choix voulus puis cliquez sur «Insérer». Résultat obtenu: L option «JSN ImageShow» présente dans le menu «Composants» vous permet de revenir dans le panneau de contrôle du composant «JSN ImageShow». 169

179 Contacts Créez les éléments suivants dans l article «Contacts». Les QR Codes sont mis à votre disposition dans deux formats. Ce sont les vignettes qui seront insérées dans le tableau. Les QR Codes doivent être copiés au niveau du site. NB: pour créer vos propres QR Codes, vous pouvez utiliser le site suivant par exemple: 170

180 L objectif est que l utilisateur puisse cliquer sur un des QR Codes et que celui-ci s agrandisse pour pouvoir facilement le scanner avec un smartphone par exemple. Nous supposons que l extension «Mediabox CK» a été installée et activée. Sélectionnez le QR Code voulu puis cliquez sur le bouton «Insérer/Modifier un lien». Cliquez sur le bouton «Explorer». 171

181 Atteignez le dossier voulu puis cliquez sur le fichier qui correspond au QR Code en plus grande taille. Cliquez sur «Insérer». Vous pouvez voir le chemin conduisant à l image voulue. Cliquez sur «Avancé». 172

182 Dans l onglet «Avancé», cliquez sur le bouton «Ajouter» au niveau de la propriété «Relation Contenu - Cible». Encodez «lightbox» au niveau de la propriété «Relation Contenu - Cible». Ceci permet de faire appel à une bibliothèque JavaScript qui va gérer l affichage du QR Code dans une nouvelle fenêtre. Ensuite cliquez sur «Insérer». Répétez cette procédure pour les différents QR Codes. 173

183 Créez les articles «Mentions légales» et «Politique de confidentialité». 3 Créer le formulaire «de demande pour devenir rédacteur» et gérer les soumissions Si ce n est déjà fait, installez l extension «BreezingForms». Procédure pour créer le formulaire de demande pour devenir rédacteur: 1 ) Cliquez sur «Composants» puis sur «BreezingForms». 2 ) Si nécessaire, cliquez sur «Formulaires» puis sur «Nouveau». 3 ) Définissez un titre et un nom pour le formulaire puis cliquez sur «Enregistrer les propriétés». 174

184 4 ) Cliquez sur «Nouvelle page». 5 ) Sélectionnez la page créée puis cliquez sur «Nouvel élément». 6 ) Définissez les propriétés du premier élément créé. Il s agira ici d une liste déroulante. Ensuite, cliquez sur «Enregistrer les propriétés». 175

185 Il faut noter qu il y a d autres propriétés dans la partie inférieure de la page web. Les propriétés «Obligatoire» et «Validation» sont très intéressantes. 7 ) Sélectionnez la page puis cliquez sur «Nouvel élément». Créez tous les éléments suivants en sélectionnant pour chacun d eux le type adéquat. 176

186 8 ) Créez une deuxième page. Cliquez sur «Modifier». Au moment de l écriture de ces notes, il a été constaté que ces points 8 et 9 peuvent ne pas fonctionner correctement au niveau de Breezingforms. 9 ) Définissez le texte qui sera affiché après la soumission du formulaire par l internaute puis sauvez et fermez. 177

187 Gérer les soumissions Pour gérer les soumissions, cliquez sur «Composants / BreezingForms / Enregistrements». Sélectionnez le formulaire voulu afin de voir les données qui ont été collectées à l aide de ce formulaire. Vous pouvez constater que différentes options d exportation sont proposées afin de, par exemple, récupérer les données dans Excel ou tout autre programme. 4 Gérer le menu Créez le menu suivant (si nécessaire cf. point «5.3.1 Créer la barre de menus principale» figurant à la page 76). 178

188 Pour l entrée de menu «Carnets de voyages»: 179

189 180

190 Pour l entrée de menu «Devenir rédacteur»: Il s agit du nom qui a été donné au formulaire lors de sa création. Créez le module permettant d affichez le menu précédent et définissez la position correcte pour ce menu (si nécessaire cf. point «5.3.2 Créer un module pour afficher le menu principal» figurant à la page 80). 5 Créer les modules manquants Voici un aperçu global des modules du site. 181

191 Attardons-nous quelque peu sur certains modules: 6 Ne pas autoriser les inscriptions de nouveaux utilisateurs à partir du site Nous voulons que le module de connexion ne propose pas l option «Créer un compte». 182

192 Pour ce faire, cliquez sur «Système / Configuration». Cliquez sur «Utilisateurs» puis attribuez la valeur «Non» à la propriété «Autoriser l inscription des utilisateurs». Enregistrez et fermez. 183

193 7 Gérer les rédacteurs du site Suite aux demandes provenant du formulaire créé au niveau du site, nous devons pouvoir ajouter des utilisateurs qui appartiendront à un groupe nommé «Rédacteurs_Carnets». NB: il ne faut pas confondre ce groupe avec le groupe «Rédacteurs» qui est prédéfini dans Joomla. Les membres du groupe nommé «Rédacteurs_Carnets» devront, après connexion, disposer d une entrée de menu permettant de soumettre un nouvel article que l administrateur du site décidera de publier ou non. L insertion d une autre entrée de menu permettant de modifier un article existant pourra également être ajoutée. 7.1 Créer un nouveau groupe d utilisateurs Procédure pour créer un nouveau groupe d utilisateurs: 1 ) Dans l interface d administration, cliquez sur «Utilisateurs» puis sur «Groupes». 2 ) Cliquez sur «Nouveau». 3 ) Définissez le nom du groupe puis enregistrez et fermez. 184

194 7.2 Créer un niveau d accès pour le groupe «Rédacteurs_Carnets» Les groupes d'accès vont nous servir à définir «qui va avoir accès à quel contenu». Dans le cas présent, c est pour indiquer qui verra les entrées de menus «Proposer un article» et «Liste des articles». Procédure pour créer un niveau d accès: 1 ) Cliquez sur «Utilisateurs» puis sur «Niveaux d accès». 2 ) Cliquez sur «Nouveau». 3 ) Définissez le nom de ce niveau d accès puis cochez le(s) groupe(s) lié(s) à ce niveau d accès. 4 ) Enregistrez et fermez. 185

195 7.3 Créer de nouveaux utilisateurs dans le groupe «Rédacteurs_Carnets» Procédure pour créer un nouvel utilisateur dans le groupe «Rédacteurs_Carnets»: 1 ) Dans l interface d administration, cliquez sur «Utilisateurs» puis sur «Gestion des utilisateurs». 2 ) Cliquez sur «Nouveau». 3 ) Au niveau de l onglet «Détails du compte utilisateur», définissez le nom, l identifiant 186

196 4 ) Activez l onglet «Attribuer cet utilisateur à un ou plusieurs groupes». Cochez le groupe «Rédacteurs_Carnets» puis enregistrez et fermez. Il est alors possible pour notre nouvel utilisateur (qui fait partie du groupe «Enregistré»), de se connecter mais il ne pourra rien faire de plus au niveau du site. 187

197 7.4 Donner les droits voulus aux utilisateurs du groupe «Rédacteurs_Carnets» Procédure pour permettre aux utilisateurs du groupe «Rédacteurs_Carnets» de créer de nouveaux articles et de modifier leurs articles (une fois ceux-ci publiés). 1 ) Cliquez sur «Système» puis sur «Configuration». 2 ) Cliquez sur «Articles», activez l onglet «Droits», sélectionnez le groupe d utilisateurs «Rédacteurs_Carnets» puis donnez les autorisations voulues. 7.5 Prévoir des entrées de menus pour les rédacteurs Créer une entrée de menu «Proposer un article» 1 ) Cliquez sur «Menus» puis sur «Menu principal». 2 ) Cliquez sur «Nouveau». 188

198 3 ) Définissez le nom et l alias de cette nouvelle entrée de menu. Définissez également l accès de cette entrée de menu afin que celle-ci ne soit visible que lorsqu un rédacteur est connecté. Ensuite, cliquez sur «Sélection». 4 ) Cliquez sur «Articles» puis sur «Créer un article». 5 ) Activez l onglet «Paramètres» puis définissez la catégorie par défaut. 189

199 6 ) Enregistrez et fermez. Vous pouvez alors vous connecter dans le frontend en tant que rédacteur et vous verrez l entrée de menu. Après connexion: Créer une entrée de menu «Liste des articles» 1 ) Cliquez sur «Menus» puis sur «Menu principal». 2 ) Cliquez sur «Nouveau». 3 ) Définissez le nom et l alias de cette nouvelle entrée de menu. Définissez également l accès de cette entrée de menu afin que celle-ci ne soit visible que lorsqu un rédacteur est connecté. Ensuite, cliquez sur «Sélection». 190

200 4 ) Cliquez sur «Articles» puis sur «Liste des articles d une catégorie». 5 ) Sélectionnez la catégorie. 6 ) Enregistrez et fermez. 191

201 La fenêtre qui s affiche lorsque l on utilise l option «Liste des articles» propose un bouton permettant de créer de nouveaux articles. Dans certains cas, on peut donc supprimer l entrée de menu «Proposer un article». Un rédacteur du groupe «Rédacteurs_Carnets» ne peut modifier que les articles dont il est l auteur. Un rédacteur ne peut pas supprimer ses articles en frontend, il doit introduire la demande auprès de l administrateur. 7.6 Activer JCE Editor pour la gestion des articles dans le frontend L objectif est de pouvoir bénéficier de la barre d outils de «JCE Editor» en frontend. 1 ) Cliquez sur «Composants» puis sur «JCE Administration». 2 ) Cliquez sur «Profils JCE» puis activez le profil «Front End». 3 ) Cliquez sur le profil «Front End». 4 ) Dans l onglet «Généralités», cochez le groupe d utilisateurs «Rédacteurs_Carnets». 5 ) Enregistrez et fermez. 192

202 7.7 Très important à savoir par rapport à la gestion des soumissions d articles par des tierces personnes et ce via les fonctions natives de Joomla En utilisant les fonctions natives de Joomla, c est-à-dire sans utilisation d une extension supplémentaire, une fois qu un rédacteur (dans le sens «rédacteur d un carnet de voyage» comme imaginé ci-avant et non pas le groupe «Rédacteurs» de Joomla) propose un article, celuici n est pas publié par défaut, il faut une intervention de l administrateur. Jusque-là, c est assez logique. Ce qui est plus contraignant, c est que lorsqu un rédacteur a proposé un article, il ne le verra dans la liste des articles que lorsque celui-ci aura été publié par l administrateur. Pas évident, si on veut y apporter une correction. La solution est une bonne communication entre le rédacteur et l administrateur. Pour permettre à un rédacteur de modifier son article avant que celui-ci ne soit visible par les visiteurs du site, il suffit que l administrateur publie l article en indiquant le niveau d accès «Accès Rédacteurs_Carnets». Le rédacteur peut alors voir l article et le modifier. Une fois que l article est au point, le rédacteur peut définir le niveau d accès de l article à «Accès public» (c est possible lorsque l article est en mode «modification»). Il faut donc faire confiance aux rédacteurs. Si on veut bénéficier de plus de possibilités, il est possible d installer des extensions orientées vers la gestion des contenus et du workflow de ceux-ci. Une autre possibilité consiste à donner, aux utilisateurs concernés, un accès restreint à certaines fonctions d administration. Le travail se fait alors via le backend. 8 Sauvegarder le site et transférer le site chez un hébergeur Effectuez une sauvegarde de votre site qui est en local en utilisant Akeeba Backup (si nécessaire, cf. point 2.1 figurant à la page 137). Transférez le site chez un hébergeur (si nécessaire, cf. point 7 figurant à la page 120). 193

203 HTML 194

204 Source: 1 HTML et CSS: deux langages incontournables Si vous souhaitez personnaliser ou créer un template (modèle), il est nécessaire d avoir des connaissances dans les langages HTML et CSS. À ceux-ci, on peut ajouter les langages PHP et éventuellement Javascript, pour lesquels des connaissances peuvent s avérer intéressantes mais pas indispensables. 1.1 Les rôles de HTML et CSS Pourquoi avoir créé deux langages? Vous devez vous dire que manipuler deux langages va être deux fois plus complexe et deux fois plus long à apprendre mais ce n'est pas le cas! S'il y a deux langages c'est, au contraire, pour faciliter les choses. Nous allons avoir affaire à deux langages qui se complètent car ils ont des rôles différents: HTML (HyperText Markup Language): il a fait son apparition dès 1991 lors du lancement du Web. Son rôle est de gérer et organiser le contenu. C'est donc en HTML que vous écrirez ce qui doit être affiché sur la page: du texte, des liens, des images CSS (Cascading Style Sheets, aussi appelées Feuilles de styles): le rôle du langage CSS est de gérer l'apparence de la page web (agencement, positionnement, décoration, couleurs, taille du texte ). Ce langage est venu compléter le HTML en Vous avez peut-être aussi entendu parler du langage XHTML. Il s'agit d'une variante du HTML qui se veut plus rigoureuse et qui est donc un peu plus délicate à manipuler. Pour faire simple, le HTML est apparu le premier en Début 2000, le W3C (World Wide Web Consortium) a lancé le XHTML en indiquant que ce serait l'avenir mais le XHTML n'a pas percé comme on l'espérait. Retour aux sources en 2009: le W3C abandonne le XHTML et décide de revenir au HTML pour le faire évoluer. La dernière version de HTML est HTML5. Le HTML définit le contenu. Le CSS permet, lui, d'arranger le contenu et de définir la présentation: couleurs, image de fond, marges, taille du texte Comme vous vous en doutez, le CSS a besoin d'une page HTML pour fonctionner. C'est pour cela que nous allons d'abord apprendre les bases du HTML avant de nous occuper de la «décoration» en CSS. 1.2 Les différentes versions de HTML et CSS Au fil du temps, les langages HTML et CSS ont beaucoup évolué. Dans la toute première version de HTML (HTML 1.0) il n'était même pas possible d'afficher des images! Voici un très bref historique de ces langages Les versions de HTML HTML 1: c'est la toute première version créée par Tim Berners-Lee en HTML 2: la deuxième version du HTML apparaît en 1994 et prend fin en 1996 avec l'apparition du HTML 3.0. C'est cette version qui posera en fait les bases des versions suivantes du HTML. Les règles et le fonctionnement de cette version sont donnés par le W3C (tandis que la première version a été créée par un seul homme). 195

205 HTML 3: apparue en 1996, cette nouvelle version du HTML rajoute de nombreuses possibilités au langage comme les tableaux, les applets, les scripts, le positionnement du texte autour des images, etc. HTML 4: il s'agit de la version la plus répandue du HTML (plus précisément, il s'agit de HTML 4.01). Elle apparaît pour la première fois en 1998 et propose l'utilisation de frames (qui découpent une page web en plusieurs parties), des tableaux plus complexes, des améliorations sur les formulaires, etc. Mais surtout, cette version permet pour la première fois d'exploiter des feuilles de style, notre fameux CSS! HTML 5: c'est la dernière version. Encore assez peu répandue, elle fait beaucoup parler d'elle car elle apporte de nombreuses améliorations comme la possibilité d'inclure facilement des vidéos, un meilleur agencement du contenu, de nouvelles fonctionnalités pour les formulaires, etc Les versions de CSS CSS 1: dès 1996, on dispose de la première version du CSS. Elle pose les bases de ce langage qui permet de présenter sa page web, comme les couleurs, les marges, les polices de caractères, etc. CSS 2: apparue en 1999 puis complétée par CSS 2.1, cette nouvelle version de CSS rajoute de nombreuses options. On peut désormais utiliser des techniques de positionnement très précises, qui nous permettent d'afficher des éléments où on le souhaite sur la page. CSS 3: c'est la dernière version, qui apporte des fonctionnalités particulièrement attendues comme les bordures arrondies, les dégradés, les ombres, etc. 2 Les balises et leurs attributs 2.1 Les balises Les pages HTML sont remplies de ce que l'on appelle des balises. Celles-ci sont invisibles à l'écran pour vos visiteurs, mais elles permettent à l'ordinateur (et plus précisément au navigateur par exemple) de comprendre ce qu'il doit afficher. Les balises se repèrent facilement. Elles sont entourées de «chevrons», c'est-à-dire des symboles < et >, comme ceci : <balise> À quoi est-ce qu'elles servent? Elles indiquent la nature du texte qu'elles encadrent. Elles veulent dire par exemple : «Ceci est le titre de la page», «Ceci est une image», «Ceci est un paragraphe de texte», etc. On distingue deux types de balises: les balises en paires et les balises orphelines. 2.2 Les balises en paires Elles s'ouvrent, contiennent du texte, et se ferment plus loin. Voici à quoi elles ressemblent: <titre>ceci est un titre</titre> On distingue une balise ouvrante (<titre>) et une balise fermante (</titre>) qui indique que le titre se termine. Cela signifie pour l'ordinateur que tout ce qui n'est pas entre ces deux balises n'est pas un titre. Ceci n'est pas un titre <titre>ceci est un titre</titre> Ceci n'est pas un titre 196

206 2.3 Les balises orphelines Ce sont des balises qui servent le plus souvent à insérer un élément à un endroit précis (par exemple une image). Il n'est pas nécessaire de délimiter le début et la fin de l'image, on veut juste dire à l'ordinateur «Insère une image ici». Une balise orpheline s'écrit comme ceci: <image /> Notez que le / de fin n'est pas obligatoire. On pourrait écrire seulement <image>. Néanmoins, pour ne pas les confondre avec le premier type de balise, les webmasters recommandent de rajouter ce / (slash) à la fin des balises orphelines. 2.4 Les attributs Les attributs sont un peu les options des balises. Ils viennent les compléter pour donner des informations supplémentaires. L'attribut se place après le nom de la balise ouvrante et a le plus souvent une valeur, comme ceci: <balise attribut="valeur"> À quoi cela sert-il? Prenons la balise <image /> que nous venons de voir. Seule, elle ne sert pas à grand-chose. On pourrait rajouter un attribut qui indique le nom de l'image à afficher: <image nom="photo.jpg" /> L'ordinateur comprend alors qu'il doit afficher l'image contenue dans le fichier photo.jpg Dans le cas d'une balise fonctionnant «par paire», on ne met les attributs que dans la balise ouvrante et pas dans la balise fermante. Par exemple, ce code indique que la citation est de Neil Armstrong et qu'elle date du 21 Juillet 1969: <citation auteur="neil Armstrong" date="21/07/1969"> C'est un petit pas pour l'homme, mais un bond de géant pour l'humanité. </citation> Tous les attributs que nous venons de voir sont fictifs. Les vrais attributs ont des noms en anglais, nous allons les découvrir dans la suite de ce cours. 2.5 Liste des balises Source: Autre site très intéressant: Balises de premier niveau Les balises de premier niveau sont les principales balises qui structurent une page HTML. Elles sont indispensables pour réaliser le «code minimal» d'une page web. Balise Description <html> Balise principale <head> En-tête de la page <body> Corps de la page 197

207 2.5.2 Balises d'en-tête Ces balises sont toutes situées dans l'en-tête de la page web, c'est-à-dire entre <head> et </head>: Balise <link /> <meta /> <script> <style> <title> Description Liaison avec une feuille de style Métadonnées (données servant à définir ou décrire une autre donnée) de la page web (charset, mots-clés, etc.) Code JavaScript Code CSS Titre de la page Balises de structuration du texte Balise Description <abbr> Abréviation <blockquote> Citation (longue) <cite> Citation du titre d'une œuvre ou d'un évènement <q> Citation (courte) <sup> Exposant <sub> Indice <strong> Mise en valeur forte <em> Mise en valeur normale <mark> Mise en valeur visuelle <h1> Titre de niveau 1 <h2> Titre de niveau 2 <h3> Titre de niveau 3 <h4> Titre de niveau 4 <h5> Titre de niveau 5 <h6> Titre de niveau 6 <img /> Image <figure> Figure (image, code, etc.) <figcaption> Description de la figure <audio> Son <video> Vidéo <source> Format source pour les balises <audio> et <video> <a> Lien hypertexte <br /> Retour à la ligne <p> Paragraphe <hr /> Ligne de séparation horizontale <address> Adresse de contact <del> Texte supprimé <ins> Texte inséré <dfn> Définition <kbd> Saisie clavier <pre> Affichage formaté (pour les codes sources) <progress> Barre de progression <time> Date ou heure 198

208 2.5.4 Balises de listes Cette section énumère toutes les balises HTML permettant de créer des listes (listes à puces, listes numérotées, listes de définitions ) Balise Description <ul> Liste à puces non numérotée <ol> Liste numérotée <li> Élément de la liste à puces <dl> Liste de définitions <dt> Terme à définir <dd> Définition du terme Balises de tableau Balise Description <table> Tableau <caption> Titre du tableau <tr> Ligne de tableau <th> Cellule d'en-tête <td> Cellule <thead> Section de l'en-tête du tableau <tbody> Section du corps du tableau <tfoot> Section du pied du tableau Balises de formulaire Balise Description <form> Formulaire <fieldset> Groupe de champs <legend> Titre d'un groupe de champs <label> Libellé d'un champ <input /> Champ de formulaire (texte, mot de passe, case à cocher, bouton, etc.) <textarea> Zone de saisie multiligne <select> Liste déroulante <option> Élément d'une liste déroulante <optgroup> Groupe d'éléments d'une liste déroulante Balises «sectionnantes» Ces balises permettent de construire le squelette de notre site web. Balise Description <header> En-tête <nav> Liens principaux de navigation <footer> Pied de page <section> Section de page <article> Article (contenu autonome) <aside> Informations complémentaires 199

209 2.5.8 Balises génériques Les balises génériques sont des balises qui n'ont aucun effet si elles sont utilisées seules (sans attribut ). On utilise le plus souvent des balises génériques pour construire son design. Il y a deux balises génériques: l'une est inline, l'autre est block. Balise Description <span> Balise générique de type inline Par défaut, la disposition se fait en ligne. <div> Balise générique de type block Par défaut, les éléments se placent les uns en-dessous des autres. Ces balises ont un intérêt uniquement si vous leur associez un attribut class, id ou style: class: indique le nom de la classe CSS à utiliser. id: donne un nom à la balise. Ce nom doit être unique sur toute la page car il permet d'identifier la balise. Vous pouvez vous servir de l'id pour de nombreuses choses, par exemple pour créer un lien vers une ancre, pour un style CSS de type ID, pour des manipulations en JavaScript, etc. style: cet attribut vous permet d'indiquer directement le code CSS à appliquer. Vous n'êtes donc pas obligés d'avoir une feuille de style à part, vous pouvez directement indiquer les attributs CSS. Notez qu'il est préférable de ne pas utiliser cet attribut et de passer à la place par une feuille de style externe, car cela rend votre site plus facile à mettre à jour par la suite. Ces trois attributs ne sont pas réservés aux balises génériques: vous pouvez aussi les utiliser sans aucun problème dans la plupart des autres balises. 3 Les paragraphes La plupart du temps, lorsqu'on écrit du texte dans une page web, on le fait à l'intérieur de paragraphes. Le langage HTML propose justement la balise <p> pour délimiter les paragraphes. <p>bonjour et bienvenue sur mon site!</p> <p> signifie «Début du paragraphe» </p> signifie «Fin du paragraphe» En HTML, si vous appuyez sur la touche Entrée, cela ne crée pas une nouvelle ligne comme vous en avez l'habitude. Pour créer un saut de ligne, il faut utiliser la balise <br /> 4 Les titres Lorsque le contenu de votre page va s'étoffer avec de nombreux paragraphes, il va devenir difficile pour vos visiteurs de se repérer. C'est là que les titres deviennent utiles. 200

210 En HTML, on a le droit d'utiliser six niveaux de titres différents. On peut dire: «Ceci est un titre très important», «Ceci est un titre un peu moins important», «Ceci est un titre encore moins important», etc. On a donc six balises de titres différentes: <h1> </h1> : signifie «titre très important» <h2> </h2> : signifie «titre important» <h3> </h3> : pareil, c'est un titre un peu moins important (on peut dire un «sous-titre») <h4> </h4> : titre encore moins important <h5> </h5> : titre pas important <h6> </h6> : titre vraiment, mais alors là vraiment pas important du tout Attention : ne confondez pas avec la balise <title>! La balise <title> affiche le titre de la page dans la barre de titre du navigateur comme nous l'avons vu. Les titres <h1> et compagnie, eux, servent à créer des titres qui seront affichés dans la page web. Ne choisissez pas votre balise de titre en fonction de la taille qu'elle applique au texte! Il faut impérativement bien structurer sa page en commençant par un titre de niveau 1 (<h1>), puis un titre de niveau 2 (<h2>), etc. Il ne devrait pas y avoir de sous-titre sans titre principal! Si vous voulez modifier la taille du texte, sachez que nous apprendrons à faire cela en CSS un peu plus tard. Grâce au langage CSS, vous pourrez dire «Je veux que mes titres importants soient centrés, rouges et soulignés». Pour le moment, en HTML, nous ne faisons que structurer notre page. Nous rédigeons le contenu avant de nous amuser à le mettre en forme. 5 Mises en forme de base 5.1 Mettre en valeur Mettre un peu en valeur Pour mettre un peu en valeur votre texte, vous devez utiliser la balise <em> </em>. Son utilisation est très simple: encadrez les mots à mettre en valeur avec ces balises et c'est bon! Habituellement, utiliser la balise <em> a pour conséquence de mettre le texte en italique. En fait, c'est le navigateur qui choisit comment afficher les mots. On lui dit que les mots sont assez importants et, pour faire ressortir cette information, il change l'apparence du texte en utilisant l'italique Mettre bien en valeur Pour mettre un texte bien en valeur, on utilise la balise <strong> qui signifie «fort», ou «important» si vous préférez. Elle s'utilise exactement de la même manière que <em>. Habituellement, utiliser la balise <strong> a pour conséquence de mettre le texte en gras. Là encore, le gras n'est qu'une conséquence. Le navigateur a choisi d'afficher en gras les mots importants pour les faire ressortir davantage. La balise <strong> ne signifie pas «mettre en gras» mais «important». On pourra décider plus tard, en CSS, d'afficher les mots «importants» d'une autre façon que le gras si on le souhaite. 201

211 5.1.3 Marquer le texte La balise <mark> permet de faire ressortir visuellement une portion de texte. L'extrait n'est pas forcément considéré comme important mais on veut qu'il se distingue bien du reste du texte. Cela peut être utile pour faire ressortir un texte pertinent après une recherche sur votre site par exemple. Par défaut, <mark> a pour effet de surligner le texte. On pourra changer l'affichage en CSS (décider de surligner dans une autre couleur, d'encadrer le texte, etc.). C'est le même principe que pour les balises précédentes: elles indiquent le sens des mots et non pas comment ceux-ci doivent s'afficher N'oubliez pas: HTML pour le fond, CSS pour la forme Il est très important de bien comprendre ce qui suit. Une erreur courante est de considérer que les balises <em>, <strong>, <mark> permettent de mettre en italique, en gras et de surligner du texte en HTML! Et pourtant ce n'est pas à cela que servent ces balises! Le rôle de ces balises est d'indiquer le sens du texte. Ainsi, <strong> indique à l'ordinateur «Ce texte est important». C'est tout. Et pour montrer que le texte est important, l'ordinateur décide de le mettre en gras (mais il pourrait aussi bien l'écrire en rouge!). La plupart des navigateurs affichent les textes importants en gras, mais rien ne les y oblige. Il faut savoir que de nombreux programmes analysent le code source des pages web, à commencer par les robots de moteurs de recherche. Ces robots parcourent le Web en lisant le code HTML de tous les sites. C'est le cas des robots de Google et de Bing, par exemple. Les mots-clés «importants» ont tendance à avoir plus de valeur à leurs yeux, donc si quelqu'un fait une recherche sur ces mots, il a plus de chances de tomber sur votre site. 6 Les listes Les listes nous permettent souvent de mieux structurer notre texte et d'ordonner nos informations. Nous allons découvrir ici deux types de listes: les listes non ordonnées ou listes à puces, les listes ordonnées ou listes numérotées ou encore énumérations. 6.1 Liste non ordonnée Une liste non ordonnée ressemble à ceci: Fraises Framboises Cerises C'est un système qui nous permet de créer une liste d'éléments sans notion. Créer une liste non ordonnée est très simple. Il suffit d'utiliser la balise <ul> que l'on referme un peu plus loin avec </ul>. Commencez donc à taper ceci: <ul></ul> 202

212 Et maintenant, voilà ce que l'on va faire: on va écrire chacun des éléments de la liste entre deux balises <li></li>. Chacune de ces balises doit se trouver entre <ul> et </ul>. Vous allez comprendre de suite avec cet exemple: <ul> <li>fraises</li> <li>framboises</li> <li>cerises</li> </ul> Retenez donc ces deux balises: <ul></ul> délimite toute la liste, <li></li> délimite un élément de la liste (une puce). Vous pouvez mettre autant d'éléments que vous voulez dans la liste à puces, vous n'êtes pas limité à trois éléments. Et voilà, vous savez créer une liste à puces! Pas si difficile une fois que l'on a compris comment imbriquer les balises. Pour ceux qui ont besoin de faire des listes complexes, sachez que vous pouvez imbriquer des listes à puces (créer une liste à puces dans une liste à puces). Si vous voulez faire ça, ouvrez une seconde balise <ul>à l'intérieur d'un élément <li></li>. Si vous fermez les balises dans le bon ordre, vous n'aurez pas de problème. 6.2 Liste ordonnée Une liste ordonnée fonctionne de la même façon, seule une balise change: il faut remplacer <ul></ul> par <ol></ol>. À l'intérieur de la liste, on ne change rien: on utilise toujours des balises <li></li> pour délimiter les éléments. L'ordre dans lequel vous placez les éléments de la liste est important. Le premier <li></li> sera l'élément n 1, le second sera le n 2 etc Pour information, il existe un troisième type de liste, beaucoup plus rare: la liste de définitions. Elle fait intervenir les balises <dl> (pour délimiter la liste), <dt> (pour délimiter un terme) et <dd> (pour délimiter la définition de ce terme). 6.3 En résumé Le HTML comporte de nombreuses balises qui nous permettent d'organiser le texte de notre page. Ces balises donnent des indications comme «Ceci est un paragraphe», «Ceci est un titre», etc. Les paragraphes sont définis par les balises <p> </p> et les sauts de ligne par la balise <br />. Il existe six niveaux de titre, de <h1> </h1> à <h6> </h6>, à utiliser selon l'importance du titre. On peut mettre en valeur certains mots avec les balises <strong>, <em> et <mark>. Pour créer des listes, on doit utiliser la balise <ul> (liste à puces non ordonnée) ou <ol> (liste ordonnée). À l'intérieur, on insère les éléments avec une balise <li> pour chaque item. 203

213 7 Les liens 7.1 Un lien vers un autre site Il est facile de reconnaître les liens sur une page, un curseur en forme de main apparaît lorsqu'on pointe dessus. Pour créer un lien, la balise que nous allons utiliser est très simple à retenir: <a>. Il faut cependant lui ajouter un attribut, href, pour indiquer vers quelle page le lien doit conduire. Par exemple, le code ci-dessous est un lien qui amène vers le site de la commune d Arlon: <a href=" NB: si vous faites un lien vers un site qui comporte une adresse un peu bizarre avec des &, comme: vous devrez remplacer tous les «&» par «&» dans votre lien comme ceci : Vous ne verrez pas la différence, mais cela est nécessaire pour avoir une page web correctement construite en HTML Un lien vers une ancre Une ancre est une sorte de point de repère que vous pouvez définir dans vos pages HTML lorsqu'elles sont très longues. En effet, il peut alors être utile de faire un lien amenant plus bas dans la même page pour que le visiteur puisse se placer directement au niveau de la partie qui l'intéresse. Pour créer une ancre, il suffit d ajouter l'attribut id à une balise qui va alors servir de repère. Ce peut être n'importe quelle balise, un titre par exemple. Utilisez l'attribut id pour donner un nom à l'ancre. Cela nous servira ensuite pour faire un lien vers cette ancre. Par exemple: <h2 id="mon_ancre">titre</h2> Ensuite, il suffit de créer un lien comme d'habitude, mais cette fois l'attribut href contiendra un dièse (#) suivi du nom de l'ancre. Exemple: <a href="#mon_ancre">aller vers l'ancre</a> Normalement, si vous cliquez sur le lien, cela vous amènera plus bas dans la même page (à condition que la page comporte suffisamment de texte pour que les barres de défilement se déplacent automatiquement). <h1>ma grande page</h1> <p> Aller directement à la partie traitant de :<br /> <a href="#cuisine">la cuisine</a><br /> <a href="#rollers">les rollers</a><br /> <a href="#arc">le tir à l'arc</a> 204

214 </p> <h2 id="cuisine">la cuisine</h2> <p>... (beaucoup de texte)...</p> <h2 id="rollers">les rollers</h2> <p>... (beaucoup de texte)...</p> <h2 id="arc">le tir à l'arc</h2> <p>... (beaucoup de texte)...</p> S'il ne se passe rien quand vous cliquez sur les liens, c'est qu'il n'y a pas assez de texte. Dans ce cas, vous pouvez soit rajouter du «blabla» dans la page pour qu'il y ait (encore) plus de texte, soit réduire la taille de la fenêtre de votre navigateur pour faire apparaître les barres de défilement sur le côté. L'attribut id sert à donner un nom «unique» à une balise, pour s'en servir de repère. Il s agit d un attribut important. Ici, on s'en sert pour faire un lien vers une ancre mais, en CSS, il nous sera très utile pour «repérer» une balise précise, vous verrez. Évitez cependant de créer des id avec des espaces ou des caractères spéciaux, utilisez simplement, dans la mesure du possible, des lettres et chiffres pour que la valeur soit reconnue par tous les navigateurs. Lien vers une ancre située dans une autre page L'idée, c'est de faire un lien qui ouvre une autre page ET qui amène directement à une ancre située plus bas sur cette page. Il suffit de taper le nom de la page, suivi d'un dièse (#), suivi du nom de l'ancre. Par exemple : <a href="ancres.html#rollers"> vous amènera sur la page ancres.html, directement au niveau de l'ancre appelée rollers. 7.3 Cas pratiques d'utilisation des liens Un lien qui affiche une infobulle au survol Vous pouvez utiliser l'attribut title qui affiche une bulle d'aide lorsqu'on pointe sur le lien. Cet attribut est facultatif. <a href=" title="site officiel de la commune d Arlon">Arlon</a> La bulle d'aide peut être utile pour informer le visiteur avant même qu'il n'ait cliqué sur le lien Un lien qui ouvre une nouvelle fenêtre Il est possible de «forcer» l'ouverture d'un lien dans une nouvelle fenêtre. Pour cela, on rajoutera target="_blank" à la balise <a>. <a href=" target="_blank">arlon</a> Le site s'affichera dans une autre fenêtre. 205

215 Selon la configuration du navigateur, la page s'affichera dans une nouvelle fenêtre ou un nouvel onglet. Vous ne pouvez pas choisir entre l'ouverture d'une nouvelle fenêtre ou d'un nouvel onglet Un lien pour envoyer un Si vous voulez que vos visiteurs puissent vous envoyer un , vous pouvez utiliser des liens de type mailto. Rien ne change au niveau de la balise, vous devez simplement modifier la valeur de l'attribut href comme ceci: <p><a contacter par mail</a></p> Il suffit donc de faire commencer le lien par mailto: et d'écrire l'adresse où on peut vous contacter. Si l internaute clique sur le lien, le programme qui est défini comme client de messagerie par défaut est lancé, un nouveau message vide s'ouvre, prêt à être envoyé à votre adresse Un lien pour télécharger un fichier Comment créer un lien permettant à l internaute de télécharger un fichier? Par exemple, supposez que vous vouliez permettre le téléchargement de «monfichier.zip». Si le fichier est dans le même dossier que la page web, le lien sera: <p><a href="monfichier.zip">télécharger le fichier</a></p> C'est tout! Le navigateur, voyant qu'il ne s'agit pas d'une page web à afficher, va lancer la procédure de téléchargement lorsqu'on cliquera sur le lien. NB: si le fichier est dans un autre dossier que la page web, il faudra définir le chemin voulu en utilisant, de préférence, un adressage relatif En résumé Les liens permettent notamment de changer de page et sont, par défaut, écrits en bleu et soulignés. Pour insérer un lien, on utilise la balise <a> avec l'attribut href pour indiquer l'adresse de la page cible. Exemple : <a href=" On peut faire un lien vers une autre page de son site simplement en écrivant le nom du fichier : <a href="page2.html">. Les liens permettent aussi d'amener vers d'autres endroits sur la même page. Il faut créer une ancre avec l'attribut id pour «marquer» un endroit dans la page, puis faire un lien vers l'ancre comme ceci : <a href="#ancre">. 206

216 8 Les images Insérer une image dans une page web? Vous allez voir, c'est d'une facilité déconcertante Enfin presque. Il existe différents formats d'image que l'on peut utiliser sur des sites web, et on ne doit pas les choisir au hasard. En effet, les images sont parfois volumineuses à télécharger, ce qui ralentit le temps de chargement de la page (beaucoup plus que le texte!). 8.1 Les différents formats d'images Savez-vous ce qu'est un format d'image? Quand vous avez une image «entre les mains», vous avez la possibilité de l'enregistrer dans plusieurs «formats» différents. Le poids (en Ko, voire en Mo) de l'image sera plus ou moins élevé selon le format choisi et la qualité de l'image va changer. Par exemple, le logiciel de dessin Paint (même si c'est loin d'être le meilleur) vous propose de choisir entre plusieurs formats lorsque vous enregistrez une image. Certains formats sont plus adaptés que d'autres selon l'image (photo, dessin, image animée ). Notre but ici est de faire le tour des différents formats utilisés sur le Web pour que vous les connaissiez et sachiez choisir celui qui convient le mieux à votre image. Pratiquement toutes les images diffusées sur Internet ont un point commun: elles sont compressées. Cela veut dire que l'ordinateur fait des calculs pour qu'elles soient moins lourdes et donc plus rapides à charger Le JPEG Les images au format JPEG (Joint Photographic Expert Group) sont très répandues sur le Web. Ce format est conçu pour réduire le poids des photos (c'est-à-dire la taille du fichier associé), qui peuvent comporter plus de 16 millions de couleurs différentes. Les images JPEG sont enregistrées avec l'extension.jpg ou.jpeg Notez que le JPEG détériore un peu la qualité de l'image, d'une façon généralement imperceptible. C'est ce qui le rend si efficace pour réduire le poids des photos Le PNG Le format PNG (Portable Network Graphics) est le plus récent de tous. Ce format est adapté à la plupart des graphiques (tout ce qui n'est pas une photo). Le PNG a deux gros avantages: il peut être rendu transparent et il n'altère pas la qualité de l'image. Le PNG a été inventé pour concurrencer un autre format, le GIF, à l'époque où il fallait payer des royalties pour pouvoir utiliser des GIF. Depuis, le PNG a bien évolué et c'est devenu le format le plus puissant pour enregistrer la plupart des images. Le PNG existe en deux versions, en fonction du nombre de couleurs que doit comporter l'image: PNG 8 bits : 256 couleurs, PNG 24 bits : 16 millions de couleurs (autant qu'une image JPEG). Une ancienne version d'internet Explorer (IE 6) ne peut pas afficher correctement les images PNG 24 bits transparentes. Ce navigateur tend à être de moins en moins utilisé, mais gardez quand même cette information en tête. 207

217 Au fait, si le PNG 24 bits peut afficher autant de couleurs qu'une image JPEG, et qu'en plus il peut être rendu transparent sans modifier la qualité de l'image quel est l'intérêt du JPEG? La compression du JPEG est plus puissante sur les photos. Une photo enregistrée en JPEG se chargera toujours beaucoup plus vite que si elle était enregistrée en PNG. Il est donc recommandé de conserver le format JPEG pour les photos Le GIF C'est un format assez vieux, qui a été néanmoins très utilisé (et qui reste très utilisé par habitude). Aujourd'hui, le PNG est globalement bien meilleur que le GIF: les images sont généralement plus légères et la transparence est de meilleure qualité. Il est donc recommandé d'utiliser le PNG autant que possible. Le format GIF est limité à 256 couleurs (alors que le PNG peut aller jusqu'à plusieurs millions de couleurs). Néanmoins, le GIF conserve un certain avantage que le PNG n'a pas: il peut être animé Il existe un format adapté à chaque image Si on résume, voici quel format adopter en fonction de l'image que vous avez: Une photo: utilisez un JPEG. N'importe quel graphique avec peu de couleurs (moins de 256): utilisez un PNG 8 bits ou éventuellement un GIF. N'importe quel graphique avec beaucoup de couleurs: utilisez un PNG 24 bits. Une image animée : utilisez un GIF animé Les erreurs à éviter Bannissez les autres formats Les autres formats non cités ici, comme le format BITMAP (*.bmp), sont à bannir car bien souvent ils ne sont pas compressés, donc trop gros. Ils ne sont pas du tout adaptés au Web. Choisissez bien le nom de votre image Si vous voulez éviter des problèmes, prenez l'habitude d'enregistrer vos fichiers avec des noms en minuscules, sans espace ni accent, par exemple: mon_image.png Vous pouvez remplacer les espaces par le caractère underscore («_»). 8.2 Insérer une image Revenons maintenant au code HTML pour découvrir comment placer des images dans nos pages web! Insertion d'une image Quelle est la fameuse balise qui va nous permettre d'insérer une image? Il s'agit de <img />! C'est une balise de type orpheline (comme <br />). Cela veut dire qu'on n'a pas besoin de l'écrire en deux exemplaires comme la plupart des autres balises que nous avons vues jusqu'ici. En effet, nous n'avons pas besoin de délimiter une portion de texte, nous voulons juste insérer une image à un endroit précis. 208

218 La balise doit être accompagnée de deux attributs obligatoires: src : il permet d'indiquer où se trouve l'image que l'on veut insérer. Vous pouvez soit indiquer un chemin absolu (ex. : soit indiquer le chemin en relatif (ce qu'on fait le plus souvent). Ainsi, si votre image est dans un sous-dossier «images», vous devrez taper par exemple: src="images/fleur.png" alt : cela signifie «texte alternatif». Il est vivement conseillé d indiquer un texte alternatif à l'image, c'est-à-dire un court texte qui décrit ce que contient l'image. Ce texte sera affiché à la place de l'image si celle-ci ne peut pas être téléchargée (cela arrive), ou dans les navigateurs de personnes handicapées (non-voyants) qui ne peuvent malheureusement pas voir l'image. Cela aide aussi les robots des moteurs de recherche pour les recherches d'images. Pour une fleur, on indiquerait par exemple : alt="une fleur". Bref, l'insertion d'image est quelque chose de très facile pour peu que l'on sache indiquer où se trouve l'image, comme on avait appris à le faire avec les liens. La plus grosse «difficulté» (si on peut appeler cela une difficulté) consiste à choisir le bon format d'image. Ici, c'est une photo, donc c'est évidemment le format JPEG que l'on utilise Ajouter une infobulle L'attribut permettant d'afficher une bulle d'aide est le même que pour les liens : il s'agit de title. Cet attribut est facultatif. Voici ce que cela peut donner: <p> Voici une photo que j'ai prise lors de mes dernières vacances à la montagne:<br /> <img src="images/montagne.jpg" alt="photo de montagne" title="c'est beau les Alpes quand même!" /> </p> Survolez la photo avec la souris pour voir l'infobulle apparaître Miniature cliquable Si votre image est très grosse, il est conseillé d'en afficher la miniature sur votre site. Ajoutez ensuite un lien sur cette miniature pour que vos visiteurs puissent afficher l'image en taille originale. <p> Vous souhaitez voir l'image dans sa taille d'origine? Cliquez dessus!<br /> <a href="img/montagne.jpg"><img src="img/montagne_mini.jpg" alt="photo de montagne" title="cliquez pour agrandir" /></a> </p> Parfois, certains navigateurs choisissent d'afficher un cadre bleu (ou violet) pas très esthétique autour de votre image cliquable. Heureusement, nous pourrons retirer ce cadre dans peu de temps grâce au CSS. 209

219 8.3 Les figures Les figures sont des éléments qui viennent enrichir le texte pour compléter les informations de la page. Les figures peuvent être de différents types: images codes source citations etc. Bref, tout ce qui vient illustrer le texte est une figure. Nous allons ici nous intéresser aux images mais, contrairement à ce qu'on pourrait croire, les figures ne sont pas forcément des images: un code source aussi illustre le texte Création d'une figure En HTML 5, on dispose de la balise <figure>. Voici comment on pourrait l'utiliser: <figure> <img src="images/blocnotes.png" alt="bloc-notes" /> </figure> Une figure est le plus souvent accompagnée d'une légende. Pour ajouter une légende, utilisez la balise <figcaption> à l'intérieur de la balise <figure>, comme ceci: <figure> <img src="images/blocnotes.png" alt="bloc-notes" /> <figcaption>le logiciel Bloc-Notes</figcaption> </figure> Bien comprendre le rôle des figures Si vous faites de votre image une figure, l'image peut être située en-dehors d'un paragraphe. <p>connaissez-vous le logiciel Bloc-Notes? On peut faire des sites web avec!</p> <figure> <img src="images/blocnotes.png" alt="bloc-notes" /> <figcaption>le logiciel Bloc-Notes</figcaption> </figure> Je ne vois pas vraiment de changement. Quand dois-je placer mon image dans un paragraphe et quand dois-je la placer dans une figure? Bonne question! Tout dépend de ce que votre image apporte au texte: Si elle n'apporte aucune information (c'est juste une illustration pour décorer): placez l'image dans un paragraphe. Si elle apporte une information: placez l'image dans une figure. 210

220 La balise <figure> a un rôle avant tout sémantique. Cela veut dire qu'elle indique à l'ordinateur que l'image a du sens et qu'elle est importante pour la bonne compréhension du texte. Cela peut permettre à un programme de récupérer toutes les figures du texte et de les référencer dans une table des figures, par exemple. Enfin, sachez qu'une figure peut très bien comporter plusieurs images. Voici un cas où cela se justifie: <figure> <img src="images/internetexplorer.png" alt="logo Internet Explorer" /> <img src="images/firefox.png" alt="logo Mozilla Firefox" /> <img src="images/chrome.png" alt="logo Google Chrome" /> <figcaption>logos des différents navigateurs</figcaption> </figure> En résumé Il existe plusieurs formats d'images adaptés au Web: o JPEG: pour les photos, o PNG: pour toutes les autres illustrations, o GIF: similaire au PNG, plus limité en nombre de couleurs mais qui peut être animé. On insère une image avec la balise <img />. Elle doit comporter au moins ces deux attributs: src (nom de l'image) et alt (courte description de l'image). Si une image illustre le texte (et n'est pas seulement décorative), il est conseillé de la placer au sein d'une balise <figure>. La balise <figcaption> permet d'écrire la légende de l'image. 211

221 9 Le langage HTML par la pratique 9.1 Site concernant des plantes, des techniques de culture Dans les pages qui suivent, le contexte est le suivant: nous créons des pages web ayant pour thème «les plantes»: fiches descriptives, techniques de culture Source de certains textes et de certaines illustrations: Installation du site Procédure à suivre: 1 ) Installez une nouvelle instance de Joomla pour notre nouveau site. Celui-ci sera nommé «site03». Le nom donné à la base de données peut être «bd_site03». Si nécessaire, la procédure figure à la page ) Activez le template «protostar» comme modèle par défaut pour la partie frontend (si nécessaire, cf. point «Définir le modèle utilisé par défaut» figurant à la page 50). Il s agit d un modèle qui est installé en même temps que l application Joomla. Il n est donc pas nécessaire d installer le modèle «protostar»mais il faut simplement le définir par défaut. 3 ) Installez les extensions suivantes (si nécessaire, cf. point «Installer des extensions» figurant à la page 54): JCE Editor et Mediabox CK (ne pas oublier d activer cette dernière). 4 ) Définissez certains paramètres par défaut comme repris dans le point «À faire directement après l installation d un nouveau site Joomla» figurant à la page 34. Il faut noter que pour les articles, on définira par défaut de ne pas afficher le titre des articles. 212

222 Au niveau des menus, on demandera de ne pas afficher l en-tête de page: 5 ) Désactivez (ou supprimez) certains modules inutiles pour le moment. 213

223 6 ) Créez les catégories d articles suivantes. Titre: Fiches des plantes Alias: cat-fiches-plantes Titre: Techniques Alias: cat-techniques Titre: Poèmes Alias: cat-poemes 9.3 Utiliser des balises HTML au sein des articles Les balises <h1>, <h2>, <p>, <br />, <em>, <strong>, <u>, <ul>, <li> En utilisant la barre d outils de l éditeur JCE 1 ) Créez l article suivant qui sera classé dans la catégorie «Fiches des plantes». 2 ) Sélectionnez le titre «Agapanthe» et indiquez qu il s agit d un titre de niveau «Titre 1». 214

224 3 ) Sélectionnez l intitulé «plante vivace» et cliquez sur le bouton de mise en gras (attention: en réalité l éditeur JCE ne va pas utiliser la balise <b> mais la balise <strong>). 4 ) Sélectionnez le titre «CARACTÉRISTIQUES» et indiquez qu il s agit d un titre de niveau «Titre 2». 5 ) Sélectionnez les lignes «Hauteur, Largeur» et cliquez sur le bouton pour obtenir des puces à points. 215

225 6 ) Sélectionnez le titre «En pleine terre ou en pot» et indiquez qu il s agit d un titre de niveau «Titre 2». 7 ) Faites de même pour les titres «Majestueuse floraison» et «Un feuillage tout autant apprécié». 216

226 8 ) Basculez dans le code source (HTML) 9 ) Lisez, analysez le code, identifiez les balises. Résultat obtenu: Il faut noter: La présence du titre du site: «site03» en en-tête. C est normal. Ce libellé peut être modifié via «Système / Configuration». Les titres apparaissent très grands. Nous verrons comment modifier cela via les styles dans la partie «CSS». 217

227 10 ) Revenez dans l article et faites une expérience de changement de symboles au niveau des puces (n oubliez pas de sélectionner les lignes voulues). Code HTML: 218

228 Encoder le code source directement (le code est fourni) 1 ) Créez un nouvel article dans la catégorie «Fiches des plantes» et, si nécessaire, cliquez sur «Toggle Editor» pour basculer dans l éditeur de code source. 2 ) Insérez le code suivant en analysant bien chaque ligne et le rôle de chaque balise. Résultat: 219

229 Encoder le code source directement (le code n est pas fourni) En vous inspirant de ce qui vient d être vu, créez l article suivant (si possible, en encodant directement le code HTML). Cet article sera classé dans la catégorie «Fiches des plantes». Note: Balise pour souligner du texte: <u> </u> Les balises <h1>, <h2>, <p>, <br />, <strong>, <mark>, <ol>, <li> En utilisant la barre d outils de l éditeur JCE 1 ) Créer l article suivant classé dans la catégorie «Techniques». 220

230 2 ) Sélectionnez «Bouturer un rosier» puis sélectionnez «Titre 1». 3 ) Placez le curseur à l endroit où vous souhaitez créer un saut de ligne puis formez la combinaison de touches: Shift + Return. 4 ) Sélectionnez «Les différentes étapes» puis sélectionnez «Titre 2». 5 ) Sélectionnez certains paragraphes comme illustré ci-dessous, puis cliquez sur le bouton permettant d insérer des puces numérotées. 221

231 6 ) Basculez dans le code HTML et analysez celui-ci. 7 ) Sélectionnez les paragraphes voulus, déroulez les options relatives au bouton permettant d insérer des puces numérotées puis sélectionnez par exemple «Alphabet minuscule». 8 ) Basculez vers le code source et analysez celui-ci. 222

232 9 ) Sélectionnez le paragraphe «Le bouturage» puis cliquez sur le bouton 10 ) Basculez vers le code source et analysez celui-ci. 223

233 Encoder le code source directement (le code est fourni) 1 ) Créez un nouvel article dans la catégorie «Techniques» et, si nécessaire, cliquez sur «Toggle Editor» pour basculer dans l éditeur de code source. 2 ) Insérez le code suivant en analysant bien chaque ligne et le rôle de chaque balise. Aperçu: 224

234 Note: dans l article qui précède, nous avons utilisé des puces numérotées de type «chiffres arabes» alors que dans l article «Bouturer un rosier», nous avions utilisé des caractères alphabétiques. Dans le cas présent notre objectif est de tester différentes variantes mais il est évident que dans un site mis en ligne, il faut veiller à une certaine uniformité Encoder le code source directement (le code n est pas fourni) En vous inspirant de ce qui vient d être vu, créez l article suivant (si possible, en encodant directement le code HTML). Cet article sera classé dans la catégorie «Techniques» Les balises <h1>, <table>, <tr>, <td>, <a> (liens externes) En utilisant la barre d outils de l éditeur JCE 1 ) Créez un nouvel article dont le titre est «Liens». Insérez dans celui-ci un tableau et encodez quelques éléments de texte. 225

235 2 ) Définissez «Quelques sites intéressants» en «Titre 1». 3 ) Sélectionnez les en-têtes de colonnes et cliquez sur le bouton 4 ) Placez le curseur dans la cellule où nous souhaitons créer un premier lien puis cliquez sur le bouton «Insérer/Modifier un lien». 226

236 5 ) Complétez la boîte de dialogue suivante puis cliquez sur «Insérer». 6 ) Répétez les actions pour les différents liens. 227

237 Résultat: 228

238 7 ) Basculez dans le code source et analysez celui-ci: Ce n est pas indispensable, mais vous pouvez éventuellement modifier le code de la manière suivante: L'élément HTML <thead> (pour Table Head) définit un ensemble de lignes qui correspondent aux en-têtes des colonnes du tableau. L élément HTML <tbody> (pour Table Body) définit un ensemble de lignes représentant le corps au sein d un tableau (<table>). Les balises <tr> doivent alors être placées entre <tbody> et </tbody>. Les balises <thead>, <tbody>, <tfoot> apportent aux périphériques (imprimantes, écrans) des informations sémantiques supplémentaires. Ceci peut avoir un 229

239 impact à l impression. Pour les écrans, <tbody> va permettre un défilement différent des éléments <tfoot>, <thead> du tableau (<table>) parent Compléter l article en insérant directement le code source voulu En travaillant directement dans le code source, complétez le tableau afin d arriver au résultat suivant Les balises <h1>, <table>, <tr>, <td>, <a> (liens internes) En utilisant la barre d outils de l éditeur JCE 1 ) Soit l article suivant. Définissez «Glossaire» en «Titre 1». 230

240 2 ) Sélectionnez le premier terme commençant par la lettre A puis cliquez sur le bouton «Insérer/Modifier une ancre». 3 ) Nommez l ancre définie puis cliquez sur «Insérer». 4 ) Sélectionnez la lettre A sur laquelle le lien doit être défini puis cliquez sur le bouton «Insérer/Modifier un lien». 231

241 5 ) Complétez la boîte de dialogue qui suit puis cliquez sur «Insérer». 6 ) Basculez vers le code source et analysez celui-ci. Pour tester ces liens, il faut passer par le frontend Compléter l article en insérant directement le code source voulu En travaillant directement dans le code source, complétez le code afin d implémenter les liens sur les lettres B, C et D. 232

242 9.3.5 Les balises <h1>, <h2>, <p>, <img> En utilisant la barre d outils de l éditeur JCE L objectif est à présent d insérer des images dans certains articles. NB: supposons que les photos de fleurs aient déjà été chargées au niveau du site. 1 ) Ouvrez l article précédemment créé concernant l agapanthe. Placez le curseur à l endroit voulu puis cliquez sur le bouton «Insérer/Modifier une image». 2 ) Complétez la fenêtre qui suit de manière adéquate puis cliquez sur «Insérer». 233

243 3 ) La photo apparaît dans l article. Placez le curseur à l endroit adéquat puis insérez la deuxième photo. 234

244 Compléter l article en insérant directement le code source voulu En travaillant directement dans le code source, complétez le code afin d insérer la troisième photo. Résultat à obtenir: Associons les balises <img> et <a> Il faut que l extension «Mediabox CK» ait été installée et activée. 235

245 En utilisant la barre d outils de l éditeur JCE Notre objectif est de créer des liens sur les vignettes permettant d obtenir les photos dans une taille plus grande. 1 ) Sélectionnez la première vignette puis cliquez sur «Insérer/Modifier un lien». 2 ) Cliquez sur le bouton «Explorer». 236

246 3 ) Sélectionnez la photo de plus grande taille (en correspondance avec la vignette) puis cliquez sur «Insérer». 4 ) Activez l onglet «Avancé», définissez l effet «lightbox» puis cliquez sur «Insérer». 237

247 5 ) Basculez vers le code source et analysez celui-ci Compléter l article en insérant directement le code source voulu Complétez le code de la manière suivante afin que les liens existent sur les différentes vignettes des photos d agapanthes Exerçons-nous Insérez les photos voulues et les liens dans les articles concernant les arums et les bignones. 238

248 9.3.7 Les balises <h1>, <p>, <br />, <span>, <div>, <strong> En utilisant la barre d outils de l éditeur JCE 1 ) Créez l article suivant qui sera classé dans la catégorie «Poèmes». 239

249 2 ) Définissez «La petite fleur rose» comme «Titre 1». 3 ) Sélectionnez «Recueil: España (1845)» et demandez un alignement à droite. 4 ) Basculez vers le code source et analysez celui-ci. 5 ) Rebasculez vers l éditeur, sélectionnez «Recueil» puis cliquez sur le bouton 6 ) Sélectionnez «España (1845)» puis définissez une couleur de caractères. 240

250 7 ) Basculez vers le code source et analysez celui-ci Encoder le code source directement (le code est fourni) L objectif à présent est de demander un centrage du texte du poème. Cependant, nous ne souhaitons pas agir sur chaque paragraphe mais définir une division (<div>) et définir le centrage au niveau de celle-ci. Modifiez le code source de la manière suivante. Vérifiez le résultat obtenu. 241

251 9.4 Compléter les articles, le menu 1 ) Créez l article suivant. 2 ) Ajoutez les liens «Lire la suite» au sein des articles voulus afin que la présentation suivante soit possible (lien «Les plantes» du menu). 242

252 3 ) Ajoutez les liens «Lire la suite» au sein des articles voulus afin que la présentation suivante soit possible (lien «Les techniques» du menu). 4 ) Complétez le menu de la manière suivante. NB: comme vous pouvez le constater les articles de la catégorie «Poèmes» seront présentés entièrement (sans lien «Lire la suite») sous forme d une colonne. 243

253 CSS 244

254 1 Approche générale Source: Présentation CSS (Cascading Style Sheets), est un langage qui vient compléter le HTML. Petit rappel: à quoi sert CSS? CSS? C'est lui qui vous permet de choisir la couleur de votre texte. Lui qui vous permet de sélectionner la police utilisée sur votre site. Lui encore qui permet de définir la taille du texte, les bordures, le fond Et aussi, c'est lui qui permet de faire la mise en page de votre site. Vous pourrez dire: je veux que mon menu soit à gauche et occupe telle largeur, que l'en-tête de mon site soit positionné en haut et qu'il soit toujours visible, etc. Grâce au HTML, nous pouvons définir le contenu. Le CSS vient compléter ce contenu pour mettre en forme tout cela et donner l'apparence que l'on souhaite. CSS: des débuts difficiles Il faut savoir qu'aux débuts du Web, CSS n'existait pas. En fait, il n'y avait initialement que le langage HTML. Le HTML est né en 1991 et CSS en Alors, vous vous demandez sûrement: comment faisait-on la mise en forme de 1991 à 1996? Eh bien, uniquement en HTML! Il y avait en effet des balises HTML dédiées à la mise en forme. <font color="#aab1c3">, par exemple, permettait de définir la couleur du texte. Cependant, les pages HTML commençaient à devenir assez complexes. Il y avait de plus en plus de balises et c'était un joyeux mélange entre le fond et la forme, qui rendait la mise à jour des pages web de plus en plus complexe. C'est pour cela que l'on a créé le langage CSS. Cependant, le CSS n'a pas été adopté immédiatement par les webmasters, loin de là. Il fallait se défaire de certaines mauvaises habitudes et cela a pris du temps. Encore aujourd'hui, on peut trouver des sites web avec des balises HTML de mise en forme, anciennes et obsolètes, comme <font>! CSS: la prise en charge des navigateurs Tout comme le HTML, le CSS a évolué. On peut distinguer quatre versions: CSS 1 CSS 2.0 CSS 2.1 CSS 3. En fait, la version CSS 3 n'est pas encore totalement finalisée. Cependant, elle est bien avancée et aujourd'hui déjà bien prise en charge par de nombreux navigateurs, ce qui fait qu'on peut déjà s'en servir. Il serait dommage de passer à côté car CSS 3 apporte de nombreuses fonctionnalités à CSS 245

255 (leur nombre double par rapport à CSS 2.1!). Nous nous baserons donc dans ce cours sur CSS 3, qui reprend et complète la plupart des fonctionnalités de CSS 2.1. Ce sont les navigateurs web qui font le travail le plus complexe: ils doivent lire le code CSS et «comprendre» comment afficher la page. Les navigateurs ne connaissent pas toutes les propriétés CSS qui existent. Plus le navigateur est vieux, moins il connaît de fonctionnalités CSS. Voici un site extrêmement intéressant car il propose notamment une table de compatibilité des fonctionnalités de HTML et CSS sur différents navigateurs (et sur leurs différentes versions): Où les styles peuvent-ils être insérés? Vous avez le choix car on peut écrire du code en langage CSS à trois endroits différents: dans un fichier.css (méthode la plus recommandée), dans l'en-tête <head> du fichier HTML, directement dans les balises du fichier HTML via un attribut style (méthode la moins recommandée). Voyons ces trois méthodes mais sachez d'ores et déjà que la première est la meilleure Dans un fichier.css (recommandé) On écrit le plus souvent le code CSS dans un fichier spécial ayant l'extension.css (contrairement aux fichiers HTML qui ont l'extension.html). C'est la méthode la plus pratique et la plus souple. Cela nous évite de tout mélanger dans un même fichier. Exemple: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="styles.css" /> <title>premiers tests du CSS</title> </head> <body> <h1>mon super site</h1> <p>bonjour et bienvenue sur mon site!</p> <p>pour le moment, mon site est un peu <em>vide</em>. Patientez encore un peu!</p> </body> </html> Vous noterez le contenu de la ligne 5, <link rel="stylesheet" href="styles.css" /> : c'est elle qui indique que ce fichier HTML est associé à un fichier appelé styles.css, chargé de la mise en forme. 246

256 Dans un autre fichier (nommé styles.css dans le cas présent), nous aurions alors la portion de code suivante: p { } color: blue; NB: dans le cas présent, on suppose que le fichier HTML et le fichier CSS sont dans le même dossier Dans l'en-tête <head> du fichier HTML Il existe une autre méthode pour utiliser du CSS dans ses fichiers HTML: cela consiste à insérer le code CSS directement dans une balise <style> à l'intérieur de l'en-tête <head>. Voici comment on peut obtenir exactement le même résultat que dans le cas précédent avec un seul fichier.html qui contient le code CSS (lignes 5 à 10): <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> p { color: blue; } </style> <title>premiers tests du CSS</title> </head> <body> <h1>mon super site</h1> <p>bonjour et bienvenue sur mon site!</p> <p>pour le moment, mon site est un peu <em>vide</em>. Patientez encore un peu!</p> </body> </html> Directement dans les balises (non recommandé) Dernière méthode, à manipuler avec précaution: vous pouvez ajouter un attribut style à n'importe quelle balise. Vous insérerez votre code CSS directement dans cet attribut style: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>premiers tests du CSS</title> 247

257 </head> <body> <h1>mon super site</h1> <p style="color: blue;">bonjour et bienvenue sur mon site!</p> <p>pour le moment, mon site est un peu <em>vide</em>. Patientez encore un peu!</p> </body> </html> Cette fois, seul le texte du premier paragraphe, dont la balise contient le code CSS, sera coloré en bleu. Quelle méthode choisir? Il est fortement recommandé de prendre l'habitude de travailler avec la première. Pourquoi? Si vous placez le code CSS directement dans le fichier HTML, il faudra copier ce code dans tous les fichiers HTML de votre site! Et si demain vous changez d'avis, par exemple si vous voulez que vos paragraphes soient écrits en rouge et non en bleu, il faudra modifier chaque fichier HTML un à un. Si vous travaillez avec un fichier CSS externe, vous n'aurez besoin d'écrire cette instruction qu'une seule fois pour tout votre site Et Joomla dans tout cela? Lorsque l on installe un template (modèle), plusieurs feuilles de styles (fichiers CSS) sont copiées. Prenons l exemple de l utilisation du template «Protostar» auquel nous avons fait appel dans notre site «site03». Dossier contenant les feuilles de styles du modèle: C:\wamp\www\site03\templates\protostar\css Contenu de ce dossier: Le fichier «index.html» est présent simplement pour empêcher la lecture du contenu du dossier si un internaute plus ou moins malveillant encode l adresse du répertoire dans son navigateur. Dans le cas présent, nous avons donc un fichier.css, il s agit de template.css Prenons l exemple de l utilisation du template «Carnets_Voyages» auquel nous avons fait appel dans notre site «site02». Dossier contenant les feuilles de styles du modèle: C:\wamp\www\site02\templates\carnets_voyages\css 248

258 Contenu de ce dossier: Le fichier «index.html» est présent simplement pour empêcher la lecture du contenu du dossier si un internaute plus ou moins malveillant encode l adresse du répertoire dans son navigateur. Dans le cas présent, il y a plusieurs feuilles de styles: bootstrap.css: feuille de styles relative au framework bootstrap. Bootstrap est une boîte à outils incluant des éléments HTML, CSS et Javascript. Ces outils peuvent être utilisés afin de gagner du temps lors du développement d un site Internet, de plus cela permet une certaine standardisation au sein d une équipe de développement. default.css: feuille de styles de base. default_rtl.css: feuille de styles de base prise en considération pour les langues qui s écrivent et se lisent de droite à gauche (RTL = Right To Left). mobile.css: feuille de styles utilisée pour les appareils mobiles (smartphones ). template.css: feuille de styles incluant les styles définis dans le modèle. template_rtl.css: feuille de styles incluant les styles définis dans le modèle. Elle sera prise en considération pour les langues qui s écrivent et se lisent de droite à gauche (RTL = Right To Left). 1.3 Appliquer un style à une balise Maintenant que nous savons où placer le code CSS, intéressons-nous de plus près à ce code. Rappel du code vu précédemment: p { } color: blue; Dans un code CSS comme celui-ci, on trouve trois éléments différents: Des noms de balises: on écrit les noms des balises dont on veut modifier l'apparence. Par exemple, si je veux modifier l'apparence de tous les paragraphes <p>, il faut écrire p NB: comme nous le verrons plus loin dans ce cours, les styles peuvent être définis en se basant sur d autres éléments que les balises. Des propriétés CSS: les «effets de style» de la page sont rangés dans des propriétés. Il y a par exemple la propriété color qui permet d'indiquer la couleur du texte, font-size qui permet d'indiquer la taille du texte, etc. Il y a beaucoup de propriétés CSS. 249

259 Les valeurs: pour chaque propriété CSS, on doit indiquer une valeur. Par exemple, pour la propriété color, il faut indiquer le nom de la couleur (ou son code). Pour font-size, il faut indiquer quelle taille on veut, etc. Schématiquement, une feuille de styles CSS ressemble donc à cela: balise1 { propriete1: valeur1; propriete2: valeur2; propriete3: valeur3; } balise2 { propriete1: valeur1; propriete2: valeur2; propriete3: valeur3; propriete4: valeur4; } balise3 { propriete1: valeur1; } Vous repérez dans cet extrait de code les balises, propriétés et valeurs précédemment évoquées. Comme vous le voyez, on écrit le nom de la balise (par exemple h1) et on ouvre des accolades pour, à l'intérieur, mettre les propriétés et valeurs que l'on souhaite. On peut mettre autant de propriétés que l'on veut à l'intérieur des accolades. Chaque propriété est suivie du symbole «deux-points» ( : ) puis de la valeur correspondante. Enfin, chaque ligne se termine par un point-virgule ( ; ). Le code CSS que nous avons utilisé jusqu'ici: p { } color: blue; signifie donc en français : «Je veux que tous mes paragraphes soient écrits en bleu.» Essayez de changer le nom de la balise affectée par le code CSS. Par exemple, si l on écrit h1, c'est le titre de niveau h1 qui sera écrit en bleu. h1 { color: blue; } 250

260 Prenons le code CSS suivant: h1 { color: blue; } em { color: blue; } Il signifie que nos titres <h1> et nos textes importants <em> doivent s'afficher en bleu. Par contre, c'est un peu répétitif, vous ne trouvez pas? Heureusement, il existe un moyen en CSS d'aller plus vite si les deux balises doivent avoir la même présentation. Il suffit de combiner la déclaration en séparant les noms des balises par une virgule, comme ceci: h1, em { color: blue; } Cela signifie: «Je veux que le texte de mes <h1> et <em> soit écrit en bleu». Vous pouvez indiquer autant de balises à la suite que vous le désirez. Des commentaires dans du CSS Comme en HTML, il est possible de mettre des commentaires. Les commentaires ne seront pas affichés, ils servent simplement à indiquer des informations pour vous, par exemple pour vous y retrouver dans un long fichier CSS. D'ailleurs, vous allez vous en rendre compte, en général le fichier HTML est assez court et la feuille CSS assez longue (si elle contient tous les éléments de style de votre site, c'est un peu normal). Notez qu'il est possible de créer plusieurs fichiers CSS pour votre site si vous ressentez le besoin de séparer un peu votre code CSS (en fonction des différentes sections de votre site, par exemple). Donc, pour faire un commentaire, c'est facile! Tapez /*, suivi de votre commentaire, puis */ pour terminer votre commentaire. Vos commentaires peuvent être écrits sur une ou plusieurs lignes. Par exemple: /* style.css Un commentaire */ 251

261 p { } color: blue; /* Les paragraphes seront en bleu */ 1.4 Appliquer un style en utilisant les attributs class ou id La manière de travailler qui a été vue jusqu ici implique par exemple que TOUS les paragraphes possèdent la même présentation (dans le cas précédent, ils seront donc tous écrits en bleu). Comment faire pour que certains paragraphes seulement soient écrits d'une manière différente? On pourrait placer le code CSS dans un attribut style sur la balise que l'on vise mais il ne s agit pas de la meilleure technique. Pour résoudre le problème, on peut utiliser ces attributs spéciaux qui fonctionnent sur toutes les balises: l'attribut class l'attribut id Que les choses soient claires dès le début: les attributs class et id sont proches. Pour le moment, et pour faire simple, on ne va s'intéresser qu'à l'attribut class. C'est un attribut que l'on peut mettre sur n'importe quelle balise, aussi bien titre que paragraphe, image, etc. <h1 class=".."> </h1> <p class=".."> </p> <img class=".." /> Oui mais que met-on comme valeur à l'attribut class? En fait, vous devez écrire un nom qui sert à identifier la balise. Ce que vous voulez, du moment que le nom commence par une lettre. Par exemple, nous allons associer la classe introduction à notre premier paragraphe (ligne 11): <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="style.css" /> <title>premiers tests du CSS</title> </head> <body> <h1>mon super site</h1> <p class="introduction">bonjour et bienvenue sur mon site!</p> <p>pour le moment, mon site est un peu <em>vide</em>. Patientez encore un peu!</p> </body> </html> 252

262 Maintenant que c'est fait, votre paragraphe est identifié. Il a un nom: introduction. Vous allez pouvoir réutiliser ce nom dans le fichier CSS pour dire : «Je veux que seules les balises qui ont comme nom 'introduction' soient affichées en bleu». Pour faire cela en CSS, indiquez le nom de votre classe en commençant par un point, comme cidessous:.introduction { color: blue; } Et l'attribut id alors? Lui, il fonctionne exactement de la même manière que class, à un détail près: il ne peut être utilisé qu'une fois dans le code d une page. Quel intérêt? Il y en a assez peu pour tout vous dire, cela vous sera utile si vous faites du JavaScript plus tard pour reconnaître certaines balises. En pratique, nous ne mettrons des id que sur des éléments qui sont uniques dans la page, comme par exemple le logo: <img src="images/logo.png" alt="logo du site" id="logo" /> Si vous utilisez des id, lorsque vous définirez leurs propriétés dans le fichier CSS, il faudra faire précéder le nom de l'id par un dièse (#): #logo { /* Indiquez les propriétés CSS ici */ } Si vous êtes quelque peu perdu entre class et id, retenez que deux balises peuvent avoir le même nom avec l'attribut class. Un nom d'id doit en revanche être unique dans la page HTML. Les balises universelles Il arrivera parfois que vous ayez besoin d'appliquer une class (ou un id) à certains mots qui, à l'origine, ne sont pas entourés par des balises. En effet, le problème de class, c'est qu'il s'agit d'un attribut. Vous ne pouvez donc en mettre que sur une balise. Si, par exemple, je veux modifier uniquement «bienvenue» dans le paragraphe suivant: <p>bonjour et bienvenue sur mon site!</p> Cela serait facile à faire s'il y avait une balise autour de «bienvenue» mais, malheureusement il n'y en a pas. Par chance, on a inventé la balise «qui ne sert à rien». En fait, on a inventé deux balises dites universelles, qui n'ont aucune signification particulière (elles n'indiquent pas que le mot est important, par exemple). Il y a une différence minime (mais significative!) entre ces deux balises: <span> </span> : c'est une balise de type inline, c'est-à-dire une balise que l'on place au sein d'un paragraphe de texte, pour sélectionner certains mots uniquement. Les balises <strong> et <em> sont de la même famille. Cette balise s'utilise donc au milieu d'un paragraphe et c'est celle dont nous allons nous servir pour colorer «bienvenue». 253

263 <div> </div> : c'est une balise de type block, qui entoure un bloc de texte. Les balises <p>, <h1>, etc. sont de la même famille. Ces balises ont quelque chose en commun: elles créent un nouveau «bloc» dans la page et provoquent donc par défaut un retour à la ligne. <div> est une balise fréquemment utilisée dans la construction d'un design, comme nous le verrons plus tard. Pour le moment donc, nous allons utiliser plutôt la balise <span>. On la met autour de «bienvenue», on lui ajoute une classe (du nom que l'on veut), on crée le CSS et l objectif est atteint. <p>bonjour et <span class="salutations">bienvenue</span> sur mon site!</p>.salutations { color: blue; } 1.5 Appliquer un style: les sélecteurs avancés En CSS, le plus difficile est de savoir cibler le texte dont on veut changer la forme. Pour cibler (on dit «sélectionner») les éléments de la page à modifier, on utilise ce que l'on appelle des sélecteurs. Vous en avez déjà utilisés quelques-uns un peu plus tôt dans ce chapitre, résumons-les pour commencer. Les sélecteurs que vous connaissez déjà Ces sélecteurs, que nous avons vus précédemment, sont de loin les plus couramment utilisés. Commençons par la base de la base: p { } signifie «Je veux toucher tous les paragraphes». Après, c'est à vous de dire ce que vous faites à ces paragraphes (vous les écrivez en bleu, par exemple). Nous avons aussi vu: h1, em { } qui signifie «Tous les titres et tous les textes importants». Nous avons sélectionné deux balises d'un coup. Et enfin, nous avons vu comment sélectionner des balises précises à qui nous avons donné un nom grâce aux attributs class et id:.class { } 254

264 #id { } Il existe des dizaines d'autres façons de cibler des balises en CSS! Nous n'allons pas toutes les voir car il y en a beaucoup et certaines sont complexes, mais voici déjà de quoi vous permettre d'être plus efficaces en CSS! Les sélecteurs avancés * : sélecteur universel * { } Sélectionne toutes les balises sans exception. On l'appelle le sélecteur universel. A B : une balise contenue dans une autre h3 em { } Sélectionne toutes les balises <em> situées à l'intérieur d'une balise <h3>. Notez qu'il n'y a pas de virgule entre les deux noms de balises. Exemple de code HTML correspondant: <h3>titre avec <em>texte important</em></h3> A + B : une balise qui en suit une autre h3 + p { } Sélectionne la première balise <p> située après un titre <h3>. Exemple: <h3>titre</h3> <p>paragraphe</p> A[attribut] : une balise qui possède un attribut a[title] { } Sélectionne tous les liens <a> qui possèdent un attribut title. 255

265 Exemple: <a href=" title="infobulle"> A[attribut="Valeur"] : une balise, un attribut et une valeur exacte a[title="cliquez ici"] { } Idem, mais l'attribut doit en plus avoir exactement pour valeur «Cliquez ici». Exemple: <a href=" title="cliquez ici"> A[attribut*="Valeur"] : une balise, un attribut et une valeur a[title*="ici"] { } Idem, l'attribut doit cette fois contenir dans sa valeur le mot «ici» (peu importe sa position). D'autres sélecteurs existent! 1.6 En résumé CSS est un autre langage qui vient compléter le HTML. Son rôle est de mettre en forme votre page web. Il faut être vigilant sur la compatibilité des navigateurs avec certaines fonctionnalités récentes de CSS3. Quand un navigateur ne connaît pas une instruction de mise en forme, il l'ignore simplement. On peut écrire le code CSS à plusieurs endroits différents, le plus conseillé étant de créer un fichier séparé portant l'extension.css (exemple : style.css). En CSS, on sélectionne quelles portions de la page HTML on veut modifier et on change leur présentation avec des propriétés CSS : balise1 { propriete1: valeur1; propriete2: valeur2; } Il existe de nombreuses façons de sélectionner la portion de la page que l'on veut mettre en forme. Par exemple, on peut cibler: o toutes les balises d'un même type, en écrivant simplement leur nom (h1 par exemple); 256

266 o o certaines balises spécifiques, auxquelles on a donné des noms à l'aide des attributs class ou id (.nomclasse ou #nomid); uniquement les balises qui se trouvent à l'intérieur d'autres balises (h3 em). 2 Formatage du texte à l aide de styles Source: Introduction Le «formatage du texte» concerne la modification de l'apparence du texte (on dit qu'on le «met en forme»). Pas de surprise particulière: nous sommes toujours dans le CSS et nous allons réutiliser ce que nous venons d'apprendre dans le chapitre précédent. Nous allons donc travailler directement au sein d un fichier.css Ce point va être l'occasion de découvrir de nombreuses propriétés CSS: nous allons voir comment modifier la taille du texte, changer la police, aligner le texte 2.2 La taille Pour modifier la taille du texte, on utilise la propriété CSS font-size. Mais comment indiquer la taille du texte? C'est là que les choses se corsent car plusieurs techniques vous sont proposées: Indiquer une taille absolue: en pixels, en centimètres ou millimètres. Cette méthode est très précise mais il est conseillé de ne l'utiliser que si c'est absolument nécessaire, car on risque d'indiquer une taille inadaptée pour certains lecteurs. Indiquer une taille relative: en pourcentage ou «em», cette technique a l'avantage d'être plus souple. Elle s'adapte plus facilement aux préférences de taille des visiteurs Une taille absolue Pour indiquer une taille absolue, on utilise généralement les pixels. Pour avoir un texte de 16 pixels de hauteur, vous devez donc écrire: font-size: 16px; Voici un exemple d'utilisation: p { } font-size: 14px; /* Paragraphes de 14 pixels */ 257

267 h1 { font-size: 40px; /* Titres de 40 pixels */ } Si vous le souhaitez, vous pouvez également définir des tailles en centimètres ou millimètres. Remplacez «px» par «cm» ou «mm». Ces unités sont cependant moins bien adaptées aux écrans Une valeur relative C'est la méthode recommandée car le texte s'adapte alors plus facilement aux préférences de tous les visiteurs. Il y a plusieurs moyens d'indiquer une valeur relative. Vous pouvez par exemple écrire la taille avec des mots en anglais comme ceux-ci: xx-small : minuscule x-small : très petit small : petit medium : moyen large : grand x-large : très grand xx-large : très très grand Vous pouvez tester l'utilisation de ces valeurs dans votre code CSS: p { } font-size: small; h1 { font-size: large; } Bon, cette technique a un défaut: il n'y a que sept tailles disponibles (car il n'y a que sept noms). Heureusement, il existe d'autres moyens. La technique idéale consiste à indiquer la taille en «em». Si vous écrivez 1em, le texte a une taille normale. Si vous voulez grossir le texte, vous pouvez inscrire une valeur supérieure à 1, comme 1.3em Si vous voulez réduire le texte, inscrivez une valeur inférieure à 1, comme 0.8em Faites attention: pour les nombres décimaux, il faut mettre un point et non une virgule. Vous devez donc écrire «1.4em» et non pas «1,4em»! Exemple: p { } font-size: 0.8em; 258

268 h1 { font-size: 1.3em; } D'autres unités sont disponibles. Vous pouvez par exemple travailler en pourcentages: 80%, 130% 2.3 La police Ah La police On touche un point sensible. En effet, il se pose un problème: pour qu'une police s'affiche correctement, il faut que tous les internautes l'aient. Si un internaute n'a pas la même police que vous, son navigateur prendra une police par défaut (une police standard) qui n'aura peut-être rien à voir avec ce à quoi vous vous attendiez. La bonne nouvelle, c'est que depuis CSS 3, il est possible de faire télécharger automatiquement une police par le navigateur. Nous verrons plus tard comment faire cela Modifier la police utilisée La propriété CSS qui permet d'indiquer la police à utiliser est font-family. Vous devez écrire le nom de la police comme ceci: balise { font-family: police; } Seulement, pour éviter les problèmes si l'internaute n'a pas la même police que vous, on précise en général plusieurs noms de police, séparés par des virgules: balise { font-family: police1, police2, police3, police4; } Le navigateur essaiera d'abord d'utiliser la police police1. S'il ne l'a pas, il essaiera la police police2. S'il ne l'a pas, il passera à la police police3, et ainsi de suite. En général, on indique en tout dernier serif, ce qui correspond à une police par défaut (qui ne s'applique que si aucune autre police n'a été trouvée). Il existe aussi une autre police par défaut appelée sans-serif. La différence entre les deux est la présence de petites pattes de liaison en bas des lettres, que la police sans-serif n'a pas. Oui, mais quelles sont les polices les plus courantes qu'on a le «droit» d'utiliser, me direz-vous? Voici une liste de polices qui fonctionnent bien sur la plupart des navigateurs: Arial Arial Black Comic Sans MS (à éviter) 259

269 Courier New (à éviter) Georgia Impact Times New Roman (à éviter) Trebuchet MS Verdana Ainsi, on écrit: p { } font-family: Impact, "Arial Black", Arial, Verdana, sans-serif; cela signifie : «Mets la police Impact ou, si elle n'y est pas, Arial Black, ou sinon Arial, ou sinon Verdana, ou si rien n'a marché, mets une police standard (sans-serif)». En général, il est bien d'indiquer un choix de trois ou quatre polices (+ serif ou sans-serif) afin de s'assurer qu'au moins l'une d'entre elles aura été trouvée sur l'ordinateur du visiteur. Si le nom de la police comporte des espaces, il est conseillé de l'entourer de guillemets: comme cela a été fait pour Arial Black Utiliser une police personnalisée Supposons que vous trouviez que le choix des polices est trop limité. Comment peut-on utiliser sa police préférée sur son site web? Pendant longtemps, cela n'était pas possible. Aujourd'hui, avec CSS 3, il existe heureusement un moyen d'utiliser n'importe quelle police sur son site. Cela fonctionne bien avec la plupart des navigateurs. Mais attention, il y a des défauts: Il faudra que le navigateur de vos visiteurs télécharge automatiquement le fichier de la police, dont le poids peut atteindre, voire dépasser 1 Mo. La plupart des polices sont soumises au droit d'auteur, il n'est donc pas légal de les utiliser sur son site. Heureusement, il existe des sites comme fontsquirrel.com et dafont.com qui proposent en téléchargement un certain nombre de polices libres de droits. Le site fontsquirrel.com est recommandé car il permet de télécharger des packs prêts à l'emploi pour CSS 3. Il existe plusieurs formats de fichiers de polices et ceux-ci ne fonctionnent pas sur tous les navigateurs. Voici les différents formats de fichiers de polices qui existent et qu'il faut connaître:.ttf : TrueType Font. Fonctionne sur IE9 et tous les autres navigateurs..eot : Embedded OpenType. Fonctionne sur Internet Explorer uniquement, toutes versions. Ce format est propriétaire, produit par Microsoft..otf : OpenType Font. Ne fonctionne pas sur Internet Explorer..svg : SVG Font. Le seul format reconnu sur les iphones et ipads pour le moment..woff : Web Open Font Format. Nouveau format conçu pour le Web, qui fonctionne sur IE9 et tous les autres navigateurs. 260

270 En CSS, pour définir une nouvelle police, vous devez la déclarer comme { font-family: 'MaPolicePreferee'; src: url('mapolicepreferee.eot'); } Le fichier de police (ici MaPolicePreferee.eot) doit ici être situé dans le même dossier que le fichier CSS (ou dans un sous-dossier, si vous utilisez un chemin relatif). Je croyais qu'il y avait plusieurs formats de police? Oui, d'ailleurs les.eot ne fonctionnent que sur Internet Explorer. L'idéal est de proposer plusieurs formats pour la police: le navigateur téléchargera celui qu'il sait lire. Voici comment indiquer plusieurs { font-family: 'MaPolicePreferee'; src: url('mapolicepreferee.eot') format('eot'), url(mapolicepreferee.woff') format('woff'), url(mapolicepreferee.ttf') format('truetype'), url(mapolicepreferee.svg') format('svg'); } Supposons que nous téléchargions une police sur Font Squirrel, par exemple Learning Curve Pro. Il suffit de cliquer sur «@font-face Kit», ceci permet de télécharger un kit prêt à l'emploi avec tous les formats pour cette police. Le fichier CSS ressemblera au final à { /* Définition d'une nouvelle police nommée LearningCurveProRegular */ font-family: 'LearningCurveProRegular'; src: url('learningcurve_ot-webfont.eot'); src: url('learningcurve_ot-webfont.eot?#iefix') format('embedded-opentype'), url('learningcurve_ot-webfont.woff') format('woff'), url('learningcurve_ot-webfont.ttf') format('truetype'), url('learningcurve_ot-webfont.svg#learningcurveproregular') format('svg'); } h1 /* Utilisation de la police que l'on vient de définir sur les titres */ { font-family: 'LearningCurveProRegular', Arial, serif; } La première permet de définir un nouveau nom de police qui pourra être utilisé dans le fichier CSS. Ensuite, nous utilisons ce nom de police avec la propriété font-family, que nous connaissons, pour modifier l'apparence des titres <h1>. Vous noterez quelques bizarreries dans le CSS généré par le site Font Squirrel. Le but est de pallier certains bugs sur Internet Explorer car les anciennes versions ne comprennent pas quand on définit plusieurs formats. Cela explique donc la présence d'un?#iefix dans le code. 261

271 2.4 Italique, gras, souligné Il existe en CSS une série de propriétés classiques de mise en forme du texte. Nous allons découvrir ici comment afficher le texte en gras, italique, souligné et au passage nous verrons qu'il est même possible d'aller jusqu'à le faire clignoter! Mettre en italique Pour rappel, la balise <em> est faite pour insister sur des mots. Cela veut dire que les mots qu'elle entoure sont assez importants. Pour représenter cette importance, la plupart des navigateurs choisissent d'afficher le texte en italique, mais ce n'est pas une obligation. Le CSS lui, permet de dire réellement: «Je veux que ce texte soit en italique». Rien ne vous empêche, par exemple, de décider que tous vos titres seront en italique. Concrètement, en CSS, pour mettre en italique, on utilise font-style qui peut prendre trois valeurs: italic => le texte sera mis en italique. oblique => le texte sera mis en oblique (les lettres sont penchées, le résultat est légèrement différent de l'italique proprement dit). normal => le texte sera normal (par défaut). Cela vous permet d'annuler une mise en italique. Par exemple, si vous voulez que les textes entre <em> ne soient plus en italique, vous devrez écrire: em { font-style: normal; } Ainsi, dans l'exemple suivant, on se sert de font-style pour mettre en italique tous les titres <h2>: Mettre en gras h2 { font-style: italic; } Alors, là encore, n'oublions pas que ce n'est pas <strong> qui permet de mettre en gras (son rôle est d'indiquer que le texte est important, donc le navigateur l'affiche généralement en gras). La mise en gras en CSS peut par exemple s'appliquer aux titres, à certains paragraphes entiers, etc. La propriété CSS pour mettre en gras est font-weight et prend les valeurs suivantes: bold => le texte sera en gras. normal => le texte sera écrit normalement (par défaut). Voici par exemple comment écrire les titres de niveau h1 en gras: h1 { font-weight: bold; } 262

272 2.4.3 Soulignement et autres décorations La propriété CSS associée porte bien son nom: text-decoration. Elle permet, entre autres, de souligner le texte, mais pas seulement. Voici les différentes valeurs qu'elle peut prendre: Exemples: underline => souligné. line-through => barré. overline => ligne au-dessus. blink => clignotant. Ne fonctionne pas sur tous les navigateurs (Internet Explorer et Google Chrome, notamment). none => normal (par défaut). h1 { text-decoration: blink; }.souligne { text-decoration: underline; }.barre { text-decoration: line-through; }.ligne_dessus { text-decoration: overline; } 2.5 L alignement Le langage CSS nous permet de définir tous les alignements connus: à gauche, centré, à droite et justifié. C'est tout simple. On utilise la propriété text-align et on indique l'alignement désiré: Exemples: left => le texte sera aligné à gauche (c'est le réglage par défaut). center => le texte sera centré. right => le texte sera aligné à droite. justify => le texte sera «justifié». Justifier le texte permet de faire en sorte qu'il prenne toute la largeur possible sans laisser d'espace blanc à la fin des lignes. Les textes des journaux, par exemple, sont très souvent justifiés. h1 { text-align: center; } 263

273 p { } text-align: justify;.signature { text-align: right; } Vous ne pouvez pas modifier l'alignement du texte d'une balise inline (comme <span>, <a>, <em>, <strong> ). L'alignement ne fonctionne que sur des balises de type block (<p>, <div>, <h1>, <h2>, ) et c'est un peu logique, quand on y pense: on ne peut pas modifier l'alignement de quelques mots au milieu d'un paragraphe! C'est donc en général le paragraphe entier qu'il vous faudra aligner. 2.6 Les flottants Le CSS nous permet de faire flotter un élément autour du texte. On dit aussi qu'on fait un «habillage». Pour que vous voyiez bien de quoi on parle, la figure suivante vous montre ce que nous allons apprendre à faire. La propriété permettant de définir un «flottement» est: float. Cette propriété peut prendre trois valeurs: none => l élément ne flotte pas. left => l'élément flottera à gauche. right => l'élément flottera à droite. L'utilisation des flottants est simple: Vous appliquez un float à une balise. Puis vous continuez à écrire du texte à la suite normalement. On peut aussi bien utiliser la propriété float sur des balises block que sur des balises inline. Il est courant de faire flotter une image pour qu'elle soit habillée par du texte, comme dans l'exemple précédent. 264

274 2.6.1 Faire flotter une image Nous allons apprendre ici à faire flotter une image. Voici le code HTML que nous devons taper dans un premier temps: <p><img src="flash.gif" class="imageflottante" alt="image flottante" /> Ceci est un texte normal de paragraphe, écrit à la suite de l'image et qui l'habillera car l'image est flottante.</p> Vous devez placer l'élément flottant en premier dans le code HTML. Si vous placez l'image après le paragraphe, l'effet ne fonctionnera pas. Voici le seul bout de code CSS qu'on ait besoin de taper, qui permet de faire flotter l'image à gauche:.imageflottante { float: left; } Pour faire flotter l'image à droite, c'est simple: il suffit d'indiquer la valeur right Stopper un flottant Quand vous mettez en place un flottant, le texte autour l'habille. Mais comment faire si vous voulez qu'au bout d'un moment le texte continue en dessous du flottant? On pourrait enchaîner plusieurs <br /> à la suite mais cela ne serait ni élégant ni très propre En gros, on aimerait pouvoir obtenir le même résultat qu'à la figure suivante. Il existe en fait une propriété CSS qui permet de dire: «Stop, ce texte doit être en-dessous du flottant et non plus à côté». C'est la propriété clear, qui peut prendre ces trois valeurs: left => le texte se poursuit en-dessous après un float: left; right => le texte se poursuit en-dessous après un float: right; both => le texte se poursuit en-dessous, que ce soit après un float: left; ou après un float: right; Pour simplifier, on va utiliser tout le temps le clear: both, qui marche après un flottant à gauche et après un flottant à droite (cela fonctionne donc à tous les coups). Pour illustrer son fonctionnement, on va prendre ce code HTML: <p><img src="flash.gif" class="imageflottante" alt="image flottante" /></p> <p>ce texte est écrit à côté de l'image flottante.</p> <p class="dessous">ce texte est écrit sous l'image flottante.</p> Et ce code CSS:.imageflottante { float: left; } 265

275 .dessous { clear: both; } On applique un clear: both; au paragraphe que l'on veut voir continuer sous l'image flottante. 2.7 En résumé On modifie la taille du texte avec la propriété CSS font-size. On peut indiquer la taille en pixels (16px), en «em» (1.3em), en pourcentage (110%), etc. On change la police du texte avec font-family. Attention, seules quelques polices sont connues par tous les ordinateurs. Vous pouvez cependant utiliser une police personnalisée avec la : cela forcera les navigateurs à télécharger la police de votre choix. De nombreuses propriétés de mise en forme du texte existent: font-style pour l'italique, font-weight pour la mise en gras, text-decoration pour le soulignement, etc. Le texte peut être aligné avec text-align. On peut faire en sorte qu'une image soit habillée («entourée») de texte avec float. 3 La couleur et le fond Source: Introduction Continuons notre tour d'horizon des propriétés CSS existantes. Nous allons nous intéresser ici aux propriétés liées de près ou de loin à la couleur. Nous verrons entre autres: comment changer la couleur du texte, comment mettre une couleur ou une image d'arrière-plan, comment ajouter des ombres, comment jouer avec les niveaux de transparence. 3.2 Couleur du texte Passons maintenant au vaste sujet de la couleur. Vous connaissez déjà la propriété qui permet de modifier la couleur du texte: il s'agit de color. Nous allons nous intéresser aux différentes façons d'indiquer la couleur, car il y en a plusieurs Indiquer le nom de la couleur La méthode la plus simple et la plus pratique pour choisir une couleur consiste à taper son nom (en anglais). Le seul défaut de cette méthode est qu'il n'existe que seize couleurs dites «standard». D'autres couleurs officieuses existent mais, elles ne fonctionneront pas forcément de la même manière sur tous les navigateurs. 266

276 La figure suivante vous montre les seize couleurs que vous pouvez utiliser en tapant simplement leur nom. Pour passer tous les titres de niveau h1 en marron, on peut donc écrire: h1 { color: maroon; } La notation hexadécimale Seize couleurs, c'est quand même un peu limite quand on sait que la plupart des écrans peuvent en afficher seize millions. Une autre technique est la notation hexadécimale. Elle est couramment utilisée sur le Web mais il existe aussi une autre méthode que nous verrons plus loin. 267

277 Un nom de couleur en hexadécimal, cela ressemble à: #FF5A28. Pour faire simple, c'est une combinaison de lettres et de chiffres qui indiquent une couleur. On doit toujours commencer par écrire un dièse (#), suivi de six lettres ou chiffres allant de 0 à 9 et de A à F. Ces lettres ou chiffres fonctionnent deux par deux. Les deux premiers indiquent une quantité de rouge, les deux suivants une quantité de vert et les deux derniers une quantité de bleu. En mélangeant ces quantités (qui sont les composantes Rouge-Vert-Bleu de la couleur) on peut obtenir la couleur que l'on veut. Ainsi, # correspond à la couleur noire et #FFFFFF à la couleur blanche. Voici par exemple comment on fait pour appliquer aux paragraphes la couleur blanche en hexadécimal: p { } color: #FFFFFF; Notez qu'il existe une notation raccourcie: on peut écrire une couleur avec seulement trois caractères. Par exemple : #FA3 équivaut à écrire #FFAA La méthode RGB Que signifie RGB? En anglais, Rouge-Vert-Bleu s'écrit Red-Green-Blue, ce qui s'abrège en «RGB». Comme avec la notation hexadécimale, pour choisir une couleur, on doit définir une quantité de rouge, de vert et de bleu. Exemple: p { } color: rgb(240,96,204); Comme vous avez pu le constater dans l'exemple, pour utiliser la méthode RGB, il faut taper rgb(rouge, Vert, Bleu) en remplaçant «Rouge, Vert, Bleu» par les nombres correspondants. Pour information, ces quantités sont toujours comprises entre 0 et Couleur de fond Pour indiquer une couleur de fond, on utilise la propriété CSS background-color. Elle s'utilise de la même manière que la propriété color, c'est-à-dire que vous pouvez taper le nom d'une couleur, l'écrire en notation hexadécimale ou encore utiliser la méthode RGB. Pour indiquer la couleur de fond de la page web, il faut travailler sur la balise <body>. Eh oui, <body> correspond à l'ensemble de la page web, c'est donc en modifiant sa couleur de fond que l'on changera la couleur d'arrière-plan de la page. Soit ce fichier CSS: /* On travaille sur la balise body, donc sur TOUTE la page */ body { 268

278 } background-color: black; /* Le fond de la page sera noir */ color: white; /* Le texte de la page sera blanc */ Par la pratique, on peut constater que tous les paragraphes <p> et titres <h1> seront dans les couleurs définies pour <body>. Comment cela se fait-il? Ce phénomène s'appelle l'héritage Le CSS et l'héritage En CSS, si vous appliquez un style à une balise, toutes les balises qui se trouvent à l'intérieur prendront le même style. C'est en fait simple à comprendre et intuitif. La balise <body>, vous le savez, contient entre autres les balises de paragraphe <p> et de titre <h1>. Si j'applique une couleur de fond noire et une couleur de texte blanche à la balise <body>, tous mes titres et paragraphes auront eux aussi un arrière-plan de couleur noire et un texte de couleur blanche C'est ce phénomène qu'on appelle l'héritage: on dit que les balises qui se trouvent à l'intérieur d'une autre balise «héritent» de ses propriétés. C'est d'ailleurs de là que vient le nom «CSS», qui signifie «Cascading Style Sheets», c'est-à-dire «Feuilles de style en cascade». Les propriétés CSS sont héritées en cascade: si vous donnez un style à un élément, tous les sous-éléments auront le même style. Cela veut dire que TOUT le texte de ma page web sera forcément écrit en blanc? Non, pas obligatoirement. Si vous dites par la suite que vous voulez vos titres en rouge, ce style aura la priorité et vos titres seront donc en rouge. En revanche, si vous n'indiquez rien de particulier, alors vos titres hériteront de la couleur blanche. Cela ne fonctionne pas uniquement pour la couleur, entendons-nous bien. Toutes les propriétés CSS seront héritées: vous pouvez par exemple demander une mise en gras dans la balise <body> et tous vos titres et paragraphes seront en gras Exemple d'héritage avec la balise <mark> On a tendance à croire qu'on ne peut modifier que la couleur de fond de la page. C'est faux: vous pouvez changer le fond de n'importe quel élément: vos titres, vos paragraphes, certains mots Dans ce cas, ils apparaîtront surlignés (comme si on avait mis un coup de marqueur dessus). Vous vous souvenez par exemple de la balise <mark> qui permet de mettre en valeur certains mots? Utilisons-la à nouveau ici: <h1>utilisation des couleurs</h1> <p>il est simple d utiliser <mark>les couleurs</mark>via CSS</p> Par défaut, la partie «les couleurs» s'affiche sur un fond jaune. Vous pouvez changer ce comportement en CSS: body { background-color: black; color: white; } 269

279 mark { /* La couleur de fond prend le pas sur celle de toute la page */ background-color: red; color: black; } Sur le texte de la balise <mark>, c'est la couleur de fond rouge qui s'applique. En effet, même si le fond de la page est noir, c'est la propriété CSS de l'élément le plus précis qui a la priorité. Le même principe vaut pour toutes les balises HTML et toutes les propriétés CSS! Si vous dites: mes paragraphes ont une taille de 1.2 em mes textes importants (<strong>) ont une taille de 1.4 em on pourrait penser qu'il y a un conflit. Le texte important fait partie d'un paragraphe, quelle taille lui donner? 1.2 em ou 1.4 em? Le CSS décide que c'est la déclaration la plus précise qui l'emporte: comme <strong> correspond à un élément plus précis que les paragraphes, le texte important sera écrit en 1.4 em. 3.4 Images de fond Dans les exemples qui suivent, nous allons modifier l'image de fond de la page. Cependant, tout comme pour la couleur de fond, n'oubliez pas que l'image de fond ne s'applique pas forcément à la page entière. On peut aussi mettre une image de fond derrière les titres, paragraphes, etc Appliquer une image de fond La propriété permettant d'indiquer une image de fond est background-image. Comme valeur, on doit renseigner url("nom_de_l_image.png"). Par exemple: body { background-image: url("neige.png"); } Bien entendu, votre fond n'est pas forcément en PNG, il peut aussi être en JPEG ou en GIF. L'adresse indiquant où se trouve l'image de fond peut être écrite en absolu ( ) ou en relatif (../images/fond.png). Attention lorsque vous écrivez une adresse en relatif dans le fichier CSS! L'adresse de l'image doit être indiquée par rapport au fichier.css et non pas par rapport au fichier.html Options disponibles pour l'image de fond On peut compléter la propriété background-image que nous venons de voir par plusieurs autres propriétés qui permettent de changer le comportement de l'image de fond. background-attachment : fixer le fond La propriété CSS background-attachment permet de «fixer» le fond. L'effet obtenu est intéressant car on voit alors le texte «glisser» par-dessus le fond. Deux valeurs sont disponibles: fixed : l'image de fond reste fixe, scroll : l'image de fond défile avec le texte (par défaut). 270

280 body { background-image: url("neige.png"); background-attachment: fixed; /* Le fond restera fixe */ } background-repeat : répétition du fond Par défaut, l'image de fond est répétée en mosaïque. Vous pouvez changer cela avec la propriété background-repeat: no-repeat : le fond ne sera pas répété. L'image sera donc unique sur la page. repeat-x : le fond sera répété uniquement sur la première ligne, horizontalement. repeat-y : le fond sera répété uniquement sur la première colonne, verticalement. repeat : le fond sera répété en mosaïque (par défaut). Exemple d'utilisation: body { background-image: url("soleil.png"); background-repeat: no-repeat; } background-position : position du fond On peut indiquer où doit se trouver l'image de fond avec background-position. Cette propriété n'est intéressante que si elle est combinée avec background-repeat: no-repeat; (un fond qui ne se répète pas). Vous devez donner à background-position deux valeurs en pixels pour indiquer la position du fond par rapport au coin supérieur gauche de la page (ou du paragraphe, si vous appliquez le fond à un paragraphe). Ainsi, si vous tapez: background-position: 30px 50px; votre fond sera placé à 30 pixels de la gauche et à 50 pixels du haut. Il est aussi possible d'utiliser ces valeurs: top : en haut bottom : en bas left : à gauche center : centré right : à droite Il est possible de combiner ces mots. Par exemple, pour aligner une image en haut à droite, vous taperez: background-position: top right; Ainsi, si nous voulons afficher une image de fond, en un unique exemplaire (no-repeat), toujours visible (fixed) et positionnée en haut à droite (top right), nous écrivons ceci: body { background-image: url("soleil.png"); background-attachment: fixed; /* Le fond restera fixe */ 271

281 } background-repeat: no-repeat; /* Le fond ne sera pas répété */ background-position: top right; /* Le fond sera placé en haut à droite */ Combiner les propriétés Si vous utilisez beaucoup de propriétés en rapport avec le fond (comme c'est le cas sur ce dernier exemple), vous pouvez utiliser une sorte de «super-propriété» appelée background dont la valeur peut combiner plusieurs des propriétés vues précédemment: background-image, backgroundrepeat, background-attachment et background-position. On peut donc tout simplement écrire: body { background: url("soleil.png") fixed no-repeat top right; } C'est la première «super-propriété» que nous voyons, il y en aura d'autres. Il faut savoir que: L'ordre des valeurs n'a pas d'importance. Vous pouvez combiner les valeurs dans n'importe quel ordre. Vous n'êtes pas obligé de mettre toutes les valeurs. Ainsi, si vous ne voulez pas écrire fixed, vous pouvez l'enlever sans problème Plusieurs images de fond Depuis CSS3, il est possible de donner plusieurs images de fond à un élément. Pour cela, il suffit de séparer les déclarations par une virgule, comme ceci: body { background: url("soleil.png") fixed no-repeat top right, url("neige.png") fixed; } La première image de cette liste sera placée par-dessus les autres (figure suivante). Attention donc, l'ordre de déclaration des images a son importance: si vous inversez le soleil et la neige dans le code CSS précédent, vous ne verrez plus le soleil! À noter que les images de fond multiples fonctionnent sur tous les navigateurs sauf sur les anciennes versions d'internet Explorer, qui ne reconnaît cette fonctionnalité qu'à partir de la version 9 (IE9). 272

282 3.5 La transparence Le CSS nous permet de jouer très facilement avec les niveaux de transparence des éléments! Pour cela, nous allons utiliser des fonctionnalités de CSS3: la propriété opacity et la notation RGBa La propriété opacity La propriété opacity, très simple, permet d'indiquer le niveau d'opacité (c'est l'inverse de la transparence). Avec une valeur de 1, l'élément sera totalement opaque: c'est le comportement par défaut. Avec une valeur de 0, l'élément sera totalement transparent. Il faut donc choisir une valeur comprise entre 0 et 1. Ainsi, avec une valeur de 0.6, votre élément sera opaque à 60% et on verra donc à travers! Voici comment on peut l'utiliser: p { } opacity: 0.6; Exemple: body { background: url('neige.png'); } p { } background-color: black; color: white; opacity: 0.3; Notez que la transparence fonctionne sur tous les navigateurs récents, y compris Internet Explorer à partir de IE9. Si vous appliquez la propriété opacity à un élément de la page, tout le contenu de cet élément sera rendu transparent (même les images, les autres blocs à l'intérieur, etc.). Si vous voulez juste rendre la couleur de fond transparente, utilisez plutôt la notation RGBa que nous allons découvrir La notation RGBa CSS3 nous propose une autre façon de jouer avec la transparence: la notation RGBa. Il s'agit en fait de la notation RGB que nous avons vue précédemment, mais avec un quatrième paramètre: le niveau de transparence (appelé «canal alpha»). De la même façon que précédemment, avec une valeur de 1, le fond est complètement opaque. Avec une valeur inférieure à 1, il devient transparent. 273

283 p { } background-color: rgba(255, 0, 0, 0.5); /* Fond rouge à moitié transparent */ C'est aussi simple que cela. Vous pouvez obtenir exactement le même effet qu'avec opacity juste en jouant avec la notation RGBa. Cette notation est connue de tous les navigateurs récents, y compris Internet Explorer (à partir d IE9). Pour les navigateurs plus anciens, il est recommandé d'indiquer la notation RGB classique en plus de RGBa. Pour ces navigateurs, le fond ne sera alors pas transparent mais, au moins, il y aura bien une couleur d'arrière-plan. p { } background-color: rgb(255,0,0); /* Pour les navigateurs anciens */ background-color: rgba(255,0,0,0.5); /* Pour les navigateurs plus récents */ 3.6 En résumé On change la couleur du texte avec la propriété color, la couleur de fond avec background-color. On peut indiquer une couleur en écrivant son nom en anglais (black, par exemple), sous forme hexadécimale (#FFC8D3) ou en notation RGB (rgb(250,25,118)). On peut ajouter une image de fond avec background-image. On peut choisir de fixer l'image de fond, de l'afficher en mosaïque ou non, et même de la positionner où on veut sur la page. On peut rendre une portion de la page transparente avec la propriété opacity ou avec la notation RGBa (identique à la notation RGB, avec une quatrième valeur indiquant le niveau de transparence). 4 Les bordures et les ombres Source: Bordures standard Le CSS vous offre un large choix de bordures pour agrémenter votre page. De nombreuses propriétés CSS vous permettent de modifier l'apparence de vos bordures: border-width, bordercolor, border-style Pour aller à l'essentiel, nous allons utiliser directement la super-propriété border qui regroupe l'ensemble de ces propriétés. Vous vous souvenez de la super-propriété background? Cela fonctionne sur le même principe: on va pouvoir combiner plusieurs valeurs. Pour border on peut utiliser jusqu'à trois valeurs pour modifier l'apparence de la bordure: La largeur: indiquez la largeur de votre bordure. Indiquez une valeur en pixels (comme 2px). 274

284 La couleur: c'est la couleur de votre bordure. Utilisez, comme on l'a appris, soit un nom de couleur (black, red, ), soit une valeur hexadécimale (#FF0000), soit une valeur RGB (rgb(198, 212, 37)). Le type de bordure: là, vous avez le choix. Votre bordure peut être un simple trait, ou des pointillés, ou encore des tirets, etc. Voici les différentes valeurs disponibles: o o o o o o o o o none : pas de bordure (par défaut) solid : un trait simple dotted : pointillés dashed : tirets double : bordure double groove : en relief ridge : autre effet relief inset : effet 3D global enfoncé outset : effet 3D global surélevé Ainsi, pour avoir une bordure bleue, en tirets, épaisse de 3 pixels autour de nos titres: h1 { border: 3px blue dashed; } Il est possible de définir des bordures différentes en fonction du côté (haut, bas, gauche ou droite), vous pouvez le faire sans problème. Dans ce cas, vous devrez utiliser ces quatre propriétés: border-top : bordure du haut border-bottom : bordure du bas border-left : bordure de gauche border-right : bordure de droite Il existe aussi des équivalents pour paramétrer chaque détail de la bordure si vous le désirez: border-top-width pour modifier l'épaisseur de la bordure du haut, border-top-color pour la couleur du haut, etc. Ce sont aussi des super-propriétés, elles fonctionnent comme border mais ne s'appliquent donc qu'à un seul côté. 275

285 Pour ajouter une bordure uniquement à gauche et à droite des paragraphes, on écrira donc: p { } border-left: 2px solid black; border-right: 2px solid black; On peut modifier les bordures de n'importe quel type d'élément sur la page. Nous l'avons fait ici sur les paragraphes mais on peut aussi modifier la bordure des images, des textes importants comme <strong>, etc. 4.2 Bordures arrondies Depuis que CSS3 est arrivé, il est enfin possible de créer des bordures arrondies facilement! La propriété border-radius va nous permettre d'arrondir facilement les angles de n'importe quel élément. Il suffit d'indiquer la taille («l'importance») de l'arrondi en pixels: p { } border-radius: 10px; L'arrondi se voit notamment si l'élément a des bordures, comme sur la figure suivante. ou s'il a une couleur de fond, comme sur la figure suivante. On peut aussi préciser la forme de l'arrondi pour chaque coin. Dans ce cas, indiquez quatre valeurs: p { } border-radius: 10px 5px 10px 5px; Les valeurs correspondent aux angles dans cet ordre: 1) en haut à gauche ; 2) en haut à droite ; 3) en bas à droite ; 4) en bas à gauche. 276

286 Enfin, il est possible d'affiner l'arrondi de nos angles en créant des courbes elliptiques (figure suivante). Dans ce cas, il faut indiquer deux valeurs séparées par une barre oblique (slash, caractère /). Le mieux est certainement de tester pour voir l'effet: p { } border-radius: 20px / 10px; Les bordures arrondies fonctionnent avec tous les navigateurs récents, y compris Internet Explorer à partir de la version 9 (IE9). Pour les anciennes versions de Mozilla Firefox, Chrome et Safari, il était nécessaire d'utiliser des préfixes, c'est-à-dire qu'il fallait écrire dans le code CSS différentes versions de la propriété (-mozborder-radius pour Firefox, -webkit-border-radius pour Safari, etc.). Ce n'est heureusement plus nécessaire aujourd'hui, sauf si vous voulez gérer les anciennes versions de ces navigateurs. 4.3 Les ombres Les ombres font partie des nouveautés récentes proposées par CSS3. Aujourd'hui, il suffit d'une seule ligne de CSS pour ajouter des ombres dans une page! Nous allons ici découvrir deux types d'ombres: les ombres des boîtes, les ombres du texte. box-shadow : les ombres des boîtes La propriété box-shadow s'applique à tout le bloc et prend quatre valeurs dans l'ordre suivant: 1) le décalage horizontal de l'ombre, 2) le décalage vertical de l'ombre, 3) l'adoucissement du dégradé, 4) la couleur de l'ombre. Par exemple, pour une ombre noire de 6 pixels, sans adoucissement, on écrira: p { } box-shadow: 6px 6px 0px black; Ajoutons un adoucissement grâce au troisième paramètre. L'adoucissement peut être faible (inférieur au décalage), normal (égal au décalage) ou élevé (supérieur au décalage). 277

287 Essayons un décalage normal: p { } box-shadow: 6px 6px 6px black; On peut aussi rajouter une cinquième valeur facultative: inset. Dans ce cas, l'ombre sera placée à l'intérieur du bloc, pour donner un effet enfoncé: p { } box-shadow: 6px 6px 6px black inset; La propriété box-shadow fonctionne sur tous les navigateurs récents, IE9 inclus. Pour certains navigateurs, en particulier les navigateurs mobiles, il faut encore rajouter un préfixe. Ainsi, il faudra écrire une version -webkit-box-shadow pour que cela fonctionne sur les navigateurs Android et ios. text-shadow : l'ombre du texte Avec text-shadow, vous pouvez ajouter une ombre directement sur les lettres de votre texte! Les valeurs fonctionnent exactement de la même façon que box-shadow: décalage, adoucissement et couleur. p { } text-shadow: 2px 2px 4px black; Cette propriété est reconnue par tous les navigateurs récents, sauf Internet Explorer, qui ne la reconnaît qu'à partir de la version IE En résumé On peut appliquer une bordure à un élément avec la propriété border. Il faut indiquer la largeur de la bordure, sa couleur et son type (trait continu, pointillés ). On peut arrondir les bordures avec border-radius. On peut ajouter une ombre aux blocs de texte avec box-shadow. On doit indiquer le décalage vertical et horizontal de l'ombre, son niveau d'adoucissement et sa couleur. Le texte peut lui aussi avoir une ombre avec text-shadow. 5 Apparences dynamiques Source: 278

288 C'est une de ses forces: le CSS nous permet aussi de modifier l'apparence des éléments de façon dynamique, c'est-à-dire que des éléments peuvent changer de forme une fois que la page a été chargée. Nous allons faire appel à une fonctionnalité puissante du CSS: les pseudo-formats. Nous verrons dans ce chapitre comment changer l'apparence: au survol, lors du clic, lors du focus (élément sélectionné), lorsqu'un lien a été consulté. 5.1 Gestion des survols Nous allons découvrir dans ce point plusieurs pseudo-formats CSS. Le premier s'appelle :hover. Comme tous les autres pseudo-formats que nous allons voir, c'est une information que l'on rajoute après le nom de la balise (ou de la classe) dans le CSS, comme ceci: a:hover { } :hover signifie «survoler». a:hover peut donc se traduire par : «Quand la souris est sur le lien» (quand on pointe dessus). À partir de là, c'est à vous de définir l'apparence que doivent avoir les liens lorsque l'on pointe dessus. Voici un exemple de présentation des liens, mais n'hésitez pas à inventer le vôtre: a /* Liens par défaut (non survolés) */ { text-decoration: none; color: red; font-style: italic; } a:hover /* Apparence au survol des liens */ { text-decoration: underline; color: green; } On a défini ici deux versions des styles pour les liens: pour les liens par défaut (non survolés), pour les liens au survol. Même si on l'utilise souvent sur les liens, vous pouvez modifier l'apparence de n'importe quel élément. Par exemple, vous pouvez modifier l'apparence des paragraphes lorsqu'on pointe dessus: p:hover /* Quand on pointe sur un paragraphe */ { } 279

289 5.2 Gestion des clics et des sélections Vous pouvez interagir encore plus finement en CSS. Nous allons voir ici que nous pouvons changer l'apparence des éléments lorsque l'on clique dessus et lorsqu'ils sont sélectionnés! :active : au moment du clic Le pseudo-format :active permet d'appliquer un style particulier au moment du clic. En pratique, il n'est utilisé que sur les liens. Le lien gardera cette apparence très peu de temps: en fait, le changement intervient lorsque le bouton de la souris est enfoncé. En clair, ce n'est pas forcément toujours bien visible. On peut par exemple changer la couleur de fond du lien lorsque l'on clique dessus: a:active /* Quand le visiteur clique sur le lien */ { background-color: #FFCC66; } :focus : lorsque l'élément est sélectionné Là, c'est un peu différent. Le pseudo-format :focus applique un style lorsque l'élément est sélectionné. C'est-à-dire? Une fois que vous avez cliqué, le lien reste «sélectionné» (il y a une petite bordure en pointillés autour). C'est cela, la sélection. Ce pseudo-format pourra être appliqué à d'autres balises HTML que nous n'avons pas encore vues, comme les éléments de formulaires. Essayons pour l'instant sur les liens: a:focus /* Quand le visiteur sélectionne le lien */ { background-color: #FFCC66; } NB: sous Google Chrome et Safari, l'effet ne se voit que si l'on appuie sur la touche Tab. 5.3 En résumé En CSS, on peut modifier l'apparence de certaines sections dynamiquement, après le chargement de la page, lorsque certains évènements se produisent. On utilise pour cela les pseudo-formats. Le pseudo-format :hover permet de changer l'apparence au survol (par exemple : a:hover pour modifier l'apparence des liens lorsque la souris pointe dessus). Le pseudo-format :active modifie l'apparence des liens au moment du clic, :visited lorsqu'un lien a déjà été visité. Le pseudo-format :focus permet de modifier l'apparence d'un élément sélectionné. 280

290 6 Le langage CSS par la pratique Avant tout, il importe de préciser que nous supposons que le module «Firebug» a été installé dans Firefox (cf. point 1.1 page 21). Les modules «MeasureIt» et «ColorZilla» seront également utiles. Nous travaillerons au niveau du site «site03» précédemment créé. L objectif est de personnaliser le template «protostar». Pour les explications qui suivent, nous supposons que vous êtes connecté à la partie administration (backend) du site. 6.1 Effectuer une copie du template. Avant de personnaliser un template, il est prudent d effectuer une copie de celui-ci afin de pouvoir revenir à l état initial si un problème survient. Procédure pour copier le template: 1 ) Cliquez sur «Extensions» puis sur «Gestion des templates». 281

291 2 ) Cochez le template que vous souhaitez dupliquer, puis cliquez sur «Dupliquer». 3 ) Vous pouvez voir la copie réalisée. Il est possible de modifier son nom en sélectionnant le template (modèle) et en utilisant le bouton «Modifier». Cette copie du template est gardée en réserve, elle ne doit pas être définie comme template par défaut. 6.2 Modifier un template en n intervenant pas directement dans le code Il faut rappeler qu il est possible de modifier certains paramètres d un template sans intervenir directement dans le code. Pour ce faire: 1 ) Sélectionnez «Extensions / Gestion des templates». 282

292 2 ) Cochez le template puis cliquez sur «Modifier». Autre possibilité: cliquez directement sur le modèle voulu dans la colonnes «Styles». 3 ) Cliquez sur «Paramètres avancés». 4 ) Différents contrôles permettent de personnaliser le template. Suivant le modèle que vous souhaitez personnaliser, les options proposées seront différentes. 283

293 1 Dominique Lieffrig 6.3 Modifier un template en intervenant dans le code CSS Pour réaliser les différentes procédures qui suivent, vous pouvez activer deux onglets dans Firefox, un onglet avec la partie administration (backend) du site et un autre onglet avec la partie frontale (frontend) Modifier la taille, la couleur, la police des caractères Objectif n 1: Modifier la taille des titres de niveau «h1» Procédure: 1 ) Visualisez le site en frontend, cliquez sur le bouton «Firebug». 2 ) Cliquez sur le bouton suivant puis sur l élément que vous souhaitez analyser dans la page. NB: vous pouvez également effectuer un clic droit sur l élément vous intéressant dans la page et sélectionner l option «Inspecter l élément avec Firebug» dans le menu contextuel. 284

294 Nous obtenons des informations très intéressantes dans la partie inférieure de l écran. À gauche, nous avons les balises HTML et dans la partie droite, figurent les styles CSS. À droite, nous pouvons également voir le nom du fichier css, le numéro de la ligne où le style figure et en positionnant la souris au-dessus du nom du fichier, une infobulle apparaît et indique l emplacement du fichier. Il s agit d informations très importantes. Le symbole # indique que le style est défini directement dans le fichier index.php du template 3 ) Il est possible de faire des simulations de modifications en agissant dans ce volet présent endessous à droite. Cliquez dans la taille à côté de font-size dans le style relatif à la balise h1. Ensuite, vous pouvez par exemple utiliser les flèches présentes sur votre clavier pour faire varier la taille et observer ce que cela donne dans la page. 4 ) Les modifications faites dans ce volet ne sont pas permanentes. Si vous souhaitez appliquer réellement la modification dans le template, il faut suivre les étapes qui suivent. 5 ) À partir de l administration du site, cliquez sur «Extensions / Gestion des templates». 6 ) Cliquez sur le nom du template que vous souhaitez modifier et ce dans la colonne «Template». 285

295 7 ) Dans la fenêtre qui suit, ouvrez le dossier «css» puis sélectionnez le fichier «templates.css». Ce sont les informations obtenues précédemment qui nous permettent de savoir quel dossier et quel fichier utiliser. 8 ) Grâce aux informations obtenues précédemment, nous savons que dans le cas présent, c est à la ligne 7033 que se trouve le style que nous souhaitons modifier. Atteignez la ligne voulue, effectuez la modification voulue puis enregistrez. 9 ) Vous pouvez passer dans la partie frontale du site, actualisez la page (F5) (dans certains cas, il peut être nécessaire de vider le cache de votre navigateur) et observez le résultat obtenu. NB: dans le cas présent, nous sommes restés en pixels (px) comme définis initialement dans le template, cependant l idéal est de travailler avec les unités «em». Dans le cas présent, nous pourrions utiliser: 1.4em 286

296 Objectif n 2: Modifier la couleur des titres de niveau «h1». Nous voulons appliquer une couleur rouge. Procédure: En suivant une procédure analogue à celle expliquée dans le cas précédent, modifiez le code dans le fichier «template.css» de la manière suivante: Exemple d utilisation d un code couleur en hexadécimal: Ce code couleur donnerait du bleu Objectif n 3: Modifier la police de caractères des titres («h1» à «h6»). Nous voulons appliquer la police Verdana. Procédure: Avant tout, il faut désactiver l insertion automatique des polices Google pour les titres. 1 ) Cliquez sur «Extensions / Gestion des templates». 2 ) Cliquez sur le modèle voulu dans la colonne «Styles». 287

297 3 ) Choisissez «Non» au niveau de la propriété «Polices Google des titres» puis enregistrez. 4 ) Inspectez un titre de niveau «h1» avec Firebug. 5 ) Nous souhaitons modifier la police de caractères pour tous les niveaux de titre, nous allons donc agir au niveau de la ligne 7025 du fichier «template.css». 6 ) Enregistrez puis vérifiez le résultat obtenu en frontend. NB: n oubliez pas d actualiser la page (F5) et de vider le cache du navigateur si nécessaire. Objectif n 4: Modifier l épaisseur des caractères des titres de niveau «h1». Procédure: 1 ) Visualisez le site en frontend, inspectez un titre de niveau «h1» avec Firebug. Cliquez dans la dernière valeur utilisée dans le style lié à la balise «h1». 288

298 2 ) Appuyez sur la touche de tabulation ce qui permet de créer une nouvelle ligne. 3 ) Encodez: font-weight: 4 ) En utilisant les touches suivantes de votre clavier, essayez différentes valeurs pour la propriété font-weight. 5 ) Cliquez en dehors de la zone et la propriété est triée dans la liste des autres par ordre alphabétique. 6 ) Comme vu précédemment, pour que cette modification soit appliquée au template, il faut ajouter la ligne voulue dans la feuille de styles concernée puis enregistrer. En effet, jusqu à présent, nous avons simplement effectué quelques essais via Firebug mais le template n est en rien modifié. 289

299 Objectif n 5: Expérimenter une mise en italique et un alignement centré des titres de niveau «h1» Procédure: 1 ) En suivant une procédure analogue à ce qui a été vu précédemment, modifiez le fichier «template.css» de la manière suivante: 2 ) Enregistrez puis observez le résultat obtenu en frontal. 3 ) Rétablissez la feuille de styles «template.css» dans son état précédent puis enregistrez. Aperçu: NB: si vous souhaitez appliquer un soulignement, vous pouvez utiliser la propriété text-decoration 290

300 6.3.2 Modifier la couleur de fond Pour rappel, pour indiquer une couleur de fond, on utilise la propriété CSS background-color. Elle s'utilise de la même manière que la propriété color, c'est-à-dire que vous pouvez encoder le nom d'une couleur, l'écrire en notation hexadécimale ou encore utiliser la méthode RGB. Pour indiquer la couleur de fond de la page web, il faut travailler sur la balise <body>. Pour rappel, cette balise <body> correspond à l'ensemble de la page web, c'est donc en modifiant sa couleur de fond que l'on changera la couleur d'arrière-plan de la page. Cependant, attention, il peut y avoir différentes zones à l intérieur de la page, qui peuvent avoir leur propre couleur de fond. Objectif: Modifier la couleur de fond (pourtour) des pages de notre site. La couleur de la partie intérieure du site restera quant à elle inchangée. Procédure: 1 ) Consultez les caractéristiques de «body» dans le fichier «template.css» du template «protostar». 2 ) Surprise! La propriété background-color n apparaît pas. D où vient donc cette couleur actuellement présente? En fait, le fichier template.css n est pas le seul qui fournit les styles avec le modèle «protostar». Il y a d autres fichiers qui interviennent. Pour simplifier le problème et rester dans le fichier «template.css», nous allons forcer la couleur de fond en utilisant la déclaration!important Ceci permet d imposer le formatage défini indépendamment de ce qui est défini ailleurs. Il importe de noter qu il ne faut pas abuser de cette déclaration, il est préférable d agir 291

301 directement dans le fichier source si cela est possible. Modifiez le fichier «template.css» de la manière suivante: 3 ) Enregistrez puis observez le résultat obtenu en frontal Définir une image de fond Objectif: Définir une image de fond sur les pages de notre site. La couleur de la partie intérieure du site restera quant à elle inchangée. Procédure: 1 ) Chargez l image voulue sur le site. Dans le cas présent, l image sera stockée dans le sousdossier «images» au niveau du dossier qui contient le template. En local, la copie du fichier peut se faire via l Explorateur de fichiers, sinon sur un site distant, vous pouvez utiliser FileZilla par exemple. 2 ) Modifiez le fichier «template.css» de la manière suivante. 3 ) Enregistrez puis observez le résultat obtenu en frontal. 292

302 6.3.4 Créer des bordures Objectif: Modifier la bordure autour du menu principal de la manière suivante. La bordure aura une épaisseur de 2 px, la couleur #47773B et le rayon de l arrondi sera de 10 px. Procédure: 1 ) Modifiez le fichier «template.css» de la manière suivante. 2 ) Enregistrez puis observez le résultat obtenu en frontal Gérer les survols Objectif: Modifier l effet au survol des boutons suivants qui apparaissent notamment dans la page «Plantes»: Concrètement, nous souhaitons que le contenu du bouton prenne la couleur #47773B lors du survol. 293

303 Procédure: 1 ) Modifiez le fichier «template.css» de la manière suivante. 2 ) Enregistrez puis observez le résultat obtenu en frontal. La propriété transition Le principe de base d'une transition CSS3 est de permettre une transition douce entre l'ancienne valeur et la nouvelle valeur d'une propriété CSS lorsqu'un événement est déclenché: soit via une pseudo-classe telles que :hover, :focus ou :active soit via JavaScript Précédemment, ce genre de comportement n'était possible qu'avec l'usage de JavaScript. Cette nouvelle propriété CSS3 permet dorénavant de s'en affranchir au profit exclusif des feuilles de style. Pour définir une nouvelle transition animée, il est nécessaire de préciser au minimum: la ou les propriété(s) à animer, la durée de l'animation. Dans le cas présent, nous avons: transition: background-position.1s linear; La transition s applique sur la propriété background-position qui va prendre les valeurs 0-15px (cf. le code CSS ci-dessus). Ces valeurs 0-15px permettent d obtenir une translation verticale vers le haut de 15px du fond des boutons (couleurs). La durée de la transition est d un dixième de seconde. linear indique que la vitesse de la transition est constante sur toute la durée de l animation. Autres valeurs concernant la vitesse de transition: ease : rapide sur le début et ralenti sur la fin. linear : la vitesse est constante sur toute la durée de l'animation. ease-in : lent sur le début et accélère de plus en plus vers la fin. ease-out : rapide sur le début et décélère sur la fin. ease-in-out : le départ et la fin sont lents. 294

304 6.3.6 Actions diverses Objectif n 1: La couleur des éléments figurant dans le pied de page doit être le blanc, de même que les liens lors du survol et les liens visités. Procédure: 1 ) Modifiez le fichier «template.css» de la manière suivante. 2 ) Enregistrez puis observez le résultat obtenu en frontal. Objectif n 2: Modifier la taille des caractères du titre du site. L objectif est de définir une taille de 2.1em 295

305 1 ) Modifiez le fichier «template.css» de la manière suivante. 2 ) Enregistrez puis observez le résultat obtenu en frontal. Objectif n 3: Modifier la couleur de fond du menu. Couleur à utiliser: #E9ECB8 Les éléments du menu devront avoir la couleur suivante: #47773B Procédure: 1 ) Modifiez le fichier «template.css» de la manière suivante. 2 ) Enregistrez puis observez le résultat obtenu en frontal. 296

306 CAS N 4: RENFORCEMENT SITE «LES ARBRES» 297

307 Au terme de l étude de ce quatrième cas, vous serez capable de(d ): installer l application Joomla, chercher, télécharger et installer un template (modèle), identifier les positions disponibles dans un template (modèle), installer des extensions, activer et désactiver une extension, créer des articles et appliquer une mise en forme de base, créer et utiliser des modules de différents types, insérer un module de recherche interne, implémenter une galerie photo, gérer un agenda, créer et publier un menu, publier des vidéos, créer un formulaire d inscription à une newsletter, utiliser du code HTML et CSS notamment pour personnaliser le template 1 Aperçu du site Thème du site: les arbres 298

308 2 Préparer les images Cette préparation va se faire en plusieurs phases. Dossier «logos» Redimensionnez et enregistrez l image «logo.jpg» pour qu elle ait les dimensions suivantes: 150 X 70 pixels. Cette valeur sera définie au niveau du template. Dossier «diaporama» Recadrez les photos ci-dessus pour respecter un rapport 1000 X 180 Redimensionnez et enregistrez les photos ci-dessus pour que celles-ci aient les dimensions suivantes: 1000 X 180 pixels. Dossier «essences» - partie 1 Sous-dossier «chene» Sous-dossier «robinier» Sous-dossier «sorbier» 299

309 Recadrez les photos entourées ci-avant pour respecter un rapport 165 X 110 Redimensionnez et enregistrez les photos entourées ci-avant pour que celles-ci aient les dimensions suivantes: 165 X 110 pixels. Dossier «essences» - partie 2 Sous-dossier «chene» Sous-dossier «robinier» Sous-dossier «sorbier» Recadrez les photos entourées ci-dessus pour respecter un rapport 525 X 350 Redimensionnez et enregistrez les photos entourées ci-dessus pour que celles-ci aient les dimensions suivantes: 525 X 350 pixels. Dossier «feuilles» Redimensionnez et enregistrez les photos ci-dessus pour que celles-ci aient une largeur de 690 pixels. La hauteur sera automatiquement adaptée en conséquence et n est pas imposée. Dossier «age» Exportez la photo ci-dessus pour que celle-ci ait les dimensions suivantes: 408 X 181 pixels. 300

310 Redimensionnez et enregistrez la photo ci-dessus pour que celle-ci ait les dimensions suivantes: 272 X 181 pixels 3 Mettre en place la base du site Procédure à suivre: 1 ) Installez une nouvelle instance de Joomla pour notre nouveau site. Celui-ci sera nommé «site04». Le nom donné à la base de données peut être «bd_site04». Si nécessaire, la procédure figure à la page ) Recherchez un template gratuit sur le web et téléchargez celui-ci. Dans le cadre du cours, nous téléchargerons le template «Projecto» disponible sur le site « Vous trouverez un lien «Download» plus bas dans la page web. 3 ) Décompressez le fichier correspondant à ce template. Pour ce faire, effectuez un clic droit puis sélectionnez l option «Extraire tout». 301

311 4 ) Lors de l extraction, vérifiez l emplacement d extraction afin de retrouver facilement le template. Dans le cas présent, les fichiers seront extraits dans un sous-dossier nommé «les_arbres» mais vous pouvez évidemment lui donner le nom que vous souhaitez. 5 ) Voici les éléments résultant de l extraction. Le fichier «tck3z» permettrait de modifier le template via l outil «template creator». Il n est pas utilisé pour être installé au niveau de Joomla. Pour installer le template au sein de notre site, c est le fichier compressé «projecto.zip» qui sert à l installation. 6 ) Installez le template (modèle) contenu dans le fichier «projecto.zip» (si nécessaire, cf. point «2.2 Installer un nouveau template (modèle)» figurant à la page 49). Activez ce template comme modèle par défaut pour la partie frontend. 7 ) Installez les extensions suivantes (si nécessaire, cf. point «Installer des extensions» figurant à la page 54). Admin Tools Akeeba Backup BreezingForms Lite (composant et plugin) (le plugin est utile pour l insertion du formulaire dans un article) GoogliC Analytics 302

312 icagenda JCE Editor Plugin JCE MediaBox (ne pas oublier d activer cette extension) Phoca Gallery (composant et plugins Phoca Gallery Plugin, Phoca Gallery Button Plugin «plg_editors-xtd_phocagallery_vx.x.x», ne pas oublier d activer les plugins) RSSearch (composant, plugin et pack de langue FR) Slideshow CK Xmap 8 ) Effectuez les actions reprises au point «4 À faire directement après l installation d un nouveau site Joomla» figurant à la page 34. Il faut noter que pour les articles, on définira par défaut de ne pas afficher le titre des articles. Au niveau des menus, on demandera de ne pas afficher l en-tête de page: 303

313 4 Charger les images dans le site Transférez les photos voulues via l outil «Gestion des médias» ou tout autre outil susceptible de convenir. Le fichier «favicon.ico» se trouvant dans le dossier «logos» doit être copié dans le dossier qui correspond au template «projecto». 5 Préparer la galerie photos avec Phoca Gallery 5.1 Créer une catégorie «Galerie - Arbres» Procédure pour créer une catégorie dans Phoca Gallery: 1 ) Cliquez sur «Composants» puis sur «Phoca Gallery». 2 ) Cliquez sur «Catégories» puis sur «Nouveau». 3 ) Nommez la catégorie, définissez un alias. 4 ) Enregistrez et fermez. 304

314 5.2 Ajouter les images Procédure pour ajouter des images dans une catégorie Phoca Gallery: 1 ) Cliquez sur «Composants» puis sur «Phoca Gallery». 2 ) Cliquez sur «Images» puis sur «Ajout multiple». 3 ) Activez l onglet «Créer répertoire», nommez le nouveau répertoire puis cliquez sur «Créer répertoire». 4 ) Cliquez sur le nouveau répertoire afin d ouvrir celui-ci. 305

315 5 ) Activez l onglet «Upload multiple» puis cliquez sur «Add files». 6 ) Sélectionnez les fichiers puis cliquez sur «Ouvrir». 306

316 7 ) Cliquez sur «Start Upload». 8 ) Cochez les photos téléchargées, sélectionnez la catégorie et cliquez sur «Enregistrer & fermer». 307

317 9 ) Vous obtenez ce qui suit. 6 Créer les catégories et les articles 1 ) Créez les catégories d articles suivantes (si nécessaire, cf. point «6.3 Créer des catégories d articles» figurant à la page 99). 2 ) Créez les articles suivants (si nécessaire, cf. point «5.1 Gérer les articles» figurant à la page 63). Accueil 308

318 Chêne (article classé dans la catégorie «Essences») Robinier (article classé dans la catégorie «Essences») Sorbier (article classé dans la catégorie «Essences») 309

319 Les feuilles (article classé dans la catégorie «Botanique») Les fleurs (article classé dans la catégorie «Botanique») 310

320 L écorce (article classé dans la catégorie «Botanique») Âge d un arbre NB: deux images, non visibles dans l aperçu qui suit, seront insérées ultérieurement en utilisant le code HTML. 311

321 Galerie de photos 1 ) Encodez le titre «Galerie de photos» et attribuez-lui le style «Titre 1». 2 ) Placez le curseur à l endroit voulu puis cliquez sur le bouton «Phoca Gallery Image». 3 ) Cliquez sur «Images». 4 ) Sélectionnez la catégorie souhaitée. 312

322 5 ) Descendez dans la fenêtre puis cliquez sur «Insérez code». 6 ) Vous obtenez ceci. 7 ) Enregistrez et fermez. Planter un arbre (article classé dans la catégorie «Vidéos») NB: nous supposons que les vidéos voulues ont été copiées dans un sous-dossier «videos» qui dépend de «site04». 313

323 Tailler un pommier (article classé dans la catégorie «Vidéos») NB: nous supposons que les vidéos voulues ont été copiées dans un sous-dossier «videos» qui dépend de «site04». Contacts Créez les articles «Mentions légales» et «Politique de confidentialité»: cf. textes modèles figurant sur le site Inscription à la newsletter Appel à un formulaire qui est créé un peu plus loin 314

324 7 Compléter, gérer le menu Complétez le menu horizontal de la manière suivante: 315

325 8 Configurer l agenda et insérer des événements Nous supposons ici que l extension «icagenda» a été installée. Si des rappels sont nécessaires concernant l extension «icagenda», vous pouvez vous référer au point figurant à la page 106. Catégories d événements: Code couleur: #bdbdbd Code couleur: #1e8bc3 Quelques événements: 9 Configurer les éléments voulus pour les recherches Précédemment dans ce cours, nous avons utilisé le module de recherche natif de Joomla. Dans le cas présent, nous utiliserons RSSearch qui est gratuit. Nous supposons que le composant, le plugin et le pack de langue ont été installés comme proposé dans le point 3 page 301. Procédure pour configurer le plugin «RSSearch! pour Joomla! Articles»: 1 ) Cliquez sur «Extensions» puis sur «Gestion des plugins». 2 ) Lancez une recherche sur «RSSearch». Veillez à ce que le plugin «RSSearch! pour Joomla! Articles» soit activé puis cliquez sur celui-ci. 316

326 3 ) Définissez la valeur «Contenu» au niveau de la propriété «Chercher dans». 4 ) Enregistrez et fermez. 10 Créer le formulaire d inscription à la newsletter Si des rappels sont nécessaires, vous pouvez vous reporter au point 3 se trouvant à la page 174. Créez le formulaire suivant avec Breezingforms. 317

327 N oubliez pas d activer le plugin «Breezingforms»: Aperçu: 11 Créer, gérer les modules Voici la liste des modules à créer, activer 318

328 Module «Diaporama» 319

329 320

330 Module «Recherche» (en position 7) Module «Calendrier» 321

331 Il faut créer un menu fantôme. Module «Newsletter» (module de type «contenu personnalisé») Lien vers l article contenant le formulaire d inscription à la newsletter Module «Pied de page» 322

332 12 Compléter certains articles Article «Chêne» Actuellement, l article «Chêne» se présente de la manière suivante: L objectif est d insérer quelques photos pour arriver au résultat suivant. De plus, les puces seront déplacées. Dans la feuille de styles «template.css» relative au modèle utilisé, ajoutez les styles suivants: 323

333 Complétez l article «Chêne» de la manière suivante: Notes: L attribut «class» permet de faire appel à un style défini dans une feuille de styles. L attribut «alt» permet de définir un texte qui sera utilisé si l affichage de l image n est pas possible (fichier image absent, surcharge du serveur ). Ce texte est également utilisé par les moteurs de recherche pour référencer les images. Article «Robinier» Nous supposons que les styles voulus ont été ajoutés dans la feuille de styles «template.css» comme expliqué précédemment. Complétez l article «Robinier» de la manière suivante: 324

334 Vous obtenez: Article «Sorbier» Nous supposons que les styles voulus ont été ajoutés dans la feuille de styles «template.css» comme expliqué précédemment. Complétez l article «Sorbier» de la manière suivante: 325

335 Vous obtenez: Article «Age d un arbre» À présent, l objectif est d insérer deux images à l endroit suivant dans l article «Age d un arbre». 326

336 Complétez l article «Age d un arbre» de la manière suivante: Note: Comme vous pouvez le constater, dans le cas présent, un style a été défini directement dans la balise <img>. Ceci a été fait à titre d exemple et parce que ce style n est utilisé qu une seule fois. Sinon, comme cela a déjà été précisé précédemment, il faut donner priorité à la définition des styles dans une feuille de styles externe. Vous obtenez: 327

337 13 Modifier quelques styles CSS 13.1 Effectuer une copie du template «projecto» Avant toute modification, il est prudent d effectuer une copie du template utilisé. Il s agit du template «projecto» dans le cas présent. 1 ) Cliquez sur «Extensions» puis sur «Gestion des templates». 2 ) Cliquez sur «Projecto» dans la colonne «Template». 3 ) Dans la fenêtre suivante, cliquez sur «Copier le template». 4 ) Nommez la copie puis cliquez sur «Copier le template». 328

338 13.2 Aligner le logo à gauche avec les autres éléments de la page L objectif est d aligner le logo à gauche comme suit: Modifiez la feuille de styles «template.css» du template actif de la manière suivante: 13.3 Réduire la hauteur du menu L objectif est de réduire la hauteur du menu de la manière suivante: Modifiez la feuille de styles «template.css» du template actif comme suit: 329

339 Note: le «padding» est de 27px en haut et en bas et «line-height» vaut 16px. Si on fait la somme 27px + 16px + 27px, on obtient 70px, ce qui correspond à la hauteur du logo Modifier l alignement des commandes présentes dans les menus «ESSENCES», «BOTANIQUE» et «VIDÉOS». L objectif est de modifier l alignement des commandes présentes dans les menus «ESSENCES», «BOTANIQUE» et «VIDÉOS» de la manière suivante: Ajoutez un style dans la feuille de styles «template.css» du template actif: 13.5 Modifier la hauteur du bouton «Recherche» Nous souhaitons modifier la hauteur du bouton «Recherche» de la manière suivante. Modifiez la feuille de styles «template.css» du template actif comme suit: Rappel: padding: 5px 10px; padding: 5px 10px 5px 10px; Remplissage en haut, à droite, en bas, à gauche. 330