HTML & CSS Handout · ⁨Feuille de travail HTML & CSS⁩

EN · ⁨FR⁩ 中文 Español 中文 Español Français Português 한국어 日本語 Tiếng Việt ไทย Bahasa Indonesia עברית العربية Русский

Download reference · ⁨Télécharger la référence⁩ 2-up · ⁨2 pages par feuille⁩

1 HTML basics · ⁨Bases du HTML⁩
reference.pdf.fr 2-up · ⁨2 pages par feuille⁩
1.1
Ta première page

English
HTML 超文本标记语言 describes a web page with tags 标签. A tag is a word in angle brackets, like <p>. Most come in pairs — an opening tag <p> and a closing tag </p> wrap some content. A tag plus its content is an element 元素.

The browser draws whatever is between the tags.

A tag you forget to close, or spell wrong, may not show correctly.

Français
HTML (HyperText Markup Language) décrit une page web avec des balises 标签. Une balise est un mot entre crochets angulaires, comme <p>. La plupart viennent par paires — une balise d'ouverture <p> et une balise de fermeture </p> entourent du contenu. Une balise plus son contenu forme un élément 元素.

<p>Hello, world!</p> <p>This is my first web page.</p>

Le navigateur affiche tout ce qui se trouve entre les balises.

Une balise oubliée ou mal orthographiée peut ne pas s'afficher correctement.

Un élément = balise d'ouverture + contenu + balise de fermeture
1.2
Titres & paragraphes

English
Headings 标题 run from <h1> (biggest) down to <h6> (smallest). A paragraph 段落 is <p>. Use exactly one <h1> for the page's main title.

Français
Les titres 标题 vont de <h1> (le plus grand) à <h6> (le plus petit). Un paragraphe 段落 est <p>. Utilisez exactement un <h1> pour le titre principal de la page.

<h1>My Blog</h1> <h2>About me</h2> <p>I am learning to build web pages.</p>
1.3
Mise en forme du texte

English
Make text bold 加粗 with <strong> and italic 斜体 with <em>. A line break 换行 is <br> — it has no closing tag.

Common mistakes

Most tags come in pairs — <p>...</p>. Forgetting the closing tag breaks the layout below it.

The tag goes in angle brackets; the text you see goes between the opening and closing tags.

Headings run <h1> (biggest) to <h6> — do not pick a heading just for its size.

Français
Rendez le texte gras 加粗 avec <strong> et italique 斜体 avec <em>. Un saut de ligne 换行 est <br> — il n'a pas de balise de fermeture.

<p><strong>Warning:</strong> read this carefully.</p> <p>First line<br>second line</p> <p>You can <em>emphasise</em> any word.</p>

Erreurs courantes

La plupart des balises viennent par paires — <p>...</p>. Oublier la balise de fermeture casse la mise en page ci-dessous.

La balise va entre crochets angulaires ; le texte affiché se trouve entre les balises d'ouverture et de fermeture.

Les titres vont de <h1> (le plus grand) à <h6> — ne choisissez pas un titre uniquement pour sa taille.
2 Lists, links & images · ⁨Listes, liens & images⁩
reference.pdf.fr 2-up · ⁨2 pages par feuille⁩
2.1
Listes

English
An unordered list 无序列表 <ul> shows bullets; an ordered list 有序列表 <ol> shows numbers. Each list item 列表项 is an <li>.

Français
Une liste non ordonnée 无序列表 <ul> montre des puces ; une liste ordonnée 有序列表 <ol> montre des numéros. Chaque élément de liste 列表项 est un <li>.

<ul> <li>Apples</li> <li>Oranges</li> </ul> <ol> <li>Wake up</li> <li>Go to school</li> </ol>

ul pour les puces, ol pour les numéros ; chaque élément est li
2.2
Liens

English
A link 链接 is an anchor <a>. Its href attribute 属性 holds the address it points to.

Add target="_blank" to open the link in a new tab.

Français
Un lien 链接 est une ancre <a>. Son attribut 属性 href contient l'adresse vers laquelle il renvoie.

<a href="https://example.com">Visit Example</a> <br> <a href="page2.html">Go to the next page</a>

Ajoutez target="_blank" pour ouvrir le lien dans un nouvel onglet.
2.3
Images

English
An image 图片 is <img> — it has no closing tag. src is the picture's address; alt is text shown if the image cannot load (and read aloud to blind users).

Common mistakes

An image needs src (the file) and alt (a description); a link needs href.

<img> has no separate closing tag.

A broken src path shows nothing — check the file name and folder.

Français
Une image 图片 est <img> — elle n'a pas de balise de fermeture. src est l'adresse de l'image ; alt est le texte affiché si l'image ne peut pas se charger (et lu à haute voix pour les utilisateurs aveugles).

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/Bitmap_VS_SVG.svg/120px-Bitmap_VS_SVG.svg.png" alt="bitmap versus vector" width="120"> <p>If the picture is missing, the alt text shows instead.</p>

Erreurs courantes

Une image nécessite src (le fichier) et alt (une description) ; un lien nécessite href.

<img> n'a pas de balise de fermeture séparée.

Un chemin src cassé n'affiche rien — vérifiez le nom du fichier et le dossier.
3 Page structure · ⁨Structure de page⁩
reference.pdf.fr 2-up · ⁨2 pages par feuille⁩
3.1
Une page complète

English
A real page has a fixed skeleton 骨架. <!DOCTYPE html> says it is HTML5. Everything sits inside <html>. The <head> holds information about the page; the <body> holds what you see.

The <title> shows in the browser tab.

<meta charset="utf-8"> lets the page show any language.

Français
Une vraie page possède une structure fixe 骨架. <!DOCTYPE html> indique qu'il s'agit d'HTML5. Tout se trouve à l'intérieur <html>. Le <head> contient des informations sur la page ; le <body> contient ce que vous voyez.

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>My Page</title> </head> <body> <h1>Welcome</h1> <p>This is a complete page.</p> </body> </html>

Une page est un arbre : le head décrit la page, le body contient ce que vous voyez

Le <title> s'affiche dans l'onglet du navigateur.

<meta charset="utf-8"> permet à la page d'afficher n'importe quelle langue.
3.2
Commentaires & imbriquation

English
A comment 注释  is a note the browser ignores. Tags nest 嵌套 inside one another; indent 缩进 each level so the structure stays clear. Close tags in the reverse order you opened them.

Common mistakes

Tags must nest, not overlap: <b><i>text</i></b>, never <b><i>text</b></i>.

A page needs <html>, a <head> (for the title and links) and a <body> (for what you see).

A comment is ; the browser ignores it.

Français
Un commentaire 注释  est une note que le navigateur ignore. Les balises s'imbriquent 嵌套 les unes dans les autres ; indentez 缩进 chaque niveau pour que la structure reste claire. Fermez les balises dans l'ordre inverse de celui dans lequel vous les avez ouvertes.

 <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> </ul> </nav>

Erreurs courantes

Les balises doivent s'emboîter, pas se chevaucher : <b><i>text</i></b>, jamais <b><i>text</b></i>.

Une page nécessite <html>, un <head> (pour le titre et les liens) et un <body> (pour ce que vous voyez).

Un commentaire est  ; le navigateur l'ignore.
4 Tables & forms · ⁨Tableaux & formulaires⁩
reference.pdf.fr 2-up · ⁨2 pages par feuille⁩
4.1
Tableaux

English
A table 表格 <table> is built from rows <tr>. A header cell 单元格 is <th> (bold, centred); a normal data cell is <td>.

Français
Un tableau 表格 <table> est construit à partir de lignes <tr>. Une cellule d'en-tête 单元格 est <th> (gras, centré) ; une cellule de données normale est <td>.

<table border="1" cellpadding="6"> <tr><th>Name</th><th>Score</th></tr> <tr><td>Mei</td><td>88</td></tr> <tr><td>Sam</td><td>71</td></tr> </table>

table → tr lignes → th/td cellules
4.2
Formulaires

English
A form 表单 <form> collects input from the user. An <input> is a box; a <label> names it; a <button> submits 提交 it.

Common <input> type values: text, number, email, password, checkbox.

Common mistakes

Table cells go inside rows: a <tr> holds the <td> cells.

Every form input should have a matching <label> so it is clear and accessible.

A button inside a form submits it by default — set type="button" if you do not want that.

Français
Un formulaire 表单 <form> recueille les saisies de l'utilisateur. Un <input> est une zone ; un <label> lui donne un nom ; un <button> soumet 提交 le formulaire.

<form> <label>Name: <input type="text"></label> <br><br> <label>Age: <input type="number"></label> <br><br> <button type="submit">Send</button> </form>

Valeurs courantes de <input> type : text, number, email, password, checkbox.

Erreurs courantes

Les cellules de tableau vont dans les lignes : un <tr> contient les cellules <td>.

Chaque champ de formulaire doit avoir un <label> correspondant pour être clair et accessible.

Un bouton dans un formulaire le soumet par défaut ; définissez type="button" si vous ne souhaitez pas cela.
5 Boxes & sections · ⁨Boîtes & sections⁩
reference.pdf.fr 2-up · ⁨2 pages par feuille⁩
5.1
div, span & sections sémantiques

English
A <div> is a generic block 块级 box that groups content on its own lines. A <span> is a generic inline 行内 box inside a line of text. You use them to group things so you can style or position them.

Semantic 语义 tags describe their role, which helps screen readers and search engines. Prefer them over plain <div> where they fit: <header>, <nav>, <main>, <section>, <article>, <footer>.

Common mistakes

<div> is a block (starts a new line); <span> is inline (stays in the text).

Use semantic tags like <header>, <nav> and <footer> where they fit, not <div> for everything.

Do not use a tag just for its default look — style it with CSS instead.

Français
Un <div> est une boîte de bloc générique qui regroupe le contenu sur ses propres lignes. Un <span> est une boîte inline générique à l'intérieur d'une ligne de texte. Vous les utilisez pour regrouper des éléments afin de les styliser ou les positionner.

<div> <span>Price:</span> <span>$9.99</span> </div> <div> <span>Stock:</span> <span>in stock</span> </div>

Les tags sémantiques décrivent leur rôle, ce qui aide les lecteurs d'écran et les moteurs de recherche. Préférez-les aux simples <div> lorsqu'ils conviennent : <header>, <nav>, <main>, <section>, <article>, <footer>.

<header><h1>My Site</h1></header> <main> <section> <h2>News</h2> <p>Today we launched the site.</p> </section> </main> <footer>© 2026 My Site</footer>

Erreurs courantes

<div> est un bloc (commence une nouvelle ligne) ; <span> est inline (reste dans le texte).

Utilisez des tags sémantiques comme <header>, <nav> et <footer> là où ils conviennent, pas <div> pour tout.

N'utilisez pas une balise uniquement pour son aspect par défaut ; stylisez-la avec CSS à la place.

div est une boîte bloc ; span enveloppe le texte en ligne

6 CSS basics · ⁨Bases du CSS⁩

reference.pdf.fr 2-up · ⁨2 pages par feuille⁩

6.1

Ajout de CSS

English

CSS 层叠样式表 styles HTML. The simplest way is a <style> block in the <head> (a bigger site uses a separate .css file with <link>). A CSS rule 规则 has a selector 选择器, then { property: value; } pairs called declarations 声明.

Français

CSS (Cascading Style Sheets) style HTML. La méthode la plus simple est un bloc <style> dans le <head> (un site plus volumineux utilise un fichier .css séparé avec <link>). Une règle CSS a un sélecteur, puis des paires { property: value; } appelées déclarations.

<style>
  p  { color: blue; font-size: 18px; }
  h1 { color: darkred; }
</style>
<h1>Styled heading</h1>
<p>This paragraph is blue.</p>

Link a stylesheet so CSS rules style HTML elements

6.2

Sélecteurs : class & id

English

A class 类 styles many elements: add class="..." in HTML and write .name in CSS. An id 标识符 styles ONE element: id="..." and #name.

The selectors you will meet most, in one place:

Selector	Chooses
`p`	every `<p>` element
`.note`	everything with `class="note"`
`#title`	the one element with `id="title"`
`h1, h2`	several selectors at once
`nav a`	every `<a>` inside a `<nav>`
`.btn:hover`	one state of an element (see topic 10)

Common mistakes

A class selector starts with . and an id selector with #.
Link the stylesheet in the <head>, or put rules inside a <style> block.
A class can be reused on many elements; an id should appear once per page.

Français

Une classe 类 style de nombreux éléments : ajoutez class="..." dans le HTML et écrivez .name dans le CSS. Un id 标识符 style UN seul élément : id="..." et #name.

<style>
  .note  { color: green; }
  #title { font-size: 24px; }
</style>
<h1 id="title">Welcome</h1>
<p class="note">First note.</p>
<p class="note">Second note.</p>

Les sélecteurs que vous rencontrerez le plus, en un seul endroit :

Sélecteur	Choisit
`p`	chaque élément `<p>`
`.note`	tout ce qui a `class="note"`
`#title`	l'unique élément avec `id="title"`
`h1, h2`	plusieurs sélecteurs à la fois
`nav a`	chaque `<a>` à l'intérieur d'un `<nav>`
`.btn:hover`	un état d'un élément (voir sujet 10)

Erreurs courantes

Un sélecteur de classe commence par . et un sélecteur d'id par #.
Liez la feuille de style dans le <head>, ou placez les règles à l'intérieur d'un bloc <style>.
Une classe peut être réutilisée sur plusieurs éléments ; un identifiant n'apparaît qu'une fois par page.

7 Colours & text · ⁨Couleurs & texte⁩
reference.pdf.fr 2-up · ⁨2 pages par feuille⁩
7.1
Couleurs & arrière-plans

English
Set the text colour with color and the background 背景 with background-color. A colour can be a name (red), a hex 十六进制 code (#ff0000), or rgb(255, 0, 0).

Français
Définissez la couleur du texte avec color et l'arrière-plan 背景 avec background-color. Une couleur peut être un nom (red), un code hexadécimal 十六进制 (#ff0000), ou rgb(255, 0, 0).

<style> body { background-color: #f0f4ff; } .card { background-color: white; color: #1e3a8a; padding: 12px; } </style> <div class="card">A card with its own colours.</div>

*CSS couleurs : noms, hexadécimal et rgb()
7.2
Stylisation du texte

English
Common text properties: font-size, font-weight (e.g. bold), font-family 字体, text-align 对齐 (left / center / right), and line-height for spacing.

Common mistakes

color sets the text colour; background-color sets the background.

A colour can be a name, a #rrggbb hex code, or rgb(...).

End each declaration inside the braces with a semicolon ; — it separates the property: value pairs (the one after the last declaration is optional). The rule itself ends with the closing brace }.

Français
Propriétés de texte courantes : font-size, font-weight (par ex. bold), font-family 字体, text-align 对齐 (left / center / right), et line-height pour l'espacement.

<style> h1 { font-family: Arial, sans-serif; text-align: center; } p { font-size: 18px; line-height: 1.6; } </style> <h1>Centered title</h1> <p>Readable paragraph text with comfortable line spacing.</p>

Erreurs courantes

color définit la couleur du texte ; background-color définit l'arrière-plan.

Une couleur peut être un nom, un code hexadécimal #rrggbb, ou rgb(...).

Terminez chaque déclaration entre accolades par un point-virgule ; — il sépare les paires property: value (celle après la dernière déclaration est optionnelle). La règle elle-même se termine par l'accolade fermante }.
8 The box model · ⁨Le modèle de boîte⁩
reference.pdf.fr 2-up · ⁨2 pages par feuille⁩
8.1
Le modèle de boîte

English
Every element is a box with four layers, from inside out: the content 内容, the padding 内边距 (space inside the border), the border 边框, and the margin 外边距 (space outside the border).

Français
Chaque élément est une boîte avec quatre couches, de l'intérieur vers l'extérieur : le contenu 内容, le padding 内边距 (espace à l'intérieur de la bordure), la border 边框, et le margin 外边距 (espace à l'extérieur de la bordure).

<style> .box { background: #dbeafe; border: 3px solid #2563eb; padding: 16px; margin: 20px; } </style> <div class="box">content + padding + border + margin</div>

Le modèle de boîte : contenu, puis padding, puis border, puis margin
8.2
Margin & padding · ⁨Marges & espacements⁩

English
padding adds space inside the border, pushing the content inwards. margin adds space outside, pushing other boxes away. Give one value for all sides, or four (top right bottom left).

Français
padding ajoute de l'espace à l'intérieur de la bordure, repoussant le contenu vers l'intérieur. margin ajoute de l'espace à l'extérieur, repoussant les autres boîtes. Donnez une valeur pour tous les côtés, ou quatre (haut droite bas gauche).

<style> .a { background: #fde68a; padding: 4px; } .b { background: #bbf7d0; padding: 20px; margin-top: 16px; } </style> <div class="a">tight padding</div> <div class="b">roomy padding</div>
8.3
Display · ⁨Affichage⁩

English
The display property sets how a box flows. block 块级 takes a whole line; inline 行内 sits within a line of text; none removes the box completely; flex lays the children in a row (next topic).

Common mistakes

Padding is inside the border; margin is the space outside it.

box-sizing: border-box makes the set width include padding and border — often what you want.

display: none hides an element completely; visibility: hidden leaves its space.

Français
La propriété display définit comment une boîte s'écoule. block 块级 prend toute une ligne ; inline 行内 est situé dans une ligne de texte ; none supprime complètement la boîte ; flex aligne les enfants en une rangée (sujet suivant).

<style> .hidden { display: none; } .chip { display: inline; background: #e0e7ff; padding: 2px 8px; border-radius: 6px; } </style> <p>Visible text. <span class="hidden">(secret)</span> <span class="chip">a chip</span></p>

Erreurs courantes

Padding est à l'intérieur de la border ; margin est l'espace à l'extérieur.

box-sizing: border-box fait que la largeur définie inclut le rembourrage et la bordure — souvent ce que vous souhaitez.

display: none cache un élément complètement ; visibility: hidden conserve son espace.
9 Layout · ⁨Mise en page⁩
reference.pdf.fr 2-up · ⁨2 pages par feuille⁩
9.1
Largeur & centrage

English
Set a box's width. To centre 居中 a block, give it a width and margin: 0 auto — auto shares the leftover space equally on the left and right.

Français
Définissez la width d'une boîte. Pour centrer 居中 un bloc, donnez-lui une largeur et margin: 0 auto — auto partage l'espace restant également à gauche et à droite.

<style> .page { width: 300px; margin: 0 auto; background: #e0e7ff; padding: 16px; text-align: center; } </style> <div class="page">A centered, fixed-width page.</div>
9.2
Flexbox

English
Flexbox 弹性布局 lays children out in a row (or a column). Set display: flex on the parent — the container 容器. gap adds space between children; flex: 1 makes them share the width.

Français
Flexbox 弹性布局 aligne les enfants en une rangée (ou une colonne). Définissez display: flex sur le parent — le conteneur 容器. gap ajoute de l'espace entre les enfants ; flex: 1 leur fait partager la largeur.

<style> .row { display: flex; gap: 10px; } .row div { background: #93c5fd; padding: 12px; flex: 1; text-align: center; } </style> <div class="row"> <div>One</div> <div>Two</div> <div>Three</div> </div>

Un conteneur flex aligne ses éléments selon l'axe principal ; gap ajoute de l'espace entre eux
9.3
Mini-projet : une carte de profil

English
Combine boxes, colours, text and spacing into one small component 组件.

Common mistakes

Centre a block with a set width using margin: 0 auto.

Flexbox needs display: flex on the CONTAINER, not on the items.

A width in % is relative to the parent, so check the parent's width too.

Français
Combinez des boîtes, des couleurs, du texte et de l'espacement dans un petit composant 组件.

<style> .card { width: 240px; margin: 0 auto; border: 1px solid #cbd5e1; border-radius: 12px; padding: 16px; font-family: sans-serif; } .card h2 { margin: 0; color: #1e3a8a; } .card .role { color: #64748b; margin: 4px 0 8px; } </style> <div class="card"> <h2>Mei Chen</h2> <p class="role">Student · Grade 11</p> <p>Loves maths and building web pages.</p> </div>

Erreurs courantes

Centrez un élément block avec une largeur définie en utilisant margin: 0 auto.

Flexbox nécessite display: flex sur le CONTENEUR, pas sur les éléments.

Une largeur en % est relative au parent, vérifiez donc aussi la largeur du parent.
10 Going further · ⁨Aller plus loin⁩
reference.pdf.fr 2-up · ⁨2 pages par feuille⁩
10.1
Hover & pseudo-classes · ⁨Survol & pseudo-classes⁩

English
A pseudo-class 伪类 styles an element in one particular state. :hover applies while the mouse is over the element. Add transition 过渡 so the change happens smoothly instead of jumping.

Other useful pseudo-classes: :focus (an input the user clicked into) and :first-child.

Français
Une pseudo-classe 伪类 style un élément dans un état particulier. :hover s'applique tant que la souris survole l'élément. Ajoutez transition 过渡 pour que le changement soit fluide plutôt que brusque.

<style> .btn { background: #2563eb; color: white; padding: 10px 18px; border: none; border-radius: 8px; font-size: 16px; transition: background 0.3s; } .btn:hover { background: #16a34a; } </style> <button class="btn">Hover me</button>

Autres pseudo-classes utiles : :focus (un champ de saisie dans lequel l'utilisateur a cliqué) et :first-child.

:hover stylise un élément tant que le pointeur est dessus
10.2
Positionnement

English
Positioning 定位 moves a box away from its normal place. relative nudges the box (and makes it the anchor 锚点 for its children); absolute places a box exactly, measured from the nearest positioned parent; fixed pins it to the screen even when the page scrolls.

top, right, bottom, left say how far to move — they only work on positioned boxes.

Français
Le positionnement 定位 déplace une boîte de son emplacement normal. relative décale légèrement la boîte (et en fait l'ancêtre 锚点 pour ses enfants) ; absolute place une boîte exactement, mesurée par rapport au parent positionné le plus proche ; fixed l'épingle à l'écran même lorsque la page défile.

<style> .card { position: relative; width: 260px; height: 90px; background: #dbeafe; border-radius: 10px; padding: 12px; } .badge { position: absolute; top: -10px; right: -10px; background: #dc2626; color: white; padding: 4px 10px; border-radius: 999px; font-size: 13px; } </style> <div class="card"> A product card <span class="badge">NEW</span> </div>

top, right, bottom, left indiquent de combien déplacer — ils ne fonctionnent que sur les boîtes positionnées.
10.3
Media queries & design responsive

English
A responsive 响应式 page adapts to the screen size. A media query 媒体查询 applies its rules only while a condition about the screen holds, such as max-width.

Design mobile-first 移动优先: write the phone styles first, then add @media (min-width: ...) rules for bigger screens.

Percent widths and max-width let boxes shrink with the screen.

Common mistakes

:hover sticks to its selector with no space: .btn:hover, not .btn :hover.

position: absolute is measured from the nearest positioned parent — give that parent position: relative.

A media query wraps whole rules: @media (max-width: 600px) { .a { ... } }.

Français
Une page responsive 响应式 s'adapte à la taille de l'écran. Une requête média 媒体查询 applique ses règles uniquement lorsqu'une condition concernant l'écran est remplie, comme max-width.

<style> .banner { background: #2563eb; color: white; padding: 16px; } @media (max-width: 600px) { .banner { background: #16a34a; } /* narrow screens turn green */ } </style> <div class="banner">Resize the window: blue when wide, green when narrow.</div>

Concevez mobile-first 移动优先 : écrivez d'abord les styles pour téléphone, puis ajoutez des règles @media (min-width: ...) pour les écrans plus grands.

Les largeurs en pourcentage et max-width permettent aux boîtes de rétrécir avec l'écran.

Erreurs courantes

:hover colle à son sélecteur sans espace : .btn:hover, pas .btn :hover.

position: absolute est mesuré par rapport au parent positionné le plus proche — donnez à ce parent position: relative.

Une requête média englobe des règles entières : @media (max-width: 600px) { .a { ... } }.