Site internet très sobre test

Translucide

https://lowtechlab.dokit.app/wiki/Site_internet_tr%C3%A8s_sobre_test

Dernière modification le 06/05/2026

Difficulté

Très facile ⧼wf-propertyvalue-difficulty-Très facile⧽

Durée

2 minute(s) minute(s)

Coût

10 EUR (€)

Description

Mettre en ligne une page HTML notée 93/100 sur EcoIndex

Sommaire

site, internet

---

Introduction

Internet n’est pas low-tech. Pour fabriquer une puce électronique, il faut extraire 32 kilos de matières aux quatre coins de la planète et solliciter 16’000 fabricants (source : L'enfer numérique: Voyage au bout d'un Like, Guillaume Pitron).

L’urgence est donc la désescalade numérique dans une optique de dénumérisation. test

La première question à se poser avant de lire la suite de ce tutoriel, est donc : as-tu vraiment besoin d'un site internet ?

Si oui, même si Internet est high-tech, on peut créer un site très sobre.

C’est l’objectif de ce tutoriel.

Il te permet de créer un site comme celui-ci. Cette page obtient la note A sur Ecoindex avec un score de 93/100.

Ceci dit, avoir un site sobre ou “éco-conçu” est aujourd’hui un argument marketing utilisé par de nombreuses structures dont le fonctionnement est aux antipodes de la démarche low-tech.

Ce tutoriel est donc destiné aux projets qui appliquent la démarche low-tech et souhaitent étendre cette démarche à leurs outils de communication.

Nous nous inquiétons des possibilités de récupération de cette méthode dans une simple optique de greenwashing.

D’autre part, un site internet d’un projet low-tech qui contient 50 pages avec 15 images par pages, même allégées, est probablement incohérent. La clé d’une démarche low-tech est de questionner nos besoins et y adapter le juste niveau technologique. Voyons comment cela peut s’appliquer à chaque étape de ton projet de création de site Internet.

Outils & MatériauxFichiers

Matériaux

• un ordinateur avec un accès à Internet
• un logiciel de traitement de texte
• un nom de domaine et l’offre starter (gratuite) chez l’hébergeur Infomaniak

Outils

https://www.detoxtonsite.com/Index.txt

Étape 1 - Comprendre les principes d’une page web bien structurée

Titres

Une page bien organisée reflète le niveau d’importance des informations. Les titres se distinguent par niveaux :

• Titre de niveau 1 : il n’y a qu’un seul titre de niveau 1 sur ta page à placer une fois au début du texte. Plus il est court mieux c’est (5 à 8 mots).
• Titre de niveau 2 : envisage 2 à 8 titres de niveau 2 pour structurer ton texte. Idéalement, chacun de ces titres contient des mots clés en lien avec le contenu développé dans le paragraphe qu’ils chapeautent.
• Titre de niveau 3 : ce sont des sous-titres au sein des titres de niveau 2. Intègres-y des mots clés mais sans en abuser.
• Titre de niveau 4 : ce sont des sous-titres au sein des titres de niveau 3.

Liens

Les liens servent à naviguer de ton site vers d’autres sites. C’est la base du Web : la toile. Réfléchis à décrire les liens avec un libellé clair et court au lieu d’indiquer l’URL. Tu peux intégrer des mots clés dans ce libellé. Si le lien s’ouvre dans un nouvel onglet, une bonne pratique consiste à le mentionner pour prévenir les personnes en situation de handicap. Par exemple : (nouvel onglet).

Texte gras

Les mots et les expressions en gras attirent l’œil et montrent aux personnes qui lisent ton site quelles sont les informations prioritaires au sein des paragraphes. Le texte en gras aide aussi les moteurs de recherche à comprendre de quoi parle ta page.

Texte en italique

Les mots en italique sont utilisés pour mentionner le nom d’un livre, d’un film, d’un journal, une pensée, une citation, un dialogue, une conversation, ou encore un mot dans une langue étrangère.

Liste à puces ordonnées

Les listes à puces rythment la lecture, rendent ton contenu plus accessible pour les personnes en situation de handicap et optimisent le référencement du site dans les moteurs de recherche. Dès que tu énumères des choses, utilise une liste à puce (liste de numéros de téléphone, plusieurs produits, etc). Utilise de préférence entre 3 et 5 puces. Il existe 2 types de listes à puces, ordonnées et non ordonnées. Voici une liste à puces ordonnées (avec des chiffres) à utiliser pour décrire une progression logique comme des étapes ou une marche à suivre : test

1. Étape 1
2. Étape 2
3. Étape 3

Liste à puces non ordonnées

Les listes à puces non ordonnées sont précédées de signes et sont utilisées quand l’ordre des éléments n’a pas d’importance pour décrire une série de fonctions par exemple :

• Fonction 1
• Fonction 2
• Fonction 3

Citation longue

Une citation longue contient par exemple des témoignages ou des textes provenant de sources extérieures.

Erreur lors de la création de la vignette : Fichier manquant

Étape 2 - Se familiariser avec le langage HTML

Voici des informations pour te familiariser avec les bases de l’HTML.

Dans un document HTML, les balises autour du contenu permettent de transformer ton texte pour lui donner l’apparence ou la fonction que tu souhaites.

Une balise comprend un élément encadré par un chevron entrant < et un chevron fermant >. Par exemple <p> est une balise d’ouverture à mettre au début d’un paragraphe. La balise </p>, avec l’ajout d’une barre oblique /, est une balise fermante à mettre à la fin du paragraphe.

On va regarder ce qu’il y a dans le lien https://www.detoxtonsite.com/Index.txt sous Fichiers, du début à la fin. Il s’agit de ton code html. Le code est séparé en deux parties : la tête (head) et le corps (body). L’élément head contient des informations importantes pour bien construire ta page mais qui sont invisibles aux personnes qui consultent ton site. L’élément body contient les informations visibles de ton site. C’est là que tu intégreras le texte que tu as préparé.

Pour le moment, on va s’intéresser uniquement à l’élément head qui contient plusieurs balises. Tu vas devoir modifier certaines balises quand on l’indique explicitement. C’est important de laisser les autres balises telles quelles pour garder ta page bien structurée et accessible aux personnes en situation de handicap. On te donne des explications pour t’aider à comprendre les fonctions des balises mais ce n’est pas nécessaire de tout retenir.

Avant l’élément head, il y a 2 balises :

<!DOCTYPE html>

Cette balise indique qu’il s’agit d’un contenu html.

<html lang="fr">

Cette balise indique que le contenu de la page html est en français. C’est utile par exemple pour les lecteurs d’écran qui vocalisent les mots dans la langue adaptée avec le bon accent.

Regardons maintenant ce que contient l’élément head :

<head></head>

C’est la balise de la « tête » de ton site. Elle encadre plusieurs choses.

<meta charset="utf-8">

Cette balise détermine le type d’encodage des caractères. Utf-8 est un encodage assez moderne qui permet par exemple de gérer les lettres avec des accents et les caractères spéciaux comme le “ç”.

<title>Titre du site</title>

Cette balise contient les informations qui vont s’afficher dans l’onglet du navigateur et aussi dans les moteurs de recherche. Elle est très importante pour le référencement de ton site. Modifie ce titre par exemple en indiquant le nom du projet. Utilise des mots clairs. Moins il y a de mots plus ils ont de poids dans le référencement.

<meta name="viewport" content="width=device-width, initial-scale=1">

Cette balise contient des paramètres pour assurer un bon rendu de la page sur mobile et ordinateur.

<meta name="description" content="...">

Cette balise est aussi importante pour le référencement et les moteurs de recherche. Si tu ne la mets pas, le moteur de recherche affichera les premiers mots de ton site dans les résultats, sous le titre, ou un extrait de ton site qui contient les mot-clés tapés par la personne qui fait sa recherche. Remplace les trois petits points par ta description qui peut être la phrase d’introduction de ton site par exemple. Il est recommandé d’écrire un maximum de 150 caractères.

<style></style>

C’est la balise du style qui détermine la mise en page du site.

max-width: 650px;

Cette balise indique que la largeur maximale est de 650px pour que le site ne prenne pas toute la largeur de l’écran. Ce paramètre évite de ne pas faire des phrases trop longues. C’est notamment plus confortable pour les personnes avec des troubles cognitifs.

margin: 2rem auto;

Cette balise indique les paramètres des marges extérieures qui permettent de centrer le contenu dans le navigateur.

padding: 0 1rem;

Cette balise indique les paramètres des marges intérieures qui évitent au texte d’être collé au bord de la fenêtre si on réduit sa largeur ou si on consulte le site sur un mobile.

font: 1.1rem/1.5 Arial;

Cette balise indique les paramètres de la police de caractère qui permettent une lecture agréable y compris aux personnes en situation de handicap. La police Arial est accessible à tout le monde car elle se trouve sur tous les appareils. Le navigateur n’a donc pas besoin de télécharger une autre police.

color: #444;

Cette balise indique la couleur de la police de caractère. Ce noir légèrement grisé offre une lecture plus adoucie qu’un noir total #000 mais avec un contraste suffisant pour l’accessibilité.

h1,h2,h3 { line-height: 1.2 }

Cette balise indique quelle est la hauteur de la marge prévue entre deux éléments d’un titre si celui-ci se trouve sur deux lignes.

Étape 3 - Changer le corps de la page

Tu vas passer à la publication de ton texte sur ton site. On a vu plus-haut l’élément head de ton fichier « index.txt ». Maintenant regardons l’élément body.

Ouvre ton fichier qui contient le texte que tu as préparé, pour pouvoir le coller au fur et à mesure dans le body du fichier index.txt.

L’élément body est séparé en trois parties pour être accessible aux personnes en situation de handicap :

• en-tête (header),
• contenu principal (main)
• pied de page (footer)

Les personnes qui utilisent un lecteur d’écran peuvent ainsi se repérer et passer d’un élément à l’autre rapidement.

Étape 4 - L'en-tête

<header></header>

C’est la balise entrante de l’en-tête de ton site.

<h1>Titre du site</h1>

Cette balise indique le titre qui va s’afficher en premier sur ton site. C’est une phrase courte qui décrit la mission de la structure. Après la balise title qu’on a vue plus haut, c’est l’élément le plus important de ton site en terme de référencement. Tu peux choisir des mots-clés différents du title pour varier un peu. Une phrase d’accroche courte est plus efficace car moins il y a de mots, plus ils ont du poids en terme de référencement.

<p>Paragraphe <em>italique</em></p>

La balise em permet de créer du texte italique. On l’a mise là à titre d’exemple mais tu peux la supprimer si ta phrase ne contient pas d’italique.

Tu peux mettre plusieurs paragraphes à la suite, par exemple pour aérer ton texte car il y aura une marge plus haute entre les deux paragraphes.

Étape 5 - Le contenu principal

Étape 6 - Le pied de page

<footer>

c’est la balise entrante du pied de page de ton site. Elle se termine avec la balise </footer>.

On met les informations moins importantes en terme de contenu dans le pied de page comme les mentions légales.

Voilà, on a fait le tour. Maintenant, à toi de jouer et d’intégrer l’ensemble de ton texte

Étape 7 - Mettre en ligne ta nouvelle page index.html

A ce stade tu as pu ajouter ton texte mis en page grâce aux balises html dans le fichier index.txt que tu peux trouver au début ce tutoriel.

Pour le mettre en ligne, il te suffit de te rendre dans Infomaniak, dans l’onglet

Hébergement > FTP > Web FPT.

Puis de créer un fichier que tu nommes index.html et y copier-coller le contenu de ton nouveau fichier index.txt que tu auras personnalisé.

Attention ici : si tu importes directement ton fichier index.txt sans le renommer en .html, cela ne fonctionnera pas !

Renseigne ensuite l’URL de ton site dans le navigateur pour voir comment il s’affiche.

Tu peux faire des modifications directement depuis le FTP (tu n’as pas besoin de mettre en ligne un nouveau fichier à chaque modification).

Pense à enregistrer ton fichier index.html régulièrement pour ne pas perdre ton travail en cas de déconnexion. On t’invite aussi à rafraîchir ta page de temps en temps pour voir ce qui s’affiche sur ton site.

Étape 8 - etape test

description test

Notes et références

Conseils d’utilisation et remarques

Dans ce tutoriel, nous te montrons comment créer un site Internet qui se résume à une seule page. Dans certains cas, c’est suffisant !

Dans le cas contraire, l’ajout de pages supplémentaires suit exactement les même étapes. Il faudra simplement donner un nom différent à chaque nouvelle page. test

Le fichier de la page d’accueil du site s’appelle index.html.

Le fichier de ta page n°2 pourra s’appeler nom-du-projet.html. Son URL sera alors www.urldusite.fr/nom-du-projet.html.

Il faudra la mettre également en ligne via le FTP d’Infomaniak. Puis, penser à ajouter sur la page d’accueil un lien cliquable pour que les internautes puissent s’y rendre depuis la page d’accueil.

Références

https://translucide.net/site-lowtech

https://detoxtonsite.com

fr none 0 Publié