STI
Anglais
1. Qu'est-ce que le HTML ?
Le HTML (HyperText Markup Language) est le langage de balisage utilisé pour structurer le contenu
des pages web. C’est la base de toute page web
2. À quoi sert le HTML ?
• Structurer le contenu : titres, paragraphes, listes, tableaux, etc.
• Insérer des éléments multimédias : images, vidéos, audio.
• Créer des liens hypertextes.
• Ajouter des formulaires pour recueillir des données utilisateur.
• Définir la sémantique du contenu.
3. Structure minimale d’une document html
<!DOCTYPE html>
<html>
<head>
< !—métadonnées-->
</head>
<body>
<!-- Contenu de la page -->
</body>
</html>
Balise Description Attributs
<!DOCTYPE html> . Indique au navigateur qu’il s’agit d’un document -
HTML5
<html> Racine du document HTML. lang (ex: lang="fr")
<head> Conteneur des métadonnées (titre, Codage, Lien -
vers CSS, etc.).
<body> Contenu visible de la page (texte, images, etc.) -
4. Eléments d’entête
Balise Description Attributs/Exemple
<title> Titre du document
(affiché dans l'onglet - <title>Ma Page</title>
du navigateur).
<meta> Définit les charset, name, content
métadonnées
(encodage, type <meta charset="UTF-8">
d’information, etc.). <meta name="Taki" content=" Education ">
<script> Intègre un script - src (source) : Indique l’emplacement d’un fichier JavaScript
JavaScript. externe.
- type : Indique le type MIME du script, par défaut en
HTML5, c’est 'text/javascript'
<style> Définit des styles CSS - media : Spécifie pour quel type d’écran le style s’applique :
internes. screen ( écran d’ordinateur, tablette, mobile) OU print (pour
l’impression) OU all ( pour tous les supports )
- type : Indique le type de contenu du style, par défaut 'text/css'
1
STI
Anglais
5. balises
• Définissent des objets dans une page web (l’élément p :définit un paragraphe, l’élément a :
définit un lien Etc).
• Généralement constitués d’une paire de balises : Balise ouvrante (<p>) et balise fermante
(</p> )
• Exception : balises orphelines comme <br> ou <br/>
6. Attributs :
• Propriétés utilisées pour donner des indications supplémentaires aux éléments
Exp: Indiquer la cible d’un lien.
7. Eléments de structuration de texte et media
Balise Description Attributs
<cite> Donne le titre d’une œuvre (livre, film, article…). —
<p> Crée un paragraphe de texte. —
<source> Définit des fichiers sources pour audio/vidéo. src, type,
media
<h1> à <h6> Titres ou niveaux de titre (h1 est le plus important). —
<hr> Crée une ligne horizontale pour une séparation visuelle. —
<img> Affiche une image. src, alt
<figure> Conteneur pour une image ou média avec légende. —
<figcaption> Ajoute une légende à un élément <figure>. —
<audio> Intègre un son (musique, enregistrement). controls, src
<video> Intègre une vidéo dans la page. controls, src
<a> Crée un lien hypertexte. L’attribut target indique où le lien doit href,
s’ouvrir quand on clique dessus : target
_self (valeur par défaut) → ouvre le lien dans la même fenêtre /
onglet.
_blank → ouvre le lien dans un nouvel onglet ou une nouvelle
fenêtre.
_parent → ouvre le lien dans le contexte parent (utile si ta page
est dans un <iframe>).
_top → ouvre le lien dans la fenêtre complète, en cassant tous les
frames.
<br> Fait un saut de ligne. —
<address> Affiche une adresse de contact (auteur, entreprise…). —
<output> Affiche un résultat généré (ex : calcul). —
<mark> Met en surbrillance une partie du texte. —
<details> Affiche des infos cachées/affichables sur demande. —
<summary> Titre visible du bloc <details> (clic pour dérouler). —
2
STI
Anglais
8. Listes
Balise Description Attributs
<ul> Crée une liste à puces (non —
ordonnée).
<ol> Crée une liste numérotée ▪ type → définit le style de numérotation :
(ordonnée). "1" → chiffres (1, 2, 3…) (par défaut)
"A" → lettres majuscules (A, B, C…)
"a" → lettres minuscules (a, b, c…)
"I" → chiffres romains majuscules (I, II,
III…)
"i" → chiffres romains minuscules (i, ii, iii…)
▪ start → définit le numéro (ou lettre) de
départ
▪ reversed → inverse l’ordre de la
numérotation (parcours décroissant)
<li> Représente un élément d’une —
liste (<ul> ou <ol>).
9. Tableau
Balise Description Remarques
<table> Crée un tableau. —
<caption> Donne un titre ou une légende au tableau. Placé juste après
<table>
<thead> Définit l’en-tête des colonnes (titres des colonnes dans la —
première ligne).
<tbody> Contient les données principales du tableau. —
<tfoot> Contient le pied du tableau (souvent pour les totaux ou —
notes).
<tr> Crée une ligne dans le tableau. —
<th> Crée une cellule d’en-tête (en gras et centrée). —
<td> Crée une cellule normale du tableau. —
[Link]
Balise Description Attributs
u
<span> Regroupe du contenu en ligne (petites portions de texte, pour —
appliquer du style ou des scripts).
<div> Regroupe des éléments de type bloc et inline . (permet de —
structurer une page
<iframe> Intègre une page web dans une autre. src, name
3
STI
Anglais
[Link]éments de structuration d’une page web
Balise Rôle principal
<header> En-tête (titre, logo, menu…)
<nav> Menu de navigation
<footer> Pied de page
<section> Regrouper un groupe d’éléments liés par un thème commun
<article> Sert à un contenu autonome et indépendant
En pratique :
Si ton contenu peut exister seul en dehors du site, utilise <article>.
Si ton contenu fait partie d’un ensemble thématique, utilise <section>.
<aside> Contenu secondaire ou complémentaire
<main> Contenu principal unique
[Link] globaux
Attribut Description
class Définit une ou plusieurs classes CSS pour styliser un élément.
hidden Masque un élément (il ne sera pas affiché).
id Attribue un identifiant unique à un élément.
style Applique des styles CSS directement à un élément.
title Affiche une infobulle avec des informations supplémentaires quand on survole l'élément.
[Link]éments de formulaire
❖ Structure de base des formulaires
Balise Description Attributs
<form> Crée un formulaire HTML. action : URL de soumission
method : "get" ou "post"
target : "_self", "_blank", "_parent", "_top",
"nom_iframe"
<fieldset> Regroupe des éléments liés dans un -
formulaire.
<legend> Définit une légende pour un <fieldset>. -
<label> Associe un texte descriptif à un élément for (id de l'élément lié)
de formulaire.
4
STI
Anglais
❖ Champs de saisie (<input>)
Type Description Attributs communs Attributs
spécifiques
text, email, tel Champ de texte name, value, placeholder,
standard. readonly, required, disabled, li
st
password champ de saisie pour name, value, placeholder,
les mots de passe readonly, required, disabled
Number, range champ de saisie pour name, value, readonly, min, max
les valeurs required, disabled
numériques
date, time Sélecteur de name, value, required, disabled min, max
date/heure.
checkbox, radio Case à cocher / name, value, required, disabled checked
Bouton radio.
button, reset, Boutons interactifs. name, value, disabled
submit
❖ Autres éléments de formulaire
Balise Description Attributs
<textarea> Zone de texte name, maxlength, placeholder, readonly,
multiligne. required, disabled, rows, cols
<select> Liste déroulante. name, required, disabled
<option> Option dans une value, selected, disabled
liste <select>
<datalist> liste de suggestions id (lié à list="id" dans <input>)
prédéfinies pour un
champ <input>.
[Link]éments de bloc & éléments en ligne
Tout élément (balise) en HTML a une valeur d'affichage par défaut : soit un élément de type block
soit un élément de type inline
Critère Élément Block Élément Inline
Affichage Occupe toute la largeur Occupe uniquement la largeur du
disponible contenu
Retour à la ligne Commence sur une nouvelle Pas de retour à la ligne
ligne automatique
Contenu autorisé Peut contenir des éléments block Peut contenir seulement des inline
et inline
Exemples courants <div>, <p>, <h1>, <section>, <span>, <a>, <strong>, <img>,
<ul> <em>
Hauteur / largeur Oui (via CSS) Non (par défaut, sauf conversion
modifiables avec CSS)
5
STI
Anglais
[Link]'est-ce que le flux normal ?
Le flux normal est le comportement par défaut des éléments HTML lorsqu'ils sont ajoutés à une
page :
• Les éléments block s'empilent verticalement les uns sous les autres.
• Les éléments inline s'affichent horizontalement, à la suite les uns des autres sur une même
ligne, et vont à la ligne uniquement si l’espace est insuffisant.
Exp:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Flux normal</title>
</head>
<body>
<h1>Titre</h1>
<p>Voici un paragraphe.</p>
<p>Un autre paragraphe avec <strong>du texte en gras</strong> et
<em>en italique</em>.</p>
</body>
</html>
Résultat dans le navigateur :
• <h1> est un élément block → il commence sur une nouvelle ligne.
• Chaque <p> est un block → ils s'empilent verticalement.
• <strong> et <em> sont des inline → ils apparaissent dans le texte, sans provoquer de retour à
la ligne