Créer son propre site Web en language HTML

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

Download "Créer son propre site Web en language HTML"

Transcription

1 Tutorial Créer son propre site Web en language HTML Voici un tutorial qui, comme vous devez vous en douter, va prendre un certain temps à assimiler. Je n'ai aucunement la prétention d'être un bon programmeur, mais il existe tellement d'outils à notre disposition sur le Net que j'ai quand même réussi à créer le site Tutopat seul... Il ne s'adresse donc pas à un internaute débutant, mais bien à une personne ayant déjà acquis quelques notions de base indispensables. Bien que le language HTML soit presque dépassé aujourd'hui, cela reste encore l'option la plus simple pour une première création, Rien ne vous empêchera de passer par la suite au XHTML ou même au Flash... Mais il s'agit bien ici de vous apprendre à créer un site simple. Voici donc la liste des logiciels que nous allons successivement employer et dont vous aurez besoin : Un décompresseur : IZArc34 pour lequel un tuto est à votre disposition ici. Un éditeur HTML : Nvu 1.0 Ce logiciel gratuit et en français est une excellente alternative au fameux FrontPage que tout créateur de site a un jour essayé, mais qui est lui, payant. Un logiciel de transfert FTP : Filezilla pour lequel un tuto est disponible là.

2 Les opérations vont être multiples et se diviser en plusieurs étapes consécutives, accessibles par lien direct à partir du sommaire ci-dessous Le téléchargement d'un kit de page Sa décompression L'installation du logiciel d'édition HTML Les droits d'auteur du concepteur La personnalisation et la mise en forme visuelle de la page index du site A- Ouvrir notre page index. B- Insérer sa bannière personnelle. C- Insérer son logo. D- Personnaliser les couleurs des objets. E- Changer la couleur du fond de page. F- Insérer une image supplémentaire dans la page. 6. La personnalisation et la mise en forme textuelle de la page index du site A- Insérer du texte dans la page. B- Insérer un lien hypertexte dans la page. C- Insérer un lien hypertexte sur une image de la page. D- Déterminer les couleurs des liens hypertexte. 7. La création des pages supplémentaires A- La création. B- L'enregistrement des pages supplémentaires. C- La navigation interne entre les pages du site. 8. Les méta-tags 9. Les scripts A- Présentation. B- Intégration d'un script. 10. Conclusion de la première partie 11. La recherche et la création d'un espace d'hébergement en ligne A- La recherche d'un hébergement en ligne. B- L'hébergement sur sa page perso. C- L'hébergement chez un hébergeur gratuit : Ifrance. 12. La mise en ligne A- La mise en ligne sur sa page perso. B- La mise en ligne sur un hébergement gratuit. 13. Le référencement A- Passer par les copains. B- Inscrire le site dans les principaux moteurs de recherche. C- Inscrire votre site dans des annuaires. D- Le partenariat. 14. Conclusion générale. ces différentes manipulations vont être décrites dans l'ordre, ci-après.

3 1 Le téléchargement d'un kit de page. Deux solutions s'offrent à vous quand vous désirez créer un site Web : 1. Créer totalement la page vous-même, mais cela n'est pas à la portée de tout le monde. En effet, vous devez posséder un certain nombre de connaissances en matière de feuille CSS, notamment. 2. Utiliser un kit tout prêt que vous aurez trouvé sur le Net. Je choisis donc cette seconde solution car plus simple. En fait, il est possible de trouver en ligne trois types de kits de page : 1. Les kits totalement gratuits. Généralement de qualité jugée inférieure, ils n'en demeurent pas moins tout à fait corrects. 2. Les kits «Allopass». Pour le montant d'un appel téléphonique, vous pouvez télécharger ces kits, un peu plus évolués. 3. Les kits professionnels. Là, on retrouve des tarif assez effarants pour le commun des mortels que je suis. De quelques dizaines d'euros, cela peut aller très, très haut... Dans le cas de ce tuto, j'ai choisi l'option du kit totalement gratuit. Le kit en question date de 2003 et nous est fourni par un des partenaires de Tutopat, le site WebDiz. Il est une réalisation de son Webmaster KingLouis qui m'a donné l'autorisation de l'utiliser dans ce tuto. Commençons donc par aller le télécharger ICI

4 Voici donc notre kit téléchargé. 2 La décompression du kit. Avant tout chose, il est nécessaire de créer un dossier spécifique sur notre disque dur, afin d'y stocker tout ce qui concernera notre site. Non seulement nous y retrouverons tous les éléments du kit de départ, mais nous y insèrerons tout ce que nous ajouterons : images supplémentaires, boutons, bannière, etc... Nommez le comme vous l'entendez, voici le mien : Décompressons à présent notre kit dans ce dossier. Si vous ne savez pas décompresser un fichier, un tuto spécifique est à votre disposition ICI

5 Etudions à présent le contenu du dossier en l'ouvrant. Trois choses différentes apparaissent : 1. Un document texte qui contiendra généralement un petit message de l'auteur du kit, vous demandant ou vous précisant certaines choses. 2. Un document «HTML» qui est en fait le code notre page. En effectuant un double-clic sur ce fichier, la page suivante va s'ouvrir dans votre navigateur :

6 Vous voyez là le kit de page tel qu'il se présente dans votre navigateur. Même s'il ne vous semble pas formidable, sachez que nous allons l'améliorer. 3. Enfin, un dossier images qui contient toute les images faisant partie du kit de page. Regardons d'un peu plus près son contenu.

7 Nous trouvons ici la totalité des portions des images de notre kit. Nous pourrons utiliser n'importe quel logiciel de graphisme pour les modifier à notre guise... Notre kit est à présent prêt à ce que nous nous en occupions. Il nous faut donc penser à installer l'outil indispensable : L'éditeur HTML.

8 3 L'installation du logiciel d'édition HTML. J'ai opté dans ce tuto pour le logiciel gratuit et en français appelé Nvu 1.0. Pour le télécharger, il vous suffit de cliquer ICI Procédez ensuite à son installation complète, elle est tout à fait classique. Et retrouvez vous avec votre raccourci vers le programme sur le bureau (ou dans la barre de lancement rapide). Lancez le, il apparaitra ainsi :

9 Nvu va devenir à compter de cet instant, notre outil principal pour la création de notre site. C'est grâce à lui que nous allons insérer ou modifier des textes, des images, des liens hypertexte, créer toutes les pages de notre site... Nous y créerons et gèrerons aussi nos méta-tags (indispensables à un bon référencement), entrerons des scripts, etc... Je n'entrerai pas dans toutes les fonctions disponibles, mais vous montrerai les principales. 4. Les droits d'auteur du concepteur. Ce passage est impératif! Sachez que tout réalisateur graphique vous demandera de laisser le lien inséré dans son kit, vers son propre site. Le fait de supprimer ce lien peut entrainer pour vous des poursuites judiciaires pour plagiat. Respectez donc son travail, c'est la moindre des choses... De la même façon, vous avez la possibilité d'ajouter votre propre copyright, concernant le contenu de votre site.

10 5 La personnalisation et la mise en forme visuelle de la page index du site. Maintenant que nous sommes prêts, voici venir l'étape la plus importante dans la création de notre site. Quelques conseils de base. En effet, le succès rencontré sera fonction, non seulement du contenu, mais aussi de la présentation de notre page d'accueil. Premier point : sachez que la présence de fautes d'orthographe par exemple, sera le plus sûr moyen de faire fuir les éventuels visiteurs. Pensez donc à utiliser les correcteurs à votre disposition, que ce soit dans Word ou sur le Net. Utilisez aussi un langage correct en évitant notamment le sms. Second point crucial : le poids de votre page. Evitez les pages de plus de 30 Ko, vous conseillent la plupart des sites pour Webmasters ; ce en quoi ils n'ont pas tort! L'internaute qui arrive sur votre site n'aura pas la patience d'attendre 20 secondes, voire une minute si sa connexion n'est pas très rapide, l'ouverture de la page ; il sera déjà reparti ailleurs... Le troisième point : les méta-tags. Cela fera l'objet du chapitre suivant car plus délicat et pointu à traiter. Le dernier point : le référencement. Il fera l'objet de la dernière partie du tuto, ne se justifiant que lorsque votre site sera réellement mis en ligne. Sachez prendre le temps lors de cette étape! Mettre en ligne un site non fini n'est pas souhaitable. Cela ne vous empêchera pas de l'étoffer ou le modifier par la suite... A titre indicatif, cela m'a pris un bon mois pour Tutopat... Afin de procéder à la personnalisation, il est nécessaire d'accéder à notre page du kit.

11 5/A- Ouvrir notre page index. La commande est simple. Un clic sur puis, allez chercher le fichier HTML ; Il se nomme toujours «index». Le fichier s'ouvre maintenant dans Nvu.

12 Nvu nous offre la possibilité de voir notre page de quatre façons différentes qui sont chacune matérialisée par une touche. L'image que nous visualisons ci-dessus est celle correspondant à la touche Elle est située en bas à gauche de la fenêtre de Nvu, ainsi que les suivantes. C'est là que nous pourrons modifier les textes, liens, images, etc...

13 La touche Elle va ouvrir le fichier en vous indiquant la position de toutes les balises HTML, le langage utilisé dans la programmation de la page. Nous n'utiliserons pas cette fonction dans le tuto car elle s'avère peu maniable pour un débutant en création de site,

14 La touche Elle va nous permettre de visualiser directement le code HTML de la page. Nous y interviendrons ultérieurement lors de l'implantation de scripts ou pour entrer nos méta-tags...

15 Pour finir, la touche Celle-ci va nous permettre après chaque modification, mais aussi à tout instant, de visualiser le résultat tel qu'il apparaitra dans un navigateur. Nous utiliserons donc dans notre cas alternativement les onglets «Normal» et «Aperçu» pendant toute la configuration de notre site.

16 Noubliez pas surtout... Cette manoeuvre est à faire impérativement après chaque modification, à moins que nous ne souhaitiez repartir de zéro à cause d'une erreur...

17 5/B- Insérer sa bannière personnelle. Il est bien évident que vous souhaiterez insérer une bannière personnelle en lieu et place de celle du kit. La méthode la plus simple va consister à remplacer tout simplement celleci dans le dossier images du kit. Ouvrons donc ce dossier afin d'y voir la dimension qu'elle a, afin que la nôtre soit au même format. En effet, une bannière plus grande ou plus petite risquerait de déformer le kit... Ouvrez donc le dossier Mon site Web / images. Il s'agit là d'un format standard assez répandu pour lequel vous n'aurez aucun mal à trouver un éventuel générateur sur le Net grâce à Google. Tutopat vous propose aussi un service de création graphique gratuite Ce qui vous permettra une personnalisation encore plus poussée.

18 Vous trouverez aussi un bon nombre de tutos graphisme pour vous aider dans une conception totalement personnelle ici. Il est indispensable de souligner ici l'importance d'une bannière aussi légère que possible! Toujours dans le but de permettre un affichage rapide de nos pages... Voici donc celle que j'ai réalisée pour mon site : Elle est au bon format et porte le même nom : banniere. Un seul petit détail va poser un semblant de problème: elle est au format.gif alors que celle existante est en.png... Qu'à cela ne tienne, nous allons faire le nécessaire! Placez la bannière créée dans le dossier images de votre site.

19 Revenons à présent dans notre éditeur HTML, Nvu. Dans la fenêtre, Vous voyez votre curseur clignoter au niveau du code correspondant à la bannière. Je vous ai surligné l'ensemble du code de celle-ci.

20 Et là, comme par miracle... Noubliez pas de procéder à un enregistrement de la modification!

21 5/C- Insérer son logo personnel. Passons à présent au logo. Toujours dans l'esprit de ne pas dénaturer notre kit, vérifions la taille à utiliser pour créer notre version personnalisée. Dans l'onglet Normal, faites un clic gauche sur le logo situé en haut à gauche de la page. Vous retrouvez alors votre curseur qui clignote au beau milieu de la ligne de code concernant cette image. Il vous est expliqué dans la capture ci-dessous comment reconnaître les propriétés d'une image insérée dans le kit.

22 Résumons donc les propriétés de l'image que nous devons créer : elle doit faire 156 X 100 pixels. être de préférence en.png, mais pas obligatoirement. être mise dans le dossier images des fichiers de notre site. Il ne reste qu'à créer ce logo... Voici donc celui que j'ai créé pour ce site de démonstration.

23 Ayant fait le choix du format.gif pour celui-ci, je l'insère donc dans le dossier images de mon site sous le nom entetegauche,gif.

24 Il ne me reste plus qu'à modifier la ligne de code pour changer de logo. Pour cela, je change juste la terminaison du nom de l'image dans l'onglet Sources, tout simplement. Et là, nous constatatons que...

25 5/D- Personnaliser les couleurs des objets. En choisissant votre kit, vous vous êtes probablement demandé(e) si il existait une possibilité de changer les couleur des objets qui le consituent? Rien de plus simple! Ouvrez votre logiciel de retouche favori, puis modifiez le à votre guise. Est devenu pour moi ceci :

26 De ce fait, mon site change de look... Afin de visualiser ce changement, procédez à un enregistrement de votre fichier, puis fermer le et réouvrez. Les images de mon site sont à présent modifiées.

27 5/E- Changer la couleur du fond de page. Dans la continuité de la personnalisation de notre site, voyons à présent comment changer la couleur de fond de la page afin de l'adapter à notre goût personnel. Cliuqez sur la touche donnant accès au code : Dans la fenêtre, rendez vous au début du code afin d'y trouver la balise <body>. Vous la repèrerez facilement, juste après </head>. Le terme background-color signifie couleur d'arrière-plan. Elle est ici mentionnée au format RGB. Un logiciel comme ColorCop pour lequel un tuto est à votre dispositon ici vous permettra d'obtenir les codes de la couleur que vous désirez.

28 Mon choix s'est porté dans le cas présent sur une couleur saumon dont le code RGB est : 255, 151, 103. Je modifie donc mon code en conséquence.

29 En cliquant sur la touche Vous visualisez alors le changement d'apparence de votre page. Nous nous rendons alors compte que la couleur de fond ne couvre pas l'emplacment de certaines images qui ont gardé celle d'origine.

30 Il convient donc de reprendre les images suivantes afin de mettre la partie bleu-ciel dans la nouvelle couleur :

31 Servez vous de votre logiciel de retouche d'images afin de procéder à l'opération, en remplaçant les autres au fur et à mesure. Une fois cette opération terminée, profitons en pour enregistrer à nouveau notre fichier pour prendre en compte nos modifications. Ouvrons le à nouveau et là... Comme vous le constatez, notre page commence à vraiment prendre tournure sur le plan de son graphisme. Il est également possible de remplacer la couleur de fond par une image que vous aurez choisie. Dans ce cas, il vous faudra tout d'abord mettre en transparence la partie bleu-ciel des images ci-dessus, de façon à avoir toujours la même homogénéité, Ensuite, vous devrez modifier le code background. L'ajout d'une image en fond à la place d'une couleur étant susceptible d'alourdir considérablement la page, je vous déconseille fortement cette option et vous laisse donc découvrir éventuellement la façon de procéder.

32 5/F- Insérer une image supplémentaire dans la page. Les images faisant partie de notre kit sont une chose, mais nous pouvons désirer en rajouter une ou plusieurs supplémentaires dans notre page. Voici encore une manipulation simple si'lon respecte une règle première : mettre toujours les images dans le même dossier que les autres, Ainsi, notre site fonctionnera immédiatement dès sa mise en ligne. Nous n'aurons aucun mal à les retrouver si nous prenons en plus le soin de les nommer de manière aisément mémorisable! Prenons comme exemple l'image suivante à insérer : Je commence donc par la mettre dans le dossier images dans celui que j'ai créé sous le nom de Mon site Web.

33 Je clique gauche à présent directement à l'emplacement où je souhaite insérer l'image en question. Cliquez ensuite sur Puis

34 Volontairement, dans le cadre d'une création de premier site simple, je n'aborde pas les propriétés supplémentaires de l'image qu'il est possible d'apporter. Vous êtes cependant libre de les découvrir par vous-même,

35 Voici note image insérée. Nous sommes arrivé(e)s au terme de la configuration et de la mise en forme graphique de notre page. Il est encore une fois primordial de bien choisir votre kit en fonction du contenu images que vous souhaitez intégrer. Le texte est toujours modulable, l'image bien moins facilement intégrable à un kit inadapté...

36 6 Le personnalisation et la mise en forme textuelle de la page index du site. 6/A- Insérér du texte dans la page Insérer du texte pur est la manoeuvre la plus simple à effectuer. Revenez sur l'onglet Puis effacez la partie de texte dans le kit que vous désirez remplacer.

37 Grâce au pavé texte Insérez simplement le votre. N'hésitez pas à utiliser des polices sortant un peu de l'ordinaire, mais pensez toujours à vos lecteurs quand à la taille et la compréhension. Il est usuellement conseillé de ne pas utiliser beaucoup plus de trois couleurs de texte différentes. Ce qui donne dans mon cas, le résultat suivant : Il s'avère ici que la déformation est due au fait que ce kit n'accepte pas que l'on y entre des images, hormis dans l'en-tête. Ce fait est ponctuel et du uniquement au kit choisi, Vous n'aurez aucun souci à insérer vos images dans des réalisations mieux adaptées à cet effet.

38 6/B- Insérér un lien hypertexte dans la page. Il nous faut maintenant penser à finaliser notre page avec les liens de navigation vers nos autres pages, nos partenaires, des sites externes, etc... Pour cela, nous allons rendre un texte ou un mot cliquable ; on appelle cela un lien hypertexte. Dans l'exemple qui suit, nous allons ajouter un lien hypertexte sur le mot Tutopat située dans le cadre de navigation de gauche, cela va se faire dans l'onglet Procédez comme suit. Puis agissez comme indiqué sur la capture suivante.

39 Voici les choix dont vous disposez quand à la façon dont va agir le navigateur de vos visiteurs lors d'un clic sur le lien que nous venons de créer ici. Nous en avons fini avec le lien hypertexte. Il va de soi que cette manoeuvre sera à recommencer pour chaque lien externe à votre site. Le cas particulier d'un lien vers une autre page de votre propre site sera évoquée ultérieurement, lorsque nous en aurons créé au moins une seconde.

40 Voici donc le lien installé. Petit rappel : n'oubliez pas d'enregistrer vos modifications au fur et à mesure, sous peine de devoir recommencer! Pensez bien à en prendre systématiquement l'habitude afin de vous éviter des déconvenues qui peuvent mettrent vos nerfs à rude épreuve... Ceci était le conseil du jour, qui sert aussi de pause détente à ceux d'entre vous qui ont décidé d'avaler d'un trait ce tutorial en forme de pavé. Un petit café, un petit pipi, une cigarette (éventuellement) et l'on continue? Si vous vous sentez d'attaque, bien sûr!

41 6/C- Insérér un lien hypertexte sur une image de la page. Il peut vous être nécessaire de mettre un lien hypertexte, non plus sur un mot, mais sur une image de la page. Cela sera notamment le cas pour des bannières de partenaires, entre autres. La méthode est semblable à la précédente. Puis...

42 A dessein, je vous ai emmené au message d'erreur qui suit. La validation entraine la réouverture de la fenêtre précédente, mais dans un autre onglet : celui de l'emplacement. Nous resterons dans une configuration simple et ne mettrons donc pas de texte alternatif.

43 Notre lien hypertexte sur l'image est à présent en place. A vous de peaufiner le contenu texte de votre page d'accueil. N'oubliez pas que c'est là que la plupart des internautes jugent un site auquel ils rendent visite pour la première fois! Une syntaxe douteuse, un language type SMS et surtout des fautes d'orthographe, seront autant de risques de voir les visiteurs potentiels fuir à grands pas... Prenez donc le temps d'une rédaction soignée, en vous aidant au besoin d'un correcteur orthographique comme celui de Word par exemple.

44 6/D- Déterminer les couleurs des liens hypertexte. Voici un point de détail qui peut avoir une grande importance. Il est parfois difficile de repérer les liens hypertexte dans certaines pages Web que nous visitons... Nous allons donc faire en sorte que les notre soient bien visibles en configurant leur couleur suivant qu'ils sont simplement affichés, que le curseur du visiteur passe dessus ou qu'il l'ait déjà visité. Pour cela, cliquez sur la touche Puis sur... Voici comment procéder.

45 Faites vos propres essais. Dans la fenêtre de droite apparaissent les couleurs choisies. Vous pouvez ainsi visualiser leur lisibilité sur le fond. Voici mon choix personnel pour cette démonstration. Voici le résultat de cette opération.

46 Mes liens hypertexte sont devenus repérables. Nous en avons à présent fini de notre page d'accueil. Je vous le répète encore une fois,,,,, Soignez cette page, c'est la plus importante du site! Nous allons continuer notre parcours, non pas du combattant, mais du Webmaster... Une petite sauvegarde, juste pour la route?

47 7-La création de pages supplémentaires 7/A- La création. Un site Web, ce n'est pas qu'une seule page, c'est un ensemble! Si l'accueil est plutôt destiné à présenter succintement le contenu du site en essayant d'attirer le client, il va falloir créer des pages supplémentaires, à raison d'une (voire de plusieurs) par sujet, objet, motif, etc... Je vous invite à respecter pour cela deux règles d'or de la simplicité et de la fonctionnalité d'un site: Toujours garder le même habillage de page, tant que faire se peut. Cela permettra, en gardant les images dans le cache du navigateur, d'ouvrir les pages suivantes bien plus rapidement. Garder ainsi une uniformité du site qui vous rendra plus crédible auprès des internautes qui vous rendront visite. Ouvrez donc votre page index.

48 Suivant le principe appliqué pour notre page index, insérez votre contenu dans la page, comme vous l'entendez. Spécialement pour ce tutorial, j'ai rédigé rapidement une seconde page à titre d'exemple. Le moment est maintenant venu d'enregistrer cette page supplémentaire que nous venons de créer.

49 7/B- L'enregistrement des pages supplémentaires. Là encore, deux règles sont à respecter : Toujours enregister les nouvelles pages dans le même dossier que la page index. Donner un nom simple mais pertinent à chaque nouvelle page! Cela permettra de s'y retrouver facilement lors de modifications ultérieures à apporter à l'une plutôt qu'à l'autre. Je procède donc à l'enregistrement de ma seconde page. Je clique sur Puis... Ma seconde page est enregistrée, Cette opération est à répéter autant de fois que le site contiendra de pages, tout en sachant que vous pourrez toujours en rajouter par la suite en cas de besoin.

50 7/C- La navigation interne entre les pages du site. A partir de l'instant où un site comporte plusieurs pages, il va de soi qu'il est nécessaire de mettre en place un système de liens hypertexte entre elles, permettant ainsi de naviguer librement de l'une à l'autre... Nous allons pour cela utiliser un cadre sur la gauche de la page. Comme il s'agit encore là d'un lien hypertexte, surlignons le texte que nous désirons utiliser en guise de lien vers notre seconde page. Puis cliquons sur la touche de lien.

51 La fenêtre déjà vue de détermination de l'adresse URL du lien hypertexte s'ouvre. Le fait de cliquer la touche déclenche l'ouverture d'une nouvelle fenêtre, normalement déjà positionnée à l'intérieur du dossier du site.

52 Le fait de valider a mis en place le lien hypertexte de navigation à l'intérieur même du site.

53 Réitérez cette manipulation pour chacune des pages vers lesquelles vous souhaitez mettre en place un lien sur votre page index. Vous n'aurez plus ensuite qu'à faire la même chose sur chacune des pages que vous créerez, de façon à permettre la navigation complète indifféremment à partir de n'importe laquelle. Nous en avons à présent fini avec la construction même de notre site. Les images sont en place Les textes également Les liens de navigations interne et externes aussi les prochaines étapes vont maintenant avoir pour but la préparation à la mise en ligne de tout cela, en cherchant bien évidemment le but de tout site, attirer le client, si j'ose m'exprimer ainsi...

54 8 Les méta-tags. Voici encore un point crucial dans la construction de notre site! Que sont tout d'abord ces fameux méta-tags? En fait, le but premier que nous allons rechercher ici sera de chercher le meilleur moyen de faire connaître notre site. Une partie de ces méta-tags est une suite de mots-clés que nous allons ajouter dans le code de notre page afin de permettre aux moteurs de recherche de nous référencer lorsqu'un internaute tapera un mot ou une expression dans celui-ci. Il va vous falloir déterminer des mots-clés qui ciblent réellement le contenu de votre ou de vos pages. Un site comme Tutopat ne va par exemple pas se contenter du mot tutorial ou tuto pour permettre un bon référencement. Il va plutôt choisir d'y ajouter créer son site, tutoriaux Photofiltre, tutorial emule 0.46a ou tutorial création site HTML. Ce qui lui permettra un ciblage plus précis et donc de meilleures chances de se retrouver dans les premiers résultats d'un moteur de recherche. La seconde partie des méta-tags est elle destinée à permettre d'identifier certains critères de votre site comme le language utilisé, le système de codage du site, les coordonnées du Webmaster, etc... Tutopat a réalisé dans ce domaine deux tutoriaux concernant le sujet. Il s'agit de deux logiciels qui vont vous permettre de créer ces métas très facilement, surtout dans le cadre d'un premier site. GenerMTag et son tuto vous créera vos métas simples alors que si vous optez pour le tuto N1busMetaEditor, il vous poussera un peu plus dans le domaine. Libre à vous d'utiliser l'un ou l'autre pour créer les votres.

55 A titre d'exemple, voici les méta-tags que j'ai mis personnellement en place pour favoriser un bon référencement de Tutopat. Ces balises datent un peu et je dois les remettre à jour prochainement, mais elles vous donnent un aperçu réaliste. <title>accueil Tutopat</title> <meta NAME="description" CONTENT="Plus de 470 tutoriaux à votre service dans tous les domaines : logiciels, P2P, Graphisme, Vidéo, Bureautique, etc..."> <meta NAME="keywords" CONTENT="tuto, tutorial, tutos, tutoriaux, tutoriels, emule, azureus, vidéo, graphisme, sécurité, XP, logiciels, avatars, tutorial Shareaza, tutorial Bittornado, création bannières, création boutons, création signatures, tutorial emule 0.45b, tutoriaux Photofiltre, fonds d'écran"> <meta http-equiv="content-language" content="fr"> <meta NAME="author" CONTENT="Patarien"> <meta NAME="rating" CONTENT="general"> <meta NAME="classification" CONTENT="Tout public"> <meta NAME="copyright" <meta NAME="expires" CONTENT="never"> <meta NAME="rating" CONTENT="general"> <meta NAME="revisit-after" CONTENT="5 days"> <meta NAME="Robots" CONTENT="all"> <meta NAME="Reply to" <meta NAME="publisher" CONTENT="Patarien"> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso "> Soignez particulièrement cette étape, cela vous évitera la déconvenue d'un site totalement ignoré des internautes...

56 Et voici celles générées avec N1busMetaEditor, spécialement pour ce site de démonstration : Notez que j'ai remplacé certaines coordonnées personnelles par des * <meta http-equiv="content-type" content="text/html;charset=iso "> <Title>le titre de ma page</title> <meta name="keywords" content="255 caractères maximum de mots clés, séparés par une virgule. <meta name="description" content="description du contenu du site/moins de 200 caractères"> <meta name="abstract" content="description du contenu du site/moins de 200 caractères"> <meta name="author" content="patarien"> <meta name="generator" content="nvu ou Frontpage, etc..."> <meta name="publisher" content="patarien"> <meta name="reply-to" <meta name="contactcity" content="**********"> <meta name="contactzipcode" content="49***"> <meta name="contactstate" content="france"> <meta name="identifier-url" content="adresse URL"> <meta http-equiv="content-language" content="fr"> <meta name="copyright" content="copyright <meta name="revisit-after" content="15"> <meta name="category" content="computing/software"> <meta http-equiv="refresh" content="30;url=http://www.tutopat.com"> <meta name="distribution" content="global"> <meta name="rating" content="general"> <meta name="robot" content="index,follow"> <meta name="date-creation-yyyymmdd" content=" "> <meta name="date-revision-yyyymmdd" content=" "> <!-- METAS éditées par N1busMetaEditor v3.0 FREEWARE //--> <!-- WEB : //--> <!-- FEEDBACK : //--> <!-- Copyright N1bus-Expériences //-->

57 Il ne me reste qu'à les intégrer dans la page, à la place de celles existantes. Après enregistrement de la modification, ouvrez à nouveau votre page index et vous vous rendrez compte qu'elle a changé de nom et pris celui que vous lui avez donné par l'intermédiaire des méta-tags.

58 Répétez cette opération pour chacune de vos pages en ayant soin de les nommer de façon différente, même si vous gardez les mêmes méta-tags. La balises à modifier pour changer le titre qui apparaitra dans l'onglet du navigateur est la suivante : <Title>le titre de ma page</title>

59 9 Les scripts. 9/A- Présentation. Nous abordons à présent le dernier point de la conception d'un site avec l'ajout de scripts. Sachez tout de suite que vous n'avez aucune obligation d'en intégrer à vos pages car il ne s'agit la en fait que de l'agrémenter par quelques effets visuels, voire sonores. Leurs fonctions et leur utilité peut varier grandement et le choix de ceux que vous apporterez éventuellement à votre site vous incombe. Pensez malgré tout au poids de vos pages ; plus vous aurez de choses, plus votre page sera lourde et donc longue à ouvrir par de petites connexions... Il existe de très nombreux scripts proposés par un très grand nombre de sites de Webmastering. Je vous invite à rechercher parmi les partenaires de Tutopat qui s'avèrent très sérieux. Vous trouverez leurs adresses en page d'accueil. A titre d'exemple de mise en place d'un script, je vais vous donner ici deux exemples simples : Un effet de fondu-enchainé sur la navigation entre les pages. Un second effet...

Site internet du CREPS Aquitaine

Site internet du CREPS Aquitaine Site internet du CREPS Aquitaine Documentation de Mise à Jour 8 juillet 2010 Monsieur Pixel / Coop'Alpha page 1/22 GESTION D'UN SITE AVEC L'ENVIRONNEMENT SPIP Le site du CREPS Aquitaine fonctionne avec

Plus en détail

REALISER UN SITE INTERNET AVEC IZISPOT SOMMAIRE

REALISER UN SITE INTERNET AVEC IZISPOT SOMMAIRE REALISER UN SITE INTERNET AVEC IZISPOT Voici un tutoriel pour vous aider à réaliser un petit site internet (4 pages) à l'aide du logiciel gratuit IZISPOT. Dans l'exemple qui suit, il s'agit de mettre en

Plus en détail

Tutoriel de base. Copyleft 2010 réalisé par Roger Star sur Ooo

Tutoriel de base. Copyleft 2010 réalisé par Roger Star sur Ooo Tutoriel de base Table des matières 1Préambule1 2Téléchargement de Joomla1 3Base de données2 4Installation de Joomla2 5Contenu5 6Administration5 7Présentation de la structure de Joomla6 8Structure du site7

Plus en détail

Explorateur Windows EXPLORATEUR WINDOWS...1 INTRODUCTION...2 LANCEMENT DE L'EXPLORATEUR WINDOWS...3 PRÉSENTATION PHYSIQUE...3 RECHERCHER...

Explorateur Windows EXPLORATEUR WINDOWS...1 INTRODUCTION...2 LANCEMENT DE L'EXPLORATEUR WINDOWS...3 PRÉSENTATION PHYSIQUE...3 RECHERCHER... EXPLORATEUR WINDOWS SOMMAIRE EXPLORATEUR WINDOWS...1 INTRODUCTION...2 LANCEMENT DE L'EXPLORATEUR WINDOWS...3 PRÉSENTATION PHYSIQUE...3 RECHERCHER...6 ORGANISATION DE SES DOSSIERS...7 CRÉER UN DOSSIER...7

Plus en détail

Petit guide à l'usage des profs pour la rédaction de pages pour le site Drupal du département

Petit guide à l'usage des profs pour la rédaction de pages pour le site Drupal du département Petit guide à l'usage des profs pour la rédaction de pages pour le site Drupal du département Le nouveau site du département Le nouveau site du département est situé, comme l'ancien à l'adresse suivante

Plus en détail

Conception de pages HTML sous FrontPage Express

Conception de pages HTML sous FrontPage Express Conception de pages HTML sous FrontPage Express Le logiciel utilisé sera l'éditeur de Frontpage Express livré gratuitement avec Internet Explorer 4 et 5, il possède un tronc commun de fonctionnalités partagées

Plus en détail

Formations OCCE Conception et réalisation d'un site web - manipulations de base - utilisation de Claris Home page 3 et ftp expert.

Formations OCCE Conception et réalisation d'un site web - manipulations de base - utilisation de Claris Home page 3 et ftp expert. Formations OCCE Conception et réalisation d'un site web - manipulations de base - utilisation de Claris Home page 3 et ftp expert. Internet - un site web Le web est une des applications principales du

Plus en détail

Documentation de CMS-gen

Documentation de CMS-gen Table des matières GÉNÉRALITÉ... 1 LA ZONE D'ADMINISTRATION... 2 LOGIN SUR LA ZONE D ADMINISTRATION... 2 EDITION DU CONTENU EN LIGNE... 3 LE MODE EDITION... 3 PUBLICATION... 3 SUPPRIMER DES MODIFICATIONS...

Plus en détail

CRÉATION DE SITE INTERNET TD 1

CRÉATION DE SITE INTERNET TD 1 Création de pages Internet avec le logiciel libre Nvu - 1/7 CRÉATION DE SITE INTERNET TD 1 I LANCEMENT DE NVU ET CRÉATION DU SITE. 1) Liminaire : Créez en premier, un sous-dossier consacré au travail avec

Plus en détail

Le référencement gratuit sur internet grâce aux nouveaux outils

Le référencement gratuit sur internet grâce aux nouveaux outils Le référencement gratuit sur internet grâce aux nouveaux outils Le site internet n est plus la seule solution pour être visible sur le web. Il existe une multitude d outils qui communiquent entre eux et

Plus en détail

Google Chrome. La barre de favoris: Une petit barre (Ctrl+B) qui fait tout la largeur du navigateur juste en dessous de la barre de recherche.

Google Chrome. La barre de favoris: Une petit barre (Ctrl+B) qui fait tout la largeur du navigateur juste en dessous de la barre de recherche. Google Chrome Résumé rapide: Lien de téléchargement: http://www.google.fr/chrome La barre de favoris: Une petit barre (Ctrl+B) qui fait tout la largeur du navigateur juste en dessous de la barre de recherche.

Plus en détail

GUIDE D UTILISATION CRÉER SON SITE WEB - PROJET RESCOL

GUIDE D UTILISATION CRÉER SON SITE WEB - PROJET RESCOL GUIDE D UTILISATION CRÉER SON SITE WEB - PROJET RESCOL 1. Avant de commencer Il existe plusieurs éditeurs de pages Web qui vous permettent de construire un site Web. Nous vous conseillons toutefois de

Plus en détail

Un film à partir de photos avec windows movie maker

Un film à partir de photos avec windows movie maker Un film à partir de photos avec windows movie maker -Windows movie maker est un logiciel de montage vidéo gratuit qui est normalement déjà installé sur les ordinateurs sous windows (xp, vista et 7). Il

Plus en détail

PREMIÈRE PRISE EN MAIN DE DJANGO CMS

PREMIÈRE PRISE EN MAIN DE DJANGO CMS PREMIÈRE PRISE EN MAIN DE DJANGO CMS 1. PRÉSENTATION DE DJANGO CMS Django CMS est un système de gestion de contenu basé sur le serveur Django / Python. Simple d'utilisation, il dispose d'une interface

Plus en détail

Nous allons commencer par créer un nouveau document. Vous allez voir, c'est tout simple.

Nous allons commencer par créer un nouveau document. Vous allez voir, c'est tout simple. Initiation à Winword Word 2010 Page 1 sur 13 Maintenant que vous avez Word entre les mains, tâchons à présent de nous imprégner de son fonctionnement et de son utilisation la plus commune, la plus simple.

Plus en détail

Tutoriel Inscription et utilisation basique d'un blog hébergé chez Blogger.com

Tutoriel Inscription et utilisation basique d'un blog hébergé chez Blogger.com Tutoriel Inscription et utilisation basique d'un blog hébergé chez Blogger.com Contenu I.Validation (ou inscription) de son adresse chez Google...2 II.Utilisation des fonctionnalités du blog...5 1.Accès

Plus en détail

Administration du site (Back Office)

Administration du site (Back Office) Administration du site (Back Office) A quoi sert une interface d'administration? Une interface d'administration est une composante essentielle de l'infrastructure d'un site internet. Il s'agit d'une interface

Plus en détail

La Clé informatique. Formation Word XP Aide-mémoire

La Clé informatique. Formation Word XP Aide-mémoire La Clé informatique Formation Word XP Aide-mémoire Septembre 2003 Table des matières Édition et insertion de texte... 4 Manipulation d un document Exploration de la fenêtre de travail Bouton de maximisation

Plus en détail

Débuter avec OOo Base

Débuter avec OOo Base Open Office.org Cyril Beaussier Débuter avec OOo Base Version 1.0.7 Novembre 2005 COPYRIGHT ET DROIT DE REPRODUCTION Ce support est libre de droit pour une utilisation dans un cadre privé ou non commercial.

Plus en détail

Guide utilisateur Typo3

Guide utilisateur Typo3 Guide utilisateur Typo3 Niveau 1 Table des matières 1.Introduction...2 2.Login...2 3.Vue d'ensemble...3 4.Colonne de gauche...5 4.1Le mode PAGE...5 4.2Le mode VOIR...7 4.3Le mode LISTE...8 5.Colonne centrale...9

Plus en détail

Edition des portails régionaux du site Nature-France par les responsables SINP (rôle «manager-portail») Table des matières

Edition des portails régionaux du site Nature-France par les responsables SINP (rôle «manager-portail») Table des matières Edition des portails régionaux du site Nature-France par les responsables SINP (rôle «manager-portail») Table des matières Objectifs du document...2 Définitions...2 Convention d écriture...2 Pré-requis...2

Plus en détail

Manuel d'utilisation BeamYourScreen

Manuel d'utilisation BeamYourScreen Manuel d'utilisation BeamYourScreen Manuel d'utilisation BeamYourScreen Page 1 Sommaire Création d'un compte 3 Installation 3 Démarrer une session 4 Rejoindre une session 5 Login de session HTML 6 Caractéristiques

Plus en détail

Personnaliser un thème WordPress pour un Blog de l'ara. Méthode pas à pas.

Personnaliser un thème WordPress pour un Blog de l'ara. Méthode pas à pas. Personnaliser un thème WordPress pour un Blog de l'ara. Méthode pas à pas. Table des matières I. Les outils nécessaires... 3 II. Utilisation de l'outil Artisteer.... 3 1. Pourquoi utiliser Artisteer?...

Plus en détail

Création de site Internet avec Jimdo

Création de site Internet avec Jimdo Création de site Internet avec Jimdo Ouvrez votre navigateur internet ou Internet Explorer ou Mozilla Firefox Rendez vous sur la page http://fr.jimdo.com/ voici ce que vous voyez. 1=> 2=> 1. Le nom que

Plus en détail

Traitement de texte : Quelques rappels de quelques notions de base

Traitement de texte : Quelques rappels de quelques notions de base Traitement de texte : Quelques rappels de quelques notions de base 1 Quelques rappels sur le fonctionnement du clavier Voici quelques rappels, ou quelques appels (selon un de mes profs, quelque chose qui

Plus en détail

Création d'un questionnaire (sondage)

Création d'un questionnaire (sondage) Création d'un questionnaire (sondage) Le but de ce petit tuto est d'avoir les séquences pas à pas pour la création d'un questionnaire de façon à ne pas devoir rechercher la manière de procéder si l'outil

Plus en détail

Guide d'utilisation des blogs du CCFD-Terre Solidaire

Guide d'utilisation des blogs du CCFD-Terre Solidaire Guide d'utilisation des blogs du CCFD-Terre Solidaire Qu'est-ce qu'un blog? (texte emprunté à la plateforme de blogs Over-Blog) Le terme «Blog» est une abréviation de weblog, qui peut se traduire par «journal

Plus en détail

Exposer ses photos sur Internet

Exposer ses photos sur Internet Exposer ses photos sur Internet Vous souhaitez montrer vos photos à votre famille ou vos amis? Pour cela, il existe de nombreuses solutions : vous pouvez effectuer un envoi groupé par email, créer un site

Plus en détail

PREZI : Présentations dynamiques

PREZI : Présentations dynamiques Présentation pro ou photos Prezi PREZI : Présentations dynamiques durée de la séance : 2h00 tous public. Tutoriels et logiciels disponible sur www.epn-montalieu.fr Prérequis : - Connaître l'environnement

Plus en détail

Créer des pages web avec Front Page 2000

Créer des pages web avec Front Page 2000 Créer des pages web avec Front Page 2000 1 - Préparation Préparer le plan du site que l'on souhaite créer avec les liens reliant les différentes pages. Structure du site Structure pour le stockage des

Plus en détail

Tutoriel Pas à Pas pour Game Develop. Galaxies War

Tutoriel Pas à Pas pour Game Develop. Galaxies War Galaxies War Table des matières Galaxies War...1 Avant propos...2 Préparer le terrain...3 Création d'une première scène...3 Création et positionnement des objets...5 Création des évènements...9 Déplacer

Plus en détail

COMMENT FAIRE CONNAÎTRE SON SITE KEOSITE SUR INTERNET? COMMENT RÉFÉRENCER SON SITE SUR LES MOTEURS DE RECHERCHE? SOMMAIRE

COMMENT FAIRE CONNAÎTRE SON SITE KEOSITE SUR INTERNET? COMMENT RÉFÉRENCER SON SITE SUR LES MOTEURS DE RECHERCHE? SOMMAIRE COMMENT FAIRE CONNAÎTRE SON SITE KEOSITE SUR INTERNET? COMMENT RÉFÉRENCER SON SITE SUR LES MOTEURS DE RECHERCHE? SOMMAIRE - Le référencement : Qu est ce que c est? - Le nom de votre site - Le contenu de

Plus en détail

1 : Mettre en place le diaporama avec un arrière-plan

1 : Mettre en place le diaporama avec un arrière-plan POWERPOINT 2007 : LE DIAPORAMA 1 : Mettre en place le diaporama avec un arrière-plan A l'ouverture de PowerPoint 2007, nous avons cet écran...avec la barre d'outil d'accueil à l'emplacement marqué d'une

Plus en détail

3- Utiliser un exerciseur : Netquizz

3- Utiliser un exerciseur : Netquizz 3- Utiliser un exerciseur : Netquizz Un exerciseur permet de créer des exercices très facilement puis de les mettre en ligne sous forme HTML. Il en existe plusieurs : - Hotpotatoes est le plus célèbre,

Plus en détail

Plateforme pédagogique Moodle - Guide de l'étudiant. Accompagnement des étudiants dans la prise en main de la plateforme pédagogique Moodle

Plateforme pédagogique Moodle - Guide de l'étudiant. Accompagnement des étudiants dans la prise en main de la plateforme pédagogique Moodle Plateforme pédagogique Moodle - Guide de l'étudiant Accompagnement des étudiants dans la prise en main de la plateforme pédagogique Moodle Version 1.0.2 Da te Décembre 2010 Février 2012 Rédacteur Scherer

Plus en détail

Créer des pages WEB à l aide de KompoZer.

Créer des pages WEB à l aide de KompoZer. Document élève 1/14 Créer des pages WEB à l aide de KompoZer. Document élève 2/14 INTERNET : CREATION D UN SITE PRESENTATION Un site web (aussi appelé site internet par abus de langage) est un ensemble

Plus en détail

Navigation dans Windows

Navigation dans Windows Cours 03 Navigation dans Windows Comme je le disais en introduction, notre souris se révèle plus maligne qu'elle n'en a l'air. À tel point qu'il faut apprendre à la dompter (mais c'est très simple, ce

Plus en détail

Guide d utilisateurs Plesk WEBPACK GUIDE D UTILISATEURS

Guide d utilisateurs Plesk WEBPACK GUIDE D UTILISATEURS Guide d utilisateurs Plesk WEBPACK GUIDE D UTILISATEURS 1 PleskWebpack MAS_FR- Octobre 2010 SOMMAIRE - Introduction 1 - Créer un compte FTP et les droits d accès 2 - Utiliser l outil de rapport (statweb,

Plus en détail

CRÉER SON SITE INTERNET. Créer son site Internet. Méd de Roanne. FG 16/09/08

CRÉER SON SITE INTERNET. Créer son site Internet. Méd de Roanne. FG 16/09/08 CRÉER SON SITE INTERNET 1 Tout d abord, nous allons réviser quelques notions de base permettant de comprendre ce qu est un site Internet, et ce que cela implique. Dans un second temps, le lien ci-après

Plus en détail

Chapitre 2 Créer son site et ses pages avec Google Site

Chapitre 2 Créer son site et ses pages avec Google Site Réaliser un site internet à l aide de Google Site 10 Chapitre 2 Créer son site et ses pages avec Google Site 1. Créer un Google site 1. Rendez-vous sur www.google.be et connectez-vous à votre compte Gmail

Plus en détail

Les différents outils du backoffice

Les différents outils du backoffice Les différents outils du backoffice Aide pour backoffice Avant d expliquer le fonctionnement de votre outil d administration point par point, il est important de préciser que suivant le type de contrat

Plus en détail

Je veux des visites. 1 : Résumé de l'épisode précédent. 29/03/07 Formation Internet Fred Reillier

Je veux des visites. 1 : Résumé de l'épisode précédent. 29/03/07 Formation Internet Fred Reillier Je veux des visites 1 : Résumé de l'épisode précédent Je cherche une maison (1) Je voudrais une maison à Lubersac Je cherche une maison (2) DNS J'achèterais bien une maison www.immonot.com/requête compliquée

Plus en détail

Démarrer avec la Toutou Linux

Démarrer avec la Toutou Linux Démarrer avec la Toutou Linux 1.Comment démarrer sur le CD de Toutou Linux? Pour pouvoir démarrer avec le CD Toutou Linux, suivez les étapes suivantes : Allumer votre ordinateur. Ne cherchez pas à insérer

Plus en détail

Guide Rédacteur Typo3

Guide Rédacteur Typo3 Guide Rédacteur Typo3 Table des matières 1. Introduction 1 2. Login 1 3. Vue d'ensemble 2 1.1 Le mode Page...5 1.2 Le mode Voir...7 4. Créer une nouvelle page 8 5. Déplacer une page 9 6. Copier une page

Plus en détail

Installation et Réinstallation de Windows XP

Installation et Réinstallation de Windows XP 1 sur 25 16/08/2010 23:13 Réinstallation de Windows XP (avec formatage) Date 26/11/2005 16:08:03 Sujet : Tutorial Installation et Réinstallation de Windows XP Vous trouvez que votre PC n'est plus très

Plus en détail

SOMMAIRE : Présentation 1. installation et démarrage 1. Prise en main 5. Créer un nouveau projet... 5. Principales commandes... 6

SOMMAIRE : Présentation 1. installation et démarrage 1. Prise en main 5. Créer un nouveau projet... 5. Principales commandes... 6 SOMMAIRE : Présentation 1 installation et démarrage 1 Prise en main 5 Créer un nouveau projet... 5 Principales commandes... 6 Ajouter des objets... 6 Le menu contextuel des objets... 8 Lier un objet...

Plus en détail

Questions-Réponses 1.48

Questions-Réponses 1.48 Questions-Réponses 1.48 Copyright 2001-2014 Thomas et Mathieu DUBAËLE http://www.atlence.com Tutoriel de mise en route Tutoriel de Questions-Réponses 1.48 Auteurs : Thomas et Mathieu DUBAËLE - Révision

Plus en détail

claroline classroom online

claroline classroom online de la plate-forme libre d'apprentissage en ligne Claroline 1.4 Manuel Révision du manuel: 06/2003 Créé le 07/09/2003 12:02 Page 1 Table des matières 1) INTRODUCTION...3 2) AFFICHER LA PAGE DE DEMARRAGE...3

Plus en détail

Accéder au carnet de contacts

Accéder au carnet de contacts Pour vous faciliter le travail et ne pas avoir, chaque fois, à rechercher l'adresse d'un correspondant habituel, enregistrez vos destinataires courants dans un carnet de contacts. Lorsque vous enverrez

Plus en détail

Réalisation de quelques pages Web / Activités et travaux d'élèves

Réalisation de quelques pages Web / Activités et travaux d'élèves Réalisation de quelques pages Web / Activités et travaux d'élèves Principe : Il s'agit de réaliser avec Dreamweaver qautre pages web (donc au format Html, hypertexte Markup Language) et les lier entre

Plus en détail

Comment créer un site web Proxy gratuitement!

Comment créer un site web Proxy gratuitement! Comment créer un site web Proxy gratuitement! Author : soufiane Bonjour, Cherchez-vous comment créer un site web proxy gratuitement? Voulez-vous naviguer sur le web en anonymat totale en utilisant votre

Plus en détail

Chapitre 2 : Gérer son site avec Joomla

Chapitre 2 : Gérer son site avec Joomla Chapitre 2 : Gérer son site avec Joomla Utilisation de Joomla Une fois que le site est créé et mis en ligne, pour le modifier, il n y a pas besoin d installer de logiciels particulier sur votre ordinateur,

Plus en détail

Introduction à Dreamweaver CS4

Introduction à Dreamweaver CS4 Introduction à Dreamweaver CS4 Adobe Dreamweaver (anciennement Macromedia Dreamweaver) est un éditeur de site web de type «tel écrit tel écran» (cette formule remplaçant désormais dans la terminologie

Plus en détail

Guide d'utilisation. De Kompozer. AUTEUR INITIAL : S. LOIZEL Collège Saint Joseph Caudan (56)

Guide d'utilisation. De Kompozer. AUTEUR INITIAL : S. LOIZEL Collège Saint Joseph Caudan (56) Guide d'utilisation De Kompozer AUTEUR INITIAL : S. LOIZEL Collège Saint Joseph Caudan (56) Table des matières Fiche1 : Créer, nommer et sauvegarder une page...2 Fiche2 : Modifier les couleurs et le fond

Plus en détail

Logiciel de gestion de cours Manuel d'utilisation

Logiciel de gestion de cours Manuel d'utilisation Logiciel de gestion de cours 08.11.2009 bonobo@mvsi.ch Table des matières 1. Préambule 1 2. Fichiers 2.1 Texte par défaut 1 2.2 Langues 1 2.3 Base de données 1 2.4 Quitter 1 3. Participants Page 3.1 Liste

Plus en détail

Formation pour les rédacteurs du web dynamique Février 2006 TABLE DES MATIÈRES

Formation pour les rédacteurs du web dynamique Février 2006 TABLE DES MATIÈRES TABLE DES MATIÈRES Section 1 - Découvrir l espace privé... 1 1.1 L accès à l espace privé... 1 1.2 L'écran d'ouverture... 3 1.3 La barre des fonctions principales... 4 1.4 La barre de séparation et ses

Plus en détail

Diderot Manuel utilisateur

Diderot Manuel utilisateur Diderot Manuel utilisateur LOGIPRO : 2 rue Pierret Cité Négocia 43000 Le Puy Tél. : 04 71 09 15 53 Fax : 04 69 96 06 25 E-mail : logipro@logipro.com Site web :www.logipro.com TABLE DES AUTEURS/LECTEURS

Plus en détail

Alfresco Mobile pour Android

Alfresco Mobile pour Android Alfresco Mobile pour Android Guide d'utilisation de l'application Android version 1.1 Commencer avec Alfresco Mobile Ce guide offre une présentation rapide vous permettant de configurer Alfresco Mobile

Plus en détail

Pinnacle Studio Fiche n 1

Pinnacle Studio Fiche n 1 Pinnacle Studio Fiche n 1 Voici la première fiche de la cyber-base liée à l'utilisation du logiciel Pinnacle Studio (la version 10, mais Pinnacle reste très semblable d'une version à l'autre). Une première

Plus en détail

Les calques supplémentaires. avec Magix Designer 10 et autres versions

Les calques supplémentaires. avec Magix Designer 10 et autres versions Les calques supplémentaires avec Magix Designer 10 et autres versions Pourquoi ajouter un calque à votre page web? L'ajout d'un calque à une page web est parfois nécessaire lorsque la page est déjà bien

Plus en détail

Petit guide d'utilisation du site Internet de la classe d'appui linguistique, à destination de l'enseignante

Petit guide d'utilisation du site Internet de la classe d'appui linguistique, à destination de l'enseignante Petit guide d'utilisation du site Internet de la classe d'appui linguistique, à destination de l'enseignante Support en ligne: http://laclassedenorma.wifeo.com Lycée International Français Marcel Pagnol,

Plus en détail

Naviguer CHARGER ET QUITTER INTERNET EXPLORER

Naviguer CHARGER ET QUITTER INTERNET EXPLORER Naviguer UTILISER UN NAVIGATEUR CHARGER ET QUITTER INTERNET EXPLORER Pour pouvoir travailler avec votre application Internet Explorer il est indispensable de l'ouvrir. Pour réaliser cette opération plusieurs

Plus en détail

ETRE REDACTEUR DANS GUPPY (avec FckEditor) Se connecter sur le site Guppy en tapant son adresse dans un navigateur web.

ETRE REDACTEUR DANS GUPPY (avec FckEditor) Se connecter sur le site Guppy en tapant son adresse dans un navigateur web. ETRE REDACTEUR DANS GUPPY (avec FckEditor) Se connecter sur le site Guppy en tapant son adresse dans un navigateur web. 1) Se connecter en tant que rédacteur : Pour pouvoir écrire des articles, des fiches

Plus en détail

Formation à l administration de votre site Internet

Formation à l administration de votre site Internet Rédacteur : B2F Concept Date : 01/08/2012 Destinataire : Mairie de Drumettaz Formation à l administration de votre site Internet Introduction...2 Connexion à l administration...2 Gestion de contenu...3

Plus en détail

Mode d'emploi de la newsletter

Mode d'emploi de la newsletter Mode d'emploi de la newsletter Votre module de newsletter va vous permettre d'envoyer régulièrement des courriers électroniques à une partie ou à tous vos abonnés, Votre outil se compose de deux interfaces

Plus en détail

Le logiciel de création de site internet IZISPOT est un outil très puissant et qui est assez simple après quelques temps d utilisation.

Le logiciel de création de site internet IZISPOT est un outil très puissant et qui est assez simple après quelques temps d utilisation. 1 Le logiciel de création de site internet IZISPOT est un outil très puissant et qui est assez simple après quelques temps d utilisation. Voici un mode opératoire qui vous guidera dans l utilisation de

Plus en détail

B) - INSÉRER CARACTÈRES avec "WORD ART" 7

B) - INSÉRER CARACTÈRES avec WORD ART 7 Sommaire A) Travaillez avec Word 2003 2 1) - Ouvrir / Enregistrer / Fermer dans WORD 2 2) - Touche de CORRECTION et de MODIFICATION dans WORD 3 3) - Touche de DÉPLACEMENT et de POSITIONNEMENT 3 4) - Touche

Plus en détail

CREER UN PETIT SITE WEB EN COMPOSANT DES PAGES HTML

CREER UN PETIT SITE WEB EN COMPOSANT DES PAGES HTML CREER UN PETIT SITE WEB EN COMPOSANT DES PAGES HTML A L'AIDE DU LOGICIEL LIBRE OFFICE Libre Office 3.3.3 et Open Office.org 3.3.0 sont deux suites bureautiques complètes, équivalentes (seule la charte

Plus en détail

1. Introduction... 2. 2. Création d'une macro autonome... 2. 3. Exécuter la macro pas à pas... 5. 4. Modifier une macro... 5

1. Introduction... 2. 2. Création d'une macro autonome... 2. 3. Exécuter la macro pas à pas... 5. 4. Modifier une macro... 5 1. Introduction... 2 2. Création d'une macro autonome... 2 3. Exécuter la macro pas à pas... 5 4. Modifier une macro... 5 5. Création d'une macro associée à un formulaire... 6 6. Exécuter des actions en

Plus en détail

Naviguer sur le web avec Firefox 0.93

Naviguer sur le web avec Firefox 0.93 Naviguer sur le web avec Firefox 0.93 Firefox est le navigateur indépendant que l'on retrouve dans la suite internet Mozilla. On le lance en double-cliquant sur son icône et on obtient la fenêtre suivante

Plus en détail

Comment formater votre ebook avec Open Office

Comment formater votre ebook avec Open Office Comment formater votre ebook avec Open Office 1 2012 Nicolas Boussion Tous droits réservés. Important : ce livre numérique, comme toute œuvre de l'esprit, fait l'objet de droits d'auteur. Son contenu a

Plus en détail

1. Paramétrer la sauvegarde automatique de Windows

1. Paramétrer la sauvegarde automatique de Windows personnelles (documents, images, musiques, vidéos, etc.) est une démarche à ne pas négliger. Qu il survienne en effet une panne ou un dégât de l ordinateur et celles-ci sont définitivement perdues sans

Plus en détail

COMPTE GOOGLE ET OUTILS ASSOCIÉS

COMPTE GOOGLE ET OUTILS ASSOCIÉS COMPTE GOOGLE ET OUTILS ASSOCIÉS Les outils Google gratuits sont nombreux et variés (GMail, Documents, Photos, Agenda, You Tube, Doodle... Ils sont liés à l ouverture d un compte Google par une adresse

Plus en détail

Comment installer wordpress. www.bxart.be wp niveau 1

Comment installer wordpress. www.bxart.be wp niveau 1 www.bxart.be wp niveau 1 Installation Introduction Wordpress est un CMS ce qui signifie : système de gestion de contenu (Content Management System). Il y a d autres CMS mais c est de loin le plus populaire.

Plus en détail

La Clé informatique. Formation Powerpoint XP Aide-mémoire

La Clé informatique. Formation Powerpoint XP Aide-mémoire La Clé informatique Formation Powerpoint XP Aide-mémoire Septembre 2003 Contenu de la formation Powerpoint XP Leçon 1 : Introduction à PowerPoint Démarrage de PowerPoint Leçon 2 : Environnement Powerpoint

Plus en détail

Page 1 Initiation rapide au logiciel PicturesToExe version 4.48 (proposée par Maurice Guidicelli)

Page 1 Initiation rapide au logiciel PicturesToExe version 4.48 (proposée par Maurice Guidicelli) Page 1 Initiation rapide au logiciel PicturesToExe version 4.48 (proposée par Maurice Guidicelli) Préambule: Les affirmations qui constituent cette initiation, souvent péremptoires, doivent permettre à

Plus en détail

Grace à MCK III, la fabrication de sites internet où de CD-Rom n'a jamais été aussi simple et amusante.

Grace à MCK III, la fabrication de sites internet où de CD-Rom n'a jamais été aussi simple et amusante. 1 Grace à MCK III, la fabrication de sites internet où de CD-Rom n'a jamais été aussi simple et amusante. D'un simple clic, intégrez dans vos pages du texte, des images, du son et de la vidéo. Pour avoir

Plus en détail

Guide de l'utilisateur PROTECTIS. Réalisé par le C.D.I.P.

Guide de l'utilisateur PROTECTIS. Réalisé par le C.D.I.P. Guide de l'utilisateur PROTECTIS Réalisé par le C.D.I.P. Table des matières INSTALLATION 1 Installation du logiciel...1 Ouverture du logiciel...1 Première ouverture du logiciel...1 Les ouvertures suivantes...3

Plus en détail

mes photos sur l'ordinateur

mes photos sur l'ordinateur photo numérique mes photos sur l'ordinateur Création du dossier PHOTOS - Transfert des photos vers l'ordinateur - Installer XnView - Etiqueter des photos avec XnView - Rechercher des photos à l'aide des

Plus en détail

FireFox. Présentation

FireFox. Présentation Présentation FireFox fait partie du projet Mozilla. Mozilla est un ensemble de logiciels Internet comprenant entre autres un navigateur Web et une application de messagerie électronique. Mozilla est un

Plus en détail

PREMIERS PAS SUR INTERNET AVEC INTERNET EXPLORER 7

PREMIERS PAS SUR INTERNET AVEC INTERNET EXPLORER 7 BIEN VIVRE A SAINT ALBAN LEYSSE PREMIERS PAS SUR INTERNET AVEC INTERNET EXPLORER 7 Les Réseaux Un réseau est constitué de plusieurs ordinateurs pouvant communiquer ensemble. Un réseau commence avec 2 ordinateurs

Plus en détail

Guide pour la réalisation d'un document avec Open Office Writer 2.2

Guide pour la réalisation d'un document avec Open Office Writer 2.2 Guide pour la réalisation d'un document avec Open Office Writer 2.2 1- Lancement de l'application : Le Traitement de textes de la Suite OpenOffice peut être lancé : soit depuis le menu «Démarrer / Programmes/OpenOffice2.2/Writer

Plus en détail

Guide de démarrage rapide Centre de copies et d'impression Bureau en Gros en ligne

Guide de démarrage rapide Centre de copies et d'impression Bureau en Gros en ligne Guide de démarrage rapide Centre de copies et d'impression Bureau en Gros en ligne Aperçu du Centre de copies et d'impression Bureau en Gros en ligne Pour accéder à «copies et impression Bureau en Gros

Plus en détail

Tutorial pour Administrateur restreint

Tutorial pour Administrateur restreint Tutorial pour Administrateur restreint SPIP (Système de publication pour l'internet partagé) Version 1.2 JM Doléans Association Indepnet 1/28 Sommaire S'identifier...3 L'interface administrateur...4 1)

Plus en détail

UTILISATION CMS LINKEO

UTILISATION CMS LINKEO UTILISATION CMS LINKEO Table des matières 1 Synopsis... 3 2 Connexion à l'interface d'administration...4 3 Edition d'une page...5 3.1 Edition d'une page...5 3.2 Ajout d'une image...5 3.2.1 Transfert d'une

Plus en détail

Scolasite.net, le créateur de site web au service des enseignants. Guide d'administration du site Internet. Page 1

Scolasite.net, le créateur de site web au service des enseignants. Guide d'administration du site Internet. Page 1 Guide d'administration du site Internet Page 1 Scolasite permet de créer rapidement un site Internet, sans connaissances techniques particulières. Spécialement destiné aux établissements scolaires, son

Plus en détail

Outils etwinning : mode d'emploi

Outils etwinning : mode d'emploi Outils etwinning : mode d'emploi Inscription à etwinning 1ère étape : Données sur l'utilisateur 2ème étape : Préférences de jumelage 3ème étape : Données sur l'école 4ème étape : Profil de l'école Outil

Plus en détail

Prise en main du logiciel Smart BOARD

Prise en main du logiciel Smart BOARD Prise en main du logiciel Smart BOARD 1. Introduction : Le logiciel Smart BOARD est utilisable avec les tableaux blancs interactifs de la gamme SMART. Toutefois, il n'est pas nécessaire d'avoir un tbi

Plus en détail

Réaliser un PUBLIPOSTAGE

Réaliser un PUBLIPOSTAGE Réaliser un PUBLIPOSTAGE avec le traitement de texte Writer ( OpenOffice ou LibreOffice ) Guide et captures d'écran réalisés avec la version 3.2 d'openoffice. Janvier 2011 - Jean-Claude EYRAUD Création

Plus en détail

Thème : Création, Hébergement et référencement d un site Web

Thème : Création, Hébergement et référencement d un site Web Formation au profit des enseignants de l'université Ibn Zohr Thème : Création, Hébergement et référencement d un site Web Omar El Kharki & Jamila Mechbouh http://perso.menara.ma/~elkharki/ Ou bien http://www.elkharki.africa-web.org/

Plus en détail

Mettre à jour PrestaShop

Mettre à jour PrestaShop Mettre à jour PrestaShop De nouvelles versions de PrestaShop sortent régulièrement. Certaines sont des versions majeures, la plupart sont mineures, mais toutes apportent leur lot d'innovation, d'amélioration

Plus en détail

Manuel d utilisation email NETexcom

Manuel d utilisation email NETexcom Manuel d utilisation email NETexcom Table des matières Vos emails avec NETexcom... 3 Présentation... 3 GroupWare... 3 WebMail emails sur internet... 4 Se connecter au Webmail... 4 Menu principal... 5 La

Plus en détail

Les CMSs, comment ça marche et comment choisir le bon CMS? (mon site, pas à pas)

Les CMSs, comment ça marche et comment choisir le bon CMS? (mon site, pas à pas) Les CMSs, comment ça marche et comment choisir le bon CMS? (mon site, pas à pas) Author : soufiane Bonjour, J'ai parlé dans les tutoriels précédents de la série "mon site, pas à pas" sur les divers langages

Plus en détail

Mode d'emploi Wordpress Administration du contenu. http://slconstantia.com/wp-admin/

Mode d'emploi Wordpress Administration du contenu. http://slconstantia.com/wp-admin/ Mode d'emploi Wordpress Administration du contenu http://slconstantia.com/wp-admin/ Sommaire I. Connexion à l'espace privé 1. 2. 3. Où est-ce? Identification Présentation de l'interface II. Notions fondamentales

Plus en détail

Installation et Réinstallation de Windows XP

Installation et Réinstallation de Windows XP Installation et Réinstallation de Windows XP Vous trouvez que votre PC n'est plus très stable ou n'est plus aussi rapide qu'avant? Un virus a tellement mis la pagaille dans votre système d'exploitation

Plus en détail

Créer et faire vivre un site web pédagogique

Créer et faire vivre un site web pédagogique Créer et faire vivre un site web pédagogique 1. Créer un site web... 2 2. Utilisation d un CMS... 2 3. SPIP : Système de Publication Internet Partagé... 2 4. Le site de la Cité Scolaire Jean Moulin...

Plus en détail

1 CREER UNE PREMIERE PAGE WEB

1 CREER UNE PREMIERE PAGE WEB CLARIS HOME PAGE 2.0 1 CREER UNE PREMIERE PAGE WEB 1.1 DEMARRER CLARIS HOME PAGE Options du document Figure 1 CLARIS HOME PAGE affiche une page vide appelée «Sans titre.htm» Pour changer la couleur de

Plus en détail