Note de Cours Dev Web Et Multimedia-2

Développement web et multimédia
Enseignant: Nizar MAATOUG

ISET Bizerte
AU 2021-2022
Notes de cours
Aperçu du contenue
 Généralités et notions de bases

 Internet: historique, Architecture
 Les services Internet
 Les standards du web: URL, HTTP, HTML
 Évolution du web: Web statique, web dynamique
 Outils du web
 Navigateurs
 Site web: objectifs et cible
 Le référencement du site
 La gestion du site
2
Généralités et notions de bases
Internet: historique
 Initialement nommé DARPAnet: conçu à des fins militaire, par le département de

défense Américaine en 1969.
 En 1972, renommé ARPAnet, rendu public, il relie des centres universitaires.
 Les applications d’Internet se diversifie au cours du temps: messagerie, telnet,..
 Entre 1991 et 1993 à Genève, Tim Berners-Lee définit le protocole HTTP
 Le Web est né et avec lui avec « Mosaic » Le premier Navigateur Web.
 A partir de 1995 Internet est devenu accessible au grand public.
4
Internet: Architecture
requête
client serveur
réponse
Application Protocole Application

cliente serveur
FileZilla FTP Serveur de

fichier
Mozilla Thunderbird SMTP Serveur de
messagerie
Putty Telnet, SSH Serveur SSH
Navigateur HTTP Serveur web
5
Navigateur
 Client web
 Envoyer une requête HTTP (HyperText Transfer Protocol) au serveur identifiée par un URL
(Unifrom Resource Locator)
 Récupérer la réponse.
 Interpréter le code:
 HTML(HyperText Markup Langage),
 CSS (Cascading Style Sheets)
 Javascript
 Exemple: Chrome de google, Mazilla Firefox, Internet Explorer, Opera, Safari,…
6
Architecture du web
Web statique
Serveur
GET: page index.html
Navigateur
index.html
Pages web HTML +CSS+ JavasSript
Web dynamique
Serveur
GET: voitures.php?color=red
Navigateur
DB
Voitures.php Programme web

7
Les Outils
 Editeurs de codes:
 Notepad++
 VS-code
 Atom
 ...
 WYSIWYG (What You See Is What You Get): éditeur en mode graphique:
 Macromedia Dreamweaver,
 FrontPage,
 WIX,
 Webnode,..
8
Site web: objectifs et cible
 Définir l'objectif du site
 Quel est le public visé ?
 Que sera l'environnement cible des visiteurs ? (OS, Navigateur,..)
 En visitant un site web, En quelques secondes, l’internaute doit répondre à toutes
les questions qu’il peut se poser:
 Quel est le sujet dont traite le site ?
 Où suis-je ?
 Quelles sont les actions que je peux faire ?
 Où puis-je trouver l’information que je cherche ?
 Quelles sont les nouveautés du site ?
 Quels sont les chemins que je peux emprunter ?
 La charte graphique et l'ergonomie d'un site sont deux points à ne pas négliger :
 Qualité image (couleurs, typographie, logo, icônes, boutons …)
 Confort de navigation, de prise d'informations
9
 Une cohérence totale avec tous les autres supports de communication
Référencements
 le référencement d'un site internet sur les moteurs de recherche consiste à
mettre en œuvre des pratiques pour faire apparaître un site dans les moteurs
de recherche et pour lui faire gagner des positions.
 Il existe deux types de référencement:
 Le référencement automatique assuré par des programmes qui scrutent les pages
d'un site en s'appuyant, par exemple, sur les balises META situées dans la balise
d'en-tête <HEAD> de page et la description des liens et des images.
 Le référencement manuel, comme sur Yahoo, c’est le fait d’ajouter l’URL du site à
la liste d’URLs de ce moteur de recherche.
 Il existe plusieurs façons de se référencer :
 De manière gratuite.
 De manière payante.
10
Les Bases de HTML5
HTML5= HTML+CSS+JavaScript
Introduction
 HTML (HyperText Markup Langage): métalangage de description des pages web.

 HTML5 est la dernière révision majeure d'HTML.
 HTML5 désigne souvent un ensemble de technologies Web (HTML5, CSS3 et JavaScript)
 HTML définit la structure et la sémantique d’une page web
12
Structure d’un document HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Nom du document</title>
</head>
<body>

</body>
</html>
13
Les balises
<p>un premier paragraphe</p>
<img src="images/html5.jpg" alt="Logo HTML5">
<p>un premier paragraphe qui décrit <strong>HTML5</strong></p>
14
Les titres
 HTML définit 6 niveaux de titres:
<h1>Titre plus important</h1>

<h2>Titre niveau 2</h2>
<h6>Titre moins important</h6>
 Titre plus important -> taille plus grande
 Les titres aident à référencer votre site
 Jamais utiliser les titres pour mettre en forme du texte
15
Structure du texte
16
Exemples
<p> Il serait <em>avantageux</em> de savoir coder en HTML avant de faire du CSS. </p>
<p> Il est <strong> indispensable </strong> de savoir coder en HTML avant de faire du CSS. </p>
<p>Une suite géométrique de raison q est : U <sub>n</sub> = q * U<sub>0</sub></p>
<p> La dérivée de x<sup>3 </sup> vaut 3x<sup>2</sup>.</p>
17
Attribut Style: modifier la couleur
<h1 style="color:#ff0000"> Ce texte sera en rouge. </h1>
<h1 style=" background-color :blue"> Titre 01 </h1>
18
Attribut Style: modifier la police
<h1 style="font-family:verdana;"> Ce texte sera en verdana. </h1>
<h1 style="font-family:verdana,sans-serif">Ce texte sera en verdana ou en sans-

serif si verdana n'est pas installée.</h1>
19
Attribut Style: modifier la taille
<h1 style="font-size: 10px"> Ce texte aura 10px de taille. </h1>
20
Les images
 Pour afficher une image en HTML, on utilise la balise «<img>». Elle admet des
différents attributs, dont les plus importants sont « src » et « alt ».
 src : permet de renseigner le chemin de l'image, qui peut être absolu ou relatif.
 alt : affiche un texte alternatif à la place de l'image dans le cas où, pour une raison ou
une autre, celle-ci ne peut pas être chargée. Il aide de plus les moteurs de recherche à
référencer l'image.
<img src="./images/isetBizerte.jpeg" alt="Iset Bizerte">
21
Les liens hypertextes
 Un lien hypertexte est un élément HTML permettant d'envoyer le visiteur vers

une nouvelle page.
Index.html etudiants.html
<a href="etudiants.html">Etudiants</a>
22
Les liens hypertextes
 Il existe deux types de liens:

 Lien externe: vers une autre page
<a href="etudiants.html">Etudiants</a>
<a href="http://www.isetbz.rnu.tn/">ISET BIZERTE</a>
 Lien interne: dans la même page
<div id="section1">
<a href="#section1">Section 1</a> </div>
Index.html 23
Liens hypertextes

<a href="http://www.isetbz.rnu.tn/" target="_blank">ISET Bizerte</a>


<a href="page2.html">page 2</a>


<a href="page2.html" title="lien vers page 2">page 2 avec l'attribut title</a>


<a href="./autre-repertoire/page3.html">page 3</a>


<a href="#section2">Section 2</a>


<a href="page2.html#section2">Page 2 (section 2)</a> 24
Liens hypertextes

<a href="http://www.isetbz.rnu.tn/">
<img src="./images/isetBizerte.jpeg" alt="Iset Bizerte">
</a>

<a href="mailto:nizar.maatoug@hotmail.com">Contacter-moi</a>


<a href="mailto:nizar.maatoug@hotmail.com?subject=sujet&body=Bonjour Mr...">
Contacter-moi concernant le sujet
</a>


<a href="mailto:nizar.maatoug@hotmail.com;mohamed@gmail.com">Email à tous les clients</a>
25
Les listes
 Elles servent, comme leur nom l'indique, à créer une liste d'éléments (items).
 On distingue principalement trois types différents de listes:
 Les listes non ordonnées, ou à puces.
 Les listes ordonnées.
 Les listes de définitions.
26
Liste non ordonnée
<p> Ma liste de courses : </p>
<ul>
<li> Champignons </li>
<li> Avocat </li>
<li> Dentifrice </li>
<li> Céréales </li>
</ul>
<ul style="list-style-type: circle;">
<li> Avocat </li>
</ul>
27
Liste non ordonnée
<ul style="list-style-type: square;">
<li> Avocat </li>
</ul>
<ul style="list-style-type: none;">
<li> Avocat </li>
</ul>
28
Liste non ordonnée
<ul>
<li style="list-style-image:url(images/ballon.png);"> Champignons </li>
<li style="list-style-image:url(images/ballon.png);"> Avocat </li>
<li style="list-style-image:url(images/ballon.png);"> Dentifrice </li>
<li style="list-style-image:url(images/ballon.png);"> Céréales </li>
</ul>
<style>
Li {list-style-image:url(images/ballon.png); }
</style>
29
Liste ordonnée
<h2>Liste Ordonnée</h2>
<ol>
<li> 1ère place </li>
<li> 2ème place </li>
</ol>
<ol start="2">
</ol>
30
Liste ordonnée
<ol type="I">
</ol>
<ol type="i">
</ol>
<ol type="A">
</ol>
<ol type="a">
<li> 2ème place </li> 31
</ol>
Listes imbriquées
<ol type="I">
<li> La genèse</li>
<li> La vie
<ol type="A">
<li>L'enfance</li>
<li>L'adolescence</li>
<li>Le passage à l'âge adulte
<ul>
<li> Le jeune adulte </li>
<li> La crise de la quarantaine</li>
</ul>
</li>
<li> La vieillesse </li>
</ol>
</li>
<li>La mort</li>
</ol> 32
Listes de définitions
<dl>
<dt>Firefox</dt>
<dd>
Un navigateur Web libre, open-source, multi-plateforme développé par la
Mozilla Corporation et des centaines de volontaires.
</dd>

</dl>
33
Les conteneurs
 Pour organiser le contenu d’une page web en HTML on pourra utiliser

 soit des balises génériques : <div> et <span>
 ou des balises sémantiques: <Header>, <main>, <section>, <aside>,...
34
Les balises génériques
 L'élément HTML <div> (qui signifie division du document) est un conteneur

générique qui permet d'organiser le contenu sans représenter rien de
particulier.
 <div> est utilisé pour regrouper d’autres éléments et leurs appliquer un style
 L'élément HTML <span> est un conteneur générique en ligne (inline) pour les
contenus phrasés.
<div style="background-color: blue;">Conteneur div 1</div>

<div style="background-color: red;">Conteneur div 2</div>
<div style="background-color: green;">Conteneur div 3</div>
<hr>
<span style="background-color: blue;">texte 1</span>
<span style="background-color: red;">texte 2</span>
<span style="background-color: red;">texte 3</span>
35
Balises sémantiques
<body>
<header>
<nav>
<ul>
<li><a href=""></a></li>
</ul>
</nav>
</header>
<main>
<aside>
</aside>
<article>
</article>
</main>
<footer>
</footer> 36
</body>
Balises sémantiques
37
Chapitre 3:Les notions
Avancées du HTML
Les Tableaux
Les Formulaires
Les tableaux
 Un tableau est une suite de lignes et de colonnes qui forment un ensemble de

cellules.
 Les tableaux servent avant tout à présenter des données tabulaires.
 Malgré cela, l'emploi le plus fréquent des tableaux reste la mise en page des
documents.
39
Tableaux: Exemple
<table >
<tr>
<td> Cellule 1</td>
<td> Cellule 2</td>
</tr>
<tr>
<td>Cellule 3</td>
<td>Cellule 4</td>
</tr>
</table>
<style>
table, th,td{
border: 1px solid black;
} 40
</style>
Tabeleaux: Titre
<table >
<caption>Titre du tableau</caption>
<tr>
<td> Cellule 1</td>
<td> Cellule 2</td>
</tr>
<tr>
<td>Cellule 3</td>
<td>Cellule 4</td>
</tr>
</table>
41
Tableaux: en-tête
<table >
<caption>Titre du tableau</caption>
<tr>
<th>Libelle1</th>
<th>Libelle2</th>
</tr>
<tr>
<td> Cellule 1</td>
<td> Cellule 2</td>
</tr>
<tr>
<td>Cellule 3</td>
<td>Cellule 4</td>
</tr>
</table>
42
Fusion de Lignes et de colonnes
<table>
<tr>
<td colspan="5"> Cellule qui occupe 5 colonnes</td>
</tr>
<tr>
<td>Colonne 1</td>
<td>Colonne 2</td>
<td>Colonne 3</td>
<td>Colonne 4</td>
<td>Colonne 5</td>
</tr>
</table>
43
Fusion de Lignes et de colonnes
<table>
<tr>
<td rowspan="2">Cellule sur deux lignes</td>
<td>Ligne 1 - Colonne 2</td>
</tr>
<tr>
</tr>
</table>
44
Exercice
45
Correction
<table>
<tr>
<td colspan="3">Cellule 1</td>
<td>Cellule 2</td>
</tr>
<tr>
<td rowspan="3">Cellule 3</td>
<td>Cellule 4</td>
<td>Cellule 5</td>
<td>Cellule 6</td>
</tr>
<tr>
<td>Cellule 7</td>
<td colspan="2" rowspan="2">Cellule 8</td>
</tr>
<tr>
<td>Cellule 9</td>
</tr> 46
</table>
Regroupement: <thead>, <tbody>, <tfoot>
<table>
<thead>

</thead>
<tbody>

</tbody>
<tfoot>

</tfoot>
</table>
47
Regroupement: Exemple
<table>
<caption>Liste des moyennes</caption>
<thead>
<tr>
<th>Elève</th>
<th>Math</th>
<th>Web</th>
<th>SGBD</th>
<th>Sport</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Moyenne classe</th>
<th colspan="4">13</th>
</tr>
</tfoot>
<tbody>

</tbody>
48
</table>
Les Formulaires
49
Les formulaires
 HTML permet de présenter les données du serveur au utilisateurs
 Les formulaires HTML permettent aux utilisateurs d’envoyer des données au serveur:
 Inscription d’un étudiant,
 Formulaire de contact,..
 Les formulaires sont dotés de différents contrôles:
 Champs de saisies
 Listes de choix
 Boutons
50
Les formulaires
Eléments de formulaire Contrôles Bouton de soumission
51
Les formulaires
 Les formulaires HTML permettent l’interaction de l’utilisateur

 Les données du formulaire sont envoyées au serveur
52
Les formulaires: Exemple avec GET
<form action="search.php" method="GET" >
<input name="motCle">
<input type="submit">
</form>
53
Les formulaires: Exemple avec POST
<form action="inscription.php" method="POST" >
<input type="text" name="nomUtilisateur">
<input type="password" name="motDePasse">
<input type="submit">
</form>
54
Les formulaires: Catégories de contrôles
Texte mono-ligne Texte multi-lignes Sélection
55
Texte mono-ligne: les contrôles de base
Text / Search Hidden Password
56
Autres types d’input
Email URL Telephone
Number Date Time
57
Avantages
 les types de données contribuent à la convivialité et à la précision

 Des input de différents types aident à :
 clarifier la requête
 Appliquer des contrôlent syntaxique.
 Adapter le clavier virtuel (pour les équipements mobiles)
58
Exemples: input text, password, hidden
<form action="traitement.php" method="post">
<input type="text" name="nom" placeholder="Votre Nom">
<input type="password" name="motDePasse" id="pwd">
<input type="hidden" name="cle" value="1251444444566">
</form>
59
Exemples: input
<input type="text" name="nom" placeholder="Votre nom">

<input type="password" name="motDePasse" id="pwd">
<input type="email" name="email" placeholder="Votre Email">
<input type="tel" name="phone" id="phone">
<input type="url" name="site" id="site">
<input type="number" name=poids>
<input type="date" name="dateNaissance" id="dateNaissance">
<input type="time" name="heureRDV" id="heure">
<input type="color" name="couleurPrefere" id="colorPrefere">
<input type="submit" value="Valider">

<input type="reset" value="Effacer">
60
Liste déroulante
<select name="couleur_yeux">
<option value="bleus">Bleus</option>
<option value="bruns" selected="selected">Bruns</option>
<option value="verts">Verts</option>
<option value="noisettes">Noisettes</option>
<option value="gris">Gris</option>
<option value="vairons">Vairons</option>
</select>
61
Les boutons radios
<input type="radio" name="civilite" value="mlle"> Mademoiselle

<input type="radio" name="civilite" value="mme"> Madame
<input type="radio" name="civilite" value="mr"> Monsieur
<input type="radio" name="civilite" value="mlle"> Mademoiselle

<input type="radio" name="civilite" value="mme"> Madame
<input type="radio" name="civilite" value="mr" checked> Monsieur
62
Les cases à cocher
<input type="checkbox" name="qualite" value="intelligent"> Intelligent
<input type="checkbox" name="qualite" value="beau"> Beau
<input type="checkbox" name="qualite" value="serviable"> Serviable
<input type="checkbox" name="qualite" value="fort"> Fort
<input type="checkbox" name="qualite" value="généreux"> Généreux
63
Range
<input type="range" name="niveau" id="niveau" min="0" max="10" value="5" step="1">
64
Validation coté client
 Vérifier la validité des champs du formulaire avant l’envoie au serveur.

 Une deuxième validation coté serveur sera effectuée.
65
Attributs de validation
66
Contrôles de Sélection
Select (List) Radio Buttons Check box Range
67
Validation: exemples
<form action="action.php" method="post">
<input type="text" name=nom minlength="10" maxlength="30">
<input type="submit" value="Valider">

<input type="reset" value="Initialiser">
</form>
68
Organiser les contrôles
 Label: associer un texte ou une icône avec un contrôle input

 Fieldset: organiser, regrouper des contrôles
69
Label


<label for="nom">Nom:</label>
<input type="text" name="nom" id="nom">

<label>Nom:
</label>
70
Fieldset
<form action="inscription.php" method="post">
<fieldset>
<legend>Inscription</legend>
<label for="nom">Nom:</label>
<label for="prenom">Prénom:</label>
<input type="text" name="prenom" id="prenom">
<label for="email">Email:</label>
<input type="email" name="email" id="email">
</fieldset>
</form>
71
Input: file
 Permet d’envoyer un fichier au serveur
<form action="action.php" method="post" enctype="multipart/form-data">
<input type="file" name="fichier" id="fichier" >
<input type="submit" value="Envoyer">
</form>
72
Exercice
73
Les contenus embarqués
Vidéo
Audio
Défintion
 On désigne par contenu embarqué tout élément faisant référence à des

données stockées dans un fichier ou une ressource externe ou document
HTML:
 Image
 Audio
 Vidéo
 ...
75
<video>
 La balise <video > est une toute nouvelle addition au HTML5.

 Permet de visionner une vidéo dans une page web
<video width="320" height="240" controls>

<source src="demo.mp4" type="video/mp4">
<source src="demo.wmv" type="video/wmv">
<source src="demo.webm" type="video/webm">
</video>
76
<video>
 Autres attributs:
 autoplay: lance la lecture de la vidéo dès le chargement de la page
 Autobuffer: active le téléchargement de la vidéo en arrière plan.
 poster: permet d’ajouter une image du vidéo
 loop: jouer la vidéo en boucle.
77
<audio>
 Permet d’ajouter un son (fichier audio) à une page web.
<audio controls>
<source src="chanson.mp3" type="audio/mpeg">
<source src=" chanson.ogg" type="audio/ogg">
Votre navigateur ne supporte pas ces formats audio.
</audio>
78
<audio>
 Autres attributs:
 loop: l’audio sera joué en boucle
 autoplay: l’audio sera joué dès le chargement de la page
 preload: indique si l’audio peut être préchargé dès le chargement de la page.
79
Les feuilles
de style CSS
Introduction
 CSS (Cascading Style Sheets): langage de style utilisé pour décrire la

présentation d’un document écrit en langage de balisage, en particulier HTML
 La dernière version CSS3 date de 2017
 Plus concrètement, le CSS (ou feuille de style) est un document numérique
qui va pouvoir spécifier toutes les caractéristiques de mise en forme du
document lié à la balise à laquelle elle s'applique.
81
Exemple
<div>
<ul>
<li>liste</li>
<li>non</li>
<li>ordonnée</li>
</ul>
</div>
<div style="color: blue;">

<ul>
<li>liste</li>
<li style="font-style: italic;">non</li>
<li>ordonnée</li>
</ul>
</div>
82
Exemple
<!DOCTYPE html>
<html lang="fr">
<head>
<title>CSS: exemple 2</title>
<style>
div{
color: blue;
}
#li2{
font-style: italic;
}
</style>
</head>
<body>
<div>
<ul>
<li>liste</li>
<li id="li2">non</li>
<li>ordonnée</li>
</ul>
</div>
</body> 83
</html>
Exemple
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<ul>
<li>liste</li>
<li id="li2">non</li>
<li>ordonnée</li>
</ul>
</div>
</body>
</html>
84
Avantages
 Séparation du contenu et de la mise en forme

 Mettre à jour le style d’un seul endroit (le
fichier css) sans toucher la structure HTML
 optimisation du temps de chargement
style.css
index.html
page1.html
...
85
CSS: syntaxe
sélecteur{
propriété du style: valeur;
}
div{
color: blue;
}
86
Ordre d’importation
 Démonstration
87
Héritage, Spécialisation
 Démonstration
88
Les sélecteurs
sélecteur{
propriété du style: valeur;
}
89
Les sélecteurs de base
Sélecteur universel *{background-color: white;} a b c d
Sélecteur de type div{propriété: valeur;} a div c div
Sélecteur id #b{propriété: valeur;} #a #b #c #d
Sélecteur class .c{propriété: valeur;} .c .b .c .d
<div class="c"></div>
<span class="c d"></span>
90
Les sélecteurs combinés
Sélecteur OU div,a{propriété: valeur;} a div c div
Sélecteur ET div.c{propriété: valeur;} .c div.c .a div
Sélecteur Descendant div a{propriété: valeur;}
Sélecteur fils div > a{propriété: valeur;}

91
Les sélecteurs combinés (2)
frère div ~ a{propriété: valeur;} a div a a
frère-adjacent div + a{propriété: valeur;} a div a a
92
Les sélecteurs d’attributs
possède attribut [a]{propriété: valeur;} [a] [c] [a="1"] d
attribut=valeur [a="1"]{propriété: valeur;} [a] [c] [a="1"] d
Commence par [a^="1"]{propriété: valeur;} [a="12"] [a="21"]
Se termine par [a$="1"]{propriété: valeur;} [a="12"] [a="21"]
Sous-chaine [a*="1"]{propriété: valeur;} [a="12"] [a="21"]

93
Sélecteur: Pseudo-Element
Avant div::before{content: "text";}
Après div::after{content: "text";}
94
Sélecteur: pseudo-class état
Premier fils a:first-child
Dernier fils a:last-child
nieme fils a:nth-child(2n)
95
nieme dernier fils a:nth-last-child(3)
CSS: notions avancées
Modèle de boite
Positionnement
Float
Modèle de boite
margin  Chaque élément HTML est représenté

dans le navigateur selon le modèle en
border boite:
padding  Un contenu
 Une bordure (border)
contenu  Un padding: marge entre le contenu est
la boite
 Un margin: marge exétrieur entre la
boite est les autres éléments HTML.
 Chaque propriété est ajustée sur les 4
cotés:
 Top
 Right
 Bottom
 Left 97
Modèle de boite
98
Exemple (1)
p{
width: 200px;
border-top-width: thin;
border-bottom-width: 10px;
border-right-width: medium;
border-left-width: thick;
border-color: blue;
border-style: solid;
margin: 5px 3px 4px 9px;
padding:1px 5px;
}
99
Exemple (2)
p{
width: 200px;
height: 100px;
border: 5px dotted red;
margin: 5px 4px 9px;
padding:1px;
}
100
Exemple (3)
#p1{
box-sizing: content-box;
width: 200px;
height: 100px;
padding:1px;
}
#p2{
box-sizing: border-box;
width: 200px;
height: 100px;
padding:1px;
}
101
Positionnement
Positionnement
 Le positionnement en CSS consiste à gérer la position des éléments les uns par
rapport aux autres dans une page web.
103
Mise en page avec CSS
Grid Layout
Introduction
 Il existe plusieurs façons pour mettre en page un site:

 Les tableaux HTML
 La propriété float de CSS
 Inline-block
 Data Grid et flexbox
 Dans ce chapitre, nous étudierons CSS Grid Layout et @media query pour
rendre la page responsive
105
Créer des Layouts avec CSS Grid
CSS Grid: rôle
Header
Nav Main Aside
Footer
107
CSS Grid rôle
108
CSS Grid: rôle
Header
Nav Main Aside
Footer
109
Avantages
CSS Grid est le premier gestionnaire de

layout propre
110
Avantages
Float layout n’est pas déclarative
Intention: 3 colonnes Ecrire: 3 colonnes grid
111
Inconvénients
prise en charge par les navigateurs
Complexité d’implémentation
112
Inconvénients
113
Pourquoi les Grid ?
114
Pourquoi les Grid ?
Grid permet de donner une

structure à un contenu visuels
115
116
Pourquoi les Grid ?
117
12 colonnes Grid System
118
12 colonnes Grid System
119
CSS Grid workflow
Approche à 2-étapes
Positionner les
Définir le GRID
éléments
121
Les propriétés de GRID
122
Template ou maquette
Header
Nav Main Aside
Footer
123
Template ou maquette
Header
Nav Main Aside
Footer
124
Définir les colonnes du GRID
<div class="container"> .container {
<header>Header</header> height: 100%;
<nav>Navigation</nav> display: grid;
<main>Main</main> grid-template-columns: 1fr 2fr 1fr;
<aside>Aside</aside> grid-template-rows: 10% 70% 20%;
<footer>Footer</footer> }
</div>
125
126
Changer la position des Grid-items
grid-column-start grid-column-end
127
1 2 3 4
128
Définir les colonnes du GRID
<div class="container"> .container {
<header>Header</header> height: 100%;
<nav>Navigation</nav> display: grid;
<main>Main</main> grid-template-columns: 1fr 2fr 1fr;
<aside>Aside</aside> grid-template-rows: 10% 70% 20%;
<footer>Footer</footer> }
</div>
header, footer {
grid-column-start: 1;
grid-column-end: 4;
}
129
130
Grid: Définition avancé
Track sizes
Grid shorthands
Grid gaps
Grid: Track sizes
 Valeurs statiques: px, pc, …

 Pourcentage
 auto
 Fraction
 min-content, max-content
 minmax()
 fit-content()
132
.container{
grid-template-columns: 100px 50px 20pc;
}
Valeurs statiques
px, pt,..
133
.container{
grid-template-columns: 25% 50px 25%;
}
Pourcentages
relative à la taille du Grid
134
.container{
grid-template-columns: 25% auto 25%;
}
auto
Laisser le navigateur décide
135
.container{
grid-template-columns: 10px 1fr 2fr;
}
fraction
Diviser la partie restante
136
.container{
grid-template-columns: 10px 1fr 2fr;
}
fraction
Diviser la partie restante
137
Viewport responsive Vs content responsive
138
.container{
grid-template-columns: 1fr min-content 2fr;
}
min-content
Réserver le track le plus petit que possible
139
.container{
grid-template-columns: 1fr max-content 2fr;
}
max-content
Réserver le track le plus grand que possible
140
.container{
grid-template-columns: 1fr minmax(max-content,50%) 2fr;
}
minmax(min-size,max-size)
Fonction spécifiant la taille min et max du track
141
.container{
grid-template-columns: 1fr fit-content(100px) 2fr;
}
fit-content(max-size)
Adapter la taille du track mais pas plus que max-size
142
Grid shorthands
143
.container{
grid-template: 1fr 2fr / repeat(5, 2fr 3fr);
}
grid-template
Propriété pour définir les lignes et les colonnes
144
Votre objectif ce n’est pas
d’écrire le minimum de code
145
Grid Gaps
146
.container{
grid-column-gap: 10px;
}
grid-column-gap
La distance entre les colonnes du grid
147
148
.container{
grid-row-gap: 20px;
}
grid-row-gap
La distance entre les lignes du grid
149
150
.container{
grid-gap: 20px 10px;
}
grid-gap
La distance entre les lignes et les colonnes du grid
151
152
Positionnement avancé
153
.item{
grid-column: 1 / 3;
}
grid-column
Définir grid-column-start et grid-column-end
154
.item{
grid-row: 2 / 4;
}
grid-row
Définir grid-row-start et grid-row-end
155
.item{
grid-area: 2 / 2 / 3 /6;
}
grid-area
Définir la position de item avec une seule propriété
156
Alignement et justification
Vous pouvez aligner les items

seulement si le container est
plus grand que le contenu
157
Alignement et justification
item container
Grid Page web
contenu area
158
Alignement du Grid dans la page web
159
160
161
Alignement du contenu dans une cellule
162
163
164
Propriétés d’alignement et justification
justify-content
align-content
justify-items
align-items
justify-self
align-self
165
Justifier et aligner
166
justify-content et align-content
167
168
169
170
171
172
Justify-items et align-items
173
174
175
176
177
justify-items et align-items
178
Justify-self et align-self
179
180
181
182
justify-self et align-self
183
Media-Query
Responsive Design
Introduction
 La spécification CSS3 Media-Queries définit les techniques pour l'application
de feuilles de styles en fonction des périphériques de consultation utilisés.
 un style adapté au périphérique:
185
Exemple
186
Responsive Design
 Adapter dynamiquement le design en fonction de la taille de l’écran.
Header
Header Header
Nav Nav
Nav Main Aside Main

Main Aside
Aside
Footer Footer
Footer
Large screen Medium screen Small screen
187
Approche: Mobile-first
small.css
@media screen and (min-width:valeur) {}
medium.css
@media screen and (min-width:valeur) {}
large.css
188
Small Screen Header
Nav
Main
html,body {
height: 100%; Aside
} Footer
.container {
height: 100%;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 2fr 4fr 2fr 1fr;
}
header, footer,nav,main,aside {
grid-column-end: 2;
}
189
Medium Screen
Header
Nav
Main Aside
@media screen and (min-width: 475px) {
.container { Footer
height: 100%;
display: grid;
grid-template-columns: 3fr 1fr;
grid-template-rows: 1fr 2fr 4fr 1fr;
}
header,footer,nav{
grid-column-end: 3;
}
}
190
Header
Large screen
Nav Main Aside
@media screen and (min-width: 650px) {
.container {
height: 100%;
display: grid;
grid-template-columns: 1fr 2fr 1fr; Footer
grid-template-rows: 10% 70% 20%;
}
header, footer {
grid-column-end: 4;
}
nav{
grid-column-end: 2;
}
main{
grid-column-end: 3;
}
aside{
grid-column-end: 4; 191
}
}
Remarque
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Layout 1</title>

</head>
<body>
</body>
</html>
192
Exercice
193
Exercice
194
Page index: Maquette
195
Page index: Maquette
196
Page galerie: maquette
197
198
199
Approche: Mobile-first
small.css
@media screen and (min-width:350px) {}
medium.css
@media screen and (min-width:750px) {}
large.css
200
Démarche
 Créer la structure du projet
 Implémenter la structure haut niveau des pages index.html et galerie.html
 Appliquer l’approche mobile-first aux pages index.html et galerie (Niveau 1)
 Implémenter le header
 Appliquer l’approche mobile-first au header
 Implémenter la barre de navigation
 Appliquer l’approche mobile-first au nav
 Implémenter le footer
 Implémenter la section pour index.html
 Implémenter la section pour galerie.html
 Appliquer l’approche mobile-first à la section (galerie.html)
 Compéter les styles de forme, couleur,.. 201
Structure du projet
Mise en page pour les PC
Mise en page pour les tablettes
Annuler les styles par défaut (à télécharger de Internet)
Mise en page pour les smartphones
Mise en forme et couleurs
202
Structure Haut niveau: index.html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/small.css">
<link rel="stylesheet" href="css/medium.css">
<link rel="stylesheet" href="css/large.css">
</head>
<body>
</body>
</html>
203
Structure Haut niveau: index.html
<body>
<div class="container">
<header class="entete">Header</header>
<nav>Nav</nav>
<section>Section</section>
<footer>Footer</footer>
</div>
</body>
</html>
204
Approche: mobile-first: small.css
/*****************Positionnement Niveau 1******************/
html,body{
width: 100%;
height: 100%;
margin:0 auto;
}
.container{
width: 100vw;
height: 100vh;
display: grid;
grid-template-rows: 1fr 1fr 5fr 1fr;
}
/*********************************************************/
205
Ne pas oublier: style.css
*{
}
206
Approche: mobile-first: medium.css
@media screen and (min-width:350px) {
207
Approche: mobile-first: large.css
/******Positionnement Niveau 1******/ .entete,footer{

body{ grid-column-start: 1;
width: 80%; grid-column-end: 3;
margin: 0 auto; }
nav{
} grid-column-start: 1;
.container{ grid-column-end:2;
width: 80vw; }
height: 100%; section{
margin:0; grid-column-start:2;
display: grid; grid-column-end: 3;
grid-template-columns: 1fr 4fr; }
grid-template-rows: 1fr 6fr 1fr; /**********************/
} }
208
Header
209
Implémentation du Header: index.html
<header class="entete">
<img class="logo" src="images/Dexter's_Lab_Logo.png" alt="Logo Dexter">
<div class="titre-1">
<h1>Bienvenue sur ma page personnelle</h1>
<h3>Je suis en TI16 et j'apprends le HTML et CSS</h3>
</div>
</header>
210
Approche mobile-First du Header: small.css
/***************Positionnement Header*****************/
.entete{
display: grid;
grid-template-rows: min-content min-content;
}
.logo{
width:80vw;
justify-self: center;
align-self: center;
}
.titre-1{
width: 80%;
align-self: center;
text-align: center;
}
211
/***************************************************/
Approche mobile-First Header: medium.css
212
Approche mobile First du Header: large.css
/***************Positionnement Header****************/
.entete{
display: grid;
grid-template-columns: min-content 1fr;
}
.logo{
width: 20vw;
height: 80%;
}
.titre-1{
align-self: center;
text-align: center;
}
213
/*********************************************************/
}
Navigation
214
Implémenter la navigation: index.html
<nav>
<h3>Menu</h3>
<ul>
<li><a href="index.html"> Acceuil </a></li>
<li><a href="#"> Mon CV </a></li>
<li><a href="galerie.html"> Ma galerie </a></li>
<li><a href="#"> Inscrivez-vous </a></li>
<li><a href="#"> Contactez-Moi </a></li>
</ul>
</nav>
215
Approche mobile-first navigation: small.css
/************************Navigation***********************/
nav > ul {
display: grid;
text-align: center;
margin-top: 0;
margin-bottom: 0;
width: 100%;
nav > h3 {
display: none;
}
/**********************************************************/
216
Approche mobile First du Nav: medium.css
217
Approche mobile First du Nav: large.css
/************************Nav******************************/
nav > ul {
margin-left: 0;
padding: 0 0 0 5px;
text-align: left;
width: 100%;
display: grid;
}
nav > ul > li > a {
padding: 10px;
}
nav > h3{
display: block;
} 218
/*********************************************************/
}
Footer
219
Implémenter le Footer: index.html
<footer>
<h2>
Copyright (c) 2021
<a class="lien“ href="mailto:LaboDexter@gmail.fr">
LaboDexter@gmail.fr
</a>
</h2>
</footer>
220
Implémenter la section: index.html
<section>
<article>
<header>
<h2>A propos de moi</h2>
</header>
<p>
Salut! Je m'appelle Dexter et je suis le héro d'un dessin animé…
</p>
</article>
. . .
</section>
221
galerie
222
Implémenter la section: galerie.html
<section>
<article>
<header>
<h2>Mes photos</h2>
</header>
<div class="galerie">
<img src="Images/img_01.png" alt="img01">
<img src="Images/img_03.jpg" alt="img03">
</div>
</article>
</section>
223
Approche mobile-first galerie: small.css
/*****************Galerie images**************************/
.galerie {
display: grid;
grid-column-gap: 10px;
grid-row-gap: 10px;
justify-items: center;
}
/*********************************************************/
224
Approche mobile-first galerie: medium.css

/***********************Galerie images********************/
.galerie {
display: grid;
grid-template-columns: 1fr 1fr;
}
/*********************************************************/
}
225
Approche mobile-first galerie: large.css

/***********************Galerie images********************/
.galerie {
display: grid;
grid-template-columns: repeat(4,1fr);
}
/*********************************************************/
226
Mise en forme: style.css
*{
}
body{
background-color: #DDDDDD;
font-family: Century Gothic, Tahoma, Arial, Verdana, Helvetica, sans-serif;
}
.container{
background-color: #AAAAFF;
}
227
/*********Header**************/
.logo{ .titre-1 > h3{
display: block; color: white;
} font-size:20px;
.entete{ font-weight: bold;
background-color: LightBlue; text-align: center;
} padding:20px 5px;
.titre-1 > h1{ }
color: yellow; /*****************************/
font-size: 32px;
font-weight: bold;
text-align: center;
padding: 10px;
width: 100%;
}
228
/***********Nav***************/ nav > ul > li > a {

nav{ color: Navy;
width: 100%; display: block;
height: 100%; border-bottom: 3px solid Yellow;
background-color:#AAAAFF ; text-decoration: none;
} font-weight: bold;
nav > ul{ line-height: 20px;
list-style-type: none; padding:10px;
} }
nav > h3 {
color: Yellow; nav > ul > li > a:hover {
font-weight: bold; color: Orange;
text-align: center; background-color: White;
margin-top:1em; }
margin-bottom: 1em; /*****************************/
display: block; 229
}
/********* SECTION ***********/ article h2, h3 {
section{ font-size: 18px;
width: 100%; font-weight: bold;
height: 100%; }
background-color:#AAAAFF ;
} article h2 {
color: white;
article { }
background-color: #eee;
margin: 10px; article h3 {
padding: 15px 10px; color: navy;
} }
article p {
article > header { font-size: 18px;
background-color: LightBlue; margin-top: 1em;
text-align: center; margin-bottom: 1em;
margin-top:1em; text-align: justify; 230
margin-bottom:1em; }
} /****************************/
/*******Galerie images*******/
.galerie img{
width: 100%;
height: 100%;
display: inline-block;
border: 1px solid black;
box-shadow: 5px 5px 5px black;
border-radius: 10px;
}
.galerie > img:hover{

filter: grayscale(100%);
cursor: pointer;
}
/****************************/
231
/*********Footer**************/ footer > h2 {

footer { font-size: 14px;
background-color: LightBlue; color: White;
height: 100%; font-weight: bold;
}
color:Yellow;
text-align:center; footer > a {
padding: 15px; margin-left: 20px;
} }
232

Note de Cours Dev Web Et Multimedia-2

Transféré par

Informations du document

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

Note de Cours Dev Web Et Multimedia-2

Transféré par

Droits d'auteur :

Formats disponibles

Développement web et multimédia

Enseignant: Nizar MAATOUG

 Généralités et notions de bases

 Initialement nommé DARPAnet: conçu à des fins militaire, par le département de

Application Protocole Application

FileZilla FTP Serveur de

Putty Telnet, SSH Serveur SSH

Navigateur HTTP Serveur web

Voitures.php Programme web

 HTML (HyperText Markup Langage): métalangage de description des pages web.

<p>un premier paragraphe</p>

<img src="images/html5.jpg" alt="Logo HTML5">

<p>un premier paragraphe qui décrit <strong>HTML5</strong></p>

<h1>Titre plus important</h1>

<p>Une suite géométrique de raison q est : U <sub>n</sub> = q * U<sub>0</sub></p>

<p> La dérivée de x<sup>3 </sup> vaut 3x<sup>2</sup>.</p>

<h1 style="color:#ff0000"> Ce texte sera en rouge. </h1>

<h1 style=" background-color :blue"> Titre 01 </h1>

<h1 style="font-family:verdana;"> Ce texte sera en verdana. </h1>

<h1 style="font-family:verdana,sans-serif">Ce texte sera en verdana ou en sans-

<h1 style="font-size: 10px"> Ce texte aura 10px de taille. </h1>

<img src="./images/isetBizerte.jpeg" alt="Iset Bizerte">

 Un lien hypertexte est un élément HTML permettant d'envoyer le visiteur vers

 Il existe deux types de liens:

 Lien interne: dans la même page

<a href="#section1">Section 1</a> </div>

 Pour organiser le contenu d’une page web en HTML on pourra utiliser

 L'élément HTML <div> (qui signifie division du document) est un conteneur

<div style="background-color: blue;">Conteneur div 1</div>

 Un tableau est une suite de lignes et de colonnes qui forment un ensemble de

 HTML permet de présenter les données du serveur au utilisateurs

Eléments de formulaire Contrôles Bouton de soumission

 Les formulaires HTML permettent l’interaction de l’utilisateur

<form action="search.php" method="GET" >

<input type="text" name="nomUtilisateur">

<input type="password" name="motDePasse">

Texte mono-ligne Texte multi-lignes Sélection

Text / Search Hidden Password

Email URL Telephone

Number Date Time

 les types de données contribuent à la convivialité et à la précision

<form action="traitement.php" method="post">

<input type="text" name="nom" placeholder="Votre Nom">

<input type="password" name="motDePasse" id="pwd">

<input type="hidden" name="cle" value="1251444444566">

<input type="text" name="nom" placeholder="Votre nom">

<input type="submit" value="Valider">

<input type="radio" name="civilite" value="mlle"> Mademoiselle

<input type="radio" name="civilite" value="mlle"> Mademoiselle

<input type="range" name="niveau" id="niveau" min="0" max="10" value="5" step="1">

 Vérifier la validité des champs du formulaire avant l’envoie au serveur.

Select (List) Radio Buttons Check box Range

<form action="action.php" method="post">

<input type="text" name=nom minlength="10" maxlength="30">

<input type="submit" value="Valider">

 Label: associer un texte ou une icône avec un contrôle input

/Positionnement Niveau 1/ .entete,footer{

/*Nav*****/ nav > ul > li > a {

/*Footer******/ footer > h2 {