Introduction à HTML

Tour d’horizon

Page Web

  • Un document [1]

  • Consulté avec un navigateur Web

  • Identifié par une adresse Web unique

1. Wikipedia - Page Web

La trinité

html base trinite
Figure 1. La trinité HTML, CSS, Javascript

Analogie

Si on voulait faire une voiture

  • Assembler des pièces

    • Le code HTML

  • La peindre et la rendre jolie

    • Le code CSS

  • La faire rouler, un moteur

    • Le code Javascript

HTML

Carte concept

  • Le contenu

  • Texte

  • Images

  • Champs de formulaires

CSS

Carte concept

  • Le Design (apparence)

  • Rendre joli

  • Mettre en page

Javascript

Carte concept

  • Les fonctionnalités dynamiques

  • Communiquer avec une base de données

  • Faire des paiements

Pourquoi séparer ?

Carte concept
Pourquoi séparer ?

  • Facilite la gestion du code et sa compréhension

  • Travail d’équipe et séparation des rôles

  • Performance

Souvent, une séparation pas si nette…​

Et c’est Okay.

Amélioration progressive

Carte concept

Le coeur du contenu en priorité.

Puis, ajouter progressivement les couches d’apparence et de fonctionnalité

Une expérience utilisateur de base

Stabilité a travers tous les navigateurs

Principes d’amélioration progressive

  • Le contenu de base doit être accessible à tous les navigateurs Web

  • Les fonctionnalités de base doivent être accessibles à tous les navigateurs Web

  • Un balisage sémantique clairsemé contient tout le contenu

  • La mise en page améliorée est fournie par CSS lié en externe

  • Un comportement amélioré est fourni par JavaScript discret et lié en externe

  • Les préférences du navigateur Web de l’utilisateur final sont respectées

Échafaudage d’une page HTML (boilerplate)

Carte concept
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset='utf-8'>
    <title>Une première page Web!</title>
    <meta name="description"
          content="La structure minimale d'une page Web en HTML">
</head>

<body>
<main>
    <h1>Une première page web sur internet!</h1>
    <p> Cette page web simplifiée contient le minimum nécessaire. </p>
</main>
</body>

</html>
html base html minimum rendu

<!DOCTYPE html>

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset='utf-8'>
    <title>Une première page Web!</title>
    <meta name="description"
          content="La structure minimale d'une page Web en HTML">
</head>

<body>
<main>
    <h1>Une première page web sur internet!</h1>
    <p> Cette page web simplifiée contient le minimum nécessaire. </p>
</main>
</body>

</html>

  • Première ligne du document

  • Version de HTML

  • Autrefois utile pour gérer comportement de navigateurs différents

Toujours utiliser <!DOCTYPE html> (HTML5)

<html> - Elément racine du document

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset='utf-8'>
    <title>Une première page Web!</title>
    <meta name="description"
          content="La structure minimale d'une page Web en HTML">
</head>

<body>
<main>
    <h1>Une première page web sur internet!</h1>
    <p> Cette page web simplifiée contient le minimum nécessaire. </p>
</main>
</body>

</html>

  • <html> : un seul par document

  • Attribut lang [1]

    • Utile pour les technologies d’assistance

    • Utile pour le référencement naturel (SEO)

Démo : Contenu en français et attribut lang en anglais [2]

1. Utiliser un identifiant de langue
2. Tester dans un iphone

<head> - Conteneur de métadonnées

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset='utf-8'>
    <title>Une première page Web!</title>
    <meta name="description"
          content="La structure minimale d'une page Web en HTML">
</head>

<body>
<main>
    <h1>Une première page web sur internet!</h1>
    <p> Cette page web simplifiée contient le minimum nécessaire. </p>
</main>
</body>

</html>

  • Tout ce qui n’est pas du contenu

  • Informations utilisées par des machines

  • Un seul par document

<meta charset> - Jeu de caractères

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset='utf-8'>
    <title>Une première page Web!</title>
    <meta name="description"
          content="La structure minimale d'une page Web en HTML">
</head>

<body>
<main>
    <h1>Une première page web sur internet!</h1>
    <p> Cette page web simplifiée contient le minimum nécessaire. </p>
</main>
</body>

</html>
<meta charset> [1]

Détermine l’encodage de caractères.

Toujours utiliser <meta charset="utf-8"> et doit apparaitre dans les 1024 premiers octets du document
1. MDN - Référence : meta charset

<title> - Titre du document

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset='utf-8'>
    <title>Une première page Web!</title>
    <meta name="description"
          content="La structure minimale d'une page Web en HTML">
</head>

<body>
<main>
    <h1>Une première page web sur internet!</h1>
    <p> Cette page web simplifiée contient le minimum nécessaire. </p>
</main>
</body>

</html>
<title>

Elément titre du document[1]

  • dans la barre d’onglets

  • en favoris

  • pour les moteurs de recherche (SEO)

1. https://developer.mozilla.org/fr/docs/Web/HTML/Reference/Elements/title

Métadonnée description

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset='utf-8'>
    <title>Une première page Web!</title>
    <meta name="description"
          content="La structure minimale d'une page Web en HTML">
</head>

<body>
<main>
    <h1>Une première page web sur internet!</h1>
    <p> Cette page web simplifiée contient le minimum nécessaire. </p>
</main>
</body>

</html>

Utile pour les moteurs de recherche (SEO) [1]

1. Google - Comment rédiger vos meta description

Autres contenus

  • Feuilles de style (interne ou externe)

  • Script (Javascript)

  • Favicon (icône de favoris)

<body> - Corps du document

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset='utf-8'>
    <title>Une première page Web!</title>
    <meta name="description"
          content="La structure minimale d'une page Web en HTML">
</head>

<body>
<main>
    <h1>Une première page web sur internet!</h1>
    <p> Cette page web simplifiée contient le minimum nécessaire. </p>
</main>
</body>

</html>

  • Le contenu visible

  • Un seul par page

HTML en bref

HyperText Markup Language [1] [2]

  • Langage de balisage fondation du Web

  • Eléments (balises)

  • Structurer et apporter de la sémantique à du texte

  • Peut être augmenté progressivement

    • en style visuel avec CSS

    • en interactivité avec Javascript

<p>
    HTML est un <em>langage</em>
    permettant de <em>structurer</em>
    et apporter de la sémantique à du texte.
</p>
1. MDN - Apprendre : Syntaxe HTML de base
2. Specification HTML : version pour les devs