Les bases du CSS

Question de style

Aujourd’hui nous vous avons préparé une petite introduction au CSS (Cascading Style Sheets), ou feuilles de cascade de style en français. Les feuilles de style sont utilisées pour donner une forme au code html. Le problème, si nous en utilisons pas, est qu'il faut reprendre toutes les pages une à une pour modifier une police de caractère ou une couleur de fond...

Le HTML et CSS

Le html est un langage qui fonctionne avec des balises simples, tout comme le XML, présenté il y a quelques semaines. Toutefois, une page html est divisée en deux grandes catégories.

La première catégorie est le header (en-tête) , celui-ci est utilisé pour des informations non-visibles. Il servira notamment pour charger notre Css, mais également pour afficher une icône, améliorer le référencement, ou encore charger du JavaScript.

La deuxième partie s’appelle le body, c’est là que nous plaçons toutes les informations que nous souhaitons afficher.

Une feuille de style CSS externe peut se faire avec un simple bloc-notes et il est d'usage de lui faire porter l'extension .css. Nous la lierons ensuite à la page html à l'aide d'un link placé dans le header  de la page.

Mais nous pouvons aussi déclarer les styles dans l'en-tête de la page, ou au sein des balises elles-mêmes. Cela peut être intéressant pour appliquer des styles spécifiques et ils auront un ordre de priorité plus important. C'est ce que nous appelons la "cascade".

                            Source: searchenginepeople

Mettre en forme un texte

Le formatage des polices de votre contenu est un élément primordial. En Css, nous utilisons des propriétés prédéfinies qui servent à formater nos éléments.

Par exemple, si nous souhaitons changer la police, nous utiliserons la propriété font-family, puis  pour changer la taille nous utiliserons la propriété font-size.

Plus concrètement si nous souhaitons formater les éléments texte de la balise body. 

Ça ressemblera à ceci :

Body {

font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;

color: #333333;

La propriété color est ici utilisée pour changer la couleur. Elle peut avoir comme valeur un code hexadécimal, ou le nom de la couleur en anglais, par exemple Red.

Les marges

Pour affecter des marges aux différents éléments d'une page web, les propriétés CSS à utiliser sont margin, pour les marges extérieures et padding, pour les marges intérieures.

Source: http://le-pape.blogspot.ch/

Aller plus loin

Le Css est un langage énorme avec des centaines de propriétés. Si cet aperçu vous a mis la puce à l’oreille, nous vous invitons à vous rendre sur http://www.grafikart.fr/ où vous pourrez suivre plusieurs tutoriels concernant le CSS.

Les requêtes XPATH

Localiser les données

Connaître la structure d’un fichier XML, c’est bien. Mais connaître la manière d’en ressortir les informations, c’est mieux. Nous allons apprendre comment utiliser les requêtes XPath avec le logiciel Oxygen XML Editor, afin de ressortir les informations qui nous intéressent.

Le principe

Dans notre dernier post, nous vous avons expliqué la façon de structurer un fichier XML. Aujourd’hui, nous allons montrer l’utilité d’un fichier XML. Le fichier XML est comme déjà expliqué, un outil de structuration de données. Il permet d’identifier et structurer l’information. Le XML est un format texte, facilement compréhensible pour l’humain et les machines. Il est réutilisable même une fois modifié et surtout indépendant de l’OS ! Ici, nous allons nous intéresser à l’information. Nous allons vous montrer comment effectuer des requêtes XPath (simples), afin de faire ressortir les informations qui nous intéressent. Le logiciel utilisé est Oxygen XML Editor 16.

Voici l’exemple d’un fichier XML:

Source : Exercice XML, HEVS-FIG, prof. Anne Le Calve

L’outil principal lorsque l’on travaille avec des requêtes XPath, c’est Ctrl-C / Ctrl-V. Le copier-coller doit être parfaitement maitrisé! Il y a plusieurs éléments à retenir avant de lancer votre première requête. Il vous faut cibler, tout d’abord, l’élément rechercher, ensuite vous y intégrerez les conditions. Si on prend cet exemple, pour afficher tous les éléments de la balise <valeurs>, il suffit de taper :

/catalog/products/product/price/valeur

Si vous ne voulez que la valeur du produit dont le code est 123 :

/catalog/products/product/price/valeur

et ensuite, vous insérez la condition « dont le code est 123 », ce qui donne :

/catalog/products/product[@Code='123']/price/valeur

Les conditions sont insérées par des crochets : [ ]

Voici une liste non exhaustive :

Source : http://www.w3schools.com/xpath/xpath_operators.asp

De plus, il ne nous faut pas oublier d’entrer la syntaxe correcte. Si vous ajoutez // (double slash), le logiciel va rechercher tous les éléments correspondant, indépendamment de sa place dans le fichier XML. Voici d’autres éléments :

Source : http://www.w3schools.com/xpath/xpath_syntax.asp

Un exemple

Afin de lancer des requêtes, il vous faut tout d’abord créer un fichier Xquery. Vous devrez par la suite lier les deux fichiers. Il suffit d’effectuer une transformation du fichier XML-XQUERY. Mais une vidéo vaut plus que 1000 mots ! Voici une petite vidée « aide-mémoire », qui vous montre les premières étapes à effectuer et une petite requête.

Source: Taylan

Pour conclure, il est important de se souvenir des opérateurs, des expressions et des conditions que vous utilisez de manière répétée. Le copier-coller est le meilleur moyen d'éviter les fautes de frappes. Lorsque vous effectuez une requête XPath, mettez vous en oeuvre petit à petit. Sélectionnez ce que vous souhaitez afficher, et ensuite seulement, vous insérez les conditions une à une. C'est le meilleur moyen de ne pas commettre de faute.

Le XML c'est simple, ou pas!

Schéma XML

Décoder un fichier XML. Comment est-il formaté, quelles sont les syntaxes et les symboles qui le compose.

La cabalistique

Enfin un langage simple. Simple car il n'y a que très peu de symboles à connaitre avant de vous lancer dans la création de petits fichiers. En début de semaine grâce à Taylan, vous avez découvert les fondements du XPATH (permet d'effectuer des requêtes dans un fichier XML). Dans cet article nous allons approfondir l'architecture d'un XML. Mais avant tout, un peu de vocabulaire.

Comme l’a expliqué Giuseppe dans sa dernière publication, il s’agit d’un langage normalisé. Seule une toute petite quantité de caractères sont exploitées.

<    </    >    "    ‘    =    <!--    -->

Dans la figure ci-dessous une mise en évidence des différents symboles.

Vocabulaire et stucture (Source : Exercice XML, HEVS-FIG, prof. Anne Le Calve)

Ce qu'il faut retenir. Les racines, les balises, les attributs... La manière dont vous les nommez est totalement "libre". En effet ce qui compte dans un premier temps c'est l'architecture. Ci-dessous une autre manière de représenter la structure (arbre hiérarchique). Cela permet également de se familiariser avec la notion de niveau. Élément essentiel dans la compréhension du Xpath.

Affichage hiérarchique (source : le-pape.blogspot.com)

Structurer

L'objectif majeur du fichier XML c'est qu'il est particulièrement universel. Alors, si celui-ci est mal formaté cet intérêt disparaîtra aussitôt. Prenons l'exemple d'un carnet d'adresses, il y a plusieurs méthodes pour l’écrire au format XML.

Exemple A :                                                                Exemple B :

Structurer un xml (source le-pape.blogspot.com)

On comprend assez vite que l'exemple "A" permet une plus grande souplesse. Il sera possible de créer autant d'adresses "type" que désiré. Notez la balise <Adresses> avec un "s" qui contiendra toutes les balises enfants <Adresse>.

Les règles à retenir

1. Un fichier xml doit contenir une seule balise racine.
2. Une balise ouverte <balise> doit toujours être fermée </balise>
3. Si une balise est vide, c'est-à-dire qui ne contient pas de texte, peut-être auto-fermante <balise/>
4. Pas de balise imbriquée, par exemple <Adresse>Chemin de l'école<CP>1923</Adresse></CP>
5. Par convention on privilégie les minuscules pour les noms de balises et des attributs.