Examen blanc et fiche mémo — Cours HTML5

Examen blanc et fiche mémo — Cours HTML5 | Med Learning

Leçon 1

L'examen blanc

Tableau: Le barème

Partie	Contenu	Points	Chapitres
A	questions à choix multiples	10	1 à 11
B	questions de cours	6	2, 5, 8, 10
C	code à corriger	6	2, 6, 7, 10
D	production d'une page	18	tous
	Total	40

Leçon 2

Fiche mémo : toutes les balises de la formation

Balise	Rôle	Chapitre
`<!DOCTYPE html>`	déclare le HTML5	2
`<html lang="fr">`	racine, langue	2
`<head>` · `<body>`	métadonnées · contenu visible	2
`<meta charset>` · `<meta name="viewport">`	encodage · mobile

Travaux pratiques

Partie D · Production (18 points)

Exercices

Exercice 13.1

Partie A · Questions à choix multiples (10 points)

1Quel attribut est obligatoire sur toutes les images ?
2La première ligne d'une page HTML5 est…
3Quelle balise donne le plus d'importance à un texte ?
4Pour aller du fichier blog/a.html au fichier index.html à la racine :
5Quelle balise ne peut apparaître qu'une fois par page ?
6Dans un tableau, rowspan="2" fusionne…
7Quel type d'input affiche un clavier numérique sur mobile pour un numéro ?
8Un champ sans attribut name…
9Un contenu autonome comme un article de blog se balise avec…
10Pour charger un script sans bloquer l'affichage :

0/10 répondues

Exercice 13.2

Partie B · Questions de cours (6 points)

L'essentiel du chapitre

À retenir

On choisit une balise pour son sens, jamais pour son apparence.
Une page professionnelle est valide (W3C), sémantique et accessible (Lighthouse, clavier).
Le HTML structure, le CSS met en forme : la suite logique est la formation CSS, où tu mettras en forme ton CV du chapitre 12.

Balise	Rôle	Chapitre
`<h1>` … `<h6>`	titres hiérarchiques	3
`<p>` · `<br>` · `<hr>`	paragraphe · retour à la ligne · séparation	3
`<strong>` · `<em>` · `<mark>` · `<small>`	important · insistance · surligné · petits caractères	3
`<del>` · `<ins>` · `<sub>` · `<sup>`	supprimé · ajouté · indice · exposant	3
`<blockquote>` · `<q>` · `<cite>` · `<abbr>`	citations · titre d'œuvre · abréviation	3
`<code>` · `<pre>` · `<kbd>`	code · préformaté · touche	3

Balise	Rôle	Chapitre
`<ul>` · `<ol>` · `<li>`	liste non ordonnée · ordonnée · élément	4
`<dl>` · `<dt>` · `<dd>`	liste de descriptions · terme · description	4
`<a href>`	lien (`#ancre`, `mailto:`, `tel:`, `download`)	5
`<img src alt width height>`	image	6
`<figure>` · `<figcaption>`	illustration légendée	6
`<picture>` · `<source>`	images responsives, formats	6
`<video>` · `<audio>` · `<track>`	vidéo · son · sous-titres	6
`<iframe title>`	contenu externe (YouTube, carte)	6

Balise	Rôle	Chapitre
`<div>` · `<span>`	boîte de bloc · boîte en ligne, sans sens	7
`<header>` · `<footer>`	en-tête · pied (de la page ou d'un article)	8
`<nav>` · `<main>` · `<aside>`	navigation · contenu principal (un seul) · complément	8
`<section>` · `<article>`	thème avec titre · contenu autonome	8
`<time datetime>` · `<address>`	date · coordonnées	8
`<details>` · `<summary>`	bloc dépliable	8

Balise	Rôle	Chapitre
`<table>` · `<caption>`	tableau · titre	9
`<thead>` · `<tbody>` · `<tfoot>`	en-tête · corps · pied	9
`<tr>` · `<th scope>` · `<td>`	ligne · cellule d'en-tête · cellule	9
`colspan` · `rowspan`	fusion de colonnes · de lignes	9
`<form action method>`	formulaire	10
`<label for>` · `<input type name>`	libellé · champ	10
`<select>` · `<option>` · `<optgroup>`	liste déroulante	10
`<textarea>` · `<button type>`	texte long · bouton	10
`<fieldset>` · `<legend>`	groupe de champs · titre du groupe	10
`required` · `minlength` · `min`/`max` · `pattern`	validation native	10

Ce code contient six erreurs (une par ligne marquée). Pour chacune, explique l'erreur et donne la correction.

html

<head><title>Boutique</title></head>              <!-- 1 -->
<p>Promo : <strong>-30 %</p></strong>             <!-- 2 -->
<img src="Photo Produit.JPG">                     <!-- 3 -->
<p>Nos tailles : <ul><li>S</li><li>M</li></ul></p> <!-- 4 -->
<input type="radio" name="t1"> <input type="radio" name="t2"> <!-- 5 -->
<label>E-mail</label><input type="email" id="mail"> <!-- 6 -->