TP1 : Création d'une page web simple

L1 Communication et Médias - Technologies Web

Objectifs pédagogiques

Durée

2 heures

Prérequis

Projet : Portfolio personnel simplifié

Vous allez créer une page web de présentation personnelle comprenant :

Partie 1 : Installation de l'environnement de développement (30 minutes)

1.1 Comprendre l'architecture client-serveur

Dans une architecture web :

1.2 Installation du serveur web local

  1. Installation :

    • Ouvrir VS Code
    • Aller dans Extensions (Ctrl+Shift+X)
    • Rechercher "Live Server"
    • Installer l'extension de Ritwick Dey

  2. Utilisation :

    • Clic droit sur votre fichier HTML
    • Sélectionner "Open with Live Server"
    • Le navigateur s'ouvre automatiquement

1.3 Organisation des fichiers

mon-site/
├── index.html
├── style.css
├── images/
│   ├── photo.jpg
│   └── projets/
│       ├── projet1.jpg
│       ├── projet2.jpg
│       └── projet3.jpg
└── js/
    └── script.js

Avec Live Server :

1.4 Comprendre les URLs locales

http://localhost/mon-site/index.html
│     │         │        └── Fichier demandé
│     │         └── Dossier du projet
│     └── Nom d'hôte local
└── Protocole

1.5 Exercice de vérification

  1. Créer un fichier test.html :
<!DOCTYPE html>
<html>
<head>
    <title>Test Serveur</title>
</head>
<body>
    <h1>Mon serveur fonctionne !</h1>
    <p>Date et heure : <span id="datetime"></span></p>
    <script>
        document.getElementById('datetime').textContent = new Date().toLocaleString();
    </script>
</body>
</html>
  1. Points à vérifier :

Dépannage courant

Problèmes de serveur

Problèmes de fichiers

2. Création de la structure HTML (30 minutes)

2.1 Créer le fichier HTML

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mon Portfolio</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- Le contenu viendra ici -->
</body>
</html>

2.2 Ajouter l'en-tête

<header>
    <h1>Prénom NOM</h1>
    <p>Étudiant(e) en L1 Communication et Médias </p>
</header>

2.3 Créer la section "À propos"

<section class="about">
    <h2>À propos</h2>
    <img src="photo.jpg" alt="Ma photo" class="profile-photo">
    <p>Présentez-vous en quelques lignes...</p>
</section>

2.4 Ajouter la galerie de projets

<section class="projects">
    <h2>Mes Projets</h2>
    <div class="project-grid">
        <article class="project">
            <img src="projet1.jpg" alt="Projet 1">
            <h3>Nom du projet</h3>
            <p>Description courte du projet</p>
        </article>
        <!-- Répéter pour 2 autres projets -->
    </div>
</section>

2.5 Intégrer le formulaire de contact

<section class="contact">
    <h2>Contact</h2>
    <form>
        <div class="form-group">
            <label for="name">Nom :</label>
            <input type="text" id="name" name="name" required>
        </div>
        <div class="form-group">
            <label for="email">Email :</label>
            <input type="email" id="email" name="email" required>
        </div>
        <div class="form-group">
            <label for="message">Message :</label>
            <textarea id="message" name="message" required></textarea>
        </div>
        <button type="submit">Envoyer</button>
    </form>
</section>

3. Mise en forme CSS (45 minutes)

3.1 Créer le fichier style.css

/* Reset de base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Style de l'en-tête */
header {
    text-align: center;
    padding: 40px 0;
    background-color: #f8f9fa;
    margin-bottom: 30px;
}

/* Section À propos */
.about {
    text-align: center;
    margin-bottom: 40px;
}

.profile-photo {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    margin: 20px 0;
}

/* Grille de projets */
.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

.project {
    border: 1px solid #ddd;
    padding: 15px;
    border-radius: 5px;
}

.project img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

/* Formulaire de contact */
.form-group {
    margin-bottom: 15px;
}

label {
    display: block;
    margin-bottom: 5px;
}

input, textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

button {
    background-color: #007bff;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}

4. Responsive Design (30 minutes)

Ajouter ces media queries à votre CSS :

/* Pour tablettes */
@media (max-width: 768px) {
    .project-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Pour mobiles */
@media (max-width: 480px) {
    .project-grid {
        grid-template-columns: 1fr;
    }

    header {
        padding: 20px 0;
    }

    .profile-photo {
        width: 150px;
        height: 150px;
    }
}

5. Tests et optimisation (15 minutes)

Checklist de vérification :

Livrables attendus

  1. Fichier HTML complet
  2. Fichier CSS avec les styles
  3. Dossier d'images utilisées
  4. Capture d'écran du rendu final (desktop et mobile)

Critères d'évaluation

Bonus

Ressources utiles

Questions fréquentes

Q : Comment tester le responsive design ? R : Utilisez les outils de développement du navigateur (F12) et le mode responsive.

Q : Les images ne s'affichent pas ? R : Vérifiez les chemins relatifs dans vos balises <img>.