41Mag - Syntaxe et lexique du HTML5 et du CSS3

Syntaxe et lexique du HTML5 et du CSS3

Maintenant que nous savons à quoi ressemble le HTML5 et ce que nous pouvons faire avec (Voir Introduction Tutoriel HTML5), il est important de comprendre les différences entre ce langage et le CSS3, leur syntaxe, et une certaine terminologie commune.

Comme sur aperçu, le HTML5 est un langage créé pour structurer et donner du sens au contenu. Le CSS3, également connu sous le nom des feuilles de style en cascade, est un langage de présentation créé pour donner du style au contenu, jouer sur son apparence. En résumé, le HTML5 détermine la structure et la signification du contenu sur une page Web pendant que le CSS3 détermine le style et l’apparence de ce contenu. Ces deux langages sont indépendants l’un de l’autre.

Le CSS3 ne doit pas résider dans un document HTML5 et vice-versa (fortement conseillé).

Prenons un exemple, l’élément HTML5 p est utilisé pour afficher un paragraphe de texte sur une page web. Le CSS3 utilise ensuite un sélecteur pour intervenir sur l’élément  p en changeant la couleur, la taille de police, le poids de la police, et d’autres propriétés … Tout ceci vous sera détaillé plus bas.

[cadreHTML5]

Lexique HTML 5

Quand vous commencez a coder en HTML5, vous êtes susceptible de lire ou entendre de nouveaux termes, souvent étrange. Au fil du temps, vous deviendrez de plus en plus familier avec chacun d’eux. Nous allons en détaillé trois d’entre eux, les plus important : Elément, Balise et Attribut :

Eléménts

Les éléments sont des indicatifs définissant des objets dans une page, comprenant la structure et le contenu. Quelques-uns des éléments les plus populaires sont les titres (h1 à h6), les liens (a), les mots en gras (strong) …

1
<strong>

Les balises ou Tags (en anglais)

Les éléments sont souvent faites de plusieurs ensembles de balises, identifiés comme étant d’ouverture et de fermeture. La Balise d’ouverture marquera le début d’un élément, tel que <div>. La balises de clôture marquera la fin d’un élément et commencera par une barre oblique, comme </div>.

1
<p> .... </p>

Pour ne pas confondre balises et éléments, considérez l’exemple suivant :

1
<p> L'élément P contient des mots en <strong>Gras</strong>. </p>

L’élément P contient du texte et des balises. L’élément STRONG ne contient que du texte. Jusque la tout va bien. Mais, si en CSS3 on applique un style à l’élément P, par exemple une couleur de texte rouge, alors tous le contenu de l’élément P sera affiché en rouge. Même le texte en Gras.

L’élément P contient également la balise d’ouverture <strong> et la balise de fermeture </strong>.

Les Attributs

Les attributs sont des propriétés utilisées pour fournir des instructions supplémentaires aux éléments donnés. Plus généralement, les attributs sont utilisés pour attribuer un id (identifiant), class (sélecteur CSS3), ou le titre d’un élément, une source (src), ou pour fournir une référence de lien hypertexte (href).

1
<img src="http://41mag.fr/image/logo.jpg" alt="Logo du 41mag" />

Dans la ligne de code ci-dessus, la balise <img (qui se referme toute seule : Comprendre le principe de balises imbriqués) possède deux attributs : SRC et ALT.

L’attribut SRC indique à la balise <img> l’adresse de l’image à afficher tandis que l’attibut ALT indique un texte alternatif décrivant l’image s’affichant au cas ou celle-ci ne serait pas accessible.

Structure et syntaxe d’un document HTML5

Tous les documents HTML ont une structure minimale qui contient les éléments suivant : doctype, html, head et body.

Suite à la déclaration doctype (En savoir plus sur le Doctype HTML5), l’éléments <HTML> signifie le début et la fin du document.

L’élément HEAD du document est utilisé pour décrire toutes les méta-données, le titre du document et des liens vers des fichiers externes (relier notre document à une feuille de styleCSS3 par exemple). Tout ce qui est inclus dans les balises ɞhead> n’est pas visible pour vos visiteurs. Il s’agit uniquement de renseignements indiqués au navigateur.

En général, la structure d’un document HTML5 se présente comme suit :

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8" />
    <title>Titre de ma page</title>
  </head>
  <body>
    <h1>Bonjour à tous</h1>
    <p>Ceci est ma page web</p>
  </body>
</html>

En savoir plus sur L’en-tête et le corps d’un document HTML5.

Lexique CSS3

En complément des termes HTML5, il y a quelques termes courant en CSS3 que vous devrez connaitre. Plus vous coderez en HTML5 et CSS3, plus ces termes vous seront familiers.

Les sélecteurs

Un sélecteur détermine exactement à quel(s) élément(s) les styles correspondant seront appliquées. Les sélecteurs peuvent inclure une combinaison de différents identifiants : les classes, les types …

Les sélecteurs sont situés avant la première accolade, {

1
p { ... }

Dans l’exemple ci-dessus, nous appliqueront un style aux élément P. Ce style, qui sera à la place des trois points (…), s’appliquera à tous les paragraphes, ou éléments P, de notre page web.

Les Propriétés

Un propriété détermine le style qui sera appliquée à un élément. Il y a un très grand nombres de propriétés que vous pourrez utiliser, et de nouvelles sont constamment ajoutées.

1
2
3
p {
    font-family: Arial;
}

Dans l’exemple ci dessus, nous avons utilisé la propriété font-family.

Les valeurs

C’est la valeur qui détermine le comportement d’une propriété. Les valeurs sont identifiés comme le texte après les deux point de la propriété jusqu’au point virgule. Ce dernier sert à indiquer la fin de la ligne de commande suivant le shéma suivant :

1
2
3
p {
    propriété : valeur ;
}

Les espaces entre les deux-points (:) et le point virgule (;) ne sont pas obligatoires. Vous pouvez mettre des espaces si cela vous parait plus lisible ou ne pas en mettre, cela n’affectera en rien le résultat.

Dans l’exemple ci-dessous, nous avons donné la valeur Arial à la propriété font-family. Pour faire simple, nous avons appliqué à notre élément P une famille de police de caractère, nous l’afficheront en Arial.

1
2
3
p {
    font-family: Arial;
}

Le CSS3 fonctionne en utilisant des sélecteurs qui permettent d’appliquer des styles aux éléments HTML5. Tous les styles CSS3 permettent à plusieurs éléments d’héritées de différent style.

Prenons un exemple, il est possible de définir un style pour l’ensemble du texte sur une page afin qu’il soit d’une couleur spécifique :

1
2
3
p {
    color : red;
}

L’ensemble de texte de notre document HTML5 appartenant à un élément P sera affiché en rouge.

1
2
<p>Ce texte sera affiché en <strong>rouge</strong> </p>
<p>Ce deuxième paragraphe sera aussi en rouge</p>

Le texte ci-dessussera donc affiché en rouge, même l’élément STRONG (le texte entre les balises <strong> et </strong>). Pour appliquer une couleur différente à l’élément STRONG ou à un seul paragraphe (élément P), nous allons avoir recours aux sélecteurs.

Les sélecteurs

Les sélecteurs, comme mentionné précédemment, servent à déterminer le style des éléments . Dans l’immédiat, il est important de bien comprendre comment les utiliser sans pour autant tous les connaitre. Les sélecteurs les plus utilisés comprennent des éléments, des identifiants et des classes, ou une combinaison des trois.

Les sélecteurs de type

Les sélecteurs de type sont les sélecteurs les plus élémentaire. Privilégiés les sélecteurs de type lorsque cela est possible car ils nécessitent moins de code et sont faciles à gérer. Le style sera appliqué à l’ensemble des éléments du même type :

1
2
3
p {
    color : red;
}
1
2
<p>Ce texte sera affiché en rouge</p>
<p>Ce deuxième paragraphe sera aussi en rouge</p>

Les sélecteurs de classe

Les sélecteurs de classe vous permettent d’appliquer le même style à un groupe d’éléments en leur donnant à tous le même attribut de class. En CSS3, Les classes sont notées suivant le shéma ci-dessous :

1
.class { ... }

Un point (.) précède le nom de la classe. Il est permis d’utiliser l’attribut de classe même sur de multiples éléments sur une page.

1
2
3
.rouge {
    color : red;
}
1
2
<p class="rouge">Ce texte sera affiché en rouge</p>
<p>Ce deuxième paragraphe ne le sera PAS</p>

Les sélecteurs d’ID (identifiant)

Les sélecteurs d’ID sont semblables à des sélecteurs de class mais ils sont utilisés pour cibler un élément UNIQUE sur le document. En CSS3, Les classes sont notées suivant le shéma ci-dessous :

1
#identifiant { ... }

Un symbole diese (#) précède le nom de le l’identifiant. Les ID sont uniquement utiliser une fois par page et devrait idéalement être réservée à des éléments significatifs.

1
2
3
#rouge {
    color : red;
}
1
2
<p id="rouge">Ce texte sera affiché en rouge</p>
<p>Ce deuxième paragraphe ne le sera PAS</p>

Combiner plusieurs sélecteurs

La beauté du CSS3 provient de la capacité de combiner les sélecteurs et d’hériter des styles. Cela vous permet de commencer avec un sélecteur générique et de continuer à travailler de façon plus spécifique. En outre, vous pouvez combiner des sélecteurs différents pour être le plus précis possible :

1
2
3
<p id="rouge">Le mot en gras est en <strong>ROUGE</strong> </p>.
<p>Le mot en gras est en <strong class="vert">Vert</strong> </p>.
<p>Le mot en gras est en <strong>Bleu</strong> </p>.
1
2
3
4
5
6
7
8
9
strong {
     color : blue ;
}
#rouge strong {
     color : red ;
}
strong.vert {
     color : green ;
}

Sélecteurs supplémentaires

Les sélecteurs peuvent être extrêmement puissants et les sélecteurs décrits ci-dessus ne sont que le début. Beaucoup de sélecteurs plus avancés existent et sont facilement disponibles. Il convient également de mentionner que tous les sélecteurs ne sont pas compatibles avec tous les navigateurs, en particulier avec les nouveaux sélecteurs introduit en CSS3.

Tous les secteurs détaillés plus dans ce chapitre sont 100% compatible avec l’ensembles des navigateurs.

Les Commentaires en HTML5 et CSS3

Le HTML5 et le CSS3 vous donnent la possibilité de commenter votre code. Ces commentaires peuvent être utilisés pour vous aider à gérer plus efficacement le code. Les Commentaires sont particulièrement utile quand plusieurs personnes travaillent sur le même projets. Tout contenu enveloppé dans les commentaires ne sera pas affiché sur la page ni interprété par les navigateurs.

Commentaires en HTML5

1
2
3
4
5
<!-- Ceci est un commentaire en HTML5,
il peut tenir su plusieurs lignes,
et ne sera ni affiché, ni interprété
par le navigateur  -->
<p>Ceci nest plus un commentaire</p>

Les commentaires en HTML5 sont encadré par les symboles <!– et –>

Commentaires en CSS3

1
2
3
4
5
/* Ceci est un commentaire en CSS3
il peut tenir su plusieurs lignes,
et ne sera ni affiché, ni interprété
par le navigateur  */
p { ... }

Les commentaires en CSS3 sont encadré par les symboles /* et */

Article du même thême : ..

  • Mgervais82

    Petite coquille dans le premier paragraphe de la partie « Les sélecteurs d’ID (identifiant) »

    Vous écrivez « En CSS3, Les classes sont notées suivant le shéma ci-dessous : », je pense que « classes » est à remplacer par « identifiants »

  • HelpMe

    Quelques petites erreurs / fautes de frappes :

    Les commentaires en HTML5 sont encadré par les symboles
    = Les commentaires en HTML5 sont encadré par les symboles
    =

    • HelpMe

      bon les balises sont filtrées… tnat pis

Copyright © 2013 | 41Mag. All rights reserved. Contact.
Integrated by Créa-troyes. Powered by WordPress.