Category Archives: Code <>

Code

HTML 5 – Introduction

Vous souhaitez développer un site web ? Vous êtes au bon endroit.

Comment on fait ?

Pour commencer, tout bon travailleur possède de bons outils, on va commencer par là. Il va nous falloir un bon éditeur de code HTML, qui nous mette le code en couleurs. Il en existe plein, cherchez avec un moteur de recherche aux mots clés « IDE HTML », vous en trouverez pléthore. Personnellement j’utiliserais PSPad disponible sur http://www.pspad.com.

Une fois que vous aurez votre IDE (Integrated Development Environment – Environnement de Développement Intégré, IDE en français), vous pourrez aisément créer un fichier HTML.

Sous PSPad, cliquez sur le menu « Fichier » -> « Nouveau fichier », sélectionnez ensuite « HTML multihighlighter » et cliquez sur « OK ».

A l’heure où j’écris ces lignes, PSPad est encore par défaut en HTML 4, seulement ici on n’écrira que du HTML 5, compatible désormais avec tous les navigateurs, en particulier les mobiles.

Supprimez donc tout ([Ctrl]+[A], puis [Suppr.]), on va tout refaire de zéro.

Définition HTML

HTML signifie « HyperText Markup Language ». En français, ça donne « Langage de balisage hypertexte ». Ce n’est pas un langage de programmation à proprement parler, mais plutôt un langage de mise en forme de documents. Dans sa version 5, il possède de très nombreux atouts et permet d’éviter Adobe Flash, si on le combine proprement avec du CSS 3.

Structure de base d’un document HTML

Un document HTML commence toujours par un « doctype », suivit d’une balise « html », d’une entête de document, et d’un corps.

Dans sa version 5, le doctype a été grandement simplifié, aussi, pour définir que l’on sert de l’HTML 5 et non 4 ou autre, on commence le document ainsi :

<!DOCTYPE html>

Et c’est tout! Juste tel que, on définit de l’HTML 5. Avant cela, il fallait ajouter la version HTML utilisée. l’HTML étant pensé pour évoluer dans le temps, il n’y a plus de versioning.

Ensuite, on doit définir les balises « html » :

<html></html>

Une balise dite « ouvrante », et l’autre balise dite « fermante ».

On notera qu’une balise s’écrira toujours de la même façons :

<nombalise>
<nombaliseouverte></nombaliseouverte>

Entre nos 2 balises « html », on doit y placer l’entête, obligatoire :

<head></head>

Puis un corps de document, juste après l’entête :

<body></body>

Ce qui nous donnera au final, si on formate le code et laissons de la place pour la suite :

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
  </body>
</html>
La balise <title>

La balise « title » permet de définir un titre à votre document. Elle se place dans l’entête. Définissons un titre à notre document HTML :

<title>Tutoriel HTML 5</title>

Vous avez remarqué ? On a écrit le titre du document entre les deux balises « title ». Ca sera comme ça pour toutes les balises permettant d’incorporer du texte.

Les attributs

Les balises peuvent comporter des attributs, mais ceux-ci sont aujourd’hui très peu exploité de nos jours, et ont quasiment disparu en HTML 5. Cependant certains restent toujours valide, aussi je vais vous en présenter un pour notre entête.

<meta charset="UTF-8">

Voila, l’attribut « charset » a été défini pour l’entête du document, et on lui a attribué la valeur « UTF-8 ». Dans PSPad, cliquez sur le menu « Format » et sélectionnez « UTF-8 » s’il n’est pas déjà sélectionné. PSPad se chargera de transcoder tout votre document html en utf-8.

En toute logique, la balise meta contenant le jeu de caractères utilisé dans le document devrait être définie avant le titre.

UTF-8 étant un standard à l’heure où j’écris ces lignes, je vous conseille vivement d’écrire toutes vos pages web avec ce jeu de caractères, permettant entre autres, l’utilisation des accents, tout en restant compatible avec le reste du monde (qui a dit « World Wide Web » ?).

Un attribut se place donc dans la balise elle-même, la balise pouvant contenir zéro, un, ou plusieurs attributs, et un attribut peut on non posséder une valeur. S’il possède une valeur, alors on la place entre deux guillemets.

Ca y’est, on a désormais un document valide HTML 5. Il ne reste plus qu’à le remplir un peu. Ecrivons un peu dans le corps du document et voyons ce que ça donne :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Tutoriel HTML 5</title>
  </head>
  <body>
    J'apprends l'HTML 5.
  </body>
</html>

Enregistrez le fichier sous « index.html », puis ouvrez-le avec votre navigateur favori. Pourquoi « index » et pas « tutoriel1 » par exemple ? Pour vous apprendre que quand on appelle une adresse internet en la terminant par un nom de dossier, le serveur web cherche en priorité la page « index.html ». L’entrée d’un site web se fait toujours par l’index, alors va falloir s’y habituer!

Et si on veut de la couleur ?

Eh bien, si on veut mettre un peu de couleur, en HTML 5 il nous faudra obligatoirement passer par une feuille de style, l’attribut « style », ou la balise « style » dans l’entête permettant de définir une feuille de style à l’intérieur même du document html. Seulement l’HTML 5 n’est plus qu’un langage de mise en forme générale du document et descriptif.

Je vous conseille donc d’aller voir du côté du CSS pour en apprendre plus. Je ne traiterais pas des couleurs mais uniquement de la mise en forme et de la partie description.

Quelques balises courantes
<h1> […] <h6>

Les balises <h1>, <h2>, <h3> … jusque <h6> permettent de décrire un titre d’entête à un paragraphe.

<h3>Titre de mon paragraphe</h3>
<p>

La balise <p> permet de décrire un paragraphe. On peut y incorporer une balise <hX> par exemple, ou d’autres balises que je vous montrerais plus tard.

<p>Mon paragraphe</p>
<hr>

Cette balise est une des exceptions html. Elle ne se ferme pas et permet de tracer une ligne horizontale.

<hr>
<div>

La balise <div> permet de créer un bloc brut et de regrouper des éléments en son sein.

<div>
  <h3>Mon titre</h3>
  <p>Mon paragraphe</p>
</div>
<table>, <thead>, <tbody>, <tfoot>, <tr>, <td>, <th>

Ces balises servent à créer des tableaux. <thead> permet de décrire l’entête d’un tableau, <tbody> son corps, et <tfoot> son pied. <tr> sert à créer une nouvelle ligne, <td> quant à elle, permet de créer une cellule. La balise <th> est similaire à la balise <td>, mais sert aux entêtes des tableaux. Si vous avez des données qui nécessitent une représentation de type tableur, ces balises peuvent vous être utile.

La balise <td> peut être accompagnée de l’attribut « colspan » pour spécifier le nombre de cellules qu’elle regroupe. Il existe aussi l’attribut « rowspan » pour regrouper une cellule sur plusieurs lignes.

<table>
  <thead>
    <tr>
      <th>Fruit</th>
      <th>Provenance</th>
      <th>Prix</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Fraise</th>
      <td>Espagne</td>
      <td>1.50€/kg</td>
    </tr>
    <tr>
      <th>Pomme</th>
      <td>France</td>
      <td>1.25€/kg</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">Produits d'Europe uniquement</td>
    </tr>
  </tfoot>
</table>

Certaines de ces balises, telles que <thead> ou <tfoot> sont optionnelles. Cependant, je vous conseille d’utiliser au maximum la bonne sémantique pour être bien compris que ce soit tant au niveau des navigateurs que des moteurs de recherches.

<span>

La balise <span> permet de regrouper des éléments sur une même ligne. Elle peut servir par exemple à coloriser une partie d’un texte ou le formater différemment (italique, gras, souligné, barré …).

<p>Petit paragraphe <span>d'une</span> ligne.</p>
Conclusions

Pour conclure, voila ce qu’il nous faut retenir: HTML est langage descriptif de documents, qui, en version 5, se voit accompagné de feuille(s) de style (CSS) pour la mise en page. Il faut bien différencier HTML et CSS.

J’ai volontairement omis certaines balises, d’une parce que je ne vais pas toutes les mettre, de deux parce que ceci n’est qu’une introduction, et de trois, parce qu’on en verra certaines d’entre elles dans d’autres articles.

Structure d’un programme

Un programme, qu’il soit informatique ou autre, est défini par plusieurs choses :

  1. Des instructions
  2. Des variables
  3. Des opérateurs
  4. Des embranchements conditionnels
  5. Des boucles
  6. Des méthodes

Nous avons déjà un programme simple sous le coude dans mon précédent article, nous allons le reprendre ensemble. Je me cite : « Je souhaites réaliser un programme qui me dit si je suis majeur ou mineur, et qui devra effectuer des actions précises dans les deux cas de figure. ». Reprenons donc mon algorithme :

Début

Demander Age
  Si Age >= 18 Faire ActionMajeur
  Sinon Faire ActionMineur

Fin

Pour commencer, j’ai un début et une fin de programme. Je le rappelle, un programme possède toujours un début et une fin, quel qu’il soit.

Dans ce programme, j’ai besoin d’une variable « Age », qui devra exécuter une action « ActionMajeur » ou « ActionMineur ». J’ai utilisé pour ce faire une condition, et on pourrait imaginer les deux actions comme des méthodes.

Je ne vais pas vous donner d’exemple du programme ici dans un langage précis, cela ne servirait à rien. On va rester très général encore une fois.

1) Les instructions

Suivant la machine, le jeu d’instruction ne sera pas le même. Par exemple, un processeur ARM ne comprend rien à un programme écrit pour un processeur Intel, et un programme Intel ne sera pas non plus compris par un processeur AMD. Il en existe bien d’autres, mais limitons-nous déjà à ces trois fabriquants de micro-processeurs.

Les processeurs ne connaissent que des instructions simple, comme mettre un nombre à un emplacement mémoire, ajouter, soustraire … Cependant, certains processeurs possèdent des instructions un peu plus complexes conçues pour accélérer l’exécution des programmes, comme par exemple l’instruction Intel x86 « CRC » (Cyclic Redundancy Check). On pourrait parfaitement la programmer avec des instructions simples.

Le jeu d’instruction qu’un micro-processeur connaît, encore une fois, dépend de son fabriquant. Les instructions sont codées en binaire au niveau de la machine, et ont une longueur indéterminée. Elles sont généralement codées en octets (un octet étant représenté sur 8 bits). Cependant, inutile d’écrire un programme en binaire, ça ne se fait plus depuis l’invention du premier compilateur, fort heureusement. De plus, les programmes devenant de plus en plus complexes au fils des ans, il est nécessaire aujourd’hui d’avoir un compilateur sachant transcoder notre programme en langage machine.

2) Les variables

On a parfois besoin de variables dans un programme. Par exemple, si on a besoin d’ajouter 2 à un nombre donné par l’utilisateur, il nous sera nécessaire de définir une variable en mémoire, puis de lui ajouter 2. Les variables peuvent avoir une portée globale (visible par tout le programme), ou locale (visible par une portion du programme).

En pratique, il est fortement déconseillé d’utiliser des variables globales, générant plus facilement des bogues, ou, dans le cas de certains programmes, des failles de sécurité.

Plusieurs types de variables existent : les nombres entiers, les nombres à virgule (flottante ou fixe), les chaines de caractères et par extension les caractères (qui eux-mêmes sont représentés par des entiers). Les nombres ont une représentations dite signée (le bit de poids le plus fort sert à savoir si le nombre est positif (0) ou négatif (1)) ou non signée (le nombre étant alors strictement positif ou nul). La machine possède une limite de taille maximum pour une variable, en fonction de son architecture. Par exemple, un processeur 32 bits ne peut supporter que des nombre de 32 bits de longueur – un bit étant représenté par un 0 ou un 1. En conséquences, sur un nombre entier, sa taille maximum peut être calculé de la façon suivante : 2^32. Sa plage de valeurs peut être calculée de la façon suivante :

  • Pour un nombre entier non signé : [ 0 ; 2^32 – 1 ]
  • Pour un nombre entier signé : [ -2^(32-1) ; 2^(32-1) – 1 ]

Note: le caractère « ^ » signifie « exposant ».

La représentation des nombres en mémoire dépend de l’architecture de la machine (ARM, Intel, AMD …) et donc du fabriquant. Le compilateur existe entre autres choses pour nous épargner la tâche de conversion entre les différentes machines.

3) Les opérateurs

Il existe plusieurs catégories d’opérateurs. Les plus courant sont les opérateurs mathématiques : « + » pour additionner, « – » pour soustraire, « * » pour multiplier, et « / » pour diviser. Ils existent dans presque tous les langages de programmation. Il existe aussi dans certains langages un opérateur de concaténation, utilisé pour assembler deux chaines de caractères ensemble.

Nous possédons aussi à notre éventail des opérateurs logiques (AND, OR, XOR), souvent un opérateur de négation (« ! » ou « NOT »), parfois l’ensemble de ces deux catégories, et des opérateurs binaires (AND, OR, XOR, NOT).

Suivant le langage de programmation choisi, ils ne s’écrivent pas de la même façon (le Basic et le C# sont par exemple complètement différent l’un de l’autre sur les opérateurs).

4) Les embranchements conditionnels

On a parfois besoin d’un embranchement conditionnel pour effectuer une tâche en fonction d’un ou plusieurs paramètres. Nous l’avons vu dans mon exemple de programme. Le code à l’intérieur d’une condition n’est exécuté que si la condition est vraie. Si la condition est fausse, on saute à l’instruction de fin de condition. Une condition doit toujours posséder un début et une fin, sinon, risque de bogue ou de faille de sécurité en perspective! Les conditions sont souvent combinées avec des opérateurs logiques.

5) Les boucles

On a parfois besoin de faire une boucle, elle parfois constituée d’une condition d’entrée, et possède presque toujours une condition de sortie. Un conseil, évitez d’écrire des boucles infinies, elles finissent toujours par mal tourner. En pratique, on les évite comme la peste.

Dans les langages de haut niveau, il existe les boucles « Tant que condition … Faire instruction(s) … Fin Tant que », les boucles « Faire instruction(s) … Tant que condition« .

6) Les méthodes

Une méthode est un sous-programme, qui peut posséder zéro, un, ou plusieurs paramètres, qui a la possibilité de retourner un résultat, et qui est appelée par le programme principal.

Suivant le langage de programmation choisi, les méthodes ne s’écrivent pas de la même façon. De plus, tous les processeurs ne permettent pas forcément l’appel à des méthodes. Mais si vous souhaitez programmez en informatique, je vous rassure, tous nos processeurs peuvent faire appel à des méthodes!


Voila pour ce qui est des généralités de la programmation, si j’ai oublié quelque chose, ou si j’ai mal expliqué un point ou deux, merci de me laisser un message, soit en commentaire, soit par email en passant par le formulaire de contact.

Général – Définition et algorithmie

Vous voulez apprendre à programmer ? Vous êtes le bienvenu !

Comment ça marche ?

La programmation, c’est un peu comme une recette de cuisine. Si on compare la programmation informatique avec la cuisine d’un grand restaurant, on pourrait dire que le Chef du dit restaurant programme sa cuisine, et qu’un ordinateur lit la recette.

Un ordinateur, pour fonctionner, à besoin qu’on lui dise quoi faire, et comment le faire. Autant pour l’être humain, ce fonctionnement est inné, mais pour la machine, c’est une toute autre histoire.

On doit dire à notre machine, quelle qu’elle soit (ordinateur, téléphone, tablette, machines de production …) ce qu’elle doit faire. Pour ce faire, on va lui donner une série d’instructions, compatibles avec la machine, et cette dernières les interprètera non pas comme elle le voudrait, mais comme on le lui a dit. Cette série d’instruction sera donnée dans un langage que la machine comprend.

Oui, mais fondamentalement, comment ça marche ?

Il y a deux cas de figures : les langages dit « compilés » (C++, ..), et les langages dit « interprété » (Python …). Nous avons aussi des langages de « haut niveau » (C++, C# …), et des langages de plus « bas niveau » (ASM, …).

Le langage utilisé dépendra avant tout de la machine qui devra comprendre les instructions, mais aussi des besoins – ce qu’on veut lui demander de faire, et des coûts (certains langages de programmation sont payants, ou des interfaces de programmation).

Quelles différences entre langage de haut niveau et langage de bas niveau ?

Plus un langage est dit de bas niveau, plus il est proche du code machine (qui ne fonctionne qu’en binaire, avec des 0 et des 1). En conséquences, il est plus difficile à lire pour un être humain. A l’inverse, plus un langage est dit de haut niveau, et plus il est généralement proche d’une grammaire compréhensible par un humain. L’ASM est le langage de plus bas niveau, ensuite on a par exemple le C et C++ qui sont déjà dit de haut niveau, et pour des langages de plus haut niveau encore, on a le C# avec lequel on peut presque faire des phases.

Quelles différences entre langage interprété et compilé ?

Un langage compilé, est un langage comme un autre, mais qui a besoin d’un compilateur pour fonctionner. Le rôle du compilateur est de transcoder le programme, généralement de haut niveau, en langage machine. Son rôle est donc très important. Un second rôle qui lui a été attribué au fil des ans, est d’optimiser le code machine pour la machine cible, pour que le code puisse être exécuté plus rapidement. Exemples de langages compilés: C++, Java …

Dans le cadre d’un langage interprété, on n’écrit pas du code pour une machine, mais pour un interpréteur. Il n’y a généralement pas d’optimisation du automatique du code, cependant, l’avantage de ce genre de langage est qu’il peut être interprété de la même façon quelle que soit la machine cible, pour peu que la machine cible est l’interpréteur de disponible. Exemples de langages interprétés: PHP, Python …

Description d’un langage de programmation

Un programme, quel qu’il soit contient un point d’entrée. Au plus bas niveau de la machine, c’est la première « ligne » du programme qui sera interprété, puis la seconde, et ainsi de suite. Dans le cadre d’un langage interprété, il en va de même en règle générale. Cependant, dans un langage plus structuré, le point d’entrée est généralement à un endroit précis du programme. Par exemple, par défaut, en langage C, c’est la fonction « main() » qui définit le point d’entrée du programme, et ce sera la première ligne de cette fonction qui sera lue par la machine.

Chaque langage possède sa propre grammaire et sa propre syntaxe. Chaque langage possède aussi des avantages et des inconvénients. Par exemple, rien qu’entre langage compilé et langage interprété, le premier sera plus rapide à s’exécuter (avantage pour la compilation), quant au second il sera « portable » d’une machine à une autre, sans recompilation (avantage pour l’interprétation).

Les points importants avant de choisir son langage

Avant de choisir un langage de programmation, il vous faut avant tout définir ce que le programme va faire. Allez-vous lui demander de faire des calculs complexes ? Ou encore d’afficher des graphiques complexes à l’écran ? Ou même de simplement envoyer des message d’une machine à une autre ? Rien que pour ces trois cas de figure, je n’utiliserais pas le même langage. Cependant, avant de choisir un langage, il faut définir l’ensemble du programme, le généraliser avec de l’algorithmie.

L’algorithme, ou comment concevoir un programme

L’écriture et la syntaxe d’un algorithme est très personnel, et ne changera pas en fonction du langage de programmation que vous utiliserez. Cependant, il va vous aider à bien concevoir un programme, et permettra par la même de distinguer les tâches à effectuer. Il existe des algorithmes généraux, et d’autre plus détaillés. L’algorithme est parfois proche d’un langage de programmation, cependant certains se schématisent. Cela permet de plus de simplifier le programme et le scinder en plusieurs parties et sous-ensembles, permettant de mieux visualiser son programme, et de requérir à d’autre programmeurs pour aider sur un ensemble ou sous-ensemble du programme.

Il existe toutefois des standards pour l’algorithmie (un standard, contrairement à une norme, n’est pas obligatoire). Si possible, restez au plus proche de ces standards, ils ont été conçus de sorte qu’un maximum de gens puisse comprendre ce que vous faites. Cependant, lorsque l’on souhaite programmer seul, et que ça le restera tout le long de l’écriture du programme, un peu de liberté ne fait jamais de mal.

Exemple d’algorithmes

Prenons un cas simple. Je souhaites réaliser un programme qui me dit si je suis majeur ou mineur, et qui devra effectuer des actions précises dans les deux cas de figure.

Algorithme général écrit:

Début

Demander Age
  Si Age >= 18 Faire ActionMajeur
  Sinon Faire ActionMineur

Fin

Algorithme général schématique:

Ces 2 algorithmes sont exactement les même et font la même chose, cependant, d’une ils ne sont pas écrit de la même façon, mais en plus, je ne respecte pas les standards algorithmiques. L’essentiel est de pouvoir structurer son code et ses pensées. Vous aurez remarqué que dans les deux algorithmes il y a un début et une fin. C’est simplement parce que tout programme, quel qu’il soit, quel que soit le langage utilisé ou la machine cible, comporte un début et une fin.

Note: Les plus pointilleux d’entre vous remarqueront que j’ai mis deux fins sur mon schéma, et que je n’ai pas aligné mes deux « Fin » (en plus!). Je rappelle qu’ici ce sont des exemples très personnels de programme.

Ce programme général est compatible avec n’importe quel langage de programmation. On pourrait même s’en servir ici pour en faire un circuit électronique, si on le souhaitait. C’est la magie de l’algorithme.

Conclusions

Avant d’écrire un programme, toujours penser à définir ce que va faire ce programme, qui permettra de faire un choix par la suite du langage de programmation à utiliser. Faire un algorithme permet de simplifier son programme et de le scinder en plusieurs sous-ensembles simple. On peut ensuite définir chaque sous-ensemble d’un programme en un ou plusieurs autres sous-ensembles. J’ai omis de définir les actions à réaliser dans mon programme, permettant ainsi une libre interprétation. Je reprendrais probablement cet exemple dans un autre article.

Bref, toujours bien définir les besoins de son programme, le réfléchir et le penser avant sur papier, puis ensuite définir quel langage utiliser en fonction de ce que l’on veut faire, mais aussi de ses préférences (ASP vs PHP, C vs C++, Java vs .Net, …).