Créer un site internet - Qu'est-ce qu'un site internet ?

Dans cette nouvelle vidéo nous allons répondre à une question toute simple ( même toute bête ) mais qui est fondamentale si vous souhaitez créer votre propre site Web.

Apprenez à créer votre site sur wordpress en suivant notre guide gratuit. Cliquez-ici :

On va aborder maintenant la question de “Qu’est-ce qu’un site Internet ?” concrètement. 

Dans sa forme la plus basique, un site Internet c’est un ensemble de fichiers textes stockés sur un serveur. Ces fichiers textes sont écrits dans un langage appelé “html”, ce qui permet à votre navigateur d’interpréter le contenu et de le mettre en forme.

Le html c’est un langage très simple qui permet de structurer le contenu texte et multimédia d’une page. On utilise des mots-clés qu’on appelle des balises pour englober des textes et préciser la nature de l’information.

Pour vous expliquer concrètement à quoi ça ressemble, j’ai créé un ensemble de fichiers pour mon site Internet.  J’ai nommé un dossier “site-html” dans lequel j’ai les dossiers : “bombay.html”, “images”, “index.html”, “new-york.html” et “paris.html”.

C’est la façon dont peut se présenter un site classique, avec des fichiers html. 

Pour les ouvrir, on peut très bien utiliser un éditeur de texte lambda comme Wordpad ou TextEdit sur Mac, mais, pour des questions de lisibilité, on utilise ce qu’on appelle un éditeur de code. 

Pour ma part je travaille avec Coda. 

Et si je les ouvre, il détecte les balises, il code d’une certaine couleur afin que ce soit plus lisible.

Parmi les balises les plus couramment rencontrées pour un site Internet, on retrouve par exemple :

• La balise, c’est la balise qui permet d’isoler un paragraphe. Sur ce type de balises (qu’on dit “englobantes”), le nom de la balise est placé entre deux chevrons : un chevron ouvrant < et un chevron fermant >. Doncprécise que le début du paragraphe va commencer ici. Et sa balise fermante c’est.
• Si dans le paragraphe apparaît une balise
  , cela signifie qu’il faut sauter une ligne à cet endroit.
• Concernant les balises de type , on peut en croiser plusieurs comme h1, h2, h3, etc. Le h signifie “heading”, donc en gros “titre”, le chiffre précise ensuite l’ordre d’importance du titrage. En effet, dans une page, vous avez un titre principal, un sous-titre voir un sous sous-titre. C’est la raison pour laquelle il est important de préciser cet ordre de titrage. Donc, les titres les plus importants sont placés dans des balises, ensuite vous pouvez avoir du h2 ou passer directement au h3 selon votre souhait.
• On peut également trouver la balise de type . C’est elle qui permet de créer des liens cliquables. Elle se présente ainsi : Accueil. L’information href=”index.html” est ce qu’on appelle un attribut et on vient le placer juste avant le chevron fermant. C’est lui qui précise l’url sur laquelle on doit arriver si on clique sur le lien. Le mot Accueil, est celui qui sera visible et cliquable en ligne. On peut enchaîner ainsi plusieurs liens cliquables sur une même ligne en les séparant par des tirets. Accueil - New York - etc.
• Autre balise courante, c’est la balise image :  elle ne dispose pas d’un attribut href puisqu’elle n’est pas cliquable. Son attribut est src pour source. Cela permet donc de désigner l’emplacement de l’image qu’elle est censée afficher. Elle a aussi un attribut alt, qui lui donne un titre. Cela permet de préciser aux moteurs de recherche et aux navigateurs à quoi ça correspond. Ca sert aussi beaucoup pour les non voyants et les mal voyants qui ne sont pas en mesure de visualiser l’image et cela leur donne de l’information sur ce contenu.

Ce sont donc les balises élémentaires du site Internet.

Vient ensuite la balise, qui vient encadrer votre texte. C’est la balise parente, la balise maître, qui englobe le contenu qui va s’afficher sur l’écran.

La balise, qui se place au dessus de tout votre contenu, et donc juste avant votre balise d’ouverture, contient des méta données, c’est-à-dire des informations sur la page. C’est par exemple le titre de la page. 

Tout ce qui se trouve dans cette balise ne s’affiche pas directement dans le navigateur.

Enfin, tout cet ensemble de balises que nous venons de voir, est inclue dans des balises. C’est un document html de base.Maintenant, il faut interpréter ce code html. C’est là que le navigateur intervient. 

Si l’on ouvre notre document html avec Google Chrome, on voit alors que le code, les petits mots-clés, les balises, n’apparaissent pas dans la version interprétée. 

A la place du code, on a une image, nos titres h1 sont gros et gras, les h3 plus petits mais toujours en gras, les paragraphes ont des marges inférieures, des sauts de lignes remplacent bien les balises

... Le code est donc interprété.

Cependant, ce n’est pas très joli, c’est un peu triste, un peu simple. C’est là que va intervenir le CSS. 

Le CSS, c’est un langage qui permet de styliser le contenu html. Il permet d’obtenir des sites plus agréables avec de la couleur, des mises en pages un peu plus sophistiquée… C’est donc le CSS qui permet de réaliser cette partie esthétique.

Il peut s’implémenter à divers endroits :

• Soit directement dans la balise concernée. Par exemple, si dans mon texte je veux faire apparaître une partie de phrase en orange, je vais intégrer une balise . Si je place cette balise seule, elle ne fera absolument rien. Pour obtenir le résultat souhaité je dois lui ajouter des codes de style. Cela peut par exemple donner : mon morceau de phrase ici mon texte se verra appliquer une couleur et il sera souligné.
• Mais on peut aussi implémenter le code dans la balise. Cette balise qui ne s’affiche pas contient des informations. Et parmi ces informations, il peut y avoir du code CSS. Pour faire simple, je peux demander, depuis la balise, que tous les passages de ma page signalés par une balise
  aient tel aspect. C’est pratique car ça permet de cibler plusieurs balises avec la même class afin de leur donner la même information de style, donc quand vous avez des mises à jour de style à faire, toutes les balises qui ont une class donnée seront modifiées en même temps.
• On peut enfin faire un lien vers un document CSS, c’est-à-dire une page qui va contenir toutes les informations de style, depuis la balise. Ce code n’est donc pas directement dans la page html, elle est chargée en extérieur. Par exemple : qui précise la nature du document relié (stylesheet, feuille de style) et le href qui permet de cibler l’endroit où est localisée cette feuille de style. On en déduit que le document est à la racine, au même niveau que le document index dans mon dossier site. Dans ce document de style, je pourrais déterminer une couleur de background (arrière plan), le style de mes h1 (taille, couleur, mise en gras…).

Je ne vais pas rentrer dans le détail de la création du CSS mais voilà donc comment fonctionne globalement le html, comment les couleurs et autres mises en forme s’affichent.