Programmation Web

Pr. Ahmed ABATAL

[Link]@[Link]

2024-2025

A. ABATAL
 Introduc tion
HTM L
CSS Plan
JavaScript

Plan du cours

1 HTML
2 CSS
3
JavaScript
4

A. ABATAL 1
 Introduc tion
HTM L
CSS
JavaScript

Internet vs Web
. Internet

Réseau physique mondial interconnectant des ordinateurs via des

infrastructures (câbles, satellites, serveurs).
•Fonction :
Transporter des données (textes, voix, vidéo) entre appareils via
des protocoles (TCP/IP, FTP, SMTP).
•Analogies :
• Autoroutes pour les données.
• Système nerveux du numérique.
•Exemples d’usages :
Envoi d’e-mails, streaming vidéo, IoT (objets connectés).
A. ABATAL 2
 Introduc tion
HTM L
CSS
JavaScript

Internet vs Web
Le Web (World Wide Web)

Service fonctionnant sur Internet, permettant d’accéder à des pages

liées entre elles via des hyperliens.
•Fonction :
Consulter/publier des informations via des navigateurs (Chrome,
Firefox) et des protocoles (HTTP/HTTPS).
•Analogies :
• Bibliothèque virtuelle.
• Magasin en ligne (une partie d’Internet).
•Exemples d’usages :
Sites e-commerce, blogs, réseaux sociaux.
A. ABATAL 2
 Introduc tion
HTM L
CSS
JavaScript

Internet vs Web

Internet = Réseau.

Web = Service parmi d’autres sur Internet (comme l’e-mail ou le

cloud).

Sans Internet, pas de Web… mais Internet existe sans le Web !

A. ABATAL 2
 Introduc tion Introduction HTML
HTM L Avantages HTML
CSS L’hypertexte
JavaScript Outils de développement web
Balises

Introduction HTML

HTML (Hyper Text Markup Language) est d’un langage de

description (et non pas d’un langage de programmation)
qui va nous permettre de décrire l’aspect d’un document,
d’y inclure des informations variées (textes, images, sons,
animations etc.) et d’établir des relations cohérentes
entre ces informations grâce aux liens hypertextes

A. ABATAL 2
 Introduc tion Introduction HTML
HTM L Avantages HTML
CSS L’hypertexte
JavaScript Outils de développement web
Balises

Introduction HTML

HTML est l’abréviation de HyperText Markup Language,

soit en français « langage hypertexte de balisage ».

Ce langage a été créé en 1991 et a pour fonction de

structurer et de donner du sens à du contenu. Ils nous
permet de créer des sites web.

A. ABATAL 3
 Introduc tion Introduction HTML
HTM L Avantages HTML
CSS L’hypertexte
JavaScript Outils de développement web
Balises

Introduction HTML

Versions de l’HTML:

HTML 1 (1991) : Créé par Tim Berners-Lee.

HTML 2 (1994) : Les règles et le fonctionnement de
cette version sont donnés par le W3C. Elle définit les bases
des versions suivantes du HTML.
HTML 3 (1996) : Rajoute de nombreuses possibilités au
langage comme les tableaux, les scripts, le positionnement
du texte autour des images, etc.

A. ABATAL 4
 Introduc tion Introduction HTML
HTM L Avantages HTML
CSS L’hypertexte
JavaScript Outils de développement web
Balises

Introduction HTML
Versions de l’HTML:

HTML 4 (1998) : Elle propose l'utilisation de frames, des

tableaux plus complexes, des améliorations sur les
formulaires, etc. Mais surtout, cette version permet pour
la première fois d'exploiter des feuilles de style (CSS ).
HTML 5 (2014) : Dernière version d'HTML, elle apporte
de nombreuses améliorations comme la possibilité
d'inclure facilement des vidéos, un meilleur agencement
du contenu, de nouvelles fonctionnalités pour les
formulaires, etc.

A. ABATAL 5
 Introduc tion Introduction HTML
HTM L Avantages HTML
CSS L’hypertexte
JavaScript Outils de développement web
Balises

Avantages HTML

Les avantages du langage HTML sont nombreux

Peux coûteux en effet un simple éditeur de texte suffit à
écrire ses premiers documents HTML
Relativement facile à aborder,
Il représente en outre un bon moyen de dépasser les
problèmes de compatibilité entre des systèmes et des
formats informatiques différents

A. ABATAL 6
 Introduc tion Introduction HTML
HTM L Avantages HTML
CSS L’hypertexte
JavaScript Outils de développement web
Balises

L’Hypertexte

Le langage HTML permet de créer des documents

interactifs grâce à des liens hypertextes, qui relient
votre document à d'autres documents.

En cliquant sur une zone de texte (ou une image, un

logo) mise en évidence, on peut accéder a un nouveau
document situé sur un autre ordinateur en n'importe
quel point du globe.

A. ABATAL 7
 Introduc tion Introduction HTML
HTM L Avantages HTML
CSS L’hypertexte
JavaScript Outils de développement web
Balises

Outils de développement web

Vous aurez besoin d’un

Éditeur de texte : Bloc-notes, Notepad++, Sublime
Text, Visual Studio Code, etc.
Navigateur web : Google Chrome, Mozilla Firefox,
etc.
Une page html est un fichier (du texte) avec
l’extension .html ou htm

Exemple : [Link] - [Link]

8
 Introduc tion Introduction HTML
HTM L Avantages HTML
CSS L’hypertexte
JavaScript Outils de développement web
Balises

À quoi ressemble un fichier HTML?

[Link]

Résultat

A. ABATAL 9
 Introduc tion Introduction HTML
HTM L Avantages HTML
CSS L’hypertexte
JavaScript Outils de développement web
Balises

Balises en HTML

Les pages HTML sont remplies de ce qu'on appelle des

balises. Celles-ci sont invisibles à l'écran pour vos visiteurs,
mais elles permettent à l'ordinateur de comprendre ce qu'il
doit afficher.
Les balises se repèrent facilement. Elles sont entourées
de "chevrons", c'est-à-dire des symboles < et >, comme
ceci : <balise>

10
 Introduc tion Introduction HTML
HTM L Avantages HTML
CSS L’hypertexte
JavaScript Outils de développement web
Balises

Balises en HTML

Exemple:

11
 Introduc tion Introduction HTML
HTM L Avantages HTML
CSS L’hypertexte
JavaScript Outils de développement web
Balises

Balises en HTML

On distingue deux types de balises :

Les balises en paires : Elles s'ouvrent, contiennent du
texte, et se ferment vers la fin.
<titre>Ceci est un titre</titre>

Les balises orphelines: Ce sont des balises qui servent le

plus souvent à insérer un élément à un endroit précis
(par exemple une image).

<img />

A. ABATAL 12
 Introduc tion Introduction HTML
HTM L Avantages HTML
CSS L’hypertexte
JavaScript Outils de développement web
Balises

Les attributs

Les attributs sont un peu les options des balises. Ils viennent
Ies compléter pour donner des informations supplémentaires.
L'attribut se place après le nom de la balise ouvrante et a le plus
souvent une valeur, comme ceci:

<balise attribut="valeur">

<img src= "chemin/[Link]">

<body bgcolor="orange"> </body>

A. ABATAL 13
 Introduc tion Introduction HTML
HTM L Avantages HTML
CSS L’hypertexte
JavaScript Outils de développement web
Balises

Structure de base d'une page HTML

La structure de base d’une page HTML est la suivante :

A. ABATAL 14
 Introduc tion Introduction HTML
HTM L Avantages HTML
CSS L’hypertexte
JavaScript Outils de développement web
Balises

Structure de base d'une page HTML

La structure de base d’une page HTML est la suivante :

Le doctype : Elle est indispensable car c'est elle qui indique

qu'il s'agit bien d'une page web HTML.
<html> </html> La balise principale du code. Elle englobe
tout le contenu de votre page.
<head> </head> L'en-tête. Cette section donne quelques
informations générales sur la page, comme son titre,
l'encodage (pour la gestion des caractères spéciaux), etc.
<body> </body> Le corps. C'est là que se trouve la partie
principale de la page. Tout ce que nous écrirons ici sera
affiché à l'écran.

A. ABATAL 15
 Introduc tion Introduction HTML
HTM L Avantages HTML
CSS L’hypertexte
JavaScript Outils de développement web
Balises

Structure de base d'une page HTML

<title> </title> C'est le titre de votre page web

<meta charset="utf-8" /> : Elle indique l'encodage utilisé
dans votre fichier .html. Utf-8: permet d'afficher sans aucun
problème pratiquement tous les symboles de toutes les
langues de notre planète.

A. ABATAL 16
 Introduc tion Introduction HTML
HTM L Avantages HTML
CSS L’hypertexte
JavaScript Outils de développement web
Balises

Structure de base d'une page HTML

<!DOCTYPE html>
<html>
<head>
<title>Mon premier code HTML !</title>
<meta charset="utf-8">
</head>
<body>
<h1>Ceci est un gros titre</h1>
<p>Ceci est un paragraphe</p>
</body>
</html>

A. ABATAL 17
 Introduc tion Introduction HTML
HTM L Avantages HTML
CSS L’hypertexte
JavaScript Outils de développement web
Balises

Structure de base d'une page HTML

Commentaire : Il est visible dans le code source mais

ignoré par le navigateur il sert à expliquer le code.

...
<!-- un commentaire-->
<!--
un commentaire sur plusieurs lignes
-->
...

A. ABATAL 18
 Introduc tion Introduction HTML
HTM L Avantages HTML
CSS L’hypertexte
JavaScript Outils de développement web
Balises

Balises HTML: Les paragraphes

Un paragraphe est délimité par la balise <p> et </p>

On écrit le contenu de notre page web entre les balises <body> et
</body>

A. ABATAL 19
 Introduc tion Introduction HTML
HTM L Avantages HTML
CSS L’hypertexte
JavaScript Outils de développement web
Balises

Balises HTML: Les paragraphes

Exemple:

<!D OCTYP E htm l>

...
<bo dy>
...
<!--Deu x par agrap hes dif féren ts-->
<p> Voici mon pre mier par agrap he.</ p>
<p> Et en voi là un sec ond !</ p>
</b ody>
</h tml>

A. ABATAL 20
 Introduc tion Introduction HTML
HTM L Avantages HTML
CSS L’hypertexte
JavaScript Outils de développement web
Balises

Balises HTML: Les espaces et retours à la ligne

C'est une balise orpheline qui sert juste à indiquer qu'on doit aller
à la ligne : <br>.
<!D OCTYP E htm l>
<ht ml>
<he ad>
<ti tle>P remiè re pag e HTM L</ti tle>
<me ta cha rset= "ut f-8">
</h ead>

<bo dy>
<!--Les esp aces ne ser ont p as aff ichés-->
<!--br nou s ser t à c réer des r etour s à l a lig ne-->
<p> Voici <br> mon < br>pr emier <br >para graph e.</p >
<p> Et en voi là un sec ond !</ p>
</b ody>
</h tml>

A. ABATAL 21
 Introduc tion Introduction HTML
HTM L Avantages HTML
CSS L’hypertexte
JavaScript Outils de développement web
Balises

Balises HTML: Les espaces et retours à la ligne

Résultat:

A. ABATAL 22
 Introduc tion Introduction HTML
HTM L Avantages HTML
CSS L’hypertexte
JavaScript Outils de développement web
Balises

Balises HTML: Les titres

Pour ne pas confondre entre les titres et les paragraphes en utilise

les balise de titre qui sont de six (h1,h2,h3,h4,h5,h6) selon la taille.

A. ABATAL 23
 Introduc tion Introduction HTML
HTM L Avantages HTML
CSS L’hypertexte
JavaScript Outils de développement web
Balises

Balises HTML: Les titres

<!D OCTYP E htm l>

<ht ml>
<he ad>
<ti tle>P remiè re pag e HTM L</ti tle>
<me ta cha rset= "ut f-8">
</h ead>
<bo dy>
<!--Un tit re tres imp ortan t-->
<h1 >Mon tit re pri ncipa l</h1 >
<!--Un tit re imp ortan t-->
<h2 >Je sui s un tit re imp ortan t</h2 >
<!--Un aut re tit re imp ortan t-->
<h2 >Moi aus si, j e sui s un titre impo rtant </h2>
<!--Un tit re un peu moin s imp ortan t-->
<h3 >Je sui s un tit re d’important moy enne< /h3>
<h4 >Un tit re pas trè s imp ortan t</h4 >
<h5 >Un tit re peu imp ortan t</h5 >
<h6 >Un tit re vra iment peu imp ortan t</h6 >
</b ody>
</h tml>

A. ABATAL 24
 Introduc tion Introduction HTML
HTM L Avantages HTML
CSS L’hypertexte
JavaScript Outils de développement web
Balises

Balises HTML: Les titres

A. ABATAL 25
 Introduc tion Introduction HTML
HTM L Avantages HTML
CSS L’hypertexte
JavaScript Outils de développement web
Balises

Balises HTML: Organiser le texte

Mettre le texte en gras:

La balise <b> met le texte en gras.

Souligner le texte
La balise <u> souligne le texte.

Mettre le texte en italique

La balise <i> met le texte en italique.

A. ABATAL 26
 Introduc tion Introduction HTML
HTM L Avantages HTML
CSS L’hypertexte
JavaScript Outils de développement web
Balises

Balises HTML: Organiser le texte

<!D OCTYP E htm l>
<ht ml>
<hea d>
<tit le>Pr emièr e pag e HTM L</tit le>
<met a cha rset="u tf-8">
</hea d>
<bo dy>
<h1 >Le l angag e HTM L</h1 >
<p>
<b> HTML< /b>si gnifi e <i> Hyper Text Mar kup Lan guage</i >.
Ce langa ge es t uti lisé pour marqu er <u >séma ntiqu ement </u> un co ntenu .
</p >
</b ody>
</h tml>

A. ABATAL
 Introduc tion Introduction HTML
HTM L Avantages HTML
CSS L’hypertexte
JavaScript Outils de développement web
Balises

Balises HTML: Organiser le texte

Texte barré
La balise <s> ou <strike> barre le texte.
<!D OCTYP E htm l>
<ht ml>
<he ad>
<ti tle>P remiè re pa ge HT ML</t itle>
<me ta ch arset ="utf-8">
</h ead>
<bo dy>
<h1>Le lan gage HTM L</h1>
<p>
<s> Ce tex te est bar ré </s > <br />
<st rike> Ce tex te est bar ré </s trike > <br />
</p >
</b ody>
</h tml>

A. ABATAL
 Introduc tion Introduction HTML
HTM L Avantages HTML
CSS L’hypertexte
JavaScript Outils de développement web
Balises

Balises HTML: Organiser le texte

La couleur et la taille de texte
La balise <font> avec ses attributs color et size( taille de 1 à
7) permet de modifier la couleur et la taille de texte.
<!D OCTYP E htm l>
<ht ml>
<hea d>
<tit le>Pr emièr e pag e HTM L</tit le>
<met a cha rset="u tf-8">
</hea d>
<bo dy>
<h1 >Le l angag e HTM L</h1 >
<p>
<fo nt col or="blu e" siz e="5" > Un texte colo ré </ font> <br/>
<fo nt col or="# 80808 0" si ze="6 "> Un autr e tex te co loré </fon t>
</p >
</b ody>
</h tml>

A. ABATAL
 Introduc tion Introduction HTML
HTM L Avantages HTML
CSS L’hypertexte
JavaScript Outils de développement web
Balises

Balises HTML: Organiser le texte

Mettre le texte en exposant et indice
La balise <sup> met le texte en exposant alors que la balise
<sub> le met en indice.
<!D OCTYP E htm l>
<ht ml>
<hea d>
<tit le>Pr emièr e pag e HTM L</tit le>
<met a cha rset="u tf-8">
</hea d>
<bo dy>
<p>
X < sup> 2 </s up>
H ₂ O
</p >
</b ody>
</h tml>

A. ABATAL
 Introduc tion Introduction HTML
HTM L Avantages HTML
CSS L’hypertexte
JavaScript Outils de développement web
Balises

Balises HTML: Organiser le texte

La mise en valeur (import sémantique)
Pour mettre un texte (mots) en valeur en utilise les balises
<em> (peu important ) et <strong> (important)
<!D OCTYP E htm l>
<ht ml>
<hea d>
<tit le>Pr emièr e pag e HTM L</tit le>
<met a cha rset="u tf-8">
</hea d>
<bo dy>
<p>
Cec i est mon premi er te st, a lors <em> s oyez indul gents
</em> <br />
Ava nt de fair e le truc X il est < str ong> n écess aire
</str ong> d e fai re le truc Y av ant.
</p >
</b ody>
</h tml>
 Introduc tion Introduction HTML
HTM L Avantages HTML
CSS L’hypertexte
JavaScript Outils de développement web
Balises

Balises HTML: Organiser le texte

Marquer le texte:
La balise <mark> permet de faire ressortir visuellement une
portion de texte.
<!D OCTYP E htm l>
<ht ml>
<hea d>
<tit le>Pr emièr e pag e HTM L</tit le>
<met a cha rset="u tf-8">
</hea d>
<bo dy>
<p> Ceci est mon < mark> prem ier t est</ mark> </p>
</b ody>
</h tml>

A. ABATAL
 Introduc tion Introduction HTML
HTM L Avantages HTML
CSS L’hypertexte
JavaScript Outils de développement web
Balises

Balises HTML: Organiser le texte

Lignes horizontale: La balise <hr> permet de tracer une ligne
horizontale.
<hr/> Trait horizontal (centré par défaut)
<hr width="x%" /> Largeur du trait en % (100 % = largeur de la
page)
<hr height=x /> Hauteur du trait en pixels
<hr size=x /> Hauteur du trait en pixels
<hr align=center /> Trait centré (défaut)

<hr align=left /> Trait aligné à gauche

<hr align=right/> Trait aligné à droite
<hr noshade/> Trait sans effet d’ombrage
 Introduc tion Introduction HTML
HTM L Avantages HTML
CSS L’hypertexte
JavaScript Outils de développement web
Balises

Balises HTML: Organiser le texte

<!D OCTYP E htm l>
<ht ml>
<hea d>
<tit le>Pr emièr e pag e HTM L</tit le>
<met a cha rset="u tf-8">
</hea d>
<bo dy>
<hr/>
<hr ali gn="c enter " siz e="6" wid th="20%" nos hade/>
<hr ali gn="c enter " siz e="6" wid th ="100" / >
<hr ali gn="lef t" s ize="10" wid th="50%" nos hade/>
<hr ali gn="r ight" size ="6" wid th="50%" nos hade/>
</b ody>
</h tml>

A. ABATAL
 Introduc tion Introduction HTML
HTM L Avantages HTML
CSS L’hypertexte
JavaScript Outils de développement web
Balises

Balises HTML: Les listes non-ordonnées

Liste à puces non ordonnée :
La balise <ul> permet de structurer notre texte, les éléments
de la liste s’écrivent entre <li> et </li>
<!D OCTYP E htm l>
<ht ml>
<hea d>
<tit le>Li ste n on-ord onnée en H TML</tit le>
<met a cha rset="u tf-8">
</hea d>
<bo dy>
<h2 >List e non-ord onnée </h2>
<ul>
<li > Elé ment 1 </l i>
<li > Elé ment 2 </l i>
</ul>
</b ody>
</h tml>

A. ABATAL
 Introduc tion Introduction HTML
HTM L Avantages HTML
CSS L’hypertexte
JavaScript Outils de développement web
Balises

Balises HTML: Les listes ordonnées

Liste à puces ordonnée :
La balise <ol> permet de structurer notre texte, les éléments
de la liste s’écrivent entre <li> et </li>
<!D OCTYP E htm l>
<ht ml>
<hea d>
<tit le>Li ste n on-ord onnée en H TML</tit le>
<met a cha rset="u tf-8">
</hea d>
<bo dy>
<h2 >List e ord onnée </h2>
<ol>
<li > Elé ment 1 </l i>
<li > Elé ment 2 </l i>
</ol>
</b ody>
</h tml>

A. ABATAL
 Introduc tion Introduction HTML
HTM L Avantages HTML
CSS L’hypertexte
JavaScript Outils de développement web
Balises

Balises HTML: Les liens

Lien vers un autre site (page) :
La balise <a> avec son attribut href permet de faire un lien
soit vers un autre site (internet) soit une page de note site.
<a href= " chemin vers une autre site ou autre page " > un
titre pour le lien qui sera apparait en bleu et souligné </a>
<!D OCTYP E htm l>
<ht ml>
<hea d>
<tit le>Li ste n on-ord onnée en H TML</tit le>
<met a cha rset="u tf-8">
</hea d>
<bo dy>
<h1 >Les liens </h1>
<p> Cliqu ez su r <a hre f="h ttp:/ /wiki pedia .org" >ce l ien < /a>po ur all er su r Wik ipédi a.</p >
</b ody>
</h tml>
 Introduc tion Introduction HTML
HTM L Avantages HTML
CSS L’hypertexte
JavaScript Outils de développement web
Balises

Balises HTML: Les liens

Lien vers une ancre

Une ancre c’est un point de repère qui permet de sauter
directement vers la partie qui vous intéresse, pour ce faire il
suffit rajouter un attribut identifiant « id » à la balise.

A. ABATAL
 Introduc tion Introduction HTML
HTM L Avantages HTML
CSS L’hypertexte
JavaScript Outils de développement web
Balises

Balises HTML: Les liens

La première étape consiste à ajouter l'attribut id suivi de = pour

donner un nom à l'ancre entre " " : <h2 id="mon_ancre">Titre</h2>
Cas n°1 : l'ancre est plus bas sur la même page.
Dans ce premier cas, on crée un lien avec l'attribut href (il
contient un dièse # suivi du nom de l'ancre) :
<a href="#mon_ancre">Aller vers l'ancre</a>

Cas n°2 : l'ancre est située dans une autre page

<a href="[Link]#Accueil">L’accueil</a>

A. ABATAL
 Introduc tion Introduction HTML
HTM L Avantages HTML
CSS L’hypertexte
JavaScript Outils de développement web
Balises

Balises HTML: Les liens

…
<h1 id="section3"> Section 3 </h1>
<p> ... beaucoup de texte ... </p>
<h1 id="section4"> Section 4 </h1>
<p> ... beaucoup de texte ... </p>
<h1 id="section5"> Section 5 </h1>
<br />
Aller directement à la section 5
<a href="#section5"> Section 5</a>
<br />
Aller directement à la section 3
<a href="#section3"> Section 3</a>
…

A. ABATAL
 Introduc tion Introduction HTML
HTM L Avantages HTML
CSS L’hypertexte
JavaScript Outils de développement web
Balises

Balises HTML: Les liens

Un lien qui affiche une infobulle au survol :
L'attribut title affiche une bulle d'aide lorsqu'on pointe sur le
lien.

…
Bonjour pour accéder au site de l’ENSA<br />
<a href="[Link] " title="ENSA"> cliquez ici </a>

L’ENSA
 Introduc tion Introduction HTML
HTM L Avantages HTML
CSS L’hypertexte
JavaScript Outils de développement web
Balises

Balises HTML: Les liens

Afficher le site dans une autre fenêtre
L’attribut target="_blank" fait en sorte que le lien hypertexte
ouvre un nouvel onglet

…
Bonjour pour accéder au site de l’ENSA<br/>
<a href="[Link] target="_blank"> cliquez ici </a>
…

L’ENSA

A. ABATAL
 Introduc tion Introduction HTML
HTM L Avantages HTML
CSS L’hypertexte
JavaScript Outils de développement web
Balises

Balises HTML: Les liens

Un lien pour envoyer un e-mail :
Recevoir des email à partir de votre page.
href="[Link] crée un lien hypertexte
qui ouvre la boîte mail avec un nouveau message vide.

…
<a href= "[Link] > Envoyez-moi un e-mail </a>
…

A. ABATAL
 Introduc tion Introduction HTML
HTM L Avantages HTML
CSS L’hypertexte
JavaScript Outils de développement web
Balises

Balises HTML: Les liens

NB :
Un lien hypertexte s'appelle un lien absolu : il indique une
adresse complète.
Un lien hypertexte s'appelle un lien relatif : il indique où
trouver notre fichier HTML.

A. ABATAL
 Introduc tion Introduction HTML
HTM L Avantages HTML
CSS L’hypertexte
JavaScript Outils de développement web
Balises

Balises HTML: Les images

Insérer une image:

La balise orpheline <img/> permet l’insertion d’une
image.
Pour fonctionner correctement, la balise <img> doit être
accompagnée de deux attributs :
1. src : cet attribut permet d'indiquer la source de
l'image.
2. alt : cet attribut permet de donner à l'image une
description alternative.
3. title : afficher une bulle d'aide sur vos images,
L'attribut title est facultatif, contrairement à alt

A. ABATAL
 Introduc tion Introduction HTML
HTM L Avantages HTML
CSS L’hypertexte
JavaScript Outils de développement web
Balises

Balises HTML: Les images

Une description alternative est un court texte qui décrit ce que

contient l'image.

Ce texte alternatif sera :

inscrit à la place de l'image si elle ne peut pas être
affichée au moment du chargement de la page web
(cela arrive)
audio-décrit par les navigateurs de personnes
présentant un handicap (trouble de la vue, non-
voyants)

A. ABATAL
 Introduc tion Introduction HTML
HTM L Avantages HTML
CSS L’hypertexte
JavaScript Outils de développement web
Balises

Balises HTML: Les images

…
<img src= "mon_site\ensaj_logo.png" align=[top]
border=3 alt="description" title= »ENSA" />
…

La description sera affiché à la place de l'image si celle-ci ne peut

pas être téléchargée, au survol « infobule » sera affiché
 Introduc tion Introduction HTML
HTM L Avantages HTML
CSS L’hypertexte
JavaScript Outils de développement web
Balises

Balises HTML: Les miniatures cliquables

Une miniature cliquable est une image réduite sur une page web
qui agit comme un lien cliquable vers une autre page ou une autre
ressource en ligne.

Si votre image est de grande taille, il est conseillé d'en afficher la

miniature cliquable sur votre site. De cette manière vos pages web
mettront moins de temps à s'afficher. Si vos visiteurs souhaitent voir
vos images en taille originale, ils n'auront qu'à cliquer dessus.

A. ABATAL
 Introduc tion Introduction HTML
HTM L Avantages HTML
CSS L’hypertexte
JavaScript Outils de développement web
Balises

Balises HTML: Les miniatures cliquables

…
<a href="C:\Bureau\ensaj_logo.png">
<img src="C:\Bureau\logo_ensaj_mini.png" alt="Miniature
cliquable">
</a>

A. ABATAL
 Introduc tion CSS
Introduc tion Syntaxe
HTM L Sélecteurs
CSS Intégration dans HT ML
Les propriétés CSS, les couleurs, les bordures

Introduction au CSS

Problèmes HTML :
HTML n’a jamais été destiné à contenir des balises de mise en forme
d’une page web!
HTML a été créé pour décrire le contenu d’une page web
Résolution par le CSS :
Permet la mise en page d’un contenu
Appliquer un style à un élément pour changer son apparence Avant
d’appliquer un style il faut obligatoirement
sélectionner un ou plusieurs éléments.

A. ABATAL
 Introduc tion Introduction HTML
HTM L Avantages HTML
CSS L’hypertexte
JavaScript Outils de développement web
Balises

Introduction au CSS

CSS : Cascading Style Sheets (pour Feuilles de style en

cascade), c'est un autre langage qui vient compléter le HTML.
Il s’agit d’un langage de style qui permet de gérer la mise en
forme de des site web.

A. ABATAL
 Introduc tion Introduction HTML
HTM L Avantages HTML
CSS L’hypertexte
JavaScript Outils de développement web
Balises

Introduction au CSS

A. ABATAL
 Introduc tion CSS
Introduc tion Syntaxe
HTM L Sélecteurs
CSS Intégration dans HT ML
Les propriétés CSS, les couleurs, les bordures

L’utilisation du CSS
Les points desélection à l’élément HTML que vous voulez appliquer le
style. L’intégration de code CSS peut se faire en trois méthodes différentes
:
1. Dans un fichier avec l’extension .css ([Link] par exemple) (méthode la
plus recommandée). Créer le fichier [Link] dans le même dossier que
la page HTML, sinon spécifier le chemin du fichier
(mon_dossier\...\[Link]).

…
<head>
<meta charset="utf-8"> <title>Ma page</title>
<link rel="stylesheet" type="text/css" href="[Link]" >
</head>
…

EMSI 2AP HONORIS F. AIT BENNACER

 Introduc tion CSS
Introduc tion Syntaxe
HTM L Sélecteurs
CSS Intégration dans HT ML
Les propriétés CSS, les couleurs, les bordures

L’utilisation du CSS

[Link] [Link]

A. ABATAL
 Introduc tion CSS
Introduc tion Syntaxe
HTM L Sélecteurs
CSS Intégration dans HT ML
Les propriétés CSS, les couleurs, les bordures

L’utilisation du CSS
2. Dans l'en-tête <head> du fichier HTML entre la balise <style> et </style>

[Link]
 Introduc tion CSS
Introduc tion Syntaxe
HTM L Sélecteurs
CSS Intégration dans HT ML
Les propriétés CSS, les couleurs, les bordures

L’utilisation du CSS
3. Directement dans les balises du fichier HTML via un attribut style (méthode
la moins recommandée).
<html>
<head>
<title>titre de la page</title>
[Link]
<meta charset=UTF-8" />
</head>
<body style="background-color: yellow">
<h1 style="color: green"> voici un titre </h1>
</body>
</html>
 Introduc tion CSS
Introduc tion Syntaxe
HTM L Sélecteurs
CSS Intégration dans HT ML
Les propriétés CSS, les couleurs, les bordures

L’utilisation du CSS
La première méthode et beaucoup plus pratique car on peut appliquer la
même mise en forme sur toutes les balises qu’on veut, alors les autres
méthodes ne le permettent pas. Il faut définir le style pour chaque balise.

Les trois méthodes donnent même résultat

 Introduc tion CSS
Introduc tion Syntaxe
HTM L Sélecteurs
CSS Intégration dans HT ML
Les propriétés CSS, les couleurs, les bordures

L’utilisation du CSS
Le même code CSS est indiqué une fois pour toutes dans un fichier CSS : c'est
plus simple !
 Introduc tion CSS
Introduc tion Syntaxe
HTM L Sélecteurs
CSS Intégration dans HT ML
Les propriétés CSS, les couleurs, les bordures

Syntaxe de base
Schématiquement, une feuille de style CSS ressemble donc à ça :
Syntaxe [Link]

On commence par le nom de la balise (par exemple h1), on met les propriétés
(une ou plusieurs) et valeurs entre deux accolades
« { } ». Chaque propriété est suivie du symbole "deux-points« « : » puis de sa
valeur correspondante. Enfin, chaque ligne se termine par un point-virgule « ;
».
 Introduc tion CSS
Introduc tion Syntaxe
HTM L Sélecteurs
CSS Intégration dans HT ML
Les propriétés CSS, les couleurs, les bordures

Syntaxe de base
[Link] [Link]
<html> h1 {
<head> color : blue ;
<title>titre de la page</title> }
<meta content="text/html; charset=UTF-8" /> b{
<link rel="stylesheet" type="text/css" href="[Link]"> color : blue ;
</head> }
<body>
<h1> voici un titre en bleu </h1>
<h2> ce mot <b> bonjour</b> sera en bleu </h2>
</body>
</html>
 Introduc tion CSS
Introduc tion Syntaxe
HTM L Sélecteurs
CSS Intégration dans HT ML
Les propriétés CSS, les couleurs, les bordures

Syntaxe de base
Schématiquement, une feuille de style CSS ressemble donc à ça :
Si plusieurs (≥2) balises doivent avoir la même mise en forme. On déclare les
noms des balises et on les sépare par une virgule « , » comme suit : ces deux
fichiers sont équivalents.

h1 {
color : blue ;
[Link]
[Link] }
h2 { h1, h2, b { color
color : blue ; : blue ;
} }
b{
color : blue ;
}
 Introduc tion CSS
Introduc tion Syntaxe
HTM L Sélecteurs
CSS Intégration dans HT ML
Les propriétés CSS, les couleurs, les bordures

Syntaxe de base
Les commentaires dans du CSS : pour insérer un commentaire en CSS Tapez
/* suivi de votre commentaire, puis */ pour terminer votre commentaire. Le
commentaire ne s'interprète pas.

[Link] Appliquer un style à une balise (p, h1 ,h2, …)

cela implique que TOUS les paragraphes
soient écrits par exemple en bleu.

Comment appliquer un style pour que

seulement certains paragraphes soient écrits
d'une manière différente
!?
 Introduc tion CSS
Introduc tion Syntaxe
HTM L Sélecteurs
CSS Intégration dans HT ML
Les propriétés CSS, les couleurs, les bordures

Class et Id
Class : On peut placer notre code CSS dans un attribut style sur la balise que
l'on vise (méthode 3), mais c’est moins recommandé (il vaut mieux utiliser un
fichier CSS externe (méthode 1)).

Pour résoudre ce problème on va utiliser deux attributs spéciaux qui

fonctionnent sur touts les balises : class et id.