Production de documents pour le Web De la découverte du HTML à la création d’un premier site Web « perso » Equipe pédagogi...
Le langage HTML HTML (HyperText Markup Langage) est le langage universel utilisé pour concevoir des pages WEB, c’est à dir...
Les bases du HTML <ul><ul><li>HTML met en forme le texte à l ’aide de  balises .  Elles se repèrent facilement car elles s...
L’édition <ul><ul><li>Les fichiers HTML sont composés de texte ASCII avec des balises </li></ul></ul><ul><ul><li>Outils de...
Les hyperliens <ul><li>En cliquant sur un mot, généralement souligné (ou une image) on est transporté :  </li></ul><ul><ul...
Lien hypertexte « externe » <ul><li>Tout document situé sur le réseau Internet possède une adresse appelée URL  (Uniform R...
Lien hypertexte « local » <ul><li>Le fichier sur lequel on pointe se situe dans le même répertoire et sur la même machine....
Liens hypertextes « internes » et étiquettes <ul><li>Ces liens permettent d’atteindre un endroit spécifique délimité par u...
Les images La gestion des images
Les images (formats recommandés) <ul><li>2 formats de compression d’image en mode point (bitmap) </li></ul><ul><li>GIF (gr...
Production et publication d’un site Web
Introduction L’objectif de cette partie du cours est d’indiquer quelques dispositifs existants et la démarche pour ouvrir ...
Les solutions « perso » http://www.multimania.lycos.fr/   http://www.free.fr http://monsite.voila.fr/   et beaucoup d’autr...
Types de solution pour produire des pages Web <ul><li>Production de pages en ligne </li></ul><ul><li>à l’aide d’un assista...
Etude de cas avec Voila http://monsite.voila.fr/   Nous allons maintenant créer notre site Web « perso » sur Voila que nou...
Création d’un compte chez Voila Il faut créer un compte chez Voilà. Suivez les différentes étapes, complétez le formulaire...
Confirmation de l’inscription Il faut confirmer l’inscription => voir le mail reçu dans la boîte que vous avez indiqué lor...
Création en mode assisté Nous allons maintenant montrer comment créer un  site Web en nous appuyant sur un exemple de syst...
Création de votre site en mode assisté Vous allez créer maintenant votre site Choisissez «  assistant en ligne » Cliquez s...
Création de votre site en mode assisté 3 ème  étape suite Il faut lire les conditions avant de les accepter puis vous accé...
Gestion des fichiers (pages, images...) en mode assisté Votre espace d’hébergement est maintenant créé. Il faut choisir un...
Modification de la page d’accueil du site en mode assisté Recours à l’assistant pour créer vos pages Ouvrez la page dans v...
Modification (ultérieure) du site en mode assisté <ul><li>Après identification  (login + mot de passe)   il faut cliquer s...
Création en mode expert Nous allons maintenant montrer comment gérer un site Web. Pour cela il faut gérer les fichiers néc...
Création de votre site (mode expert) Vous allez créer maintenant votre site Choisissez «  assistant en ligne » Cliquez sur...
Gestion des fichiers (pages, images...) en mode expert Votre espace d’hébergement est maintenant créé. Vous pouvez mainten...
Modification de la page index.html en mode expert Pour éditer en ligne votre page  index.html. Il suffit pour cela de cliq...
Modification (ultérieure) du site en mode expert <ul><li>Après identification  (login + mot de passe)   il faut cliquer su...
Liens utiles
Des liens utiles <ul><li>http://www.ccim.be/ccim328/html/   </li></ul><ul><li>http://www.allhtml.com/html/ </li></ul><ul><...
Création d’un premier site (par l’assistant) Créez votre premier site en utilisant le mode assistant. Dans ce site, présen...
Après la production et la publication… Référencement du site Mesure d’audience du site  Une fois que votre site est en lig...
Le référencement <ul><li>L’objectif du référencement est de faire connaître son site pour augmenter son audience </li></ul...
L’inscription dans les outils de recherche <ul><li>Les principaux outils de recherche proposent l’inscription d’un site </...
Le tissage de liens <ul><li>Les internautes utilisent les sites portails et les sites « connus » très visités pour oriente...
La métadescription de la page Web <ul><li>Il est important d’agir sur les métadonnées du document HTML (la page web) pour ...
Du compteur de visites aux statistiques <ul><li>La solution la plus élémentaire consiste à mettre en place un compteur de ...
Les outils <ul><li>Quelques exemples de solutions </li></ul>Nedstat (basic),  http://www.nedstat.fr   Xiti (gratuit),  htt...
Activités facultatives Essayez de faire référencer votre site. Vous pouvez également essayer de mettre en œuvre un compteu...
Upcoming SlideShare
Loading in...5
×

C2i Web

2,057

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,057
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "C2i Web"

  1. 1. Production de documents pour le Web De la découverte du HTML à la création d’un premier site Web « perso » Equipe pédagogique C2i Université Bordeaux 3 Cours pour le C2i
  2. 2. Le langage HTML HTML (HyperText Markup Langage) est le langage universel utilisé pour concevoir des pages WEB, c’est à dire des pages pouvant être transportées sur le réseau Internet et lues par des Browsers (navigateurs) comme Internet explorer, Firefox, Safari, Opera... Les pages Web correspondent à des fichiers nommés avec l ’extension .htm ou .html.
  3. 3. Les bases du HTML <ul><ul><li>HTML met en forme le texte à l ’aide de balises . Elles se repèrent facilement car elles sont toujours entre <> <P> par exemple pour paragraphe </li></ul></ul><ul><ul><li>Format ASCII utilisé (donc lisible) dans un fichier texte à extension htm ou html (exemple : cours.htm) </li></ul></ul><ul><ul><li>La particularité de HTML est de permettre une navigation entre les documents grâces aux liens hypertextuels. </li></ul></ul><ul><ul><li>HTML est un procédé de description de documents, ce n’est pas un langage de programmation ! </li></ul></ul>
  4. 4. L’édition <ul><ul><li>Les fichiers HTML sont composés de texte ASCII avec des balises </li></ul></ul><ul><ul><li>Outils de création des pages </li></ul></ul><ul><ul><ul><li>un éditeur de texte : nécessite la connaissance de la syntaxe </li></ul></ul></ul><ul><ul><ul><li>Un convertisseur vers HTML. Par exemple celui de Word </li></ul></ul></ul><ul><ul><ul><li>Un éditeur HTML : </li></ul></ul></ul><ul><ul><ul><ul><li>Ex : FrontPage, DreamWeawer, Kompozer </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Très intuitif, interface classique de type outil bureautique </li></ul></ul></ul></ul><ul><ul><ul><ul><li>WYSIWYG : What You See Is What You Get </li></ul></ul></ul></ul><ul><ul><ul><li>Une interface en ligne permettant l’édition de documents pour le Web </li></ul></ul></ul>
  5. 5. Les hyperliens <ul><li>En cliquant sur un mot, généralement souligné (ou une image) on est transporté : </li></ul><ul><ul><ul><li>vers un autre ordinateur situé sur le Web </li></ul></ul></ul><ul><ul><ul><li>= hyperlien externe </li></ul></ul></ul><ul><ul><ul><li>vers un autre document situé sur le même ordinateur/serveur </li></ul></ul></ul><ul><ul><ul><li>= hyperlien local </li></ul></ul></ul><ul><ul><ul><li>vers un autre endroit du document </li></ul></ul></ul><ul><ul><ul><li>= hyperlien interne </li></ul></ul></ul>
  6. 6. Lien hypertexte « externe » <ul><li>Tout document situé sur le réseau Internet possède une adresse appelée URL (Uniform Resource Locator). HTML permet d'accéder à toutes ressources du Web. </li></ul><ul><li>Lien vers une autre page HTML </li></ul><ul><ul><ul><li><A HREF=&quot; http://serveur/chemin.../fichier &quot;>...</A> </li></ul></ul></ul><ul><li>Lien vers un serveur ftp </li></ul><ul><ul><ul><li><A HREF=&quot; ftp://serveur/chemin.../fichier &quot;>...</A> </li></ul></ul></ul><ul><li>Liens vers une adresse email </li></ul><ul><ul><ul><li><A HREF=&quot; mailto:utilisateur@hôte &quot;>...</A> </li></ul></ul></ul>
  7. 7. Lien hypertexte « local » <ul><li>Le fichier sur lequel on pointe se situe dans le même répertoire et sur la même machine. L'adresse du lien sera alors tout simplement : </li></ul><ul><li><A HREF=&quot;fichier.htm &quot;>cliquez ici</A> </li></ul>Le fichier sur lequel on pointe se situe dans un répertoire différent et sur la même machine. L'adresse du lien sera alors : <A HREF=« ../../dossier4/fichier.htm &quot;>Cliquez ici</A>
  8. 8. Liens hypertextes « internes » et étiquettes <ul><li>Ces liens permettent d’atteindre un endroit spécifique délimité par une « ancre » (étiquette) dans le document </li></ul><ul><ul><li>Point de départ </li></ul></ul><ul><ul><ul><li>Lien vers une ancre dans la même page </li></ul></ul></ul><ul><ul><ul><li><A HREF=&quot;#***&quot;>..texte a afficher.</A> </li></ul></ul></ul><ul><ul><ul><li>Lien vers une ancre dans une autre page </li></ul></ul></ul><ul><ul><ul><li><A HREF=&quot;URL#***&quot;> texte a afficher </A> </li></ul></ul></ul><ul><ul><li>Point d'ancrage (à positionner au point d’arrivée ) </li></ul></ul><ul><ul><ul><li><A NAME=&quot;***&quot;> texte a afficher </A> </li></ul></ul></ul>
  9. 9. Les images La gestion des images
  10. 10. Les images (formats recommandés) <ul><li>2 formats de compression d’image en mode point (bitmap) </li></ul><ul><li>GIF (graphics interchange format) </li></ul><ul><li>256 couleurs </li></ul><ul><li>transparence possible </li></ul><ul><li>animation possible </li></ul><ul><li>convient pour les schémas, les graphiques, les cartes, les logos... </li></ul><ul><li>JPG (joint picture expert group) ou JPEG </li></ul><ul><li>16 millions de couleurs </li></ul><ul><li>pas de transparence </li></ul><ul><li>pas d’animation </li></ul><ul><li>convient pour les photographies </li></ul>
  11. 11. Production et publication d’un site Web
  12. 12. Introduction L’objectif de cette partie du cours est d’indiquer quelques dispositifs existants et la démarche pour ouvrir un espace d’hébergement (gratuit) sur le Web. Ceci est la première étape pour créer un site de type « perso ». Il existe différentes solutions et de nombreux acteurs proposent des services similaires. Nous nous appuierons sur une des solutions pour créer notre premier site.
  13. 13. Les solutions « perso » http://www.multimania.lycos.fr/ http://www.free.fr http://monsite.voila.fr/ et beaucoup d’autres encore...
  14. 14. Types de solution pour produire des pages Web <ul><li>Production de pages en ligne </li></ul><ul><li>à l’aide d’un assistant </li></ul><ul><li>en accédant au code HTML </li></ul>2 approches différentes Recours à un éditeur en « mode local » puis transfert des fichiers importation des fichiers (pages HTML et ressources graphiques ...) sur le serveur (dans la zone d’hébergement créée). mode full-web mode FTP Solution présentée dans ce cours
  15. 15. Etude de cas avec Voila http://monsite.voila.fr/ Nous allons maintenant créer notre site Web « perso » sur Voila que nous avons retenu pour l’exemple. Bien évidemment les acteurs cités précédemment (et bien d’autres encore) fournissent des services semblables. Il faut se connecter sur l’adresse de gestion des sites web perso de Voila Comment créer son site en 20 minutes en 5 étapes !
  16. 16. Création d’un compte chez Voila Il faut créer un compte chez Voilà. Suivez les différentes étapes, complétez le formulaire en ligne, mémorisez votre mot de passe, puis validez le formulaire. Cliquez sur « Devenez membre » Attention e-mail obligatoire pour valider votre inscription ! 1 ère étape
  17. 17. Confirmation de l’inscription Il faut confirmer l’inscription => voir le mail reçu dans la boîte que vous avez indiqué lors de l’inscription. Après avoir cliqué sur le lien de confirmation, vous accédez à l’écran reproduit ci-dessous. Cliquez sur Voila Mon Site pour continuer 2 ème étape
  18. 18. Création en mode assisté Nous allons maintenant montrer comment créer un site Web en nous appuyant sur un exemple de système de production entièrement géré en ligne (connexion Internet nécessaire) et ne nécessitant aucun logiciel installé sur votre poste de travail. Comment créer son site sans aucune connaissance des langages d’édition pour le Web.
  19. 19. Création de votre site en mode assisté Vous allez créer maintenant votre site Choisissez «  assistant en ligne » Cliquez sur « C réer  » 3 ème étape
  20. 20. Création de votre site en mode assisté 3 ème étape suite Il faut lire les conditions avant de les accepter puis vous accédez au formulaire de création de votre site. Il suffit d’indiquer le nom du site. Le nom d’utilisateur et le nom du site peuvent être différents. http:// nom_choisi .site.voila.fr
  21. 21. Gestion des fichiers (pages, images...) en mode assisté Votre espace d’hébergement est maintenant créé. Il faut choisir un modèle de page d’accueil 4 ème étape
  22. 22. Modification de la page d’accueil du site en mode assisté Recours à l’assistant pour créer vos pages Ouvrez la page dans votre navigateur : http:// nom_choisi .site.voila.fr/index.jhtml 5 ème étape en cliquant sur Publier et tester, vous pouvez vérifier votre travail en ligne
  23. 23. Modification (ultérieure) du site en mode assisté <ul><li>Après identification (login + mot de passe) il faut cliquer sur le nom du site à modifier </li></ul>puis, il suffit de choisir «Modifier un site » Pour gérer par la suite (après déconnexion), son site (ou ses sites), il faut passer par l’entrée : http://site.voila.fr puis choisir «  assistant en ligne  »
  24. 24. Création en mode expert Nous allons maintenant montrer comment gérer un site Web. Pour cela il faut gérer les fichiers nécessaires au bon fonctionnement de notre site en important ceux-ci sur le serveur (FTP). Comment créer une zone d’hébergement et gérer les fichiers (pages HTML, images ...)
  25. 25. Création de votre site (mode expert) Vous allez créer maintenant votre site Choisissez «  assistant en ligne » Cliquez sur «  je veux créer un site » 3 ème étape
  26. 26. Gestion des fichiers (pages, images...) en mode expert Votre espace d’hébergement est maintenant créé. Vous pouvez maintenant transférer vos fichiers (html, jpg, gif...) en vous appuyant sur l’interface (importer des fichiers...) 4 ème étape
  27. 27. Modification de la page index.html en mode expert Pour éditer en ligne votre page index.html. Il suffit pour cela de cliquer sur le lien puis sur modifier la page. Ouvrez la page dans votre navigateur : http:// nom_choisi .site.voila.fr/index.html 5 ème étape Modification du code source HTML
  28. 28. Modification (ultérieure) du site en mode expert <ul><li>Après identification (login + mot de passe) il faut cliquer sur le nom du site à modifier </li></ul>puis, il suffit de choisir « je veux gérer mes fichiers » Pour gérer par la suite (après déconnexion), son site (ou ses sites), il faut passer par l’entrée : http://site.voila.fr puis choisir «  assistant en ligne  »
  29. 29. Liens utiles
  30. 30. Des liens utiles <ul><li>http://www.ccim.be/ccim328/html/ </li></ul><ul><li>http://www.allhtml.com/html/ </li></ul><ul><li>http://www.commentcamarche.net/html/ </li></ul><ul><li>http://fr.selfhtml.org/ </li></ul><ul><li>http://www.free.fr/ </li></ul><ul><li>http://www.multimania.lycos.fr/ </li></ul><ul><li>http://monsite.voila.fr/ </li></ul>
  31. 31. Création d’un premier site (par l’assistant) Créez votre premier site en utilisant le mode assistant. Dans ce site, présentez les résultats d’une recherche d’informations sur Internet en y insérant des images: le sujet de la recherche est libre. Déposez ensuite l’hyperlien vers votre site dans un dossier à votre nom et n° étudiant dans les « Favoris » sur le Bureau Virtuel. Utilisez le groupe dans lequel vous avez déposé votre épreuve pratique préparatoire. Bon courage !
  32. 32. Après la production et la publication… Référencement du site Mesure d’audience du site Une fois que votre site est en ligne, un autre travail commence …
  33. 33. Le référencement <ul><li>L’objectif du référencement est de faire connaître son site pour augmenter son audience </li></ul><ul><li>Pour cela il faut </li></ul><ul><li>être inscrit dans les outils de recherche (moteurs, annuaires) </li></ul><ul><li>être présent dans les liens utiles de sites importants </li></ul>
  34. 34. L’inscription dans les outils de recherche <ul><li>Les principaux outils de recherche proposent l’inscription d’un site </li></ul><ul><li>(« suggérer un site », « ajouter un site »…) </li></ul><ul><li>Les services gratuits n’assurent pas toujours une inscription rapide. </li></ul><ul><li>L’intérêt est de ne pas attendre que le logiciel robot d’indexation des pages (du moteur de recherche) découvre votre site mais de lui signaler votre présence. </li></ul>
  35. 35. Le tissage de liens <ul><li>Les internautes utilisent les sites portails et les sites « connus » très visités pour orienter leur parcours sur le Web : </li></ul><ul><li>Il est nécessaire de figurer dans la liste des liens utiles de ces sites. </li></ul><ul><li>Entre deux sites du même domaine (ou complémentaires) en général un échange de liens peut être prévu (réciprocité). </li></ul>
  36. 36. La métadescription de la page Web <ul><li>Il est important d’agir sur les métadonnées du document HTML (la page web) pour améliorer son référencement : </li></ul><ul><li>Il s’agit de balises figurant dans la partie <HEAD> de la page. Les balises concernées sont (principalement) : </li></ul><ul><li><TITLE>…</TITLE> </li></ul><ul><li><META NAME=« DESCRIPTION » CONTENT = « … » > </li></ul><ul><li><META NAME=« KEYWORDS » CONTENT = « … » > </li></ul><ul><li>Les outils logiciels d’indexation « apprécieront » le travail fait pour eux … </li></ul>
  37. 37. Du compteur de visites aux statistiques <ul><li>La solution la plus élémentaire consiste à mettre en place un compteur de visites. </li></ul><ul><li>Chaque fois que la page est affichée le compteur est incrémenté. </li></ul><ul><li>Ce type de solution ne peut être considéré satisfaisante car de nombreuses informations sont nécessaires : </li></ul><ul><li>nombre de visiteurs, nombre de visites </li></ul><ul><li>provenance des internautes </li></ul><ul><li>parcours effectué à l’intérieur du site </li></ul>Du simple compteur à des systèmes élaborés (Webmining)
  38. 38. Les outils <ul><li>Quelques exemples de solutions </li></ul>Nedstat (basic), http://www.nedstat.fr Xiti (gratuit), http://www.xiti.com/gratuit Umain Stat, http://umain.homelinux.com/ustat/ Les hébergeurs comme Free, Lycos, Voila … proposent également des services intégrés                   
  39. 39. Activités facultatives Essayez de faire référencer votre site. Vous pouvez également essayer de mettre en œuvre un compteur comme Xiti gratuit sur votre site.

×