Catégories
Apprendre le CSS

Comment utiliser CSS ?

Lorsqu’un navigateur lit une feuille de style, il formate le document HTML en fonction des informations contenues dans la feuille de style.


Trois façons d’insérer du CSS

Il y a trois façons d’insérer une feuille de style:

  • Feuille de style externe
  • Feuille de style interne
  • Style en ligne

Feuille de style externe

Avec une feuille de style externe, vous pouvez changer l’apparence d’un site Web entier en ne modifiant qu’un seul fichier!

Chaque page doit inclure une référence au fichier de feuille de style externe à l’intérieur de l’élément <link>. L’élément <link> va à l’intérieur de la section <head>:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

Une feuille de style externe peut être écrite dans n’importe quel éditeur de texte. Le fichier ne doit contenir aucune balise HTML. Le fichier de feuille de style doit être enregistré avec une extension .css.

Voici à quoi ressemble « style.css »:

body {
  background-color: lightblue;
}

h1 {
  color: navy;
  margin-left: 20px;
}

Remarque: N’ajoutez pas d’espace entre la valeur de la propriété et l’unité (telle que 
margin-left: 20 px;). 
La manière correcte est:
margin-left: 20px;

Feuille de style interne

Une feuille de style interne peut être utilisée si une seule page a un style unique.

Les styles internes sont définis dans l’élément <style>, dans la section <head> d’une page HTML:

<head>
<style>
body {
  background-color: linen;
}

h1 {
  color: maroon;
  margin-left: 40px;
} 
</style>
</head>

Styles en ligne

Un style en ligne peut être utilisé pour appliquer un style unique à un seul élément.

Pour utiliser des styles inline, ajoutez l’attribut style à l’élément concerné. L’attribut style peut contenir n’importe quelle propriété CSS.

L’exemple ci-dessous montre comment changer la couleur et la marge gauche d’un élément <h1>:

<h1 style="color:blue;margin-left:30px;">This is a heading</h1>

Conseil: Un style en ligne perd beaucoup des avantages d’une feuille de style (en mélangeant le contenu avec la présentation). 
Utilisez cette méthode avec parcimonie.

Plusieurs feuilles de style

Si certaines propriétés ont été définies pour le même sélecteur (élément) dans différentes feuilles de style, la valeur de la dernière feuille de style lue sera utilisée. 

Exemple

Supposons qu’une feuille de style externe ait le style suivant pour l’élément <h1>:

h1 {
  color: blue;
}

supposons ensuite qu’une feuille de style interne possède également le style suivant pour l’élément <h1>:

h1 {
  color: orange;    
}

Si le style interne est défini après le lien vers la feuille de style externe, les éléments <h1> seront « orange »:

<head>
<link rel="stylesheet" type="text/css" href="style.css">
<style>
h1 {
  color: orange;
}
</style>
</head>

Cependant, si le style interne est défini avant le lien vers la feuille de style externe, les éléments <h1> seront « blue »:

<head>
<style>
h1 {
  color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

Commande en cascade

Quel style sera utilisé quand il y a plus d’un style spécifié pour un élément HTML?

Tous les styles d’une page seront « mis en cascade » dans une nouvelle feuille de style « virtuelle » selon les règles suivantes, dans lesquelles le numéro un a la priorité la plus élevée:

  1. Style en ligne (à l’intérieur d’un élément HTML)
  2. Feuilles de style externes et internes (dans la section principale)
  3. Navigateur par défaut

Ainsi, un style en ligne a la priorité la plus haute et remplace les styles internes et externes et les valeurs par défaut du navigateur.

Catégories
Apprendre le CSS

Syntaxe et sélecteurs CSS

Syntaxe CSS

Un ensemble de règles CSS se compose d’un sélecteur et d’un bloc de déclaration:

Le sélecteur pointe sur l’élément HTML que vous souhaitez styler.

Le bloc de déclaration contient une ou plusieurs déclarations séparées par des points-virgules.

Chaque déclaration inclut un nom de propriété CSS et une valeur, séparés par deux points.

Une déclaration CSS se termine toujours par un point-virgule et les blocs de déclaration sont entourés d’accolades.

Dans l’exemple suivant, tous les éléments <p> seront alignés au centre, avec une couleur de texte rouge:

p {
  color: red;
  text-align: center;
}

Sélecteurs CSS

Les sélecteurs CSS permettent de « rechercher » (ou de sélectionner) des éléments HTML en fonction de leur nom, id, classe, attribut, etc.


Le sélecteur d’élément

Le sélecteur d’élément sélectionne les éléments en fonction du nom de l’élément.

Vous pouvez sélectionner tous les éléments <p> sur une page comme ceci (dans ce cas, tous les éléments <p> seront alignés au centre, avec une couleur de texte rouge):

p {
  color: red;
  text-align: center;
}

Le sélecteur d’identifiant

Le sélecteur id utilise l’attribut id d’un élément HTML pour sélectionner un élément spécifique.

L’identifiant d’un élément doit être unique dans une page, le sélecteur d’identifiant sert donc à sélectionner un élément unique!

Pour sélectionner un élément avec un identifiant spécifique, écrivez un caractère dièse (#), suivi de l’identifiant de l’élément.

La règle de style ci-dessous sera appliquée à l’élément HTML avec id="para1":

#para1 {
  text-align: center;
  color: red;
}

Remarque: un identifiant ne peut pas commencer par un numéro!

https://www.w3schools.com/css/css_syntax.asp

Le sélecteur de classe

Le sélecteur de classe sélectionne les éléments avec un attribut de classe spécifique.

Pour sélectionner des éléments avec une classe spécifique, écrivez un caractère point (.), Suivi du nom de la classe.

Dans l’exemple ci-dessous, tous les éléments HTML avec class="center" seront en rouge et centrés:

.center {
  text-align: center;
  color: red;
}

Vous pouvez également spécifier que seuls des éléments HTML spécifiques doivent être affectés par une classe.

Dans l’exemple ci-dessous, seuls les éléments <p> avec class = « center » seront alignés au centre:

p.center {
  text-align: center;
  color: red;
}

Les éléments HTML peuvent également faire référence à plus d’une classe.

Dans l’exemple ci-dessous, l’élément <p> sera stylé selon la classe center et la classe large:

<p class="center large">Ce paragraphe fait référence à deux classes.</p>

Remarque: Un nom de classe ne peut pas commencer par un numéro!

https://www.w3schools.com/css/css_syntax.asp

Sélecteurs de regroupement

Si vous avez des éléments avec les mêmes définitions de style, comme ceci:

h1 {
  text-align: center;
  color: red;
}

h2 {
  text-align: center;
  color: red;
}

p {
  text-align: center;
  color: red;
}

Il sera préférable de regrouper les sélecteurs pour minimiser le code.

Pour regrouper les sélecteurs, séparez chaque sélecteur par une virgule.

Dans l’exemple ci-dessous, nous avons regroupé les sélecteurs à partir du code ci-dessus:

h1, h2, p {
  text-align: center;
  color: red;
}

Commentaires CSS

Les commentaires sont utilisés pour expliquer le code et peuvent vous aider lorsque vous modifiez le code source à une date ultérieure.

Les commentaires sont ignorés par les navigateurs.

Un commentaire CSS commence par /* et se termine par */. Les commentaires peuvent également s’étendre sur plusieurs lignes:

p {
  color: red;
  /* Ceci est un commentaire sur une ligne */
  text-align: center;
}

/* Ceci
est un commentaire
sur plusieurs
lignes */

Catégories
Apprendre le CSS

Introduction au CSS

  • CSS signifie Cascading Style Sheets
  • CSS décrit comment les éléments HTML doivent être affichés à l’écran, sur papier ou sur un autre support.
  • CSS économise beaucoup de travail . Il peut contrôler la mise en page de plusieurs pages Web en même temps
  • Les feuilles de style externes sont stockées dans des fichiers CSS

Pourquoi utiliser CSS?

CSS permet de définir les styles de vos pages Web, notamment la conception, la disposition et les variations d’affichage pour différents appareils et tailles d’écran. 


CSS a résolu un gros problème

Le code HTML n’a JAMAIS été conçu pour contenir des balises permettant de formater une page Web!

HTML a été créé pour décrire le contenu d’une page Web, comme:

<h1> Ceci est un titre de niveau 1 </h1>

<p> Ceci est un paragraphe. </p>

Lorsque des balises telles que <font> et des attributs de couleur ont été ajoutés à la spécification HTML 3.2, cela a créé un cauchemar pour les développeurs Web. Le développement de grands sites Web, où les polices et les informations de couleur étaient ajoutées à chaque page, est devenu un processus long et coûteux.

Pour résoudre ce problème, le World Wide Web Consortium (W3C) a créé CSS.

CSS a supprimé la mise en forme du style de la page HTML!

Si vous ne savez pas ce que HTML est, nous vous suggérons de lire notre cours HTML .

CSS économise beaucoup de travail!

Les définitions de style sont normalement enregistrées dans des fichiers .css externes.

Avec une feuille de style externe, vous pouvez changer l’apparence d’un site Web entier en ne modifiant qu’un seul fichier!

Catégories
Apprendre le HTML

Les éléments HTML

Hiérarchie d’un document HTML

Un document HTML est structuré par les définitions de titres, paragraphes et listes.

Les titres

Les titres sont une des premières approches permettant la structuration de documents. Ils permettent de distinguer plusieurs parties qui composeront le document suivant une hiérarchie.

En html on associe à chaque définition de titre, une valeur entière comprise entre 1 et 6.
Cette valeur, qui peut être comparée à un rang ou niveau, permet de définir « l’importance » d’un titre.

Les balises <h1> et </h1> définissent le titre de plus grande importance
et <h6> associée à </h6> définissent le titre de plus petite importance.

Le W3C définit le titre de section comme un élément qui décrit brièvement le sujet de la section qu’il introduit. Ce titre de section ne doit pas être confondu avec le titre de la page, balisé avec title, exclusivement dans le head du document.

La hiérarchie des titres d’une page web doit être :

  • Logique : elle doit suivre le schéma d’une table des matières comme pour tout document textuel.
  • Continue : elle doit commencer par un H1 et ne pas comporter de sauts de niveau (un H1 ne peut être directement suivi d’un H3, il doit y avoir au moins un H2 entre les deux).
  • Pensée pour l’utilisateur, et non pour le référencement : les titres doivent être des titres et non des mots clés sans rapport avec ce qui suit, ni des paragraphes complets.
  • Sémantique, et non visuelle : un élément Hn doit être utilisé pour sa valeur sémantique (titre de niveau n) et non pour son rendu visuel (qui peut être totalement transformé avec CSS).
  • Ergonomique : Les utilisateurs sont habitués aux titres, ils les aident à se retrouver dans la page, tant papier que virtuelle, et à aller à l’essentiel de l’information. La présence de titres de section rend également le texte plus digeste et lisible et de fait aide à retenir l’attention, très volatile sur Internet, du lecteur.

Les paragraphes

Les paragraphes permettent de structurer les informations ayant une relation directe entre elles.

En HTML la définition d’un paragraphe permet également l’indentation du texte, ainsi que les passages à la ligne avant et après le paragraphe.

Définition d’un paragraphe

Un paragraphe se définit à l’aide des balises <p> et </p> (pour « Paragraph »).
Le texte contenu entre la balise de début de paragraphe <p> et la balise de fin du paragraphe </p> définit le contenu du paragraphe.

Lignes et sauts de lignes

À l’aide de la balise <br /> (pour « Break line »), Il est possible de demander explicitement un saut de lignes au sein d’un paragraphe, sans pour autant souhaiter terminer le paragraphe.

Au même titre que les sauts de lignes, il est possible d’insérer des lignes horizontales dans le document HTML avec la balise <hr>. Nous verrons par la suite qu’il est possible de modifier l’aspect de ces lignes de séparation.

Les listes

Liste descriptive

Les listes descriptives permettent de présenter un ensemble d’informations dans une forme proche de celle adoptée par les dictionnaires : le mot clé est placé sur la première ligne et la définition correspondante est placée sur les lignes suivantes.

Il existe donc une balise d’ouverture de la liste <dl> (pour « Definition List »), à laquelle correspond naturellement une balise de fermeture de la liste </dl>.

Le mot clé est placé entre les balises <dt> et </dt> (pour « Definition Term »).

Enfin, la définition associée est placée entre les balises <dd> et </dd> (pour « Definition Description »).

<dl>
<dt>Café</dt>
<dd>Boisson noire chaude</dd>
<dt>Lait</dt>
<dd>Boisson blanche froide</dd>
</dl>
Café
Boisson noire chaude
Lait
Boisson blanche froide

Liste non-ordonnée (ou liste à puce)

L’élément HTML <ul> (pour « Unordered List ») représente une liste d’éléments non ordonnés. C’est une collection d’éléments qui n’ont pas d’ordre numérique et dont leur position dans la liste n’a pas d’importance.
En règle générale une liste d’élements non ordonnée est affichée avec une puce qui peut prendre plusieurs formes : un simple point, un cercle ou un carré. Le style de la puce n’est pas défini dans le code HTML de la page, mais dans le code CSS associé utilisant la propriété list-style-type.

<ul>
<li>Ligne 1</li>
<li>Ligne 2</li>
<li>Ligne 3</li>
</ul>
  • Ligne 1
  • Ligne 2
  • Ligne 3

Liste ordonnée

Élément HTML <ol> (pour « Ordered List »).

<ol>
<li>Ligne 1</li>
<li>Ligne 2</li>
<li>Ligne 3</li>
</ol>
  1. Ligne 1
  2. Ligne 2
  3. Ligne 3

Imbrication de listes

<ul>
<li>Ligne 1
    <ul>
        <li>Ligne 1.1</li>
        <li>Ligne 1.2</li>
    </ul>
</li>
<li>Ligne 2</li>
<li>Ligne 3
    <ul>
        <li>Ligne 3.1
            <ul>
                <li>Ligne 3.1.1</li>
            </ul>
        </lI>
    </ul>
</li>
</ul>
  • Ligne 1
    • Ligne 1.1
    • Ligne 1.2
  • Ligne 2
  • Ligne 3
    • Ligne 3.1
      • Ligne 3.1.1

Section de contenu

L’élément <div> (pour « Division ») permet de diviser une page web en plusieurs sections. C’est un élément de type bloc.

<div class="section" id="section-1">
<h3>Ceci est un titre</h3>
<p>Ceci est un paragraphe.</p>
</div>

Les liens hypertextes

Qu’est ce qu’un lien hypertetxe ?

  • L’élément HTML <a> (pour « Anchor ») est une référence permettant de passer d’un document consulté à un document lié.
  • Un lien peut pointer :
    • vers une page sur un autre site
    • vers une page du site courant
    • vers un élément de la page (ancre nommée)
    • vers une adresse de courriel

Exemples de liens hypertextes

Exemple de lien absolu <a href="http://www.univ-lyon2.fr">
  Site de Lyon 2
</a>
Site de Lyon 2
Exemple de lien relatif <a href="page1.html">
  Page 1
</a>
Page 1
Exemple de lien avec options <a href="presentation.php" target="_blank" class="special">
  Qui sommes-nous ?
</a>
Qui sommes-nous ?

Les liens absolus

  • URL complète
  • Ne pas oublier le protocole http://
  • Principalement pour pointer vers l’extérieur

<a href="http://www.univ-lyon2.fr">Site de Lyon 2</a>

Les liens relatifs

  • Chemin pour aller de la page courante vers la cible
  • Dépend de l’organisation des fichiers
  • Déplacer un fichier brise le lien

<a href="page.html">Page</a>

Naviguer dans l’arborescence ?

  • Entrer dans un dossier
    nom_dossier/
  • Sortir d’un dossier
    ../

Lien relatif vers la page A depuis la page index : <a href="partA/pageA.html">Page A</a>

Lien relatif vers index depuis la page A : <a href="../index.html">Page A</a>

Lien de messagerie

  • Nécessite un client de messagerie
  • Laisser le courriel visible
  • Possibilités de sécuriser l’adresse

Exemple de liens de messagerie

        <!-- Exemple de lien de messagerie-->
        <a href="mailto:contact@site.com">Écrivez-nous</a>

        <!-- Exemple avec plusieurs destinataires -->
        <a href="mailto:contact@site.com,support@site.com">Écrivez-nous</a>

        <!-- Exemple avec option-->
        <a href="mailto:contact@site.com?subject=Demande Info">Écrivez-nous</a>
        

Les ancres nommées

        <!-- Exemple d'ancre nommée -->
        <a href="#ancre">Afficher le paragraphe</a>
        <!-- Élément à afficher -->
        <p id="ancre">
            Texte
        </p>
        

Exemple d’ancre classique : ¶ Retourner en haut de la page

Lien vers un fichier ???

  • Lien vers un fichier HTML, il s’affiche….
  • Lien vers un autre type de fichier ?
    • Vers un fichier reconnu par le navigateur ?
    • Vers un fichier non-reconnu par le navigateur ?
  • Nivagateur lit une multitude de fichiers différents

Précisions sur la cible

  • Différencier les liens sortants
  • Si le fichier cible du lien n’et pas .html, préciser le format et le poids du fichier
    • Catalogue (pdf-1,2Mo)
    • Document (doc-35Ko)
  • Il peut être utile de spécifier la langue de la cible
    • Directement dans l’intitulé du lien
    • Attribut « hreflang » de la balise « a »
    • <a href="http://www.w3schools.com" hreflang="en">Le site du W3Schools</a>

Intitulés des liens

  • Les intitulés des liens doivent être pertinents et compréhensibles hors du contexte
  • Exemple :
    • <a href="colloque.html">En savoir plus</a>
    • Faible valeur informative
  • Exemple pertinent :
    • Cliquez ici pour plus d'informations concernant le <a href="colloque.html">colloque sur l'accessibilité numérique en Europe</a>
  • Limitez le nombre de caractères du lien à 80 caractères (7 – 8 mots en moyenne)
  • N’utilisez pas sur la même page le même intitulé pour les liens différents
    • <a href="somme.html">En savoir plus</a>
    • <a href="difference.html">En savoir plus</a>
  • N’utilisez pas des intitulés différents pour la même cible

Nombre de liens par page

  • Le nombre de liens dépend de la nature du site
  • Certains auteurs conseillent un maximum de 20 hyperliens sur la page d’accueil et 5 intégrés au contenu
  • D’autres estiment qu’un maximum de 50 liens reste confortable
  • Google (pour des raisons de référencement) recommande de ne pas dépasser 100 liens par page

Paramètres des liens

  • href : adresse du lien
  • target : _blank || _self (défaut)
  • title : information complémentaire sur le lien
  • download : nom_fichier (html5 peu fiable)

Que se passe t’il si l’on clique sur les liens suivants ?

  1. Cliquer ici <a href="image.png">Cliquer ici</a>
  2. Cliquer ici <a href="app.exe">Cliquer ici</a>
  3. Cliquer ici <a href="#chapitre3">Cliquer ici</a>
  4. Cliquer ici <a href="doc.pdf">Cliquer ici</a>
  5. Cliquer ici <a href="google.fr">Cliquer ici</a>

Exemple d’une page web dynamique

Page web dynamique

Les images

La balise <img />

  • La balise <img /> (pour « Image ») permet d’insérer une image
    • <img src="ballon.jpg" />
  • Source (src)
    • même syntaxe que pour un lien
    • chemin d’accès vers l’image
    • image locale ou distante

Dimensions des images

  • En HTML ou en CSS
    • width / height
    • Une seule dimension pour conserver ratio
  • Favoriser les images en taille réelle

L’attribut alt

  • Commentaire sur le contenu de l’image
  • À ajouter à toutes les balises <img />
  • Doit être le plus informatif possible (évitez « photo » ou « graphique »)
  • Ne dépassez pas 60 caractères (10 – 12 mots)
  • Présentez le contenu ET la fonction des images utilisées
    <img src="ballon.jpg" alt="Mongolfière dessinée en vectoriel pour illustré l'exemple" />

L’attribut longdesc

  • Description longues pour les balises img
  • N’a aucune influence visuelle dans les pages web
  • Conçu pour accroitre l’accessibilité des images : perceptible seulement par les aides techniques (lecteurs d’écran)
  • Comporte un line vers une page HTML contenant une description détaillée de l’image
  • Améliore le référencement dans les moteurs de recherche

Exemples

<!-- Exemple image distante-->
<img src="http://www.site.fr/images/image.jpg" />

<!-- Exemple image stockée sur l'hébergeur -->
<img src="images/image.jpg" />

<!-- Exemple image avec options -->
<img src="images/logo.jpg" title="Logo du site" width="150" height="150" />

<!-- Exemple image avec description complète -->
<img src="poles.jpg" alt="Diminution de la surface de la calotte polaire de 1997 à 2003." longdesc="desc.html" />

Autre médias

Média audio

HTML 5 fournis une manière rapide et simple d’ajouter des fichiers audio sur une page web avec l’élément HTML <audio></audio> (pour « Audio file »). Comme pour l’image <img /> l’élément <audio> accepte une URL source dans l’attribut src. Contrairement à l’image <img /> l’élément <audio> à besoin d’une balise d’ouverture et une balise de fermeture.

<audio src="jazz.ogg"></audio>

Attributs

D’autres attributs que src peuvent accompagner l’élément <audio> :

  • autoplay
    • Par défaut l’élément <audio> n’est pas affiché sur la page.
    • Si l’attribut autoplay est spécifié dans l’élément <audio> rien n’apparaitra sur la page web mais le fichier audio sera jouer automatiquement.
    • <audio src="jazz.ogg" autoplay></audio>
  • controls
    • Pour afficher l’élément <audio> sur la page l’attribut controls est nécessaire.
    • Quand il est spécifié l’attribut controls va afficher les contrôles audio par défaut du navigateur web, incluant lecture, pause, barre de recherche et contrôles du volume.
    • <audio src="jazz.ogg" controls></audio>
  • loop
    • Permet de jouer le fichier audio en boucle du début à la fin.
    • <audio src="jazz.ogg" loop></audio>
  • preload
    • Permet d’identifier, si il y en a, les informations du fichier audio qui devraient être chargées avant que le morceau soit joué.
    • Il accepte les valeurs none, auto et metadata.
    • <audio src="jazz.ogg" preload="metadata"></audio>

Média vidéo

Ajouter une vidéo à une page web et très similaire à ajouter un fichier audio. On utilise l’élément HTML <video> (pour « Video file »)

<video src="earth.ogv" controls></video>

Exemple d’une video

Iframe

L’élément <iframe> (pour « Inline frame ») permet d’intégrer et afficher une page web à l’intérieur d’une autre page web.

<iframe src="https://www.google.com/maps/embed?..."></iframe>

Exemple d’une iframe

Figure & Captions

Figure

L’élément <figure> (pour « Figure ») est un block qui spécifie son propre contenu en tant que média.

<figure>
<img src="chien.jpg" alt="Un chien qui porte un chapeau">
</figure>

Figcaption

L’élément <figcaption> (pour « Figure caption ») améliore la sémantique autour d’un média, par exemple pour afficher une légende sous une image.

<figure>
<img src="chien.jpg">
<figcaption>Un chien qui porte un chapeau.</figcaption>
</figure>

Catégories
Apprendre le HTML

Introduction au HTML

Introduction au HTML

Le HTML est le langage de base du web. C’est un langage de description qui permet de structurer une page web.

Comment s’affiche une page web ?

Avant de rentrer dans le détail du langage HTML voici une petite explication pour comprendre comment s’affiche une page web.

Le « client » envoi une requête au « serveur »

Le « client » représente la machine connecté au réseau qui envoie une demande de page web.
Exemple : Vous tapez http://webcreateur.net dans la barre de recherche de Firefox.

Le « serveur » renvoi une réponse au « client »

Le « serveur » renvoi la page web en réponse à la demande.
Exemple : Affichage de la page d’accueil de http://webcreateur.net

Comment créer une page web ?

Pour créer une page web il faut créer un fichier au format HTML. Les fichiers HTML possèdent l’extension suivante : « .html ».
Puis il faut déposer cette page web sur un serveur.

Principe de balise

Vous aller souvent voir le mot « balise » dans les paragraphes suivants.
Le concept de balise est primordial en HTML.
Une balise représente un nouvel élément à afficher. Cela peut être un élément texte, un tableau, un média ou une méta-données.
Le principe est le suivant:

  • On ouvre une balise <balise>
  • On écrit le contenu
  • On ferme la balise </balise>

Exemple pour afficher un texte sous forme de paragraphe:

<p>Ceci est un paragraphe.</p>

Commentaire

Au fur et à mesure que vous allez écrire du code vous aurez surement besoin de mettre des commentaires pour vous repérer.
En HTML les commentaires se présente sous la forme suivante :

<!-- Ceci est un commentaire -->

Structure d’une page web

Le DOCTYPE

La première ligne d’un fichier HTML est toujours le « doctype ». Cette ligne sert d’instruction au navigateur web qui va afficher la page pour indiquer que le code qui va suivre est au format HTML.
Cette ligne se présente comme suit:

<!DOCTYPE html>

La balise mère

La deuxième ligne d’un fichier HTML est toujours la « balise mère ». Egalement appelée la balise « racine » c’est la balise qui va contenir toutes les autres.
Cette balise se présente comme suit:

<!DOCTYPE html>
<html>
Contenu de ma page web
<html>

L’en-tête de la page

Un fichier HTML comporte deux parties principales : l’en-tête et le corps.
L’en-tête sert à renseigner des méta-données interprétées par le navigateur web. Ces données ne sont pas affichées dans le navigateur.
L’en-tête HTML s’insert avec la balise <head>

Les métadonnées sont des données (informations) sur les données.

La balise <meta> fournit des métadonnées sur le document HTML. Les métadonnées ne seront pas affichées sur la page, mais seront analysables par le navigateur web.

Les méta-éléments sont généralement utilisés pour spécifier la description de la page, les mots-clés, l’auteur du document, la dernière modification et d’autres métadonnées.

Les métadonnées peuvent être utilisées par les navigateurs (comment afficher du contenu ou recharger une page), des moteurs de recherche (mots-clés) ou d’autres services Web.

HTML5 a introduit une méthode permettant aux concepteurs Web de contrôler la fenêtre d’affichage (la zone visible de l’utilisateur d’une page Web), via la balise <meta>.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="description" content="Apprendre le HTML">
    <meta name="keywords" content="HTML,CSS,XML,JavaScript">
    <meta name="author" content="John Snow">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
<html>

Le corps de la page

Le corps de la page web contient tout ce qui va s’afficher dans le navigateur.
Le corps se déclare avec la balise <body>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="description" content="Apprendre le HTML">
    <meta name="keywords" content="HTML,CSS,XML,JavaScript">
    <meta name="author" content="John Snow">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <p>Mon premier paragraphe</p>
  </body>
<html>

Les éléments HTML

Maintenant que vous savez comment créer une structure de page web voyons quelques éléments nous pouvons mettre à l’intérieur.