Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

Cours XHTML Chapitre 01 : Ma première page Web COURS XHTML Chapitre 01 : Ma Pre

Cours XHTML Chapitre 01 : Ma première page Web COURS XHTML Chapitre 01 : Ma Première Page Web Petitcolas Jonathan Tous droits réservés Cours XHTML Chapitre 01 : Ma première page Web Disclaimer Tous ces cours sont rédigés par un étudiant en informatique. Il est donc tout à fait possible que des erreurs se soient glissées à l'intérieur de ceux-ci. Cependant, je fais tout mon possible pour les éviter. Si vous en apercevez une, n'hésitez pas à me la signaler, que je la corrige au plus vite. Pour me contacter : jonathanpetitcolas@yahoo.fr. Remarquez que vous pouvez aussi m'envoyer un petit mot d'encouragement ! Cela fait toujours plaisir ! Cette série de cours est disponible gratuitement sur Internet. Vous trouverez la liste complète de tous les tutoriaux écrits à ce jour sur mon site personnel : www.programmix.c.la . Si vous désirez diffuser vous aussi mes créations, allez dans la rubrique « Diffusion » de ce même site pour prendre connaissance des quelques conditions à respecter. Petitcolas Jonathan Tous droits réservés Cours XHTML Chapitre 01 : Ma première page Web Introduction • Introduction : Suite au chapitre précédent, vous devriez avoir une idée un peu plus précise de votre site et de son contenu. Maintenant, il va falloir passer à la phase suivante, qui est sûrement l'une des plus longues : la réalisation de vos pages... Dans ce chapitre, nous nous contenterons de créer une simple page au graphisme très dépouillé. Pour cela, nous apprendrons comment créer un fichier XHTML grâce à NotePad ++ (voir chapitre précédent), bien que la méthode soit la même avec le bloc-notes fourni par défaut avec Windows. Puis, nous étudierons la structure minimale d'une page Web avant de la tester dans un navigateur quelconque. • Objectifs : - Savoir enregistrer un fichier au format XHTML - Utilisation de commentaires * Balise  - Connaître la syntaxe minimale d'une page WEB * Balise <! > * Balise <html> * Balise <head> * Balise <body> * Balise <title> Petitcolas Jonathan Tous droits réservés Cours XHTML Chapitre 01 : Ma première page Web Le format *.html (Une petite manipulation obligatoire) • But de la conversion : Lors de la création de vos pages, vous écrivez dans un fichier texte (extension *.txt). Or, pour qu'un navigateur puisse interpréter vos lignes de code, il faut lui indiquer qu'il s'agit de code XHTML. C'est le but de l'extension *.html. Il existe aussi le format *.htm. Quelle différence ? Le l final... A part ça, sachez qu'il n'y en a aucune. Donc, libre à vous d'enregistrer vos pages en *.html ou en *.htm. Mais, alors, pourquoi deux formats pour une seule et même chose ? La raison vient du passé, et de l'ancien Windows 3.1 ! En effet, jadis, Windows n'acceptait que les extensions de trois caractères. Maintenant, peu importe. Par contre, la raison de l'apparition de ce l reste assez obscure... Une fois votre fichier enregistré au bon format (la marche à suivre arrive dans quelques lignes), vous pourrez alors l'ouvrir avec votre navigateur. Pour cela, il vous suffira de double-cliquer sur votre fichier, et magie ! Votre page apparaîtra sous vos yeux ébahis ! Notez qu'il vous sera toujours possible de rouvrir votre page avec le bloc-notes pour modifier deux ou trois petites choses. Pour cela, il vous suffira de faire un clic-droit sur le fichier, et de choisir Ouvrir avec le bloc-notes... ou Ouvrir avec... > Bloc-Notes dans le menu déroulant qui s'affiche. A présent, voyons comment enregistrer en XHTML... Petitcolas Jonathan Tous droits réservés Cours XHTML Chapitre 01 : Ma première page Web • Convertir un *.txt en *.html : La fenêtre d'enregistrement... Cela n'est pas très difficile, que vous utilisiez NotePad ++ ou le bloc-notes. Dans les deux cas, il vous suffit de créer un nouveau fichier (ou d'en ouvrir un déjà existant), et d'aller dans le menu Fichier > Enregistrer Sous... Une fenêtre devrait s'ouvrir. Choisissez alors un emplacement sur votre disque dur dans lequel toutes vos pages seront enregistrées. Je vous conseille de créer un dossier spécialement prévu à cet effet. Dans l'exemple ci-dessus, il s'agit du dossier "Mon site Web". Donnez un nom à votre fichier. Peu importe celui-ci. Dans l'exemple ci-dessus, je l'ai baptisé index. C'est un nom obligatoire à donner impérativement à l'une de vos pages. En effet, par convention, c'est cette page que les navigateurs recherchent en premier, lorsqu'ils se connectent à un serveur. Mais, nous reverrons cela plus tard... Maintenant, passons à la conversion *.txt / *.html. A la fin de la case Nom, écrivez *.html, sans l'étoile, qui remplace le nom de votre fichier (voir ci-dessus). Cela aura pour effet d'enregistrer votre page au format qui nous intéresse. Il existe aussi la case Type, mais elle n'est pas obligatoire, pourvu que vous n'oubliez pas d'ajouter l'extension comme décrit ici. Petitcolas Jonathan Tous droits réservés Cours XHTML Chapitre 01 : Ma première page Web Les Balises (Découverte de l'élément de base du langage) Le XHTML est, tout comme son aîné le HTML, un langage de balises. Comprendre ce qu'est une balise ainsi que sa syntaxe est nécessaire pour la suite de ce cours. Donc, essayez de retenir les idées générales, ainsi que le vocabulaire (ce sera le même que celui utilisé dans la suite de ces tutoriaux). Une balise, dans ce contexte bien évidemment, est un mot-clé entouré de chevrons < et > . Ce n'est pas bien compliqué, n'est-ce pas ? Prenons comme exemple une des balises que vous utiliserez de nombreuses fois, la balise HTML. En voici une (ou une demie... ça dépend comment on voit les choses...) : <html> Remarquez que j'utiliserais les mêmes couleurs que celles par défaut de NotePad++, et que le code sera toujours écrit comme ci-dessus. Enfin, contrairement au HTML qui ne vérifiait pas la casse, le XHTML nécessite que toutes vos balises soit écrites en minuscules. Pas très joli, n'est-ce pas ? Ne vous inquiétez pas ! Vos visiteurs ne verront pas les balises apparaître. Sauf si vous avez commis des erreurs dans votre source... Les balises fonctionnent toujours par paires. Une balise ouvrante et une balise fermante. Je ne suis pas sûr que ces termes soient normalisés, mais ce sont que j'utiliserai, et ils résument plutôt bien leurs rôles. La balise ci-dessus est une balise ouvrante, tandis que la suivante est une fermante : </html> La différence ? Le slash / avant le mot-clef. Les deux balises transformeront tout ce qu'il y a entre elles. Vous comprendrez un peu mieux à la fin de ce chapitre, car cela doit être assez abstrait pour l'instant, non ? Sachez que toute balise ouverte doit être fermée ! Une bonne habitude consiste donc à refermer la balise tout de suite après l'avoir ouverte. Ainsi, pas d'oubli ! Et, grâce à la magie des traitements de texte, vous pourrez écrire entre elles ensuite ! Certaines balises prennent ce que l'on appelle des arguments ou attributs. Ceux-ci sont en fait des paramètres supplémentaires qui permettent un peu plus de variétés dans le choix des couleurs, la position sur la page, etc... Ils se placent toujours avant le chevron fermant de la balise ouvrante... Un exemple : <body bgcolor="#000000"> Petitcolas Jonathan Tous droits réservés Cours XHTML Chapitre 01 : Ma première page Web Ici, il s'agit de la balise indiquant le début du corps de votre page. Remarquez l'attribut bgcolor. Il est écrit à la suite, avant le chevron fermant. Quant au signe égal et à la valeur derrière, nous n'y toucherons pas dans ce chapitre. Sachez simplement que cette balise met un fond noir sur votre page. Les noms d'attributs aussi doivent être écrits en minuscules. Mais, pour les valeurs de ceux- ci, vous pouvez mettre ce que vous voulez : majuscules ou minuscules ! N'oubliez quand même pas de les écrire entre guillemets, et ceux, même pour les valeurs numériques. Une dernière remarque concernant les attributs : ils ne se mettent que dans la balise ouvrante. Pour la balise fermante, il vous suffit juste de récrire le mot-clé, et rien de plus. Exemple d'un couple de balises : <body bgcolor="#000000"> </body> J'ai dit plus haut que les balises fonctionnaient toujours par paires... Et, comme toute règle, celle-ci a ses exceptions... Il en existe en effet certaines qui préfèrent la solitude... On les reconnaît au / juste avant le chevron fermant. Un exemple avec la balise suivante, qui permet un retour à la ligne : <br/> Beaucoup d'informations, n'est-il pas ? Essayez de retenir l'essentiel : une balise, lorsqu'elle est double, est en deux parties : une ouverture et une fermeture. Tout s'écrit en minuscules, sauf éventuellement les valeurs des arguments, à mettre impérativement entre guillemets. Ces quelques généralités très théoriques sur les balises nous permettent d'aborder tranquillement mais sûrement la création d'une page Web. Mais avant, un petit détour par les commentaires (le dernier, promis !)... Petitcolas Jonathan Tous droits réservés Cours XHTML Chapitre 01 : Ma première page Web Commentaires Les commentaires sont des morceaux de codes qui ne seront pas interprétés par le navigateur. uploads/S4/ chapitre-01.pdf