CSS: ID et classes

Nous avons vu dans la page précédente comment appliquer un style à une balise X afin de l'avoir à disposition dans tout le site, dans une seule page ou dans une seule balise X. Toutefois,

• quand on veut appliquer un style légèrement ou complètement différent à cette balise X, il faut redéfinir le style de cette balise chaque fois,
• si on veut appliquer le style de la balise X à une balise Y et à une balise Z, il faut définir ce style pour la balise Y et pour la balise Z également.
• si on ne veut pas appliquer un style prédéfini pour une balise X à toutes les balises X, il faut redéfinir le style dans chaque balise X où l'on ne veut pas appliquer le style prédéfini.

La solution: les classes !

La démarche consiste à affecter un style à une classe et à appliquer ensuite cette classe à toute balise que l'on désire styliser avec les éléments de cette classe.

Pour mieux comprendre, rien ne vaut un exemple:

1. modifiez mes_styles.css comme ci-dessous puis Fichier → Enregistrer.


Cliquez sur l'image pour l'agrandir



2. modifiez test.html comme ci-dessous puis Fichier → Enregistrer.


Cliquez sur l'image pour l'agrandir



3. ouvrez test.html dans Wamp, ce qui donne:


Cliquez sur l'image pour l'agrandir

Si vous désirez modifier un ou plusieurs éléments d'une classe pour une page ou pour une balise en particulier, vous pouvez tout à fait le faire en redéfinissant la classe dans l'en-tête de la page (entre les balises <style> et </style>) ou dans la balise elle-même (grâce à l'attribut style=" ").

Si vous avez la curiosité de visionner la page "index.html" (appelée généralement page d'accueil), vous constaterez que le paragraphe a repris toutes les valeurs par défaut, la balise <p> n'étant plus stylisée dans la feuille de styles.

Cliquez sur l'image pour l'agrandir

L'ID: Identification d'une balise avant tout

Donner une ID à une balise dans une page web, c'est distinguer cette balise de façon unique, ce qui sous-entend que cette identification unique ne peut se déclarer qu'à l'intérieur de cette balise (le style applicable à une balise possédant cette ID peut par contre être défini dans la feuille de styles ou dans l'en-tête de la page).

S'il est fortement conseillé que la même ID ne soit présente qu'une fois par page pour des raisons que nous verrons plus loin, elle peut tout à fait être affectée à une balise (ayant de préférence le même usage pour garder une meilleure cohésion) d'une ou plusieurs autres pages, pourvu qu'elle ne soit présente qu'une fois par page.

Nous allons prendre un exemple:

1. Tout d'abord nous allons ouvrir "test.html" dans PSPad et insérer le code suivant:
   
   
   Cliquez sur l'image pour l'agrandir
   


2. puis nous ouvrons "mes-styles.css" pour y définir les propriétés applicables au(x) contenant(s) dont l'ID est "coordonnées", comme ci-dessous:
   
   
   Cliquez sur l'image pour l'agrandir
   


3. ce qui donne dans Wamp:
   
   
   Cliquez sur l'image pour l'agrandir
   

Nous allons voir maintenant l'usage principal qui est fait des ID (identification unique sur la page je rappelle). Mais pour cela nous devrons recourir à un langage particulier, le Javascript, qui va permettre d'effectuer des actions sur les éléments d'une page par la mise en oeuvre de fonctions dédiées. Vous pourrez, si vous le désirez, apprendre les rudiments de ce langage à part du HTML/CSS sur ce blog dès que j'aurai eu le temps de le réaliser. Pour l'instant nous utiliserons du code sans l'expliciter.

1. La première étape va consister à créer un fichier "mon_fichier_de_scripts.js" pour y regrouper différentes fonctions. Pour ce faire, nous ouvrons PSPad: cliquez Fichier → Nouveau → Javascript → OK. Dans la fenêtre qui s'ouvre (// JavaScript Document), cliquez Fichier → Enregistrer sous. Vérifiez que vous êtes bien dans Wamp / www et tapez "mon_fichier_de_scripts.js" à la place de "Nouveau.js" puis sur Enregtistrer. Reportez ensuite le code tel qu'il est transcrit ci-dessous puis cliquez Fichier → Enregistrer.
   
   
   Cliquez sur l'image pour l'agrandir
   


2. La deuxième étape consiste à implanter le code nécessaire sur la page "indexhtml" afin de faire apparaître sur cette page le bloc "coordonnees" au survol du curseur de la souris sur un élément de la page (j'ai choisi ici la phrase "Afficher les coordonnées"). Ouvrez donc "index.html" dans PSPad et rajoutez le code ci-dessous (prenez garde à bien retranscrire les simples quotes (') et les doubles quotes (") tels qu'ils sont, sinon le code ne serait pas interprété par JavaScript). Puis cliquez Fichier → Enregistrer.
   
   
   Cliquez sur l'image pour l'agrandir
   



3. Ce qui donne dans Wamp:
   
   
   Cliquez sur l'image pour l'agrandir
   

A partir de maintenant, les bases du CSS étant posées, HTML et CSS seront traités conjointement dans la même page.

Balises de structuration des pages    >>>

<<<     HTML/CSS: un couple réussi

HTML/CSS: un couple réussi

Le langage HTML avant

Nous venons de voir les premières balises permettant de construire des pages web. Par défaut, les balises conteneur de type block se déploient sur toute la largeur de la page et prennent la hauteur de leur contenu. Le premier bloc se situe en haut de la page et les blocs suivants "s'empilent" dessous.

Leur contenu s'affiche par défaut ligne par ligne, du haut du bloc à gauche au bas du bloc à droite. Dans le cas de texte, sa taille par défaut est celle que vous utilisez dans votre navigateur et sa couleur est noire. Aussi, pour permettre une mise en page des blocs et de leur contenu, les concepteurs du langage ont dans un premier temps mis à disposition un certain nombre d'attributs que l'on insérait dans la balise d'ouverture du bloc de la façon suivante:

• pour donner à celui-ci une largeur de 600pixels: <div width="600px">
• pour lui donner une hauteur de 400 pixels: <div height="400px>
• pour centrer un bloc moins large que la page: <div align="center">
• pour center le texte à l'intérieur d'un paragraphe: <p text-align="center">
• pour donner au texte la couleur bleue: <div font-color="blue">
• pour donner au texte du paragraphe une taille de 20 pixels: <p font-size="20px">

et ainsi de suite de très nombreuses propriétés spécifiques applicables aux balises HTML.

Le gros problème de cette procédure était qu'il fallait renseigner chaque balise avec les attributs désirés, ce qui était fastidieux, d'une part lors de la saisie, d'autre part pour rechercher dans le code une erreur de frappe éventuelle ou tout simplement pour effectuer une modification !

Et ... Et ... le CSS est arrivé ! sans se presser ...

Cascading Style Sheets (Feuilles de styles en cascades) ou CSS, une idée géniale !: définir à l'avance des styles à appliquer aux balises de 3 façons différentes:

• dans un (ou plusieurs) fichier(s) dédié(s) créé(s) sur le site, portant l'extension ".css" et lié(s) à la page grâce à la balise
  d'en-tête<link> que nous avons vue précédemment,
• dans l'en-tête de la page grâce à la balise <style> </style>,
• directement dans les balises HTML grâce à l'attribut style=" " .

Mais, direz-vous, pourquoi "en cascade" ?

1. Pour comprendre cette appellation, nous allons prendre un exemple. Nous allons d'abord créer une feuille de styles extérieure à la page que nous appellerons tout bêtement "mes_styles.css". Pour cela, nous ouvrons PSPad et nous cliquons Fichier → Nouveau → Cascading Style Sheet → OK. Dans la page qui s'est ouverte, nous cliquons Fichier → Enregistrer sous et nous saisissons "mes_styles.css" à la place de "Nouveau.css" → Enregistrer.

Puis nous définissons un style pour la balise <p> comme suit:

Cliquez sur l'image pour l'agrandir

puis vous cliquez sur Fichier → Enregistrer.

Ce qui, sur notre page "index.html", en codifiant:

Cliquez sur l'image pour l'agrandir

donnera:

Cliquez sur l'image pour l'agrandir

2. Nous décidons maintenant de créer une nouvelle page que nous nommerons "test.html" (Dans PSPad, cliquez Fichier → Nouveau → HTML → Effacez la première ligne pour ne conserver que <!DOCTYPE html> → cliquez Fichier → Enregistrer sous → remplacez "Nouveau.html" par "test.html" → Enregistrer).

Remplissez le reste de cette page comme suit, puis cliquez sur Fichier → Enregistrer:

Cliquez sur l'image pour l'agrandir

Ce qui donne:

Cliquez sur l'image pour l'agrandir

Vous constatez donc que le texte a conservé sa taille et le retrait définis dans la feuille de styles externe, mais qu'il a perdu sa couleur bleue au profit de la couleur rouge définie dans l'en-tête de la page.

3. Nous voulons maintenant que le texte du paragraphe suivant soit de couleur violette et que le retrait de la 1° ligne soit de 150 pixels, rajoutez ceci:

Cliquez sur l'image pour l'agrandir

Ce qui donne:

Cliquez sur l'image pour l'agrandir

Vous constatez que les définitions au sein de la balise <p> sont appliquées au détriment des définitions précédentes. Par contre, la taille du texte définie une seule fois dans la feuille de styles extérieure reste bien la même.

Pour résumer, nous avons appris que:

L'ordre de priorité du style appliqué à une balise est, du dernier au premier: Feuille de styles extérieure / Style déclaré dans l'en-tête de la page / Style déclaré dans la balise même.

En d'autres termes, les éléments définis pour une balise X dans une feuille de styles extérieure s'appliquent à toutes les balises X de toutes les pages du site liées à la feuille de styles extérieure.

Toutefois, si certains éléments sont redéfinis dans l'en-tête d'une page, ils s'appliqueront en priorité dans toutes les balises X de cette page.

Si certains éléments sont redéfinis dans une balise X, ils s'appliqueront en priorité dans cette seule balise X.

CSS: ID et classes    >>>

<<<     HTML: balises génériques

HTML: les balises d'en-tête

Les balises d'en-tête et leurs attributs

Entre la balise <head> et </head> les balises suivantes peuvent être insérées pour renseigner le navigateur:

1. la balise <title> et sa balise fermante </title>, entre lesquelles vous indiquerez le titre de la page, titre qui s'affichera dans l'onglet du navigateur.


2. la balise <meta /> qui est auto-fermante (en fait on parle souvent non de balise "meta" mais de l'élément "meta"): elle fournit des indications au navigateur et surtout aux robots, indications qui servent principalement au référencement sur internet, le référencement consiste à améliorer le positionnement
   et la visibilité des sites dans des pages de résultats des moteurs de
   recherche et des annuaires. Mieux un site est référencé par le moteur
   de recherche, plus il aura des chances d'apparaître dans les premières
   pages des résultats d'une requête. par les moteurs de recherche (Google, Yahoo, Bing, Ask, Exalead, etc) :
   • l'attribut charset représente la déclaration du jeu de caractères utilisés dans la page web. De nombreuses valeurs sont possibles, selon la langue dans laquelle la page est écrite: en occident, la norme préconisée est "utf-8" (en ce qui me concerne, ayant eu trop de problèmes d'affichage avec le jeu "utf-8", j'ai utilisé le jeu "iso-8859-1" qui reproduit très bien les caractères accentués français). La déclaration se fait ainsi (avec HTML5): <meta charset="utf-8" /> (ou <meta charset="iso-8859-1" />).
     Conseil : mettez cette ligne de code avant la balise <title> pour que le titre de la page s'affiche dans l'onglet du navigateur comme le texte dans le corps de la page.
   
   
   • l'attribut name il est utilisé conjointement avec l'attribut content et vous permet de donner des indications aux navigateurs et aux robots d'indexation qui parcourent le web, notamment:
     • un résumé du contenu de votre page (200 caractères maximum) sous forme d'une phrase contenant des mots-clé qui reflètent son contenu sous la forme: <meta name="description" content="cette page présente des notions de base du langage HTML, particulièrement le bon usage des balises" />.
       Conseil: cette balise est très importante pour le référencement de votre site par les robots d'indexation.
     
     
     • des mots-clé séparés par des virgules correspondants à ce qui est traité dans la page, sous la forme: <meta name="keywords" content="langage, langages, informatique, HTML, balise, balises, charset, title, meta, name, doctype" />.
       Conseil: bien que considérée comme désuète et inutile, vu qu'on ne sait pas trop si les robots lisent encore ou non leur contenu, ce n'est pas forcément du temps perdu de la renseigner.
     
     
     • (non obligatoire) le nom de l'éditeur utilisé pour créer la page (généralement l'éditeur insère automatiquement cette ligne) sous la forme <meta name="generator" content="PSPad editor, www.pspad.com" /> (sur mes pages que j'ai codé avec QSPad Editor).
     
     
     • (non obligatoire) le nom de l'auteur de la page, en l'occurrence le vôtre, sous la forme <meta name="author" content="Jean Dupont" >.
     
     
     • (non obligatoire) le nom du propriétaire du site sous la forme <meta name="owner" content="Jean Dupont" > .
     
     
     • (non obligatoire) l'adresse email de l'auteur du site sous la forme <meta name="reply-to" content="jdupont@sonsite.fr" >.
     
     
     • (non obligatoire) des instructions aux robots sous la forme <meta name="robots" content="index (indexer la page) ou noindex (ne pas indexer) et-ou follow (suivre les liens de la page) et-ou nofollow (ne pas suivre les liens)" />.
     
     
     • (non obligatoire) si un copyright est appliqué sous la forme <meta name="copyright" content="Tous droits réservés ou CC BY ou CC BY-SA etc ... (voir ici)" /> .

Ci-dessous un exemple de codage des balises d'en-tête (cliquez sur l'image pour l'agrandir)

D'autres mots-clé existent pour l'attribut name mais ne sont pas d'une grande utilité. Vous pourrez toujours vous en faire une idée en faisant une recherche sur internet.

Toujours dans l'en-tête, entre les balises <head> et </head>, se placent encore les balises suivantes:

1. la balise <link>, balise auto-fermante, est destinée à définir l'emplacement d'un fichier (ressource) pour le rendre accessible dans la page où elle est déclarée. Bien qu'elle puisse être utilisée à d'autres fins, elle est principalement utilisée pour lier une feuille de styles afin que les styles définis dans cette feuille soient appliqués aux éléments de la page. Elle est utilisée conjointement avec des propriétés telles que:
   • (obligatoire) rel qui établit la relation entre le document présent et le document ressource, dans le cas de la feuille de styles: rel="stylesheet",
   
   
   • (obligatoire) type qui précise ce que l'on appelle le type-mime de la ressource, dans le cas de la feuille de styles: type="text/css",
   
   
   • (obligatoire) href qui indique l'url (adresse) de la feuille de styles: href="ma_feuille_de_styles.css" ou, si les 2 documents ne se trouvent pas au même niveau dans l'arborescence du site: href="http://mon_site/ma_feuille_de_styles.css" ou encore href="../ma_feuille_de_styles.css" ou encore, si le fichier ressource se trouve sur un autre site: href="http://site_extérieur/ma_feuille_de_styles.css"
   
   
   • (non obligatoire) media (peu utilisée) qui indique à qui sont destinés les styles de la feuille de styles liée: écran, imprimante, à tous les médias (valeur par défaut), par exemple media="screen".


2. la balise <style>, avec sa balise fermante </style> qui permet de définir des styles à appliquer sur la page, en complément ou à la place d'une feuille de styles. Nous n'entrerons pas dans les détails de définition des styles pour l'instant, nous le ferons quand nous étudierons le CSS. Retenez simplement que cette possibilité existe de définir des styles à appliquer à la page dans le header de cette page.


3. la balise <script>, avec sa balise fermante </script> qui permet soit de lier la page avec un fichier javascript (le javascript est un langage dit de scripts permettant entre autres de rendre des pages web interactives avec le visiteur de ces pages au moyen de fonctions exécutées dans la page web à la demande du visiteur), soit de définir dans l'en-tête de la page des fonctions javascript qui seront appelées dans le corps de la page. Nous approfondirons le détail de cette balise quand nous étudierons le langage javascript, retenez simplement que la place de cette balise se situe obligatoirement entre les balises d'en-tête de la page.

Nous en avons maintenant fini avec les balises du header

Voilà donc où nous en sommes (cliquez sur l'image pour l'agrandir)

HTML: balises génériques    >>>

<<<     HTML: notions de base

Télécharger Wamp

Afin de visualiser le rendu de vos pages, il faut absolument que vous ayez à disposition sur votre ordinateur un serveur local qui va jouer le même rôle que le serveur de l'hébergeur de votre site sur internet. Nous allons donc procéder au téléchargement d'un logiciel en français destiné à cet usage, en cliquant sur le lien suivant: Wamp Server.

Une fois sur la page d'accueil, cliquez sur "Télécharger".

Tout en bas de la page à gauche apparaît un petit rectangle gris dans lequel on peut lire sur la première ligne "wamp-server.wamp...exe" et les informations relatives au téléchargement sur la deuxième ligne.

Lorsque le téléchargement est terminé, cliquez sur ce rectangle, la fenêtre "Fichier ouvert - Avertissement de sécurité" va s'ouvrir au centre de la page, comme ci-dessous:

Cliquez sur "Exécuter" → La fenêtre "Contrôle de compte d'utilisateur" va s'ouvrir, cliquez "Oui" → La fenêtre du programme d'installation va s'ouvrir (Setup - WampServer 2).

A partir de là:

1. cliquez sur "Next",
2. cochez "I accept the agreement" et cliquez sur "Next",
3. laissez la destination "C:\wamp" et cliquez sur "Next",
4. cochez les 2 cases et cliquez sur "Next",
5. cliquez sur "Install",
6. cliquez sur "non",
7. laissez la page telle quelle et cliquez sur "Ouvrir",
8. laissez la page suivante telle quelle et cliquez sur "Next",
9. décochez "Launch WampServer now" et cliquez sur "Finish".

Si aucune icone n'a été ajoutée sur votre bureau, faîtes un clic droit sur le bureau → survolez Nouveau → cliquez Raccourci → cliquez sur ... → cliquez sur C: → cliquez sur wamp → cliquez sur wampmanager.exe → tapez "Wamp" dans la zone en bleu → cliquez sur Terminer. Glissez l'icone où vous voulez sur le bureau.

Pour lancer Wamp, cliquez double sur l'icone "Wamp" que vous venez de créer. Une icone rouge apparaît dans la barre des taches près de l'horloge, elle devient ensuite orange. Lorsqu'elle devient verte, le serveur est lancé. Nous verrons plus tard comment afficher vos pages dès que nous en aurons créé une. D'abord, il nous faut télécharger un éditeur (PSPad), en cliquant sur "Retour" puis sur "Télécharger PSPad Editeur".

Retour

Télécharger PSPad Editeur

Télécharger PSPad

Vous pouvez bien entendu faire une recherche sur internet et télécharger le logiciel sur votre plateforme de téléchargement préférée. En ce qui me concerne, je l'ai téléchargé sur le site de PSPad. Vous voici sur la page d'accueil du site:

Cliquez sur "Installer (4,96 MB)", vous accédez alors à la page de téléchargement:

Cliquez sur "Download PSPad Installer". En bas à gauche de la page apparaît un rectangle gris dans lequel est écrit "pspad460_setup.exe" sur la première ligne et des indications concernant l'avancement du téléchargement sur la deuxième ligne.

Lorsque le téléchargement est terminé, cliquez sur ce rectangle, la fenêtre "Fichier ouvert - Avertissement de sécurité s'ouvre":

Cliquez sur "Exécuter". S'ouvre alors la fenêtre nommée "Contrôle de compte d'utilisateur", cliquez sur "Oui". L'Assistant d'installation s'ouvre alors. A partir de là:

1. cliquez sur "Suivant",
2. cochez "Je comprends et j'accepte les termes du contrat de licence" puis cliquez sur "Suivant",
3. laissez l'assistant installer le logiciel dans le dossier indiqué (généralement "Program Files x86") - ou indiquez le dossier de destination de votre choix, puis cliquez sur "Suivant",
4. cliquez encore sur "Suivant",
5. laissez les cases cochées telles qu'elles sont et cliquez sur "Suivant",
6. cliquez sur "Installer",
7. décochez la case "Exécuter PSPad Editor" et cliquez sur "Terminer".

Vous avez la possibilité de télécharger un dictionnaire français (ou dans la langue de votre choix). Pour ce faire, retournez sur la page d'accueil du site (en cliquant sur la flèche gauche de votre navigateur en haut à gauche. Déroulez la page et rendez vous dans la section "Dictionnaires de correction ortographique" et cliquez sur "Français":

En bas à gauche apparaît le petit rectangle gris dans lequel est écrit "fr_dic.cab" sur la première ligne et des indications sur l'état d'avancement du téléchargement sur la deuxième ligne. Lorsque le téléchargement est terminé, cliquez sur ce rectangle → une fenêtre intitulée "Windows" s'ouvre. Le fichier étant un fichier compressé, cochez "Sélectionner un programme dans la liste des programmes installés" puis cliquez sur "OK".

Dans la fenêtre "Ouvrir avec", cherchez un logiciel de décompression (du genre 7-Zip, WinZip, Quick Zip ou Winrar) en cliquant éventuellement sur la flèche "Autres programmes". Au cas où vous n'en trouveriez pas d'installé sur votre ordinateur, téléchargez-en un, ils sont gratuits pour la plupart.

Dans la fenêtre d'extraction de votre logiciel de décompression (7-Zip File Manager chez moi), vous devez avoir un fichier nommé "french.3-0-0...". Sélectionnez le en cliquant dessus et cliquez sur "Extraire".

Dans la fenêtre "Copier" qui s'ouvre, cliquez sur "...", cherchez "C puis cliquez Program Files (x86) → PSPad Editor → Spell" puis cliquez sur "OK", puis sur "OK" dans la fenêtre "Copier". L'installation est maintenant terminée.

Si l'icone de lancement ne se trouve sur le bureau (icone blanche et bleue marquée PSPad), installez-en une comme on a fait avec Wamp. Sinon cliquez sur le menu Démarrer puis sur Tous les programmes puis sur PSPad editor puis de nouveau sur PSPad editor.

Retour

Le langage HTML - Avant de commencer

Avant d'apprendre un langage informatique quel qu'il soit, il est indispensable d'avoir à sa disposition certains outils et avant tout:

Un éditeur: vous en connaissez au moins un: le Bloc notes de Windows auquel on accède par "Démarrer → Tous les programmes → Accessoires → Bloc-notes", qui permet de faire de la codification mais qui ne dispose pas des multiples outils que vous trouverez sur des éditeurs plus élaborés.

Les éditeurs sont de 3 sortes:

1. Les éditeurs de texte:
   ils permettent la saisie au clavier du code dans différents langages (de Java à C++ en passant par le HTML, le PHP, le Javascript, etc...). Quand la codification est faite en HTML, ils permettent souvent une prévisualisation du rendu de la page dans un navigateur. Ils sont légers, rapides à lancer, faciles d'utilisation et disposent de la coloration syntaxique, la numérotation des lignes, etc...


2. Dans le cas du HTML, il existe des éditeurs dits "WYSIWYG"
   pour "What You See Is What You Get" ('Ce Que Vous Voyez Est Ce Que Vous obtenez' en français). Bien que très pratiques (c'est ce qui est proposé chez la majorité des hébergeurs de sites pour créer un site "en quelques clics"), d'une part vous ne pourrez donner à votre site qu'un nombre limité de "looks", d'autre part, en cas de bug, si vous n'avez aucune notion du langage, vous ne serez pas en mesure de corriger les erreurs dans le code, d'où l'intérêt d'un éditeur de texte.


3. Les éditeurs appelés IDE (Integrated Development Environment), EDI (Environnement de Développement Intégré) en français:
   Ce sont des logiciels comprenant un éditeur de texte puissant et des fonctions avancées (dont un compilateur de code par exemple) plus spécifiquement destinées à des programmeurs chevronnés. En outre, pour le langage HTML, qui est un langage interprété par un navigateur internet et non par le processeur de l'ordinateur, un logiciel aussi puissant est complètement inutile.

Dans le cas du HTML, un serveur hors ligne (ou serveur local):
Ce serveur installé sur votre machine vous permettra de naviguer dans votre site en construction exactement comme s'il était hébergé sur le réseau internet. Vous aurez la possibilité de naviguer sur des sites extérieurs à partir de liens hypertextes insérés dans votre "site local", par contre l'internet ne pourra pas accéder à celui-ci.

En ce qui me concerne, j'ai créé mon site avec PSPad (éditeur) et Easyphp (serveur local). Toutefois, pour continuer à travailler sur mon site avec Easyphp, j'ai téléchargé un autre serveur local (Wamp) pour me permettre de vous fournir des captures d'écran du rendu de la codification au fur et à mesure que nous avancerons dans l'étude du langage HTML. Ce sont donc ces 2 logiciels que je vous invite à télécharger et à installer sur votre ordinateur.

Télécharger PSPad Editeur

Télécharger Wamp

HTML: notions de base    >>>

<<<     Introduction à l'informatique

Balises de structuration des pages

Les balises de structuration des pages web

Ce sont des balises qui permettent de disposer à sa convenance des blocs dans la page contenant du texte, des images ou encore des menus.

• La balise <p> </p> ou seulement <p /> est la plus connue.
  C'est une balise signifiant "paragraphe" qui agit un peu comme la balise <div> </div> à la différence qu'elle introduit une ligne vide avant le paragraphe en question et une autre ligne vide à la fin. Le but affiché de cette balise est d'aérer le texte, si on veut condenser, il faut utiliser <div> à la place.


• De nouvelles balises de structuration des pages web sont apparues avec HTML 5:
  
  
  1. La balise <section> </section>:
     c'est une balise destinée à créer des blocs dans la page. Rien de nouveau direz-vous,<div> et <p> sont parfaitement capables de faire cela ! Oui, mais ce sont là des balises "fourre-tout" que l'on emploie depuis des lustres à tous les usages! Avec cette nouvelle balise et quelques autres ci-dessous, HTML 5 a voulu nommer les différentes parties structurantes de la page, ce qui permet, par cette sémantique, de donner plus d'intelligence à une page qui annonce ainsi beaucoup plus clairement ce dont elle parle.
     La balise <section> délimite ainsi une partie de la page traitant d'un même sujet. Cette section peut tout à fait contenir un en-tête, un ou plusieurs articles (ou pas du tout), des blocs contenant des informations complémentaires et un pied (de page section).
  2. La balise <article> </article>:
     bien qu'elle puisse être utilisée au sein d'une section, cette balise est sémantiquement destinée à créer un bloc indépendant dans la page, c'est-à-dire traitant d'un sujet ou d'une information pouvant n'avoir aucun rapport avec le ou les sujets traités dans le reste de la page. Elle peut très bien contenir un en-tête et un pied.
  3. La balise <nav> </nav>:
     c'est une balise dont la vocation sémantique est de regrouper des liens de navigation (en d'autres termes un menu). On l'utilise généralement avec une liste.
  4. La balise <aside> </aside>:
     elle est destinée à recueillir des informations complémentaires non essentielles. Elle peut se trouver dans une section ou dans un article et peut recevoir des balises de titre.
  5. La balise <header> </header>:
     elle a pour but de contenir les éléments d'en-tête d'une page (logo, nom du site, nom de l'entreprise, coordonnées), les éléments d'en-tête d'une section ou encore les éléments d'en-tête d'un article (à ces titres, elle peut recevoir des balises de titre).
  6. La balise <footer> </footer>:
     elle annonce un pied de page où sont généralement regroupés des liens dirigeant vers des informations concernant le site, vers des mentions légales, vers des informations pratiques, etc ... Elle peut également être utilisée dans une section ou dans un article.

Un petit schéma pour clarifier l'utilisation de ces nouvelles balises:






• La balise <hr /> est une balise auto-fermante de type block qui se déploie sur la ligne complète:
  elle sert à insérer une ligne horizontale de séparation entre 2 éléments (2 paragraphes ou 2 sections par exemple). Elle accepte d'être stylisée: longueur du trait (par exemple 50% de la largeur de la page), épaisseur du trait, couleur du trait, positionnement du trait dans la page (à gauche, au centre, à droite, à x^% ou x^pixels du bord gauche ou du bord droit de la page), type de trait (plein, pointillés, segments, etc ) et même afficher un motif à la place !!!

xxxx    >>>

<<<     CSS: ID et classes

HTML: balises génériques

Les balises génériques (ou universelles) sont des balises qui n'ont pas une réelle signification, elles ne servent qu'à contenir quelque chose (du texte, une image, une vidéo, etc ...). Elles sont au nombre de 2 seulement: une balise dite de type block, <div> et une balise dite de type inline, <span> et leurs versions fermantes </div> et </span>.

Les balises de type block sont des contenants (des blocs) qui créent un retour à la ligne lors de leur insertion et qui peuvent contenir autant de lignes que l'on désire, une image, etc ... Les balises de type block créent des contenants qui se répandent sur toute la largeur de la page web. On peut définir, à l'aide du langage CSS (styles), leur taille (largeur, hauteur), leur position dans la page (à gauche, à droite), les marges autour du bloc, les marges à l'intérieur du bloc, la position du contenu (à gauche, à droite, en haut, en bas ), la couleur du fond, la taille et la couleur du texte contenu par le bloc, etc, etc ... Elles possèdent à ce titre un attribut style.

Les balises de type inline créent une forme de blocs particuliers qui ont pour limites la balise ouvrante et la balise fermante. Elles servent essentiellement à mettre en évidence un mot ou une portion de texte présents dans un contenant de type block. Elles ne créent pas de renvoi à la ligne. Elles permettent également de styliser le texte qu'elles encadrent grâce au langage CSS. Elles possèdent à ce titre un attribut style.

Attention: les balises de type inline peuvent être insérées à l'intérieur des blocs, par contre les balises de type block ne peuvent pas être insérés dans les balises inline.

L'une et l'autre (<div> et <span>) possèdent, outre l'attribut style, 2 autres attributs:

• un attribut id:
  cet attribut, très utilisé dans les <div> et très peu dans les <span>, affecte un nom d'identification unique dans la page donné au bloc, par exemple: id="introduction" ou id="12". L'ID peut être utilisée:
  • pour styliser ce bloc d'une façon propre et particulière et aucun autre bloc dans la page,
  • ou servir, à l'aide du langage javascript, à afficher ou masquer ce bloc, ou à y effectuer des transformations (changer la taille, la couleur du texte, changer l'image affichée par une autre, changer la couleur du fond, etc, etc ...)
• un attribut class:
  cet attribut est le nom donné à une classe implémentée dans l'en-tête de la page ou dans une feuille de styles externe contenant un style prédéfini, par exemple class="texte_en_bleu" ou class="fond_vert", etc ...

Un premier exemple en tapant directement une phrase dans le corps de la page:

et le rendu de la page à l'écran:

Vous constatez que la phrase est placée en haut à gauche de la page, c'est la position par défaut. Vous avez dû remarquer dans le code situé dans l'en-tête de page, qu'entre les balises "style", j'ai inséré un élément "p" qui est une balise (que nous verrons plus loin) en lui affectant un style qui donnera au texte inséré entre les balises <p> et </p> une taille de 20 pixels, comme ci-dessous:

Je vais maintenant déplacer mon texte vers le bas et vers la droite, je vais réduire le bloc d'un quart et lui affecter un fond vert clair, mettre une partie du texte en rouge, encadrer "HTML" avec une bordure vert foncé, mettre "BONJOUR" en caractères gras et lui assigner la couleur bleue. (Ne cherchez pas à retenir le langage CSS nous verrons tout ça en temps voulu).

Bon,c'est d'un goût moyen, me direz-vous ! J'ai juste voulu vous montrer ce que le CSS apporte au HTML et l'importance des balises pour structurer à volonté un document.

HTML/CSS: un couple réussi    >>>

<<<     HTML: les balises d'en-tête