Premiers pas en HTML / CSS

 Internet à la disposition de votre navigateur

Pour parcourir Internet, vous utilisez (peut-etre meme sans vous en rendre compte) un programme sur votre poste -ordinateur, tablette ou smartphone, ou autres IoT- qui est votre "navigateur" Web (encore appelé Browser) : il en existe..... voir Liste de navigateurs web, initialement développes sur ordinateurs Linux ou Windows, leurs portages se sont diffusés sur tous les postes.
Vous reconnaîtrez sans doute leurs icônes, car leur nom est inutile à l’usage [1], mais leurs ergonomies diffèrent...
 les deux plus courants, les universels Chrome de Google et Firefox par Mozilla, sans oublier les InternerExplorer et Edge de Microsoft, et Safari oublié sur Mac
 les challengers Opera (avec ses déclinaisons spécialisées Jeux et Smartphones),
ou Brave, Vivaldi, Midori....
 les navigateurs installés d’office sur les smartphones (mais vous pouvez en rajouter d’autres).
Tous ces navigateurs ne font (et ne sont) que des fichiers de types divers,
car sur ordinateur, "tout est fichier" !

 L’affichage d’une page Web

Quel qu’il soit, le navigateur Web n’a qu’une fonctionnalité principale :
_ accéder à une page Web identifiée par son URL pour l’afficher sur l’écran utilisé _
L’adresse URL utilisée correspond à recevoir un ’texte’, comme un fichier comportant aussi des éléments de présentation, et l’appels à d’autres fichiers (par leurs URLs : images, multimedias et autres) ; l’ensemble des fichiers reçus, correspondant à une ’page complète’, est disposé sur l’écran au fur et a mesure de la réception de chacun, en fonction de sa taille et de sa définition. Cela implique que le ’rendu’ puisse différer selon l’écran et le navigateur utilisés...
Votre navigateur recevant forcément tous les éléments affiches peut d’ailleurs vous afficher le’source HTML’du fichier qu’il traite (avec la combinaison de touches Ctrl U ; il peut même vous en faire une sauvegarde, enregistrer la page complète sur votre disque dur... et la relire pour la ré-afficher !
Dans l’ensemble de fichiers formant une page Web, vous aurez donc :
 une page .html principale (un headnon affiché et le bodyaffiché)
 les divers fichiers d’images intégrés : en .png , ,jpg ou ,jpeg , .gif .svg... (v
 des fichiers.css définissant des styles de présentation et d’affichage
 souvent des fichiers .JS (pour javascript : langage de programmation interprété) indiquant des comportements réactifs de page
 et d’autres possibles (multimedia, archives......) : Documents à ajouter (fichiers multimedia)

 Pour construire une page Web

Il n’est donc besoin d’aucun équipement logiciel particulier pour afficher et tester une page en HTML / CSS / JS [2].
Pour modifier ou créer une page, à commencer par son fichier .html principal, il suffit d’un simple éditeur de texte (ou bien vous pouvez utiliser un un editeur en ligne comme JS Fiddle) : ne pas prendre votre traitement de texte favori xxxOffice qui introduit des balises de présentation au sein de votre texte enregistré, il faut un programme plus ’simpliste’ et tous les ordinateurs en comportent [3].
Reportez-vous à Editeurs du WebMestre PC ou Editeurs pour WebMestre Linux !

 La création du premier fichier .html

Meme si vous n’avez pas encore installé votre SERVEUR Web de test : COMMENT ? en Local, vous pouvez donc commencer à tester,en vous plaçant dans un dossier que vous créerez pour l’occasion...
Juste un point d’attention : lorsque vous demandez d’un clic-droit (à Windows) Nouveau > Fichier (texte), il faut lui forcer une extension, c’est-à-dire rajouter le suffixe .html explicitement, pour formaliser l’association avec votre "navigateur par défaut" (vous verrez l’icone associée).
Ceci est aussi l’occasion de vous familiariser avec quelques extensions utiles en Extensions du Navigateur WEB.
Une dernière astuce : vous pouvez aussi rajouter une clé pour le menu contextuel, associer ce type de fichier, pour automatiquement l’ouvrir d’un clic-droit/ Modifier avec/dans l’éditeur que vous avez choisi (voir ci-dessous en PS).

 Et les squelettes de SPIP

Les squelettes de SPIP sont en pur HTML : ce sont des fichiers d’extension .html ,et tout ce que nous avons vu ci-dessus, s’y applique.
Notez néanmoins deux différences lorsque vous affichez un fichier squelette :
 les seuls ’textes’ affichés sont généralement des mots-clés en majuscules, précédés d’un # :
ce sont les Balise SPIP : elles seront remplacées par du texte réel sur votre site,
 l’apparence graphique n’est hélas pas respectée,car l’insertion des feuilles de styles CSS par SPIP n’est pas compatible avec le traitement de base HTML...