Zoom sur les langages étudiés en CMW

Au cours de votre formation au sein du Master Cultures et Métiers du Web, vous serez formé à plusieurs langages de programmation : l’HTML, le CSS, le Javascript et le PHP. Cet ensemble de langage, outils indispensable du développement web, permet de concevoir des sites et applications performants. Chacun joue un rôle spécifique dans l’écosystème du web.

Dans cet article, nous explorons l’utilité de ces langages.

HTML

Utilisé pour structurer les pages web, il fait office de langage de balisage. C’est-à-dire qu’il va organiser le contenu sous forme de titres, paragraphes, images, vidéos, tableaux, formulaires, etc. Par la suite, vous pourrez améliorer l’apparence et l’interactivité de ces éléments grâce aux autres langages de programmation.

Il serait donc impossible d’afficher du contenu sur une page web sans le HTML : c’est le squelette des sites web qui est interprété par les différents navigateurs.

Quelques cas d’usages :

Création de sites statiques
Structuration du contenu pour le SEO
Accessibilité des sites web (balises ARIA)

Exemple de code :

				
					<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ma première page</title>
</head>
<body>
    <h1>Bienvenue sur mon site</h1>
    <p>Ceci est un paragraphe avec un <a href="#">lien</a>.</p>
    <img decoding="async" src="image.jpg" alt="Une image descriptive">
</body>
</html>

CSS

Le CSS permet de définir le style et la mise en page des pages web. Grâce à ce langage, vous pouvez modifier les polices, la disposition des éléments, ou encore créer des animations. Autrement dit, c’est un moyen d’ajouter une identité qui vous est propre à votre site web.

Sans le CSS, vous n’aurez qu’un simple texte brut qui s’affiche. De ce fait, le CSS est aussi très important pour l’expérience utilisateur (UX).

Quelques cas d’usage :

Création d’interfaces attrayantes et responsives
Thèmes personnalisés
Amélioration de l’expérience utilisateur avec des animations

Exemple de code :

				
					body {
    font-family: Arial, sans-serif;
    background-color: #f8f9fa;
    color: #333;
}

h1 {
    color: #007bff;
    text-align: center;
}

p {
    font-size: 18px;
    line-height: 1.6;
}

Javascript

Dans le processus de création de votre site, vous pouvez également ajouter de l’interactivité à vos page web grâce au Javascript. Avec ce langage de programmation on peut réagir aux actions de l’utilisateur, charger du contenu sans recharger la page, gérer des formulaire, etc. C’est également un langage utile pour améliorer l’expérience utilisateur.

Quelques cas d’usage :

Développement d’interfaces interactives
Création de jeux et d’applications web avancées
Amélioration de l’expérience utilisateur

Exemple de code :

				
					document.querySelector("h1").addEventListener("click", function() {
    alert("Vous avez cliqué sur le titre !");
});

PHP

PHP est un langage de programmation exécuté côté serveur, utilisé pour générer des pages web dynamiques et interagir avec des bases de données.

Quelques cas d’usage :

Gestion des utilisateurs (authentification, sessions)
Communication avec des bases de données (MySQL, PostgreSQL)
Développement de sites dynamiques et d’APIs

Exemple de code :

				
					<?php
session_start();

if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $username = trim($_POST["username"]);
    $email = trim($_POST["email"]);
    $password = trim($_POST["password"]);

    if (!empty($username) && !empty($email) && !empty($password)) {
        // Vérifier si l'utilisateur existe déjà
        $checkUser = $conn->prepare("SELECT id FROM users WHERE email = ?");
        $checkUser->bind_param("s", $email);
        $checkUser->execute();
        $result = $checkUser->get_result();

        if ($result->num_rows == 0) {
            // Hachage du mot de passe
            $hashedPassword = password_hash($password, PASSWORD_DEFAULT);

            // Insérer l'utilisateur en BDD
            $stmt = $conn->prepare("INSERT INTO users (username, email, password) VALUES (?, ?, ?)");
            $stmt->bind_param("sss", $username, $email, $hashedPassword);

            if ($stmt->execute()) {
                echo "Inscription réussie ! <a href='login.php'>Connectez-vous ici</a>";
            } else {
                echo "Erreur lors de l'inscription.";
            }
        } else {
            echo "Cet email est déjà utilisé.";
        }
    } else {
        echo "Veuillez remplir tous les champs.";
    }
}
?>

<form method="POST">
    Nom d'utilisateur: <input type="text" name="username" required><br>
    Email: <input type="email" name="email" required><br>
    Mot de passe: <input type="password" name="password" required><br>
    <button type="submit">S'inscrire</button>
</form>

Tableau récapitulatif

HTML

Définit la structure et le contenu des pages

CSS

Apporte la mise en forme et l’esthétique

Javascript

Ajoute de l’interactivité et de la dynamique

PHP

Dynamise la page en interagissant avec les bases de données

La Cellule Com’