OnlineCreation.me • Blog • Les langages de programmation du web

Technologie
Les langages de programmation du web

Raphaël | 19/07/2024 à 13:41

Cela fait quelques articles que je tente de vous transmettre ce qui me passionne dans mon métier, de la manière la plus concrète possible. Nous avons vu quelques bases en CSS (pour modifier l'apparence de votre site), en JavaScript (pour le rendre plus dynamique), il y a quelque temps en HTML… J'aimerais vous proposer aujourd'hui un résumé.

Les trois langages du web

HTML, la structure

Vous le savez, en 1989, alors qu'Internet n'était qu'un réseau réservé à des usages très limités, Tim Berners-Lee et Robert Cailliau (deux chercheurs du CERN), ont imaginé un moyen d'échanger des documents et de les lier entre eux, de manière à pouvoir naviguer à travers l'information. C'est ainsi qu'est né le World Wide Web que nous utilisons chaque jour. Pour cela, Tim Berners-Lee développe le langage HTML (basé sur le SGML), qui permet de structurer les documents, de les lier entre eux, et de les afficher sur un écran.

Le principe du HTML est simple : écrire et structurer l'information. Par exemple, si votre site donne un bulletin météo, c'est en HTML que vous allez écrire la date, la température, le vent, etc.

Son écriture est simple, il suffit de comprendre le principe des balises : un mot-clé entre les caractères < et > qui indique le début d'une information, et ce même mot-clé entre les caractères </ et > qui indique la fin de l'information. Par exemple, si vous voulez écrire un paragraphe de texte, vous encadrez ce texte avec les balises <p> et </p>. Il est par ailleurs possible d'écrire un commentaire : si vous encadrez un texte avec , celui-ci ne sera pas lu par le navigateur, ce qui peut être pratique pour conserver des notes dans votre code.

L'intérêt des dernières versions de ce langage est que non seulement vous pouvez écrire des informations lisibles par les humains, mais vous pouvez aussi ajouter des informations à destination des machines, pour les aider à comprendre le contenu de votre site. Par exemple, si dans votre code HTML, vous encadrez la date avec la balise <time>, vous indiquez aux moteurs de recherche que ce contenu est une date ; si vous encadrez l'information la plus importante de votre bulletin avec la balise <strong>, vous indiquez aux moteurs de recherche que cette information est plus importante que les autres. De même, il est possible de définir des titres, des sous-titres, des listes, des tableaux, des images, des vidéos, des liens, etc.

Voici un exemple du code HTML d'un corps de page web :

Code

<h1>Météo amateur du Médoc</h1>

<h2>Introduction</h2>

<p> 
    Je suis un passionné, j'observe les nuages au quotidien sur la côte atlantique, je relève la température, la pluviométrie, la force du vent, la pression atmosphérique, et j'en déduis une tendance pour la journée.
</p>

<h2>Bulletin météo quotidien</h2>
<img src="https://static.onlc.eu/blogOEU/thumbs/171887326532.png" alt="Soleil"> 

<time datetime="2021-07-01">1er juillet 2021</time> 

<p>
    <strong>Beau temps</strong>. Le temps devrait rester stable toute la journée, avec une légère brise en fin de journée.</p>
<p>Relevés :</p>

<ul> 
  <li>Température : 30°C</li> 
  
  <li>Vent : 10 km/h</li>
  <li>Pression : 1015 hPa</li>
  <li>Pluviométrie : 0 mm</li>
  <li>Humidité : 60%</li>
  <li>Nuages : ciel dégagé</li>
  <li>Visibilité Soulac-Cordouan : parfaite</li>
</ul>

<a href="https://www.meteofrance.com" target="_blank">Voir le bulletin météo de Météo France</a>

Résultat

Ça fonctionne, l'information est structurée, mais pour dire les choses simplement, c'est moche, on se croirait revenu à l'informatique du siècle précédent.

Amusez-vous
J'ai conçu ces blocs de code pour que vous puissiez les modifier et observer le résultat en direct. C'est un véritable bac-à-sable, vous ne risquez rien à jouer, modifier ou même tout casser !

CSS, l'apparence

Nous l'avons vu dans un article précédent, le CSS définit l'apparence : couleurs, polices de caractère, positionnement, etc.

Ce langage peut être mêlé au HTML de trois façons : dans une balise à part, qui définit l'apparence de toute la page, dans un fichier séparé, qui définit l'apparence de plusieurs pages, ou directement dans les balises concernées.

On écrit le CSS de la manière suivante : balise-modifiée {propriété: valeur;}. On peut ainsi modifier les caractéristiques de toutes les occurrences d'une balise, ou juste de certaines. Pour cela, on peut utiliser des identifiants uniques, que l'on ajoute aux balises avec l'attribut id, ou des familles que l'on définit avec l'attribut class.

Comme en HTML, on peut écrire des commentaires en encadrant le texte avec /* et */.

Ajoutons du CSS à notre exemple :

Code

Résultat

Malgré sa simplicité apparente, le CSS peut être d'une puissance folle : il peut être conditionné à la taille d'un écran, au support d'affichage (écran, papier, autre), il peut calculer certaines valeurs… Si le sujet vous intéresse, j'écrirai d'autres articles sur le sujet.

JavaScript, la dynamique

Jusqu'à maintenant, les langages présentés étaient uniquement descriptifs. Le JavaScript, lui, est un langage de programmation. Il peut réellement servir à écrire des programmes informatiques. Toutes les applications que vous utilisez au travers de votre navigateur web ont été écrites, tout ou en partie, en JavaScript. Par exemple, l'éditeur d'image Pixel•OnlineCreation est du code JavaScript.

Là encore, ce langage a été présenté dans un article précédent : Rendre votre site plus intelligent avec le JavaScript. D'ailleurs, merci pour vos retours !

Le JavaScript peut être intégré dans une page HTML, un peu comme le CSS, dans une balise dédiée, dans un fichier séparé ou directement dans les balises.

Les commentaires se font avec // pour une ligne ou /* et */ pour plusieurs lignes.

Ajoutons du JavaScript à notre exemple :

Code

// Si l'unité est en degrés Celsius
        if (unit === '°C') { 
            // On convertit en degrés 
            // Fahrenheit
            result = Math.round(
                value * 9 / 5 + 32
            ) + '°F'; 
        // Sinon, si l'unité est en 
        // kilomètres par heure
        } else if (unit === 'km/h') { 
            // On convertit en miles 
            // par heure
            result =  Math.round(
                value / 1.609344
            ) + 'mph'; 
        // Sinon, si l'unité est en 
        // hectopascals
        } else if (unit === 'hPa') {
            // On convertit en pouces 
            // de mercure
            result =  Math.round(
                value * 0.02953
            ) + 'inHg';
        // Sinon, si l'unité est en
        // millimètres
        } else if (unit === 'mm') {
            // On convertit en pouces
            result =  Math.round(
                value * 0.0393701
            ) + 'in'; 
        } else { // Sinon
            // On ne fait rien
            result = value; 
        }
        return result;
    }
    /**
     * Récupère les valeurs en fonction du 
     * type d'unités choisies
     * @param {string} units - Les unités à 
     *   afficher
     * @param {number} value - La valeur à 
     *   afficher
     * @param {string} unit - L'unité de la 
     *  valeur
     * @returns {string} La valeur à afficher
     */
    let getValues = function (units, value, unit) {
        // Si les unités sont impériales
        if (units === 'imperial') { 
            // On convertit les valeurs
            return metricToImp(value, unit); 
        } else { // Sinon
            // On affiche les valeurs 
            // métriques
            return value + unit; 
        }
    }
    /**
     * Affiche les valeurs en fonction du 
     * type d'unités choisies
     * @param {HTMLElement} element - 
     *   L'élément à afficher
     */
    let showValues = function (element) {
        // On récupère les unités choisies
        let units = document
            .getElementById('units')
            .value;
        // On récupère la valeur
        let value = element
            .getAttribute('data-value'); 
        // On récupère l'unité
        let unit = element
            .getAttribute('data-unit');
        // On affiche les valeurs
        element.textContent = getValues(units, value, unit); 
    }
    /**
     * Gère le changement d'unités
     */
    let switchUnits = function () {
        // On récupère les éléments
        let elements = document
            .getElementsByClassName('switchUnits');
        // Pour chaque élément
        for(let element of elements) {
            // On affiche les valeurs
            showValues(element);
        };
    }
    /**
     * Au chargement de la page, on simule 
     * un changement d'unités pour afficher 
     * les valeurs
     */
    document.addEventListener('DOMContentLoaded', function () {
        // On exécute la fonction qui
        // affiche les valeurs
        switchUnits();
    });
</script>
<style>
body { 
    font-family: sans-serif; 
    color: darkslategray; 
    line-height: 1.5; 
}
h1 {
    color: dodgerblue; 
}
h2 { 
    color: darkslateblue; 
}
img#sun {
    width: 100px;
    height: 100px; 
    float: right;
}
.weather-date { 
    font-size: 18px; 
    background-color: darkslateblue;
    padding: 5px; 
    border-radius: 5px; 
    color: white;
}
</style>
<h1>Météo amateur du Médoc</h1>
<div>
    <label>Changer les unités : 
    
    <select id="units" onchange="switchUnits()">
        <option value="metric" selected>Métrique</option>
        <option value="imperial">Impérial</option>
    </select></label>
</div>
<h2>Introduction</h2> 
<p style="font-size: 20px;"> 
    Je suis un passionné, j'observe les nuages au quotidien sur la côte atlantique, je relève la température, la pluviométrie, la force du vent, la pression atmosphérique, et j'en déduis une tendance pour la journée.
</p> 
<h2>Bulletin météo quotidien</h2>
<img src="https://static.onlc.eu/blogOEU/thumbs/171887326532.png" alt="Soleil" id="sun">
<time datetime="2021-07-01" class="weather-date">1er juillet 2021</time> 
<p><strong>Beau temps</strong>. Le temps devrait rester stable toute la journée, avec une légère brise en fin de journée.</p>
<p>Relevés :</p>
<ul> 
  <li>Température : <span class="switchUnits" data-value="30" data-unit="°C"></span></li> 
  <li>Vent : <span class="switchUnits" data-value="10" data-unit="km/h"></span></li>
  <li>Pression : <span class="switchUnits" data-value="1015" data-unit="hPa"></span></li>
  <li>Pluviométrie : <span class="switchUnits" data-value="0" data-unit="mm"></span></li>
  <li>Humidité : 60%</li>
  <li>Nuages : ciel dégagé</li>
  <li>Visibilité Soulac-Cordouan : parfaite</li>
</ul>
<a href="https://www.meteofrance.com" target="_blank">Voir le bulletin météo de Météo France</a>

Résultat

Rassurez-vous, l'objectif ici n'est pas que vous compreniez le code, mais que vous observiez à quel point le HTML, le CSS et le JavaScript sont imbriqués les uns dans les autres.

La programmation web me fait vibrer depuis mon enfance et j'espère, par cette série d'articles, vous donner envie de vous lancer. Dites-moi en commentaire, y a-t-il des choses que vous aimeriez apprendre à faire ? Une horloge ? Recherche une adresse sur une carte ? Un traducteur automatique de site web ? Ne soyez pas timide !

Les trois langages du web

HTML, la structure

Code

Résultat

CSS, l'apparence

Code

Résultat

JavaScript, la dynamique

Code

Résultat

Newsletter OnlineCreation.me

Votre navigateur internet n’est pas à jour