Avant toute chose, une page web est un fichier XHTML ou HTML. Viendront ensuite les CSS pour mettre en forme le contenu.
Bien que nous allons par la suite écrire du code, le XHTML n'a strictement rien de dynamique. C'est un langage issu du HTML et du XML permettant de décrire des documents texte.
Decrire des données textuelles n'est pas décrire leur apparence, mais repérer les différents types de contenus. Par exemple, certaines portions de texte sont des titres, d'autres sont des sous-titres, on trouve des paragraphes ou encore des listes. Le XHTML permet d'identifier tous ces types de données sans à priori sur leur rendu :
Un fichier XHTML est tout d'abord un fichier texte ecrit dans un langage informatique. On peut donc créer une un document xhtml avec le calepin sous windows ou vi sous linux. Cependant, de nombreux logiciels existent pour nous faciliter la vie.
Deux solutions existent : utiliser un éditeur What You See Is What You Get WYSIWYG, soit utiliser un éditeur de texte
Un éditeur WYSIWYG est un logiciel dans lequel vous ne rentrez aucun code xhtml. Vous rentrez du texte, et le logiciel se charge tout seul d'écrire le code.
Exemples :
Les éditeurs texte permettent d'écrire du code plus facilement, en colorant les mots clé par exemple, ou en complétant automatiquement votre code. Exemples :
Nous allons utiliser un éditeur texte pour créer nos fichiers.
En XHTML comme en HTML, les différents contenus sont identifiés par des balises, qui entourent le texte, par exemple :
<p>Le contenu du paragraphe est entouré par les deux balises</p>
La balise p désigne un paragraphe.
En XHTML :
<p>....Texte renfermé....</p><br />
La balise <br /> force le retour à la ligne, elle n'entoure pas de texte<p> Voici mon texte,
<strong> ceci est important </strong>
</p><p> Voici mon texte,
<strong> ceci est important </p>
</strong>Pour pouvoir assurer une présentation correcte ou pour spécifier des options aux balises, on utilise les attributs
Utiliser les attributs permet par exemple d'identifier la fonction plus précise du texte entouré par le balisage. Dans ce site, si jécris :
<code class="pasbien"> <br> </code>
<code> <br /> </code>
J'obtiens :
<br > <br />
La balise code entoure du code source, son emploi est tout à fait justifié dans l'exemple ci dessus.
L'attribut class a été spécifé dans cet exemple. Il permet surtout d'afficher de la même manière plusieurs éléments sur la page.
Notez que je n'ai pas appelé cette classe "gris" mais "pasbien" : je renseigne le contenu et non l'apparence qui peut changer : je peux très bien décider d'écrire le mauvais code en rouge demain !
Caractéristiques des attributs :
Tout ce qui est en commentaire n'apparait que dans le code source, il est invisible à l'utilisateur
<!-- Contenu du commentaire -->
Remarque : interdiction de mettre d'autres successions de "--" dans le commentaire
Tout d'abord, une feuille de style est un document texte brut, comme un document XHTML. On peut donc créer une feuille de style avec tout éditeur de texte. On préfèrera un éditeur à coloration syntaxique.
Géneralement on nomme sa feuille de style "styles.css"...
Pour voir tout le pouvoir des feuilles de styles, choisissez d'afficher le site suivant avec d'autres feuilles de style
Site de ZenGarden www.csszengarden.com/En fait, un fichier CSS n'est que l'agglomération d'une série de définition de styles : on écrit des règles les unes à la suite des autres.
Exemple :
p {
text-decoration:underline;
}La première partie d'une règle CSS est appelée le selecteur : elle désigne en fait à quel élément la régle s'applique. On peut faire pas mal de choses avec les selecteurs... Voyez la suite.
Entre { et } viennent les règles CSS, finissant par un ";".