Support de cours L1 Communication et Médias
Le Web fonctionne sur un modèle client-serveur :
HTML (HyperText Markup Language) : Langage de balisage qui définit la structure du contenu. C'est le squelette de toute page web.
CSS (Cascading Style Sheets) : Feuilles de style en cascade qui gèrent la présentation visuelle et la mise en forme. C'est l'habillage de la page web.
JavaScript (JS) : Langage de programmation qui ajoute de l'interactivité et du dynamisme aux pages web. Il permet de réagir aux actions des utilisateurs et de modifier le contenu en temps réel.
PHP (PHP: Hypertext Preprocessor, définition récursive) : Langage de programmation exécuté côté serveur. Il traite les données avant de les envoyer au navigateur et permet la création de pages web dynamiques. WordPress est écrit en PHP.
SQL (Structured Query Language) : Langage de requête structurée utilisé pour communiquer avec les bases de données. Il permet de stocker, manipuler et récupérer des données de manière structurée.
XML (eXtensible Markup Language) : Format de données utilisé pour structurer et transporter des informations.
JSON (JavaScript Object Notation) : Format léger d'échange de données, très utilisé dans les APIs web.
API (Application Programming Interface) : Interface qui permet à différentes applications de communiquer entre elles.
FTP (File Transfer Protocol) : Protocole de transfert de fichiers utilisé pour envoyer des fichiers vers un serveur web.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Titre de ma page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Le contenu visible va ici -->
</body>
</html>
<h1>Titre principal</h1>
<h2>Sous-titre</h2>
<h3>Sous-sous-titre</h3>
<p>Un paragraphe de texte...</p>
<!-- Liste non ordonnée -->
<ul>
<li>Élément 1</li>
<li>Élément 2</li>
</ul>
<!-- Liste ordonnée -->
<ol>
<li>Premier</li>
<li>Deuxième</li>
</ol>
<a href="https://example.com">Cliquez ici</a>
<img src="image.jpg" alt="Description de l'image">
<header>En-tête de page</header>
<nav>Navigation</nav>
<main>Contenu principal</main>
<footer>Pied de page</footer>
<div>Conteneur générique</div>
Le CSS (Cascading Style Sheets) a été créé en 1994 par Håkon Wium Lie alors qu'il travaillait au CERN aux côtés de Tim Berners-Lee, l'inventeur du Web. Avant le CSS, la mise en forme des pages web était faite directement dans le HTML, ce qui posait plusieurs problèmes :
<!-- Avant CSS -->
<p><font color="blue" size="12" face="Arial">Mon texte</font></p>
Duplication du code : Pour changer la couleur de tous les titres, il fallait modifier chaque balise individuellement.
Limitations créatives : Les options de mise en forme étaient très limitées.
Temps de chargement : Le code était plus lourd car les styles étaient répétés dans chaque page.
L'introduction du CSS a apporté plusieurs améliorations majeures :
Séparation des préoccupations
Maintenance facilitée
/* Un changement ici affecte tous les titres */
h1 {
color: blue;
font-family: Arial;
}
Réutilisation des styles
Responsive Design
@media screen and (max-width: 768px) {
/* Styles pour tablettes et mobiles */
}
Performances améliorées
Le terme "cascading" (en cascade) fait référence à la manière dont les styles sont appliqués et peuvent être remplacés selon des règles de priorité :
Importance
Spécificité
Ordre
/* Exemple de cascade */
p { color: blue; } /* Priorité faible */
.texte { color: red; } /* Priorité moyenne */
#introduction { color: green; } /* Priorité haute */
sélecteur {
propriété: valeur;
autre-propriété: valeur;
}
/* Sélecteur d'élément */
p {
color: blue;
}
/* Sélecteur de classe */
.importante {
font-weight: bold;
}
/* Sélecteur d'ID */
#header {
background-color: black;
}
/* Sélecteur combiné */
.blog-post h2 {
color: navy;
}
p {
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
color: #333333;
text-align: justify;
}
.box {
margin: 10px; /* Marge externe */
padding: 15px; /* Marge interne */
border: 1px solid black;
width: 300px;
height: 200px;
}
.container {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
}
WordPress est un CMS qui permet de :
Une API (Interface de Programmation d'Application) permet à différents systèmes de communiquer entre eux.
// Exemple d'appel API avec fetch
fetch('https://api.exemple.com/data')
.then(response => response.json())
.then(data => {
console.log(data);
// Traitement des données
})
.catch(error => {
console.error('Erreur:', error);
});
Créez une page HTML/CSS contenant :
Créez une page qui :