Théorie semaine 2¶
L'organisation d'un site web¶
Un site web contient généralement quelques uns ou tous les éléments suivants:
- Une page Index (page d'accueil du site web - index.html)
- Pages HTML
- Feuilles de style CSS
- Images
- Fichiers JavaScript
- Fichiers multimédia (sons, vidéos)
- Autre contenu
De par son contenu plus ou moins élaboré, un site web peut rapidement contenir plusieurs dizaines, voir des centaines de fichiers. C'est pourquoi on adopte une organisation simple où une équipe de travail pourra rapidement s'y retrouver.
La hiérarchie des fichiers¶
Lorsqu'un site web est constitué de plusieurs ressources, on se simplifie la vie (la nôtre et celle de notre équipe de travail) en classifiant nos fichiers de la façon suivante :
Directement sous le dossier parent du site web, on retrouve les fichiers HTML. Puis, au même niveau, on crée des sous-dossiers pour y conserver les autres ressources du site web.
Ceci implique que lorsqu'une ressource fait référence à une autre (une page HTML qui affiche une image du sous-dossier images, par exemple), on devra fournir le bon chemin d'accès.
Chemin d'accès
Un chemin d'accès est tout simplement l'adresse où se trouve une ressource sur le disque dur. Par exemple, le chemin suivant indique que sur le lecteur C:, un dossier parent nommé documents contient un sous-dossier images dans lequel on retrouve une image nommée mon_pitou.jpg: C:\documents\images\mon_pitou.jpg
Chemin d'accès absolu et relatif
Chemin d'accès absolu : chemin d'accès qui contient le chemin complet, incluant le lecteur.
Ex: C:\documents\images\mon_pitou.jpg
Chemin d'accès relatif : chemin d'accès à suivre à partir du fichier appelant pour atteindre la ressource voulue.
Ex: images/mon_pitou.jpg
Dans le cas d'un site web qui utilise des ressources locales, il faudra toujours utiliser les chemins relatifs afin d'éviter les fichiers non trouvables après avoir déposé le dossier sur un autre ordinateur comme le serveur web qui héberge notre site.
Règles de nomenclature en Web
En Web, il faut faire très attention à comment on nomme nos dossiers et fichiers, car autrement, il est fort possible que le site web ne fonctionne pas. Ainsi, les règles de nomenclature sont :
* jamais d'espace, les remplacer par des soulignés ou des tirets
* jamais d'accents
* toujours en minuscules
Structure d'une page HTML¶
Il existe une structure et une syntaxe à suivre quand on crée des pages HTML. Cette structure fait partie des bonnes pratiques de développement afin d'uniformiser le code et en faciliter la compréhension. Elle dicte notamment :
- Le minimum obligatoire pour définir une page HTML (voir page Ressources)
- L'écriture correcte des balises
- L'indentation appropriée des balises
Minimum obligatoire
Tel qu'expliqué dans la théorie sur le squelette HTML, la page HTML doit minimalement contenir :
- La version du langage utilisé
- Le contenant de la page (balise
<html>) - La description de la page (balise
<head>) - Le contenu de la page (balise
<body>)
Il faut se rappeler que tout ce qui doit apparaître sur la page web doit toujours être inscrit dans la section <body>.
Il faut donc bien comprendre à quoi servent les différentes balises pour savoir où elles doivent aller entre la section <head> et la section <body> :
- Section
<head>: utile au navigateur pour bien afficher la page - Section
<body>: utile à l'utilisateur pour la consultation de la page
Syntaxe des balises
En suivant les normes d'écriture, on évite de futurs problèmes d'affichage dans le navigateur. Bien souvent, quand on débogue une page HTML qui ne s'affiche pas correctement, on remarquera qu'une balise est fermée au mauvais endroit (ou pas fermée du tout), qu'un attribut est mal écrit ou encore qu'on a oublié un élément important dans la balise.
Fermeture des balises
Certaines balises s'écrivent avec une ouverture et une fermeture, alors que d'autres ne nécessitent aucune fermeture puisqu'elles sont complètes en elles-mêmes.
Pour savoir si une balise nécessite une fermeture, il faut se demander si cette dernière peut englober du contenu supplémentaire.
Exemple :
La balise <p> permet d'insérer un paragraphe dans la page. Dans un paragraphe, on peut retrouver du texte, des images, etc. Puisque le navigateur ne peut savoir de lui-même où débute le paragraphe et où il se termine, on doit donc le délimiter d'une ouverture et d'une fermeture : <p>... </p>.
Par contre, la balise <img> permet d'insérer une image. Une image ne contiendra jamais autre chose que l'image elle-même. Ainsi, cette balise n'a pas de fermeture.
Balise, attribut, valeur et contenu
L'écriture d'une balise HTML implique généralement son nom, un ou plusieurs attributs, la valeur associée aux attributs et, si application, le contenu de la balise.
Pou illustrer ce que représente chacun de ces éléments, utilisons l'analogie du hamburger :
Quand on écrit une balise HTML, la syntaxe à suivre est la suivante :
<balise attribut="valeur">contenu</balise>
La balise d'ouverture contient des attributs pour définir d'avantage cette balise, son fonctionnement, sa façon d'être affichée, etc. La majorité des attributs doivent avoir une valeur associée. Les valeurs sont écrite entre guillements. Ceci n'est pas une obligation, mais si la valeur contient un espace, alors il y aura une erreur. Il est donc bonne pratique de prendre l'habitude d'écrire les guillemets. Le contenu s'inscrit entre l'ouverture et la fermeture de la balise. Finalement, lorsque nécessaire, on ajoutera la fermeture de balise.
Si on reprend notre hamburger et qu'on écrit sa définition sous forme de html :
Remarquez que la viande est une balise qui contient du contenu, puisque plusieurs ingrédients constituent la boulette. Ainsi, les ingrédients qui forment le hamburger sont le contenu du pain, et les ingrédients qui forment la boulette sont le contenu de la viande...
Indentation
Comme vous l'avez constaté, les balises peuvent être imbriquées. Ainsi, dans un paragraphe, on peut ajouter des images <img>, des retours de ligne <br>, etc.
Écriture du code
Afin d'éviter les gros blocs difficiles à lire, on adopte les règles suivantes :
* Balises enfants sur une nouvelle ligne
* Balises enfants imbriquées
* Code toujours écrit en minuscules
* Jamais d'espace ou d'accent dans le code (sauf pour les textes à afficher)
Bon à savoir
Il existe deux grandes familles de balises :
- balises de type block
- balises de type inline
La grande différence entre les deux se trouve dans leur style d'affichage pré-défini.
Les balises block génèrent automatiquement un retour de ligne (ENTER) avant et après le bloc qu'elles définissent. De plus, ces balises s'étireront sur toute la largeur de l'espace disponible.
Quelques balises block vues jusqu'à maintenant : <p> <hr> <ol> <ul> ...
Les balises dites inline sont des balises qui permettent de définir des éléments s'insérant dans le contenu de la page sans retour de ligne. De plus, ces éléments ne prennent que la largeur nécessaire pour l'affichage de leur contenu.
Quelques balises inline vues jusqu'à maintenant : <a> <img> <br> <span> ...
Ainsi, les balises ont généralement déjà des éléments de style pré-définis. Il sera tout de même possible de modifier ces styles à l'aide du CSS.