Tuto HTML

Date de la dernière modification: 21 octobre 2022

Tuto HTML - Apprenez les bases du HTML simplement en suivant pas à pas les tutoriels pour débutants.

La plupart des sites aujourd'hui sont créés via des CMS tel que WordPress, Joomla, Prestashop, qui ne nécessitent pas de rentrer dans le code.
Seulement si vous voulez faire évoluer votre site, améliorer la mise en page, un minimum de bases sont nécessaires.
Le HTML représente le langage de base.
Vous évoluerez ensuite avec le CSS pour la mise en page puis vers le Javascript et le PHP pour rendre vos sites dynamiques.

Histoire du World Wide Web

tuto HTMLUn peu d' histoire et quelques notions essentielles : Le World Wide Web (WWW) a été développé en 1990 au CERN en Suisse (le Centre Européen pour la Recherche Nucléaire) et a été conçu par Tim Berners-Lee avec l'appui de Robert Cailliau.
Tim Berners-Lee propose de créer sur le site web du CERN un ensemble de documents rattachés les uns aux autres pour faciliter la recherche d'informations .
Il introduit alors les premiers documents hypertext.
C'est en rendant public son travail en 1991 qu'il utilise le premier fichier HTML.

La toile mondiale commence à se tisser lorsqu'il crée un lien hypertext sur le serveur de Fermilab aux Etats-Unis avec le site web du CERN.
Tim Berners-Lee crée donc l'architecture du World Wide Web, cette fameuse "toile d'araignée".
Le premier système opérationnel est sur NeXT.
Cette invention va permettre l'essor rapide d'Internet: en 1993, le nombre de sites web atteint les 600 et ne cessera de croître.

Le premier navigateur grand public: Mosaic, fut créer par Marc Anderson et Eric Bina. Marc Anderson fut d'ailleurs par la suite le fondateur de Netscape.
Face au succès croissant d'Internet, un consortium chargé de proposer les standards pour les langages sur Internet est né en 1995: le W3C (le World Wide Web Consortium).

 

DEBUTONS
Pour concevoir votre site, vous devez commencer par le créer sur votre ordinateur.
Pour cela de nombreux éditeurs de texte vous facilitent les choses.

Des éditeurs de texte tels que Sublime Text, Notepad++, Visual Studio Code sont gratuit et relativement simple pour un débutant.
Nous utiliserons ici Visual Studio Code qui est flexible et très bien conçu. Visual Studio Code est open source et supporte un grand nombre de langages grâce à ses extensions.

emoji à retenirLorsque vous commencerez à écrire vos premières pages HTML, écrivez toujours votre code (pas de copier-coller). C'est la seule façon pour mémoriser efficacement ce que vous allez apprendre.

Commençons par télécharger VS Code ici, et choisissez votre plateforme pour le téléchargement.
Lorsque vous l'installez, laissez les options cochées par défaut et cliquez sur suivant. Vous accéderez ensuite à la page d'accueil.

accueil visual studio code

 

Vous pouvez visualiser plusieurs icônes dans la barre de gauche. Nous allons nous intéresser au premier qui est l'explorateur de fichier.
explorateur-vs-code

Sur votre ordinateur, vous allez créer maintenant un nouveau dossier à l'emplacement que vous souhaitez (bureau, documents ...).
Nommez-le comme vous le souhaitez, par exemple "mon-site".

emoji à retenirLorsque vous créez un dossier et par la suite des fichiers html, prenez toujours l'habitude d'écrire en minuscule, sans accent, sans caractères spéciaux et de séparer vos mots par : - (touche 6) ou par _ (touche 8).

Une fois fait, revenez sur VS Code et cliquez sur l'icône de l'explorateur. Ouvrir un dossier va s'afficher. Allez chercher sur votre ordinateur le dossier que vous avez créé.
Approuvez : "Oui je fais confiance aux auteurs".

Votre dossier apparaît sur la gauche dans votre explorateur. Si ce n'est pas le cas, appuyez sur les trois petits boutons à droite et sélectionnez "Editeurs ouverts".

éditeur vs code

 

Cliquez ensuite sur votre dossier et avec un clic droit, sélectionnez nouveau fichier. Nommez-le "index.html".

Passons aux choses sérieuses maintenant et créons notre première page HTML dans le tuto HTML qui va suivre.

 

Merci de suivre et liker 🙂
error

Vous aimez ce blog ? Merci de liker ou passer le mot :)

Retour haut de page