Développement de

sites Web Statiques

Cours Magistral
MIO 2
Dr Edouard Ngor SARR
Enseignant-Chercheur
UFR SES-Université Assane SECK de Ziguinchor (UASZ)
Ziguinchor-Sénégal
Edouard-ngor.sarr@univ-zig.sn
2021-2022
 Le but de ce cours est de permettre aux étudiants
d’appréhender les bases du HTML et CSS afin de pouvoir
ensuite créer de manière autonome des sites web statiques.
Le cours est une initiation, nous n’aurons pas le temps de voir
en détail toutes les balises et positionnement mais des liens
seront fournis afin de permettre aux étudiants d’approfondir
leur expertise.

2
 Sites web Statiques

Sommaire
• Partie 1: sites web Statiques
– Internet et le Web
– Site web
– Site web statique
– Html
– Client-Serveur
• Partie 2 : Le HTML
– Html
– Les Balises
– Attributs
– Cas pratiques
• Partie 3: Le CSS
– Les fondamentaux du Css
– Cas pratique 3
 Partie 1
Sites web statiques
 Sites web Statiques

Internet
• Réseau informatique mondial (WAN)
• Possible grâce à une Interconnexion des réseaux (LAN et des
MAN) / routage.
• Met en contact les utilisateurs par le biais de leur matériel
informatique respectif (Ordinateur, Portable etc).

5
 Sites web Statiques

Les services d’Internet

– Techniquement, Internet se définit comme
le réseau public mondial utilisant le protocole de
communication IP (Internet Protocol).

Internet ayant été popularisé par l'apparition du World Wide Web,

les deux sont parfois confondus par le public non averti.
6
 Sites web Statiques

Le Web: Définitions
– Web est un service d’internet
– Système hypertexte public fonctionnant sur Internet et qui
permet de consulter, avec un navigateur, des pages mises en
ligne dans des sites.
– L'image de la toile vient des hyperliens qui lient les pages Web
entre elles.
– Le web fonctionne sur le protocole HTTP pour faire
Communication entre un serveur (HTTP) et un client
(navigateur)

7
 Sites web Statiques

Le Web : Client-Serveur
• Le Web est un système client-serveur dont le fonctionnement
s’apparente à des relations client-fournisseur.
– Le client demande un fichier, le serveur lui donne tel qu'il est
stocké – processus statique
– Le serveur peut aussi générer un fichier en fonction de la
demande du client – processus dynamique
• Les ordinateurs distants sur lesquels sont hébergés les sites web sont des
serveurs.
• L’ordinateur doté du navigation (Chrome, Firefox…), joue le rôle du client.
 Sites web Statiques

Site web : Définitions

• Ensemble de pages web (fichiers)
1. Organisées autour d’une page d’accueil (index)
2. Liées entre elles par des liens hypertextes (url)
3. Accessible en ligne depuis n'importe où navigateurs.
4. Disponible sur un serveur web via HTTP

• Deux types de sites web

– Sites web statiques
• Le contenu ne varie pas en fonction des caractéristiques de
la demande des utilisateurs
• Tous les internautes reçoivent le même contenu de la page
• Utilise pas un langage de programmation (PHP, C, …)
– Sites web dynamiques
9
• Utilise un langage de programmation
 Sites web Statiques

Sites Web Statiques: Définitions

• Site web comme les autres
– Un ensemble de pages organisées en structure hiérarchique,
disponible sur un serveur web via HTTP
• Pas d’interaction avec les utilisateurs
• N’utilise pas de langage de programmation coté Serveur
• Sauf dans certains cas ou il est nécessaire de gérer certains
contrôles via le JavaScript (JS)
• N’est donc pas un site figé, sans animation ou sans
mouvement.
• Se présente tel qu’il est écrit et conçu en dur
• Le contenu ne change pas automatiquement.
– Il faut modifier le code source du site pour changer le
contenu.
• Souvent coder avec du l’HTML , du CSS et de Java Script
10
 Sites web Statiques

Sites Web Statiques / HTML

• HyperText Markup Language
• Un langage à balisage / Langage de présentation
• N’est pas un langage de programmation
• Décrit la structure logique d'un document hypertexte (page web)
– Emplacement et la presentation des elements qui composent la
page web:
• Texte
• Image et vidéos
• Tableaux
• Formulaires
• Sections
• Liens
• Un fichier HTML (.html) est un format de fichier « texte » éditable
dont les éléments ont du sens
11
 Sites web Statiques

Sites Web Statiques : Les amis du HTML

• Site web statique est conçu principalement avec HTML, CSS et
souvent du JS
– HTML : Pour la structuration des éléments dans la page
• Présence
• Position
– CSS: Rendre plus jolie les pages
• désigne, Les couleurs, les jeux d’animation etc
• Vient compléter le HTML
– JavaScript: fonctionnalités basic coté clients
• Pour rendre un peu dynamique la page
• Faire certain contrôle
– Numéro de téléphone
– Champ obligatoire
– Activation des boutons
12
 Sites web Statiques

Sites Web Statiques : Le trio gagnant

13
 Sites web Statiques

Sites Web Statiques : Autres éléments

– URL
• Une chaîne de caractères utilisée pour adresser les
ressources dans le Web
– Dans le même site
– En dehors du site
• Permet de créer des documents interactifs grâce à des liens
hypertextes, qui relient votre document à d'autres

• Exemple:
– http://www.sarrisgroupe.com
– https://www.netflix.com/browse
14
 Sites web Statiques

Sites Web Statiques : Autres éléments

– Navigateur Web
• Logiciel permettant de surfer sur le Net et d'afficher sur
l’écran les "pages" pointées via l’URL.
• Avec un navigateur web, vous pouvez parcourir n’importe
quel site web et naviguer facilement vers d’autres sites, de
la même manière que vous parcourez les magasins au
centre commercial
• Comprend le langage du web : HTML, CSS et JavaScript

15
 Sites web Statiques

Sites Web Statiques: Limites

1. Pas de langage de programmation (sauf utilisation d’un langage
coté client comme le JS)

2. Obligation de modifier manuellement chacune des pages

(maintenance difficile).

3. Impossibilité de stocker des données renvoyées par les visiteurs

(formulaires) dans une BDD.

4. Impossibilité de générer des pages dynamiquement selon les

entrées de la base de données.

5. Impossibilité de renvoyer une page personnalisée en fonction des

visiteurs (sauf cookies)
 Sites web Statiques

Sites Web Statiques: En local

Accessible seulement à vous

A condition d’avoir installer un serveur web dans

votre machine comme APACHE via WAMP ou
XAMP
 Sites web Statiques

Sites Web Statiques: En ligne (sur internet)

Accessible à tous via HTTP ou HTTPS

Pour mettre en ligne on fait passer ses fichiers

de la machine du créateur à un serveur web
 Sites web Statiques

Sites Web Statiques: Les acteurs

A notre niveau, nous distinguerons trois rôles :
• Le serveur : Une machine qui héberge les pages d'un site
• L'administrateur : personne qui crée et met à jour le site
• Les clients : personnes qui consultent le site via Internet
Partie 2
Le HTML
 Sites web Statiques

HTML
• HyperText Markup Language
• Un langage à balisage / Langage de présentation
• N’est pas un langage de programmation
• Décrit la structure logique d'un document hypertexte (page web)
– Emplacement et la presentation des elements qui composent la
page web:
• Texte
• Image et vidéos
• Tableaux
• Formulaires
• Sections
• Liens
• Un fichier HTML (.html) est un format de fichier « texte » éditable
dont les éléments ont du sens
21
 Sites web Statiques

HTML
• Un format de présentation de données permettant de créer des
pages web pouvant être lues dans des navigateurs web.
• Un langage de description de données, et non un langage de
programmation.
• Permet de décrire la mise en page et la forme d'un contenu rédigé
en texte simple.
• Une page HTML est un simple fichier texte contenant
des balises ( marqueurs ou repères ou tags en anglais)
– Permettant de mettre en forme le texte, les images, etc.
• Il est important de comprendre que le langage HTML est un
standard
– Des recommandations publiées par un consortium international
: le World Wide Web Consortium (W3C).
 Sites web Statiques

Les éditeurs
• Editeurs spécialisés
– Blocnote ou TextEdit, si vous n’avez rien d’autre sous la main :
– Brackets.io : http://brackets.io/
– Atom: https://atom.io/
– SublimText
– Coda : uniquement sur Mac (payant) http://panic.com/coda/
– Geany (Windows) gratuit http://www.geany.org/Download/Releases
– Notepad ++
– Komodo (Windows et Mac) http://www.activestate.com/komodo-ide
– Netbeans (Windows et Mac) gratuit http://netbeans.org/

• Editeurs WYSIWYG : What You See Is What You Get

– Dreamweaver (payant)
– Blue Griffon (gratuit)
 Sites web Statiques

Générer du HTML depuis un CMS

• CMS : Content Management System ou systèmes de gestion de
contenu
• Développé dans un langage de programmation web (ex : PHP) et
fait appel à une base de données (ex : SQL)

• Éditeurs « visuels » sans avoir besoin de notions de code

• Ex :
– WordPress
– Drupal
– Joomla
– Prestashop
– etc.
 Sites web Statiques

HTML: Les balises

• Les balises structurent le contenu de la page (texte, images, etc.)
• Chaque balise a un rôle et donne du sens au contenu présenté
 Sites web Statiques

HTML: Les balises

• Les balises structurent le contenu de la page (texte, images, etc.)
• Chaque balise a un rôle et donne du sens au contenu présenté
 Sites web Statiques

HTML: Imbrication de balises

• Les balises HTML ont la particularité de pouvoir être imbriquées de
manière hiérarchique afin de permettre le cumul de leurs
propriétés.
• En contrepartie le chevauchement de balises n'est pas toléré par
le standard HTML.

• Voici un exemple de texte formaté avec des balises imbriquées :

<i><b>Mon pays, est le Sénégal</b></i>

<i><b>Mon pays</b>, est le Sénégal </i>

• En contrepartie l'exemple ci-dessous n'est pas correct :

<i><b>Mon pays</i>, est le Sénégal </b>
 Sites web Statiques

HTML: Attributs de balises

• Un attribut est un élément, présent au sein de la balise ouvrante,
permettant de définir des propriétés supplémentaires.
• Les attributs se présentent la plupart du temps comme une
paire clé=valeur, mais certains attributs ne sont parfois définis que par
la clé.
• Voici un exemple d'attribut pour la balise <p> (balise définissant un
paragraphe), permettant de spécifier que le texte doit être aligné sur la
droite :
<p align="right">Exemple de paragraphe</p>
• Chaque balise peut comporter un ou plusieurs attributs, chacun pouvant
avoir (aucune,) une ou plusieurs valeurs.

Attribut Valeur Effet Visuel

ALIGN LEFT Texte aligné à gauche
RIGHT Texte aligné à droite
CENTER Texte centré
JUSTIFY Texte justifié
 Sites web Statiques

HTML: Structure d’un document

• Un document HTML commence par la balise <HTML> et finit par la
balise </HTML>. Il contient également un en-tête décrivant le titre de
la page et un corps dans lequel se trouve le contenu de la page.
• L'en-tête est délimité par les balises <HEAD> et </HEAD>. Le corps
est délimité par les balises <BODY> et </BODY>.
• Voici par exemple une page HTML minimaliste : <HTML>

<HTML>
<HEAD>
<TITLE>Titre de la page</TITLE>
</HEAD>
<BODY>
Contenu de la page
</BODY>
</HTML>
 Sites web Statiques

HTML : Déclaration du type de document

• Il est conseillé d'indiquer dans la page HTML le prologue du type de
document, c'est-à-dire une référence à la norme HTML utilisée, afin de
spécifier le standard utilisé pour le codage de la page. Cette déclaration
se fait par une ligne du type :
• La déclaration du document indique la DTD (Document Type Définition)
utilisée
<!DOCTYPE HTML ">
<HTML>
<HEAD>
<TITLE>Titre de la page</TITLE>
</HEAD>
<BODY>
Contenu de la page
</BODY>
</HTML>
 Sites web Statiques

HTML: Les commentaires

• Eléments d’information
– Présentent dans une page web sans que ceux-ci soient affichés
à l'écran
• Non prisent en compte par le Navigateur
– Permettent de mettre en commentaire du texte mais peuvent
également servir à commenter du code HTML.

• Les commentaires doivent être précédés de la balise <!-- et être

fermés par la balise -->.
<!-- Voici un commentaire -->
• Tout ce qui sera écrit entre ces balises
– Ne sera pas affiché à l’écran par le navigateur.
– Restent visibles lorsqu’on consulte le code source de la page.
 Sites web Statiques

HTML: Les balises standards

• Balises à connaitre impérativement
 Sites web Statiques

HTML: Balises de Titre

• Permet de définir une structuration hiérarchique des paragraphes
dans un texte
• 6 niveaux de titre (en anglais heading) : H1, H2, H3, H4, H5 et H6
 Sites web Statiques

HTML: Balises de listes

• Une liste est un paragraphe structuré composé d'une suite
d'articles.
• Le langage HTML définit deux types de listes :
– La liste ordonnée avec OL
<ol>
<li> article 1 </li>
<li> article 2 </li>
</ol> Attribut Valeur
COMPACT resserre l'interligne
PLAIN supprime les puces
– La liste non ordonnée avec UL
<ul>
<li> article 1 </li>
<li> article 2 </li>
</ul>
 Sites web Statiques

HTML: Balises de listes

 Sites web Statiques

HTML: Balises de Tableaux 1/2

• Souvent utile de présenter des informations mieux structurées
qu'avec des listes.
• Permettent de les afficher en lignes et en colonnes.
• Doit respecter les quelques règles suivantes :
– Le titre du tableau est encadré par <CAPTION></CAPTION>
– Chaque ligne est encadrée par <TR></TR>
• Les cellules d'en-tête sont encadrées par <TH></TH>
• Les cellules de valeur sont encadrées par <TD></TD>
 Sites web Statiques

HTML: Balises de Tableaux 2/2

<TABLE BORDER="1">
<CAPTION> Voici le titre du tableau </CAPTION>
<TR>
<TH> Titre A1 </TH>
<TH> Titre A2 </TH>
<TH> Titre A3 </TH>
<TH> Titre A4 </TH>
</TR>
<TR>
<TD> Valeur B1 </TD>
<TD> Valeur B2 </TD>
<TD> Valeur B3 </TD>
<TD> Valeur B4 </TD>
</TR>
</TABLE>
 Sites web Statiques

HTML: Balises de Tableaux en Exemple

 Sites web Statiques

HTML: Balises de style 1/2

<ABBREV> Abréviation
<ACRONYM> Acronyme
<AU> L'auteur
<B> Met la police en gras
<BIG> Police plus grande
<BLINK> Clignote (propre à Netscape)
<CITE> Citation
<DEL> Texte supprimé mais qui reste présent
<DFN> Définition d'instance
<EM> Emphase
 Sites web Statiques

HTML: Liste des balises de style 2/2

<I> Italique
<INS> Nouveau texte inséré a cet endroit
<KBD> Clavier - Suite de caractères devant être tapés tel quel

<PERSON> Accentuation du nom d'une personne

<Q> ‘’Encadre le texte par des guillemets’’
<S> Comme strike (barré)
<SAMP> Exemple
<SMALL> Police plus petite
<STRONG> Forte accentuation rendue par du gras
<STRIKE> Texte barré (comme S)
<SUB> Texte en Indice
<SUP> Texte en Exposant
 Sites web Statiques

HTML: Balises de liens hypertextes

• Les liens hypertextes (ancrages) sont des éléments d'une page
HTML (soulignés lorsqu'il s'agit de texte) permettant aux
internautes de naviguer vers une nouvelle adresse lorsque l'on
clique dessus. Ce sont les liens hypertextes qui permettent de lier
des pages Web entre elles. Ils permettent notamment de naviguer
:
– vers un autre endroit du document
– vers un fichier HTML situé à un emplacement différent sur la
machine qui héberge la page
– vers une autre machine
• L'attribut principal des ancrages est href. Il s'écrit sous la forme
suivante :
• <a href="/Adresse ou URL"> CLIQUER ICI </a>
 Sites web Statiques

HTML: Gestion des images

• Quelques images sur un site Web peuvent le rendre plus attractif
et plus convivial
• La balise IMG du langage HTML permet d'insérer des images dans
une page HTML.
– L'image peut être située sur le même serveur que la page dans laquelle elle
est insérée mais également sur un autre serveur en spécifiant son URL
complète.
• Les principaux attributs de la balise IMG sont les suivants :
– SRC: Indique l'emplacement de l'image (il est obligatoire)
– ALT: Permet d'afficher un texte alternatif lorsque l'image ne s'affiche pas.
– TITLE: Permet d'afficher une infobulle lors du survol de l'image par le
curseur.
– WIDTH: Permet de spécifier la largeur de l'image.
– HEIGHT: Permet de spécifier la hauteur de l'image.

<IMG SRC="url_de_l_image" ALT="Texte remplaçant l'image" TITLE="Texte">

 Sites web Statiques

HTML: Codage des couleurs

• Les couleurs en HTML sont définies par 3 représentant les tons de
Rouge, de Vert et de Bleu
– Selon le codage RGB (Red Green Blue, en français : RVB) de la couleur
choisie.
• La syntaxe de codage d'une couleur en HTML est la suivante :

#FF5733
• Ainsi, plus de 16 millions de couleurs sont disponibles pour colorer
les pages web.
– Toutefois, étant donné que tous les navigateurs ne reconnaissent pas les
couleurs de la même façon
– Le W3C conseille l'utilisation des couleurs ci-dessous (voir le site internet),
pour lesquelles un nom intelligible a été donné.

https://htmlcolorcodes.com/fr/
 Sites web Statiques

HTML: Les Meta TAGS 1/2

• Les métadonnées sont des informations situées au sein d'un document
afin de le décrire. Les métadonnées sont ainsi utilisées par les moteurs
de recherche lors du référencement de la page web. Grâce à ces balises
non affichées il est ainsi possible de renseigner des informations relatives
à la page où au site afin de mieux en décrire le contenu, en particulier
des informations sur le ou les auteur(s) du document, sa limite de
validité, la langue utilisée, etc.
• On distingue deux types de méta tags :
• • Les métas NAME, permettant de décrire la page HTML : <meta
name="Nom du tag" CONTENT="Attribut">
• • Les métas HTTP-EQUIV, permettant d'envoyer des informations
supplémentaires au navigateur via le protocole HTTP :

<META HTTP-EQUIV="Nom du tag" CONTENT="Attribut">

 Sites web Statiques

HTML: Les Meta TAGS 2/2

Nom du tag Attribut Utilité

Author "Informations sur l'auteur" Informations sur l'auteur de la page

Copyright "Informations de copyright" Permet de référencer des informations de droits d'auteur

Description "Description de votre site" Permet de donner une information à afficher lors du résultat
d'une recherche.

Expires never"date à laquelle la page expire" Indique au robot la date d'expiration de la page.

Generator Nom du logiciel Nom de l'éditeur HTML ayant généré la page web.

Keywords "mot clé, mot clé, etc." Mots clés décrivant la page Web.
Rating general Type de contenu (public visé).
Rev Votre@email Mél du Webmestre.
Revisitafter "x days" ou x représente le nombre de Délai de visite par le robot
jours
Robots allnone Permet à tous les robots d'indexerNe permet à aucun robot
d'indexer
Subject "Sujet de la page" Permet de préciser le sujet de la page
 Sites web Statiques

HTML: FRAME 1/2

• Grâce à la technologie des frames (en français "cadres") il est désormais
possible d'afficher plusieurs pages HTML dans différentes zones (ou
cadres).
• Les frames ne font pas partie de la spécification du HTML 3.x, il faut
donc déclarer sa page comme étant écrite en HTML 4.0
• Afin de créer un site contenant des cadres, il suffit de créer un fichier
contenant l'agencement des cadres : ce fichier HTML a pour particularité
d'avoir un conteneur <FRAMESET> à la place du jeu de balises <BODY>.
C'est cette balise qui définit les cadres par leur dimension en pixels ou en
pourcentage (%).

• Voyons ceci sur 3 exemples:

– 2 cadres verticaux
– 2 cadres horizontaux
– 2 cadres horizontaux et un vertical
 Sites web Statiques

HTML: FRAME 2/2

<FRAMESET COLS="20%,80%">
<FRAME SRC="" NAME="gauche">
<FRAME SRC="" NAME="droite">
</FRAMESET>
<FRAMESET ROWS="20%,80%">
<FRAME SRC="" NAME="haut">
<FRAME SRC="" NAME="bas">
</FRAMESET>

<FRAMESET COLS="20%,80%">
<FRAME SRC="" NAME="gauche">
<FRAMESET ROWS="50%, 50%">
<FRAME SRC="" NAME="droit_haut"
<FRAME SRC="" NAME="droit_bas">
</FRAMESET>
 Sites web Statiques

HTML: Les formulaires

• Le formulaire sert à récupérer des données que l’utilisateur va
entrer et les envoyer au serveur pour un traitement (en PHP par
exemple)
• Sont utiles dès lors que l’on souhaite une interaction avec les
utilisateurs du site.

• Deux modes d’envoie des données GET & POST

– "get" : limitée à 255 caractères, informations passées dans la
barre d’adress
– "post" : envoie les données dans le corps de la requête sans
passer par la barre d’adresse. C’est la méthode la plus utilisée
• Action : indique l’adresse du fichier ou programme qui va traiter
les données
 Sites web Statiques

HTML: Les formulaires

• INPUT
– Permet de définir un champ de saisie
– Attributs
• Id: identifiant pour le Javascrpit
• Name: le nom du champ
• Type: le type des valeurs possible
– Number: que des chiffre
– Text: alphanumerique
– Password: text masqué avec des ****
• value=" " : donne une valeur par défaut au champ
• maxlength: le nombre de caractères maximum acceptés
• placeholder: donne une indication de ce que devrait contenir le
champ
• Require: Rendre le champ obligatoire
• ReadOnly: permet de griser le champ
• disabled="disabled » pour désactiver un champ
 Sites web Statiques

HTML: Les formulaires

• INPUT
 Sites web Statiques

HTML: Les formulaires

• TEXTAREA
– Permet de définir une zone de texte
– Attributs
• Id: identifiant pour le Javascrpit
• Name: le nom du champ
• Require: Rendre le champ obligatoire
 Sites web Statiques

HTML: Les formulaires

• CHECKBOX
– Permet de définir des elements à cocher
– • Plusieurs cases, toutes peuvent être cochées
– Attributs
• Id: identifiant pour le Javascrpit
• Name: le nom du champ
• Require: Rendre le champ obligatoire
• Checked: choisir par defaut
 Sites web Statiques

HTML: Les formulaires

• INPUT RADIO
– Permet de définir des elements à cocher
– Un seul choix possible parmi tous les éléments
– C’est INPUT de Type Radio
 Sites web Statiques

HTML: Les formulaires

• SELECT
– Permet de définir des éléments à choisir sur une liste
– Un seul choix possible parmi tous les éléments
 Sites web Statiques

HTML: Les formulaires

• INPUT SUBMIT
– Permet d’envoyer un formulaire
– C’est un bouton
– L’attribut value=" " est obligatoire et permet de donner le « titre » du
bouton
– Le formulaire est envoyé pour traitement au fichier que l’on a défini
dans action=" » du FORM
 Sites web Statiques

HTML: Les formulaires

• INPUT RESET
– Permet d’annuler l’envoie d’un formulaire
– C’est un bouton
– Pour remettre à zéro toutes les données du formulaire
 Sites web Statiques

HTML: Les formulaires

• INPUT FILE
– Permet de charger un fichier
– C’est un bouton
– Pour télécharger vers le serveur un fichier on utilise input type="file"
– Si on envoie un fichier, il faut permettre au formulaire d’envoyer des
données avec l’attribut enctype="multipart/form-data" sur l’élément
form.
 Sites web Statiques

HTML: Les formulaires

• INPUT HIDDEN
– On peut cacher un champ avec input type="hidden"
– Permet d’envoyer des données sans que l’utilisateur ne doive les
remplir ou ne les voie.
 Sites web Statiques

HTML: Les formulaires

 Sites web Statiques

Organisation d’un site web Statique

TD / TP 1:
HTML
Partie 3: Le CSS
 Sites web Statiques

CSS: Définitions
• CSS : feuille de style en cascade
• Permettent de générer la présentation d’une page HTML : séparer
la structure (HTML) de sa présentation (CSS)
• Ensemble de règles stylistiques applicables à un, ou plusieurs
documents HTML => gain de taille du fichier HTML
• Facilite la mise à jour graphique, favorise l’accessibilité
• Gestion des différents médias possible (print, screen, mobile etc.)
• CSS1, CSS2, aujourd’hui la version finalisée est CSS2.1
• CSS3 : en cours de rédaction, certaines propriétés sont finalisées,
d’autres moins
– Utilisable à différents degrés aujourd'hui
• En somme:
– Couleur de texte, image de fond, style de police, menu à
gauche ou à droite : c’est CSS qui va contrôler tout ça
 Sites web Statiques

Le CSS “en ligne” dans la balise HTML

Problèmes de maintenabilité
 Sites web Statiques

Le CSS « interne» dans l’entête du HTML

Problèmes de maintenabilité
 Sites web Statiques

Le CSS « interne» dans l’entête du HTML

Problèmes de maintenabilité
 Sites web Statiques

La/les feuille(s) de style externe(s)

Maintenance très aisée et rapide

 Sites web Statiques

La/les feuille(s) de style externe(s)

 Sites web Statiques

La/les feuille(s) de style externe(s)

 Sites web Statiques

CSS: Syntaxe
 Sites web Statiques

CSS: Les propriétés

https://www.cssdebutant.com/debuter-en-css-les-definitions-
css.html
https://www.web-eau.net/blog/10-proprietes-css3-a-connaitre-et-a-
maitriser

http://www.css-faciles.com/proprietes-css-liste-alphabetique.php

https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-
votre-site-web-avec-html5-et-css3/1608902-memento-des-
proprietes-css

http://www.yoyodesign.org/doc/w3c/css2/propidx.html
 Sites web Statiques

CSS: Syntaxe
 Sites web Statiques

CSS: Généalogie
 Sites web Statiques

CSS: Sélecteur hiérarchique

 Sites web Statiques

CSS: Sélecteur de groupe

 Sites web Statiques

CSS: Sélecteur de classe

 Sites web Statiques

CSS: Sélecteur de classes multiples

 Sites web Statiques

Cibler une balise HTML avec une classe

 Sites web Statiques

Cibler une classe indépendamment de la balise

 Sites web Statiques

Résumé
 Sites web Statiques

Couleurs CSS

https://www.css-faciles.com/couleurs-css.php
BONUS
 Sites web Statiques

La mise en ligne
• Uploader son site vers l’hébergeur (Serveur)
– Souvent à l’aide d’un client FTP
• Protocole FTP : File Transfer Protocol
• Port 21
 Sites web Statiques

La mise en ligne
 Sites web Statiques

Références
• https://www.mcours.net/cours/pdf/hasclic4/hassssclic34.pdf
• https://www.lehtml.com/download/html_fr.pdf
• https://perso.univ-
rennes1.fr/virginie.sans/l2pw/UElibre_Internet.pdf
• https://stephaniewalter.design/formations-cours/initiation-HTML-
CSS.pdf
• http://projet.eu.org/pedago/sin/ICN/2nde/1-html_css.pdf
• https://static.oc-static.com/prod/ebooks/apprenez-a-creer-votre-
site-web-avec-html5-et-css3_2016.pdf
Développement de
sites Web Statiques
Cours Magistral
MIO 2
Dr Edouard Ngor SARR
Enseignant-Chercheur
UFR SES-Université Assane SECK de Ziguinchor (UASZ)
Ziguinchor-Sénégal
Edouard-ngor.sarr@univ-zig.sn
2021-2022