Vous êtes ici : Accueil > Atelier Webmaster > Cours XHTML/CSS > Liste des articles

Atelier Webmaster - Cours XHTML/CSS

Mettons du texte en forme (1ère partie)

[intro]Vous avez eu un aperçu des capacités des CSS dans le chapitre précédent. J'espère que cela vous a donné envi d'en savoir plus ! En tout cas, à partir de maintenant, on va s'attaquer à l'apprentissage des différentes propriétés du CSS, en commençant par celles permettant de mettre en forme du texte. Alignement, graisse, italique : à l'assaut :d


Un des bons points pour l'apprentissage des propriétés CSS, c'est que l'on peut facilement les classer par famille. Par exemple, pour les propriétés de mises en forme du texte, on peut distinguer celles qui ont le préfixe text-, de celles qui ont le préfixe font-, ou de celles qui n'ont aucun préfixe en particulier. (éh, ce serait trop facile sinon ^^) Je vais donc me servir de ce classement naturel pour vous expliquer les différentes propriétés de mises en forme.
Encore une chose, les propriétés que j'explique au début de chaque partie sont en générales plus utiles et intéressantes que celles détaillées en fin de partie.[/intro][fin]C'en est finit de la première partie de l'apprentissage de mise en forme du texte ! Dans le prochain chapitre nous verrons quelques autres propriétés importantes de mise en forme, notamment la coloration du texte, et l'alignement horizontal. Mais ce sera beaucoup plus léger que ce chapitre, il faut vous ménager un peu ;)


[/fin]

Conférence XHTML/CSS

[intro]Durant ma scolarité à l'ENSIIE, j'ai eu l'occasion de faire une conférence sur l'XHTML/CSS afin d'expliquer aux 1A (les élèves de première année) de mon école comment réaliser un jolie site Web comme il faut :) L'idée était de réaliser le design d'un blog en un peu plus de 1h30.
Donc, si vous souhaitez savoir ce qu'il est possible de réaliser en 1h30 avec quelques connaissances dans les langages du Web, c'est l'occasion. D'autant plus que la structure XHTML et le design CSS, sans être parfaits, forment une bonne base de presque tout ce qu'il est indispensable de savoir dans ces 2 langages. Et comme je ne pouvais pas m'en empêcher, j'ai préparé le terrain pour un apprentissage futur du HTML5 et j'ai donnée quelques tuyaux CSS3 (peut-être même un peu plus ^^).

Image


Si vous avez des remarques, ou des questions, n'hésitez pas :D[/intro][fin] [/fin]

A l'abordage des CSS

[intro]

Voilà déjà deux chapitres que nous ne faisons que parler du XHTML. Vous connaissez désormais la structure d'une page Web, la structure des balises XHTML et la signification d'une grande partie de ces balises. En théorie, en me lisant, vous devriez vous dire :
Bon, en gros t'es en train de me dire que je connais l'XHTML et que je n'ai plus grand chose à apprendre... pourtant, si je regarde les pages que j'arrive à créer, ce n'est franchement pas brillant !
Hé oui, par exemple, vous pouvez créer un site sur les plantes carnivores très facilement en utilisant une structure du genre :

Code :
<!DOCTYPE html PUBLIC "-//W3 //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>Titre du site</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
</head>
<body>
<h1 id="haut">Titre du site</h1>
<p>Slogan du site</p>

<h2>Menu</h2>
<a href="" title="">Lien n°1</a> |
<a href="" title="">Lien n°2</a> |
<a href="" title="">Lien n°2</a>

<h2>Titre n°1</h2>
<p>Paragraphe n°1</p>

<h2>Titre n°2</h2>
<p>Paragraphe n°2</p>

<p>Copyright - <a href="#haut" title="Retourner en haut de la page">Retour en haut</a></p>
</body>
</html>

Il ne vous reste plus qu'à remplir le site avec le contenu que vous voulez :

Code :
<!DOCTYPE html PUBLIC "-//W3 //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>Les plantes caaarnivores</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
</head>
<body>
<h1 id="haut">Les plantes caaarnivores</h1>
<p>Parce que la nature aussi est cruelle</p>

<h2>Menu</h2>
<a href="accueil.html" title="Accueil de Caaarnivores">Accueil</a> |
<a href="lexique.html" title="Lexique sur les plantes carnivores">Lexique</a> |
<a href="livreOr.html" title="Livre d'or pour laisser vos impressions">Livre d'or</a>

<h2>Mais pourquoi caaarnivores ?</h2>
<p>Non pas à nous, Éternel, non pas à nous, mais à ton nom donne gloire, a cause de ta bonté, à cause de ta fidélité ! Pourquoi les nations diraient-elles : où donc est leur Dieu ? Notre Dieu est au ciel, il fait tout ce qu'il veut. Leurs idoles sont de l'argent et de l'or, elles sont l'ouvrage de la main des hommes. Elles ont une bouche et ne parlent point, elles ont des yeux et ne voient point, elles ont des oreilles et n'entendent point, elles ont un nez et ne sentent point, elles ont des mains et ne touchent point, des pieds et ne marchent point, elles ne produisent aucun son dans leur gosier. Ils leur ressemblent, ceux qui les fabriquent, tous ceux qui se confient en elles. Israël, confie-toi en l'Éternel ! Il est leur secours et leur bouclier. Maison d'Aaron, confie-toi en l'Éternel ! Il est leur secours et leur bouclier. Vous qui craignez l'Éternel, confiez-vous en l'Éternel ! Il est leur secours et leur bouclier. L'Éternel se souvient de nous : il bénira, il bénira la maison d'Israël, il bénira la maison d'Aaron, il bénira ceux qui craignent l'Éternel, les petits et les grands ; l'Éternel vous multipliera ses faveurs, a vous et à vos enfants. Soyez bénis par l'Éternel, qui a fait les cieux et la terre ! Les cieux sont les cieux de l'Éternel, mais il a donné la terre aux fils de l'homme. Ce ne sont pas les morts qui célèbrent l'Éternel, ce n'est aucun de ceux qui descendent dans le lieu du silence ; mais nous, nous bénirons l'Éternel, dès maintenant et à jamais. Louez l'Éternel !</p>

<h2>Je peux participer ?</h2>
<p>Louez l'Éternel, car il est bon, car sa miséricorde dure à toujours ! Louez le Dieu des Dieux, car sa miséricorde dure à toujours ! Louez le Seigneur des seigneurs, car sa miséricorde dure à toujours ! Celui qui seul fait de grands prodiges, car sa miséricorde dure à toujours ! Celui qui a fait les cieux avec intelligence, car sa miséricorde dure à toujours ! Celui qui a étendu la terre sur les eaux, car sa miséricorde dure à toujours ! Celui qui a fait les grands luminaires, car sa miséricorde dure à toujours ! Le soleil pour présider au jour, car sa miséricorde dure à toujours ! La lune et les étoiles pour présider à la nuit, car sa miséricorde dure à toujours ! Celui qui frappa les Égyptiens dans leurs premiers-nés, car sa miséricorde dure à toujours ! Et fit sortir Israël du milieu d'eux, car sa miséricorde dure à toujours ! A main forte et à bras étendu, car sa miséricorde dure à toujours ! Celui qui coupa en deux la mer Rouge, car sa miséricorde dure à toujours ! Qui fit passer Israël au milieu d'elle, car sa miséricorde dure à toujours ! Et précipita Pharaon et son armée dans la mer Rouge, car sa miséricorde dure à toujours ! Celui qui conduisit son peuple dans le désert, car sa miséricorde dure à toujours ! Celui qui frappa de grands rois, car sa miséricorde dure à toujours ! Qui tua des rois puissants, car sa miséricorde dure à toujours ! Sihon, roi des Amoréens, car sa miséricorde dure à toujours ! Et Og, roi de Basan, car sa miséricorde dure à toujours ! Et donna leur pays en héritage, car sa miséricorde dure à toujours ! En héritage à Israël, son serviteur, car sa miséricorde dure à toujours ! Celui qui se souvint de nous quand nous étions humiliés, car sa miséricorde dure à toujours ! Et nous délivra de nos oppresseurs, car sa miséricorde dure à toujours ! Celui qui donne la nourriture à toute chair, car sa miséricorde dure à toujours ! Louez le Dieu des cieux, car sa miséricorde dure à toujours !</p>

<p>Copyright Caaarnivore - <a href="#haut" title="Retourner en haut de la page">Retour en haut</a></p>
</body>
</html>

Mais c'est tout. Pourtant, tout est là... mais vous voudriez aussi pouvoir ordonner le texte, l'aligner à tel endroit, ajouter de la couleur ou des images de fond, que sais-je encore... Ce qui vous manque c'est la mise en page, le design. Ce qui vous manque, c'est le CSS :D

[media]document/atelier/css.mp3[/media]
Une petite ode aux CSS pour se mettre dans l'ambiance.
Par di13774n73
[/intro][fin]Et voilà, vous venez enfin de découvrir ce qu'était le CSS. Bientôt vous n'allez plus pouvoir vous en passer :) A partir de maintenant tout va aller très vite, on va faire plusieurs chapitres en ne s'intéressant qu'au CSS et seulement après je vous apprendrai de nouvelles choses en XHTML !

Quand je dit : tout va aller très vite, je ne parlais pas de l'écriture des prochains chapitres hein ^^ ça, ça reste comme avant :p


[/fin]

La sémantique du XHTML

[intro]Dans le Petit Larousse Illustré on peut lire à sémantique : Sémantique : n.f. (du grec semantikos qui signifie) Relatif au sens, à la signification des unités linguistiques. Et, aussi incroyable que cela puisse paraître nous allons parler de sémantique dans ce cours :p

En effet, vous allez vous rendre compte très vite, que pour des contextes différents, on pourrait se servir de la même balise. Dis autrement pour un même contexte on pourrait se servir de différentes balises :D
Prenons un exemple. Si je veux mettre un titre au bloc menu de mon site je pourrai utiliser la balise que l'on a vu au chapitre 2 : &lt;p&gt;&lt;/p&gt; puisque mon titre est du texte. Mais nous pourrions aussi utiliser la balise &lt;h1&gt; &lt;/h1&gt; ou encore la balise &lt;div&gt;&lt;/div&gt;.
Nous verrons la signification de ces deux balises plus loin.
Le rendu visuel sera similaire (ou presque... La balise &lt;h1&gt;&lt;/h1&gt; par exemple utilise une taille de police plus grande et une graisse plus épaisse.) de toute façon nous verrons plus loin que, grâce au CSS, nous pourrons le rendre identique.
Alors, me direz-vous : comment choisir entre les différentes balises possibles ? Et, pourquoi utiliser l'une plutôt qu'une autre ?

Il faut savoir que chaque balise a un sens. Une sémantique. Ainsi la balise &lt;p&gt;&lt;/p&gt; est utilisé pour des paragraphes de textes. La balise &lt;h1&gt;&lt;/h1&gt; signifie que ce qu'elle entoure est un titre. La balise &lt;div&gt;&lt;/div&gt; est une balise dites générique (il n'en existe que 2 de cette sorte) puisqu'elle n'a aucun sens sémantique, on l'utilisera donc pour tout ce qui ne doit pas avoir de sens particulier.
Dans toute la suite du chapitre, nous allons étudier la plupart des balises pour comprendre leur sens et leur utilisation. (vous saurez donc faire pas mal de choses en XHTML tout bientôt :)) Mais avant cela, j'insiste : il est très important de respecter la sémantique de chaque balise, de plus c'est à votre bénéfice !
  • En premier lieu, cela permet à vos pages Web d'être plus accessible pour vos visiteurs. Les personnes mal-voyantes ou qui ont des problèmes pour naviguer sur le Web par exemple, peuvent se raccrocher à la sémantique des balises pour comprendre le sens d'un site Web ou pour naviguer sur ce même site. Ceci notamment grâce à l'utilisation de petits logiciels qui interprètent pour eux le sens des balises. Quelques exemples : navigation facile à travers les titres, ou intonations de voix différentes selon la balise avec un lecteur de page Web comme Jaws pour les mal-voyants.
  • En deuxième lieu, cela permet à vos pages Web d'être plus accessible pour les moteurs de recherche. Ils pourront plus facilement accéder à votre site et communiquer des informations plus pertinentes à leurs utilisateurs ! (et vous serez donc mieux positionné dans leurs résultats)
  • Enfin, c'est aussi bien plus lisible et compréhensible pour vous. (ainsi que pour les codeurs qui seraient susceptible de travailler avec vous.)

Cela vous semble peut-être très théorique ce que je vous raconte, mais c'est tout du moins important, car on se laisse vite entrainer à utiliser une mauvaise balise au mauvaise endroit ! C'est, en général en acquérant de l'expérience que l'on se rend compte de la nécessité et du bien fondé de la sémantique... Donc pour éviter d'avoir à recoder votre site proprement, pensez-y tout de suite ;)[/intro][fin]Nous voilà enfin arrivé à la fin de notre voyage au pays de la sémantique XHTML ! Désormais, vous connaissez de nombreuses balises XHTML (presque toutes en fait. Il ne reste plus que des balises bien spécifiques que nous verrons au fil du cours :)) et même s'il vous faudra peut-être revenir souvent sur ce chapitre pour bien l'assimiler, vous avez désormais suffisamment de connaissances pour que l'on puisse aborder le CSS :) (enfin ^^)
Reposez-vous bien, parce qu'au prochain cours c'est un tout nouveau langage et une toute nouvelle manière de penser une manière un peu différente de penser que je vais vous apprendre !

[/fin]

Une première page en XHTML

[intro]Maintenant que nous avons fait le tour théorique de ce qu'était le XHTML/CSS il va falloir voir concrètement ce que cela donne, et on va commencer par le XHTML ![/intro][fin]Voilà nous arrivons à la fin de ce chapitre, chapitre au cours duquel vous avez dû ingurgiter beaucoup de choses ! (prenez le temps de digérer avant d'enchainer sur le prochain ^^)

Vous savez désormais créer une page XHTML et avec les quelques connaissances que vous avez en balise, vous pouvez même vous lancer à faire quelques tests tout seul en modifiant le corps du document ! C'est-à-dire, rappelons-le, ce qui se situe entres les balises &lt;body&gt;&lt;/body&gt; Vous serez vite limité, car ce que nous avons vu dans ce dernier paragraphe n'est pas très complet. Néanmoins cela vous donne un aperçu de ce que nous allons faire pour programmer nos pages Web et croyez-moi, vous en saurez bientôt beaucoup plus !


[/fin]

Préparatifs préliminaires

[intro]Pour partir sur de bonnes bases il va nous falloir comprendre ce que nous allons apprendre dans ce cours. Mais avant cela, je vais peut-être me présenter : je me fais appeler Bnmaster et c'est moi qui vais vous guider tout au long de ce cours ! Inutile de vous dire que vous aller en baver, hum, hum...

On a vu dans l'introduction que le XHTML dérive du HTML, mais que cela soit clair dès maintenant : ce sont deux langages bien distincts. (quoi que similaire sur la forme) Le XHTML est beaucoup plus strict au niveau de la programmation que le HTML c'est ce qui fait qu'il est le plus utilisé à l'heure actuelle. (jusqu'à un retour du HTML sur le devant de la scène, peut-être plus rapidement qu'on ne le pense)

Pour ne pas perdre trop de temps, si l'HTML vous intéresse, allez lire le cours d'HTML de la Bnbox.

Il faut aussi bien différencier le XHTML du CSS. Présentons les plus précisément tous les deux :
[/intro][fin]Voilà ! Nous avons posé les bases ! Dans le prochain chapitre nous allons attaquer le concret, mais avant il fallait se préparer. On se dit donc à tout bientôt. (le temps que vous cliquiez sur Cours suivant quoi ;))

[/fin]

Cours XHTML/CSS

[intro]Comment vous expliquer en quelques lignes ce qu'est le XHTML/CSS ? Le XHTML/CSS c'est en fait deux langages de programmation : le <acronym title="eXtensible HyperText Markup Language">XHTML</acronym> et le <acronym title="Cascading Style Sheets (Feuille de Style en français)">CSS</acronym> ; intimement liés au point de ne former plus qu'un. C'est le langage principal pour concevoir des pages Web car il permet de créer la structure, le contenu et de faire la mise en page d'un site Web. C'est donc des sites Internet que nous allons apprendre à créer dans ce cours :)
Petit cours d'histoire : le XHTML/CSS est une nouvelle version du <acronym title="HyperText Markup Language ">HTML</acronym> (plus précisément une reformulation de HTML 4 en XML 1.0) mis en place par le <acronym title="World Wide Web Consortium">W3C</acronym> pour que les sites Internet soient accessibles par tout le monde (même aux personnes handicapés comme les mal-voyants) et de n'importe quelle plate-forme (entres autres sur tous les navigateurs Web) c'est ce qu'on appelle : la standardisation. Mais n'allons pas si rapidement, vous êtes la pour apprendre, donc nous commencerons par poser des bases solides sur lesquelles vous pourrez vous appuyer ;) Si vous connaissez déjà la programmation en HTML : alors il va vous falloir réapprendre plein de choses, mais vous noterez sûrement des similitudes ;) Si vous pensez déjà tout connaître de la programmation en XHTML/CSS, éh bien j'espère avoir l'honneur de pouvoir vous prouver le contraire. Et si vous ne connaissez rien à la programmation de sites Internet, rassurez-vous, nous allons commencer en partant du niveau 0.
Vous allez très vite vous en rendre compte, mais l'XHTML/CSS permet de faire des sites Web très fonctionnels et très beaux.

Image Image Image
Dans l'ordre : Jardin Zen, Levangile, Alsacréations.
Nous allons faire l'impossible pour que, dès les premiers chapitres, vous puissiez faire quelque chose de potable (de pas trop moche quoi ^^) pour qu'ainsi vous ayez l'envi de vous entrainer tout seul. L'expérience vaut plus que tous les cours théoriques du monde ! Alors bon, on va essayer et on verra ce que ça donne.[/intro][fin]Ce cours est en train d'être rédigé. Il va donc vous falloir patienter un peu pour avoir la suite ^^
En attendant, pour toutes questions ou tous problèmes : Bar à Nougat ! (forum de la Bnbox)[/fin]