Tech Web - Chap 3

TECHNOLOGIE ET
PROGRAMMATION WEB
M. PESSA MASSENE DAVE ARTHUR
CHAPITRE 3
HTML, CSS, SCSS

CHAP 3. HTML, CSS ET SCSS
- CONCEPTS (HTML et HTML5)

- BALISES HTML ET LEUR UTILITE
- OUTILS DE WEBMASTER : état et mise en
ligne d’un site web
- HTML vs CSS
- Mise en forme: CSS et SCSS
- Mise en forme avancée: identifiants, classes,
pseudo-classes, et unités de mesure;
CONCEPTS HTML
 « HyperText Markup Language »;

 C’est un langage de programmation qui utilise des balises texte comme
syntaxe;
 HTML est utilisé pour définir et structurer le contenu d’une page web;
 Ne pas oublier que l’hypertexte désigne des liens qui relient des pages web
entre elles;
 La dernière version du HTML 5
CONCEPTS HTML
 Le langage HTML utilise les balises pour définir du contenu texte, images
et d’autres contenus afin de les afficher sur un navigateur web
 En HTML les balises sont insensibles à la casse, ceci dit elles peuvent être
écrite en minuscule ou en majuscule ou encore une mixture des deux.
 Le fichier dont le contenu est en HTML a l’extension « .html » afin d’être
facilement interprété par un navigateur web.
CONCEPTS HTML: HISTORIQUE
 Le langage HTML est apparu en fin d’années 1980;

 Les toutes premières versions 1989 – 2000, il n’était pas possible d’utiliser
des documents XML (Extensible Markup Language).
 Les années 2000: une période où l’évolution du HTML a pris une
envergure. En passant par le XHTML où les développeurs pouvaient
exploité des documents XML et l’apparition du HTML 5.
 Le HTML 5 est apparue en début d’année 2007
HTML 5
 Le HTML 5 est une version évolué du langage HTML;

 Cette version intègre plusieurs fonctionnalités qui n’existaient pas dans
les versions précédentes du HTML;
 Avec la version 5 du HTML il est possible de réaliser des connexions P2P
ou encore de lire des flux vidéo en streaming.
 Ou encore afficher des éléments graphiques
BALISES HTML
 Une balise est un élément du code HTML d’une page web;

 Elle permet de structurer et de mettre en forme du
contenu;
 Son anatomie ressemble globalement à :
<element> (insertion contenu)</element>
BALISE HTML
Il existe différents types de

balise :
 Balise de premier niveau
 Balise sémantiques;
 Balise génériques;
 Balise de liste
 Balise de formulaire
BALISE HTML: BALISES DE PREMIER NIVEAU
 Elles indiquent au
navigateur qu’il
s’agit d’une page
web;
 Elle séparent l’en-
tête du corps de
la page web;
BALISE HTML: BALISES DE PREMIER NIVEAU
 Les balises <head>

et <body> sont
imbriquées à
l’intérieur de la
balise <html>;
BALISE HTML: BALISES SEMANTIQUES
 Elles sont
importantes pour
le référencement
naturel;
 Elles informent les
robots d’indexation
de ce qu’elles
contiennent
 Elles donnent ont bon

sens à la structure
d’une page web;
 Les balises
sémantiques sont
définies à l’intérieur de
la balise <body>.
Voici un exemple de
page web ayant des
balises de premier niveau
et des balises
sémantiques.
BALISE HTML: BALISES GENERIQUES
 Ces balises sont

généralement utilisés pour
afficher du contenu (texte,
image, ou lien)
 Elles n’ont pas une valeur
sémantique proprement dit.
 <div> et <span>
BALISE HTML: BALISE DE TYPE BLOCK
 La balise de « type block » crée

automatiquement un retour à la
ligne avant et après.
BALISE HTML: BALISE DE TYPE BLOCK
 Les balises titre : <h1>, <h2>, <h3>, <h4>, <h5>, <h6>

 Les balises paragraphe: <p></p>
 Les balises article : <article></article>
 Les autres balises : <div></div>
Ex. <p> Mon premier paragraphe </p>
BALISE HTML: BALISE DE TYPE INLINE
 La balise de « type inline »,

le contenu s’écrit sur la
même ligne du texte
précédent.
 Il occupe uniquement la
largeur du contenu qu’il
contient
 La balise <span>;
 La balise <strong> : mettre le contenu en gras;
 La balise <i>: mettre le contenu en italique;
 La balise <em>: mettre l’emphase sur un texte;
 La balise <mark>: pour attirer l’attention
 La balise <img>: utilisé pour afficher une image grâce à une

URL, URI, ou chemin relatif de l’image. L’attribut src permet de
préciser le lien de l’image.
 La balise <a>: utilisé pour créer les connexions entre les pages
web (hyperliens) à l’intérieur d’un site/application web ou à
l’extérieur. L’attribut href permet de préciser URL/URI pour
atteindre la page souhaité.
BALISE HTML: BALISE DE TYPE LISTE
 La balise de « type liste », le

contenu s’écrit sous forme de
liste ordonnée ou non.
 Chaque élément de la liste
renvoie à la ligne
automatiquement.
 Les balises <ul>, <ol> et <li>
sont utilisés
 <ul> est utilisée pour les listes

à puces;
 <ol> utilisée pour les listes
ordonnées;
 Et <li> utilisée pour afficher un
contenu (texte, image, un lien,
etc.).
 <dl> utilisée pour

les listes des
définitions;
 <dt> terme à
définir;
 Et <dd> définition
du terme.
BALISE HTML: BALISE DE TYPE MEDIA
 <video> utilisée pour

lire du contenu vidéo;
 <source> utilisé pour
préciser l’adresse de la
vidéo via l’attribut src;
BALISE HTML: BALISE DE TYPE MEDIA
 <audio> utilisée pour

lire du contenu audio;
 <source> utilisé pour
préciser l’adresse vers
le fichier audio via
l’attribut src;
BALISE HTML: BALISE DE TABLEAU
 Les balises de tableau sont utilisées pour

structurer un contenu en lignes et
colonnes.
 Les balises <table>, <thead>, <tbody>,
<tfoot>, <tr>, <td>.
BALISE HTML: BALISE DE TABLEAU
 <table>: tableau
 <caption>: titre du tableau
 <tr>: ligne du tableau
 <td>: cellule du tableau
 <th>: cellule d’en-tête
 <thead>: en tête du tableau
 <tbody>: section corps du tableau
 <tfoot>: section pied de page du tableau
BALISE HTML: BALISE FORMULAIRE
 Les interactions entre

l’internaute et le site/app
web se fait à travers des
formulaires.
 HTML propose un
ensemble de balises
pour structurer un
formulaire.
 <form>: formulaire
 <fiedlset>: groupe de champs
 <legend>: titre d’un groupe de
champ;
 <label>: libellé du champ;
 <input />: champ de de type
text, email, number, tel, etc.
 <textarea>: zone de saisie

 <select>: liste déroulante
 <legend>: titre d’un groupe de
champ;
 <label>: libellé du champ;
 <input />: champ de de type
text, email, number, tel, etc.
 <option>: contenu pour un

élément de la liste
 <optgroup>: groupe d’éléments
d’une liste
OUTILS DE WEBMASTER
 Un « webmaster » est celui/celle qui conçoit, développe et

entretien un site web;
 Il/elle est en charge du maintien et du suivi d’un site web
au quotidien;
 Webmaster doit avoir des connaissances techniques en langages
de programmation web notamment HTML, JavaScript, et CSS
ou encore des frameworks de conception de site web
OUTILS D’UN WEBMASTER
 Le « Webmaster » combine plusieurs rôle à savoir graphiste,

technicien, éditeur de contenu (création des rubriques, collecte des
informations et mise en page des textes, etc.)
 Il est également responsable de la mise en ligne d’un site
web et assure la veille technologique;
 De plus en plus des sites marchands recherchent des
« webmaster » ayant des compétences commerciales et
marketing afin d’améliorer leur référencement (SEO)
OUTILS D’UN WEBMASTER
Pour remplir ses missions, le webmaster utilise les outils de :

 Développement d’un site web tels que : un éditeur de code,
l’utilisation d’un framework, etc.
 Mise en ligne d’un site web tels que :
 un outil de transfert de fichier sur l’espace d’hébergement,
 l’achat et la configuration de l’espace d’hébergement,
 la configuration du nom de domaine
HTML VS CSS
 Le langage CSS pour

Cascading Style sheet
 Le CSS renvoie à la mise
en forme d’une page web
tandis que le HTML
renvoie à la mise en page
HTML VS CSS
 Le langage CSS permet de

mettre en forme une page web
(HTML ou XML);
 Il est composé des feuilles de
style en cascade;
 HTML et CSS vont de paires
afin d’obtenir un site web
esthétique et plaisant à
regarder
MISE EN FORME CSS ET SCSS
 La mise en forme d’une page web passe par la définition des

couleurs, la justification des textes, la cohérence au niveau de la
présentation des blocs de textes, l’intégration des polices
d’écritures, etc.
 Nous pouvons appliquer des feuilles de styles de 03 façons:
 Via l’attribut style d’une balise html
 En utilisant la balise <style>
 Ou via un fichier ayant l’extension « .css »
MISE EN FORME CSS ET SCSS: MISE EN FORME TEXTE
La mise en forme d’un texte est défini par les syntaxes CSS
suivantes :
 font-size ( utiliser pour réduire ou augmenter la taille d’un
texte). Les unités de mesure utilisées sont px, em, rem ou %).
 Ex: font-size: 12px ou font-size: 0.9em ou font-size: 1.0rem ou
12%
 text-align : utiliser pour justifier le texte. Cet attribut s’applique

uniquement pour les balises de « type bloc ». Nous pouvons
aligner le texte à gauche, à droite, le centrer ou encore le
justifier
 text-align: center;
 text-align: right;
 text-align: left;
 text-align : utiliser pour justifier le texte. Cet attribut s’applique

uniquement pour les balises de « type bloc ». Nous pouvons
aligner le texte à gauche, à droite, le centrer ou encore le
justifier
 text-align: center;
 text-align: right;
 text-align: left;
text-decoration : utiliser pour souligner un texte

 text-decoration: <valeur>;
 Où valeur = underline, dashed, double, etc.
MISE EN FORME CSS ET SCSS: MISE EN FORME TEXTE ET COULEUR
font-style : pour changer le style de texte pour les balises utilisés

pour afficher du texte (italique ou normal)
 font-style: italic / normal;
color : pour la couleur du texte

 color: <valeur_hexadecimal> ou <rgb_model>;
 Ex. color: #ffffff; color: rgb(3,3,3);
background-color : pour appliquer une couleur d’arrière plan sur

une balise
 background-color: #ffffff;
 background-color: rgb(255,143,13);
background-image: pour appliquer une image d’arrière plan sur

une balise.
background-position: positionner l’image par rapport au
contenant;
 background-image: url(<chemin_image>);
 background-position: <valeur = top, bottom, left, right, center>;
background-repeat: répéter l’image .

background-size: taille de l’image par rapport à la balise;
 background-repeat: repeat ou no-repeat;
 background-size: <valeur = cover ou x%>;
background: pour appliquer une image d’arrière plan sur une

balise et adapter en l’image en fonction de son contenant
 background: url(<chemin_image>) no-repeat center

center/cover;
 background: linear-gradient(#ffffff, #333333);
MISE EN FORME CSS ET SCSS: APPLICATION
Appliquons le style directement sur une balise en utilisant

l’attribut style:
 <p style="font-size: 15px; color:#777; text-
decoration: underline;">Bienvenue ING3 ISI</p>
Appliquons le style via la balise <style>. Ici la balise <style> est insérée à l’intérieur de la balise <head>.
<style>
p{
A l’intérieur de la
color: #333333;
text-decoration: double; balise <style> nous
} écrivons du script
div{
CSS qui sera
text-align: center; appliqué sur la page
background-color: #666666; HTML
}
</style>
 Enfin la méthode la plus adaptée est l’application des styles via

un fichier « .css ». Le fichier ayant l’extension .css va contenir
tous les scripts CSS.
 Ce fichier sera alors insérer dans notre page html grâce à la
balise <link>. La balise <link> quant à elle est insérée à
l’intérieur de la balise <head>.
<link rel="stylesheet" href="chemin_fichier_css" />

<link rel="stylesheet" href="mon_style.css" />
MISE EN FORME CSS ET SCSS: MODIFIER LA FORME D’UN ELEMENT HTML
Il est possible de modifier la forme d’un élément HTML à travers

des propriétés CSS :
 display : permet de modifier le mode d’affichage (par défaut)
d’un élément
 flexbox: utilisé pour obtenir un affichage flexible et responsif
sans l’usage des propriétés flottante (float) .
Exemples (display)
 display : inline; // change l’affichage d’une balise de type block en
« inline »
 display : block; // change l’affichage d’une balise de type inline en
« block »
 display : inline-block; // change l’affichage d’une balise à la fois
inline et « block » associé généralement à la propriété width;
Exemples (flexbox)
div {
display: flex;
flex-direction: row; /* Valeurs (column) */
border: 1px solid black;
}
div>p {
width: 70px;
height: 70px;
}
MISE EN FORME AVANCEE
il existe plusieurs types de

sélecteurs CSS:
 Les identifiants
 Les classes
 Les éléments html
 Le sélecteur astérix (*)
 Pseudo classes
MISE EN FORME AVANCEE
Il est possible d’appliquer un style particulier à une balise ou

plusieurs balises précises dans les cas suivants:
 Une mise en forme d’une section article
 Une mise en forme du menu principale d’un site web.
 Une mise en forme d’une page contact
 Etc.
MISE EN FORME AVANCEE: CLASSES
Les « classes » sont utilisés pour

configurer des cas de mises en
forme. Elles sont également utilisés
pour être réutilisable pour
d’autres projets web.
On attribut une valeur de classe à
un élément grâce à l’attribut
« class »
<style>
.resum{
font-size: 1.2em;
color: rgb(206, 113, 25);
}
</style>
 Concernant les classes il

est possible d’appliquer un
style unique à un groupe de
balise HTML.
 Tout comme changer le
style d’une balise spécifique
tout en gardant le style
unique.
<div class="text-center">Bonjour Jordan

</div>
<div class="text-center">Bonjour Jonathan
</div>
<div class="text-center txt-orange">Bonjour
Abigael </div>
<div class="text-center txt-rouge">Bonjour
Massehe </div>
.text-center{
text-align: center;
}
.txt-orange{
color: #e9a410;
}
.txt-rouge{
color: #e61010;
}
MISE EN FORME AVANCEE: PSEUDO-CLASSES
Les « pseudo-lasses » sont

utilisés pour définir un état
spécifique d’un élément
HTML.
Par exemple, un style est
appliqué si le pointeur de la
souris est sur une balise
HTML
Les « pseudo-lasses »
peuvent appliquer un style
particulier pour un
élément ou groupe
d’élément en fonction de
leur parent
<p>
<a href="">Page Web Alima</a>

<div>
<input type="text" placeholder="Nom" />
</div>
</p>
p a:hover{
color: #e61010;
}
input:focus{
background-color: #e0dede;
}
<ul>
<li>Atsa'a Franck</li>
<li>Massehe Vanessa</li>
<li>Ntamack Diane</li>
</ul>
ul>li:first-child{
color: #e61010;
}
ul>li:last-child{
color: #e9a410;
}
MISE EN FORME AVANCEE: SELECTEUR ASTERIX
Le sélecteur Astérix « * »
est un sélecteur universel, il
est correspond à n’importe
quel élément HTML.
MISE EN FORME AVANCEE: SELECTEUR ASTERIX
L’astérix permet dans un cas précis de définir un style par défaut

d’un site web ou d’une application web.
*{
color: #646161;
font-size: 1.05em;
}
MISE EN FORME AVANCEE: IDENTIFIANTS
Le sélecteur identifiant
permet de cibler un
élément HTML (de manière
unique) grâce à sa valeur
définit via l’attribut « id ».
 Les identifiants sont aussi utilisés comme référence à un bloc

d’élément bien précis.
 En utilisant une balise <a> l’internaute accède à un élément
bien précis se trouvant dans une page web
<ul>
<li><a href="#home">Accueil</a></li>
Le site web contient un menu
<li><a href="#catalogue">Catalogue</a></li> principale définit grâce à la balise
</ul> <ul>. Les rubriques « Accueil » et
<section id="home">
« Catalogue » y sont définis.
<article>
<h3>Section Accueil</h3> L’attribut href de la balise <a> pour
</article> chaque rubrique permet d’atteindre
</section>
la section ayant la valeur de
<section id="catalogue">
<article>
l’identifiant correspondant.
<h3>Un catalogue</h3>
</article>
</section>
MISE EN FORME AVANCEE: BORDURES
 En CSS, l’utilisation des bordures apporte un plus dans la

définition du style d’une page web.
 Les bordures peuvent s’appliquer sur n’importe quel élément
HTML
border: 1px solid #646161;
(L’épaisseur de la bordure, le type de bordure et la couleur
respectivement)
MISE EN FORME AVANCEE: MESURES
En CSS, il existent différents types de mesure pouvant s’appliquer

sur un élément HTML:
 Le pixel (px): utile pour disposer des éléments sur un bloc de
taille fixe. Il est utilisé pour afficher de façon nette des éléments
ayant une petite taille
 L’unité (em) : la taille de police d’écriture est proportionnelle à
l’écran. L’unité em est différent pour chaque élément HTML.

sur un élément HTML (suite):
 L’unité rem (root em): taille de la police de caractères dans
l’élément racine du document. Contrairement à l’unité em,
l’unité rem reste constant quelque soit le support d’affichage

sur un élément HTML (suite):
 L’unité vh: renvoie à 1% de la hauteur de la fenêtre
 L’unité vw: renvoie à 1% de la largeur de la fenêtre
(les unités vh et vw sont généralement appliquées sur les balises de
type blocs)
Exemple:
p { margin-left: 1rem }
h1 { font-size: 3em; margin-left: 1rem }
section{ height: 20vh; }
SCSS
 La version évoluée du CSS est le SASS;

 Le SASS est une extension du langage CSS plus mature, plus stable
et plus robuste;
 Le SCSS est l’une des syntaxes utilisée par le SASS. Ici les fichiers de
style sont nommés avec l’extension « .scss »;
 Le SASS permet de créer des fonctions dynamiques pour obtenir
des rendus meilleurs et facilement configurable;
(l’implémentation du SASS sera abordé plus tard)
TP
Le travail pratique N°2 consiste à réaliser une site web (One Page).
Un site web « one page » est un site web qui contient une seule page
web, les menus sont accessible à partir des liens de référence (couple
identifiant (id) – attribut (href)).
Il sera question pour chaque étudiant de créer un nouveau site appelé
tp2_<nom_etudiant>
1. De reproduire la maquette du site web;
2. De proposer des contenus relatifs à l’architecture de la maquette
TP
3. Le thème du site web portera sur une entreprise de service de votre

choix (soyer créatif);
4. Les contenus textuels devront être proposés sur la base de l’entreprise
5. Le respect de l’apparence graphique doit être respecter au moins à 80%
de la maquette
NB: les données incohérentes ou qui n’ont aucun rapport avec le thème
recevront -5 points. L’utilisation d’une framework ou d’une bibliothèque
Javascript ou CSS est interdite.
THANK YOU
ARTHURPESSA@INSTITUTSAIN
TJEAN.ORG

Tech Web - Chap 3

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Tech Web - Chap 3

Transféré par

Droits d'auteur :

Formats disponibles

TECHNOLOGIE ET

HTML, CSS, SCSS

- CONCEPTS (HTML et HTML5)

 « HyperText Markup Language »;

 Le langage HTML est apparu en fin d’années 1980;

 Le HTML 5 est une version évolué du langage HTML;

 Une balise est un élément du code HTML d’une page web;

Il existe différents types de

 Les balises <head>

 Elles donnent ont bon

 Ces balises sont

 La balise de « type block » crée

 Les balises titre : <h1>, <h2>, <h3>, <h4>, <h5>, <h6>

 La balise de « type inline »,

 La balise <img>: utilisé pour afficher une image grâce à une

 La balise de « type liste », le

 <ul> est utilisée pour les listes

 <dl> utilisée pour

 <video> utilisée pour

 <audio> utilisée pour

 Les balises de tableau sont utilisées pour

 Les interactions entre

 <textarea>: zone de saisie

 <option>: contenu pour un

 Un « webmaster » est celui/celle qui conçoit, développe et

 Le « Webmaster » combine plusieurs rôle à savoir graphiste,

Pour remplir ses missions, le webmaster utilise les outils de :

 Le langage CSS pour

 Le langage CSS permet de

 La mise en forme d’une page web passe par la définition des

 text-align : utiliser pour justifier le texte. Cet attribut s’applique

 text-align : utiliser pour justifier le texte. Cet attribut s’applique

text-decoration : utiliser pour souligner un texte

font-style : pour changer le style de texte pour les balises utilisés

color : pour la couleur du texte

background-color : pour appliquer une couleur d’arrière plan sur

background-image: pour appliquer une image d’arrière plan sur

background-repeat: répéter l’image .

background: pour appliquer une image d’arrière plan sur une

 background: url(<chemin_image>) no-repeat center

Appliquons le style directement sur une balise en utilisant

 Enfin la méthode la plus adaptée est l’application des styles via

<link rel="stylesheet" href="chemin_fichier_css" />

Il est possible de modifier la forme d’un élément HTML à travers

il existe plusieurs types de

Il est possible d’appliquer un style particulier à une balise ou

Les « classes » sont utilisés pour

 Concernant les classes il

<div class="text-center">Bonjour Jordan

Les « pseudo-lasses » sont

<a href="">Page Web Alima</a>

L’astérix permet dans un cas précis de définir un style par défaut

 Les identifiants sont aussi utilisés comme référence à un bloc

 En CSS, l’utilisation des bordures apporte un plus dans la

En CSS, il existent différents types de mesure pouvant s’appliquer

En CSS, il existent différents types de mesure pouvant s’appliquer

En CSS, il existent différents types de mesure pouvant s’appliquer

 La version évoluée du CSS est le SASS;

3. Le thème du site web portera sur une entreprise de service de votre

Vous aimerez peut-être aussi