Mon parcours en informatique

Au cours de ma vie professionnelle j'ai un peu utilisé l'informatique en espérant pouvoir me perfectionner dès que j'en aurais le temps.

Ce temps est venu et j'anime, depuis plusieurs années, des ateliers de retouche photo, Internet et de création de site. 

Kompozer est un logiciel libre et gratuit permettant de créer des pages web en se chargeant d'écrire les codes à notre place. Le débutant peut ainsi consacrer toute son attention à la mise en page à l'aide des feuilles de style en cascade les CSS.

Super computers de la NasaMes motivations

Carte mèreJe me suis rendu compte que les exercices sont incontournables pour bien assimiler la théorie de la mise en page avec les CSS. 

Nous apprendrons peu à peu comment 

Je souhaite que les connaissances que je pourrais transmettre aux débutants par le biais de mes tutoriels  leur permettent de poursuivre une formation individuelle et leur donnent envie de devenir de vrais webmasters.

Mon projet

Kitty sur mon portable Mon projet est de proposer aux débutants un modèle pour leur site d'exercices, chaque page étant complétée par des explications pour les aider à structurer et rédiger leurs premières pages. C'est un guide pas à pas pour prendre en main l'interface de Kompozer et de son éditeur de CSS Cascades.


Les images utilisées pour les exercices sont des photos personnelles ou bien cédées par des amis, ou bien encore des photos libres de droits et gratuites que l'on peut trouver sur des sites Internet comme Wikipedia, deviantArt, ac-lille.fr , Free DPI , Photo libre , 01gif.com ,  

Tutoriel : page index.html de notre site

Nous supposons que le lecteur a

La page index est la page par défaut sur laquelle nos visiteurs accéderont quand ils taperont l'url de notre site. (une URL commence toujours par http:// )
La page index est indispensable car si le navigateur ne la trouve pas sur le serveur, à la racine du dossier,  il ne peut pas ouvrir le site et le visiteur ne peut accéder à aucune page.

Nous allons donc commencer par la création de la page index.html de notre site d'exercices (modèle ci-dessus).

Kompozer est un logiciel dit "wysiwyg". Il nous permet de travailler en visuel pendant qu'il écrit, à notre place, les codes html et css que les navigateurs vont devoir interpréter pour afficher nos pages.
C'est bien pratique pour l'apprentissage mais nous serons amenés tôt ou tard à essayer de comprendre ces codes pour pouvoir intervenir directement à la source.
Toutefois il ne faut pas assimiler Kompozer à un traitement de texte. Les touches du clavier Entrée et Espace ne doivent pas servir à positionner un élément. Ici tout est bloc avec une bordure visible ou pas, et de chaque côté de la bordure nous avons une marge. C'est la dimension du bloc et des marges qui servent à positionner le bloc. Quand un élément n'est pas un bloc, comme une image ou un lien, nous lui confèrerons un affichage bloc pour pouvoir le positionner.

1 - Donner un Titre et Enregistrer la page

Avec l'Explorateur Windows nous créons, si possible à la racine de Mes documents, notre dossier de site, qui va contenir tous les fichiers et sous-dossiers devant être publiés et uniquement ceux-ci.
Tous les autres documents de travail seront stockés ailleurs.

Nommons ce dossier, par exemple, "Web Exercices Kompozer". Ce n'est que le contenu de ce dossier qui sera publié, nous pouvons donc le nommer comme bon nous semble.

En revanche tous les fichiers et dossiers à publier devront être écrits sans espaces, sans accents ni caractères spéciaux et si possible en minuscule.
Pour séparer les mots nous utiliserons non pas l'underscore mais le tiret haut, seul reconnu par les robots d'indexation.
Titre de la pageAu lancement de l'application nous nous trouvons devant une page vierge et sans nom.
La première chose que Kompozer nous demande quand nous faisons :
Fichier / Enregistrer-sous c'est de
donner un Titre à la page. Nous lui donnons comme titre "Mes exercices Kompozer".

Ensuite, dans la nouvelle fenêtre
Enregistrer la page sous nous devonsnom de fichier 

outil actualiser Après avoir cliqué sur le bouton Enregistrer, nous voyons apparaître ce fichier dans notre gestionnaire de sites. Au besoin cliquer sur l'outil Actualiser (flèche courbe jaune).

2 - Structure de base de la page

La stucture de base d'une page web se fait à l'aide de blocs structurants. Dans notre cas nous devons créer  4 blocs qui ont le terme générique de div, tous englobés dans body qui est aussi un bloc. Ensuite nous devrons identifier chacun des 4  blocs.

a - Ecrire les 4 noms

(qui deviendront des blocs) dans l'ordre, l'un sous l'autre en faisant Entrée pour aller à la ligne.

Note  Pour créer ces div, nous pourrions écrire tout autre chose sur la page, mais quand on débute c'est plus simple d'écrire le même mot que l'identifiant. Nous opterons pour les mots anglais, plus simples que leurs équivalents français (pas d'espaces, pas d'accents, pas de tirets), donc moins de source d'erreurs

b - Faire les div

Cliquer sur le premier nom et dans le premier menu déroulant Corps de texte choisir, tout en bas, Conteneur générique (div). 

bloc div matérialisé sur la page

c - Identifier chaque div     

Dans la barre des taches :

Répéter ces opérations pour faire les 3 autres div et les identifier.

Note : Pour sortir le pointeur d'une div ou de toute autre balise il suffit de la sélectionner dans la barre des tache et sur le clavier taper sur une flèche directionnelle, par exemple flèche à droite. Nous voyons le pointeur se placer et clignoter complètement à droite du bloc, du lien, de l'image... il suffit alors de faire un retour charriot en tapant sur la touche Entrée et notre pointeur se positionne au dessous de la div ou de la balise dont nous voulions sortir.

Attention : Si après avoir sélectionné une div nous essayons d'écrire dans la sélection pour remplacer un texte ou si nous faisons un Retour charriot, nous supprimons carrément cette div. Il faut donc faire attention d'avoir désélectionné la div et sélectionné uniquement le texte à remplacer.
Il est très important d'avoir toujours un oeil sur la barre des taches pour intuiter ce qui va se passer. Si nous nous rendons compte que ce n'est pas ce que nous voulions faire, il est possible de revenir en arrière avec la combinaison de touches Ctrl+Z ou bien  l'outil Annuler outil Annuler qui permet de remonter plusieurs fois.

3 - Stylage des blocs avec l'éditeur de css  Cascades

Les 5 blocs structurants vont se retrouver identiques sur toutes les pages, nous les stylerons sur la feuille de style qui par défaut est interne à la page mais que nous exporterons (pour la rendre externe) avant de générer une nouvelle page.

Nous avons, sur cette première page, 5 images 

Plaçons ces 5 images dans un dossier nommé images lui-même à la racine du dossier de site.

outil de mesure de la webdevPour reproduire cette page nous pouvons nous aider de la Web Developer Toolbar de Firefox.
Dans le menu Divers nous avons un outil de mesure qui nous donne pour le header 840 x190 pixels.
Notons ces dimensions sur un brouillon, en particulier la largeur 840px.

a - le bloc <body>

Nouvelle règle pour le bloc body

b - le bloc <header>

titres dans le header          annuler les marges des titres

c - le bloc <menu>

d - le bloc <content>

e - le bloc <footer>

f - les blocs titre de niveau 1 et titre de niveau 2 dans le header

Note : Surtout quand on est débutant ne pas hésiter à faire de temps en temps une sauvegarde de notre dossier de site dans une clé ou dans un dossier dédié aux sauvegardes afin de pouvoir revenir en arrière en cas de besoin.

4 - Rédaction du content

Haut de page