Mon premier site web

En 1989, Tim Berners-Lee et Robert Cailliau créent le World Wibe Web, une application de partage documentaire basé sur Internet. La volonté de Tim Berners-Lee : faire du Web un média collaboratif, dans lequel tous les acteurs consultent et créent l’information.

Créer un site ne devrait pas être une affaire de spécialistes; tout le monde devrait pouvoir créer et partager des pages.

Et vous savez quoi ? Vous n’avez nul besoin de logiciel cher, ni d’une platerforme pour y parvenir; vous pouvez faire votre site avec une éditeur de texte (et les quelques informations que nous allons découvrir ensemble)

On y va ? C’est parti !

Créer sa première page

Créer mon dossier sur mon ordinateur

Créez un dossier mon-site sur votre ordinateur à un endroit ou vous le retrouverez facilement.

Créer ma page d’accueil

Ouvrez Notepad (pour Windows), TextEdit (pour Mac) ou L’éditeur de texte (pour Linux).

Écrivez une phrase ou deux à propos de vous et de votre site. Par exemple:

        Mon site est actuellement en construction et devrait être en ligne prochainement.
        

Maintenant, enregistrez votre document dans le dossier mon-site en le nommant index.html.

Visualiser ma page

Dans votre dossier mon-site, votre fichier index.html apparait avec l’icone de votre navigateur web (Firefox, Chrome, etc.).

Double-cliquez sur votre fichier index.html pour l’ouvrir dans votre navigateur.

Félicitation, vous avez créer votre premier site ! 🎉

Vérifiez votre texte, nous allons publier votre site !

Publier ma page sur Internet

Actuellement, votre site se trouve sur votre ordinateur; c’est à dire que seule vous pouvez le consulter. Pour le rendre accessible au public, vous devez déposer/héberger votre fichier index.html sur un ordinateur distant accessible sur le Web : un serveur.

Il existe plein de solution pour héberger des sites web. La plus répandu est de faire appel à une entreprise.

ici, nous allons utiliser l’offre starter de chez Infomaniak.

Acheter votre nom de domaine avec l’offre starter

Une fois offre activée, rendez-vous dans votre Web FTP.

Connectez-vous à votre Web FTP.

Glissez-déposez le fichier index.html du dossier mon-site dans la fenêtre du Web FTP.

Rendez-vous à l’adresse de votre site.

Félicitation, votre site est en ligne ! 🎉

Ajouter et modifier le contenu

Il est maintenant temps d’améliorer le contenu de votre page web.

Les page web, c’est juste du texte… mais aussi un langage : le HTML pour Hypertext Markup Language. (d’ou l’extension du fichier index.html).

Mais nulle crainte, car heureusement, le HTML, c’est juste du texte !

Ce texte s’écrit avant et après les contenus rédactionnels pour indiquer au navigateur web et aux internautes la structure de votre page : les titres, les paragraphes, les listes, etc.

On appele ces textes “balises” et on l’écrit comme ceci :

        <nom_de_la balise>Le contenu de mon texte</nom_de_la_balise>
        

Et des balises, il y en a plein, avec plein de nom différent !

Voyons cela ensemble. (ou sauter directement au memento)

Créer un titre dans ma page

Il existe 6 niveaux de titres permettant de structurer sa page (comme dans un logiciel de traitement de texte).

Dans le fichier index.html, insérez un titre 1. par exemple :

        <h1>Bienvenue sur mon site web</h1>

        Mon site est actuellement en construction et devrait être en ligne prochainement.
        

Créer un paragraphe dans ma page

Si le premier texte de votre document index.html est un titre, alors, on peut raisonablement penser que le second est un paragraphe.

Dans le fichier index.html, entourez/encapsuler la seconde phrase d’une balise p.

        <h1>Bienvenue sur mon site web</h1>

        <p>Mon site est actuellement en construction et devrait être en ligne prochainement.</p>
        

Ajouter un lien vers mes médias sociaux

Il existe plusieurs type de liens pour ancrer un texte à une référence hyperlien.

Créer un nouveau paragraphe p introduisant le lien. Par exemple :

        <p>En attendant, retrouvez moi sur :</p>
        

Dans ce paragraphe, ajouter un lien vers votre profil de média social. Par exemple :

        <p>En attendant, retrouvez moi sur : <a href="https://mamot.fr/@translucide">Mastodon</a></p>
        

Comme vous pouvez le constater ici, les balises HTML peuvent s’imbriquer les unes dans les autres comme des boites.

Entête et corp du document

Jusqu’à présent, vous avez rédigé le corp du document; celui qui s’affiche dans la fenêtre du navigateur.

Entourer/encapsulez votre code HTML du fichier index.html d’une balise body.

        <body>
            (...)
        </body>
        

Et quand il y a un corp, il y a une tête au dessus.

Avant votre balise body, insérer une balise head comme suit :

        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Bienvenue - mon-site</title>
            <meta name="description" content="Site web en construction">
        </head>
        

Il s’agit la des informations nominale du document (les métadonnées), utilisées pour définir votre page web auprès du navigateur, des terminaux, et des moteurs de recherche :

• <meta charset="UTF-8"> pour l’utilisation des caractères spéciaux,
• <meta name="viewport" content="width=device-width, initial-scale=1.0"> pour rendre le site adaptable au smartphone
• <title>Bienvenue - mon-site</title> pour le titre de votre page dans l’onglet du navigateur et les moteurs de recherche
• <meta name="description" content="Site web en construction"> pour la description de votre page sur les moteurs de recherche

À ce niveau, votre page devrait ressembler à ceci :

        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Bienvenue - mon-site</title>
            <meta name="description" content="Site web en construction">
        </head>

        <body>

            <h1>Bienvenue sur mon site web</h1>

            <p>Mon site est actuellement en construction et devrait être en ligne prochainement.</p>

            <p>En attendant, retrouvez moi sur : <a href="https://mamot.fr/@translucide">Mastodon</a></p>

        </body>
        

Pour cloturer notre imbrication de boîtes, il est necessaire de ranger la head et le body dans une balise html que l’on vient précéder d’une balise doctype (qui est, un peu, le tampon sur la boite).

À ce niveau, votre page devrait ressembler à ceci :

        <!doctype html>
        <html lang="fr">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Bienvenue - mon-site</title>
            <meta name="description" content="Site web en construction">
        </head>

        <body>

            <h1>Bienvenue sur mon site web</h1>

            <p>Mon site est actuellement en construction et devrait être en ligne prochainement.</p>

            <p>En attendant, retrouvez moi sur : <a href="https://mamot.fr/@translucide">Mastodon</a></p>

        </body>
        </html>
        

Félicitation, votre première page web est terminée ! 🎉

Mettre à jour sa page sur Internet

Actuellement, votre page se trouve sur votre ordinateur; c’est à dire que seule vous pouvez le consulter. Pour le rendre accessible au public, vous devez déposer/héberger votre fichier index.html sur votre serveur.

rendez-vous et connectez-vous sur votre Web FTP.

Glissez-déposez le fichier index.html du dossier mon-site dans la fenêtre du Web FTP.

Rendez-vous à l’adresse de votre site.

Félicitation, votre site est en ligne ! 🎉

Memento

Structure de base d’une page web

Voici une proposition de structure de base d’une page web adatative.

        <!DOCTYPE html>
        <html lang="fr">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Titre de mon document</title>
            <meta name="description" content="Description de mon document">
        </head>
        <body>

        </body>
        </html>
        

Entête, contenu principal et pied de page

Lorsque l’on crée plusieurs pages dans un site, il peut être bon de prévoir une entête, un contenu principal et un pied de page dans chacune d’elle (comme dans un logiciel de traitement de texte).

Elles s’insèrent dans la balise body comme suit :

        <body>

            <header>

            </header>

            <main>

            </main>

            <footer>

            </footer>

        </body>
        

La balise header contiendra alors des éléments communs à toutes les pages (le plus souvent le nom du site et le menu de navigation)

La balise main contiendra alors le contenu de votre page (ses titres, paragraphes, etc.)

La balise footer contiendra alors les informations annexes (le plus souvent les informations de contact et les mentions légales)

Les titres (heading)

        <h1>Titre 1</h1>
        <h1>Titre 2</h1>
        <h1>Titre 3</h1>
        <h1>Titre 4</h1>
        <h1>Titre 5</h1>
        <h1>Titre 6</h1>
        

Les paragraphes (paragraph)

        <p>Texte</p>
        

Le gras (bold)

        <b>Texte</b>
        

L’italique (italic)

        <i>Texte</i>
        

Le souligné (underline)

        <u>Texte</u>
        

Les ancres et liens hypertextes (anchor)

        <a href="lien">Texte</a>
        

Les listes non ordonnées (unordered list)

        <ul>
            <li>texte</li>
            <li>texte</li>
        </ul>
        

Les listes ordonnées (ordered list)

        <ol>
            <li>texte</li>
            <li>texte</li>
        </ol>
        

Les bloc de citation

        <blockquote>
           <p>Citation</p>
        </blockquote>