Support Joomla ®, guides et aide Joomla

Contactez nous !

  

La structure d'une page

{definitionbot=disable}

Besoin d'aide ? Contactez-nous : support à partir de 65€ HT/heure

Comment se structure une page Web ?

On peut dissocier trois éléments principaux dans une page Web :

  • le langage HTML/XHTML, qui structure la page au moyen de balises
  • le langage PHP, qui va exécute des requêtes pour aller chercher des éléments de contenu dans la base de données
  • le langage CSS, qui met en forme la page

La construction d'une page ne se fait pas toujours dans un ordre établi, même si on commence obligatoirement par le HTML.


Le langage HTML

Le HTML permet donc de définir un "squelette" de page, au moyen de balises HTML, reconnaissables au fait qu'elles sont entre chevrons : les fameux symboles < et >.

Un aperçu du code HTML de cette page, avec les balises HTML mises en valeur en violet :
Code HTML de la page

Aux débuts du Web et jusqu'à encore il n'y a pas si longtemps, on construisait essentiellement les pages au moyen de tableaux. On utilisait alors des balises de type <table>, avec de multiples rangées (<tr>) et cellules (<td>).

Pour des raisons d'accessibilité mais aussi de respect des normes mises en place par le W3C (le Consortium du World Wide Web qui a défini une nomenclature très stricte en matière de langage HTML et XHTML visant à rendre les pages lisibles par tous les navigateurs), on utilise aujourd'hui les balises <div> (ou "divisions") pour structurer les pages en blocs ou en lignes.

Ainsi, une page "simple" comprenant une zone d'entête, un corps de page constitué de trois colonnes (colonne de gauche, centre de page, colonne de droite) et d'un pied de page, serait construite de cette façon en langage HTML :

<div>Ma page
<div>Tête de page</div>
<div>Corps de page
<div>Colonne gauche</div>
<div>Centre de la page</div>
<div>Colonne droite</div>
</div>
<div>Pied de page</div>
</div>

 Note : les textes "Ma page", "Colonne de gauche", etc, ne sont là qu'à titre d'illustration pour symboliser les zones de la page. Ils apparaîtraient évidemment sur la page si on les y entrait de cette façon.

Ce qui donnerait, une fois transposé de manière plus visuelle, quelque chose comme ça :

Structure HTML d'une page

Bien sûr, la page n'aura pas immédiatement cette forme : il faudra définir la largeur et la hauteur de chaque <div> pour qu'elle se structure de manière agréable. En jouant sur la taille ou la position des balises <div> ou sur leur propriété d'affichage (bloc ou ligne) au moyen du langage CSS, ou en y ajoutant des listes d'éléments, on parvient à construire des pages bien plus complexes que celle montrée sur cet exemple.

On construit la page au moyen du HTML (blocs, structure, etc) et on la met en forme au moyen du CSS (taille des blocs, décoration des éléments, du texte, etc).


Le langage PHP

Une fois le squelette de la page défini, il est possible d'y inclure tout de suite ses requêtes PHP. Ces requêtes serviront à "appeler" le contenu depuis la base de données, et de l'afficher sur la page dans les zones choisies.

Par exemple, on va demander aux articles de venir s'afficher dans le centre de page, tandis que les colonnes seront réservés aux menus - ou, dans le cas de Joomla, aux modules.

Ce qui donnerait, de manière grossière (les lignes de commande PHP sont évidemment totalement erronées et ne sont là que pour l'exemple) :

<div>Ma page
<div><?php afficher le contenu de la tête de page ?> </div>
<div>
<div><?php afficher le contenu de la colonne de gauche ?></div>
<div><?php afficher les articles ?></div>
<div><?php afficher le contenu de la colonne de droite ?> </div>
</div>
<div><?php afficher le contenu du pied de page ?> </div>
</div>

C'est le PHP qui ira chercher le contenu dans la base de données pour l'intégrer dans les pages.

Besoin d'aide ? Contactez-nous : support à partir de 65€ HT/heure

Le langage CSS

On utilisera le CSS pour mettre en forme les contenus et les balises <div>.

Mettre en forme signifie entre autres :

  • définir la position, la hauteur, la largeur, l'alignement (droite, gauche), les marges, les images d'arrière plan, ou encore la couleur de fond ou les bordures des blocs, des lignes, du texte, des images
  • définir la couleur, la police, la taille, ou les décorations du texte (gras, italique, souligné, etc)

C'est avec le CSS que l'on "habille" les balises HTML, en leur assignant des classes (ou des IDs), qui seront définies dans le fichier .CSS placé sur le serveur.

Concrètement, le navigateur lit le code de la page, interprète le code HTML, le PHP, et les classes des balises. Lorsqu'il lit par exemple <div class="menu">, il saura qu'il doit appliquer à ce bloc ou cette ligne les propriétés de mise en forme de la classe menu définies dans le fichier .CSS.

<div>Ma page
<div class="tete"></div>
<div>
<div class="col"></div>
<div class="contenu"></div>
<div class="col"> </div>
</div>
<div class="footer"><?php afficher le contenu du pied de page ?> </div>
</div>

Le CSS fonctionne à partir de classe ou d'IDs, que l'on définit dans un ou plusieurs fichier(s) .CSS que l'on lie ensuite à la page au moyen d'un lien situé dans la tête de la page (il n'est visible que lorsque l'on affiche le code source de ladite page).

Les liens qui définissent les fichiers CSS utilisés par la page :
Liens vers fichiers CSS

Ces fichiers CSS sont ni plus ni moins que des suite de lignes définissant des classes, des IDs, et leurs propriétés.

Une classe ou une ID est définie par des propriétés qui répondent évidemment à la nomenclature définie par les normales du langage CSS. On peut créer autant de classes que l'on veut, leur donner le nom que l'on souhaite (seules les propriétés sont pré-définies), et attribuer cette classe à de multiples éléments. Une ID ne peut en revanche être appelée qu'une seule fois par page.

Les propriétés d'une classe CSS, ici la classe "button"
Propriétés de classe CSS

Dans notre exemple, on voit notamment :

  • que le fond (le background) est l'image grad1.gif, avec un choix de répétition sur l'axe horizontal (repeat-x)
  • qu'il y a une bordure (border) d'un pixel de large (1px) et couleur gris très foncé (#33333)
  • que le texte sera de couleur grise (color: #ccc), fera 85% de la taille normale, et qu'il sera transformé en majuscule (text-transform: uppercase)
  • qu'il y a un espacement (padding) de plusieurs pixels
  • C'est donc en attribuant des classes ou des IDs à ses balises HTML, qui concernent également les liens, les paragraphes, les titres, que l'on mettra sa page en forme.


Les positions d'un template Joomla

Si la construction d'une page telle qu'on vient de la voir est universelle pour tous les sites web dynamiques faisant appel à une base de données (par opposition aux sites web statiques avec des pages HTML figées), Joomla possède quelques spécificités qui lui sont propres.

Ainsi, en plus des blocs et lignes utilisées pour construire la page, il est ainsi obligatoire dans Joomla de créer des positions sur la page, des emplacements dans lesquels on viendra afficher les modules (voir notre section Modules pour plus d'informations).

Ces positions seront définies avec un code spécifique, propre à Joomla, que l'on ajoutera en plus du HTML et du PHP, ou à la place de ces dernières.

<div>Ma page
<div class="tete"><jdoc:include type="modules" name="menu" /></div>
<div>
<div class="col"><jdoc:include type="modules" name="colgauche" /> </div>
<div class="contenu"></div>
<div class="col"><jdoc:include type="modules" name="coldroite" /> </div>
</div>
<div class="footer"><jdoc:include type="modules" name="footer" /> </div>
</div>

Ici, les positions remplacent certaines requêtes PHP, car c'est le module qui intègrera le code PHP à exécuter lorsqu'il sera activé dans telle ou telle position. Si aucun module n'est affiché dans la position, elle est "vide" et n'affiche rien.

Maintenant que la structure et la fabrication d'une page paraissent plus clairs, il est temps d'installer Joomla. Première étape : la création d'une base de données.

Besoin d'aide ? Contactez-nous : support à partir de 65€ HT/heure

Créer sa base de données

Astuces et Conseils

Si votre hébergement est chez OVH, la procédure classique consistant à ajouter à votre fichier .htaccess la ligne php_value register_globals Off ne fonctionnera pas.

En effet OVH a modifié la configuration de ses serveurs. Pour désactiver le Register globals il faut ajouter cette ligne : SetEnv REGISTER_GLOBALS 0

Lors de l'installation de Joomla il faut modifier certains droits sur les dossiers et fichiers. Si votre hébergement est chez OVH, il faut savoir que leurs serveurs n'acceptent pas les CHMOD 777 sur les dossiers. Il faut mettre un CHMOD 755.

Lorsque vous trier votre liste d'articles pour n'afficher que ceux d'une section voire d'une catégorie donnée, si vous cliquez sur Nouveau, le nouvel article sera directement dans la section et dans la catégorie avec lesquelles vous avez filtré vos articles.


Attention : les noms de tous les fichiers (documents, images) comme ceux des répertoires doivent s’écrire sans accents, sans espaces, et sans caractères spéciaux autres que - (tiret) _ (underscore) ou . (point). Les majuscules sont tolérées, mais sont dispensables.
Exemples de nommage corrects : image-du-chateau.jpg, le_chateau.jpg, chateau.jpg
Exemples de nommage incorrects : image du chateau.jpg, château.jpg


Attention : les seuls formats d’images tolérés sont JPG (ou JPEG), GIF et PNG. Les formats BMP, PSD, TIFF et autres sont fortement déconseillés.


Qui est Support Joomla! ® ? | Plan du site | Mentions Légales | Nous contacter









Le nom Joomla!® est utilisé sous license limitée de Open Source Matters, qui reste le propriétaire mondial de la marque.
Support Joomla n'est ni affilié à Open Source Matters ou au projet Joomla!®, ni approuvé par eux.

http://www.support-joomla.com/ is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by Open Source Matters the trademark holder in the United States and other countries.

Support Joomla est basé sur le template JA Purity II par JoomlArt