Cette partie est la suite du chapitre préédent. Nous avions été maloncontreusement coupés, à cause d'une sombre histoire de mots dépassés .

Heureusement, j'ai décidé que vous ne seriez pas les vistimes de cet incident. De ce fait, je n'ai infligé aucun dommage à mon clavier qui demeure intact, et au lieu d'aller me questionner sur l'utilité réélle des blogs qui n'est apparement pas d'ecrire des articles utiles, mais plutot de photographier le plafond  ,encore mieux son Hamster ou meme preferer les phrases sobres du genre :  ce matin j'ai mangé un croissan ( Ah, dsl c'est facebook ça ); j'ai décidé de continuer d'écrire pour toi publique ...

Un peu de pratique

L'heure est venue de créer votre première page.
TU VAS LA FERMER OUI ? c’est la millième fois que j’entend ça

Désolé :

1- Créez un répertoire (ou vous voulez), cette partie n’est pas essentielle mais vous en aurez vite besoin dans de prochains chapitres.

2- ouvrez Notepad++

Ceci est le code dont je me suis servi au début pour vous donner une idée de la structure d’une page.
 

3-  Copié-collé le dans votre page.

Au passage, si vous avez bien choisi HTML dans langage comme je vous l’avais expliqué précédemment. Vous devriez voir les balises d’une couleur bleu, et les attributs d’une couleur rouge ( Comme les versions de Notepad++, changent, l’essentiel est que les balises et les attributs soient de deux couleurs différentes ).

4-  Faites Fichier à Enregistre sous.

Dans le nom du fichier mettez ce que vous voulez(index, de préférence ). Et dans type choisissez « Hypertext Makup Langage ».

5-  Sauvegardez puis quittez.

6-  Allez dans votre dossier puis double cliquez sur le fichiez que vous venez de créer.

            Le navigateur web va ouvrir une page vierge...

Bravo !!!, vous venez de créer votre première page WEB et elle est blanche ...

Ce tuto de *******, ça fait 15 minutes que je me ************* à ****** pour sa !!!!!!

Mais ne vous énervez pas comme ça, vous avez fait du très bon travail .

Déjà les balises qui se trouvent dans le document, ne sont pas apparu dans le navigateur ce qui veut dire que le navigateur les a traduites en quelque sorte. En plus si vous allez regarder la fenêtre dans la barre des taches vous allez voir : « Cou cou je suis ton pire cauchemar »

Eh oui, c'est la phrase dans la balise <title> </title>.

Enfin, si vous n’estes toujours pas convaincus, vous pouvez toujours aller dans body et écrire ce que vous voulez entre la balise suivant :

<h1> </h1>.

Exemple :

     7- Réenregistrez la page et ouvrez la de nouveau.

Remarque:

La balise dans laquelle nous avons inséré notre texte est une balise qui sert normalement à ecrire des titres. Nous la retrouverons dans le prochain chapitre.

Index.html ou index.php

Si vous avez un jour prêté attention à votre barre de navigation d’internet vous avez sans doute déjà vu le mot index.

En fait le livre de la jungle version internet, veut que index soit donné à la page qu’on veut afficher en premier.

Je vous donne un exemple, je veux par exemple allez sur un site qui s’appelle gogo.com quand je m’y connecte c’est comme si je rentrais dans le dossier de se site. Ce dossier contient plusieurs pages qui ont un nom différent. La page qui s’appellera index sera la page que j’afficherai sur mon navigateur.

Remarque :

« index.html » doit bien être écrite sous cette forme, c'est-à-dire en minuscules et porter une extension à la fin.

Si le site se trouve dans un dossier qui contient un autre dossier qui contient une page appelée index.html, la page html se trouvant dans le premier dossier et non le sous dossier sera affiché.

Les commentaires

Disponibles dans absolument tous les langages, les commentaires vous servent de repère afin que vous puissiez comprendre ce que vous avez fait.

C’est comme si vous vous parliez à vous même en quelque sorte.

Ça ne serre a rien alors.

Détrompez-vous …

Imaginez que vous quittiez votre site pendant 3 mois, et que passé se délai vous vouliez corrigé un bug graphique que vous venez de remarquer. Dans ce cas le commentaire vous aidera a mieux comprendre ce que vous avez fait.

D’autant plus que votre page ne va pas contenir 5 ou 10 lignes comme maintenant mais bien des centaines de lignes.

On les ecis de la manière suivante : <!-- commentaire -->

Exemple :

Fini pour cette deuxieme partie  .

Alors bien ou pas, et ça n'est rien. Dans le prochain chapitre, on va rentrer dans le vif du sujet. Ce sera d'ailleur la partie la plus improtante de tout le tutoriel, puisqu'elle vous apprendra a utiliser la plupart des balises HTML disponibles ( Vous souhaitez la lire ?? ça vous coutera 20 commentaires )...

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 :

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).

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.

Et alors comment je teste mon code

La solution est aussi probablement en votre possession.

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.