Cours 27112027

26/11, 18:00
Questionnaire à choix multiple (QCM)
[HTML]
1. Qu'est-ce que HTML signifie?
a) Hyper Text Markup Language
b) Hyperlinks and Text Markup Language
c) Home Tool Markup Language
d) Hyperlink Text Management Language
Réponse Correcte : a) Hyper Text Markup
Language
2. Quel élément est utilisé pour spécifier l'en-tête

d'une page HTML?
a) <header>
b) <head>
c) <title>
d) <h1>
Réponse Correcte : b) <head>
3. Quelle balise est utilisée pour créer une liste

non ordonnée?
a) <ul>
26/11, 18:00
b) <ol>
c) <li>
d) <list>
Réponse Correcte : a) <ul>
[CSS3]
1. Qu'est-ce que CSS signifie?
a) Computer Style Sheets
b) Creative Style Sheets
c) Cascading Style Sheets
d) Colorful Style Sheets
Réponse Correcte : c) Cascading Style Sheets
2. Quelle propriété CSS est utilisée pour définir la

couleur de texte?
a) text-color
b) color
c) font-color
d) textColor
Réponse Correcte : b) color
3. Quelle balise est utilisée pour appliquer du CSS

26/11, 18:00
à une partie spécifique d'une page HTML?

a) <css>
b) <style>
c) <link>
d) <div>
Réponse Correcte : b) <style>
[JavaScript]
1. Quelle est la méthode utilisée pour afficher une
boîte de dialogue avec un message en
JavaScript?
a) alert()
b) prompt()
c) confirm()
d) input()
Réponse Correcte : a) alert()
2. Quel mot clé est utilisé pour déclarer une

variable en JavaScript?
a) declare
b) variable
c) int
26/11, 18:00
d) var
Réponse Correcte : d) var
3. Comment faites-vous référence à un élément

HTML avec l'ID "example" en JavaScript?
a) getElementById("example")
b) selectElement("example")
c) getID("example")
d) querySelector("example")
Réponse Correcte : a)
getElementById("example")
[Modèle MVC]
1. Quel est le rôle du modèle dans l'architecture
MVC?
a) Gérer l'interface utilisateur
b) Gérer les données et la logique de
l'application
c) Contrôler les interactions utilisateur
d) Gérer le style et la présentation
Réponse Correcte : b) Gérer les données et la
logique de l'application
26/11, 18:00
2. Quel est le rôle de la vue dans l'architecture

MVC?
a) Gérer les données
b) Gérer l'interface utilisateur
Réponse Correcte : d) Gérer le style et la
présentation
3. Quel est le rôle du contrôleur dans

l'architecture MVC?
a) Gérer les données
b) Gérer l'interface utilisateur
Réponse Correcte : c) Contrôler les interactions
utilisateur
Exercices
[HTML]
26/11, 18:00
Exercice 1:
Créez une page HTML contenant un titre
"Bienvenue" et un paragraphe contenant le texte
"Ceci est un exercice HTML".
Solution:
```html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Exercice HTML</title>
</head>
<body>
<h1>Bienvenue</h1>
<p>Ceci est un exercice HTML.</p>
</body>
</html>
```
[CSS3]
26/11, 18:00
Exercice 2:
Stylisez le paragraphe de l'exercice précédent en
mettant la couleur du texte en bleu et en
appliquant une police de caractères "Arial".
Solution:
```html
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Exercice CSS</title>
<style>
p{
color: blue;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<h1>Bienvenue</h1>
26/11, 18:00

</body>
</html>
```
[JavaScript]
Exercice 3:
Ajoutez un bouton à la page HTML qui, lorsqu'il
est cliqué, affiche une boîte de dialogue avec le
message "Bonjour!"
Solution:
```html
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Exercice JavaScript</title>
<script>
function afficherMessage() {
alert("Bonjour!");
26/11, 18:00
}
</script>
</head>
<body>
<h1>Bienvenue</h1>
<button onclick="afficherMessage()">Cliquez
ici</button>
</body>
</html>
```
[Modèle MVC]
Exercice 4:
Mettez en place une structure MVC simple en
utilisant JavaScript. Le modèle devrait contenir
une liste de tâches, la vue devrait afficher ces
tâches sous forme de liste, et le contrôleur
devrait permettre d'ajouter de nouvelles tâches à
la liste.
26/11, 18:00
Solution:
```html
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Exercice MVC</title>
<script>
// Modèle
let listeTaches = [];
// Vue
function afficherTaches() {
let ul = document.createElement('ul');
listeTaches.forEach(function(tache) {
let li = document.createElement('li');
li.textContent = tache;
ul.appendChild(li);
});
document.body.appendChild(ul);
}
26/11, 18:00
// Contrôleur
function ajouterTache(tache) {
listeTaches.push(tache);
document.body.innerHTML = ''; // effacer le
contenu actuel
afficherTaches(); // réafficher la liste mise à
jour
}
// Ajouter des tâches initial

ajouterTache("Faire les courses");
ajouterTache("Appeler le client");
</script>
</head>
<body>
</body>
</html>
```
Cours
26/11, 18:00
[React.js]
React.js est une bibliothèque JavaScript

open-source conçue pour construire des
interfaces utilisateur interactives pour les
applications web. Voici une introduction
progressive à React.js :
1. Comprendre les composants :

- En React, tout est un composant - des
éléments de base aux éléments complexes d'une
interface utilisateur.
- Exemple :
```jsx
// Création d'un composant de bouton
réutilisable en React
import React from 'react';
26/11, 18:00
class Button extends React.Component {

render() {
return (
<button>{this.props.label}</button>
);
}
}
// Utilisation du composant Button

const App = () => {
return (
<div>
<Button label="Cliquez-moi" />
</div>
);
};
```
2. Gestion de l'état et des cycles de vie :

- Les composants React ont un état interne qui
peut être modifié et un cycle de vie qui définit
comment ils se comportent à différentes étapes.
26/11, 18:00
- Exercice : Créez un composant de

chronomètre qui s'incrémente chaque seconde.
Solution :
```jsx
import React from 'react';
class Chronometre extends React.Component

{
constructor(props) {
super(props);
this.state = { temps: 0 };
}
componentDidMount() {
this.interval = setInterval(() => {
this.setState({ temps: this.state.temps +
1 });
}, 1000);
}
componentWillUnmount() {
clearInterval(this.interval);
26/11, 18:00
render() {
return (
<div>
Temps écoulé : {this.state.temps}
secondes
</div>
);
}
}
```
3. Intégration avec d'autres technologies :

- React peut être combiné avec d'autres outils
et bibliothèques pour construire une application
complète, comme Redux pour la gestion de l'état
ou React Router pour la navigation.
[JSON]
JSON (JavaScript Object Notation) est un format

26/11, 18:00
de données léger, facile à lire et à écrire pour

l'échange de données. Voici un aperçu de JSON :
1. Structure de base :
- Les données JSON sont représentées sous
forme de paires clé/valeur, et peuvent être
imbriquées pour former des structures
complexes.
- Exemple :
```json
{
"utilisateur": {
"nom": "Jean",
"age": 30,
"adresse": {
"rue": "123 Rue Principale",
"ville": "Paris"
}
}
}
```
26/11, 18:00
2. Utilisation avec JavaScript :

- Les données JSON peuvent être analysées et
générées en JavaScript à l'aide des méthodes
`JSON.parse()` et `JSON.stringify()`.
- Exercice : Analysez une chaîne JSON et
extrayez une valeur spécifique. Solution :
```javascript
const data = '{"utilisateur": {"nom": "Jean",
"age": 30}}';
const objet = JSON.parse(data);
console.log(objet.utilisateur.nom); // Affiche
"Jean"
```
3. Intégration avec les API :

- De nombreuses API web renvoient des
données au format JSON, ce qui les rend faciles à
consommer et à manipuler dans une application
JavaScript.
[Framework]
26/11, 18:00
Un framework est un ensemble d'outils, de

bibliothèques et de conventions qui facilitent le
développement d'applications en fournissant
une structure et des fonctionnalités prédéfinies.
Voici un exemple de framework populaire :
1. Vue d'ensemble de Bootstrap (un framework

CSS) :
- Bootstrap est un framework front-end
populaire qui facilite la création d'interfaces web
responsives et esthétiques.
- Exemple :
```html

<nav class="navbar navbar-expand-lg
navbar-light bg-light">
<a class="navbar-brand" href="#">Mon
Site</a>
<button class="navbar-toggler"
type="button" data-toggle="collapse"
data-target="#navbarNav"
26/11, 18:00
aria-controls="navbarNav"
aria-expanded="false" aria-label="Toggle
navigation">
<span class="navbar-toggler-icon"></
span>
</button>
<div class="collapse navbar-collapse"
id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Accueil
<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link"
href="#">Fonctionnalités</a>
</li>
</ul>
</div>
</nav>
```
26/11, 18:00
2. Structure de grille et composants :

- Bootstrap fournit une grille responsive et une
variété de composants prédéfinis tels que des
boutons, des formulaires, des alertes, etc.
- Exercice : Créez une page web utilisant la grille
Bootstrap pour disposer des éléments sur
différentes colonnes. Solution :
```html
<div class="container">
<div class="row">
<div class="col-md-6">Colonne 1</div>
<div class="col-md-6">Colonne 2</div>
</div>
</div>
```
J'espère que ce cours détaillé vous a donné une

compréhension solide de React.js, JSON, et des
frameworks. Si vous avez besoin de plus
d'exercices corrigés ou d'exemples, n'hésitez
pas à demander!
26/11, 18:00
Bootstrap est un framework de développement

web populaire qui facilite la création de sites web
réactifs et esthétiques. Il utilise des technologies
telles que HTML, CSS et JavaScript pour fournir
des outils utiles pour la conception de sites web.
Voici un cours détaillé sur Bootstrap avec des
exemples d'exercices corrigés.
**Introduction à Bootstrap**
Bootstrap est une collection d'outils permettant
de simplifier la création d'interfaces web. Il fournit
des éléments de design, des modèles de page et
des composants interactifs qui peuvent être
utilisés pour construire des sites web modernes
et adaptatifs.
**Installation de Bootstrap**
Pour commencer à utiliser Bootstrap, vous
pouvez soit télécharger les fichiers Bootstrap
directement depuis leur site web officiel, soit
utiliser des gestionnaires de paquets tels que
npm ou yarn. Une fois les fichiers téléchargés ou
26/11, 18:00
installés, vous pouvez les inclure dans vos

projets web via des balises <link> pour les
fichiers CSS et <script> pour les fichiers
JavaScript.
**Grille Bootstrap**
La grille Bootstrap est un système de grille
responsive qui permet de créer des mises en
page réactives pour différents types d'appareils.
Elle est basée sur un système de colonnes et de
lignes, ce qui permet de définir facilement la
disposition des éléments sur une page web.
**Exercice 1 : Création d'une grille Bootstrap**

Créez une page web avec une grille Bootstrap
contenant deux colonnes. Une colonne devrait
occuper 2/3 de la largeur et l'autre 1/3.
Remplissez les colonnes avec du contenu de
votre choix.
```html
<!DOCTYPE html>
26/11, 18:00
<html lang="en">
<head>
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<link rel="stylesheet" href="path/to/
bootstrap.css">
<title>Bootstrap Grid Exercise</title>
</head>
<body>
<div class="row">
<div class="col-md-8">
<p>Contenu de la colonne 1</p>
</div>
<div class="col-md-4">
<p>Contenu de la colonne 2</p>
</div>
</div>
</div>
</body>
26/11, 18:00
</html>
```
**Composants Bootstrap**
Bootstrap propose une multitude de composants
prédéfinis tels que des boutons, des formulaires,
des modales, des barres de navigation, etc. Ces
composants peuvent être facilement intégrés
dans un site web pour ajouter des fonctionnalités
interactives et esthétiques.
**Exercice 2 : Utilisation des composants

Bootstrap**
Créez une page web contenant un formulaire
d'inscription avec des champs pour le nom,
l'email et le mot de passe. Utilisez les
composants Bootstrap pour styliser le formulaire
et les champs.
```html
<!DOCTYPE html>
<html lang="en">
26/11, 18:00
<head>
initial-scale=1.0">
bootstrap.css">
<title>Bootstrap Components Exercise</title>
</head>
<body>
<form>
<div class="mb-3">
<label for="name" class="form-label">Nom</
label>
<input type="text" class="form-control"
id="name">
</div>
<div class="mb-3">
<label for="email"
class="form-label">E-mail</label>
<input type="email" class="form-control"
26/11, 18:00
id="email">
</div>
<div class="mb-3">
<label for="password"
class="form-label">Mot de passe</label>
<input type="password"
class="form-control" id="password">
</div>
<button type="submit" class="btn
btn-primary">S'inscrire</button>
</form>
</div>
</body>
</html>
```
**Personnalisation et thèmes Bootstrap**

Bootstrap offre la possibilité de personnaliser et
de créer des thèmes afin de s'adapter à l'identité
visuelle d'un projet ou d'une marque. Vous
pouvez personnaliser les couleurs, les polices et
d'autres éléments pour créer une expérience
26/11, 18:00
visuelle unique.
**Exercice 3 : Personnalisation d'un thème

Bootstrap**
Utilisez l'outil de personnalisation de Bootstrap
pour créer un thème personnalisé. Modifiez les
couleurs primaires, secondaires et le style des
boutons pour créer un nouveau thème visuel.
```html

custom-bootstrap-theme.css">
```
**Utilisation de JavaScript avec Bootstrap**

Bootstrap utilise également du JavaScript pour
offrir des fonctionnalités avancées telles que des
modales, des onglets, des carrousels, etc. Ces
fonctionnalités améliorent l'interactivité et
l'expérience utilisateur des sites web.
26/11, 18:00
**Exercice 4 : Utilisation d'un composant

JavaScript Bootstrap**
Créez une page web contenant un carrousel
Bootstrap avec des images de votre choix.
Utilisez le JavaScript de Bootstrap pour activer le
carrousel et faire défiler les images
automatiquement.
```html
<!DOCTYPE html>
<html lang="en">
<head>
initial-scale=1.0">
bootstrap.css">
<title>Bootstrap JavaScript Exercise</title>
</head>
<body>
26/11, 18:00
<div id="carouselExampleControls"
class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="image1.jpg" class="d-block w-100"
alt="Image 1">
</div>
<div class="carousel-item">
<img src="image2.jpg" class="d-block
w-100" alt="Image 2">
</div>
<div class="carousel-item">
<img src="image3.jpg" class="d-block w-100"
alt="Image 3">
</div>
</div>
<button class="carousel-control-prev"
type="button"
data-bs-target="#carouselExampleControls"
data-bs-slide="prev">
<span class="carousel-control-prev-icon"
aria-hidden="true"></span>
26/11, 18:00
<span class="visually-hidden">Previous</
span>
</button>
<button class="carousel-control-next"
type="button"
data-bs-target="#carouselExampleControls"
data-bs-slide="next">
<span class="carousel-control-next-icon"
aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<script src="path/to/bootstrap.js"></script>
</body>
</html>
```
**Conclusion**
Bootstrap est un framework de développement
web puissant et polyvalent qui offre de nombreux
outils pour la création de sites web modernes et
esthétiques. En suivant ce cours et en réalisant
26/11, 18:00
les exercices proposés, vous aurez acquis une

solide compréhension des fonctionnalités de
base de Bootstrap et de la manière de les mettre
en pratique dans vos projets. N'oubliez pas que la
pratique régulière est la clé pour maîtriser
complètement Bootstrap et que l'exploration de
la documentation officielle de Bootstrap vous
permettra d'approfondir davantage vos
connaissances.

Cours 27112027

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

Cours 27112027

Transféré par

Droits d'auteur :

Formats disponibles

26/11, 18:00

Questionnaire à choix multiple (QCM)

2. Quel élément est utilisé pour spécifier l'en-tête

3. Quelle balise est utilisée pour créer une liste

2. Quelle propriété CSS est utilisée pour définir la

3. Quelle balise est utilisée pour appliquer du CSS

à une partie spécifique d'une page HTML?

2. Quel mot clé est utilisé pour déclarer une

3. Comment faites-vous référence à un élément

2. Quel est le rôle de la vue dans l'architecture

3. Quel est le rôle du contrôleur dans

<p>Ceci est un exercice HTML.</p>

// Ajouter des tâches initial

React.js est une bibliothèque JavaScript

1. Comprendre les composants :

class Button extends React.Component {

// Utilisation du composant Button

2. Gestion de l'état et des cycles de vie :

- Exercice : Créez un composant de

class Chronometre extends React.Component

3. Intégration avec d'autres technologies :

JSON (JavaScript Object Notation) est un format

de données léger, facile à lire et à écrire pour

2. Utilisation avec JavaScript :

3. Intégration avec les API :

Un framework est un ensemble d'outils, de

1. Vue d'ensemble de Bootstrap (un framework

2. Structure de grille et composants :

J'espère que ce cours détaillé vous a donné une

Bootstrap est un framework de développement

installés, vous pouvez les inclure dans vos

**Exercice 1 : Création d'une grille Bootstrap**

**Exercice 2 : Utilisation des composants

**Personnalisation et thèmes Bootstrap**

**Exercice 3 : Personnalisation d'un thème

**Utilisation de JavaScript avec Bootstrap**

**Exercice 4 : Utilisation d'un composant

les exercices proposés, vous aurez acquis une

Vous aimerez peut-être aussi

Exercice 1 : Création d'une grille Bootstrap

Personnalisation et thèmes Bootstrap

Utilisation de JavaScript avec Bootstrap