| Contenus | Capacités attendues | Commentaires |
|---|---|---|
Modalités de l’interaction entre l’homme et la machine Événements |
Identifier les différents composants graphiques permettant d’interagir avec une application Web Identifier les événements que les fonctions associées aux différents composants graphiques sont capables de traiter |
Il s’agit d’examiner le code HTML d’une page comprenant des composants graphiques et de distinguer ce qui relève de la description des composants graphiques en HTML de leur comportement (réaction aux événements) programmé par exemple en JavaScript. |
Dans ce chapitre nous allons approfondir nos connaissances sur le langage html déjà étudié en seconde. Pour rappel, le W3C a défini deux langages afin de bien séparer le fond et la forme. Le html vu dans ce chapitre décrit le contenu du document: le fond et le css que l’on étudiera dans le prochain chapitre décrit sa forme.
Le html est un langage qui utilise des balises entre chevrons(<balise>) pour structurer les pages web et leur donner un sens.
html<!doctype html>, <head> et <body>Une page html commence toujours par indiquer le doctype. Depuis html5 c’est très simple:
<!doctype html>
C’est quand même mieux que son ancêtre en html4:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Le document est séparé en deux grandes parties:
head: qui contient des informations utiles au navigateur et aux robots qui consultent votre page.body: qui contient les informations qui seront effectivement affichées à l’écran.Voici une structure qui peut vous servir quand vous commencez une nouvelle page web.
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>Un document minuscule</title>
</head>
<body>
<h1>Titre principal de mon document</h1>
<!-- Ceci est un commentaire -->
<p>
Regarde maman, je suis en train de coder en
<abbr title="Hyper Text Markup Language" lang="en">HTML</abbr> !
</p>
</body>
</html>
Le langage html utilise des balises pour indiquer le sens sémantique des éléments d’une page. Ces balises permettent de construire une hiérarchie au sein du document appelée DOM(Document Object Model).
Toutes les balises sont référencées sur le site MDN, en voici quelques-unes.
| balise | rôle | exemple |
|---|---|---|
<h1>, <h2>, …<h6> |
Titres et sous-titres | <h1>Titre principal de mon document</h1> |
<p> |
Paragraphe | <p>Comme je descendais des Fleuves impassibles.</p> |
<strong> |
texte important(en gras par défaut) | <p>Comme je <strong>descendais</strong> des Fleuves impassibles.</p> |
<em> |
texte en emphase(en italique par défaut) | <p>Comme je <em>descendais</em> des Fleuves impassibles.</p> |
<a href="dest"> |
Lien vers la page d’URL dest |
<a href="https://www.wikipedia.fr/">Se rendre sur Wikipedia</a> |
<img src="image.png"/> |
Affichage de l’image d’URI image.png |
<img src="photo.jpg" alt="Photo de mon chat"/> |
|
liste à puce élément d’une liste |
<ul>
<li>1er élément de la liste</li>
<li>2e élément de la liste</li>
<li>3e ...</li>
</ul>
|
Lorsqu’une <balise> est ouverte, elle doit être fermée </balise>.
Seul le texte écrit entre les balises ouvrante et fermante s’affiche à l’écran.
Le code <p>Ceci est un paragraphe.</p>html affichera:
Ceci est un paragraphe.
Les balises ouvrantes et fermantes doivent toujours être correctement imbriquées, c’est-à-dire que les balises fermantes doivent être écrites dans l’ordre inverse des balises d’ouverture.MDN
Voici un exemple de code valide :
<em>Ceci est <strong>très</strong> important</em>.
Voici un exemple de code non-valide :
<em>Ceci est <strong>très</em> important</strong>.
Les attributs d’un élément, permettent de modifier son comportement ou de fournir des métadonnées.
L’attribut lang.
<p>This paragraph is English, but the language is not specifically defined.</p>
<p lang="en-GB">This paragraph is defined as British English.</p>
<p lang="fr">Ce paragraphe est défini en français.</p>
Les attributs class et id sont parmi les plus utilisés, on les verra dans les prochains chapitres car ils sont utiles à la mise en forme csset les interactions avec javascript.
<a id="special" class="important">Ce lien a l'air important.</p>
Certaines balises ne contiennent pas de texte, elles n’ont donc pas de balises fermantes.
On les appelle des balises orphelines. Elles ont une syntaxe particulière: <balise/>.
Par exemple la balise d’image <img />.
<img src="logo.png" alt="Logo du site" />
:::
La balise <img /> possède deux attributs obligatoires:
src pour préciser l’adresse de l’image à afficheralt pour expliquer le contenu de l’image si l’image ne s’affiche pas ou pour décrire l’image aux personnes non-voyantes.<!-- Ceci est un commentaire --><div>, <header>, <article>, <footer> ont été créé dans la version 5 de html afin de créer des blocs spécifiques dans la page.