Bases de HTML et CSS

HTML CSS

Les pages web de base sont codées à l'aide de deux langages :

  • le HTML (pour HyperText Markup Language) permet de coder le contenu de la page (textes, images, liens...)
  • le CSS (pour Cascading Style Sheet, feuille de style en cascade) permet de coder la forme de la page (décoration, mise en page...)

Ces deux langages sont éxécutés côté client : c'est le navigateur de l'utilisateur qui interprète le code source de la page web.

Il faut donc pour créer une page a minima deux logiciels :

  • Un éditeur de code HTML/CSS : Il en existe de nombreux. Retenons Notepad++ et Brackets tous deux gratuits
  • Un navigateur permettant de visualise une page : Là encore, il y en a plusieurs : Firefox, Chrome...

Une fois une page créée avec l'éditeur, on l'ouvre dans le navigateur afin de voir le résultat. Attention à bien sauvegarder vos modifications au bon endroit dans l'explorateur pour éviter de modifier un fichier et d'en visualiser un autre dans le navigateur (cela arrive plus souvent qu'on ne le pense...).

La plupart des navigateurs permettent d'inspecter le code source et de tester quelques modifications à la volée (elles ne sont pas sauvées dans le fichier original). Sous Firefox on tape F12 :

Examiner

Des liens avec des tutoriels et ressources sont disponibles dans la partie IV.

I. HTML :

Le HTML a été créé par Tim Berners-Lee en 1993 en même temps que le premier site web et le protocole HTTP.

Son développement est aujourd'hui coordonné par le World Wide Web Consortium, (ou W3C) organisme internationnal créé en 1993 et regroupant plusieurs centaines de partenaires (éditeurs de logiciels dont de navigateurs, organismes de recherches).

La norme actuelle est le HTML5.

I.1 Structure générale :

La structure générale du code source d'une page web est la suivante :

<!DOCTYPE html>

<html>

  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="style.css" />
    <title>ISN à SFX</title>
  </head>
  <body>
    Ceci est une phrase avec un <a href="cible.html">hyperlien</a>.
    <p>
      Ceci est un paragraphe où il n’y a pas d’hyperlien.
    </p>
  </body>
</html>

On a successivement :

  • Le type de document (ici du html)

  • Une balise ouvrante html indiquant que la suite est du html (!). Remarquez que cette balise se ferme à la fin du code et que l'on décale avec une tabulation la balise suivante afin de gagner en lisibilité. Cette pratiques est à maintenir tout au long du fichier.

  • Un entête head qui contient des informations qui n'aparaîtront pas dans la page : l'encodage des caractères, la localisation du fichier css, le titre de la page. Il en existe bien d'autres...

  • Le body. C'est le corps de la page. On code entre les balises body tout ce qui sera affiché.

Cela donne :

Ceci est une phrase avec un hyperlien.

Ceci est un paragraphe où il n’y a pas d’hyperlien.

I.2 Les balises :

Le HTML est un langage de balisage. Ainsi (quasiment) chaque instruction se trouve placée entre deux balises : une ouvrante et une fermante. Afin de mettre un texte en italique il faut par exemple saisir le code suivant :

<i> Le texte à mettre en italique </i>
Le texte à mettre en italique

Comme on peut le voir, les balises fonctionnent par deux : une ouvrante <XX> suivie d'une fermante </XX>. Entre les deux on tape le texte souhaité.

Il existe de nombreuses balises différentes. Voici les plus communes :

  • <header> et </header> :

    Permet d'identifier l'entête de la page ou d'une section

  • <footer> et </footer> :

    Permet d'identifier le pied de page ou d'une section

  • <h1> et </h1>, <h2> et </h2> jusqu'à <h4> et </h4>:

    Des zones de titres plus ou moins importantes (h1 > h2...)

  • <p> et </p> :

    Un simple paragraphe. Le navigateur va obigatoirement à la ligne au début d'un <p>

  • <div> et </div> :

    Permet d'identifier une division. Le navigateur va obligatoirement à la ligne au début d'une <div>

  • <span> et </span> :

    Permet d'identifier une division de la page. Pas de retour à la ligne

  • <nav> et </nav>:

    Permet d'identifier une zone de navigation. On peut y mettre les liens permettant de circuler dans le site

  • <a> et </a>:

    Permet de créer un lien hypertexte. Par exemple :

<a href="https://www.w3schools.com/html/default.asp"> Le site de W3SCHOOL </a>

L'adresse du lien est donnée par l'argument href.

On peut placer ce que l'on souhaite entre les balises <a> (par exemple des images qui lorsqu'elles sont cliquées mènent vers un lien).

  • <article> et </article> :

    Permet d'identifier un article dans la page

  • <img> et ... rien ! :

    Une des rares balises qui ne soit qu'ouvrante :

<img src="https://www.html-5-tutorial.com/images/nav-element-tag.gif" alt="Page web de base">
Page web de base

L'adresse de l'image est fournie par l'argument src et peut être une adresse sur le web ou une adresse locale. Dans ce cas on donne l'adresse relative du fichier image en partant du fichier html.

On fournit de plus un texte alternatif avec alt au cas où l'image ne se charge pas.

  • <ul> et </ul>, <ol> et </ol> :

    Permet de créer des listes non ordonnées (avec des simples puces) pour ul ou ordonnées, numérotées, avec ol. Les élements de la liste sont délimités avec les balises <li> pour list item :

<ol>
  <li>CP</li>
  <li>CE1</li>
  <li>CE2</li>
</ol>
  1. CP
  2. CE1
  3. CE2

Notez que le navigateur se charge lui-même de la numérotation.

I.3 Identifier des sections :

On a régulièrement besoin de mettre en forme de façon différents deux div ou deux p. Par défaut, le CSS applique la même mise en forme à tous le éléments de même type...

On peut régler ce problème en nommant nos sections ou en leur donnant une (ou plusieurs) classes :

  • un identifiant permet de donner un nom unique à un élément
  • une classe permet de regrouper plusieurs éléments dans la même catégorie

On pourra alors en CSS, donner un style particulier à un élément précis ou à tous les éléments d'une même classe.

Pour donner un nom (un ID) :

<p id="element1"> Ce parapgraphe s'appelle "element1" </p>

Pour donner une classe :

<div class="classe1"> Cette div appartient à la "classe1" </p>

II. CSS :

Le CSS est né au milieu des années 1990 et est couramment utilisé dans la conception de sites web et bien pris en charge par les navigateurs web dans les années 2000.

Il est lui aussi maintenu par le W3C.

La version actuelle est la 3.

II.1 Organisation du CSS :

Le code CSS est contenu dans un fichier CSS dont l'extension est .css.

L'adresse relative du fichier par rapport à la page html est donnée dans le head :

  <head>
    <link rel="stylesheet" href="css/style.css" />
  </head>

Dans cet exemple le fichier est placé dans un sous-dossier CSS et s'appelles style.css.

Le fichier CSS consiste en une série de règles à appliquer aux différents éléments de la page web. Les règles sont regroupées entre accolades et se terminent toujours par des points-virgules.

p {
  color : blue;
}

Ici, on met simplement le textes des parapgraphes p en bleu.

Il est lu et interprété côté client par le navigateur.

Comme on a vu dans la partie sur le HTML, les éléments d'une page sont imbriqués les uns dans les autres. La règle appliquée à un éléments sera celle située le plus bas possible :

Cascade

Ici par exemple, le fichier CSS peut contenir des règles pour le html, le body, le h1, la classe article et les p. L'élément em en bas à droite se verra donc appliquer la règle de la classe article : c'est l'élément parent le plus proche de lui.

On doit donc être capable de sélectionner les éléments visés par une règle :

  • Pour les balises classiques :

    on note simplement le nom de la balise

p {
  color : blue;
}

  • Pour les éléments avec un ID :

    on donne l'ID avec un #

#element1 {
  color : blue;
}

  • Pour les classes :

    on donne la classe avec un point.

.classe1 {
  color : blue;
}

  • Pour sélectionner plusieurs éléments d'un coup :

    on les donne séparés par des virgules

p, .classe1 {
  color : blue;
}

  • Pour sélectionner un élément grâce à son ascendance :

    on les donne séparés par des espaces. Ci-dessous, on sélectionne les éléments de classe1 dont un parent est p

p .classe1 {
  color : blue;
}

  • Pour sélectionner un élément grâce à son ascendance (bis) :

    on les donne séparés par des >. Ci-dessous, on sélectionne les éléments de classe1 dont le parent direct est p

p > .classe1 {
  color : blue;
}

II.2 Règles :

Les règles sont très nombreuses. En voici quelques-unes mais on consultera des sites webs comme-ceux indiqués plus bas pour en avoir d'autres.

  • La couleur du texte :

    color : blue;

Accepte des couleurs par leur nom, en RGB ou en hexadécimal avec un #. Voir Color Picker pour choisir votre couleur

  • Aligner le texte :

    text-align : center;

Accepte center, left, right...

  • Taille du texte :

    font-size : 50%;

Accepte un pourcentage de la taille normale, des pixels...

  • La marge extérieure :

    margin : 2%;

Règle la marge extérieure de l'élément à 2% de la taille de l'élément parent. Peut se décliner en margin-right, margin-top...

  • La marge intérieure :

    padding : 2%;

Règle la marge intérieure de l'élément à 2% de la taille de l'élément parent. Peut se décliner en padding-right, padding-top... Accepte des pourcentages, des pixels...

  • Bordure :

    border : 1px solid red;

Entoure l'élément d'une bordure de 1px, en trait continu et rouge. On peut aussi choisir le côté, faire des pointillés...

  • Largeur et Hauteur :

    width : 500px;
    height : 75%;
    Règle la largeur et la hauteur de l'élément. Accepte un pourcentage de la taille du parent, des pixels...

III. Structurer la page :

Avant de construire une page, il est essentiel de la dessiner à la main. Une représentation en rectangle comme celle-ci suffit :

Structure

Une fois le dessin réalisé, on peut commencer à coder le sequelette de la page.

Ici on voit que l'on aura :

  • un header
  • une nav
  • une div contenant (elle n'apparait pas sur le schéma mais promis, elle est là !) :
    • une section contenant :
      • un heading
      • un article
    • un aside
  • un footer

Comment structurer la partie centrale en deux colonnes (la section et l'aside) ? Grâce au CSS.

On va ainsi donner un nom (#conteneur)à la div contenant les élément et lui donner une règle :

#conteneur {
  display : flex ;
}

Cet attribut flex assurera que les éléments sera disposés de gauche à droite à la suite.

On pourra alors leur donner des tailles et des bordures différentes :

section {
  width : 64% ;
}

aside {
  width : 32% ;
}

64% et 32% ne font pas 100% ! Comment le navigateur va-t-il faire ? On peut lui dire de gérer l'espace supplémentaire en le mettant entre les éléments. Cela se fait au niveau du conteneur :

#conteneur {
  display : flex ;
  justify-content: space-between;
}

Cet article d'Alsacréations est très clair sur les flex.

IV. Ressources :

Ci-dessous des liens vers des ressources sur le web :