ALGORITHMIQUE PROGRAMMATION INTERNET - NIVEAU 1

Save this PDF as:
 WORD  PNG  TXT  JPG

Dimension: px
Commencer à balayer dès la page:

Download "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> <sup>placer un texte en exposant</sup> <sub>placer un texte en indice</sub> 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

Chapitre 7. extended HyperText Markup Language (XHTML)

Chapitre 7. extended HyperText Markup Language (XHTML) Chapitre 7 extended HyperText Markup Language (XHTML) Objectifs Le Web statique : Du HTML au XHTML Apprendre à manipuler les éléments XHTML Attention : projet évalué plutôt sur la «qualité» du code XHTML

Plus en détail

Cours de XHTML. <balise attribut="valeur" attribut2="valeur2" >chaîne de caractères</balise>

Cours de XHTML. <balise attribut=valeur attribut2=valeur2 >chaîne de caractères</balise> Cours de XHTML Introduction XHTML n'est pas un langage de programmation proprement dit, il s'agit simplement d'un langage de balisage dont le rôle est de formaliser l'écriture d'un document web avec des

Plus en détail

Conception de Sites Web dynamiques HTML HTML XHTML 23/09/2008. Conception de Site Webs Interactifs. Cours 3. Patrick Reuter

Conception de Sites Web dynamiques HTML HTML XHTML 23/09/2008. Conception de Site Webs Interactifs. Cours 3. Patrick Reuter Conception de Site Webs Interactifs Conception de Sites Web dynamiques Cours 3 Patrick Reuter Déroulement Pages web statiques (HTML/XHTML) Mise en forme avec feuilles de styles (CSS) Programmationcôté

Plus en détail

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1- transitional.dtd">

<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/tr/xhtml1/dtd/xhtml1- transitional.dtd> IUT Nice Côte d Azur Prog. Web Département informatique 2007-2008 TP1 HTML ET XHTML 1. Le document xhtml minimal Le langage xhtml est la dernière évolution du html. C est une version plus stricte du html,

Plus en détail

Introduction à HTML: HyperText Markup Language

Introduction à HTML: HyperText Markup Language CREATION WEB HTML ET CSS Introduction à HTML: Le HTML, HyperText Markup Language, est un langage de balisage qui définit la structure logique d un document WWW diffusé sur le Web. La mise en forme de la

Plus en détail

WEBMESTRE : CONCEPTION DE SITES ET ADMINISTRATION DE SERVEURS WEB

WEBMESTRE : CONCEPTION DE SITES ET ADMINISTRATION DE SERVEURS WEB WEBMESTRE : CONCEPTION DE SITES ET ADMINISTRATION DE SERVEURS WEB Installation et administration d un serveur web Module 25793 TP A5 (1/2 valeur) Chapitre 15 Administration distante : Webmin et Telnet

Plus en détail

Introduction aux technologies WEB. Pr. Hajar IGUER

Introduction aux technologies WEB. Pr. Hajar IGUER Introduction aux technologies WEB Pr. Hajar IGUER hajar.iguer@uic.ac.ma Fonctionnement du WEB 1. Le navigateur effectue une requête spécifiée à travers l URL 2. Le serveur retourne un flot de données 3.

Plus en détail

Partie HTML TD 1 : Les bases du HTML

Partie HTML TD 1 : Les bases du HTML Partie HTML TD 1 : Les bases du HTML 1 Introduction HTML = HyperText Marked Language HTML est un langage permettant de décrire des données affichables sous forme de page par un navigateur Web. HTML peut

Plus en détail

WEBMESTRE : CONCEPTION DE SITES ET ADMINISTRATION DE SERVEUR WEB

WEBMESTRE : CONCEPTION DE SITES ET ADMINISTRATION DE SERVEUR WEB WEBMESTRE : CONCEPTION DE SITES ET ADMINISTRATION DE SERVEUR WEB ALGORITHMIQUE PROGRAMMATION ORIENTÉE INTERNET ASPECTS SERVEUR Module 25819 Cours et TP A4 (1/2 valeur) Chapitre 2 Les variables en PHP Le

Plus en détail

Fiche TD n 1 Le langage HTML

Fiche TD n 1 Le langage HTML Fiche TD n 1 Le langage HTML 1 Introduction Le HTML est le langage utilisé pour formaliser l information échangée sur internet. Il est constitué de balises qui indiquent de quelle manière les informations

Plus en détail

Le HTML dans la page web

Le HTML dans la page web Le HTML dans la page web 1 Qu est-ce que HTML? HTML est le langage descriptif formel utilisé pour créer des pages web. C est le seul langage permettant d afficher une page web dans un navigateur. HTML

Plus en détail

HTML. HyperText Markup Language. Le HTML est un langage informatique qui permet de créer des pages WEB. Il utilise des balises qui permettent :

HTML. HyperText Markup Language. Le HTML est un langage informatique qui permet de créer des pages WEB. Il utilise des balises qui permettent : HTML HyperText Markup Language Objectifs : - s'initier au langage HTML - savoir lire un code source html simple Le HTML est un langage informatique qui permet de créer des pages WEB. Il utilise des balises

Plus en détail

I/ Une première très brève introduction au WEB :

I/ Une première très brève introduction au WEB : TP 10 : Vendredi 31 Janvier 2014 Langage de description HTML Langages de description Présentation du langage HTML et du principe de séparation du contenu et de la mise en forme. Créer et analyser une page

Plus en détail

Principales balises HTML5

Principales balises HTML5 Principales balises HTML5 RAPPEL : Tout document HTML commence par le DOCTYPE suivi de la balise , et s achève avec la balise . DOCTYPE et HTML : Le DOCTYPE : La déclaration

Plus en détail

1. L extension d un fichier

1. L extension d un fichier LP CHATEAU BLANC 45 CHALETTE/LOING THÈME : EXTENSIONS DE NOM FICHIER BAC PRO SEN TR ACADÉMIE D ORLÉANS-TOURS OBJECTIFS : TP SAVOIR LE ROLE D UNE EXTENSION DE NOM DE FICHIER CONNAITRE LES EXTENSIONS DE

Plus en détail

Les bases du HTML5/CSS3

Les bases du HTML5/CSS3 1 Les bases du HTML5/CSS3 Ce premier chapitre rappelle tout ce qu il est bon de connaître lorsqu on se lance dans le développement HTML5/CSS3, depuis la déclaration de type de document jusqu au regroupement

Plus en détail

Les Fiches pratiques Coin-Web

Les Fiches pratiques Coin-Web Le langage HTML Sommaire 1. Définitions...1 2. Remarque liminaire : l organisation du site...2 3. La page...3 4. L entête...3 5. Le corps de la page...3 a. Le texte...3 i. Titres et paragraphes...3 ii.

Plus en détail

Ecrire des pages web = pages XHTML = le contenu et sa structure. feuilles de style = page CSS = la forme (couleur fonte cadre... ) (cours prochain)

Ecrire des pages web = pages XHTML = le contenu et sa structure. feuilles de style = page CSS = la forme (couleur fonte cadre... ) (cours prochain) introduction Ecrire des pages web = pages XHTML = le contenu et sa structure (ce cours) feuilles de style = page CSS = la forme (couleur fonte cadre... ) (cours prochain) Xhtml = Successeur de HTML compatible

Plus en détail

MODULE HTML CSS.

MODULE HTML CSS. MODULE HTML CSS David Tourel david.tourel@iut-tlse3.fr HTML : HyperText Markup Language Langage de description Interprété par les navigateurs Associé au CSS et JavaScript Métiers: développeur front end,

Plus en détail

Programmation PHP Septembre 2010

Programmation PHP Septembre 2010 IFT1147 Programmation Serveur Web avec PHP Un bref survol de HTML et CSS HMTL HTML: Hypertext Markup Language HTML est essentiellement un langage de description de structure de document (par exemple titre,

Plus en détail

Création de sites Web ~ Module 1 Introduction HTML - CSS

Création de sites Web ~ Module 1 Introduction HTML - CSS Création de sites Web ~ Module 1 Introduction HTML - CSS 1 Introduction : HTML, pour HyperText Markup Language, est le langage conçu pour représenter les pages Internet. C est un langage de balises permettant

Plus en détail

LANGAGE HTML : STRUCTURE GENERALE, FORMATAGE DU TEXTE ET INSERTION D IMAGE

LANGAGE HTML : STRUCTURE GENERALE, FORMATAGE DU TEXTE ET INSERTION D IMAGE ICN ICN Informatique et Création Numérique LANGAGE HTML : STRUCTURE GENERALE, FORMATAGE DU TEXTE ET INSERTION D IMAGE 1 MISE EN SITUATION 1.1 Page Web «Une page Web est une ressource du World Wide Web

Plus en détail

Organisation d un site web

Organisation d un site web Organisation d un site web Un site web est un ensemble de pages web hébergées par un serveur et identifié par une adresse internet ( URL). Les pages web sont écrites en langage html, puis transférées sur

Plus en détail

C2i : Création de pages web

C2i : Création de pages web C2i : Création de pages web IUFE 2016/2017 Matthieu Giraud LIMOS, Université Clermont Auvergne Matthieu Giraud C2i : Création de pages web 1 / 33 Introduction Sommaire 1 Introduction 2 Structure d une

Plus en détail

Guide d utilisation -

Guide d utilisation - Accéder au tableau de bord Pour entrer dans l espace d administration, allez à l adresse suivante : www.physiomouvementplus.com//wp-admin Une fenêtre d identification s ouvre alors : entrez votre Identifiant

Plus en détail

CHAPITRE 1, LA STRUCTURE D UN DOCUMENT AU FORMAT HTML

CHAPITRE 1, LA STRUCTURE D UN DOCUMENT AU FORMAT HTML CHAPITRE 1, LA STRUCTURE D UN DOCUMENT AU FORMAT HTML 1. AVERTISSEMENT L objectif de ce support de cours n est pas de faire un catalogue exhaustif de toutes les fonctionnalités ou de toutes les balises

Plus en détail

Ecrire en mode HTML pour agrémenter les messages

Ecrire en mode HTML pour agrémenter les messages Chapitre 10 EGAYER VOS MESSAGES Vous n êtes pas obligé d émettre des messages sévères et dépouillés. Vous pouvez, en effet, changer de police ou de taille ou encore sélectionner un papier à lettres coloré

Plus en détail

Rédaction d une fiche thématique Mutuelles étudiantes : Se grouper pour agir

Rédaction d une fiche thématique Mutuelles étudiantes : Se grouper pour agir Rédaction d une fiche thématique Mutuelles étudiantes : Se grouper pour agir Philippe Marcy (webmaster) Table des matières 1. QU EST-CE QU UNE FICHE THÉMATIQUE?... 2 2. FAIRE UNE PROPOSITION DE FICHE THÉMATIQUE...

Plus en détail

Les balises meta (meta tags en anglais) peuvent avoir plusieurs rôles :

Les balises meta (meta tags en anglais) peuvent avoir plusieurs rôles : Les balises meta (meta tags en anglais) peuvent avoir plusieurs rôles : Indiquer le titre de la page et fournir un résumé de son contenu. Renseigner les navigateurs de vos visiteurs et/ou les moteurs de

Plus en détail

WEBMESTRE : CONCEPTION DE SITES ET ADMINISTRATION DE SERVEURS WEB

WEBMESTRE : CONCEPTION DE SITES ET ADMINISTRATION DE SERVEURS WEB WEBMESTRE : CONCEPTION DE SITES ET ADMINISTRATION DE SERVEURS WEB Algorithmique programmation internet niveau 2 NFA054 (6 ECTS) Chapitre 1 Introduction à Javascript Le plus grand soin a été apporté à la

Plus en détail

Développement Web (NFA0016)

Développement Web (NFA0016) Développement Web (NFA0016) seconde session Avril 2011 Durée : 3h Modalités : Tous documents autorisés. Calculatrices, ordinateurs, téléphones portables interdits. Remarque : Pour ne pas surcharger, on

Plus en détail

ISN - HTML : Apprendre HTML5. M. Lagrave HTML5. Code source Site classique CSS Bluefish. M. Lagrave. Lycée Beaussier

ISN - HTML : Apprendre HTML5. M. Lagrave HTML5. Code source Site classique CSS Bluefish. M. Lagrave. Lycée Beaussier Lycée Beaussier 2012 2013 Sommaire Le HTML «HyperText Markup Language» est un langage de balisage pour la création de site internet, il sert à structurer votre document. D autres langages peuvent s ajouter

Plus en détail

Exercice 4 Manipulation des balises HTML

Exercice 4 Manipulation des balises HTML 1 Exercice 4 Manipulation des balises HTML Dans cet exercice vous allez simplement manipuler les différentes syntaxes qui constituent le langage html. Sources : Une fois l archive décompressée vous trouverez

Plus en détail

Les balises XHTML. Balises de structure. Balises de mise en forme. Balises de liens Balises de liste Balises d image Balises de tableau

Les balises XHTML. Balises de structure. Balises de mise en forme. Balises de liens Balises de liste Balises d image Balises de tableau Les balises XHTML Balises de structure Balises de liens Balises de liste Balises d image Balises de tableau Balises de cadre Balises de mise en forme Balises de formulaire 1 Balises de structure Un document

Plus en détail

CHARGÉE DE COURS : N. VANASSCHE

CHARGÉE DE COURS : N. VANASSCHE CHARGÉE DE COURS : N. VANASSCHE WWW.NATHALIEVANASSCHE.BE DE NOMBREUSES PERSONNES CONFONDENT (À TORT) INTERNET ET LE WEB. le Web fait partie d'internet. Internet est donc un grand ensemble qui comprend,

Plus en détail

HTML & CSS. d e s i g n w e b. [ présentation ]

HTML & CSS. d e s i g n w e b. [ présentation ] d e s i g n w e b [ présentation ] Généralités Les feuilles de styles (CSS) existent depuis 1996. Elles ne sont vraiment correctement supportées par les navigateurs que depuis 2000-2001. C'est donc depuis

Plus en détail

HTML et page Web diaporama

HTML et page Web diaporama but du diaporama principe général le titre ainsi qu une section contenant un paragraphe le titre ainsi qu un paragraphe dont le texte est centré une section dont le texte est coloré en rouge (couleur définie

Plus en détail

Créer une page HTML avec l'éditeur Notepad++

Créer une page HTML avec l'éditeur Notepad++ Page Html Créer une page HTML avec l'éditeur Notepad++ Ouvrir Notepad++ Ecrivez un court texte. Enregistrer ce fichier dans un dossier que vous avez préalablement créé dans vos documents ou sur votre bureau

Plus en détail

Tutoriel d utilisation

Tutoriel d utilisation Centre Social Bordeaux Nord Tutoriel d utilisation Traitement de texte Word NOM : SOMMAIRE INTRODUCTION 2 CREATION DE PAGE / MISE EN PAGE 3 Taille, orientation et marge du document 3 Coupure de mots 4

Plus en détail

page web et html 1 principe général 2

page web et html 1 principe général 2 page web et html Table des matières 1 principe général 2 2 écrire et lire un document en HTML 3 2.1 Les références internationales................................. 3 2.2 Pour tester le code source et voir

Plus en détail

Création de sites Web ~ Module 1 Introduction HTML - CSS

Création de sites Web ~ Module 1 Introduction HTML - CSS Création de sites Web ~ Module 1 Introduction HTML - CSS 1 Introduction : HTML, pour HyperText Markup Language, est le langage conçu pour représenter les pages Internet. C est un langage de balises permettant

Plus en détail

Université Bordeaux, UF Mathématiques et Interactions Licence 2 MIASHS (2015/2016)

Université Bordeaux, UF Mathématiques et Interactions Licence 2 MIASHS (2015/2016) Université Bordeaux, UF Mathématiques et Interactions Licence 2 MIASHS (2015/2016) Conception de Sites Web Dynamiques : TD 1 HTML5 statique, balises, liens relatifs/absolus, images, validateur W3C http://www.labri.fr/perso/preuter/cswd2016

Plus en détail

Guide Utilisation HTML et Microsoft FrontPage

Guide Utilisation HTML et Microsoft FrontPage Guide Utilisation HTML et Microsoft FrontPage 4 4me Année Sciences Informatique Année scolaire : 2016-2017 I. Introduction au langage HTML HTML est un langage de description. Il permet d'enrichir un texte

Plus en détail

CREATION WEB DYNAMIQUE

CREATION WEB DYNAMIQUE CREATION WEB DYNAMIQUE II ) xhtml ET CSS II-1 ) Introduction Le xhtml, extensible HyperText Markup Language, est un langage identique au langage HTML mais respectant la syntaxe définie par XML Quant vous

Plus en détail

I/ Une première très brève introduction au WEB :

I/ Une première très brève introduction au WEB : TP 10 : Vendredi 31 Janvier 2014 Langage de description HTML Langages de description Présentation du langage HTML et du principe de séparation du contenu et de la mise en forme. Créer et analyser une page

Plus en détail

MES NOTES WORD 2013. Gestion des textes longs. Formation orientée «Thèse Electronique» 1 P a g e

MES NOTES WORD 2013. Gestion des textes longs. Formation orientée «Thèse Electronique» 1 P a g e WORD 2013 Gestion des textes longs Formation orientée «Thèse Electronique» 1 P a g e Arnaud CAILLO, CNRS OASU UMS 2567 Version du 10/09/2014 Table des matières Généralités... 3 Environnements Word (Rappels)...

Plus en détail

Le langage HTML. HTML est la «langue maternelle» de votre navigateur web

Le langage HTML. HTML est la «langue maternelle» de votre navigateur web Qu'est-ce que le HTML? HTML est la «langue maternelle» de votre navigateur web L HyperText Markup Language, en abrégé HTML, est le format de données conçu pour représenter les pages web. HTML permet de

Plus en détail

Développement Web (NFA0016)

Développement Web (NFA0016) Développement Web (NFA0016) première session Février 015 Durée : 3h Modalités : Tous documents autorisés. Calculatrices, ordinateurs, téléphones portables interdits. Barème donné à titre indicatif. Exercice

Plus en détail

Charte graphique pour la réalisation de sites thématiques sur Internet

Charte graphique pour la réalisation de sites thématiques sur Internet Charte graphique pour la réalisation de sites thématiques sur Internet Sommaire Conventions... < 3 > Navigation... < 4 > Pages... < 5 > La page d accueil La page des liens La page des contacts Les pages

Plus en détail

Les formulaires types

Les formulaires types Les formulaires types Les formulaires types Formulaires interactifs Permettant de saisir des informations en remplissant des champs ou en cliquant sur des boutons Les formulaires De quoi avez vous besoin

Plus en détail

Réussir son site web avec XHTML et CSS

Réussir son site web avec XHTML et CSS Leçon 06 Réussir son site web avec XHTML et CSS CSS, le langage de mise en page du Web 1. Insérer du code CSS...1 Dans un fichier.css...1 Dans l en-tête du fichier XHTML...3 2. Appliquer un style à des

Plus en détail

INTRODUCTION AU LANGAGE HTML ET CSS

INTRODUCTION AU LANGAGE HTML ET CSS INTRODUCTION AU LANGAGE HTML ET CSS Sur le Web il est d usage de séparer structure et contenu d une page (html) de son style (css) Quelques liens : http://validator.w3.org/:pour vérifier que le est conforme

Plus en détail

HTML. Damien Nouvel. Damien Nouvel (Inalco) HTML 1 / 23

HTML. Damien Nouvel. Damien Nouvel (Inalco) HTML 1 / 23 HTML Damien Nouvel Damien Nouvel (Inalco) HTML 1 / 23 Langage, calcul, télécommunications Plan 1. Langage, calcul, télécommunications 2. Web et documents HTML 3. Balises 4. Attributs Damien Nouvel (Inalco)

Plus en détail

Formation Grainville la teinturiere. la- teinturiere.fr

Formation Grainville la teinturiere.  la- teinturiere.fr Formation Grainville la teinturiere www.grainville- la- teinturiere.fr Propulsé par : Un CMS en Open Source Version 1 p. 1 2 [Tapez le texte] Comment fonctionne le site? Le site permet aux internautes

Plus en détail

Technologie de l internet Date: 25 juin 2013,11:30 13:29, salle 1177

Technologie de l internet Date: 25 juin 2013,11:30 13:29, salle 1177 IFT3225-E2013 Examen Intra Technologie de l internet Date: 25 juin 2013,11:30 13:29, salle 1177 Philippe Langlais RÈGLEMENT SUR LE PLAGIAT Extrait du règlement disciplinaire sur le plagiat ou la fraude

Plus en détail

Année universitaire Examen seconde session : 18/04/2016 Responsable : Olivier PONS. Durée : 3 heures

Année universitaire Examen seconde session : 18/04/2016 Responsable : Olivier PONS. Durée : 3 heures Sujet UE NFA016 : Développement web (1) Année universitaire 2015 2016 Examen seconde session : 18/04/2016 Responsable : Olivier PONS Durée : 3 heures Tout document papier autorisé. Tout support électronique

Plus en détail

Introduction aux technologies WEB. Pr. Hajar IGUER

Introduction aux technologies WEB. Pr. Hajar IGUER Introduction aux technologies WEB Pr. Hajar IGUER hajar.iguer@uic.ac.ma LES BALISES Les attributs Les balises HTML peuvent avoir des attributs. Chaque balise accepte uniquement les attributs qui la concerne.

Plus en détail

Rappel : Qu est-ce que XML? XML: Documents bien formés et documents valides. Rappel: court exemple en XML. La documentation XML

Rappel : Qu est-ce que XML? XML: Documents bien formés et documents valides. Rappel: court exemple en XML. La documentation XML Rappel : Qu est-ce que XML? XML: Documents bien formés et documents valides Andrei Popescu-Belis TIM / ETI, Université de Genève Cours n 2 17.3.2005 http://www.issco.unige.ch/staff/andrei/xml «extended

Plus en détail

Rédacteurs - Typo3 v6.2

Rédacteurs - Typo3 v6.2 Rédacteurs - Typo3 v6.2 Créer un texte et le mettre en forme Objet et contexte Ce document présente la création et la mise en forme d un contenu texte dans l environnement typo3 6.2. Créer un contenu de

Plus en détail

Plan du cours : les Arbres Généraux (2) LI101 : Programmation Récursive. Schéma récursif sur les arbres généraux

Plan du cours : les Arbres Généraux (2) LI101 : Programmation Récursive. Schéma récursif sur les arbres généraux Plan du cours : les Arbres Généraux (2) LI101 : Programmation Récursive c Equipe enseignante Li101 Université Pierre et Marie Curie Semestre : Automne 2008 Cours 11 : Arbres généraux (2) Plan Récursion

Plus en détail

Conception d'interfaces Web

Conception d'interfaces Web Conception d'interfaces Web Licence 1 2. Créer un site Web avec HTML5 et CSS3 Bruno Jobard I. Introduction Les langages HTML et CSS décrivent la structure et la présentation d'une page Web. HTML est un

Plus en détail

Formation sur Word. Formation sur Word

Formation sur Word. Formation sur Word Formation sur Word Microsoft office Word est un logiciel de traitement de texte permettant la rédaction de documents, de rapports, de notes de service, etc. Il permet de faciliter l envoie de lettre par

Plus en détail

Microsoft Office PowerPoint

Microsoft Office PowerPoint Microsoft Office PowerPoint TABLE DES MATIERES Onglet insertion... 3 Onglet création... 4 Onglet transition... 4 Onglet animations... 5 Onglet diaporama... 5 Onglet révision... 6 Onglet affichage... 7

Plus en détail

Mise en ligne des informations sur le site : mode d emploi

Mise en ligne des informations sur le site : mode d emploi Mise en ligne des informations sur le site : mode d emploi www.autogestion.org est un site participatif qui permet à ceux qui mettent en œuvre de pratiques autogérées et réfléchissent sur leur fonctionnement

Plus en détail

Développement Web (NFA0016)

Développement Web (NFA0016) Développement Web (NFA0016) première session Février 2013 Durée : 3h Modalités : Tous documents autorisés. Calculatrices, ordinateurs, téléphones portables interdits. Barème donné à titre indicatif. Exercice

Plus en détail

Module Javascript - Présentation du langage - Exercices d application

Module Javascript - Présentation du langage - Exercices d application Module Javascript - Présentation du langage - Exercices d application February 15, 2011 Module Javascript - Présentation du langage - Exercices d application ii Contents 1 Exercice 1 1.1 Les premiers programmes

Plus en détail

Les raccourcis typographiques de SPIP

Les raccourcis typographiques de SPIP Les raccourcis typographiques de SPIP Depuis la version 1.7, il y a des contributions pour augmenter les possibilités de raccourcis typographiques de SPIP. 1- Les raccourcis "natifs" SPIP est basé sur

Plus en détail

Espace Rédacteurs

Espace Rédacteurs Espace Rédacteurs www.aijc.info 1 Avant-propos : Architecture du site Le site est composé de deux parties : 1. Partie publique Comme son nom l indique, il s agit de la partie accessible à tous les internautes.

Plus en détail

Le (X)HTML 5. LPCEL promotion 2016/2017 Vincent Peigné

Le (X)HTML 5. LPCEL promotion 2016/2017 Vincent Peigné Le (X)HTML 5 LPCEL promotion 2016/2017 Vincent Peigné Sommaire 1. HTML 5 2. L entête HTML 3. Le corps ou 4. L encodage et les accents 1. HTML 5 1. HTML 5 1.1. Définition et historique 1.2. Définition

Plus en détail

NFA 074. 06 - Projet HTML-CSS

NFA 074. 06 - Projet HTML-CSS NFA 074 06 - Projet HTML-CSS 06 - Projet HTML-CSS 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

Plus en détail

Langages à balises : une introduction

Langages à balises : une introduction Langages à balises : une introduction Yannick Prié UFR Informatique Université Lyon UE2.2 Master SIB M 2004-2005 Objectif généraux du cours Comprendre les grands principes de la représentation de données

Plus en détail

Première exploration de Bluefish et. création d un formulaire simple

Première exploration de Bluefish et. création d un formulaire simple Première exploration de Bluefish et création d un formulaire simple Table des matières Première exploration de Bluefish avec les fichiers déjà créés au dernier cours...2 Création d un projet incorporant

Plus en détail

protocole utilisé (autre exemple ftp)! nom du serveur!

protocole utilisé (autre exemple ftp)!  nom du serveur! Le Langage HTML! Finalité:! Définir un langage permettant d élaborer des sites Web, c est à dire un ensemble de pages web (ou pages Html) organisées (de façon logique) sous forme de graphe.! La transition

Plus en détail

Éditeur Moodle. L'éditeur de Moodle se présente de la façon suivante : Vous y retrouverez les icônes traditionnelles d'un éditeur de texte.

Éditeur Moodle. L'éditeur de Moodle se présente de la façon suivante : Vous y retrouverez les icônes traditionnelles d'un éditeur de texte. Éditeur Moodle Ce tutoriel décrit comment utiliser l'éditeur de Moodle, que vous allez retrouver dans la plupart des activités et des ressources de la plateforme. L'éditeur de Moodle se présente de la

Plus en détail

Manuel de KSystemLog. Nicolas Ternisien

Manuel de KSystemLog. Nicolas Ternisien Nicolas Ternisien 2 Table des matières 1 Utilisation de KSystemLog 5 1.1 Introduction......................................... 5 1.1.1 Qu est-ce que KSystemLog?........................... 5 1.1.2 Fonctionnalités...................................

Plus en détail

HEI3 : TD HTML. Objectif : construction d un document hypertexte sur Internet. Moyens :

HEI3 : TD HTML. Objectif : construction d un document hypertexte sur Internet. Moyens : 3 : TD HTML Objectif : Moyens : construction d un document hypertexte sur Internet - Internet : notions d échanges sur le réseau - Langage : présentation d HTML - Mise en œuvre d HTML : TD_3_HTML_CV.html

Plus en détail

SPIP Mode d emploi pour la rédaction de textes

SPIP Mode d emploi pour la rédaction de textes SPIP Table des matières SPIP MODE D EMPLOI POUR LA RÉDACTION DE TEXTES...1 TABLE DES MATIÈRES...2 Généralités...2 SPIP (Système de Publication pour Internet Participatif)...3 Types de textes...3 Connexion

Plus en détail

Mohammed REZGUI m.rezgui06@gmail.com. Basé sur le cours de Guillaume Perez

Mohammed REZGUI m.rezgui06@gmail.com. Basé sur le cours de Guillaume Perez Mohammed REZGUI m.rezgui06@gmail.com Basé sur le cours de Guillaume Perez Contenu, Organisation Objectif principal: Base pour la création d un site Notions de client-serveur Notions de programmations Option

Plus en détail

TD n 3 - Notion de langage CSS. Table des matières

TD n 3 - Notion de langage CSS. Table des matières TD n 3 - Notion de langage CSS Table des matières 1-Mettre en forme un page en utilisant la balise ...2 2-Mettre en forme un page en utilisant une feuille de style externe...4 3-Conseils pratiques

Plus en détail

Écriture de pages Web

Écriture de pages Web Écriture de pages Web Le langage CSS Laurent Tichit Janvier 2011 Copyright 2005-2009 Laurent Tichit 1 Les feuilles de styles CSS Elles permettent de changer la mise en forme d'une page HTML ou XHTML sans

Plus en détail

Outils de commande myp Mode d emploi pour l éditeur de texte et d image

Outils de commande myp Mode d emploi pour l éditeur de texte et d image Outils de commande myp Mode d emploi pour l éditeur de texte et d image Vous trouverez dans ces pages toutes les indications et instructions nécessaires pour l utilisation du nouvel éditeur de texte et

Plus en détail

Programmation Web HTML5

Programmation Web HTML5 Programmation Web HTML5 Julien David A101 - david@lipn.univ-paris13.fr 2016 Julien David (A101 - david@lipn.univ-paris13.fr) 2016 1 / 1 Organisation Cours 5 séances pour 5 langages : HTML5, CSS3, PHP5,

Plus en détail

UE8.III - TD algorithmique 1/6

UE8.III - TD algorithmique 1/6 TD 12.1 HTML Construction de page Web 1- On propose de construire une nouvelle page web. Pour cela, on crée un nouveau document avec le "Bloc-notes" et on saisit les éléments suivants : un premier

Plus en détail

Nom de la commande Combinaison Touche. Activer/désactiver l affichage des balises XML. Ctrl+Maj+ Activer/Désactiver l équation Alt+ =

Nom de la commande Combinaison Touche. Activer/désactiver l affichage des balises XML. Ctrl+Maj+ Activer/Désactiver l équation Alt+ = Activer/désactiver l affichage des balises XML Ctrl+Maj+ X Activer/Désactiver l équation Alt+ = Activer/Désactiver les marques de révision Activer/désactiver un code du caractère Ctrl+Maj+ Alt+ R C Affichage

Plus en détail

CARACTÉRISER, METTRE EN FORME ET ANALYSER DES DONNÉES

CARACTÉRISER, METTRE EN FORME ET ANALYSER DES DONNÉES CARACTÉRISER, METTRE EN FORME ET ANALYSER DES DONNÉES Encodage de caractère et fichier de texte Texte et informatique 1 En informatique on utilise beaucoup de texte, mais pas seulement pour représenter

Plus en détail

Etre rédacteur (trice) sur le site SPIP du lycée (louisemichelbobigny.fr)

Etre rédacteur (trice) sur le site SPIP du lycée (louisemichelbobigny.fr) Etre rédacteur (trice) sur le site SPIP du lycée (louisemichelbobigny.fr) I - Accès à la partie publique du site : http://louisemichelbobigny.fr Il est possible de consulter les articles, mais aussi d

Plus en détail

Utilisation du navigateur Google Chrome

Utilisation du navigateur Google Chrome Utilisation du navigateur Google Chrome ~91% des français utilisent Google contre (seulement) ~67% aux Etats-Unis En 2016 : Google répond à plus de 2000 milliards de requêtes par an (2 trillions comme

Plus en détail

Informatique - Word. On accède principalement à ces fonctionnalités par des icônes disponibles dans le ruban de Microsoft Word :

Informatique - Word. On accède principalement à ces fonctionnalités par des icônes disponibles dans le ruban de Microsoft Word : Word Les bases Microsoft Word est un logiciel de traitement de texte. Il permet principalement l édition de textes. Il contient aussi certaines fonctionnalités avancées comme le publipostage. Note : Ce

Plus en détail

Nous allons voir aujourd hui l utilisation de Wordpress, c est à dire ce qui va permettre aux associations de placer du contenu sur leur site web et

Nous allons voir aujourd hui l utilisation de Wordpress, c est à dire ce qui va permettre aux associations de placer du contenu sur leur site web et 1 Nous allons voir aujourd hui l utilisation de Wordpress, c est à dire ce qui va permettre aux associations de placer du contenu sur leur site web et de le faire évoluer. L idée est que vous soyez très

Plus en détail

Listing J-> Z des Astuces Microsoft Word.

Listing J-> Z des Astuces Microsoft Word. Listing J-> Z des Astuces Microsoft Word. 1. Ne pas numéroter la première page - Word 2 2. Numéroter les éléments identiques d'un document - Word 2 3. Supprimez un paragraphe à l'impression - Word 4 4.

Plus en détail

Cours N 6 Le langage HTML

Cours N 6 Le langage HTML Cours 6: Technologies web - le langage HTML Cours N 6 Le langage HTML Concepts de Base 1. Généralités HTML (pour HyperText Markup Language) est un langage de description de documents hypermédia. Un document

Plus en détail

GTI525 Technologies de développement Internet

GTI525 Technologies de développement Internet GTI525 Technologies de développement Internet Langage de balisage hypertexte (HTML) GTI525, Été 2013 HTML de base Contenu Basé sur tutoriel http://www.w3schools.com/html/default.asp Bonnes pratiques GTI525,

Plus en détail

D autres balises HTML Exercice récapitulatif

D autres balises HTML Exercice récapitulatif D autres balises HTML Exercice récapitulatif Le titre de la page Apparait dans la partie Est affiché dans la barre de titre du navigateur Décrit ou résume le contenu de la page (10 mots maximum)

Plus en détail

Guide pratique de Zotero

Guide pratique de Zotero Octobre 2017 Guide pratique de Zotero Présentation Zotero est un outil de gestion de références bibliographiques. Zotero est libre et gratuit. Il se présente sous la forme d une application à installer.

Plus en détail

Représentation des caractères

Représentation des caractères Représentation des caractères 1 Problématique Un ordinateur ne manipule que des 0 et des 1 : Comment alors code-t-il du texte? Puisqu un texte est une suite de caractères, nous allons nous intéresser ici

Plus en détail

HTML : Mini tutoriel

HTML : Mini tutoriel HTML : Mini tutoriel I. Introduction HTML est un langage de formatage de texte adapté à la conception de pages web. Le HTML est un langage balisé, fondé en particulier sur la notion de lien hypertexte,

Plus en détail

Bases Open Office. Contenu INFORMATIQUE

Bases Open Office. Contenu INFORMATIQUE Bases Open Office Contenu 1) Saisie du texte... 1 2) Utilisation des styles de paragraphes... 1 3) Insérer un pied de page avec les numéros de pages... 2 4) Styles de pages... 3 5) Insérer une page en

Plus en détail

SITE INTERNET LPR DU HAUT FOREZ MODE D EMPLOI

SITE INTERNET LPR DU HAUT FOREZ MODE D EMPLOI SITE INTERNET LPR DU HAUT FOREZ MODE D EMPLOI SOMMAIRE I) ECRIRE UN ARTICLE... 3 II) LE TEXTE DE L ARTICLE... 8 III) INSÉRER UN DOCUMENT... 11 IV) SE DÉCONNECTER DE L ESPACE PRIVÉ... 14 V) SE CONNECTER

Plus en détail

CinéPack. Création et hébergement de site internet

CinéPack. Création et hébergement de site internet CinéPack Création et hébergement de site internet mise à jour du 24/12/2013 Sommaire Sommaire...2 Bienvenue sur votre espace d administration CinePack...3 Accueil de votre administration :...4 Gestion

Plus en détail

Mémento. Balises de premier niveau

Mémento. Balises de premier niveau Mémento s de premier niveau Les balises de premier niveau sont les principales balises qui structurent une page HTML. Elles sont indispensables pour réaliser le «code minimal» d'une page web. principale

Plus en détail