Programmation Web

Prof. Toufik Mzili

 Introduction
HTML Plan
CSS
JavaScript

Plan du cours

1 HTML
2 CSS
3
JavaScript
4

1
 Introduction Introduction HTML
HTML 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

EMSI 2AP HONORIS F. AIT BENNACER 2

 Introduction Introduction HTML
HTML 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.

EMSI 2AP HONORIS F. AIT BENNACER 3

 Introduction Introduction HTML
HTML 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.

EMSI 2AP HONORIS F. AIT BENNACER 4

 Introduction Introduction HTML
HTML 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.

EMSI 2AP HONORIS F. AIT BENNACER 5

 Introduction Introduction HTML
HTML 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

EMSI 2AP HONORIS F. AIT BENNACER 6

 Introduction Introduction HTML
HTML 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.

EMSI 2AP HONORIS F. AIT BENNACER 7

 Introduction Introduction HTML
HTML 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 : index.html - acceuil.html

EMSI 2AP HONORIS F. AIT BENNACER 8

 Introduction Introduction HTML
HTML Avantages HTML
CSS L’hypertexte
JavaScript Outils de développement web
Balises

À quoi ressemble un fichier HTML?

Test.html

Résultat

EMSI 2AP HONORIS F. AIT BENNACER 9

 Introduction Introduction HTML
HTML 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>

EMSI 2AP HONORIS F. AIT BENNACER 10

 Introduction Introduction HTML
HTML Avantages HTML
CSS L’hypertexte
JavaScript Outils de développement web
Balises

Balises en HTML

Exemple:

EMSI 2AP HONORIS F. AIT BENNACER 11

 Introduction Introduction HTML
HTML 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 />
EMSI 2AP HONORIS F. AIT BENNACER 12
 Introduction Introduction HTML
HTML 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/image.jpg">

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

EMSI 2AP HONORIS F. AIT BENNACER 13

 Introduction Introduction HTML
HTML 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 :

EMSI 2AP HONORIS F. AIT BENNACER 14

 Introduction Introduction HTML
HTML 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.

EMSI 2AP HONORIS F. AIT BENNACER 15

 Introduction Introduction HTML
HTML 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.

EMSI 2AP HONORIS F. AIT BENNACER 16

 Introduction Introduction HTML
HTML 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>

EMSI 2AP HONORIS F. AIT BENNACER 17

 Introduction Introduction HTML
HTML 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
-->
...

EMSI 2AP HONORIS F. AIT BENNACER 18

 Introduction Introduction HTML
HTML 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>

EMSI 2AP HONORIS F. AIT BENNACER 19

 Introduction Introduction HTML
HTML Avantages HTML
CSS L’hypertexte
JavaScript Outils de développement web
Balises

Balises HTML: Les paragraphes

Exemple:

<!DOCTYPE html>
...
<body>
...
< !--Deux paragraphes différents-->
<p>Voici mon premier paragraphe.</p>
<p>Et en voilà un second !</p>
</body>
</html>

EMSI 2AP HONORIS F. AIT BENNACER 20

 Introduction Introduction HTML
HTML 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>.
< !DOCTYPE html>
< html>
<head>
<title>Première p age HTML</title>
<meta charset= "utf-8">
</head>

<body>
< !--Les espaces ne seront pas affichés-->
<!--br nous sert à créer des retours à la ligne-->
<p>Voici <br>mon <br>premier <br>paragraphe.</p>
<p>Et en voilà un second !</p>
</body>
< /html>

EMSI 2AP HONORIS F. AIT BENNACER 21

 Introduction Introduction HTML
HTML Avantages HTML
CSS L’hypertexte
JavaScript Outils de développement web
Balises

Balises HTML: Les espaces et retours à la ligne

Résultat:

EMSI 2AP HONORIS F. AIT BENNACER 22

 Introduction Introduction HTML
HTML 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.

EMSI 2AP HONORIS F. AIT BENNACER 23

 Introduction Introduction HTML
HTML Avantages HTML
CSS L’hypertexte
JavaScript Outils de développement web
Balises

Balises HTML: Les titres

<!DOCTYPE html>
<html>
<head>
<title>Première page HTML</title>
<meta charset= " utf-8">
</head>
<body>
< !--Un titre tres important-->
<h1>Mon titre principal</h1>
<!--Un titre important-->
<h2>Je suis un t itre important</h2>
< !--Un autre titre important-->
<h2>Moi aussi, je suis un titre important</h2>
< !--Un titre un peu moins important-->
<h3>Je suis un t itre d’important moyenne</h3>
<h4>Un titre pas très important</h4>
<h5>Un titre peu important</h5>
<h6>Un titre vraiment peu important</h6>
</body>
</html>

EMSI 2AP HONORIS F. AIT BENNACER 24

 Introduction Introduction HTML
HTML Avantages HTML
CSS L’hypertexte
JavaScript Outils de développement web
Balises

Balises HTML: Les titres

EMSI 2AP HONORIS F. AIT BENNACER 25

 Introduction Introduction HTML
HTML 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.

EMSI 2AP HONORIS F. AIT BENNACER 26

 Introduction Introduction HTML
HTML Avantages HTML
CSS L’hypertexte
JavaScript Outils de développement web
Balises

Balises HTML: Organiser le texte

<!DOCTYPE html>
<html>
< head>
<title>Première page HTML</title>
<meta charset="utf-8">
< /head>
<body>
<h1>Le langage HTML</h1>
<p>
<b>HTML</b>signifie <i>HyperText Markup Language</i>.
Ce langage est utilisé pour marquer <u>sémantiquement</u> un contenu.
</p>
</body>
</html>

EMSI 2AP HONORIS F. AIT BENNACER

 Introduction Introduction HTML
HTML 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.
< !DOCTYPE h tml>
< html>
< head>
<title>Première page HTML</title>
<meta charset="utf-8">
< /head>
< body>
<h1>Le langage HTML</h1>
<p>
<s> Ce texte est barré </s> < br />
<strike> Ce texte est barré </strike> < br />
</p>
< /body>
< /html>

EMSI 2AP HONORIS F. AIT BENNACER

 Introduction Introduction HTML
HTML 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.
<!DOCTYPE html>
<html>
< head>
<title>Première page HTML</title>
<meta charset="utf-8">
< /head>
<body>
<h1>Le langage HTML</h1>
<p>
<font color="blue" size="5"> Un texte coloré </font> < br/>
<font color="#808080" s ize="6"> U n a utre t exte c oloré < /font>
</p>
</body>
</html>

EMSI 2AP HONORIS F. AIT BENNACER

 Introduction Introduction HTML
HTML 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
_{le met en indice.
<!DOCTYPE html>
<html>
< head>
<title>Première page HTML</title>
<meta charset="utf-8">
< /head>
<body>
<p>
X ²
H < sub> 2} O
</p>
</body>
</html>

EMSI 2AP HONORIS F. AIT BENNACER

 Introduction Introduction HTML
HTML 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)
<!DOCTYPE html>
<html>
< head>
<title>Première p age H TML</title>
<meta charset="utf-8">
< /head>
<body>
<p>
Ceci est mon premier test, alors < em> soyez indulgents
</em> < br />
Avant de faire le truc X il est < strong> n écessaire
</strong> de faire le truc Y avant.
</p>
</body>
</html>

EMSI 2AP HONORIS F. AIT BENNACER

 Introduction Introduction HTML
HTML 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.
<!DOCTYPE html>
<html>
< head>
<title>Première p age H TML</title>
<meta charset="utf-8">
< /head>
<body>
<p> Ceci est mon <mark> premier test</mark> </p>
</body>
</html>

EMSI 2AP HONORIS F. AIT BENNACER

 Introduction Introduction HTML
HTML 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
EMSI 2AP HONORIS F. AIT BENNACER
 Introduction Introduction HTML
HTML Avantages HTML
CSS L’hypertexte
JavaScript Outils de développement web
Balises

Balises HTML: Organiser le texte

<!DOCTYPE html>
<html>
<head>
<title>Première page HTML</title>
<meta charset="utf-8">
< /head>
<body>
<hr/>
<hr align="center" size="6" width="20%" noshade/>
<hr align="center" size="6" width ="100" />
<hr align="left" size="10" width="50%" noshade/>
<hr align="right" size="6" width="50%" noshade/>
</body>
</html>

EMSI 2AP HONORIS F. AIT BENNACER

 Introduction Introduction HTML
HTML 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>
<!DOCTYPE html>
<html>
<head>
<title>Liste non-ordonnée en HTML</title>
<meta charset="utf-8">
< /head>
<body>
<h2>Liste non-ordonnée</h2>
<ul>
<li> Elément 1 </li>
<li> Elément 2 </li>
</ul>
</body>
</html>

EMSI 2AP HONORIS F. AIT BENNACER

 Introduction Introduction HTML
HTML 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>
<!DOCTYPE html>
<html>
<head>
<title>Liste non-ordonnée en HTML</title>
<meta charset="utf-8">
< /head>
<body>
<h2>Liste ordonnée</h2>
<ol>
<li> Elément 1 </li>
<li> Elément 2 </li>
</ol>
</body>
</html>

EMSI 2AP HONORIS F. AIT BENNACER

 Introduction Introduction HTML
HTML 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>
<!DOCTYPE html>
<html>
< head>
<title>Liste non-ordonnée en HTML</title>
<meta charset="utf-8">
</head>
<body>
<h1>Les liens</h1>
<p>Cliquez sur <a href="http://wikipedia.org">ce lien </a>pour aller sur Wikipédia.</p>
</body>
</html>

EMSI 2AP HONORIS F. AIT BENNACER

 Introduction Introduction HTML
HTML 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.

EMSI 2AP HONORIS F. AIT BENNACER

 Introduction Introduction HTML
HTML 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="index.html#Accueil">L’accueil</a>

EMSI 2AP HONORIS F. AIT BENNACER

 Introduction Introduction HTML
HTML 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>
…

EMSI 2AP HONORIS F. AIT BENNACER

 Introduction Introduction HTML
HTML 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 la EMSI < br />
<a href="https://www.emsi.ma/" title="EMSI"> cliquez ici </a>

EMSI 2AP HONORIS F. AIT BENNACER

 Introduction Introduction HTML
HTML 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 la EMSI < br/>
<a href="http://www.emsi.ma/" target="_blank"> cliquez ici </a>
…

EMSI 2AP HONORIS F. AIT BENNACER

 Introduction Introduction HTML
HTML 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="mailto:votrenom@email.com" crée un lien hypertexte
qui ouvre la boîte mail avec un nouveau message vide.

…
<a href= "mailto:votrenom@email.com" > Envoyez-moi un e-mail </a>
…

EMSI 2AP HONORIS F. AIT BENNACER

 Introduction Introduction HTML
HTML 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.

EMSI 2AP HONORIS F. AIT BENNACER

 Introduction Introduction HTML
HTML 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

EMSI 2AP HONORIS F. AIT BENNACER

 Introduction Introduction HTML
HTML 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)

EMSI 2AP HONORIS F. AIT BENNACER

 Introduction Introduction HTML
HTML Avantages HTML
CSS L’hypertexte
JavaScript Outils de développement web
Balises

Balises HTML: Les images

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

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é

EMSI 2AP HONORIS F. AIT BENNACER

 Introduction Introduction HTML
HTML 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.

EMSI 2AP HONORIS F. AIT BENNACER

 Introduction Introduction HTML
HTML Avantages HTML
CSS L’hypertexte
JavaScript Outils de développement web
Balises

Balises HTML: Les miniatures cliquables

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

EMSI 2AP HONORIS F. AIT BENNACER

 Introduction Introduction HTML
HTML Avantages HTML
CSS L’hypertexte
JavaScript Outils de développement web
Balises

Balises HTML: Les tableaux

•<table> – balise d’ouverture et fermeture du tableau

•<tr> – permet de créer une ligne. AJOUTER UN TITRE
•<th> – permet de créer un titre de colonne. AU TABLEAU HTML
•<td> – permet de créer une cellule dans la ligne.
<table>
<caption>Mes
clients</caption>
•<table> <tr><td>Frédéric</td><td>Barsoti</td></tr> <thead>
<tr><td>Mathilde</td><td>Dupont</td></tr>
<tr><td>Omar</td><td>Malalid</td></tr>
<tr><td>Camille</td><td>Lemaire</td></tr> </table>

EMSI 2AP HONORIS F. AIT BENNACER

 Introduction Introduction HTML
HTML Avantages HTML
CSS L’hypertexte
JavaScript Outils de développement web
Balises

Balises HTML: AJOUTER UN EN-TÊTE

AJOUTER UN EN-TÊTE
<table> <tr><th>Prénom</th><th>Nom</th></tr>
<tr><td>Frédéric</td><td>Barsoti</td></tr>
<tr><td>Mathilde</td><td>Dupont</td></tr>
<tr><td>Omar</td><td>Malalid</td></tr>
<tr><td>Camille</td><td>Lemaire</td></tr> </table>

EMSI 2AP HONORIS F. AIT BENNACER

 Introduction Introduction HTML
HTML Avantages HTML
CSS L’hypertexte
JavaScript Outils de développement web
Balises

FUSIONNER LES COLONNES D’UN TABLEAU HTML

<table> <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>5</td><td>6</td><td>7</td><td>8</td></tr>
<tr><td>9</td><td>10</td><td>11</td><td>12</td></tr> <tr><td
colspan="2">Fusion colonne</td><td>15</td><td>16</td></tr>
</table>

EMSI 2AP HONORIS F. AIT BENNACER

 Introduction Introduction HTML
HTML Avantages HTML
CSS L’hypertexte
JavaScript Outils de développement web
Balises

FUSIONNER LES LIGNES D’UN TABLEAU HTML

<table width="70%” border="10” bordercolor="red">

<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>5</td><td>6</td><td>7</td><td>8</td></tr> <tr><td
rowspan="2">9</td><td>10</td><td>11</td><td>12</td></tr>
<tr><td>14</td><td>15</td><td>16</td></tr> </table>

EMSI 2AP HONORIS F. AIT BENNACER

 Introduction Introduction HTML
HTML Avantages HTML
CSS L’hypertexte
JavaScript Outils de développement web
Balises

LES FORMULAIRES

Type Description

<input type="text"> Affiche un champ de saisie de texte sur une seule ligne

<input type="radio"> Affiche une case d’option (pour sélectionner l’un des
nombreux choix)

<input type="checkbox"> Affiche une case à cocher (pour sélectionner zéro ou plus
parmi de nombreux choix)

<input type="submit"> Affiche un bouton Soumettre (pour soumettre le formulaire)

<input type="button"> Affiche un bouton cliquable

EMSI 2AP HONORIS F. AIT BENNACER

 Introduction CSS
Introduction Syntaxe
HTML Sélecteurs
CSS Intégration dans HTML
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.

EMSI 2AP HONORIS F. AIT BENNACER

 Introduction Introduction HTML
HTML 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.

EMSI 2AP HONORIS F. AIT BENNACER

 Introduction Introduction HTML
HTML Avantages HTML
CSS L’hypertexte
JavaScript Outils de développement web
Balises

Introduction au CSS

EMSI 2AP HONORIS F. AIT BENNACER

 Introduction CSS
Introduction Syntaxe
HTML Sélecteurs
CSS Intégration dans HTML
Les propriétés CSS, les couleurs, les bordures

L’utilisation du CSS
Les points de sé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 (style.css par exemple)
(méthode la plus recommandée). Créer le fichier style.css dans le
même dossier que la page HTML, sinon spécifier le chemin du
fichier (mon_dossier\...\style.css).

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

EMSI 2AP HONORIS F. AIT BENNACER

 Introduction CSS
Introduction Syntaxe
HTML Sélecteurs
CSS Intégration dans HTML
Les propriétés CSS, les couleurs, les bordures

L’utilisation du CSS

test.html style.css

EMSI 2AP HONORIS F. AIT BENNACER

 Introduction CSS
Introduction Syntaxe
HTML Sélecteurs
CSS Intégration dans HTML
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>

test.html

EMSI 2AP HONORIS F. AIT BENNACER

 Introduction CSS
Introduction Syntaxe
HTML Sélecteurs
CSS Intégration dans HTML
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>
page.html
<meta charset=UTF-8" />
</head>
<body style="background-color: yellow">
<h1 style="color: green"> voici un titre </h1>
</body>
</html>

EMSI 2AP HONORIS F. AIT BENNACER

 Introduction CSS
Introduction Syntaxe
HTML Sélecteurs
CSS Intégration dans HTML
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

EMSI 2AP HONORIS F. AIT BENNACER

 Introduction CSS
Introduction Syntaxe
HTML Sélecteurs
CSS Intégration dans HTML
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 !

EMSI 2AP HONORIS F. AIT BENNACER

 Introduction CSS
Introduction Syntaxe
HTML Sélecteurs
CSS Intégration dans HTML
Les propriétés CSS, les couleurs, les bordures

Syntaxe de base
Schématiquement, une feuille de style CSS ressemble donc à ça :
Syntaxe Exemple.css

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 « ; ».
EMSI 2AP HONORIS F. AIT BENNACER
 Introduction CSS
Introduction Syntaxe
HTML Sélecteurs
CSS Intégration dans HTML
Les propriétés CSS, les couleurs, les bordures

Syntaxe de base
Test.html style.css
<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="style.css"> color : blue ;
</head> }
<body>
<h1> voici un titre en bleu </h1>
<h2> ce mot <b> bonjour</b>sera en bleu </h2>
</body>
</html>

EMSI 2AP HONORIS F. AIT BENNACER

 Introduction CSS
Introduction Syntaxe
HTML Sélecteurs
CSS Intégration dans HTML
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 ;
style.css
style.css }
h2 { h1, h2, b { color
color : blue ; : blue ;
} }
b{
color : blue ;
}
EMSI 2AP HONORIS F. AIT BENNACER
 Introduction CSS
Introduction Syntaxe
HTML Sélecteurs
CSS Intégration dans HTML
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.

style.css 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 !?

EMSI 2AP HONORIS F. AIT BENNACER

 Introduction CSS
Introduction Syntaxe
HTML Sélecteurs
CSS Intégration dans HTML
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.

EMSI 2AP HONORIS F. AIT BENNACER