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. 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.
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. Les solutions « perso » http://www.multimania.lycos.fr/ http://www.free.fr http://monsite.voila.fr/ et beaucoup d’autres encore...
14.
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. 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. 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. 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. 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. 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. 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. 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.
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. 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. 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. 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
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. 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.
34.
35.
36.
37.
38.
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.