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

HTML: notions de base

Le HTML, qu'est-ce que c'est ?

HTML est le sigle de "Hypertext Markup Language" (ou Hyper Text Markup Language), en français "langage de balisage d'hypertexte", c'est-à-dire un langage utilisant des balises pour structurer un document et permettant, à partir de ce document, à l'aide de liens (appelés hyperliens ou liens hypertexte), de consulter d'autres documents sur Internet (le fameux World Wide Web, ou web, ou "la Toile" en français). Ces documents sont généralement nommés "pages web".

Le langage HTML a connu bien entendu plusieurs versions depuis sa création en 1989. Bien que les versions 4 du HTML aient continué à être majoritairement utilisées par les créateurs de sites, un langage plus strict, le XHTML, est élaboré, de 2000 à 2006, connaissant 2 versions.

En 2008, le XHTML est abandonné et une version du langage, plus complète, voit le jour, le HTML5, la norme aujourd'hui.

La construction d'une page web

Le plan de construction d'une page web est traditionnellement constitué de 2 parties principales:

1. une en-tête appelée "header" dont le contenu, qui ne s'affiche pas sur l'écran, renferme des informations utiles au navigateur (logiciel qui vous permet d'accéder à l'internet et de vous déplacer de page web en page web). Les navigateurs les plus connus sont Internet explorer, Netscape, Firefox, Opera, Google Chrome, Safari ...
2. un corps appelé "body" contenant tout ce qui va s'afficher à l'écran.

Se préparer à construire une page web

Lancez PSPad en cliquant double sur l'icone de raccourci ou par le menu Démarrer. Avant toute chose, faîtes un clic droit sur l'onglet "Nouveau1.txt" et cliquez sur "Fermer". Cliquez en haut à gauche sur "Fichier" puis sur "Nouveau". Cliquez sur "HTML" puis sur "OK". Sélectionnez tout le texte dans la fenêtre de saisie et supprimez-le. Cliquez de nouveau sur "Fichier" puis sur "Enregistrer sous". Recherchez le dossier "www" de "Wamp" en cliquant sur "C" dans la colonne de gauche puis double clic sur "wamp" dans la colonne de droite puis double clic sur "www": dans "Nom du fichier" sélectionnez "Nouveau1.html", supprimez-le et tapez à la place "index.html" puis cliquez sur "Enregistrer".

Lancez maintenant "Wamp" en cliquant double sur son icone de raccourci. Cliquez "Oui" dans la fenêtre qui s'ouvre. Quand l'icone dans la barre des taches en bas de la page est devenue verte, cliquez dessus puis cliquez sur "www directory". Dans la page qui s'est ouverte, cliquez double sur "index.html". A ce stade, la page qui va s'afficher est entièrement blanche.

Quand votre page est ouverte dans "Wamp", à chaque fois que vous aurez ajouté du code dans votre fichier avec PSPad et que vous aurez enregistré les modifications, il vous suffira d'actualiser la page dans "Wamp" en pressant la touche "F5" sur votre clavier.

Les balises

Présentation

Les balises sont des mots-clé qui, pour être distingués et interprétés par votre navigateur, sont encadrés par les chevrons < et > (ouvrant et fermant): par exemple la balise <p>  annonçant le début d'un paragraphe.

Pour indiquer la fin de ce paragraphe, il faudra réutiliser la même balise, mais dans sa version fermante </p> (le slash placé avant le mot-clé indique la fermeture).

Le navigateur lit et interprète les balises dans l'ordre et l'une après l'autre à partir du haut à gauche du code de votre page jusqu'au bas à droite et affiche le contenu de votre page à l'écran en fonction du résultat de l'ordre dans lequel les balises ont été disposées dans le code.

La première règle est qu'une balise ouverte doit toujours être refermée.

Nous verrons plus loin que quelques balises bénéficient d'une simplification d'usage, notamment la balise <p> qui peut s'écrire <p /> à l'ouverture du paragraphe et qui ne se refermera que lorsqu'une nouvelle balise sera rencontrée (on dit que ces balises sont auto-fermantes).

La deuxième règle est que les balises sont toujours écrites en minuscules.

Ce ne fut pas toujours le cas mais c'est la règle aujourd'hui. Une seule exception à cette règle, la balise <!DOCTYPE> (le doctype n'est pas à vraiment parler une balise HTML mais une indication donnée au navigateur sur la façon dont il doit interpréter le code en fonction de la version du langage HTML). Elle se place en tout début de page. Le doctype pour HTML5 est  <!DOCTYPE html>.

La troisième règle est que, en cas d'emboîtement de balises les unes dans les autres, elles doivent être refermées dans l'ordre inverse de leur ouverture.
exemples:
<balise 1> <balise 2> <balise 3> .... bla bla bla .... </balise 3> </balise 2> </balise 1>
<balise 1> .... bla bla bla .... <balise 2> .... bla bla bla .... </balise 2> <balise 3> .... bla bla bla .... </balise 3> </balise 1>

Les balises dites de premier niveau

Immédiatement après le doctype, on place la balise <html> pour marquer le début d'une page HTML. La balise fermante </html> sera placée tout en bas du code pour indiquer la fin de la page web.

Après la balise <html>, on place l'en-tête de la page web en insérant la balise <head>. La fin de l'en-tête sera ensuite indiquée par la balise fermante </head>.

Après l'en-tête, le corps de la page débutera avec la balise <body> et se terminera avec la balise fermante </body> (qui sera immédiatement suivie par la balise </html>), comme ci-dessous.

Cliquez sur l'image pour l'agrandir

Pour l'instant, si on tente de l'ouvrir dans le serveur local, on n'obtient qu'une page blanche.

Comment se servir de PSPad et de Wamp

1. Ouvrez PSPad comme je vous l'ai indiqué précédemment. Sur la page qui s'affiche, cliquez droit sur l'onglet "Nouveau.txt" → Fermer" puis cliquez sur Fichier → Nouveau → HTML → OK. Cliquez ensuite Fichier → Enregistrer sous. Dans la fenêtre qui s'affiche (c'est l'explorateur Windows) recherchez le dossier www situé dans wamp. Ouvrez-le en cliquant double dessus et tapez index.html à la place de Nouveau.html puis Enregistrer. Remplacez la ligne du DOCTYPE par <!DOCTYPE html> puis tapez un nom pour votre page entre les balises "title" puis cliquez sur Enregistrer.


2. Lancez wamp comme indiqué précédemment. Pour ouvrir la page "index.html" que nous venons de créer,
   
   • soit vous lancez votre navigateur (Google Chrome, Firefox, Internet Explorer, etc) et vous tapez dans la barre d'adresse "http://127.0.0.1/index.html" soit "http://localhost/index.html" et vous ajoutez votre page dans vos Favoris pour la retrouver facilement sans avoir à retaper son adresse,
   • soit vous cliquez sur l'icône verte de wamp dans la barre des tâches (en bas de la page près de l'horloge) puis vous cliquez sur "Répertoire www" puis vous cliquez double sur "index.html". Même chose pour les Favoris. La page qui s'ouvre doit être entièrement blanche.

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

<<<     HTML - Avant de commencer

Introduction à l'informatique

1962: le, mot "INFORMATIQUE" est créé en France par contraction de "information automatique". C'était il y a à peine plus d'un demi-siècle !

Pourtant, les premières machines correspondant au terme ordinateur (du latin "ordinator", qui met de l'ordre, ordonnateur), que l'on appelle aujourd'hui "les monstres" pour leur volume démesuré et leur très faible puissance, étaient apparues en 1949 ... Ceux que ça intéresse peuvent consulter ce très bon document sur l'histoire de l'informatique.

Le but de l'informatique était donc de faire exécuter à une machine un travail réalisé jusqu'alors à l'aide du cerveau humain: calculs, classement (alphabétique ou numérique), tri sur un ou plusieurs critères, etc ...

Pour exécuter ces travaux, l'ordinateur, utilisant le courant électrique, ne connaît qu'un seul langage (si l'on peut dire), appelé "langage binaire". On a symbolisé ce langage par les chiffres 0 et 1 qui correspondent en fait pour la machine à une tension haute de 5 volts (1) et à une tension basse de 0 volt (0) d'un courant électrique appliquée aux bornes d'entrée d'un ensemble de transistors. Pour faire un parallèle, il s'agit d'un état à 2 statuts possibles: "vrai / faux" en logique, "marche / arrêt" en mécanique, "ouverte / fermée" pour une porte, etc ...

Il serait trop long ici de rentrer dans le détail du fonctionnement de ces assemblages de transistors ou de celui du "processeur" (cerveau de l'ordinateur en quelque sorte), je vous conseille, si ça vous intéresse, de consulter cette page.

Le principe de fonctionnement d'un ordinateur est le suivant:

• quand vous lancez un programme Un programme informatique est un ensemble d'opérations qu'un ordinateur doit exécuter à la demande.
  Il est constitué d'instructions écrites dans un langage informatique et fait partie d'un ensemble
  cohérent appelé "logiciel" ou "application", ensemble destiné à rendre un service défini. , le processeur va le chercher sur le disque dur et le charge dans sa mémoire vive appelée RAM (plus facile et plus rapide d'accès que le disque dur, la RAM est constituée de barrettes),
• il analyse ensuite les instructions que vous lui donnez au moyen d'une ligne de commande ou d'un formulaire (ce sont les rectangles dans lesquels vous saisissez des instructions avec votre clavier) et (ou) de boutons divers pour faire exécuter ces instructions et (ou) à l'aide des listes déroulantes des différents menus (Fichier, Edition, etc),
• il effectue les opérations demandées, stocke les résultats dans sa RAM et les affiche à l'écran.

Nota:
si vous n'enregistrez pas le travail que vous venez d'effectuer dans un fichier sur le disque dur, votre travail est perdu lorsque vous éteignez votre ordinateur.

Les langages de l'ordinateur

1. Le langage machine

La plus petite information que la machine puisse traiter est appelée "bit" (pour Binary digit, "chiffre binaire" en français) et se matérialise soit par 0, soit par 1. Ainsi:

• avec un bit, on peut avoir 2 états (ou possibilités) différents: 0 ou 1.
• avec 2 bits, on peut avoir 4 états (ou possibilités) différents: 00, 01, 10, 11 soit 2² (2 puissance 2, 2 exposant 2, 2 au carré ou 2*2).
• avec 3 bits, on peut avoir 8 états (ou possibilités) différents: 000, 001, 010, 011, 100, 101, 110, 111 soit 2³ (2 au cube ou 2*2*2).
• etc .... jusqu'à
• avec 8 bits, on peut avoir 256 états (ou possibilités) différents: 00000001, 00000010, 00000011, 00000100, 00000101, 00000110, 00000111, 00001000, 00001001, 000001010, etc .... 11111111 soit 2⁸ (ou 2*2*2*2*2*2*2*2).

Ces 8 bits représentent ce que l'on appelle un octet, la plus petite unité informatique. Coder sur 8 bits signifie donc que l'on peut coder 256 caractères différents. Si cela a suffi sur les premiers ordinateurs pour coder l'alphabet, les chiffres, les couleurs de base et les principaux caractères spéciaux, elle a très rapidement atteint ses limites devant le codage de plusieurs langues à la fois et surtout avec le codage des couleurs (aujourd'hui des millions de nuances codées) !

On a rapidement codé sur 2 octets (soit 16 bits), puis sur 4 octets (32 bits), aujourd'hui sur 8 octets (soit 64 bits). Coder sur 32 bits procurait déjà 4 294 967 296 (4 milliards 294 millions 967 mille 296) possibilités ! Coder sur 64 bits en permet 18 446 744 073 709 551 616 !!!    (je ne sais même pas lire ce nombre !)

2. Le langage assembleur (langage dit de bas niveau)

Ecrire un programme en langage binaire (donc directement compréhensible par un ordinateur), en plus d'être obscur, est impensable à réaliser par un humain. C'est la raison pour laquelle le "langage assembleur" a été inventé afin d'écrire des instructions simples dans une langue intermédiaire entre le langage de l'homme et celui de la machine. Pour pouvoir être ensuite utilisé par la machine, il était traduit en langage machine par un programme appelé "assembleur".

La programmation en langage assembleur était toutefois longue et laborieuse et entraînait de ce fait un coût très élevé: chaque instruction donnée à la machine nécessitait d'innombrables lignes de code ... En outre, il existait autant de langages assembleur qu'il existait de processeurs différents ! Un casse-tête pour les programmeurs entraînant de plus de nombreuses erreurs ... (se faire une idée du langage assembleur)

C'est pourquoi des langages évolués (dits de haut niveau) ont été créés pour faciliter la programmation des ordinateurs, plus évocateurs les uns que les autres pour les concepteurs de logiciels: le COBOL, le FORTRAN, le Perl ... d'autres plus récents: le C, le C++, le Java ...

Plus loin avec les bits et les octets

Nous avons vu que le bit est la plus petite information que l'ordinateur peur manipuler. Mais pour que l'information prenne un sens, il faut réunir plusieurs bits entre eux au sein d'une unité, l'octet, composé de 8 bits.

L'octet est donc la plus petite unité de codage mais aussi de stockage, contenant 1 caractère. Ainsi un fichier contenant 300 caractères nécessite 300 octets de mémoire, on dit aussi qu'il pèse 300 octets. Bien évidemment, 300 octets, ça représente à peu près 4 lignes de texte d'une feuille A4. Le premier problème que l'informatique a rencontré, c'est l'insuffisance de place pour la mémoire.

Avec l'évolution des technologies et la miniaturisation, les supports ont offert de plus en plus d'espace de stockage, se mesurant en kilooctets (ko), mégaoctets (Mo), gigaoctets (Go), téraoctets (To), voire en pétaoctets Po), en exaoctets (Eo), en zettaoctets (Zo) et en yottaoctets (Yo) ... mais jusqu'où iront-ils ?

Attention, dans le système décimal, kilo = 1000 (1 kilomètre = 1000 mètres), en informatique, il en va autrement:

• 1 kilooctet (ko) = 1 024 octets, soit 2¹⁰ octets,
• 1 megaoctet (Mo) = 1 024 ko, soit 1 048 576 octets (1 million 48 mille 576 octets),
• 1 gigaoctet (Go) = 1 024 Mo, soit 1 073 741 824 octets (1 milliard 73 millions 741 mille 824 octets)
• 1 teraoctet (To) = 1 024 Go, soit 1 099 511 627 776 octets (1 billion 99 milliards 511 million 627 mille 776 octets),
• 1 petaoctet (Po) = 1 024 To, soit 1 125 899 906 842 624 octets (1 trillion 125 billions 899 milliards 906 millions 842 mille 624 octets),
à partir de là je vous laisse faire le calcul !!!
• 1 exaoctet (Eo) = 1024 Po,
• 1 zettaoctet (Zo) = 1 024 Eo,
• 1 yottaoctet (Yo) = 1 024 Zo.

Nota:
1 milliard = 1 000 millions,
1 billion = 1 000 milliards (ou 1 million de millions),
1 trillion = 1 000 billions (ou 1 milliard de milliards),

Ça donne le tournis, non ?

Eviter les confusions

1. Les multiples de l'octet

Les préfixes "kilo", "mega", "giga", etc ... désignent des puissances de 10:

• kilo associé à une unité multiplie cette unité par 1 000* (kilogramme, kilomètre, kilocalorie ...) soit 10³,
• mega multiplie l'unité par 1 000 000 (1 million) soit 10⁶,
• giga multiplie l'unité par 1 000 000 000 (1 milliard) soit 10⁹
• et ainsi de suite ...

* et non par 1 024, ce qui crée une confusion pour les non initiés.

Aussi a-t-on modifié, pour le domaine informatique où les quantités ne sont pas représentées par des puissances de 10 mais par des puissances de 2 (langage binaire oblige), le nom des multiplicateurs comme suit: kibi (au lieu de kilo), mébi (au lieu de mega), gibi (au lieu de giga), tébi (au lieu de tera), pébi (au lieu de peta), exbi (au lieu de exa), zébi (au lieu de zetta) et yébi (au lieu de yotta).

• 1 024 octets forment un kibioctet (Kio) ................. soit 2¹⁰ octets,
• 1 024 kibioctets forment un mébioctet (Mio) ........ soit 2²⁰ octets,
• 1 024 mébioctets forment un gibioctet (Gio) ........ soit 2³⁰ octets,
• 1 024 gibioctets forment un tébioctet (Tio) ........... soit 2⁴⁰ octets,
• 1 024 tébioctets forment un pébioctet (Pio) .......... soit 2⁵⁰ octets,
• 1 024 pébioctets forment un exbioctet (Eio) ......... soit 2⁶⁰ octets,
• 1 024 exbioctets forment un zébioctet (Zio) ......... soit 2⁷⁰ octets,
• 1 024 zébioctets forment un yobioctet (Yio) ......... soit 2⁸⁰ octets.

Nous serons amenés à rencontrer ces termes dans les caractéristiques des appareils contenant de la mémoire (ordinateurs, tablettes, smartphones, etc), autant les connaître et ne pas se retrouver désemparés: les termes changent, les quantités ou les performances restent les mêmes.

2. Le byte ou l'exception anglaise

On a coutume de dire, nous Français, que nos amis Anglais ne font jamais comme les autres (ne disent-ils pas "une bleue voiture" ? ne mesurent-ils pas en pouces, en pieds, etc ?). Pour les unités informatiques, il en va de même ...

Si le bit reste la plus petite information manipulable par la machine, la plus petite unité s'appelle chez eux le byte. Oui me direz-vous ? Oui mais voilà, le byte anglais contient 6, 7, 8 ou 9 bits ! Bon, les choses semblent vouloir s'harmoniser et le byte (symbole B) est maintenant l'équivalent de l'octet et vaut 8 bits, le kilobyte (KB) 1024 bytes (ou octets), ainsi de suite ... Il est donc communément admis maintenant que les capacités en bytes sont les mêmes qu'en octets.

Il demeure toutefois une confusion tenace entre le kilobyte (KB) et le kilobit (Kb), dûe à la consonance de ces 2 mots. Pour rappel:

• 1 kilobyte (KB) = 1 kilooctet (ko) (ou plutôt 1 kibioctet (Kio)) = 1 024 bytes = 1 024 octets,
• 1 kilobit (Kb) = 1 024 bits = 128 octets (1024 bits divisé par 8 bits par octet) ,
• 1 kilobyte (KB) = 1 kibioctet (Kio) = 8 kilobits (Kb) (1 024 bits divisé par 128 (nombre d'octets dans un kilobit)).

Il faut donc se souvenir que le symbole du kilobyte est KB (B en majuscule) et que celui du kilobit est Kb (b en minuscule).

Introduction aux langages de programmation

Il est difficile de dire exactement combien de langues différentes sont parlées sur notre planète ... Probablement entre 3 000 et 7 000 ... Les spécialistes sont majoritairement d'accord sur un nombre avoisinant 6 000. On aurait pu croire qu'en informatique, discipline récente, on ne rencontrerait que quelques langages ... que nenni !!!    Vous pouvez vous en faire une petite idée sur cette page ...

Rassurez-vous, vous n'allez pas être obligés d'apprendre tous ces langages ... même si vous envisagez une carrière dans ce domaine ... enfin , pas tout de suite ...(boh! ... je plaisante) ...

Vous retiendrez simplement qu'il existe des langages de programmation généralistes, des langages de définition de données, des langages de requête et des langages de balisage. Les langages les plus utilisés sont sensiblement ceux considérés comme les meilleurs et se comptent sur les doigts de 2 mains:

1. le Java arrive en tête,
2. le C,
3. le C++,
4. le Python,
5. le C#,
6. le PHP,
7. le Ruby,
8. le Javascript,
9. le SQL,
10. le Matlab.

Pour une description plus complète de ces langages, voir ici ou encore là.

Pour ma part, mes choix, en fonction de ce que je voulais réaliser, se sont portés tout d'abord sur le HTML/CSS, le Javascript, le PHP et le SQL pour les sites web, et sur le C++ pour concevoir des logiciels (de gestion de caisse dans mon cas).

C'est donc de ces langages que je vais vous parler exclusivement dans les pages suivantes.

le HTML - Prérequis    >>>

<<<     Langages informatiques: préambule