Chapitre N°=1 : Introduction.

Pour le premier chapitre, j’ai décidé de commencer le plus facilement possible et quoi de mieux que de vous donner quelques définitions et quelques explications sur ce que vous allez faire. Les grandes lignes qui vous aideront à comprendre les principes de base du langage.

Ce chapitre contient aussi une partie dédié aux outils et programmes nécessaires pour pouvoir programmer le plus facilement possible.

Avant que vous ne commenciez à lire, sachez que faire un site web n’a rien de sorcier. C’est une tache à la portée de tout le monde et spécialement aux gens motivés.  La lecture de ce tutoriel peut prendre quelques heures à quelques jours, l’important est qu’a la fin vous puissiez vous souvenir de la plupart des commandes ( Je ne vous demande pas de tout apprendre, sinon vous seriez très vite dépassés ) .

Essayez plutôt de lire et de pratiquer, ce sera plus simple. Et puis si vous oubliez un jour une commande, les pages ne vont pas s’autodétruire .

HTML/ CSS : quesaco ?

HTML ( abréviation de Hypertext Markup Language )  est un langage informatique qui permet de créer des pages web grâce à un principe de balisage.

Balisage ???

Le balisage signifie en fait l’utilisation de balises. Les balises sont en quelques sorte des codes qui permettent d’indiquer au navigateur web les informations nécessaire pour qu’il puisse vous afficher le contenu de la page d’une manière définit.

Remarque:

Ne vous attardez pas trop sur les définitions. Il suffit seulement de savoir qu'elles existent. Les comprendre viendra en pratiquant . 

Le HTML a été inventé pour pouvoir écrire des documents hypertextuels liant les différentes ressources d’Internet avec des hyperliens. Aujourd’hui, ces documents sont appelés « page web ».

Bon maintenant que vous savez à peu près ce qu'est le HTML. Vous vous demandez sans doute ce que le CSS vient faire là ...

Le CSS est aussi un langage informatique qui permet de créer un site web.

Ah, on doit connaître juste l’un d’eux alors ...

Très perspicace mais non

Le CSS qui signifie Cascading Style Sheets ou Feuilles de style en cascade au passage est un langage complémentaire au HTML. Les deux ont un rôle bien définit et se complètent, l’un s’occupe de baliser l’autre de la déco des dimensions et de l’affichage.

Remarque:

Dans ce tutoriel histoire que compreniez bien tout, nous allons d’abord commencer par faire du HTML. Après quand tout sera bien clair, on commencera le CSS.

Pour revenir au HTML, ce dernier comprend de nombreuses fonctionnalités : affichage de texte, d’images, de vidéos à un certain point, il permet d’ajouter des applications à votre navigateur (Comme le lecteur vidéo de YouTube par exemple).

Aaah, en parlant de YouTube , si vous possédez un blog vous avez sans doute déjà ajouté une video. Pour se faire, vous avez copiez ceux-ci dans votre paragraphe :  blog qui vous demandez de rajouter un vidéo : ceci ressemblé à ça :

<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/vr_PBOJ0Ehw&hl=fr&fs=1&"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always”></param><embed src="http://www.youtube.com/v/vr_PBOJ0Ehw&hl=fr&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>

<object> </object> en réalité et une balise,< param> </param> l'est aussi. Voila je suis content d’avoir trouvé ce premier exemple.

Différentes versions de HTML :

Le HTML a connu depuis sa création différentes versions qui apportaient chacune leur lot de nouvelles fonctionnalités mais voila, les balises se faisaient nombreuses et les navigateurs aussi, donc certaines balises étaient affichés par un navigateur alors que d'autres étaient affichées par un autre. Cette situation étaient assez difficile à gérer et venait a bout parfois des programmeurs les plus endurcis. Heureusement avec l'avenement du XHTML, des standards ont étés créés ce qui fait du HTML, un language plus abordable et plus facile à aborder.

Pour en revenir à l’histoire, voici les principales innovations que connu le HTML d'après notre amie l’encyclopédie libre « WIKIPEDIA »  :

http://fr.wikipedia.org/wiki/Hypertext_Markup_Language#2000_-_2006_:_XHTML

Comment tout cela fonctionne ?

Votre page se trouve dans un ordinateur distant que nous allons qualifier de serveur. Ce serveur se trouve chez un hebergeur. L’hébergeur étant une société qui  possède pleins de serveurs qui compte plusieurs sites web différents.

Quand vous allez vous connectez à un site web, vous allez visionner des pages. Vous pourrez reconnaître que c’est bien une page en regardant la barre de navigation de votre navigateur,  vous allez en effet voir que cette page porte l’extension .HTML ou .PHP ou encore .xml (pour le PHP il s’agit d’un langage un peu plus développé que le HTML qui permet de rendre votre site plus interactif. J’espère d’ailleurs que je pourrais vous faire un tutoriel sur ce langage).

Pour revenir à notre explication, lorsque votre navigateur est sur une page, il va analyser son code  "le code HTML"  et va l'interpréter, ce qui donnera à la fin ce que vous voyez actuellement sur mon blog. ( par exemple, mettre du texte en gras, insérer un lien hypertext, définir la position d'un paragraphe dans l’espace : milieu ,gauche, droite).

Remarque.
Alors que 'autres languages plus complexes comme le C,C++,java ont besoin de compilation. Le HTML restent un langage simple qui n'a e ce fait pas besoin d'être compilé

Grâce à cela vous aurez une page propre coloré et surtout lisible .

Au secours, avec quel logiciel on fait du HTML ?

Vous possédez déjà la réponse, il s’agit d'un logiciel simple et gratuit, j'ai nommé le bloc-notes sous windows ( Pour linux, désolé je suis un peut ignorant ).

En fait, n’importe quel éditeur de texte convient. Comme je vous l’ai expliqué un peu plus haut, le HTML est un langage relativement basique, il n’a de ce fait pas besoin d’être compilé. C’est votre navigateur qui l’interprète et donc il faut simplement écrire son code et ne se soucier que de ce dernier.

Pour démarrer bloc-notes, il suffit tout simplement d’aller dans sous menu accessoires et de le choisir dans la liste déroulante.

Bloc-notes, le truc que vous avez essayez d'éviter toute votre vie

Néanmoins, bien qu’il vous permette de tout faire, Bloc-notes  reste assez limité. Son gros défaut est que lorsque vous relirez votre code, ce dernier vous paraîtra un peu fouillis et difficile à lire. C’est pour cela que je vous conseille d'utiliser Notepad++, en fait celui-ci aussi est gratuit et ne pèse que quelques mégas. Son gros intérêt est qu’il vous donne les différents éléments d’une couleur différente. Les balises par exemple seront d’une couleur bleu alors que le texte en lui-même sera en noir et les commentaires en vert.

Pour le télécharger : rendez vous ici.

Après l’avoir téléchargé, vous devez l’installer ( n’importe quel répertoire fera l’affaire).

Quand vous lancez le logiciel pour la première fois, allez dans « langage » qui se trouve dans la barre de menu et sélectionnez « html ». Le logiciel sera alors en mesure de distinguer les différents éléments de votre code.

Notepad++

 

Et alors comment je teste mon code

La solution est aussi probablement en votre possession.

Internet Vs Firefox

Il s’agit tout simplement de votre navigateur internet, ou plutôt de vos deux navigateurs internet.

Pourquoi deux ...

En fait, vous allez vous apercevoir probablement durant votre longue carrière de programmeur. Internet Explorer affiche votre page différemment des autres navigateurs.

Heureusement pas tout le temps mais dans quelques cas l’affichage sera diffèrent.

Dans un autre navigateur que je qualifierai de plus tolérant comme Firefox par exemple, l'affichage et l'interpretation des balises sera réspecté quelque soit votre manière de programmaer.

Malheureusement les internautes utilisent les deux navigateurs et vous devez faire en sorte que votre site web soit bien affiché dans n’importe quel navigateur.

Comment ?

Et bien, en essayant de faire un code le plus claire possbile et qui suit la plupart des regles académiques que je vais m’atteler à vous expliquer durant tout le tuto.

Ah oui, je vois que certains d’entre vous vont choisir la méthode la plus simple. C'est-à-dire mettre en fin ou en début de page la célèbre phrase «  Ce site web et optimisé pour firefox 3.0 »

Noooon, ne faite pas ça vous ne feriez que vous priver d’un grand nombre de visiteurs, et puis les sondages même s'ils sont en perpétuel changement démontre que les navigateurs qui utilisent internet explorer sont plus nombreux que ceux utilisant les autres navigateurs.

 

Fin du premier chapitre. Alors, je vous ai bien dit que le HTML c'était une partie de plaisir. Et encore ce n'est que la partie théorique, pour la pratique vous allez  vous amuser comme des malades en essayant tout ce que vous allez apprendre au fil des chapitres.
D'ailleurs Pour le prochain, le temps sera venu de faire notre première Page Web ensemble. Alors, à bientôt ...