Résidu Pentagone

Je veux faire un site internet !

Dans ce cas, vous allez devoir apprendre à faire du HTML. Et sans doute du CSS. Et du Javascript. Et puis aussi… Haha, allons, ne soyez pas déjà en train de pâlir de désespoir. En réalité, les bases nécessaires à la fabrication d'un site internet sont accessibles. Voici quelques infos dont vous allez avoir besoin à ce sujet :

De quoi sont faites les pages web

Lorsque vous naviguez sur la toile, vous le faites grâce à un navigateur, tel que Mozilla Firefox, Safari, Opéra, Chrome, Tor, Edge, Internet Explorer (god please no), et d'autres encore. Le navigateur internet est un gros logiciel qui vous sert de bateau pour surfer sur le web. Lorsque vous vous rendez à une adresse, telle que mynoise.net, ou itch.io, le navigateur se charge de se rendre à cette adresse, de télécharger le contenu de la page et enfin d'afficher cette page à votre écran.

HTML

Ce que vous voyez alors à l'écran est en réalité une page HTML (HyperText Markup Language). HTML, c'est le nom du langage qui est utilisé pour décrire le contenu d'une page web. Sur n'importe quelle page, vous pouvez vous amuser à voir comment c'est fait avec un clic droit -> "Examiner/inspecter l'élément". Vous verez alors des trucs du genre :

<div class="navbar">
    <table>
        <tbody><tr>
            <td>
                <a href="./read.php?art=qui_suis_je" title="Introduction">Qui suis-je?</a>
            </td>
            <td>
                <a href="./search.php" title="Rechercher parmi les articles">Recherche</a>
            </td>
            <td>
                <a href="https://colombage.itch.io/" title="Envie de jouer à mes jeux ?">Jouer</a>
            </td>
            <td>
                <a href="#top" title="Retourner au début">↑</a>
            </td>
        </tr></tbody>
    </table>
</div>

Il s'agit alors du HTML de la page que vous regardez. Ces balises (ou "tags" en anglais) marquées par les signes < et > sont caractéristiques du HTML. Chaque balise décrit un élément de la page et a un nom. <button> est un bouton, <table> est un tableau, <a> est un hyper lien, <body> est le corps de la page, etc. Et ces balises sont un peu comme des poupées russes ; elles s'emboîtent. À l'intérieur du <body>, j'ai un <main>, dans lequel j'ai un <div> dans lequel j'ai un <p> qui contient du texte et un <img> qui contient une image, etc.

Toutefois, le HTML ne décrit pas l'apparence de ces éléments. l'HTML ne dit pas quelle police de caractère utiliser, quelle couleur de fond, quel positionnement adopter, etc. Tout cela est géré par le CSS.

CSS

CSS (Cascade Style Sheets) est un langage qui décrit l'apparence des différentes balises HTML. Voici un exemple de CSS :

html {
    background-color: yellow;
    font-family: sans-serif;
    font-size: 10pt;
}

Vous remarquerez peut-être que la syntaxe du CSS diffère de celle du HTML. Ces quelques lignes de CSS donnent une couleur de fond jaune dégueulasse au HTML, une police de caractère sans-serif et un corps de texte de 10pt :

Je suis un bout de page dégueulasse qui fout en l'air l'aspect global de ce blog

Le CSS peut être écrit au sein même d'une page HTML, dans la balise <style> :

<style type="text/css">
    html {
        background-color: yellow;
        font-family: sans-serif;
        font-size: 14pt;
    }
</style>

Ce que vous devez retenir, c'est que le CSS gère le style, c'est-à-dire l'apparence des éléments de la page HTML. Mais comment est géré le comportement d'une page : appui d'un bouton, envoi d'un message sur une messagerie instantanée, etc ? Par JavaScript (JS) !

JavaScript

/!\ Ne pas confondre Java et JavaScript. Les deux n'ont rien à voir. Je sais, c'est débile, ça s'appelle pareil et ça n'a rien à voir, mais que voulez-vous ? La programmation est pavée de trucs absurdes.

JS est un langage de programmation. Contrairement au HTML et au CSS, JS ne décrit pas les choses. On peut dire que JS est, en quelques sortes, "actif" par rapport au CSS et au HTML. JS permet de programmer le comportement de la page web. Voici un exemple de JS :

document.getElementById('demo').innerHTML = "Coucou :3";

Cette ligne de JS inutilement compliquée va aller chercher un élément qui s'appelle "demo" pour aller écrire dedans "Coucou :3". Bref, on s'en fout un peu. Avec JS, vous pouvez dynamiquement modifier le contenu de votre page, changer du CSS, afficher / cacher des éléments html, et des trucs beaucoup plus fous et fascinants que ces exemples bêta-bêtes.

Ce qui est intéressant, c'est que JS peut s'insérer à différents endroits de votre HTML. Par exemple, il peut directement aller dans un bouton, dans un truc qui s'appelle onclick :

<button id="demo" onclick="document.getElementById('demo').innerHTML = 'Miaou :3'">
    Cliquez pour miauler
</button>

Ainsi, le JS dans onclick est exécuté lors du clic du bouton. Vous voulez essayer ?

Sachez qu'il y a, à l'instar du CSS, une balise HTML spécialement prévue pour accueillir du JS. Ça s'appelle <script>. Wow.

<script type="text/javascript">
    document.getElementById('demo').innerHTML = 'Miaou :3';
</script>

Et maintenant ? Qu'est-ce qu'on fait ?

Maintenant, vous devriez avoir une idée, ne serait-ce que vague, de comment sont faites les pages webs. Pour faire un site internet, vous aurez tout simplement besoin d'apprendre le HTML, le CSS et éventuellement le JS (pas obligé de se servir de JS pour tous les sites internet ceci dit). Pour vous lancer, vous n'aurez besoin de rien d'autre qu'un navigateur internet (que vous devriez déjà avoir) et d'un éditeur de code. Un éditeur de code est un logiciel de traitement de texte spécialement conçu pour le code. Il en existe un bon nombre. En voici quelques uns (je vous recommanderais plutôt le premier) :

Pour commencer à apprendre concrètement, je conseille vivement de visiter w3schools. W3schools a un tutoriel complet pour apprendre l'HTML, le JS, le CSS ou encore SQL, PHP, etc. Bref, tout ce dont vous aurez besoin pour fabriquer votre site ! C'est une excellente référence. Vous pourrez aussi aller sur la MDN (Mozilla Developer Network), c'est une ressource en ligne qui documente de manière très précise le web. Cela pourra vous aider plus tard.

Publié le : 24/05/2020
Vues: 139

Retour


Commentaires :

Ada : Chèr⋅e⋅s lecteur⋅ice⋅s, il n'y a aucun commentaire pour le moment.

Poster un commentaire :

Avant de poster un commentaire, veuillez consulter le guide et code de conduite des commentaires.