ALGORITHMIQUE PROGRAMMATION INTERNET - NIVEAU 1

Transcription

1 ALGORITHMIQUE PROGRAMMATION INTERNET - NIVEAU 1 Code NFA053, 6 ECTS

2

3 Chapitre 01 HTML / STRUCTURE D UN DOCUMENT

4 Le plus grand soin a été apporté à la réalisation de ce support pédagogique afin de vous fournir une information complète et fiable. Cependant, le Cnam Champagne-Ardenne n'assume de responsabilités, ni pour son utilisation, ni pour les contrefaçons de brevets ou atteintes aux droits de tierces personnes qui pourraient résulter de cette utilisation. Les exemples ou programmes présents dans cet ouvrage sont fournis pour illustrer les descriptions théoriques. Ils ne sont en aucun cas destinés à une utilisation commerciale ou professionnelle. Le Cnam ne pourra en aucun cas être tenu pour responsable des préjudices ou dommages de quelque nature que ce soit pouvant résulter de l'utilisation de ces exemples ou programmes. Tous les noms de produits ou autres marques cités dans ce support sont des marques déposées par leurs propriétaires respectifs.

5 Ce support pédagogique a été rédigé par Maxime MONNY, enseignant vacataire au Cnam Champagne- Ardenne. Copyright Centre d'enseignement A Distance du Cnam Champagne-Ardenne. Tous droits réservés. L'utilisation du support pédagogique est réservée aux formations du Cnam dispensées à distance. Tout autre usage suppose l'autorisation préalable écrite du Cnam Champagne-Ardenne. Toute utilisation, diffusion ou reproduction du support, même partielle, par quelque procédé que ce soit, est interdite sans autorisation préalable écrite du Cnam Champagne-Ardenne. Une copie par xérographie, photographie, film, support magnétique ou autre, constitue une contrefaçon passible des peines prévues par la loi, du 11 mars 1957 et du 3 juillet 1995, sur la protection des droits d'auteur.

6

7 CHAPITRE 01 - STRUCTURE D UN DOCUMENT HTML Avant toute chose, il est indispensable de vous avertir sur la teneur de ce support d enseignement. Ce support est une initiation et non pas un catalogue exhaustif de l ensemble des fonctionnalités du langage HTML. Une fois les notions acquises à travers ce support, si vous avez besoin de précisions sur un point précis, je vous conseille une recherche sur un moteur de recherche réputé. N hésitez pas non plus à me solliciter lors de session de chat sur des points qui vous intéresse. 1. EXPLICATION SUR LE LANGAGE HTML Le langage HTML (HyperText Markup Language) n est pas un langage de programmation mais un langage de mise en page. Avec l apparition du Web, ce langage a été conçu pour unifier la mise en page de contenu lisible sur toutes les plates formes et tous les logiciels qui l interpréteront. Le HTML est un langage utilisé pour construire des documents hypertextes pouvant être visualisé sur le web ou par n importe quelle application capable d interpréter le HTML. On définit la notion de documents hypertextes comme étant des documents ayant un lien entre eux. En effet, sur le web, on navigue de page en page grâce à ces liens hypertextes. On définit le langage HTML comme un langage interprété car il est composé de balises. Ces balises permettent de définir la mise en page pour le texte désigné entre 2 balises (une balise ouvrante et une fermante) comme on peut le constater dans l exemple ci-dessous : une phrase avec un mot en <b>gras</b> Résultat dans le navigateur : ALGORITHME PROGRAMMATION INTERNET NIVEAU 1 1

8 une phrase avec un mot en gras Seul le mot «gras» a subit une mise en forme car il est entouré d une balise ouvrante «b» et une balise fermantes «/b». Les balises fermantes sont identifiées par un anti slash. Ainsi la lettre clef «b» qui est la première lettre du mot anglais «bold» («gras» en français) entoure le mot» gras par une balise ouvrante et fermante afin de délimiter la partie de la phrase à mettre en gras. C est pour cette raison que le langage HTML est qualifié de langage à balises puisque la mise en page du texte s effectue sur le fait de placer des balises aux endroits du texte à mettre en page. En conséquence, il suffit de prendre un texte brut que l on balise afin de le mettre en forme. Ensuite, charge au navigateur d interpréter ces balises afin de faire apparaître au visiteur du site Internet le rendu final du texte mis en page. HTML / STRUCTURE D UN DOCUMENT 2

9 2. STRUCTURE DU HTML Afin de faciliter les explications qui vont suivre, voici tout de suite un exemple de votre première page Web la plus simple possible : le fameux «Hello World!», fichier portant le nom de hello_world.html et contenant le texte suivant : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" xml:lang="fr" lang="fr"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>hello World</title> </head> <body> Hello World!!! </body> </html> Décrivons maintenant cette première page de code : - La première ligne est toujours la DTD (Définition du Type de Document) appelé aussi DOCTYPE. Cette ligne permet donc d indiquer au navigateur le type et la version du langage HTML utilisé. Le langage HTML ayant évolué au fur et à mesure, il est important d indiquer sa version afin de le navigateur interprète au mieux le rendu désiré. Je vous conseille de recopier à l identique cette première ligne pour chaque nouveau document HTML. - La balise ouvrante <html> et la balise fermante </html> : commande de début et de fin du document HTML ALGORITHME PROGRAMMATION INTERNET NIVEAU 1 3

10 - <head> </head> et <body> </body> : l entête et le corps du document HTML. L entête contient l ensemble des informations non affichées du document HTML, notamment le titre du document (contenu entre les balises <title> </title>) ainsi que l ensemble des balises <meta> qui représentent l ensemble des caractéristiques du document et que nous étudierons un peu plus tard. Le corps du document (<body>) représente le texte qui va s afficher dans le navigateur. Ainsi dans cette exemple, seule la phrase «Hello World!!!» s affichera dans le navigateur. 3. DTD ET BALISES META 3.1. LES DTD Différentes DTD existent et sont en vigueurs actuellement. Pour les novices, je vous conseille pour le moment d utiliser la DTD suivante qu il suffit de recopier en premier lors de la création d un nouveau document HTML : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ALLER +LOIN Pour les auditeurs déjà familiarisés avec le HTML et qui désirent plus d information sur les différentes DTD et leurs utilisations, je vous renvoie sur une copie PDF d un site Internet (fichier «ANNEXE01 - ALSACREATIONS.COM - LES DTD.pdf») qui explique et énumère précisément les différences entre chaque DTD LES BALISES META Mise à part le titre de la page (<title> </title>), les informations contenu dans l entête (<head> </head>) d un document html (<html> </html>) sont les balises <meta>. Toutes les informations contenu dans cette entête ne seront pas affichées dans le navigateur. Ces «META- TAGS» sont essentiellement destinés aux robots des moteurs de recherche qui se servent de ces informations pour renseigner correctement le moteur de recherche (Titre de la page, description du site, mots-clefs, auteur, etc ) Voici à nouveau notre premier exemple de code HTML «Hello World» enrichie de balises META afin de bien décrire son contenu aux robots des moteurs de recherche : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" HTML / STRUCTURE D UN DOCUMENT 4

11 " <html xmlns=" xml:lang="fr" lang="fr"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="content-language" content="fr" /> <title>hello World</title> <meta name="description" content="description de ma premiere page Web" /> <meta name="keywords" content="mots, clef, separés, par, des, virgules" /> <meta name="author" content="nom de l auteur" /> <meta name="robots" content="all" /> </head> <body> Hello World!!! </body> </html> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> Cette balise indique au moteur de recherche mais aussi au navigateur le codage utilisé pour ce fichier. Le codage UTF8 est recommandé pour son universalité. Il permet notamment de limiter le problème des caractères spéciaux tel que les accents qui doivent être codés si on utilise la table iso-latin1 par exemple. <meta http-equiv="content-language" content="fr"> Cette balise permet de définir la langue de cette page au moteur de recherche. Ici nous avons affaire à une page «fr» donc écrite en langue française. <meta name="description" content="description de ma premiere page Web"> Cette balise permet d indiquer la description de cette page que l on désire voir apparaître dans le moteur de recherche. <title>hello World</title> Cette balise permet d indiquer le titre de cette page que l on désire voir apparaître dans le moteur de recherche. ALGORITHME PROGRAMMATION INTERNET NIVEAU 1 5

12 <meta name="keywords" content="mes, mots, clef, separés, par, des, virgules"> Cette balise indique les mots clefs par ordre d importance que le moteur de recherche doit mettre en relation avec le contenu de notre page HTML. <meta name="author" content="nom de l auteur"> Cette balise vous permet de préciser le nom de l auteur. Cependant, il semble que peu de moteurs de recherche exploitent réellement cette information. <meta name="robots" content="instructions pour les robots"> Cette balise vous permet d indiquer aux moteurs de recherche si vous souhaitez que votre site soit ou non, indexé par eux. Les instructions possibles sont : All (valeur par défaut) : le site sera entièrement référencé (pages et liens hyper textes). None : vos pages ne sont pas indexées. Index : seule la page qui définit ce meta-tag sera indexée. NoIndex : la page n est pas indexée, mais les liens définis pourront éventuellement être indexés. Follow : autorise les robots à suivre les liens hyper textes définis. NoFollow : pour le contraire. Exemples : <meta name="robots" content="none"> <meta name="robots" content="index,nofollow"> Même si de nos jours il est important de renseigner les balises META de vos pages, les moteurs de recherche devenant de plus en plus «intelligents», ces derniers ont de moins en moins besoins de ces informations meta que vous renseignez vous-même, rendant certaines balises META complètement obsolètes (ex : <meta name="keywords" content=" ">). ALLEZ +LOIN Si vous avez envie de pousser un peu plus loin le sujet sur les balises META ainsi que sur leurs conséquences pour les moteurs de recherche, je vous conseille alors une autre page Internet que je vous ai capturé en PDF «ANNEXE02 - ALSACREATIONS.COM - LES META.pdf» HTML / STRUCTURE D UN DOCUMENT 6

13 4. LA HIERARCHIE DES TEXTES (TITRES, PARAGRAPHES ET LISTES) 4.1. LES TITRES Si on prend exemple sur ce support, vous vous situez dans une section de second niveau «4.1. LES TITRES». Ce support de cours utilise donc différents titres de différentes tailles (ou de différents niveaux). En HTML, vous avez également la possibilité de faire des titres grâce à la balise <Hn>. La lettre «n» représentant la taille allant de 1 (pour le plus grand) à 6 (pour le plus petit). <h1>mon titre de taille 1, taille la plus grande</h1> Il est à noter que le saut de ligne généré à la suite du titre est assez important. Exemple : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" xml:lang="fr" lang="fr"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>titres</title> </head> <body> <h1>du</h1> <h2>plus</h2> <h3>grand</h3> ALGORITHME PROGRAMMATION INTERNET NIVEAU 1 7

14 <h4>au</h4> <h5>plus</h5> <h6>petit</h6> </body> </html> HTML / STRUCTURE D UN DOCUMENT 8

15 Résultat obtenu : Légende. Utilisation des titres LES PARAGRAPHES Le paragraphe se détermine grâce à la balise <p> </p>. <p>texte de mon paragraphe</p> La balise <P> génère un saut de ligne qui peut varier suivant le navigateur, c'est son inconvénient. Il est tout à fait possible d aligner le texte de manière justifié, à gauche, au centre ou à droite grâce à la propriété align C est que qui est fait dans l exemple et dans cet ordre pour le paragraphe4, 5, 6 et 7. ALGORITHME PROGRAMMATION INTERNET NIVEAU 1 9

16 Exemple : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" xml:lang="fr" lang="fr"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>hello World</title> </head> <body> <p>mon premier paragraphe</p> <p>mon second paragraphe</p> <p>mon troisieme paragraphe</p> <p align="justify">mon quatrième paragraphe justifié, ce qui veut dire que les espaces entre les mots sont plus ou moins agrandis afin que les longueurs des phrases soit toujours de la même longueur</p> <p align="left">paragraphe aligné à gauche</p> <p align="center">paragraphe centré</p> <p align="right">paragraphe aligné à droite</p> HTML / STRUCTURE D UN DOCUMENT 10

17 </body> </html> Résultat obtenu : Légende. Utilisation des paragraphes. ALGORITHME PROGRAMMATION INTERNET NIVEAU 1 11

18 4.3. LES LISTES Il est possible en XHTML de faire des listes ordonnées, non ordonnées ou descriptives. La liste non ordonnée ou liste à puce est composée de 2 balises XHTML UL et LI. La balise UL va déterminer le début et la fin de la liste : <ul> //La liste </ul> La balise LI va déterminer chaque élément de la liste : <ul> <li> Element 1</li> <li> Element 2</li> </ul> Ce qui donne : Légende. Liste non ordonnées La liste ordonnée est composée de 2 balises XHTML OL et LI. La balise OL va déterminer le début et la fin de la liste : HTML / STRUCTURE D UN DOCUMENT 12

19 <ol> //La liste </ol> La balise LI va déterminer chaque élément de la liste : <ol> <li> Element 1</li> <li> Element 2</li> </ol> Ce qui donne : Légende. Liste ordonnées La liste descriptive est composée de 3 balises XHTML DL, DT et DD. La balise DL va déterminer le début et la fin de la liste : <dl> //La liste </dl> <dl> La balise DT va déterminer chaque terme de la liste : <dt>terme 1</dt> ALGORITHME PROGRAMMATION INTERNET NIVEAU 1 13

20 <dt>terme 2</dt> </dl> La balise DD va déterminer chaque description de chaque terme de la liste : <dl> <dt>terme 1</dt> <dd>description du terme 1</dd> <dt>terme 2</dt> <dd>description du terme 2</dd> </dl> Résultat obtenu : Légende. Liste descriptive 4.4. FILET HORIZONTAL Il existe également le filet horizontal, très pratique pour séparer les chapitres, cela donne plus de clarté au document HTML. Il est très utilisé aussi pour marquer la fin du document. Dans ce cas, on trouve en général des informations sur le copyright. Exemple : HTML / STRUCTURE D UN DOCUMENT 14

21 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" xml:lang="fr" lang="fr"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>titres</title> </head> <body> <p align="justify">une paragraphe justifié - une paragraphe justifié - une paragraphe justifié - une paragraphe justifié - une paragraphe justifié - une paragraphe justifié - une paragraphe justifié - une paragraphe justifié - une paragraphe justifié - une paragraphe justifié - une paragraphe justifié - une paragraphe justifié</p> <hr/> <p align="right">copyright</p> </body> </html> Résultat obtenu : ALGORITHME PROGRAMMATION INTERNET NIVEAU 1 15

22 Légende. Filet horizontal IMPORTANT On remarque que la balise <hr/> possède un «/» dans son écriture. Le fait d écrire <hr/> est un raccourcis d écriture des balises ouvrante et fermante <hr></hr>. En effet, comme nous avons aucun texte à mettre entre la balise ouvrante et la balise fermante alors on peut utiliser le raccourcis <hr/> qui indique que cette balise est à la fois ouvrante et fermante. IMPORTANT En utilisant les DTD XHTML, il est obligatoire de fermer toutes les balises ouvertes. C est pour cette raison que je vous conseille, au moment où vous tapez votre code et que vous écrivez la balise ouvrante, décrire tout de suite la balise fermante et de placer ensuite le texte entre les 2 balises (ouvrante et fermante). Cette astuce permet d éviter l oubli de la balise fermante. HTML / STRUCTURE D UN DOCUMENT 16

23 4.5. PASSER UNE LIGNE La balise <br/> force le passage d une ligne. Même si les paragraphes passent des lignes automatiquement, on peut avoir envie d espacer un peu plus nos paragraphes. Exemple : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>br</title> </head> <body> <p>un paragraphe</p> <br/> <br/> <br/> <br/> <p>un second paragraphe séparé du premier par plusieurs espaces</p> </body> </html> ALGORITHME PROGRAMMATION INTERNET NIVEAU 1 17

24 Résultat obtenu : Légende. passer une ligne 5. MISE EN FORME DU TEXTE ET POLICE 5.1. MISE EN FORME DU TEXTE Il est possible de mettre en gras, souligné, mettre en italique ou encore mettre en télétype un texte. <b>texte en gras</b> <br/> <i>texte en italique</i> <br/> <u>texte souligné</u> <br/> <tt>texte Télétype</tt> <br/> HTML / STRUCTURE D UN DOCUMENT 18

25 <b><u>combinaison de texte en gras et souligné</u></b> Résultat obtenu : Légende. Mise en forme du texte IMPORTANT Il est possible de combiner ces différentes mises en forme de texte par contre il est très important d ouvrir et de fermer les balises dans le même ordre. C est une obligation liée à la DTD XHTML. Ecriture CORRECTE : <b><u>combinaison de texte en gras et souligné</u></b> Ecriture INCORRECTE : <b><u>combinaison de texte en gras et souligné</b></u> ALGORITHME PROGRAMMATION INTERNET NIVEAU 1 19

26 5.2. MISE EN FORME DU PARAGRAPHE Il existe d autres balises de mise en forme des paragraphes ou d une partie du paragraphe. Certaines génèrent un passage à la ligne automatique, et d autre non. <h3><u>balises formatant un paragraphe complet</u></h3> <cite>citation (référence d'un ouvrage)</cite> <blockquote>citation (texte extrait d'un ouvrage)</blockquote> <address>paragraphe représentant<br/>une adresse</address> <br/> <br/> <h3><u>balises formatant seulement une partie d'un paragraphe</u> (pas de passage à la ligne automatique à la fin de la balise)</h3> <em>mise en italique</em> <tt>style machine à écrire</tt> <strong>mise en valeur (généralement traduit en gras)</strong> ^{placer un texte en exposant} _{placer un texte en indice} Résultat obtenu : HTML / STRUCTURE D UN DOCUMENT 20

27 Légende. Balises formatant les paragraphes ou partie LES ATTRIBUTS POUR LA MISE EN PAGE La technique est simple, il suffit d ajouter un attribut à la balise et ainsi spécialiser la commande. Nous étudierons plusieurs attributs tout au long du cours et les combinaisons possibles avec les balises. <balise attribut="valeur-de-l-attribut"> Nous avons vu précédemment que les paragraphes pouvaient être alignés selon ce principe : <p align="justify">paragraphe justifié</p> <p align="left">paragraphe aligné à gauche</p> <p align="center">paragraphe centré</p> <p align="right">paragraphe aligné à droite</p> ALGORITHME PROGRAMMATION INTERNET NIVEAU 1 21

28 5.4. CHOIX ET TAILLE DE POLICE On peut jouer sur le choix et la taille de la police, je vous laisse découvrir le mécanisme à travers cet exemple. <h3><u>utilisation DE LA TAILLES ABSOLUES</u></h3> <font size="1">taille</font> <font size="2">de</font> <font size="3">police</font> <font size="4">variant de 1 à 7</font> <font size="5">de plus</font> <font size="6">en plus</font> <font size="7">grande</font> <br/> <hr/> <h3><u>utilisation DE LA TAILLES RELATIVES</u></h3> <font>police dont la taille est standard</font> <font size="-1">police dont la taille est inférieure de 1</font> <font size="+1">police dont la taille est supérieure de 1</font> <br/> <hr/> <h3><u>exemples DE POLICES</u></h3> HTML / STRUCTURE D UN DOCUMENT 22

29 <font face="arial">police Arial</font> <br/> <font face="times">polices Times</font> <br/> <font face="courier">police Courier</font> <br/> <font face="verdana">police Verdana</font> <br/> <hr/> <font face="verdana" size="1">police verdana de taille 1</font> Résultat obtenu : ALGORITHME PROGRAMMATION INTERNET NIVEAU 1 23

30 Légende. Utilisation des différentes polices et modification des tailles ALLER + LOIN Si l utilisation des polices du Web se résume dans la plupart des cas à ces 4 polices sur l ensemble des plates-formes, l utilisation des polices peut être faite de manière plus complexe. Si vous avez envie d approfondir, je vous invite donc à lire la capture de site en PDF «ANNEXE03 - LA TYPOGRAPHIE DU WEB.pdf». HTML / STRUCTURE D UN DOCUMENT 24

31 6. LES COMMENTAIRES Il est possible d ajouter à n importe quel endroit d un code HTML un commentaire afin de vous aider à vous repérer dans votre fichier de code HTML. Ces commentaires ne s afficheront pas dans l affichage final. Ci-dessous est repris l exemple du «Hello World» mais cette fois-ci agrémenté de commentaire afin de rendre cet exemple plus compréhensible. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <!-- DEBUT DU FICHIER HTML --> <html xmlns=" <!-- DEBUT DE L'ENTETE --> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>hello World!</title> </head> <!-- FIN DE L'ENTETE --> <!-- DEBUT DU CORPS DU DOCUMENT --> <body> Hello World! </body> <!-- FIN DU CORPS DU DOCUMENT --> </html> <!-- FIN DU FICHIER HTML --> ALGORITHME PROGRAMMATION INTERNET NIVEAU 1 25

32 IMPORTANT Il est vivement conseillé d utiliser les commentaires. Ils vous servent à vous repérer dans votre code lors de son écriture mais aussi lors de sa reprise plusieurs temps après ou encore pour un autre webmaster qui reprendrait votre code, cela aide à expliquer votre logique à ce moment précis. 7. VALIDATION DU CODE PAR LA W3C Il est important, une fois une page terminée, de vérifier si son code ne comporte pas d erreur. Une erreur n est pas forcément lisible dans le rendu donné par le navigateur. De plus cette erreur est plus ou moins lisible sur tel ou tel navigateur selon ces critères d interprétation du HTML. L oublie d une fermeture de balise, une erreur dans un attribut, etc c est exemple d erreur sont très courantes et donc il est conseillé de vérifier son code sur le site de la W3C. Le World Wide Web Consortium, abrégé par le sigle W3C, est un organisme de standardisation à but non lucratif, fondé en octobre 1994 comme un consortium chargé de promouvoir la compatibilité des technologies du World Wide Web telles que HTML, XHTML, XML, RDF, CSS, PNG, SVG et SOAP. Le W3C n'émet pas des normes au sens européen, mais des recommandations à valeur de standards industriels. C est à partir de ces recommandations que les navigateurs sont développés par les éditeurs. Ainsi plus vous respecterez les recommandations de la W3C, plus vos pages auront de chances d être compatibles avec un maximum de navigateurs. HTML / STRUCTURE D UN DOCUMENT 26

33 Vous pouvez valider vos fichiers en ligne ou en chargeant un fichier sur votre ordinateur ou encore en saisissant directement le code sur le site comme l indique la copie d écran ci-dessous. Je vous conseille d utiliser le deuxième onglet, la validation par chargement du fichier directement de son ordinateur. Légende. - Validation de son fichier source HTML par chargement sur le site de la W3C. Une fois le bouton «Check» cliqué, le site de la W3C va vous indiquer si votre site est conforme ou non. Dans le second cas, il vous indiquera les erreurs et les lignes où les erreurs se situent ainsi que la cause. Même si l ensemble est en anglais, je vous conseille absolument d utiliser ce principe dès vos premiers exercices afin de vous assurer de votre code. ALGORITHME PROGRAMMATION INTERNET NIVEAU 1 27

34 8. EXERCICES 8.1. INSTALLATION D UN EDITEUR DE TEXTE AVANCE : NOTEPAD++ Pour écrire du code html, l éditeur le plus simple possible, comme le bloc-notes fourni avec Windows, est suffisant. On ouvre le bloc notes, on code son HTML et on enregistre en faisant attention de préciser l extension «.html» comme sur la copie d écran ci-dessous. Le rendu est directement vérifiable dans son navigateur par défaut en double cliquant sur le fichier HTML. Légende. Ecriture d un fichier HTML sous Bloc Notes. Remarquez que le type est «Tous les fichiers» et que l extension «.html» est précisée dans le nom du fichier. Astuce Windows Afin de ne pas avoir d erreur sur les extensions de fichiers Windows, je vous conseille d afficher les extensions de fichiers sous Windows en ouvrant le «Panneau de configuration» > Sélectionnez «Options des dossiers» > Allez dans l onglet «Affichage» > Décochez l option «Masquer les extensions des fichiers dont le type est connu». HTML / STRUCTURE D UN DOCUMENT 28

35 ALGORITHME PROGRAMMATION INTERNET NIVEAU 1 29

36 Même si le bloc Notes est suffisant, je vous conseille un éditeur de texte avancé tel que Notepad++. En effet cet éditeur de textes avancé vous offre des avantages qui vous feront gagner du temps dans vos développements. Parmi ces avantages, il y a le surlignage du code pour une meilleur compréhension du texte, la numérotation des lignes, le regroupement des blocs, etc Avantages que vous allez tout de suite constater dans la copie d écran suivante. De plus ce logiciel est gratuit car sous licence GPL, donc aucune raison de s en priver. Légende. Editeur GPL de texte avancé : Notepad++ Il est donc conseiller de télécharger ce logiciel à travers le site de l éditeur ( et de l installer sur vos machines. Plus vite vous l utiliserez, plus vite vous vous y HTML / STRUCTURE D UN DOCUMENT 30

37 habituerez et ainsi gagnerez du temps le jour de l examen. Notepad++ sera installé sur le PC Windows le jour de l examen. ALGORITHME PROGRAMMATION INTERNET NIVEAU 1 31

38 8.2. HELLO WORLD Le premier exercice consiste à réécrire le code du script HTML «Hello World» à l aide de Notepad++ tel qu il est décris dans la partie «2. STRUCTURE DU HTML». Une fois le code recopié, vous le validerez sur le site de la W3C ( et vous afficherez son rendu dans votre navigateur par défaut EXEMPLE DU COURS A REALISER Pour ce premier cours, et afin de ce familiariser avec tous ces nouveaux concepts, je vous conseille de reprendre tous les scripts en exemple dans ce cours, de le recopier dans Notepad++ afin de les assimiler et de les tester dans votre navigateur par défaut. Je vous conseille également de tester chaque script recopié sur le site de validation de la W3C ( afin de vous assurer que vous n avez rien oublié. Un conseil : évitez le copier-coller, vous n assimilerez rien de cette manière! 8.4. REPRODUCTION D UNE COPIE D ECRAN A l aide de cette copie d écran et en utilisant le moins possible votre support de cours, essayez de reproduire la copie d écran ci-dessous. Si vous arrivez à reproduire à l identique cette page sans utiliser le support, c est signe que ce cours est parfaitement assimilé! A vous de vous évaluer à ce niveau HTML / STRUCTURE D UN DOCUMENT 32

39 ALGORITHME PROGRAMMATION INTERNET NIVEAU 1 33