Université Abdelmalek Essaâdi

Faculté Polydisciplinaire à Larache

Pr. Moussab CHBEINE

Plan : 2
 Introduction
 Introduction au HTML et CSS
 HTML
 Les éléments en html
 Les attributs en html
 Les tableaux
 Création des formulaires
 CSS
 Utilité
 Syntaxe ( Sélecteurs, Propriétés, Valeurs)
 Attribut « style »
 Id et Class
 Div et Span
POURQUOI APPRENDRE LE HTML &
LE CSS ?
• LES LANGAGES HTML ET CSS SONT INCONTOURNABLES
CAR N’ONT PAS DE CONCURRENT ET SONT À LA BASE
DE TOUT PROJET DE DÉVELOPPEMENT WEB

• FACILE À APPRENDRE
 Introduction au HTML et CSS 4
• 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.

• CSS SIGNIFIE CASCADING STYLESHEETS, SOIT « FEUILLES DE STYLE EN

CASCADE ». IL A ÉTÉ CRÉÉ EN 1996 ET A POUR RÔLE DE METTRE EN
FORME DU CONTENU EN LUI APPLIQUANT CE QU’ON APPELLE DES
STYLES.
 Introduction 5
IL NE FAUT JAMAIS UTILISER LE HTML POUR FAIRE LE TRAVAIL DU CSS :

•HTML EST UTILISÉ POUR BALISER UN CONTENU, C’EST À DIRE POUR LE

STRUCTURER ET LUI DONNER DU SENS. LE HTML SERT, ENTRE AUTRES CHOSES, À
INDIQUER AUX NAVIGATEURS QUEL TEXTE DOIT ÊTRE CONSIDÉRÉ COMME UN
PARAGRAPHE, QUEL TEXTE DOIT ÊTRE CONSIDÉRÉ COMME UN TITRE, QUE TEL
CONTENU EST UNE IMAGE OU UNE VIDÉO.

•CSS EST UTILISÉ POUR APPLIQUER DES STYLES À UN CONTENU, C’EST-À-DIRE À

LE METTRE EN FORME. AINSI, AVEC LE CSS, ON POURRA CHANGER LA
COULEUR OU LA TAILLE D’UN TEXTE, POSITIONNER TEL CONTENU À TEL ENDROIT
DE NOTRE PAGE WEB OU AJOUTER DES BORDURES OU DES OMBRES AUTOUR
D’UN CONTENU.
 Introduction 6
→ Historique de HTML

Le HTML a été inventé par Tim Berners-Lee en 1989 alors qu'il travaillait au CERN,
l'organisation européenne pour la recherche nucléaire. Son objectif était de créer un
système permettant aux chercheurs du monde entier de partager leurs travaux. En
1991, Berners-Lee a publié sur Internet la première page web, écrite en HTML.
• HTML 2.0 (1995) : Première version officielle, avec de
nouvelles balises et attributs.
• HTML 3.2 (1997) : Ajout de nouvelles balises et retrait des éléments obsolètes.
• HTML 4.0 (1997) : Introduction de la séparation contenu/présentation,
encourageant l’utilisation de CSS.
• HTML 4.01 (1999) : Corrections mineures et améliorations.
• XHTML 1.0 : Langage basé sur XML, mais peu adopté.
• HTML5 (2014) : Version actuelle, avec support pour multimédia, interactivité,
stockage local, et géolocalisation.
 Introduction 7
→ HISTORIQUE DE CSS
CSS a été proposé par Håkon Wium Lie en 1994, alors qu'il travaillait au CERN avec Tim
Berners-Lee. L'objectif était de séparer le contenu de la présentation, permettant ainsi une plus
grande flexibilité et une maintenance simplifiée des sites web. En 1996, la première
spécification officielle, CSS1, a été publiée par le W3C, introduisant des styles de base tels que
la mise en forme des polices et des couleurs.
• CSS1 (1996) : Première spécification officielle, introduisant des styles de base comme la mise
en forme des polices et les couleurs.
• CSS2 (1998) : Ajout de fonctionnalités avancées, telles que le positionnement, les
médias (impression, écran) et le concept de cascade.
• CSS2.1 (2001) : Mise à jour de CSS2, corrigeant des erreurs et clarifiant certaines parties sans
ajouter de nouvelles fonctionnalités majeures.
• CSS3 (2009) : Introduction de modules pour une
gestion et une mise à jour
progressive, incluant des transitions, des transformations et des animations.
• CSS4 (2011 et au-delà) : Développement continu avec de nouvelles fonctionnalités comme les
grilles CSS et les flexbox, bien que CSS4 ne soit pas un standard officiel.
 8
HTML + CSS
LES VERSIONS ACTUELLES : HTML & CSS 9

 HTML5 & CSS3

 En cours de développement
 Introduisent de nouvelles fonctionnalités très
attendues : insérer des vidéos, audio, etc.
L’EDITEUR DE TEXTE 10

 Pour coder en HTML ou en CSS, nous n’avons besoin

que d’un éditeur de texte, gratuit

 Windows = Komodo, NotePad++, Sublime text 3 ....

 Mac = Komodo, TextWrangler ...
 Linux = Komodo, gEdit …
 11

APPRENDRE LE HTML
Les éléments en HTML : 12

 Définissent des objets dans notre page web :

1. L’élément p définit un paragraphe,
2. Les éléments h1, h2, … , h6 définissent des titres,
3. L’élément a définit un lien…
Les balises en HTML 13

Un élément en HTML

Paire de Balise :
Balise orpheline:
Balise ouvrante : <p>
<br/>
Balise fermante : </p>
 Paire de balises et contenu : 14

 Balise orpheline :
LES ATTRIBUTS : 15

La balise ouvrante d’un élément HTML peut contenir des attributs .

C’est quoi des attributs ?

ATTRIBUT : Propriétés utilisées pour donner des indications supplémentaires

aux éléments.

<a href=[Link] Le site YouTube </a>

HEADING, PARAGRAPH, BREAK 16

L’élément p définit un paragraphe.

 L’élément br crée un retour à la ligne.

 Les éléments h1, h2,… jusqu’à h6 définissent des

titres (par ordre d’importance).
EXEMPLES DES TITRES DE h1 à h6 17
STRONG, MARK, EMPHASIS 18

 L’élément strong est utilisé pour définir un

contenu comme important.
 L’élément em est utilisé pour définir un
contenu comme assez important.
 L’élément mark est utilisé pour faire ressortir
du contenu.
L’IMPORTANCE DES TEXTES : 19

STRONG

em

MARK
STRUCTURE D’UNE PAGE EN HTML5 20
<! DOCTYPE html > Balise qui précise le language à utiliser dans notre cas HTML
< html >
< head >
<title > Page HTML </title> Titre de la page HTML
<meta charset = ‘’utf-8’’ > Le codage de la page

</head>

< body >

<h1> Titre </h1>
<p> Paragraphe : <br/> blablablabla </p>

< /body >

< /html >
LES COMMANTAIRES : 21

<!-- Voici un commentaire en HTML -->

Tout le monde peut voir votre code

HTML ! N’écrivez donc pas d’infos sensibles
en commentaires comme des mots de
passe !
EXEMPLE : 22
<!DOCTYPE html>
<html>
<head>
<title> Première page HTML </title>
<meta charset= "utf-8" >
</head>
A la sortie
<body>
< !– Ceci est un commantaire -- >
<h1> Je viens d'écrire un titre en HTML ! </h1>
<p> Et voilà mon premier paragraphe :) </p>
</body>
</html>
 LES LISTES :
23
Les listes HTML vont nous permettre d’ordonner du contenu en l’affichant sous forme
de liste.

Non-ordonnées

Ordonnées
Liste
Définitions

Imbriquées
Les listes non-ordonnées : 24
...
<body>
<h1> Les listes </h1>

<!-- Un exemple de liste non-ordonnée -->

<ul>
<li>Pomme</li>
<li> Vélo </li>
<li>Guitare</li>
</ul>
</body>
…
Les listes ordonnées 25

…
<body>
<h1> ma listes </h1>
<!-- Deux exemples de listes ordonnées -->
<p> Liste n°1 : </p>
<ol>
<li> On naît </li>
<li> On grandit </li>
<li> On meurt </li>
</ol>
< /body>
…
 Les listes de définitions : 26
Role :
Lister des termes et ajouter des définitions ou descriptions pour
chacun de ces termes.
…
<body>
<h1> Les listes </h1>

<!--Une liste de définition -->

<dl> Terme de
description
<dt>HTML : </dt>
<dd> HyperText Markup Language </dd>
</dl>
</body> Terme de
… définition
 Les listes imbriquées : 27
<body>
<h1> Les listes </h1>

<!-- Listes imbriquées -->

<ol>
<li> Introduction </li>
<li>Partie I
<!-- On imbrique une liste non-ordonnée dans une liste ordonnée -- >
<ul>
<li> Définitions </li>
<li> Auteurs </li>
<li> Exemples </li>
</ul>
</li>
<li> Partie II </li>
<li> Conclusion </li>
</ol>
</body>
LIENS INTERNES ET EXTERNES EN HTML : 28

Role :
Un llien en html va sérvir à transporter l’utilisateur vers un autre endroit en
cliquant au-dessus .
 Pour créer un lien en HTML nous utilisons l’élement a (Adresse) avec l’attribut
href .

Externe
Lien
Interne
 Les liens externes en HTML : 29

Les liens externes vont être des liens ramenant vers des pages
d’autres sites.
Exp :
<body>
Elément a
<h1> Les liens </h1>

<p> Cliquez sur <a href=[Link] >ce lien </a> pour

aller sur Wikipédia. </p>
</body>
Attribut href
 Les liens internes en HTML : 30

Les liens internes vont être des liens ramenant vers d’autres pages
au sein d’un même site .

Pour créer des liens internes, il faut donc distinguer trois cas :
 Lapage de départ et celle de destination sont dans le même
dossier ;
 Lapage de destination est dans un sous-dossier par rapport à la
page de départ ;
 La page de destination est dans un dossier parent par rapport à
la page de départ.
Envoyer un mail en HTML : 31

<body>
<h1> Envoyer un mail </h1>
<p> M'envoyer <a href="[Link] > un mail </a></p>
</body>
 Télécharger un fichier : 32

<body>
<h1> Télécharger un fichier </h1>
<p> Telecharger : <a href="[Link]" >Livre java </a></p>
</body>
Insérer des images en HTML : 33

L’Ajout du élément img avec deux attributs src et alt

< img src = ‘’ source de l’image ‘’ alt = ‘’ Description de l’mage’’ />

L’élément img est représenté par une

balise orpheline.
 Les tableaux en HTML 34
Les tableaux en HTML servent à arranger des données en lignes et
colonnes .
Les balises utilisées :
1. <table> : Pour la création de notre table.
2. <tr>(table row ) : Pour la création des lignes de tableaux.
3. <td>( table data ) : Pour la création des données utilisées dedans.
Les attributs utilisées (optionnel ) :
cellpadding, border, cellspacing
 Ajouter du contenu media 35

1. Pour ajouter un audio :

<audio src="source du audio" controls></audio>
2. Pour ajouter une vidéo :
<video src= " source du video" width= "375" height="280" controls></video>
Les attributs utilisées (optionnel ) :
Width et height : Pour la taille de la vidéo .
Controls : Controller la vidéo.
Loop : Lire la piste audio ou la vidéo en boucle.
Autoplay: lancer la vidéo ou la piste audio lors du chargement de la page.
Muted : Cet attribut permet de lancer le média avec le son désactivé par
défaut.
Créer des formulaires 36

 On utilise l’attribut <form ></form> .

 Les type de form :
 Text .
 Email .
 Liste déroulante .
 Checkbox.

 Radio .

Exemple
 37

APPRENDRE DU CSS
 38

Pourquoi le CSS ???

 Donner de la vie à votre page web .

 Gagner du temps .
 Facile à faire de modifications
Où écrire le code CSS ? 39

Dans un élément
HTML style Dans la balise Dans un fichier
ouvrante des éléments CSS séparé
HTML
Syntaxe : Sélecteur, Propriétés, Valeurs 40

détermine à quel élément un style

doit être appliqué

sélecteur p

color : blue ;
propriétés
valeurs
font-size : 14px ;
détermine le style qui va être
appliqué à un élément détermine le comportement d’une
propriété
CSS – Arrière-plan (background): 41

 background-color : Propriété utilisée pour définir la

couleur d'arrière-plan d'un élément. (background-color : red)
 background-image : Propriété utilisée pour définir l'image
d'arrière-plan d'un élément.
 background-repeat : Propriété utilisée pour contrôler la
répétition d'une image en arrière-plan.
 background-position : Propriété utilisée pour contrôler la
position d'une image en arrière-plan.
CSS – Polices (fonts) : 42

 font-style : Propriété est utilisée pour faire une police

italique ou oblique.(font-style : italic ).
 font-weight : Propriété utilisée pour augmenter ou diminuer
la manière dont une police est en gras ou claire. (font-weight
: bold)
 font-size : Propriété utilisée pour augmenter ou diminuer la
taille d'une police. ( font-size : 20px ou font-size : small … )
CSS – Texte (text) : 43

 Color : Propriété utilisée pour définir la couleur d'un texte.

 letter-spacing : Propriété utilisée pour ajouter ou soustraire de
l'espace entre les lettres qui composent un mot.
 word-spacing : Propriété utilisée pour ajouter ou soustraire de
l'espace entre les mots qui composent une phrase.
 text-align : Propriété utilisée pour aligner le texte d'un
document. ( text-align : center ou text-align : right)
 text-indent : Propriété utilisée pour indenter le texte d'un
paragraphe.
CSS – Marges (Margins) : 44

 margin-left : Spécifie la marge gauche d'un élément.

 margin-right : Spécifie la marge droite d'un élément.

 margin-top : Spécifie la marge supérieure d'un élément.

 margin-bottom : Spécifie la marge inferieure d'un élément.

 LES SELECTEURS SIMPLES 45

 On appellera sélecteurs simples les éléments HTML qui ne

possèdent pas d’attribut (ex : p).

Comment appliquer un style différent à

deux paragraphes ?
 CLASS ET ID 46

 Class et Id sont deux attributs HTML, créés pour pouvoir appliquer

différents styles à des éléments de même type.
 Class permet également d’appliquer le même style à différents
élément HTML (en leur appliquant la même valeur pour l’attribut
class).
Différence !!!
Id ne peut être utilisé que pour cibler un unique
élément, au contraire de class.
47
 LES ELEMENTS HTML 48

ELEMENT

BLOCK INLINE
• Ne commencer sur une
• Commencer sur une
nouvelle ligne.
nouvelle ligne.
• Prend uniquement la largeur
• Prend toute la largeur
necessaire.
disponible dans la page.
• Exp : l’élément strong, img,
• Exp : l’élément p, h, div…
span..
DIV ET SPAN 49

 Div et Span sont deux élément HTML créés, entre autres, pour
pouvoir appliquer un style à du contenu n’ayant pas de balise.
 Div et Span servent de containers mais ne possèdent
aucune valeur sémantique.

DIV élément BLOCK

SPAN élément INLINE

 50

Merci de votre
attention