Intelligence info Les intelligences connectées à travers le monde
Avant de vous lancer dans ce travail il faut savoir qu’il est bien plus facile de réaliser vos pages avec un logiciel spécifique…. mais que vos pages seront jusqu’à 20 fois plus volumineuses ce qui dépassera largement le volume de stockage que vous offre la plupart des hébergements
Ce travail est réalisé afin de donner un petit coup de main à ceux qui désirent réaliser une « page-perso » mais qui ont, comme tout le monde, des difficultés surtout pour débuter.
J’ai utilisé dans ces pages, pour raison de simplification, une programmation à l’aide de feuilles de style pour l’ensemble des pages qui s’affichent à l’écran mais dans les pages d’explication du code, j’ai utilisé une programmation classique en html. Il ne faut donc pas chercher une ressemblance entre la page visible et la page d’explication de code.
L’utilisation des feuilles de style est expliqué plus loin dans cette étude Il est possible que certains mots ne soit pas exactement les mots qu’il fallait employer, ainsi selon les ouvrages que j’ai pu consulter, les petits mots placés entre les signes « <plus grand » et« >plus petit » sont soit des « tags » des « balises » des « marqueurs » à vous de choisir. Dans certaines pages, afin que vous puissiez lire le codage des tags, j’ai été obligé de coder l’écriture des balises.
Ce qui compte donc c’est uniquement ce que vous voyez à l’écran.
D’autre part j’ai évité tout ce qui bouge dans une page et qui n’est pas du langage HTML sauf une ou deux images animées ce que chacun peut faire facilement ou tout simplement trouver sur le net en utilisation libre
Avant de commencer il est important d’avoir une petite idée de ce que va être le site que vous allez réaliser prenez connaissance des conseils (et des seuls) que je donnerais à ce sujet.
Voulez-vous lire cette succession d’étapes :
Première phase :
Etablir un plan du site.
Ce plan, qui ressemble à l’arborescence des répertoires et sous répertoires sur un disque dur, vous permet de mettre en place la suite logique des pages et de réfléchir aux liens, c’est à dire les passages entre les pages avec les éventuels retour en arrière.
C’est à ce stade que vous devez penser à la création d’un répertoire où seront placées les images.
Deuxième phase :
Choisir le logiciel.
Il est possible de réaliser un site sans connaître un seul code du langage HTML, les logiciels proposés ici ou là fonctionnent très bien, le seul problème c’est qu’aucun n’est parfait et surtout les modifications et la mise au point des pages sont difficiles.
Si votre intention est de choisir un de ces logiciels, vous pouvez toujours suivre ce cours mais il est surtout réalisé à l’intention de ceux qui préfèrent réaliser les choses eux-mêmes.
Il est important de signaler qu’actuellement des logiciels comme « Word » ou « Writer » permettent la réalisation de page Web mais comme indiqué plus haut la modification est très difficile.
Il est courant de trouver des sites éxécutés avec ce genre de logiciel en générale ils n’occupent qu’une page ou deux.
Il faut également constater, que le volume occupé par les fichiers de ce type, est de 10 à 15 fois plus important qu’avec la méthode décrite ici ce qui rend l’hébergement impossible chez la plupat des fournisseurs d’accès.
Troisième phase :
Choisir le support.
Nous allons donc réaliser notre site sans employer de logiciel spécifique en utilisant simplement un traitement de texte mais le plus dépouillé possible.
Pour les utilisateurs de « Windows » le plus simple est de prendre « Wordpad » ou « Write » ou tout simplement « Blocnote » qui sont fourni dans le module de base.
Il est recommandé toutefois d’utiliser un traitement de texte ayant la fonction « Rechercher » / « Remplacer » qui facilite certaines opérations de finition.
Quatrième phase :
Ecrire les pages.
C’est dans les pages qui suivent que nous allons expliquer les différentes possibilités de l’HTML ou du moins ce qu’il est nécessaire de savoir afin que vos pages soient correctes.
Toutes les balises utilisées dans ces pages sont autorisées par le « WC3 » et compatibles avec le « XHTML ».
Une séquence consacrée aux feuilles de style compléte les pages html.
Cinquième phase :
Enregistrement de la page.
C’est une des phases importantes du travail, au moment de l’enregistrement de la page html, vous devez choisir l’option « texte seulement » et après avoir donné un nom au fichier vous devez ajouter l’extension « htm » comme par exemple : « mon_fichier.htm »
Attention pour éviter les problèmes ne jamais utiliser:
Les majuscules.
Les espaces.
Le systéme (Unix) utilisé par votre FAI fait en effet la différence entre majucules et minuscules ainsi une image dont le nom sera en majuscules ne sera pas reconnue si son nom est en minuscules dans la page HTML.
sixième phase :
Transfert des pages.
En principe cette action ne me concerne pas puisque vous pouvez très bien enregistrer votre réalisation sur un « CD » et le donner à vos amis.
Toutefois voici quelques règles pour l’installation du site
Choisir un hébergement vous devez trouver un endroit pour stocker vos pages afin quelles soient visibles sur le Net, vous pouvez demander à votre « F.A.I. » qui, en principe, offre quelques Mo a ses adhérents, c’est le cas de ce site qui est hébergé chez « Orange ».
D’autres entreprises peuvent vous offrir (pour quelques euros) l’hébergement, un nom de domaine, et une centaine d’adresses de messagerie c’est le cas de mon hébergeur pour un autre sitewww.strato-hebergement.fr
Transférer les fichiers vous devez avoir un logiciel pour cela. Il en existe de nombreux qui sont facilement téléchargeable et que vous pouvez utiliser « à l’essai » pendant un mois.
Vous pouvez acheter pour quelques Euros (bien mérités) celui qui vous convient. Pour ma part j’utilise « Filezilla » de la fondation « Firefox »qui est gratuit
Voici ce que vous devez écrire sur votre 1ère page, avec un simple traitement de texte genre « Wordpad » ou simplement « bloc-notes » de Windows
<html> <head> <title> Ecrivez ici le titre de la page </title> </head> <body> Vous pouvez &eacute;crire ici la 1&egrave;re phrase qui vous passe par la t&ecirc;te. <script type="text/javascript"> //<![CDATA[ if (typeof _gstat != "undefined") _gstat.audience('','pagesperso-orange.fr'); //]]> </script> </body> </html>
Remarquer les accents codés
Ensuite.
Enregistrer le fichier, attention en « texte seulement »et avec l’extension « .htm »
Si vous utilisez « Windows » Basculer dans le gestionnaire de fichiers et faites 2 clics sur le nom du fichier, le navigateur que vous utilisez doit s’ouvrir sur une page qui bien sûr sera vide sauf la petite phrase écrite plus haut.
Pour ceux qui n’utilisent pas « Windows » « lancer » le fichier comme vous faites d’habitude (;-)).
Si ça marche vous êtes sur la bonne voie, le plus dur est fait.
Régles de programmation
Le langage HTML permet de faire des pages Web avec un grand laxisme dans l’élaboration du script. Le W3c, organisme qui régule les publications, a mis en place une sorte de code de « bonne conduite » que toute personne, voulant publier ses pages, devrait appliquer. Pour l’instant ce ne sont que des recommandations mais, peut-être un jour, les browsers ne permetteront de visualiser les pages que si elles répondent aux règles du W3c.
Tout les codes publiés sur ces pages répondent aux normes du « XHTML ».
Voici qu’elles sont ces régles (Liste non exhaustive)
Pour les rubriques marquées d’un » * « prévoir un espace avant le » / «
| Rubrique |
Interdit |
Autorisé |
|---|---|---|
|
Balise début et fin |
<HTML> |
<html>….</html> |
|
Bordure |
border (pas de valeur) |
border= »0″ |
|
Texte de balise |
bgcolor=cyan |
bgcolor= »cyan » |
|
Saut de ligne |
<br/> |
<br /> * |
|
Lien même page |
<a name= »mon_lien »> |
<a name= »mon_lien »></a> |
|
Lien même page |
<a name= »mon_lien »> |
<a name= »mon_lien » /> * |
|
Appel image |
<img src= »image.gif »> |
<img src= »image »></img> |
|
Appel image |
<img src= »image.gif »> |
<img src= »image » / > * |
|
Nom d’image |
<img src= »image.gif »> |
<img src= »image.gif » alt= »image » title= »image » / > * |
|
Antériorité |
<u><i>….</u></i> |
<u><i>….</i></u> |
Fond d’écran
Le fond d’écran est défini par l’un ou l’autre des codes suivants:
Le nom de la couleur………………………………………… »cyan »
Le code de la couleur………………………………………… »#ff00ff »
Une image de fond……………………………………………. »image_fond.jpg »
Une autre image de fond…………………………………… »fond051.gif »
Le fond peut être mobile avec le texte…………………. »fond051.gif »
Le fond peut être fixe avec texte déroulant.*………….bgproperties= »fixed »
* La dernière option fonctionne avec IE, Chrome, mais ne fonctionne pas avec Firefox
Les couleurs
les couleurs peuvent être données soit par leurs noms, « cyan », « yellow » etc, soit par un codage hexadécimal (0 à f).
Basée sur la combinaison des trois couleurs « Rouge », « Vert », « Bleu » (RVB) sur une palette de 256 possibilités numérautées de 0 à 255.
Cela donne une utilisation possible de 16 777 216 couleurs(256*256*256)
Exemple de codage
Le code color= »#00ACFF » se décompose ainsi :
– les deux premiers signes (00) correspondent à la palette des « Rouge » (0)
– les signes (AC) correspondent à la palette des « Vert », (172)
– les signes (FF) correspondent à la palette des « bleu » (255).
Vous pouvez facilement trouver ces palettes de couleurs dans certains logiciels de dessin tel que « Photoshop » ainsi que dans « Word » dans la commande « Personnaliser » lors de l’utilisation des couleurs et également dans « OpenOffice » par exemple.
La particularité de cette centaine de couleurs est de pouvoir être utilisé avec le nom de la couleur.
|
Black = »#000000″ |
|
Aqua ou Cyan = »#00FFFF » |
La taille des Titres
La taille et le niveau des titres et sous-titres peuvent être donnés en respectant une hiérarchie, du plus grand au plus petit, de la même façon que dans un livre ou un rapport.
Le Titre taille « H1 » correspond au titre principal.
Le Titre taille « H2 » aux titre des chapitres et paragraphes etc.
Titre taille h1
Titre taille h2
Titre taille h3
Titre taille h4
Titre taille h5
Titre taille h6
A suivre