Tutoriel HTML chapitre 1

groupetma-html-css-banner

Comprendre la logique du web

Bienvenue dans cette série d’articles qui ont pour but de démystifier le HTML. Au terme de ces articles, vous aurez une base sur le fonctionnement du HTML HTML
(Hyper Text Markup Language)
Langage balisé utilisé pour créer une page web. Ex: <balise>Texte</balise>.
et CSS CSS
(Cascading Style Sheet)
Langage utilisé pour styliser une page HTML ou définir la disposition de ses éléments..
qui vous permettrons, si cela vous intéresse, de pousser plus loin et d’apprendre les fonctions avancées de ce langage.

Premièrement, le fonctionnement des sites web

Pour afficher une page web, vous devez lancer logiciel appelé le navigateur web Navigateur web
Firefox, Chrome, Safari, Edge (Internet Explorer)
Logiciel ou application utilisée interpréter le langage HTML et l’afficher à l’écran..
. Voici les quatre plus populaires en 2015 (sans ordre particulier):

Logos des navigateurs

Navigateurs populaires
Google Chrome; Mozilla Firefox; Apple Safari; Microsoft Internet Explorer

Les navigateurs, sont ils tous équivalents?

Le travail du navigateur est d’interpréter les codes HTML, pour afficher un résultat visuel à l’écran. Si votre code dit «Les titres sont en rouge», alors le navigateur affichera les titres en rouge. Cela semble simple mais il s’agit là d’une tâche extrêmement complexe.

Le principal problème, comme il s’agit d’une «interprétation» du code, c’est que les différents navigateurs n’affichent pas le même site exactement de la même façon. Ils ont tous leur propre façon d’interpréter le code HTML. Pourquoi? Cela est dû au fait qu’ils ne connaissent pas toujours les dernières fonctionnalités HTML. Imaginez que c’est comme une traduction dans une autre langue. Deux traducteur qui traduirons un texte arriverons probablement au même sens, mais pas tout à fait dans les mêmes mots.

En plus des nombreux navigateurs disponibles (car il y en a beaucoup plus que quatre!), plusieurs versions de ceux-ci coexistent. Chaque nouvelles version d’un navigateur prend en charge de nouvelles fonctionnalités, par conséquent, un navigateur qui n’est pas mis à jour devient un problème pour les webmestre Webmestre
Webmaster
Personne responsable de l’entretient d’un site web.
, comme toi, qui crée des sites web. Lorsqu’on fais du web, il est conseillé de prendre l’habitude de vérifier régulièrement que notre site fonctionne correctement sur les navigateurs les plus populaires.

Mise a jour impossible pour certains

Bien qu’aujourd’hui les navigateurs se mettent à jour automatiquement (pour la majorité), certains utilisateurs ne pourrons pas profiter des dernières versions. Les utilisateurs de Windows XP, par exemple, ils ne peuvent pas passer à Internet Explorer 9 car il n’est pas disponible pour cette version du OS. Les utilisateurs Apple qui sont toujours avec la version 10.5 de Mac OS X (Leopard) ne pourrons plus mettre à niveau certains navigateurs, ce qui occasionnera bien entendu des désagréments (avec la lecture de vidéo, par exemple).

Compatibilité Windows et Mac

Google Chrome et Mozilla Firefox sont compatibles pour les deux systèmes d’exploitation Système d’exploitation
Operating system (OS)
Environnement qui vous permet d’interagir avec un appareil ou un ordinateur. En autre termes, Mac OS et iOS sont des «OS» de Apple, Windows est le «OS» de Microsoft et Lollipop est un de Androïd.
. Safari est exclusif aux appareils et ordinateur Apple, tandis que Edge (anciennement Internet Explorer), pour sa part, est exclusif à Windows.

Les navigateurs sur mobile

Image navigateur mobule

En plus des navigateurs présentés précédemment, il faut savoir qu’il existe des variantes de ces navigateurs conçues pour les tablettes et mobiles qui sont de plus en plus utilisés. Mais pas de panique car la plupart des navigateurs sur appareils portablesNavigateur pour portables
Application sur les appareils portables tels que téléphones intelligents et tablettes.
sont les mêmes que sur ordinateur, dans une version plus légère, adaptée aux mobiles.

Les navigateurs pour mobiles prennent en charge la plupart des dernières fonctionnalités de HTML. Néanmoins, des différences existent entre ces différents navigateurs mobiles et il est conseillé de tester votre site, dans la mesure du possible, sur ces appareils aussi! La particularité la plus importante: l’écran est beaucoup moins large alors il faudra vérifier que votre site s’affiche correctement.

Logiciels nécessaire pour créer un site web

Il existe toute une multitude de logiciels dédiés à la création de sites web. Mais sachez que vous pouvez très bien créer un site web simplement en utilisant Bloc-note (Windows) ou TextEdit (Mac), les logiciel d’édition de texte intégré par défaut à votre ordinateur. Pour les utilisateurs de Apple, TextEdit doit sauvegarder en texte et non en RTFRTF (Rich Text Format)
Format de sauvegarde de texte «enrichi» permettant d’appliquer certains formatages tel que gras, italique, etc…
. Cette modification doit être faites dans les préférences du logiciel. Mais attendez la fin de cet article avant de vous exécuter 😉

textEdit-save-textes-prefs

Préférence TextEdit pour sauvegarder en texte.

Deux familles de logiciels

Comme je disais plus tôt, il existe plusieurs logiciels qui facilitent la création de site web, qui sont classés en deux catégories:

Les WYSIWYGWhat You See is What You Get
Un WYSIWYG (prononcé [wiziwig]) est une interface «intuitive» qui permet à l’utilisateur de voir directement à l’écran à quoi ressemblera le résultat final.
Ex: un logiciel de mise en page, un traitement de texte ou d’image
: logiciels qui se veulent plus faciles d’emploi. Ils permettent de créer des sites web sans apprendre de langage particulier ou même de coder. Les plus populaires a l’écriture de ces lignes sont

Malgré qu’ils facilitent le processus, il ne sont pas indispensables. Mais même si vous décidez de les utiliser, sachez qu’un bon créateur de site web (comme vous le deviendrez) doit tôt ou tard connaitre le HTML afin de pouvoir modifier le code manuellement au besoin.

Les éditeurs de texte: on peut en général les utiliser pour de multiples langages autres que le HTML. Assurez-vous que votre éditeur de texte sauvegarde votre document en format «.html». Si ce format n’est pas disponible, sauvegardez en format .txt, et changez ensuite l’extentionExtention (d’un fichier)
Lettres à la suite du point à la fin d’un nom de fichier qui détermine la nature de celui-ci. Ils sont parfois masqués par le OS dans les préférences ou options, mais sont tout de même existant.
de ton fichier pour .html.

Dans cette formation, nous utiliseront Adobe Brackets mais vous pouvez pouvez comparer les différents éditeurs HTML sur Wikipédia pour voir lequel vous conviendra le mieux.

code-html-brackets

Exemple de texte HTML dans l’éditeur de texte Brackets.

Pour l’instant, ne vous préoccupez pas de savoir ce que signifie tout ce charabia dans la figure précédente. Je souhaitais simplement vous donner un aperçu de la présentation visuelle du logiciel.

Mon logiciel habituel me permet d’exporter en HTML, c’est bon?

Les fonctions de d’exportation ou de sauvegarde en HTML ne sont pas une bonne façon de créer une page web car le code est souvent très mal écrit. Vous vous souvenez que les navigateur web interprètent le code? Les navigateurs auront de la difficulté à l’interpréter et vous serez forcés de constater que la page HTML créée «automatiquement» avec l’export par votre logiciel sera loin de ressembler à votre page originale.

Par contre, exporter en HTML peut s’avérer une solution raccourcis lorsque vous serez en mesure de corriger le code (dans quelques chapitres).

En résumé

Le Web fait parti d’Internet et a été inventé au début des années 1990.

Le navigateur web est un programme qui permet d’afficher des sites web. Il interprète les langages HTML pour savoir ce qu’il doit afficher.

Il existe de nombreux navigateurs web différents et les principaux sont:

  • Google Chrome;
  • Mozilla Firefox;
  • Microsoft Edge (anciennement Internet Explorer);
  • Apple Safari.

Chacun de ces navigateur affiche les sites web de sa propre manière, qui peut être légèrement différente des autres navigateurs.

Dans ce cours, nous travaillerons dans un programme de type « éditeur de texte » nommé Brackets.

Les logiciels qui permettent d’exporter en HTML donne souvent de très mauvais résultats.

 

Tutoriel HTML chapitre 2

 


Loading...