Bonjour à tous,
afin de partir sur une même base pour tous, nous allons partir du principe que l'on n'y connait rien, ainsi nous verrons tout plus en moins en détail dans ces cours ! Si vous avez d'éventuelles questions, n'hésitez pas à les poster à la suite du cours - en vous assurant qu'elles sont en rapport avec ce même cours -.
Bref, ne tardons pas et commençons sans plus attendre ! Réalisons notre première page web en xHTML !
I. Une affaire de balises
Afin de pouvoir mieux comprendre le code d'une page xHTML, je vais vous présenter son fonctionnement.
Voici un début de script d'une page
- mapage.html a écrit:
- [...]
.....<title>Ma page xHTML</title>
.....<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
.....<link rel="stylesheet" media="screen" type="text/css" href="styles.css" />
</head>
<body>
.....<div id="world">
..........<h1>Mon premier site</h1>
[...]
Comme ça, vous pouvez voir à quoi ressemble du code xHTML si vous n'en avez encore jamais vu. La colorisation est celle utilisé avec Notepad++, c'est ainsi que seront colorés tous les codes que je vous montrerai.
Bien, désormais analysons un peu ce code, vous remarquez ces machins bleus tous bizarres là ? Ce sont les balises, elles servent, pour la majorité, à donner des informations à votre navigateur pour retranscrire le tout et afficher votre page. Les balises sont des éléments entourés de crochets (<balise>) qui sont divisés en deux types : les balises simples et les balises doubles.
- Balises simples
Les balises simples sont de la forme <balise />. Elles sont utilisées pour afficher une image ou lier une feuille de style par exemple.
- Balises doubles
Les balises doubles sont de la forme <balise></balise>, la première s'appellant la balise d'ouverture et la seconde... de fermeture (logique).
Maintenant que nous savons ce que sont les balises, voyons ce que sont les trucs rouge et violet dedans ! Et bien ce sont les attributs, ce qui permet de personnaliser une balise en fait. Prenons pour exemple le
<div id=
"world"></div>, on indique ici à ce calque (div) une id du nom de
world. Nous verrons plus tard à quoi cela peut servir, avec le CSS.
II. Une page xHTML
Maintenant que nous avons vu un peu le fonctionnement des balises, il serait peut être temps de rentrer dans le vif du sujet.
Le code d'une page se regroupe en plusieurs parties, l'en-tête et le corps... m'enfin, je ne fais que parler sans montrer concrètement alors je vais vous montrer le strict minimum d'une page xHTML.
- mapage.html a écrit:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
.....<title>Ma page xHTML</title>
.....<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
.....Corps de ma page ici
</body>
</html>
[...]
Maintenant, regardont cela de plus près.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">Le !DOCTYPE est a placer en haut de votre page, avant même la balise <html>, c'est ce qui indique, entre autre et surtout, dans quel langage est programmé votre page (ici xHTML 1.0 Strict).
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">la balise <html> indique le début de votre page web (et la fin par son tag de fermeture (</html>). Les attributs apparaissant sur ce tag servent à donner une adresse traitant du xHTML, et l'autre à définir la langue dans laquelle vous écrivez votre page (si vous ne la faites pas en français, modifiez simplement le petit "fr" par "en" par exemple si vous désirez écrire une page en anglais).
Vient ensuite l'un des grands éléments d'une page web : l'entête, ou
<head></head>.
C'est entre ces deux balises que l'on trouvera de nombreuses balises telles que les liens vers les feuilles de styles CSS, d'éventuels fichiers javascript, c'est également là que l'on indiquera le titre de la page gràce aux balises
<title></title>. Le titre de la page est en fait ce qui apparait en haut de la fenêtre (par exemple :
iGraph | on the wagon again lorsque vous êtes sur l'accueil du forum ^^).
Bon, ca va pour le title, mais c'est quoi la balise "meta" alors ? Et bien, il en existe de nombreuses, qui ont chacune leurs fonctions. Celle que je vous donne là est quasi indispensable car elle permet à votre navigateur de comprendre et lire les caractères spéciaux français (tel que les accents, etc. éèàùç...)
Suivant l'entête se trouve enfin le corps de votre page, soit les balises
<body></body>. C'est entre ces deux balises que se trouvera l'intégralité de votre page affichée par le navigateur, tous les textes, images, liens, etc.
Voilou, maintenant, écrivons un simple texte entre ces balises body, histoire de tester un peu. Maintenant, pour enregistrer, il suffit de sauvegarder votre fichier avec l'extension
.html (avec le bloc note, il faudra séléctionner "tous types de fichiers". Maintenant, on lance la page avec le navigateur et notre texte s'affiche =).
Petite astuceAfin de mieux vous y retrouver dans votre code, vous pouvez ajouter des petits commentaires. Ces commentaires ne s'affichent pas sur votre page, uniquement sur le code, ainsi très pratiques pour s'y retrouver sur une page que l'on avait pas touchée depuis quelque temps et dont la programmation en détail nous avait un peu échappée.
Pour inscrire un commentaire, il suffit de l'entourer des tags <!-- et --> comme suit
- Citation :
- <!-- Ceci est un commentaire -->
Accueil 
Dernières images 
