ptlb-formation à Poitiers

Tutoriels de formation
pour les infographistes débutants et avancés

Stratégie et conception de site Internet - partie 07

Création d'un site internet avec Word
 
Retour au sommaire des vidéos -  Vidéogramme suivant ...

Regarder « Création d'un site internet avec Word » sur youtube
Consultez notre choix de formations sur PTLB-Formation.fr

Un site internet avec Word

Nous allons utiliser le logiciel qui se nomme « Word », bien connu de tous, car celui-ci possède une exportation au format html.

Dans Word, je copie/colle les informations depuis le bloc-notes en supprimant les balises « BR ».

Maintenant, je vais réaliser quelques modifications.

Tout d’abord, je surligne le titre.

J’utilise la commande « centrer » et je lui indique le corps « 18 ». J’utilise la famille de caractères par défaut, ici du « Calibri ».

J’utilise la commande « enregistrer sous ».

Grâce à la commande « parcourir » je choisis l’endroit où le fichier doit être disposé.

Je crée un nouveau dossier qui se nomme « word »

J’inscris le terme « index ».

Par contre, il est nécessaire de modifier le « type » est de choisir « page Web html ».

L’extension générée est « .htm », il me faut donc ajouter la lettre « l » à l’extension. Ceci n’est pas indispensable, c’est juste pour être en cohérence avec nos autres exemples.

Je retourne de nouveau dans « Fillezilla »

Je remonte dans l’arborescence à la fois sur le disque dur et également sur le serveur distant.

Je copie sur le serveur le dossier « word ».

Je retourne dans le navigateur.

Je modifie l’adresse du site Internet en remplaçant « bloc-notes » par « word ».

Le code source de la page

Regardons un peu le code source de cette page.

J’appuie sur le bouton droit de la souris et je sélectionne « afficher le code source de la page ».

Pendant un instant, je suis un peu perplexe par la quantité de texte généré par « Word ».

En scrollant jusqu’en bas de la page, on retrouve le texte qui a été inscrit dans « Word ». Sans être Web designer, on reconnaît un certain nombre d’informations.

Text-align :center

Ici je remarque un morceau de code où il est inscrit « style='text-align:center' ». Il est facile de faire le rapprochement avec la commande centrée que nous avons utilisée dans « Word ».

Nous remarquons une autre chose.

La section qui correspond à notre texte de base est entourée d’une balise ouvrante et d’une balise fermante qui possède le même nom. Cette balise se nomme « body ».

Les balises html

La balise ouvrante correspond à « body » et la balise fermante correspond à » /body ».

Comme nous le savons tous, « body » veut dire corps en anglais.

Nous pouvons remarquer d’autre chose.

Lorsqu’il y a une balise ouvrante, il y a une balise fermante.

Dans la phrase qui correspond à l’accroche, celle-ci commence par la balise « P » et se termine par la balise » /P ».

Un petit peu au-dessus se trouve la balise fermante « /head » qui comme chacun sait veut dire tête.

La balise qui se trouve tout en bas est également une balise fermante qui s’appelle » /html ».

A l’aide de l’ascenseur, retournons en haut de la page.

Les balises ouvrantes se trouvent tout en haut de la page.

Le premier mot correspond à la balise ouvrante « html » et quelques lignes en dessous se trouvent la balise ouvrante « head ».

Si l’on résume la situation, entre les balises html se trouve une partie qui concerne la tête et une partie qui concerne le corps. Ce qu’il faut retenir, c’est que seul le corps est visible par l’internaute.

Partie « head » : invisible pour l’internaute

Ce qui explique que la grande partie du code généré par « word » n’est pas visible sur la page Internet.

Nous allons modifier quelque peu notre mise en page et notamment ajouter une image.

Retournons dans « Word ».

Modifions tout d’abord l’accroche et plaçons le curseur texte après les « : ».

Si besoin, j’enlève les espaces pour n’avoir qu’une seule ligne.

J’appuie simultanément sur la touche « entrée » et sur la touche « majuscule » du clavier afin d’effectuer un retour à la ligne et non pas un changement de paragraphes. Cette manipulation créera une balise de type « BR ».

Je sélectionne le texte et j’utilise la commande « centrer » et je sélectionne le corps 14.

Du coup, je trouve que mon titre est un peu petit et je lui attribue le corps « 22 ».

L’ajout d’une image

Pour ajouter une image, celle-ci doit posséder un chemin spécifique. Pour plus de facilité, nous placerons l’image de notre choix pour que celle-ci soit contiguë au fichier « index.html ».

Regardons maintenant le contenu du disque dur.

Je vais chercher l’image qui m’intéresse pour en faire une copie. Celle-ci se trouve dans le dossier « element-preparatoires » et se nomme « photographie.jpg ».

Je la sélectionne puis j’utilise le raccourci clavier « ctrl + C » pour « copier » l’image.

Je remonte dans l’arborescence pour pouvoir me placer dans le dossier « word ».

J’utilise le raccourci clavier « ctrl + V » pour « coller » l’image.

Je retourne maintenant dans » word ».

Plaçons notre image dans notre page « word »

Le curseur doit se trouver sous la phrase d’accroche.

Pour cela, je vais dans le menu « insertion » et je clique sur l’icône « image ».

Je me place dans le dossier « word ».

Ici nous choisirons le fichier qui se nomme «photographie.jpg ».

La photo possède une grande taille, alors j’appuie sur le bouton droit de la souris et je sélectionne la commande « taille et position ».

Réduction de l’image

Dans la rubrique « échelle » j’indique la valeur 40 % et je veille à ce que l’homothétie soit préservée. Autrement dit, je vérifie que l’option « conserver les proportions » est cochée. Puis je clique sur « Ok »

Je retourne dans le menu « accueil de word » et si besoin, je centre mon image.

Nous allons ajouter un lien hypertexte.

Ce lien pourrait pointer sur une deuxième page, mais ici nous allons faire pointer ce lien vers un fichier PDF que l’internaute pourra télécharger.

Pour cette démonstration, nous utiliserons le catalogue PDF de la présentation des formations.

Il est nécessaire de suivre la même procédure.

Sur le disque dur de l’ordinateur, je copie le « fichier PDF » qui se trouve dans le dossier « elements préparatoires » et je le colle dans le dossier « Word » afin que celui-ci soit contigu au fichier « index.html »

De retour dans « Word », je place le curseur sous l’image et j’inscris le terme « télécharger notre catalogue de formation ».

Je surligne le terme « télécharger notre catalogue de formation ».

Dans le menu « insertion », je clique sur l’icône qui se nomme « liens », puis « lien hypertexte ».

Une fenêtre s’affiche et je sélectionne le fichier PDF contigu aux fichiers .html. Celui-ci se nomme « formation-en-infographie-ptlb.pdf ».

Menu « fichier » commande « enregistrer » pour ainsi remplacer le fichier « index.html ».

Transfert de fichiers

Il est nécessaire de mettre les fichiers à jour sur le serveur.

Je vais dans « filezilla ».

Pour plus de simplicité, je vais copier l’ensemble du dossier « Word » sur le serveur distant.

Une invite de « filezilla » s’affiche et je coche l’option « toujours effectuer cette action » puis je clique sur le bouton « OK ».

Après quelques instants les fichiers sont en ligne.

Je retourne dans le navigateur et j’actualise la page.

La page s’affiche correctement et le lien nous permet de visualiser le fichier PDF.

Il m’est donc facile de parcourir celui-ci.

Faisons un bref constat.

À partir du moment où nous sommes capables d’afficher des textes, des images et des liens, nous sommes capables de réaliser un site vitrine. L’utilisation de Word peut apporter une réponse à un certain nombre de demandes.

Le référencement naturel

Toutefois, il y a un problème et ce problème est de taille. « Word » ne permet pas d’optimiser le site Internet pour organiser un référencement naturel. C’est-à-dire informer Google que votre site Internet existe et qu’il est possible que celui-ci corresponde à l’attente d’un prospect.

Il est donc nécessaire de modifier le code, ce qui une fois de plus nous ramène à l’utilisation du html 5 et du CSS 3.

Toujours dans le navigateur, appuyons sur le bouton droit de la souris afin d’afficher le code source.

Examinons un exemple très simple. Dans la partie du code qui se trouve tout en bas, nous pouvons lire les mots suivant «  Src="index_fichiers/image002.jpg" ».

La balise « SRC » n’est autre que la balise « source ». Ici, on pourra lire cet extrait de code de la façon suivante : la source de l’image se trouve dans le dossier « index_fichiers » et le nom de l’image est « image 002.jpg ».

Il est facile de comprendre que Google, entre autres, ne pourra pas donner de signification à cette image qui possède un tel titre.

Pour bien faire, il serait nécessaire d’effectuer ces modifications.

Nous n’allons pas effectuer les modifications. Car la manière dont Word code le .html rend la tâche extrêmement ingrate.

En effet, il crée toute une série de fichiers qu’il place dans un dossier nommé « index_fichiers ». Il faut donc trouver une solution.

Nom de l’image, ALT et TITLE

En ce qui concerne notre image et pour apporter une réponse concrète à Google il faut au moins intervenir sur trois ingrédients : Le nom de l’image, le titre de l’image et le texte de remplacement de l’image.

Commençons par le nom de l’image. En effet, celle-ci se nomme au départ « photographie.jpg » et en utilisant Word celle-ci prend le nom de « image 002.jpg ».

Il est donc nécessaire de trouver un nom plus explicite comme par exemple « la-colorisation-a-l-aide-de-photoshop.jpg ». Il est nécessaire de ne pas utiliser des caractères spéciaux et remplacer les espaces par des tirets.

En html, il existe une balise qui se nomme « title ». Cette balise est fondamentale puisqu’elle donne un titre à l’image et de surcroît, elle affiche une infobulle lorsque le curseur de la souris est sur l’image.

À l’intérieur de la balise « title », il est possible d’inscrire une phrase dans un langage normal sans contrainte de caractères spécifiques. Ici nous pourrions inscrire « Photoshop est l’outil idéal pour la colorisation d’images avec des effets les plus surprenants ».

Afin de parfaire le référencement de cette image, nous utiliserons une troisième balise qui se nomme « Alt ». Celle-ci permet de renseigner les personnes malvoyantes.Cette balise correspond à « texte alternatif à l’image ». Dans notre exemple, nous pourrions inscrire « alt= "portrait d’une personne avant colorisation et après colorisation grâce au logiciel Photoshop" ».

Ainsi, Google possédera des informations suffisantes pour catégoriser l’image. La méthode Word n’est donc pas tout à fait concluante, sauf si le mode de fonctionnement de votre entreprise ne requiert pas le référencement.

Voir la suite sur le vidéogramme suivant ...

Pierre Tomy Le Boucher