HTML et CSS
Semestre 1
Membres de HEP
EDUCATION 1
HTML 5 et CSS 3
Le code HTML, CSS et JavaScript est public car il est exécuté côté client, c'est-à-dire directement dans le navigateur de l'utilisateur.
Tout utilisateur peut voir et inspecter ce code en accédant aux outils de développement du navigateur.
En revanche, les langages comme PHP, Python ou [Link] s'exécutent côté serveur. Le code serveur n'est jamais visible par
l'utilisateur final, seulement le résultat (souvent en HTML) est envoyé au client, garantissant ainsi que la logique et les données
sensibles restent protégées.
2
HTML 5 et CSS 3
Le web sémantique vise à structurer et relier les données de manière à ce qu'elles soient compréhensibles non seulement par les
humains mais aussi par les machines. En utilisant des standards, il permet aux machines mieux analyser et comprendre le contenu du
web.
Cela améliore la pertinence des recherches et facilite l'interopérabilité entre systèmes en rendant les données plus intelligentes et
connectées.
[Link]
3
HTML 5 et CSS 3
Le développement web repose sur plusieurs technologies clés pour créer des sites interactifs et attrayants. Parmi elles, HTML et CSS
jouent un rôle fondamental dans la construction et la présentation des pages web.
HTML (HyperText Markup Language) est le langage de balisage utilisé pour structurer le contenu des pages. Il définit les éléments
tels que les titres, paragraphes, images ou liens, organisant ainsi les informations de manière hiérarchique à l'aide de balises.
CSS (Cascading Style Sheets), quant à lui, est utilisé pour styliser ces éléments HTML. Il permet de contrôler l'apparence visuelle des
pages, en ajustant les couleurs, polices, marges, et la mise en page.
4
HTML 5 et CSS 3
Une page web en HTML est structurée de manière hiérarchique à l'aide de balises qui organisent le contenu.
La section <head>, non visible dans le rendu navigateur, contient des métadonnées comme le titre de la page et des liens vers des
fichiers externes (CSS, JavaScript).
La section <body> contient le contenu visible par l'utilisateur, structuré avec des éléments comme <header> pour l'en-tête, <main> pour
le contenu principal, <footer> pour les informations de bas de page, et <aside> pour des informations complémentaires ou des barres
latérales. Cette organisation permet de présenter une page bien structurée et lisible pour les navigateurs.
5
HTML 5 et CSS 3
Le JavaScript est un langage de programmation pour rendre les pages web interactives et dynamiques. Contrairement à HTML et CSS
qui se chargent de la structure et du style, JavaScript permet d’ajouter des fonctionnalités avancées, telles que la manipulation du
contenu en temps réel, les animations, ou encore la gestion des interactions utilisateur (comme les clics ou les formulaires).
Comme le HTML et CSS, il est exécuté directement dans le navigateur côté client.
6
HTML 5 et CSS 3
Balises HTML
Les balises HTML sont la clé de tous sites internet. Elles
permettent de créer plusieurs éléments qui seront interprétés
par le navigateur.
Les balises HTML sont encadrées par des chevrons et
entourent le contenu souhaité, avec une barre oblique ajoutée
à la balise de fermeture. L'ensemble formé par la balise
d'ouverture, le contenu et la balise de fermeture constitue un
élément.
Il est également possible d'ajouter un attribut HTML à cet
élément pour fournir des informations supplémentaires.
Explication des balises : [Link]
Liste complète de toutes les balises : [Link]
7
HTML 5 et CSS 3
Attributs HTML
Les attributs HTML permettent d'ajouter des informations
supplémentaires aux balises HTML.
Ils sont simplement inclus dans la balise HTML pour
configurer son fonctionnement. Il existe de nombreux
attributs spécifiques à certains éléments des attributs
“universels” tels que class et id.
Un attribut HTML se compose d'un nom et d'une valeur, et
sert à stocker des informations additionnelles dans une
balise HTML. Ces attributs se placent dans la balise
ouvrante et ne tiennent pas compte de la casse. Bien que
l'utilisation des guillemets autour des valeurs ne soit plus
strictement nécessaire, il est conseillé de les utiliser pour
éviter toute erreur.
8
HTML 5 et CSS 3
Balises structurelles
Chaque page HTML contient des balises qui structurent le site web.
Balise HTML Description
<!DOCTYPE> Ce tag HTML détermine de quel type de document il s’agit.
<html> <htlm> permet de définir un document en tant que document
HTML.
<head> Dans la partie <head>, on peut trouver les métadonnées du
document.
<title> Dans cette commande HTML, on écrit le titre du document. Il est
également affiché dans la barre de titre du navigateur.
<body> <body> est la partie principale et comprend le contenu qui sera
affiché dans le navigateur.
<nav> Il s’agit de la zone de navigation d’un site Web.
<section> <section> permet de rassembler des éléments en un groupe.
<article> <article> est la partie contenue de la page d’accueil.
<header> <header> définit l’en-tête d’une page.
<footer> Le pied de page d’une page est défini via <footer>.
9
HTML 5 et CSS 3
Balises head
La balise <head> en HTML est une section importante d'une page
web, car elle contient des métadonnées sur le document, des
informations qui ne sont pas affichées directement sur la page,
mais qui sont utiles pour les navigateurs, les moteurs de
recherche, et d'autres technologies web. La balise <head> se place
avant la balise <body> et encadre des éléments qui aident à
configurer la page.
<title> : Elle définit le titre de la page qui apparaît dans l'onglet du
navigateur ou comme titre de la page dans les résultats de
recherche. C'est une balise essentielle.
Description (<meta name="description">) : Donne une brève
description du contenu de la page pour les moteurs de recherche.
<link> : Cette balise est utilisée pour lier des ressources externes à
la page, comme les feuilles de style CSS ou la favicon.
10
HTML 5 et CSS 3
Balises head
Charset (<meta charset="UTF-8">) : Spécifie l'encodage de
la page, généralement UTF-8.
Viewport (<meta name="viewport">) : Aide à gérer la mise
en page sur des appareils mobiles, essentiel pour le
responsive design.
<script> : Elle permet d’inclure ou de référencer des scripts
JavaScript. Les scripts peuvent être placés ici pour des
scripts chargés en amont du contenu de la page.
11
HTML 5 et CSS 3
Balises HTML <a>
La balise <a> est utilisée pour créer des liens hypertextes
permettant de naviguer d'une page web à une autre ou
d'accéder à d'autres ressources (fichiers, images, etc.).
Son principal attribut est href, qui définit l'URL de la ressource
vers laquelle pointe le lien.
Par exemple, <a href="[Link] ici</a>
crée un lien vers le site "[Link]".
D'autres attributs peuvent également être utilisés avec la
balise <a>, comme target, qui spécifie où ouvrir le lien.
L'attribut target="_blank" ouvre le lien dans un nouvel onglet
ou une nouvelle fenêtre.
L'attribut title permet d'afficher un texte contextuel lorsque
l'utilisateur survole le lien. De plus, l'attribut rel indique la
relation entre la page actuelle et la ressource liée, comme
rel="noopener" pour des raisons de sécurité lorsque
target="_blank" est utilisé.
12
HTML 5 et CSS 3
Balises HTML <p>
La balise <p> en HTML est utilisée pour définir un paragraphe de
texte. C’est l’une des balises les plus basiques et essentielles
pour structurer du contenu dans une page web.
Chaque bloc de texte entouré par une balise <p> sera interprété
comme un paragraphe, et les navigateurs ajoutent
automatiquement des espaces au-dessus et en dessous du
paragraphe pour le séparer visuellement des autres éléments.
13
HTML 5 et CSS 3
Balises HTML <p>
La balise <p> en HTML est utilisée pour définir un paragraphe de
texte. C’est l’une des balises les plus basiques et essentielles
pour structurer du contenu dans une page web.
Chaque bloc de texte entouré par une balise <p> sera interprété
comme un paragraphe, et les navigateurs ajoutent
automatiquement des espaces au-dessus et en dessous du
paragraphe pour le séparer visuellement des autres éléments.
On remarque ici l’utilisation de caractères spéciaux pour
encoder le texte, nous reviendrons dessus plus tard.
14
HTML 5 et CSS 3
Balises HTML <h>
Les balises de titre HTML, représentées par <h1> à <h6>,
sont utilisées pour structurer les titres et sous-titres dans une
page web. Elles permettent de hiérarchiser le contenu de
manière claire, ce qui est bénéfique à la fois pour les
utilisateurs et pour le référencement (SEO).
La balise <h1> représente le titre principal de la page,
généralement utilisé une seule fois, tandis que les balises
<h2> à <h6> sont utilisées pour les sous-titres, allant du plus
important au moins important.
15
HTML 5 et CSS 3
Balises HTML pour le texte
Différentes balises HTML vous permettent de modifier
l’aspect de la police de votre document.
Balise HTML Description
<b> <strong> <b> permet d’écrire un mot, une phrase ou même un paragraphe en gras.
<i> <i> permet d’écrire un mot, une phrase ou même un paragraphe en italique.
<u> La partie entourée de <u> est soulignée.
<s> La partie entourée de <s> est barrée.
<sup> Le tag HTML <sup> permet d’ajouter un exposant (exemple : 1st).
<sub> Pour mettre en indice, utilisez <sub> (exemple : H2O).
<br/> Pour revenir à la ligne dans un texte
<span> Cette balise est neutre et permet d’ajouter du style sur une portion de texte
16
HTML 5 et CSS 3
Site “petites annonces”
En fil rouge de cette formation nous allons réaliser un site de petites annonces.
Pour ce 1er TP, créer la structure HTML du site.
La page aura un logo, un titre principal, un sous-titre et 3 catégories avec chacune leur titre, visuel et un lien.
Les visuels sont téléchargeables ici : [Link]
17
HTML 5 et CSS 3
Maquette “petites annonces”
18
HTML 5 et CSS 3
Les tableaux
Il est possible de créer des tableaux dans un document HTML
avec les balises suivantes :
Balise HTML Description
<table> Le tag HTML <table> permet de créer un tableau.
<thead> Header du tableau
<tbody> Contenu du tableau
<caption> <caption> permet d’insérer le titre d’un tableau
<tr> Les lignes du tableau sont indiquées à l’aide de <tr>.
<td> <td> définit une cellule spécifique dans un tableau.
<th> La cellule d’en-tête d’un tableau est déterminée par <th>.
19
HTML 5 et CSS 3
Les listes
Il est possible de créer des listes dans un document HTML avec
les balises suivantes :
Balise HTML Description
<ol> Avec <ol>, une liste ordonnée est créée.
<ul> Avec <ul>, on crée une liste non ordonnée mais avec des
puces.
<li> <li> est utilisé pour ajouter une entrée à la liste.
<dl> <dl> affiche une liste de définitions.
<dt> <dt> identifie un terme ou une position dans une liste de
définitions.
<dd> <dd> est une description de définition à l’intérieur d’une
liste.
20
HTML 5 et CSS 3
Il existe de nombreuses ressources sur le HTML. Voici quelques ressources intéressantes :
[Link] : La documentation officielle de toutes les balises et attributs HTML
[Link] : Autres sources très fiables pour les balises
[Link] : Outils pour vérifier les erreurs de sémantique HTML et CSS
[Link] : Tutoriel sur les bases du HTML
21
HTML 5 et CSS 3
Site “petites annonces”
Sur le même site que le 1er exercice, nous allons rajouter une section “Tarifs” sur le site ainsi que des liens pour le footer.
Vérifier ensuite votre code au validateur W3C et corrigé leurs erreurs si besoin
22
HTML 5 et CSS 3
Les formulaires
Il est possible de créer des formulaires avec les balises suivantes :
Balise HTML Description
<form> Avec <form>, vous créez un formulaire.
<input> <input> est utilisé pour insérer une commande de saisie.
<button> Ajoutez un bouton via <button>, notamment pour soumettre un
formulaire.
<select> Utilisez <select> pour créer une liste de sélection.
23
HTML 5 et CSS 3
Site “petites annonces”
Toujours sur le site de petites annonces, rajouté maintenant un formulaire de contact à la suite :
24
CSS
Membres de HEP
EDUCATION 25
HTML 5 et CSS 3
Le CSS (Cascading Style Sheets) est un langage utilisé pour décrire l'apparence et la mise en forme des documents HTML. Il permet
de séparer le contenu d'une page (structure HTML) de son style (couleurs, polices, marges, alignement, etc.).
Grâce au CSS, il est possible de créer des designs, adapter le rendu des pages à différents écrans (ordinateurs, tablettes, mobiles) et
de maintenir facilement la mise à jour du style sur plusieurs pages d'un site.
Pour utiliser de CSS, une des bonnes pratiques est d’utiliser des fichiers séparés. On utilise la balise <link> pour le lier avec le HTML :
La syntaxe du CSS est différente du HTML :
[Link]
26
HTML 5 et CSS 3
Une instruction CSS commence par un identifiant (qui peut etre le nom de la balise html :h1, h2, footer, ul, li …. ou une class ou un id)
et une liste de propriété entre accolade { }
Il est possible d’ajouter plusieurs identifiants en les séparant par une virgule.
27
HTML 5 et CSS 3
Il est possible de rajouter sur chaque balise HTML une ou plusieurs classes et un id. Le but des classes et des id est de pouvoir
manipuler les éléments HTML grâce au CSS et au JavaScript.
Dans votre fichier CSS, utilisez un . + nom de la classe ou # + non de l’id
Un id doit être unique sur toute votre page HTML tandis que les classes sont faites pour être réutilisé.
28
HTML 5 et CSS 3
Il existe de nombreuses propriétés CSS pour mettre en forme votre site web.
Voici les principales :
Propriété CSS Description Exemple de valeur
color Définit la couleur du texte color: red; ou color: #ff0000;
background-colo Définit la couleur de fond d'un élément background-color: blue; ou background-color:
r #0000ff;
font-size Définit la taille de la police font-size: 16px; ou font-size: 1.5em;
margin Définit l'espace autour d'un élément margin: 10px; ou margin: 5px 10px;
padding Définit l'espace intérieur d'un élément, entre son contenu et sa bordure padding: 15px; ou padding: 10px 20px;
border Définit la bordure d'un élément border: 1px solid black;
width Définit la largeur d'un élément width: 100px; ou width: 50%;
height Définit la hauteur d'un élément height: 200px; ou height: auto;
display Définit le type d'affichage d'un élément display: block; ou display: inline;
position Définit la méthode de positionnement d'un élément position: relative; ou position: absolute;
29
HTML 5 et CSS 3
A partir du code HTML de l’exercice “petites annonces”, nous allons appliquer un style CSS pour mettre en forme le header :
La 1ere étape : Rajout des balises div, class et id nécessaire
30
HTML 5 et CSS 3
A partir du code HTML de l’exercice “petites annonces”, nous allons appliquer un style CSS pour mettre en forme le header :
La 1ere étape : Rajout des balises div, class et id nécessaire
Cette classe va me permettre de centrer tout le contenu du site
dans le navigateur. Beaucoup de sites utilisent “container” ou
“wrapper” comme nom.
Le logo est souvent unique dans le site donc j’utilise un id
Ici l’utilisation de deux classes va permettre d’ajouter des
propriétés et de rendre les classes plus facilement réutilisables
31
HTML 5 et CSS 3
Le selecteur * permet d’appliquer du style à tous les éléments
Le “auto” permet de centrer automatiquement l’élément par rapport à son parent
Par défaut tous les liens sont soulignés, ici je modifie le style du lien
Avec 2 sélecteurs séparés d’un espace je cible toutes les class “btn” dans les
header
Le float permet d’aligner l’élément à droite
32
HTML 5 et CSS 3
Padding et Margin
Les propriétés padding ou margin permettent d’ajouter des espaces :
● Entre deux éléments pour les marges
● À l’intérieur d’un bloc pour les paddings
Une marge peut être négative si besoin.
Pour les propriétés padding et margin, il est possible d’insérer 4, 3, 2 ou
1 valeur.
Pour chacun des propriétés, il existe aussi les propriétés padding-right,
padding-left, padding-top, padding-bottom.
Le fonctionnement est le même pour border.
33
HTML 5 et CSS 3
Tailles des éléments
La taille de chaque élément peut être définie avec une valeur fixe ou une valeur dynamique.
34
HTML 5 et CSS 3
Position: absolute
La propriété position: absolute en CSS permet de positionner un élément par rapport à son conteneur parent le plus proche ayant une
position définie (relative, absolute, ou fixed). Contrairement à des éléments positionnés statiquement, un élément avec position:
absolute est retiré du flux normal du document, ce qui signifie qu'il n'occupera plus d'espace dans la disposition naturelle de la page.
35
HTML 5 et CSS 3
Les priorités en CSS, déterminent quelles règles CSS seront appliquées lorsqu'il y a plusieurs déclarations en conflit pour un même
élément. Le navigateur suit un système hiérarchique pour décider quelle règle l'emporte. Ce système tient compte de trois aspects
principaux : la spécificité du sélecteur, l'importance (!important), et l'ordre dans lequel les styles apparaissent.
Ordre de spécificité :
● Styles en ligne (ex : style="..." dans l'élément HTML).
● Sélecteurs d'ID (ex : #mon-id).
● Sélecteurs de classe, pseudo-classes, attributs (ex : .ma-classe, :hover).
● Sélecteurs de type (balises HTML) (ex : p, div).
● Sélecteurs universels et les pseudo-éléments (*, ::before).
36
HTML 5 et CSS 3
1. Styles en ligne (ex : style="..." dans l'élément HTML).
2. Sélecteurs d'ID (ex : #mon-id).
3. Sélecteurs de classe, pseudo-classes, attributs (ex : .ma-classe, :hover).
4. Sélecteurs de type (balises HTML) (ex : p, div).
5. Sélecteurs universels et les pseudo-éléments (*, ::before).
Quizz : La couleur des éléments
37
HTML 5 et CSS 3
Le concept de Flexbox est un modèle de mise en page conçu pour simplifier l'organisation et l'alignement des éléments dans un
conteneur, en particulier lorsque ces éléments doivent s'adapter à des tailles d'écran variables.
Flexbox permet de gérer facilement des mises en page dynamiques sans avoir à utiliser de nombreux hacks CSS comme les float ou le
positionnement absolu.
Pour utiliser flexbox, on rajoute la propriété : display: flex; sur l’élément parent
[Link]
[Link]
38
HTML 5 et CSS 3
TP : Petites annonces
Ressources utiles :
[Link] / [Link] / [Link]
[Link]
[Link]
[Link]
39
Merci !
Membres de HEP
EDUCATION 40