ptlb-formation à Poitiers

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

Stratégie et conception de site Internet - partie 06

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

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

Un site internet avec le bloc-notes

Comme cette démonstration est réalisée sur PC, j’ouvre le bloc-notes. Le bloc-notes étant un éditeur de texte dès plus basique.

J’inscris ou je « copie/colle » le titre du site Internet et une phrase d’accroche.

Le texte copié collé est donc le suivant : « PTLB – Formation » et en dessous « PTLB - Formation propose des mises à jour régulières : condition vitale pour trouver et conserver un emploi. » Dans le menu « fichier », je sélectionne la commande « enregistrer sous ».

Comme nous allons utiliser plusieurs manières de faire, je vais créer un dossier qui se nomme « bloc-notes ».

Index.html

À l’intérieur de ce dossier, j’inscris le mot « index » dans le champ correspondant à « nom de fichiers ».

Je remplace l’extension « .txt » par « .html » puis je clique sur « enregistrer ».

De retour dans « Filezilla», j’utilise le bouton droit de la souris dans la partie correspondant à l’ordinateur et j’actualise pour voir le dossier « bloc-notes » qui contient le fichier « index.html ».

Je remonte d’un cran pour pouvoir sélectionner le dossier qui se nomme bloc-notes.

Pour transférer ce dossier du disque dur de l’ordinateur vers le serveur distant, il suffit de le sélectionner et de le faire glisser dans la partie droite.

Après quelques secondes le fichier est visible chez l’hébergeur.

Dans le navigateur

Dans le navigateur, j’inscris ou je copie / colle l’adresse suivante : « http://www.ptlb-formation.com/demo/bloc-notes ».

Apparaît alors à l’écran notre texte avec une mise en page et une mise en forme différente.

De surcroît, nous avions utilisé un caractère bâton comme l’Arial et dans le navigateur l’écriture est du « Times ».

Toujours dans le navigateur, appuyons sur le bouton droit de la souris et demandons à afficher le code source de la page. Un nouvel onglet s’affiche et l’on retrouve exactement le même texte qui a été tapé dans le bloc-notes.

Il faut en déduire que les navigateurs utilisent des paramètres par défaut tel que, par exemple, la police de caractère « Times » avec une taille spécifique.

Ici, le site Internet est un peu sommaire, car si on ajoutait du texte, celui-ci serait disposé au kilomètre. Il est donc nécessaire de modifier cette page afin d’ajouter des ingrédients qui vont être pertinents pour les navigateurs.

HTML 5 et CSS 3

Il est donc nécessaire d’apprendre le html 5 pour le balisage et le CSS 3 pour la mise en forme.

Ici, juste pour l’amusement, nous allons utiliser une balise html qui permet d’effectuer un retour « à la ligne ».

Je retourne dans le bloc-notes et j’ajoute la balise « plus petit que... « BR » plus grand que...  » pour « back return » à la fin de la première ligne, à la seconde ligne et à la fin de la troisième ligne.

Je sauve mon fichier à l’aide de la commande « enregistrer ».

Dans « FileZilla », je remplace le fichier qui se trouve sur le serveur.

Une invite de « Filezilla », m’informe que le fichier sera remplacé, je clique sur « OK ».

Je retourne dans le navigateur et je rafraîchis la page.

Ainsi ma nouvelle mise en page est déjà plus fonctionnelle.

Si l’on connaît l’ensemble des balises « html » et l’ensemble du « CSS », il est possible de réaliser un site Internet avec le bloc-notes.

Sublime texte 2, Notepad ++, Komodo

Il existe toute une série de logiciels utilisés par les programmeurs, le plus souvent gratuits et qui donnent d’excellents résultats. On pourrait citer « sublime texte 2 », « Notepad ++ » ou encore « Komodo ».

Les infographistes préféreront utiliser Adobe Dreamweaver, car son interface, avec notamment sa visualisation en directe, rend les choses plus simples.

Essayons une autre solution qui nous permettrait d’éviter de connaître le html et le CSS.

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

Pierre Tomy Le Boucher