Programmation
les CSS
retour accueil
I - Premier programme CSS pas-à-pas :
Contrairement à la plupart des langages de programmation, comme C ou PHP, par exemple, les feuilles de style ou CSS ne nécessitent
l'installation - parfois assez ardue pour le débutant - d' aucun outil spécial, compilateur ou autre.
On utilise simplement le navigateur avec lequel vous circulez sur internet, et qui vous a donc conduit sur ce site.
Pour tout ordinateur équipé en Microsoft Windows, il s'agit du navigateur Internet explorer qui exécutera donc tous vos programmes CSS. Qu'ils soient récupérés sur internet, ou bien créés en local sur vote propre machine.
Pour écrire le code, on se servira tout simplement du Bloc-notes ( en anglais notepad) de Windows.
Il s'obtient, à partir du bureau, par :
démarrer ==> programmes ==> accessoires ==> Bloc-notes
Avant de pouvoir commencer il faut bien sûr créer un dossier pour recevoir vos programmes. Vous pouvez le nommer comme vous voulez, et le situer où vous voulez. Dans notre exemple, afin de faire au plus simple, nous allons nommer ce dossier
" programation CSS" et l'intaller directement dans "Mes Documents" soit à l'adresse C:\MesDocuments/programmation CSS.
Pour les débutants débutants cela signifie qu'il leur faut ouvrir leur explorateur Windows ( ou navigation en cours) sur C. Adresse indiquée : C:\Mes Documents, puis cliquer "Fichier" en haut à gauche, immédiatement dessous "Nouveau", et en laissant le curseur sur nouveau, apparaît à droite, "dossier" sur lequel on clique.
En bas à droite de la fenêtre, en dernier,apparaît un "nouveau dossier", taper dessus "programmation CSS", ou ce que vous voudrez. Puis taper "Entrée".
Votre dossier est créé.
Premier programme :
1 - Ouvrir le Bloc-notes de Windows pa r démarrer ==> programmes ==> Bloc-notes
2 - Créer les balise html sur le bloc note :
Tout programme html CSS, s'ouvre par l'indication pour le navigateur du langage de programmation CSS que l'on va employer. On commencera donc impérativement notre programme par la balise :
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html>
attention à ne laisser aucun espace entre les guillements et le !DOCTYPE ... comme il est fait ici pour que tout soit lisible.
Le guillemet d'ouverture " < " se trouve sur la 2ème touche du clavier en partant de la gauche de la deuxième ligne en partant du bas. Le guillemet de fermeture " > " s'obtient lui par la même touche mais en actionnant en même temps la touche majuscule.
A la fin du programme on indiquera au navigateur cette fin par une balise de fermeture qui s'obtient en plaçant un slashes : / barre oblique se trouvant juste au-dessus du 8 sur le pavé numérique du clavier. On finira donc par la balise :
< /html >
attention à ne laisser aucun espace vide entre les guillements le slashes / et les lettres html.
S'adressant aux débutants il leur est recommandé de faire tout simplement un clic droit sur cette page ==> "Afficher la source"
Puis de copier les trois premières ligne de ce code
et de coller ces trois lignes en tête de leur page de code.
Vous avez donc tapé sur votre Bloc-notes exactement le code suivant :
3 - Créer le cadre du programme :
Un programme html est exactement comme un homme :
Il a une tête - en anglais "head" qui repose sur un corps, en anglais "body".
Ces deux éléments se traduisent en langage html par les balises < head > & < body >
Une obligation en programmation étant de fermer toujours ce que l'on a ouvert pour indiquer au navigateur la fin du programme ou de la fonction, deux balises de fermetures correspondent donc aux deux balises < head > & < body > :
à la fin du code inséré en head on ferme par
< /head >
de même à la fin du body on fermera par :
< /body >
Le cadre de programme html est maintenant achevé - il sera toujours le même quel que soit le programme -.
Votre Bloc-notes présente donc exactement le code suivant :
4 - Enregistre ce fichier sous extension html :
En haut à gauche du Bloc-notes, un clic sur "Fichier", puis clic sur "Enregistrer sous".
Dans la fenêtre "enregistrer sous" qui apparaît, indiquer l'adresse du fichier "programmation CSS" que nous avons créé plus haut, et dans lequel nous allons enregistrer notre programme html.
Ainsi à "Dans" en utilisant la petite flèche à gauche nous choisissons "[C:]" dans le menu déroulant
Puis au-dessous double clic sur le dossier "programmation CSS" que nous avons créé. Apparaît donc un espace blanc, puique l'on y a encore rien enregistré.
Admettons que nous appellions notre programme tout simplement "programmeCss", ou tout autre nom qui vous plaira, cela n' aucune importance.
par contre il est obligatoire que le nom du fichier se termine exactement par l'extension .html
Vous devez donc porter à l'avant-dernière ligne en-bas de la fenêtre "enregister sous" à "Nom" :
programmeCss.html
( vous pouvez remplacer programmeCss par un autre mot, mais ne modifiez sutout pas ce qui est en rouge, en n'oubliant pas le point qui sépare programme de html, aucun espace n'étant autorisé entre les caractères de ce nom)
Enfin à la dernière ligne "Type", utiliser la petite flèche à droite de la case qui doit afficher par défaut "Document texte" pour remplacer "texte" par "Tous"
cette dernière modification est indispensable pour avoir un fichier html. Sinon vous n'aurez qu'un simple fichier texte, totalement inactif.
Cliquez maintenant sur "Enregistrer".
5 - Vérification de l' extension html du fichier:
On ferme tout et l'on se rend par le bureau, puis l'explorateur Windows en C, double clic sur le dossier programmation que nous y avons créé, nous devons y trouver notre fichier html , soit exactement :
programmeCss.html
Mais il peut arriver que Windows ait mal enregistré et que l'on se retrouve programmeCss.txt
Cela ne convient pas. Faire un seul clic sur ce fichier programme.txt, taper F2 en haut et remplacer .txt par .html.
Puis taper touche "Fin" , puis "Entrée". Windows vous adresse un avertissement général, mais qui ne concerne pas ce cas, donc confirmez votre modification, en cliquant oui. Cette fois vous devez avoir la bonne extension de fichier .htm soit
programmeCss.html
6 - Créer notre premier programme :
Faire un double clic sur progamme.html, apparaît un fenêtre vide puisque l'on a encore rien programmé.
Cliquer en haut "Affichage" et dans le menu qui se déroule "Source". Voici notre Bloc-notes
Nous allons d'abord porter un titre, en anglais "title", qui se situe dans l'espace "tête", cad entre les balises
< head > & < /head >
Soit: < html >
< head >
< title >
ici le titre que vous voulez
< /title >
< /head >
Puis entre les balises body nous allons insérer un texte, celui qui vous plaira et terminer notre programme ainsi :
< body >
tapez ici le texte qui vous plaira
< /body >
< /html >
Voici comment doit ce présenter ce code :
Pour finir surtout avant de fermer enregistrer le travail effectué sur le Bloc-note par un clic sur "Fichier" puis, menu déroulant, "Enregistrer" ( et non plus enregistrer sous ). Ceci fait, fermer le Bloc-notes par la petite croix en haut à droite.
La fenêtre vierge de programme.html est là. Taper touche F5. Vous devez voir s'afficher :" tapez ici le texte qui vous plaira."
Et tout en haut de l'écran dans la bande bleu s'afficher le titre " ici le titre que vous voulez"
Maintenant nous allons pouvoir utiliser les feuilles de style dont nous insérerons la définition entre les deux balises suivantes :
style type="text/css" placé entre guillemets < >
et
/style placé entre guillemets < >
Nous aurons donc :
Débutons donc notre premier code CSS:
C'est volontairement - cette formation s'adressant au niveau débutants - que nous éviterons d'alourdir et compliquer en acccompagnant les éléments pratiques que nous fournissons d'un complément théorique qui ne peut que rendre plus difficile l'approche des CSS par les vrais débutants. Nous débattrons donc sur une autre page en préparation de l'aspect théorie, notamment concernant l'avenir, c.a.d le CSS 3. Simplement, Messieurs les hauts techniciens, un peu de respect pour les débutants - que nous avons tous commencé par être - avant de ...
Ainsi nous n'entrerons pas dans les spécificités de chaque navigateur pour fournir des codes ayant par défaut une neutralisation permettant de s'adapter à tous.
Nous dirons simplement que selon les navigateurs, une marge extérieure - margin - et une marge intérieure -padding - sont appliquées et variables selon les navigateurs - internet explorer, mozilla etc .. - et que ceci se visualise en cliquant sur les fichiers suivants :
margin marge extérieure pointillée de 10 px par rapport à la fenêtre
margin marge extérieure pointillée de 40 px par rapport à la fenêtre
Mais que pour l'instant ce qui nous intéresse est de remettre tous les compteurs de tous les navigateurs à zéro ce qui se fait facilement par le code suivant :
body
{
margin:0;
padding:0;
}
Ce qui donne:
margin et padding de 0
Si à ce stade, vous ne comprenez pas pourquoi cette remise à zéro est fondamentale, ne vous encombrez pas l'esprit, retenez simplement d'avoir à la placer systématiquement en première position de votre code CSS.
Comme suit :
suite
retour accueil