Partons d`un modèle (templateà existant)

Transcription

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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
Dominique Lieffrig
Création de sites internet via un CMS – Joomla
TABLE DES MATIÈRES
ÉTUDE PRÉALABLE .......................................................................................................... 1
1
2
3
4
5
6
7
FAITES LE BILAN DE L’EXISTANT .............................................................................................. 2
ORGANISEZ VOTRE PLAN D’ACTION ........................................................................................ 3
INSTALLEZ LA STRUCTURE DU SITE INTERNET ............................................................................ 5
CRÉEZ DU CONTENU ET GÉREZ LA VIE DU SITE ........................................................................... 7
ORGANISEZ VOTRE PRÉSENCE EN LIGNE – FAITES LA PROMOTION DE VOTRE SITE ............................ 7
PENSEZ AU RÉFÉRENCEMENT ................................................................................................ 8
AVEC UN SITE, ON N’A JAMAIS FINI… ...................................................................................... 9
LES CMS (CONTENT MANAGEMENT SYSTEM) ................................................................ 10
1
2
DÉFINITION...................................................................................................................... 11
QUELQUES CMS .............................................................................................................. 11
JOOMLA EN QUELQUES MOTS....................................................................................... 13
1
2
3
4
5
QU'EST-CE QUE JOOMLA? .................................................................................................. 14
D’OÙ VIENT CE NOM? ....................................................................................................... 14
LEXIQUE .......................................................................................................................... 14
APACHE, PHP, MYSQL, JOOMLA: COMMENT S’Y RETROUVER ? ............................................... 18
JOOMLA EN LOCAL OU CHEZ UN HÉBERGEUR .......................................................................... 19
PRÉPARONS NOTRE ENVIRONNEMENT ......................................................................... 20
1
INSTALLER DIFFÉRENTS OUTILS............................................................................................. 21
1.1 Installer quelques outils de base (navigateurs, modules pour Firefox…) ............ 21
1.2 Installer WampServer ........................................................................................... 21
1.3 Problème pouvant être rencontré lors de l’installation de WampServer ............ 27
1.4 WampServer et sécurité ....................................................................................... 28
2 CRÉER « UN SITE JOOMLA » EN LOCAL.................................................................................. 28
3 SE CONNECTER ET SE DÉCONNECTER DU BACKEND (PARTIE ADMINISTRATION).............................. 33
4 À FAIRE DIRECTEMENT APRÈS L’INSTALLATION D’UN NOUVEAU SITE JOOMLA ............................... 34
4.1 Définir l’éditeur par défaut ................................................................................... 34
4.2 Définir les valeurs par défaut de certains paramètres pour l’éditeur JCE ........... 35
4.2.1 Le paramètre « Autoriser l’accès à la racine » pour l’éditeur JCE ............................................35
4.2.2 Quelques paramètres relatifs aux tableaux pour l’éditeur JCE ................................................36
4.3 Définir les valeurs par défaut de certains paramètres pour les articles .............. 38
4.4 Définir les valeurs par défaut de certains paramètres pour les menus, les
modules… ........................................................................................................................ 40
4.5 Ne pas indexer (référencer) le site ....................................................................... 42
4.6 Définir le nom du site, une description….............................................................. 43
5 RETROUVER CERTAINES DONNÉES TECHNIQUES ...................................................................... 44
CONVENTIONS .............................................................................................................. 45
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
CAS N°1: PARTONS D'UN TEMPLATE (MODÈLE) EXISTANT SITE « CLUB DE MARCHE ».... 47
1
2
PRÉSENTATION DU CONTEXTE ............................................................................................. 48
GÉRER LES TEMPLATES ....................................................................................................... 49
2.1 Définition............................................................................................................... 49
2.2 Installer un nouveau template (modèle) .............................................................. 49
2.3 Définir le modèle utilisé par défaut ...................................................................... 50
2.4 Désinstaller un modèle ......................................................................................... 51
2.5 Voir les positions disponibles dans un modèle..................................................... 52
3 GÉRER LES EXTENSIONS ...................................................................................................... 54
3.1 Définition............................................................................................................... 54
3.2 Installer des extensions......................................................................................... 54
3.3 Voir les extensions installées ................................................................................ 57
3.4 Désactiver une extension ...................................................................................... 57
3.5 Désinstaller une extension .................................................................................... 58
4 ENVOYONS QUELQUES IMAGES............................................................................................ 58
5 INTÉGRER DU CONTENU ..................................................................................................... 63
5.1 Gérer les articles ................................................................................................... 63
5.1.1
5.1.2
5.1.3
5.1.4
5.1.5
5.2
Créer des articles ......................................................................................................................63
Dépublier un article ..................................................................................................................64
Supprimer un article .................................................................................................................65
Retrouver un article dans la Corbeille ......................................................................................65
Paramètres divers concernant les articles ...............................................................................66
Gérer l’en-tête (header) ........................................................................................ 67
5.2.1 Le logo ......................................................................................................................................67
5.2.2 Le diaporama (slideshow) ........................................................................................................69
5.3
Gérer la barre de menus ....................................................................................... 76
5.3.1 Créer la barre de menus principale ..........................................................................................76
5.3.2 Créer un module pour afficher le menu principal ....................................................................80
5.4 Créer et publier un module en pied de page ........................................................ 82
6 ALLONS UN PEU PLUS LOIN ................................................................................................. 84
6.1 Appliquer une mise en forme au niveau des articles ........................................... 84
6.2 Intégrer une galerie photos dans un article ......................................................... 94
6.3 Créer des catégories d’articles .............................................................................. 99
6.4 Modifier certains articles existants et créer des articles supplémentaires ........ 100
6.4.1 Catégorie « Le Club » ..............................................................................................................100
6.4.2 L’article « Agenda » ................................................................................................................106
6.4.2.1 Ajouter des catégories d’évènements et des évènements dans iCagenda........................106
6.4.2.2 Créer/activer un module « iCagenda » ..............................................................................110
6.4.2.3 Insérer le module « iCagenda » dans l’article « Agenda » .................................................111
6.4.2.4 Créer un lien de menu de type « iCagenda – Liste des évènements » ..............................111
6.4.3 Catégorie « Infos utiles » ........................................................................................................113
6.5 Compléter le menu principal .............................................................................. 118
7 TRANSFÉRER UN SITE JOOMLA VERS UN ESPACE D’HÉBERGEMENT............................................ 120
7.1 Les données fournies par votre hébergeur ........................................................ 120
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
7.2 Transférer la base de données de votre serveur local vers votre espace
d’hébergement.............................................................................................................. 120
7.2.1
7.2.2
7.2.3
7.2.4
7.3
7.4
7.5
Créer une base de données dans l’espace d’hébergement ...................................................120
Exporter la base de données de votre serveur local ..............................................................122
Importer la base de données dans la base située dans l’espace d’hébergement .................124
Ajouter un utilisateur ayant accès à la base de données .......................................................126
Transférer les fichiers.......................................................................................... 126
Adapter le fichier configuration.php .................................................................. 128
Configurer le site mis en ligne ............................................................................ 130
SAUVEGARDE ET SÉCURITÉ DE VOTRE SITE WEB ...........................................................131
1
2
LA SÉCURITÉ: APERÇU GLOBAL ........................................................................................... 132
1.1 Sauvegarde, sauvegarde, sauvegarde ................................................................ 132
1.2 Effectuer les mises à jour .................................................................................... 132
1.3 Mots de passe ..................................................................................................... 133
1.4 N'installez que les extensions utiles ................................................................... 133
1.5 Ne pas utiliser les sites « warez » ....................................................................... 133
1.6 Choisissez un bon hébergeur .............................................................................. 134
1.7 Droits sur les dossiers et fichiers ........................................................................ 134
1.8 Extensions tierces ............................................................................................... 135
1.8.1 aeSecure .................................................................................................................................135
1.8.2 AdminTools .............................................................................................................................135
1.8.3 Autres extensions ...................................................................................................................136
SAUVEGARDER, DÉPLACER, RESTAURER UN SITE.................................................................... 137
2.1
Sauvegarder à l'aide du composant Akeeba Backup .......................................... 137
2.1.1 Téléchargement et installation d'Akeeba Backup ..................................................................137
2.1.2 Akeeba Backup configuration post-installation .....................................................................137
2.1.3 Sauvegarder votre site avec Akeeba Backup..........................................................................141
2.1.4 Transfert d'une sauvegarde Akeeba sur votre disque ...........................................................143
2.1.5 Restauration de vos sauvegardes Akeeba avec Akeeba Kickstart..........................................144
2.1.5.1 Création d'une base de données ........................................................................................144
2.1.5.2 Extraction des données de la sauvegarde ..........................................................................145
2.2 Sauvegarde manuelle.......................................................................................... 151
3 SÉCURISER VOTRE SITE WEB – EN PRATIQUE ........................................................................ 151
4 CONCLUSION ................................................................................................................. 154
CAS N°2: RENFORCEMENT SITE « CARNETS DE VOYAGES » ...........................................155
1
2
3
4
5
6
7
PRÉSENTATION DU CONTEXTE ........................................................................................... 156
METTRE EN PLACE LA BASE DU SITE .................................................................................... 157
CRÉER LE FORMULAIRE « DE DEMANDE POUR DEVENIR RÉDACTEUR » ET GÉRER LES SOUMISSIONS 174
GÉRER LE MENU ............................................................................................................. 178
CRÉER LES MODULES MANQUANTS..................................................................................... 181
NE PAS AUTORISER LES INSCRIPTIONS DE NOUVEAUX UTILISATEURS À PARTIR DU SITE .................. 182
GÉRER LES RÉDACTEURS DU SITE ........................................................................................ 184
7.1 Créer un nouveau groupe d’utilisateurs ............................................................. 184
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
7.2
7.3
7.4
7.5
Créer un niveau d’accès pour le groupe « Rédacteurs_Carnets » ..................... 185
Créer de nouveaux utilisateurs dans le groupe « Rédacteurs_Carnets » .......... 186
Donner les droits voulus aux utilisateurs du groupe « Rédacteurs_Carnets » .. 188
Prévoir des entrées de menus pour les rédacteurs ............................................ 188
7.5.1 Créer une entrée de menu « Proposer un article » ...............................................................188
7.5.2 Créer une entrée de menu « Liste des articles » ....................................................................190
7.6 Activer JCE Editor pour la gestion des articles dans le frontend ........................ 192
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 ................................. 193
8 SAUVEGARDER LE SITE ET TRANSFÉRER LE SITE CHEZ UN HÉBERGEUR ........................................ 193
HTML ...........................................................................................................................194
1
2
HTML ET CSS: DEUX LANGAGES INCONTOURNABLES ............................................................ 195
1.1 Les rôles de HTML et CSS .................................................................................... 195
1.2 Les différentes versions de HTML et CSS ............................................................ 195
1.2.1 Les versions de HTML .............................................................................................................195
1.2.2 Les versions de CSS .................................................................................................................196
LES BALISES ET LEURS ATTRIBUTS ....................................................................................... 196
2.1
2.2
2.3
2.4
2.5
3
4
5
2.5.1 Balises de premier niveau ......................................................................................................197
2.5.2 Balises d'en-tête .....................................................................................................................198
2.5.3 Balises de structuration du texte ...........................................................................................198
2.5.4 Balises de listes .......................................................................................................................199
2.5.5 Balises de tableau ...................................................................................................................199
2.5.6 Balises de formulaire ..............................................................................................................199
2.5.7 Balises « sectionnantes » .......................................................................................................199
2.5.8 Balises génériques ..................................................................................................................200
LES PARAGRAPHES .......................................................................................................... 200
LES TITRES ..................................................................................................................... 200
MISES EN FORME DE BASE ................................................................................................ 201
5.1
6
Les balises ........................................................................................................... 196
Les balises en paires ............................................................................................ 196
Les balises orphelines ......................................................................................... 197
Les attributs ........................................................................................................ 197
Liste des balises ................................................................................................... 197
Mettre en valeur ................................................................................................. 201
5.1.1 Mettre un peu en valeur ........................................................................................................201
5.1.2 Mettre bien en valeur.............................................................................................................201
5.1.3 Marquer le texte.....................................................................................................................202
5.1.4 N'oubliez pas: HTML pour le fond, CSS pour la forme ...........................................................202
LES LISTES...................................................................................................................... 202
6.1 Liste non ordonnée ............................................................................................. 202
6.2 Liste ordonnée .................................................................................................... 203
6.3 En résumé ........................................................................................................... 203
7 LES LIENS....................................................................................................................... 204
7.1 Un lien vers un autre site .................................................................................... 204
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
7.2
7.3
8
Un lien vers une ancre ........................................................................................ 204
Cas pratiques d'utilisation des liens .................................................................... 205
7.3.1 Un lien qui affiche une infobulle au survol.............................................................................205
7.3.2 Un lien qui ouvre une nouvelle fenêtre .................................................................................205
7.3.3 Un lien pour envoyer un e-mail ..............................................................................................206
7.3.4 Un lien pour télécharger un fichier ........................................................................................206
7.3.5 En résumé ...............................................................................................................................206
LES IMAGES ................................................................................................................... 207
8.1
Les différents formats d'images.......................................................................... 207
8.1.1
8.1.2
8.1.3
8.1.4
8.1.5
8.1.6
8.2
Savez-vous ce qu'est un format d'image ? .............................................................................207
Le JPEG....................................................................................................................................207
Le PNG ....................................................................................................................................207
Le GIF ......................................................................................................................................208
Il existe un format adapté à chaque image ............................................................................208
Les erreurs à éviter .................................................................................................................208
Insérer une image ............................................................................................... 208
8.2.1 Insertion d'une image.............................................................................................................208
8.2.2 Ajouter une infobulle .............................................................................................................209
8.2.3 Miniature cliquable ................................................................................................................209
8.3
9
Les figures ........................................................................................................... 210
8.3.1 Création d'une figure..............................................................................................................210
8.3.2 Bien comprendre le rôle des figures ......................................................................................210
8.3.3 En résumé ...............................................................................................................................211
LE LANGAGE HTML PAR LA PRATIQUE ................................................................................ 212
9.1
9.2
9.3
Site concernant des plantes, des techniques de culture… ................................. 212
Installation du site ............................................................................................... 212
Utiliser des balises HTML au sein des articles .................................................... 214
9.3.1 Les balises <h1>, <h2>, <p>, <br />, <em>, <strong>, <u>, <ul>, <li> ....................................214
9.3.1.1 En utilisant la barre d’outils de l’éditeur JCE ......................................................................214
9.3.1.2 Encoder le code source directement (le code est fourni) ..................................................219
9.3.1.3 Encoder le code source directement (le code n’est pas fourni) ........................................220
9.3.2 Les balises <h1>, <h2>, <p>, <br />, <strong>, <mark>, <ol>, <li> .........................................220
9.3.2.3 Encoder le code source directement (le code n’est pas fourni) ........................................225
9.3.3 Les balises <h1>, <table>, <tr>, <td>, <a> (liens externes) ....................................................225
9.3.3.2 Compléter l’article en insérant directement le code source voulu ....................................230
9.3.4 Les balises <h1>, <table>, <tr>, <td>, <a> (liens internes) .....................................................230
9.3.5 Les balises <h1>, <h2>, <p>, <img> ........................................................................................233
9.3.5.2 Compléter l’article en insérant directement le code source voulu....................................235
9.3.6 Associons les balises <img> et <a> .........................................................................................235
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
9.3.6.3 Exerçons-nous ....................................................................................................................238
9.3.7 Les balises <h1>, <p>, <br />, <span>, <div>, <strong> ..........................................................239
9.4
Compléter les articles, le menu .......................................................................... 242
CSS ...............................................................................................................................244
1
APPROCHE GÉNÉRALE ...................................................................................................... 245
1.1 Présentation ........................................................................................................ 245
1.2 Où les styles peuvent-ils être insérés ? .............................................................. 246
1.2.1
1.2.2
1.2.3
1.2.4
Dans un fichier .css (recommandé) ........................................................................................246
Dans l'en-tête <head> du fichier HTML ..................................................................................247
Directement dans les balises (non recommandé) ..................................................................247
Et Joomla dans tout cela ? ......................................................................................................248
1.3 Appliquer un style à une balise ........................................................................... 249
1.4 Appliquer un style en utilisant les attributs class ou id ...................................... 252
1.5 Appliquer un style: les sélecteurs avancés ......................................................... 254
1.6 En résumé ........................................................................................................... 256
2 FORMATAGE DU TEXTE À L’AIDE DE STYLES .......................................................................... 257
2.1 Introduction ........................................................................................................ 257
2.2 La taille ................................................................................................................ 257
2.2.1 Une taille absolue ...................................................................................................................257
2.2.2 Une valeur relative .................................................................................................................258
2.3
La police .............................................................................................................. 259
2.3.1 Modifier la police utilisée .......................................................................................................259
2.3.2 Utiliser une police personnalisée avec @font-face ................................................................260
2.4
Italique, gras, souligné ........................................................................................ 262
2.4.1 Mettre en italique ..................................................................................................................262
2.4.2 Mettre en gras ........................................................................................................................262
2.4.3 Soulignement et autres décorations ......................................................................................263
2.5
2.6
L’alignement........................................................................................................ 263
Les flottants ......................................................................................................... 264
2.6.1 Faire flotter une image ...........................................................................................................265
2.6.2 Stopper un flottant .................................................................................................................265
2.7 En résumé ........................................................................................................... 266
3 LA COULEUR ET LE FOND .................................................................................................. 266
3.1 Introduction ........................................................................................................ 266
3.2 Couleur du texte ................................................................................................. 266
3.2.1 Indiquer le nom de la couleur ................................................................................................266
3.2.2 La notation hexadécimale ......................................................................................................267
3.2.3 La méthode RGB .....................................................................................................................268
3.3
Couleur de fond .................................................................................................. 268
3.3.1 Le CSS et l'héritage .................................................................................................................269
3.3.2 Exemple d'héritage avec la balise <mark> .............................................................................269
3.4
Images de fond .................................................................................................... 270
3.4.1 Appliquer une image de fond .................................................................................................270
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
3.4.2 Options disponibles pour l'image de fond .............................................................................270
3.4.3 Combiner les propriétés .........................................................................................................272
3.4.4 Plusieurs images de fond........................................................................................................272
3.5
La transparence................................................................................................... 273
3.5.1 La propriété opacity ...............................................................................................................273
3.5.2 La notation RGBa ....................................................................................................................273
3.6 En résumé ........................................................................................................... 274
4 LES BORDURES ET LES OMBRES .......................................................................................... 274
4.1 Bordures standard .............................................................................................. 274
4.2 Bordures arrondies ............................................................................................. 276
4.3 Les ombres .......................................................................................................... 277
4.4 En résumé ........................................................................................................... 278
5 APPARENCES DYNAMIQUES .............................................................................................. 278
5.1 Gestion des survols ............................................................................................. 279
5.2 Gestion des clics et des sélections ...................................................................... 280
5.3 En résumé ........................................................................................................... 280
6 LE LANGAGE CSS PAR LA PRATIQUE .................................................................................... 281
6.1 Effectuer une copie du template. ....................................................................... 281
6.2 Modifier un template en n’intervenant pas directement dans le code ............. 282
6.3 Modifier un template en intervenant dans le code CSS ..................................... 284
6.3.1
6.3.2
6.3.3
6.3.4
6.3.5
6.3.6
Modifier la taille, la couleur, la police… des caractères .........................................................284
Modifier la couleur de fond....................................................................................................291
Définir une image de fond ......................................................................................................292
Créer des bordures .................................................................................................................293
Gérer les survols .....................................................................................................................293
Actions diverses ......................................................................................................................295
CAS N°4: RENFORCEMENT SITE « LES ARBRES » ............................................................297
1
2
3
4
5
APERÇU DU SITE ............................................................................................................. 298
PRÉPARER LES IMAGES ..................................................................................................... 299
METTRE EN PLACE LA BASE DU SITE .................................................................................... 301
CHARGER LES IMAGES DANS LE SITE .................................................................................... 304
PRÉPARER LA GALERIE PHOTOS AVEC PHOCA GALLERY ........................................................... 304
5.1 Créer une catégorie « Galerie - Arbres » ............................................................ 304
5.2 Ajouter les images ............................................................................................... 305
6 CRÉER LES CATÉGORIES ET LES ARTICLES .............................................................................. 308
7 COMPLÉTER, GÉRER LE MENU ........................................................................................... 315
8 CONFIGURER L’AGENDA ET INSÉRER DES ÉVÉNEMENTS........................................................... 316
9 CONFIGURER LES ÉLÉMENTS VOULUS POUR LES RECHERCHES .................................................. 316
10 CRÉER LE FORMULAIRE D’INSCRIPTION À LA NEWSLETTER ....................................................... 317
11 CRÉER, GÉRER LES MODULES ............................................................................................. 318
12 COMPLÉTER CERTAINS ARTICLES ........................................................................................ 323
13 MODIFIER QUELQUES STYLES CSS ...................................................................................... 328
13.1
Effectuer une copie du template « projecto » ................................................ 328
13.2
Aligner le logo à gauche avec les autres éléments de la page ........................ 329
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
13.3
Réduire la hauteur du menu ........................................................................... 329
13.4
Modifier l’alignement des commandes présentes dans les menus
« ESSENCES », « BOTANIQUE » et « VIDÉOS ». ............................................................. 330
13.5
Modifier la hauteur du bouton « Recherche »................................................ 330
13.6
Sauvegarder le site .......................................................................................... 331
13.7
Transférer le site vers un espace d’hébergement « externe » ....................... 331
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
ÉTUDE PRÉALABLE
1
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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'emailing
L'emailing consiste à l'envoi d'un courrier électronique à un plus ou moins grand nombre
d'internautes. Une campagne d'e-mailing 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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig


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 - Emailing - Campagne de
promotion
…
Une partie des notions reprises dans cette rubrique « Étude préalable » sont extraites du site
http://randonneur-du-web.com Elles ont parfois été modifiées, complétées, restructurées.
9
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
LES CMS (CONTENT MANAGEMENT SYSTEM)
10
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
JOOMLA EN QUELQUES MOTS
13
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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/GPL1 (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: http://kiwik.net/joomla/glossaire-des-termes-joomla/glossaries/1
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 www.votre-site.???/administrator
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.
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.
1
14
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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 www.votre-site.???/administrator
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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 5.3.1 (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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
PRÉPARONS NOTRE ENVIRONNEMENT
20
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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: http://www.clicparclic.eu (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 http://www.clicparclic.eu (rubrique « Étudiants »), téléchargez le fichier
compressé correspondant à votre système: 32 ou 64 bits.
32 bits:
64 bits:
wampserver2.5-Apache-2.4.9-Mysql-5.6.17-php5.5.12-32b.zip
wampserver2.5-Apache-2.4.9-Mysql-5.6.17-php5.5.12-64b.zip
21
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
24
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig

1.3
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 … ».
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++ 2012 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 http://www.clicparclic.eu (rubrique
« Étudiants »).
27
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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 http://www.clicparclic.eu (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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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 email, choisissez un
identifiant et un mot de passe. Ces dernières informations vous permettront d’accéder à
l’administration du site.
29
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
L’installation s’effectue.
9°) Demandez la suppression du répertoire d’installation.
31
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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 ».
4
À faire directement après l’installation d’un nouveau site Joomla
4.1
Définir l’éditeur par défaut
puis sur
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
4.2
Définir les valeurs par défaut de certains paramètres pour l’éditeur JCE
4.2.1 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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
6°) Remontez dans la page web et définissez certains paramètres comme illustré ci-dessous.
7°) Enregistrez et fermez.
37
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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:
2°) Cliquez sur « Système » puis sur « Configuration ».
3°) Cliquez dans la liste de gauche sur « Articles ».
38
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
4°) Définissez les paramètres comme vous le souhaitez puis enregistrez.
39
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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:
40
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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:
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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… :
3°) Via l’onglet « Site » notamment, définissez les paramètres voulus puis enregistrez.
43
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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).
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
CONVENTIONS
45
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
article
catégorie d’articles
formulaire
barre de menus
entrée de menu
sous-menu
commande dans une entrée de menu
barre de menus fantômes
entrée de menu fantôme

Préfixe
art
cat
frm
menu
mnu
smnu
cmd
menuf
mnuf
Séparateur de mots
-
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
CAS N°1: PARTONS D'UN TEMPLATE (MODÈLE) EXISTANT
SITE « CLUB DE MARCHE »
47
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Accueil
Diaporama (slideshow)
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig

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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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:
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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 ».
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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.
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
53
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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.
4°) Effectuez un double-clic sur le fichier correspondant à l’extension que vous souhaitez installer.
54
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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 http://www.clicparclic.eu (rubrique « Étudiants »).
Nom
Admin Tools
Description - Fichier
Admin Tools est le système de sécurité le plus
complet existant pour Joomla
Fichier: com_admintools-3.1.1-core.zip
PUIS
Fichier: admintools-fr_3-0-0.zip
Akeeba Backup
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-4.0.2-core.zip
PUIS
Fichier: akeebabackup-fr_3-11-0.zip
Better Preview
GoogliC
Analytics
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.
Site web
http://www.joomlatuto
s.com/admin-toolssecurite-dusite/extensionsjoomla/securite/admintools-securite-dp1
s.com/akeeba-backupsauvegarde/extensionsjoomla/sauvegarde/ake
eba-backupsauvegardes
http://www.nonumber.
nl/extensions/betterpre
view
http://www.joomlic.co
m/fr/extensions/googli
c-analytics
55
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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.
http://www.joomlic.co
m/fr/extensions/icagen
da
http://www.sarki.ch/jce
2/telecharger/pack-jcecomplet
http://www.joomlack.f
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
http://www.joomlack.f
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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.
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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:
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)
2°) Cliquez sur « Contenu » puis sur « Gestion des médias ».
58
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
7°) Nommez le dossier puis cliquez sur « Créer un dossier ».
8°) Le nouveau dossier est créé.
9°) Cliquez sur « Transférer ».
60
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
5.1.1 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:
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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.
5.1.2 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:
64
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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 ».
5.1.3 Supprimer un article
Pour supprimer un article:
3°) Recherchez l’article à supprimer (différents outils de recherche sont disponibles).
4°) Cochez l’article à supprimer puis cliquez sur « Corbeille ».
5.1.4 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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
5.2
Gérer l’en-tête (header)
5.2.1 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:
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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é.
5.2.2 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:
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
5.3.1 Créer la barre de menus principale
Pour définir le menu principal:
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
9°) Vous voyez le lien qui vient d’être créé.
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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.
5.3.2 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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
5.4
Créer et publier un module en pied de page
Pour créer les éléments devant figurer en pied de page:
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
6°) Cliquez sur « Appliquer & Fermer ». Vous obtenez un aperçu de la mise en forme obtenue.
86
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
6°) Prévisualisez le site et plus particulièrement l’article « Liens ».
91
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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 www.clicparclic.eu (rubrique « Étudiants ») ou sur le site de l’auteur
http://www.joomlack.fr/extensions-joomla/playlist-ck
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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 5.2.2 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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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 ».
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
6.4.1 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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
Article « Le conseil d’administration »
Article « Historique »
101
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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é.
6.4.2 L’article « Agenda »
Nous partons de l’hypothèse que l’extension « iCagenda » a déjà été installée (cf. page 56).
6.4.2.1 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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
2°) Définissez l’évènement en utilisant les différents onglets voulus.
108
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
3°) Enregistrez et fermez l’évènement créé.
109
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
En suivant cette procédure, créez quelques évènements.
6.4.2.2 Créer/activer un module « iCagenda »
Pour créer/activer un module « iCagenda »:
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
6.4.2.3 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
6.4.2.4 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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
3°) Dans la barre de menus fantômes, créez le menu fantôme voulu (de type « iCagenda – Liste des
évènements »).
112
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
6.4.3 Catégorie « Infos utiles »

Complétez l’article « Infos utiles » de la manière suivante.
113
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
Créez les articles suivants.

Article « Le pense-bête du randonneur »
114
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig

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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig

Article « Quelques règles d’or »
117
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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:
7.2
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
FTP
Hôte:
Mot de passe:
xxxxxxxxxx (adresse FTP)
xxxxxxxxxx
xxxxxxxxxx
E-MAIL
Serveur IMAP:
Serveur POP3:
Serveur SMTP:
Webmail:
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
Xxxxxxxxxx (adresse / URL)
MySQL
Hôte:
Base de données:
Mot de passe:
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
phpMyAdmin
phpMyAdmin:
Mot de passe:
xxxxxxxxxx (adresse / URL)
xxxxxxxxxx
xxxxxxxxxx
Transférer la base de données de votre serveur local vers votre espace d’hébergement
7.2.1 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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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 ».
7.2.3 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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
3°) Cliquez sur la base dans laquelle l’importation va être réalisée puis cliquez sur « Importer ».
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
7°) Le système affiche un message confirmant que l’importation est terminée.
7.2.4 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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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 7.2.4 à 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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
SAUVEGARDE ET SÉCURITÉ
DE VOTRE SITE WEB
131
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
1
La sécurité: aperçu global
Source: http://kiwik.net/joomla/3/le-livre-pour-tous/s%C3%A9curit%C3%A9
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 137.
1.2
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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: http://vel.joomla.org/live-vel.html
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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: https://demo.joomla.org
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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 660
1.8
Extensions tierces
Vous trouverez plusieurs extensions vous permettant d'améliorer la sécurité de votre site. Voici
quelques exemples.
1.8.1 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.
1.8.2 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 55.
135
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
1.8.3 Autres extensions
Sur le JDE/JED (journal des extensions: http://extensions.joomla.org ou en français (beaucoup
moins d’extensions proposées): http://extensions.joomla.fr), 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°1.
136
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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.
2.1.1 Téléchargement et installation d'Akeeba Backup
Pour télécharger Akeeba Backup, il suffit de vous rendre sur le site http://www.clicparclic.eu
(menu « Étudiants ») ou sur le site de l'auteur https://www.akeebabackup.com 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 ».
2.1.2 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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
2°) Cliquez sur « Run the Configuration Wizard ».
Vous pouvez suivre l’évolution de la configuration.
3°) Cliquez sur « Configuration ».
138
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
10°) Le système vous indiquera que vous avez lu et caché tous les messages.
2.1.3 Sauvegarder votre site avec Akeeba Backup
Pour sauvegarder votre site avec Akeeba Backup:
2°) Cliquez sur « Composants » puis sur « Akeeba Backup ».
3°) Cliquez sur « Sauvegarder ».
141
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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.
2.1.4 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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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 http://www.clicparclic.eu (menu
« Étudiants ») ou sur le site Akeeba: https://www.akeebabackup.com/products/akeebakickstart.html
Ensuite, vous pouvez suivre les étapes reprises ci-après.
2.1.5.1 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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
2.1.5.2 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/20141016_2047
5°) Cliquez sur kickstart.php (ou ajoutez-le directement dans la barre d'adresses).
145
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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\20141016_2047\tmp
C:\wamp\www\tests_sauvegardes\site01\20141016_2047\logs
À adapter selon votre cas.
15°) Cliquez sur le bouton « Supprimez le répertoire d’installation ».
149
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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-20141016-103519.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/20141016_2047/
localhost/tests_sauvegardes/site01/20141016_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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig

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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig

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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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: http://kiwik.net/joomla/3/le-livre-pour-tous/sauvegarder-restaurerd%C3%A9placer-un-site#sthash.kHfpfCPq.dpuf
154
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
CAS N°2: RENFORCEMENT
SITE « CARNETS DE VOYAGES »
155
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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),
installer une extension,
désinstaller une extension,
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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 28.
2°) 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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
4°) Effectuez les actions reprises au point « 4 À faire directement après l’installation d’un nouveau
site Joomla » figurant à la page 34.
5°) 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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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:
http://www.vacciweb.be
http://diplomatie.belgium.be/fr/Services/voyager_a_letranger/sante_et_hygiene/avant_le_depart
http://www.itg.be
http://www.timeanddate.com
http://www.xe.com/fr/currencyconverter
http://www.quandpartir.com
Pour obtenir la présentation souhaitée, sélectionnez « Vaccinations » puis cliquez sur le bouton
« Insérer/Modifier un style XHTML ».
161
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
Dans le cas présent, nous faisons encore plus simple. Ouvrez l’article « Photos » puis cliquez sur
le bouton « ImageShow ».
168
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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:
https://www.the-qrcode-generator.com
170
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
Pour l’entrée de menu « Carnets de voyages »:
179
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
180
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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 ».
3°) Définissez le nom du groupe puis enregistrez et fermez.
184
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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 ».
3°) Définissez le nom de ce niveau d’accès puis cochez le(s) groupe(s) lié(s) à ce niveau d’accès.
185
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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 ».
3°) Au niveau de l’onglet « Détails du compte utilisateur », définissez le nom, l’identifiant…
186
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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).
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
7.5.1 Créer une entrée de menu « Proposer un article »
1°) Cliquez sur « Menus » puis sur « Menu principal ».
188
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
Vous pouvez alors vous connecter dans le frontend en tant que rédacteur et vous verrez l’entrée
de menu.
Après connexion:
7.5.2 Créer une entrée de menu « Liste des articles »
1°) Cliquez sur « Menus » puis sur « Menu principal ».
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
4°) Cliquez sur « Articles » puis sur « Liste des articles d’une catégorie ».
5°) Sélectionnez la catégorie.
191
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig



7.6
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.
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 ».
192
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
HTML
194
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
Source: http://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3
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 1996.
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 1991. 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.
1.2.1 Les versions de HTML


HTML 1: c'est la toute première version créée par Tim Berners-Lee en 1991.
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig



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.
1.2.2 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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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: http://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-etcss3/memento-des-balises-html
Autre site très intéressant: https://www.vectorskin.com/balises-html5
2.5.1 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
<html>
<head>
<body>
Description
Balise principale
En-tête de la page
Corps de la page
197
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
2.5.3 Balises de structuration du texte
Balise
<abbr>
<blockquote>
<cite>
<q>
<sup>
<sub>
<strong>
<em>
<mark>
<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
<img />
<figure>
<figcaption>
<audio>
<video>
<source>
<a>
<br />
<p>
<hr />
<address>
<del>
<ins>
<dfn>
<kbd>
<pre>
<progress>
<time>
Description
Abréviation
Citation (longue)
Citation du titre d'une œuvre ou d'un évènement
Citation (courte)
Exposant
Indice
Mise en valeur forte
Mise en valeur normale
Mise en valeur visuelle
Titre de niveau 1
Titre de niveau 2
Titre de niveau 3
Titre de niveau 4
Titre de niveau 5
Titre de niveau 6
Image
Figure (image, code, etc.)
Description de la figure
Son
Vidéo
Format source pour les balises <audio> et <video>
Lien hypertexte
Retour à la ligne
Paragraphe
Ligne de séparation horizontale
Adresse de contact
Texte supprimé
Texte inséré
Définition
Saisie clavier
Affichage formaté (pour les codes sources)
Barre de progression
Date ou heure
198
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
<ul>
<ol>
<li>
<dl>
<dt>
<dd>
Description
Liste à puces non numérotée
Liste numérotée
Élément de la liste à puces
Liste de définitions
Terme à définir
Définition du terme
2.5.5 Balises de tableau
Balise
<table>
<caption>
<tr>
<th>
<td>
<thead>
<tbody>
<tfoot>
Description
Tableau
Titre du tableau
Ligne de tableau
Cellule d'en-tête
Cellule
Section de l'en-tête du tableau
Section du corps du tableau
Section du pied du tableau
2.5.6 Balises de formulaire
Balise
<form>
<fieldset>
<legend>
<label>
<input />
<textarea>
<select>
<option>
<optgroup>
Description
Formulaire
Groupe de champs
Titre d'un groupe de champs
Libellé d'un champ
Champ de formulaire (texte, mot de passe, case à cocher, bouton, etc.)
Zone de saisie multiligne
Liste déroulante
Élément d'une liste déroulante
Groupe d'éléments d'une liste déroulante
2.5.7 Balises « sectionnantes »
Ces balises permettent de construire le squelette de notre site web.
Balise
<header>
<nav>
<footer>
<section>
<article>
<aside>
Description
En-tête
Liens principaux de navigation
Pied de page
Section de page
Article (contenu autonome)
Informations complémentaires
199
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
5.1.1 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.
5.1.2 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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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.
5.1.4 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:


6.1
les listes non ordonnées ou listes à puces,
les listes ordonnées ou listes numérotées ou encore énumérations.
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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="http://www.arlon.be">Arlon</a>
NB: si vous faites un lien vers un site qui comporte une adresse un peu bizarre avec des &, comme:
http://www.site.com/?data=15&name=mateo71, vous devrez remplacer tous les « & » par « & »
dans votre lien comme ceci : http://www.site.com/?data=15&name=mateo71.
Vous ne verrez pas la différence, mais cela est nécessaire pour avoir une page web correctement
construite en HTML 5.
7.2
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
</p>
<h2 id="cuisine">La cuisine</h2>
<p>... (beaucoup de texte) ...</p>
<h2 id="rollers">Les rollers</h2>
<h2 id="arc">Le tir à l'arc</h2>
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
7.3.1 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="http://www.arlon.be" 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.
7.3.2 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="http://www.arlon.be" target="_blank">Arlon</a>
Le site s'affichera dans une autre fenêtre.
205
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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.
7.3.3 Un lien pour envoyer un e-mail
Si vous voulez que vos visiteurs puissent vous envoyer un e-mail, 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 href="mailto:[email protected]">Nous contacter par mail</a></p>
Il suffit donc de faire commencer le lien par mailto: et d'écrire l'adresse e-mail 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 e-mail.
7.3.4 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.
7.3.5 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="http://www.clicparclic.eu">.
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
8.1.1 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.
8.1.2 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.
8.1.3 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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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.
8.1.4 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é.
8.1.5 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é.
8.1.6 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 !
8.2.1 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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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. : http://www.site.com/fleur.png), 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.
8.2.2 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.
8.2.3 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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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.
8.3.1 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>
<figcaption>Le logiciel Bloc-Notes</figcaption>
</figure>
8.3.2 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>
<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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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>
8.3.3 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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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: http://mag.plantes-et-jardins.com
9.2
Installation du site
2°) 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.
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
9.3.1 Les balises <h1>, <h2>, <p>, <br />, <em>, <strong>, <u>, <ul>, <li>
9.3.1.1 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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
9.3.1.2 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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
9.3.1.3 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>
9.3.2 Les balises <h1>, <h2>, <p>, <br />, <strong>, <mark>, <ol>, <li>
1°) Créer l’article suivant classé dans la catégorie « Techniques ».
220
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
9°) Sélectionnez le paragraphe « Le bouturage… » puis cliquez sur le bouton
223
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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é.
9.3.2.3 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 ».
9.3.3 Les balises <h1>, <table>, <tr>, <td>, <a> (liens externes)
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
Résultat:
228
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
impact à l’impression. Pour les écrans, <tbody> va permettre un défilement différent des
éléments <tfoot>, <thead> du tableau (<table>) parent.
9.3.3.2 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.
9.3.4 Les balises <h1>, <table>, <tr>, <td>, <a> (liens internes)
1°) Soit l’article suivant. Définissez « Glossaire » en « Titre 1 ».
…
230
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
5°) Complétez la boîte de dialogue qui suit puis cliquez sur « Insérer ».
Pour tester ces liens, il faut passer par le frontend.
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
9.3.5 Les balises <h1>, <h2>, <p>, <img>
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
3°) La photo apparaît dans l’article. Placez le curseur à l’endroit adéquat puis insérez la deuxième
photo.
234
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
En travaillant directement dans le code source, complétez le code afin d’insérer la troisième photo.
Résultat à obtenir:
9.3.6 Associons les balises <img> et <a>
Il faut que l’extension « Mediabox CK » ait été installée et activée.
235
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
Complétez le code de la manière suivante afin que les liens existent sur les différentes vignettes
des photos d’agapanthes.
9.3.6.3 Exerçons-nous
Insérez les photos voulues et les liens dans les articles concernant les arums et les bignones.
238
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
9.3.7 Les balises <h1>, <p>, <br />, <span>, <div>, <strong>
1°) Créez l’article suivant qui sera classé dans la catégorie « Poèmes ».
239
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
2°) Définissez « La petite fleur rose … » comme « Titre 1 ».
3°) Sélectionnez « Recueil: España (1845) » et demandez un alignement à droite.
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
CSS
244
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
1
Approche générale
Source: http://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-etcss3/mettre-en-place-le-css
1.1
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 1996. 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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
(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):
www.caniuse.com
1.2
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.
1.2.1 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>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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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.
1.2.2 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>
<style>
p
{
color: blue;
}
</style>
</head>
<body>
</body>
</html>
1.2.3 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>
247
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
</head>
<body>
<p style="color: blue;">Bonjour et bienvenue sur mon site !</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.
1.2.4 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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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:






1.3
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).
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig

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;
}
balise2
{
}
balise3
{
}
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<p class="introduction">Bonjour et bienvenue sur mon site !</p>
</body>
</html>
252
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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:
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig

<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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
#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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
Exemple:
<a href="http://site.com" 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="http://site.com" 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
{
}

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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
2
o
certaines balises spécifiques, auxquelles on a donné des noms à l'aide des
attributs class ou id (.nomclasse ou #nomid);
o
uniquement les balises qui se trouvent à l'intérieur d'autres balises (h3 em).
Formatage du texte à l’aide de styles
Source: http://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-etcss3/formatage-du-texte
2.1
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.
2.2.1 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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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.
2.2.2 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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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.
2.3.1 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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig






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.
2.3.2 Utiliser une police personnalisée avec @font-face
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
En CSS, pour définir une nouvelle police, vous devez la déclarer comme ceci:
@font-face {
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 formats:
@font-face {
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 à ceci:
@font-face { /* 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 section @font-face 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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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 !
2.4.1 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>:
h2
{
font-style: italic;
}
2.4.2 Mettre en gras
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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:





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).
Exemples:
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é:




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.
Exemples:
h1
{
text-align: center;
}
263
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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.
2.6.2 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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
.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 directive @font-face : 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: http://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/lacouleur-et-le-fond
3.1
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:




3.2
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.
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.
3.2.1 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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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;
}
3.2.2 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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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, #000000 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 #FFAA33.
3.2.3 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 255.
3.3
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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.
3.3.1 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.
3.3.2 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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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.
3.4.1 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 (http://…) 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.
3.4.2 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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
background-repeat: no-repeat; /* Le fond ne sera pas répété */
background-position: top right; /* Le fond sera placé en haut à droite */
}
3.4.3 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.
3.4.4 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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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.
3.5.1 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.
3.5.2 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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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: http://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-etcss3/les-bordures-et-les-ombres
4.1
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig

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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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)
2)
3)
4)
en haut à gauche ;
en haut à droite ;
en bas à droite ;
en bas à gauche.
276
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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)
2)
3)
4)
le décalage horizontal de l'ombre,
le décalage vertical de l'ombre,
l'adoucissement du dégradé,
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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 IE10.
4.4
5
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.
Apparences dynamiques
Source: http://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-etcss3/creation-d-apparences-dynamiques
278
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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:




5.1
au survol,
lors du clic,
lors du focus (élément sélectionné),
lorsqu'un lien a été consulté.
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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:
281
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
1
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).
6.3.1 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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
2°) Appuyez sur la touche de tabulation
3°) Encodez:
ce qui permet de créer une nouvelle ligne.
font-weight:
4°) En utilisant les touches suivantes
propriété font-weight.
de votre clavier, essayez différentes valeurs pour la
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
directement dans le fichier source si cela est possible.
Modifiez le fichier « template.css » de la manière suivante:
6.3.3 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.
292
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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:
6.3.5 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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
Procédure:
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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:
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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:
296
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
CAS N°4: RENFORCEMENT
SITE « LES ARBRES »
297
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
Au terme de l’étude de ce quatrième cas, vous serez capable de(d’):














1
installer l’application Joomla,
chercher, télécharger et installer un template (modèle),
installer des extensions,
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…
Aperçu du site
Thème du site: les arbres
298
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig

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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig

3
Redimensionnez et enregistrez la photo ci-dessus pour que celle-ci ait les dimensions
suivantes: 272 X 181 pixels
Mettre en place la base du site
2°) 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 « www.themes-ck.com ».
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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.
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig







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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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.
304
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
5°) Activez l’onglet « Upload multiple » puis cliquez sur « Add files ».
6°) Sélectionnez les fichiers puis cliquez sur « Ouvrir ».
306
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
7°) Cliquez sur « Start Upload ».
8°) Cochez les photos téléchargées, sélectionnez la catégorie et cliquez sur « Enregistrer & fermer ».
307
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
Les feuilles (article classé dans la catégorie « Botanique »)
Les fleurs (article classé dans la catégorie « Botanique »)
310
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
5°) Descendez dans la fenêtre puis cliquez sur « Insérez code ».
6°) Vous obtenez ceci.
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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 www.clicparclic.eu
Inscription à la newsletter
Appel à un formulaire qui est créé un peu plus loin
314
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
7
Compléter, gérer le menu
Complétez le menu horizontal de la manière suivante:
315
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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 6.4.2 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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
3°) Définissez la valeur « Contenu » au niveau de la propriété « Chercher dans ».
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
Module « Diaporama »
319
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
320
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
Module « Recherche » (en position 7)
Module « Calendrier »
321
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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.
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
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.
13.4 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
Réf.: D-F04-99a (10_2014)
Dominique Lieffrig
13.6 Sauvegarder le site
Comme cela a déjà été énoncé, il est capital d’effectuer des sauvegardes régulières de ses sites web.
Vous pouvez effectuer une sauvegarde:
 soit en utilisant Akeeba Backup: cf. point 2.1 se trouvant à la page 137,
 soit de manière « manuelle »: cf. point 2.2 se trouvant à la page 151
Une fois la sauvegarde réalisée, il est important de tester celle-ci afin de vérifier que la
restauration s’effectuera sans problème si nécessaire.
13.7 Transférer le site vers un espace d’hébergement « externe »
Pour transférer votre site vers un espace d’hébergement « externe », vous pouvez vous référer au
point 7 se trouvant à la page 120.
Une fois le site transféré, il ne faut pas oublier d’activer le référencement, de sécuriser le site au
maximum…
331
Réf.: D-F04-99a (10_2014)

Partons d`un modèle (templateà existant)

Transcription

Documents pareils

Arbeitsrecht / Droits du travail

FLORENCE FORESTIE

1) LISBON-ALFAMA (55€/JOUR)

Festival des Arts Martiaux

Nautisme - ETS Durand

Automobile

La Légende des 1001 Plumes - Lever de rideau

12) LISBON-ALFAMA-Sta Luzia 1 (55€/JOUR)

Façade de bois

EasyFlirt détrône Meetic