Tout le Monde Peut Être Webmaster
-
Cl.Massé & Pierre Equey
I. Introduction
1. Qu’est-ce qu’un site Web ?
2. Les outils nécessaires
PREMIERE PARTIE - Le HTML
II. Généralités
1. Introduction
2. Les signes diacritiques
3. Les balises
4. Les commentaires
5. Architecture d’un document HTML
III. Le Texte
1. Corps du texte
2. Titres
3. Indices et exposants
4. Styles
IV. Les Listes
1. Items
2. Listes à puce
3. Listes ordonnées
4. Listes descriptives
V. Les Liens
VI. Les Images
1. Images simples
2. Images cliquables
VII. Les Tableaux
VIII. Les Contenus Spéciaux
IX. Les Balises Meta et Link
X. L’Internationalisation
XI. Les Formulaires
1. Ligne de texte
2. Zone de saisie
3. Liste déroulante [listbox]
4. Boutons d’options
5. Case à cocher [Checkbox]
6. Bouton de commande
7. Bouton submit
8. Bouton reset
XII. Le sectionnement (prochainement)
DEUXIEME PARTIE - Les Feuilles de Style
XIII. Généralités
1. Historique - Définition
2. Incorporation
3. Structure des styles
4. Les balises <div> et <span>
XIV. Le Texte
XV. Les Listes
XVI. L’Habillage
1. Le fond
2. Les bords
3. Le pointeur de la souris
XVII. La Disposition
1. Le dimensionnement
2. L’alignement
3. Le positionnement
XVIII. Les Tableaux
1. Le dimensionnement
2. L’alignement
3. Les bords
XIX. Exemple
A. Les Couleurs
B. Les Dimensions
B. L’Héritage
TROISIEME PARTIE - Le Java Script
XX. Généralités
1. Introduction
2. Incorporation
XXI. Le Langage Java Script
1. Types de valeur
2. Structure d’un programme
3. Expressions
4. Objets natifs
5. Déclarations
6. Contrôle de flot
7. Interception des erreurs
XXII. Les Objets DOM
1. L’objet Element
2. L’objet Collection
3. L’objet Document
4. L’objet Body
5. L’objet Anchor
6. L’objet Image
7. L’objet Link
8. L’objet Form
Ce livre vous emmène en promenade dans l’univers bigarré du World Wide Web, encore appelé la toile
, souvent confondu avec Internet lui même, dont il n’est qu’une partie. Il vous apprendra à créer, mettre à jour, et publier votre propre site Web, bref, à devenir un acteur plutôt qu’un spectateur. Aucune compétence en informatique ou en publication n’est requise. En effet, nous commencerons par les principes de base qui permettront à chaque étape de créer une page ou un site plus ou moins élaboré, plus ou moins compliqué, mais toujours suffisant pour la plupart des applications. Vous pourrez le compléter au fil des chapitres. Mais d’abord...
Un site Web est un ensemble de pages accessibles du monde entier, pour peu qu’on dispose d’un ordinateur ou un terminal connecté à Internet. Les pages sont en général liées entre elles, hébergées au même endroit (un même gros ordinateur appelé serveur, connecté lui-même à Internet), et organisées autour d’un même sujet, lequel est bien souvent une personne (site personnel), une entreprise ou une organisation quelconque. Le concept est assez flou, et s’adapte donc un peu à tout. Les pages sont rédigées dans un format particulier, le HTML, qui est une vraie norme tout au moins pour sa plus grande partie, et sont même capable d’appeler des programmes dans un langage spécial, appelé langage de script.
(Note : nous ne citerons ici aucun logiciel commercial, pour une raison bien compréhensible. Ce serait d’ailleurs ne pas respecter l’usage sur Internet : la gratuité et l’entraide. Et c’est de toute façon inutile puisqu’il y a de très bons outils en logiciel libre, ou déjà livrés pas les constructeurs avec les ordinateurs. De même, nous ne parlerons pas des technologies propriétaires, et n’aborderons que celles qui sont devenues des standards publics et répandus.)
2.1. Il faut disposer d’un navigateur [browser], tous gratuits. Historiquement, les deux principaux furent Microsoft® Internet Explorer et Netscape® Navigator. Ce dernier n’existe plus, et le premier n’est plus le plus utilisé, mais d’autres sont apparus et se sont fait une bonne place.
| Navigateur | Description |
|---|---|
| Internet Explorer | Maintenant obsolète, remplacé par le suivant. | Microsoft Edge | Il est censé respecter les standards et être plus sûr. Téléchargeable sur le site de Microsoft :
https://www.microsoft.com/fr-fr/windows/microsoft-edge |
| Firefox | Un des plus populaires. Téléchargeable sur le site de Mozilla :
http://www.mozilla.com/ |
| Opéra | Maintenant sans publicité. Téléchargeable sur le site :
http://www.opera.com/ |
| Google Chrome | C’est le dernier venu, mais pas en nombre d’utilisateurs. Recommandé par les développeurs :
http://www.google.com/chrome/ |
Sans oublier bien sûr ceux qui tournent sous Linux ou sur Mac, à ne pas négliger puisque utilisés par des internautes avertis. Mais les différences ont presque disparu aujourd’hui. En cas de doute sur l’implémentation d’un mot-clé, le mieux est de consulter le site caniuse.com où toutes les versions de tous les navigateurs sont listées, pour ce qui est de HTML mais aussi toutes les autres technologies Web.
2.2. Il faut, ensuite, un éditeur de texte simple. Cependant, il est fastidieux de taper à chaque fois les mêmes mots clés, et le fichier obtenu est très difficile à lire. Il existe alors des logiciels spécialement étudiés pour éditer ce genre de texte, avec des entrées et indentations automatiques, une coloration de la syntaxe, et même la possibilité de visualiser le résultat immédiatement dans un navigateur. Les produits recommandés sont :
| Éditeur | Adresse Web |
|---|---|
| SynWrite | https://sourceforge.net/projects/synwrite/ |
| Arachnophilia | https://www.arachnoid.com/arachnophilia/ |
Il existe des éditeurs visuels (en anglais wysiwyg : what you see is what you get
). Ils ont néanmoins l’inconvénient de générer du code parasite
issu du concepteur et de limiter ainsi l’universalité du code obtenu. Peu de webmestres professionnels les utilisent, ils sont plutôt destinés aux users
, ce que vous ne serez plus après avoir lu ce livre.
Il est également possible d’utiliser un traitement de texte, du moment que le format d’enregistrement du fichier est texte brut
. Certains d’entre eux permettent également d’enregistrer un document, comprenant éventuellement des images et des tableaux, au format HTML, mais avec les mêmes inconvénients que les éditeurs visuels.
2.3. Un outil de dessin et de traitement d’image afin de pouvoir travailler images et photos est souvent nécessaire. Il existe un bon nombre de logiciels commerciaux, mais aussi des applications en ligne dont la plus connue est pixlr. Pour les graphiques vectoriels, c'est-à-dire sans pixels, ce qui permet de les changer d'échelle sans altération, il y a le logiciel libre inkScape, qui est très complet.
Dans tous les cas, il est nécessaire que le logiciel utilisé puisse générer des images aux formats JPG, GIF, PNG et/ou SVG. Chaque format est plus ou moins spécialisé. Ainsi JPG est plutôt destiné aux photos, PNG et GIF aux dessins avec de grandes plages d’une même couleur, GIF permet en plus de réaliser des images animées, et SVG est un format de graphique vectoriel permettant des animations.
Mais il y a aussi des programmes, libres ou commerciaux, qui réalisent toutes sortes de tâches graphiques : création de fonds d’écran, de boutons, de titres en relief, d’images animées… Nous sommes là dans le domaine artistique, et tous les moyens sont bons pour obtenir ce qu’on recherche.
Enfin il reste toujours la solution de trouver les images toutes faites sur Internet. Mais attention que la plupart des images sur les pages Web ne sont pas libres de droit. Il faut aller sur des sites qui en proposent des libres.
Il est important de faire attention aux images. Elles utilisent beaucoup de place sur les disques, et sont parfois très longues à télécharger ! Le fichier doit être le plus léger possible, sinon le visiteur ira voir un autre site. Or les tailles s’additionnent s'il y a plusieurs images sur la même page. Il y a un service de compression en ligne : imagecompressor. Sinon pour ces problèmes d'optimisation en général, PageSpeed Insight de Google analyse le site et donne des conseils.
2.4. Il est également nécessaire de posséder un programme FTP (client FTP) qui servira à transférer les fichiers vers et du serveur. Arachnophilia et SynWrite, cités plus haut, en disposent déjà d’un intégré. Sinon, FileZilla est un bon logiciel.
2.5. Pour des raisons de sécurité, il est souvent impossible de tester certaines fonctions en local, il faut passer par un serveur. Il y a plusieurs solutions à ça, des plus compliquées aux plus simples : soit envoyer les pages à chaque fois chez son hébergeur, soit installer un serveur sur son ordinateur. Il y a des serveurs complets comme Apache, mais qui sont très lourds. La solution à la fois la plus simple et la plus légère est d’opter pour Google Chrome et d’installer l’extension Web Serveur for Chrome. Une fois la page d’accueil ouverte via le serveur, on peut naviguer dans le site et le rafraîchir aisément dans le navigateur.
2.6. Mais l’outil le plus puissant, c’est les devtools,
ou outils de développement, déjà intégrés dans tous les navigateurs majeurs. Ils sont accessibles la plupart du temps avec la touche F12, sinon avec un autre racourci ou par le menu principal. Ils permettent de visualiser tous les paramètres d’une page et des autres fichiers associés, les cockies, la console Java Script, et bien plus…
Tout le Monde Peut Être Webmaster de Cl.Massé; & Pierre Equey est mis à disposition selon les termes de la licence Creative Commons Paternité-Pas d’Utilisation Commerciale-Partage des Conditions Initiales à l’Identique 3.0 Unported.