CHAPITRE 1 : HTML - CSS -

JAVASCRIPT .

Objectifs :
- Définir HTML, CSS, JAVASCRIPT,
Site Web, Lien, Hyperlien, Hypertexte,
URL, Charte graphique, HTTPS,
Protocole HTML.
- Historique du Web ( www ) et Web2.0
- Décrire la structure d´une page Web
et HTML. ( Illustrer par des exemples).
- Comment utiliser les principes des
balises HTML. ( Illustrer par des
exemples).
- Comment appliquer les mises en
forme sur une page Web à partir des
feuilles de styles CSS. ( Illustrer par
des exemples).
- Comment intégrer des formules sur
une page Web HTML. ( Illustrer par des
exemples).
- Comment utiliser JAVASCRIPT pour
intégrer dans une page Web de
communication avec un serveur Web. (
Ilustrer par des exemples).
- Comment employer JAVASCRIPT
pour adapter le comportement d´une
page Web aux besoins du client.
( Illustrer par des exemples). ( Illustrer
par des exemples).
- Comment concevoir une charte
graphique d´un site Web. ( Illustrer par
des exemples).
- Comment concevoir un site Web.
( Illustrer par des exemples).
- Comment animer le site web et le
rendre dynamique. ( Illustrer par des
exemples).
- Comment faciliter les échanges entre
un site Web et une base de donnée.
( Illustrer par des exemples).
- Comment utiliser le CSS pour rendre
attrayant les pages Web. ( Illustrer par
des exemples).
- Quels sont les outils pouvant faciliter
la conception des sites Web. ( Illustrer
par des exemples).
- Quels sont les outils pouvant faciliter
la gestion des sites Web. ( Illustrer par
des exemples).

Voici les définitions :

*HTML (Hypertext Markup Language)*

- Langage de balisage utilisé pour créer

des pages Web
- Permet de structurer et de formatter le
contenu
d'une page Web
- Utilise des balises pour définir les
éléments de la page (titres,
paragraphes, images, liens, etc.)

*CSS (Cascading Style Sheets)*

- Langage de style utilisé pour mettre

en forme les pages Web
- Permet de définir la présentation
visuelle des éléments HTML
- Utilise des sélecteurs pour cibler les
éléments HTML et appliquer des styles

*JAVASCRIPT*

- Langage de programmation utilisé

pour ajouter des fonctionnalités
interactives aux pages Web
- Permet de créer des effets
dynamiques, des animations et des
interactions avec l'utilisateur
- Utilise des bibliothèques et des
frameworks pour faciliter le
développement

*Site Web*

- Ensemble de pages Web liées entre

elles
- Permet de présenter des informations,
des services ou des produits à un
public cible
- Peut être statique (contenu fixe) ou
dynamique (contenu généré à la
demande)

*Lien*

- Élément cliquable qui permet de

naviguer vers une autre page Web ou
un autre site Web
- Peut être un texte, une image ou un
bouton

*Hyperlien*

- Lien qui permet de naviguer vers une

autre page Web ou un autre site Web
- Utilise l'attribut `href` pour spécifier
l'adresse de la page cible
*Hypertexte*

- Texte qui contient des liens vers

d'autres pages Web ou des ressources
en ligne
- Permet de créer des relations entre
les informations et de faciliter la
navigation
*URL (Uniform Resource Locator)*

- Adresse unique qui identifie une

ressource en ligne (page Web, image,
fichier, etc.)
- Utilise le format
`protocole://domaine/chemin`

*Charte graphique*

- Ensemble de règles qui définissent la

présentation visuelle d'un site Web
- Permet de créer une identité visuelle
cohérente et de faciliter la navigation

*HTTPS (Hypertext Transfer Protocol

Secure)*

- Protocole de communication sécurisé

pour les échanges entre un navigateur
et un serveur Web
- Utilise le chiffrement pour protéger les
données échangées

*Protocole HTML*

- Ensemble de règles qui définissent la

structure et la syntaxe des documents
HTML
- Permet de créer des pages Web
compatibles avec
les navigateurs Web

*Historique du Web*

- 1989 : création du Web par Tim

Berners-Lee
- 1991 : premier navigateur Web
(WorldWideWeb)
- 1993 : premier moteur de recherche
(Altavista)
- 2004 : apparition du concept de
Web2.0

*Web2.0*

- Évolution du Web qui met l'accent sur

l'interaction et la collaboration
- Caractéristiques :
- Interaction utilisateur
- Contenu généré par les utilisateurs
- Réseaux sociaux
- Applications Web riches (RIA)
- API et services Web
*Structure d'une page Web et HTML*

Une page Web est composée de

plusieurs éléments :

1. En-tête (header) : contient les

métadonnées de la page
2. Corps (body) : contient le contenu de
la page
3. Pied de page (footer) : contient les
informations de fin de page

Exemple de structure HTML :

```
<html>
<head>
<title>Page d'accueil</title>
</head>
<body>
<h1>Bienvenue sur mon site Web !
</h1>
<p>Paragraphe d'introduction.</p>
 </body>
</html>
```

*Utilisation des balises HTML*

Les balises HTML sont utilisées pour
structurer et formatter le contenu de la
page.

Exemples de balises HTML :

- Balises de titre : `<h1>`, `<h2>`,

`<h3>`, etc.
- Balises de paragraphe : `<p>`, `<br>`,
`<hr>`
- Balises d'image : `<img>`, `<figure>`,
`<figcaption>`
- Balises de lien : `<a>`, `<link>`

Exemple :
```
<h1>Titre principal</h1>
<p>Paragraphe d'introduction.</p>
<img src="image.jpg" alt="Image
d'illustration">
<a href="contact.html">Lien vers la
page de contact</a>
```

*Mises en forme avec CSS*

Les feuilles de styles CSS sont utilisées

pour appliquer des styles visuels à la
page Web.
Exemple de feuille de style CSS :
```
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
}

.titre {
color: #00698f;
font-size: 24px;
}
```

Exemple d'intégration de CSS dans

une page HTML :
```
<html>
<head>
<link rel="stylesheet" type="text/css"
href="style.css">
</head>
 <body>
<h1 class="titre">Bienvenue sur mon
site Web !</h1>
<p>Paragraphe d'introduction.</p>
 </body>
</html>
```

*Intégration de formules sur une page

Web HTML*

Les formules peuvent être intégrées

dans une page Web HTML à l'aide de
la balise `<form>`.

Exemple :
```
<form>
<label for="nom">Nom :</label>
<input type="text" id="nom"
name="nom"><br>
<label for="email">Email :</label>
<input type="email" id="email"
name="email"><br>
<input type="submit"
value="Envoyer">
</form>
```

Il est également possible d'utiliser des

bibliothèques JavaScript telles que
MathJax pour afficher des équations
mathématiques complexes.

Exemple :
```
<script type="text/javascript" src="(link
unavailable)"></script>

<p>L'équation de la droite est : \(y = mx

+ b\)</p>
```

*Utilisation de JAVASCRIPT pour la

communication avec un serveur Web*

JAVASCRIPT peut être utilisé pour

envoyer des requêtes HTTP à un
serveur Web et récupérer des données
en utilisant les technologies suivantes :

- AJAX (Asynchronous JavaScript and

XML)
- Fetch API
- XMLHttpRequest
Exemple d'utilisation de Fetch API pour
récupérer des données depuis un
serveur Web :
```
fetch('(link unavailable)')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
```

Exemple d'utilisation de AJAX pour

envoyer des données à un serveur
Web :
```
var xhr = new XMLHttpRequest();
xhr.open('POST', '(link unavailable)',
true);
xhr.setRequestHeader('Content-Type',
'application/json');
xhr.send(JSON.stringify({name: 'John',
age: 30}));
```
*Utilisation de JAVASCRIPT pour
adapter le comportement d’une page
Web aux besoins du client*

JAVASCRIPT peut être utilisé pour

adapter le comportement d’une page
Web en fonction des besoins du client
en utilisant les technologies suivantes :

- Cookies
- LocalStorage
- SessionStorage
- Media Queries

Exemple d'utilisation de Cookies pour

stocker les préférences de l'utilisateur :
```
function setPreference(preference) {
document.cookie = 'preference=' +
preference + '; expires=Fri, 31 Dec
2024 23:59:59 GMT';
}
function getPreference() {
var cookies =
document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
 var cookie = cookies[i].trim();
if (cookie.startsWith('preference=')) {
return cookie.substring(10);
}
}
return null;
}
```

Exemple d'utilisation de LocalStorage

pour stocker les données de l'utilisateur
:
```
localStorage.setItem('username',
'John');
var username =
localStorage.getItem('username');
```

Exemple d'utilisation de Media Queries

pour adapter la mise en page en
fonction de la taille de l'écran :
```
@media (max-width: 768px) {
/* styles pour les écrans de petite taille
*/
}

@media (min-width: 1024px) {

 /* styles pour les écrans de grande
taille */
}
```

*Exemples d’utilisation de JAVASCRIPT

pour améliorer l’expérience utilisateur*

- Gestion des événements (clic, souris,

clavier)
- Animation et effets visuels
- Validation des formulaires
- Mise à jour dynamique du contenu

Exemple d'utilisation de JAVASCRIPT

pour valider un formulaire :
```
function validateForm() {
var username =
document.getElementById('username').
value;
 var password =
document.getElementById('password').
value;
if (username === '' || password === '')
{
alert('Veuillez remplir tous les
champs');
return false;
}
 return true;
}
```

_Concevoir une charte graphique d’un

site Web_

Une charte graphique définit l’identité

visuelle d’un site Web.

Éléments à définir :

1. Couleurs : choix de 2-3 couleurs

principales
2. Typographie : choix de 1-2 polices
3. Logo : conception ou utilisation d’un
logo existant
4. Iconographie : choix d’icônes
cohérents
5. Disposition : organisation des
éléments sur la page

Exemple de charte graphique :

*Couleurs :*

- Principale : #3498db
- Secondaire : #f1c40f
- Fond : #ffffff

*Typographie :*

- Titres : Open Sans

- Texte : Lato

*Logo :*

- Logo SVG personnalisé

*Iconographie :*

- Icônes Material Design

*Disposition :*

- Header : logo et navigation

- Contenu : texte et images
- Footer : informations de contact et
réseaux sociaux
_Concevoir un site Web_

Étapes :

1. Définir l’objectif et le public cible

2. Créer un wireframe (modèle de
structure)
3. Concevoir la charte graphique
4. Créer un prototype fonctionnel
5. Développer le site Web

Outils :

- Adobe XD
- Sketch
- Figma
- WordPress
- HTML/CSS/JS

Exemple de conception de site Web :

*Page d’accueil :*

- Header : logo et navigation

- Section hero : image et texte
- Section features : liste d’avantages
- Section témoignages : citations
- Footer : informations de contact

*Page de contact :*

- Formulaire de contact
- Carte de localisation
- Informations de contact

_Animer le site Web et le rendre

dynamique_

Techniques :

1. Animations CSS
2. JavaScript (jQuery, GSAP)
3. Bibliothèques d’animation (Anime.js,
Velocity.js)
4. Effets de transition
5. Interactions utilisateur (hover, clic)
Exemple d’animation :

*Effet de transition entre les pages :*

- Utilisation de CSS pour créer un effet

de fade-in
- Ajout d’un délai pour créer un effet de
transition

```
.transition {
transition: opacity 0.5s ease-in-out;
}
```

*Animation de bouton au survol :*

- Utilisation de CSS pour créer un effet

de scale
- Ajout d’un délai pour créer un effet de
transition

```
.button:hover {
transform: scale(1.1);
transition: transform 0.2s ease-in-out;
}
```
_Faciliter les échanges entre un site
Web et une base de donnée_
Les échanges entre un site Web et une
base de donnée peuvent être facilités
en utilisant :

1. Langages de programmation : PHP,

Python, Ruby, Java
2. Frameworks : Laravel, Django, Ruby
on Rails, Spring
3. Bibliothèques : MySQLi, PDO,
SQLAlchemy
4. API : REST, GraphQL

Exemple d'utilisation de PHP et

MySQLi pour récupérer des données
depuis une base de donnée :

```
$conn = new mysqli($servername,
$username, $password, $dbname);
$sql = "SELECT * FROM utilisateurs";
$result = $conn->query($sql);
while($row = $result->fetch_assoc()) {
 echo $row["nom"] . " " .
$row["prenom"] . "<br>";
}
```

_Utiliser le CSS pour rendre attrayant

les pages Web_
Le CSS peut être utilisé pour rendre
attrayant les pages Web en :

1. Définissant des couleurs et des

polices
2. Créant des layouts et des
dispositions
3. Ajoutant des effets de transition et
d'animation
4. Utilisant des médias queries pour
l'adaptation aux différents écrans

Exemple de code CSS pour créer un

effet de transition entre les pages :

```
.transition {
transition: opacity 0.5s ease-in-out;
}
```
Exemple de code CSS pour créer un
layout responsive :

```
.container {
max-width: 800px;
 margin: 0 auto;
padding: 20px;
}

@media (max-width: 768px) {

.container {
max-width: 100%;
padding: 10px;
}
}
```

_Outils pour faciliter la conception des

sites Web_

Les outils suivants peuvent faciliter la

conception des sites Web :

1. Éditeurs de code : Visual Studio

Code, Sublime Text, Atom
2. Frameworks CSS : Bootstrap,
Foundation, Bulma
3. Bibliothèques JavaScript : jQuery,
React, Angular
4. Outils de design : Adobe XD, Sketch,
Figma
5. Plateformes de développement :
WordPress, Wix, Squarespace
Exemple d'utilisation de Bootstrap pour
créer un layout responsive :

```
<div class="container">
<div class="row">
<div class="col-md-4">Column
1</div>
<div class="col-md-4">Column
2</div>
<div class="col-md-4">Column
3</div>
</div>
</div>
```

Exemple d'utilisation de WordPress

pour créer un site Web :

1. Installation de WordPress
2. Choix d'un thème
3. Création de pages et d'articles
4. Configuration des plugins et des
widgets
*Outils de gestion de contenu*

1. WordPress : plateforme de gestion

de contenu la plus populaire
2. Joomla : autre plateforme de gestion
de contenu populaire
3. Drupal : plateforme de gestion de
contenu pour les sites complexes
4. Ghost : plateforme de gestion de
contenu pour les blogs

Exemple : Utilisation de WordPress

pour créer et gérer des articles

*Outils d'analyse et de suivi*

1. Google Analytics : outil d'analyse de

trafic et de comportement des
utilisateurs
2. Google Search Console : outil de
suivi des performances de recherche
3. SEMrush : outil d'analyse de
référencement et de compétitivité
4. Ahrefs : outil d'analyse de liens et de
référencement

Exemple : Utilisation de Google

Analytics pour suivre le trafic et les
conversions

*Outils de sécurité*

1. Wordfence : plugin de sécurité pour

WordPress
2. Sucuri : outil de sécurité pour les
sites Web
3. MalCare : outil de sécurité pour les
sites Web
4. SSL/TLS : protocole de sécurisation
des données

Exemple : Utilisation de Wordfence

pour protéger un site WordPress contre
les attaques

*Outils de maintenance*
1. UpdraftPlus : plugin de sauvegarde
pour WordPress
2. BackupBuddy : plugin de sauvegarde
pour WordPress
3. WP Rocket : plugin d'optimisation de
performances pour WordPress
4. W3 Total Cache : plugin
d'optimisation de performances pour
WordPress
Exemple : Utilisation d'UpdraftPlus pour
sauvegarder un site WordPress

*Outils de collaboration*

1. Trello : outil de gestion de projet et

de collaboration
2. Asana : outil de gestion de projet et
de collaboration
3. Slack : outil de communication et de
collaboration
4. GitHub : outil de gestion de code et
de collaboration

Exemple : Utilisation de Trello pour

gérer un projet de développement Web

*Outils de test et de débogage*

1. Chrome DevTools : outil de

débogage pour les développeurs Web
2. Firefox Developer Edition : outil de
débogage pour les développeurs Web
3. Safari Web Inspector : outil de
débogage pour les
développeurs Web
4. DebugBar : outil de débogage pour
les développeurs Web

Exemple : Utilisation de Chrome

DevTools pour déboguer un code
JavaScript