TP1 Développement Web Niveau CP1
Les balises principales de HTML5 sont les suivantes :
1. Structure de base
<!—Ceci est commentaire -->
<!DOCTYPE html> <!-- Déclaration du type de document -->
<html lang="fr"> <!-- Racine du document -->
<head> <!-- Métadonnées -->
<meta charset="UTF-8"> <!-- Encodage des caractères -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Titre de la page</title> <!-- Titre de l'onglet -->
</head>
<body>
<!-- Contenu visible -->
<!-- Contenu de la page -->
</body>
</html>
TP 1 : Structure de base d’une page HTML5
Objectif : Créer une page HTML5 valide avec la structure minimale.
1. Créez un fichier `[Link]`.
2. Ajoutez la déclaration `<!DOCTYPE html>`.
3. Structurez la page avec `<html>`, `<head>` et `<body>`.
4. Dans `<head>`, ajoutez :
- Un `<meta charset="UTF-8">`.
- Un `<title>` avec le texte "Ma première page HTML5".
5. Dans `<body>`, ajoutez un `<h1>` avec le texte "Bienvenue sur mon site !".
Testez votre code: Ouvrez la page `[Link]` dans un navigateur
2. Balises sémantiques (structure de la page )
<header> <!-- En-tête de la page ou d'une section -->
<nav> <!-- Barre de navigation -->
<main> <!-- Contenu principal -->
<section> <!-- Section thématique -->
<article> <!-- Contenu indépendant (article, blog, etc.) -->
<aside> <!-- Contenu secondaire (sidebar, infos complémentaires) -->
<footer> <!-- Pied de page -->
TP 2 : Balises sémantiques et texte
Objectif : Utiliser les balises sémantiques et de mise en forme.
1. Dans le `<body>` de votre fichier `[Link]`, ajoutez :
- Un `<header>` avec un titre `<h1>` et un paragraphe `<p>` de bienvenue.
- Une `<nav>` contenant une liste `<ul>` de 3 liens fictifs (`<a href="#">`).
- Une `<section>` avec un `<h2>` et deux paragraphes.
- Un `<footer>` avec un texte de copyright ("© 2024 MonSite").
Testez votre code : Vérifiez que la structure est bien organisée et lisible.
3. Balises de contenu
<h1> à <h6> <!-- Titres (du plus important au moins important) -->
<p> <!-- Paragraphe -->
<a href="lien"> <!-- Lien hypertexte -->
<img src="[Link]" alt="Description"> <!-- Image -->
<ul>, <ol>, <li> <!-- Listes (non ordonnée, ordonnée, élément) -->
<div> <!-- Conteneur générique (block) -->
<span> <!-- Conteneur générique (inline) -->
TP 3 : Images et liens
Objectif : Intégrer des images et des liens externes.
1. Dans le corps de la balise `<section>` de votre page [Link], ajoutez :
- Une image (`<img src="[Link]" alt="Description">`). *(Utilisez une image locale ou une URL
externe.)*
- Un lien vers un site externe (ex: `<a href="[Link]
2. Dans le `<footer>`, ajoutez un lien vers une page "Mentions légales" (`[Link]`).
Testez votre code: Vérifiez que l’image s’affiche et le clique sur les liens fonction.
4 Balises importantes
<table>, <tr>, <td>, <th> <!-- Tableaux -->
<iframe> <!-- Intégration d'une autre page -->
<progress> <!-- Barre de progression -->
<time> <!-- Date/heure -->
<mark> <!-- Texte mis en évidence -->
TP 4 : Listes et tableaux
Objectif : Maîtriser les listes et tableaux.
1. Dans une nouvelle `<section>`, créez :
- Une liste non ordonnée (`<ul>`) de 3 éléments.
- Une liste ordonnée (`<ol>`) de 3 étapes pour une recette.
<section>
<h2>Exmple listes</h2>
<h3>Plan de cours</h3>
<ul>
<li>HTML5</li>
<li>CSS</li>
<li>javascript</li>
</ul>
<h3>Liste ordonnée </h3>
<ol>
<li>Apprendre HTML5</li>
<li>Apprendre CSS</li>
<li>Apprendre javascript</li>
</ol>
</section>
<table border="1">
2. Ajoutez un tableau (`<table>`) avec : <tr>
<th>Nom</th>
- Un `<thead>` contenant une ligne d'en-tête <th>Âge</th>
<th>Ville</th>
(<tr>) contenant 3 <th> : Nom, Âge, Ville. </tr>
<tr>
- Un `<tbody>` avec 2 lignes de données (<tr>) <td>Ahmed</td>
<td>25</td>
avec 3 <td> : <td>Rabat</td>
</tr>
Ahmed, 25, Rabat. <tr>
<td>Fatima</td>
Fatima, 21, Agadir <td>21</td>
<td>Agadir</td>
Testez votre code: : Vérifiez que les listes et le tableau </tr>
sont bien affichés. </table>
5. Balises de formulaire
<form> <!-- Formulaire -->
<input> <!-- Champ de saisie (texte, email, password, etc.) -->
<textarea> <!-- Zone de texte multiligne -->
<button> <!-- Bouton -->
<select>, <option> <!-- Liste déroulante -->
<label> <!-- Étiquette pour un champ -->
<fieldset> <!-- Groupe de champs -->
<legend> <!-- Titre d'un fieldset -->
TP 5 : Formulaire de contact
Objectif : Créer un formulaire interactif.
L’aide dans la page [Link]
1. Ajoutez une `<section>` avec un `<h2>` "Contactez-nous".
2. Créez un `<form>`
<form action="/traitement-formulaire" method="POST">
.. .
</form>
contenant :
- Un champ texte (`<input type="text" name="nom" placeholder="Nom">`).
- Un champ email (`<input type="email" name="email" placeholder="Email">`).
- Une zone de texte (`<textarea name="message"></textarea>`).
- Un bouton de soumission (`<button type="submit">Envoyer</button>`).
Chaque entrée (input) doit être met dans une balise <div>. Exemple :
<div>
<label for="nom">Nom :</label>
<input type="text" id="nom" name="nom" placeholder="Votre nom complet" required>
</div>
Testez votre code : Testez le formulaire (vérifiez l’affichage).
6. Balises multimédias
<audio> <!-- Intégration d'un fichier audio -->
<video> <!-- Intégration d'une vidéo -->
<canvas> <!-- Zone de dessin (JavaScript) -->
<svg> <!-- Graphiques vectoriels -->
TP 6 : Multimédia (Audio/Video)
Objectif : Intégrer des éléments multimédias.
1. Dans une nouvelle `<section>`, ajoutez :
- Une vidéo (`<video controls><source src="video.mp4" type="video/mp4"></video>`).
- Un lecteur audio (`<audio controls><source src="audio.mp3" type="audio/mpeg"></audio>`).
2. (Si vous n’avez pas de fichiers, utilisez des liens externes.)
Testez votre code : Jouez la vidéo et l’audio pour vérifier qu’ils fonctionnent.
7. Intégration avancée
TP 7 : Intégration avancée (Iframe & SVG)
Objectif : Utiliser des éléments d’intégration externe.
1. Ajoutez une `<section>` avec :
- Une carte Google Maps via `<iframe>`
<iframe src="[Link] </iframe>
- Un simple dessin SVG
<svg width="100" height="100"><circle cx="50" cy="50" r="40" fill="red"/></svg>
Testez votre code : Vérifiez que la carte et le SVG s’affichent.
Devoir à rendre : Construction d'une Page HTML5 Complète
Étape 1 : Structure de Base (HTML5)
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ma Page Complète</title>
<style>
/* CSS de base pour la mise en page */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
line-height: 1.6;
}
header, footer {
background: #333;
color: white;
padding: 1rem;
text-align: center;
}
nav ul {
list-style: none;
padding: 0;
}
nav ul li {
display: inline;
margin: 0 10px;
}
nav a {
color: white;
text-decoration: none;
}
main {
padding: 20px;
}
section {
margin-bottom: 20px;
}
</style>
</head>
<body>
<!-- Contenu à remplir dans les étapes suivantes -->
</body>
</html>
Étape 2 : Header avec Logo & Navigation
<header>
<div id="logo">
<img src="images/[Link]" alt="logo">
</div>
<h1>Mon Site Web</h1>
<nav>
<ul>
<li><a href="#accueil">Accueil</a></li>
<li><a href="#tableau">Tableau</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
Testez votre code: Vérifiez que le header et la navigation s'affichent correctement.
Étape 3 : Main Content (3 Sections)
1. Section d'Accueil (Image + Texte)
<main>
<section id="accueil">
<h2>Bienvenue sur mon site !</h2>
<img src="[Link] alt="Image d'accueil">
<p>Ceci est un paragraphe de bienvenue. Vous pouvez ajouter du texte
ici.</p>
</section>
2. Section avec Tableau
<section id="tableau">
<h2>Mon Tableau</h2>
<table border="1">
<thead>
<tr>
<th>Nom</th>
<th>Âge</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ahmed</td>
<td>25</td>
</tr>
<tr>
<td>Fatima</td>
<td>21</td>
</tr>
</tbody>
</table>
</section>
3. Formulaire de Contact
<section id="contact">
<h2>Contactez-moi</h2>
<form>
<label for="nom">Nom :</label>
<input type="text" id="nom" name="nom" required><br>
<label for="email">Email :</label>
<input type="email" id="email" name="email" required><br>
<label for="message">Message :</label>
<textarea id="message" name="message" required></textarea><br>
<button type="submit">Envoyer</button>
</form>
</section>
</main>
Testez votre code: Vérifiez que les 3 sections s'affichent correctement.
Étape 4 : Footer (Liens & Copyright)
<footer>
<p>© 2024 MonSite - Tous droits réservés</p>
<nav>
<ul>
<li><a href="#">Mentions légales</a></li>
<li><a href="#">Politique de confidentialité</a></li>
</ul>
</nav>
</footer>
Testez votre code:: Vérifiez que le footer est bien en bas de page.
Améliorations (CSS Facultatif)
<style>
/* Ajoutez ces styles pour améliorer l'apparence */
img {
max-width: 100%;
height: auto;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
form {
max-width: 500px;
margin: 0 auto;
}
input, textarea {
width: 100%;
padding: 8px;
margin: 5px 0;
}
button {
background: #333;
color: white;
padding: 10px 15px;
border: none;
cursor: pointer;
}
button:hover {
background: #555;
}
</style>
Validation Finale
Dans le navigateur Chrome : faites un clic droit n'importe où sur la page et sélectionnez Inspecter
pour afficher tout le code HTML de la page affichée. Recherchez des éléments dans le rendu HTML
affiché à l'aide des touches Ctrl+F (Windows) ou Commande+F (Mac).
1. Structure complète : Header, Main (3 sections), Footer.
2. Éléments HTML5 :
- Navigation (`<nav>`), Tableau (`<table>`), Formulaire (`<form>`).
3. Responsive : Testez sur mobile et desktop.
4. Fonctionnel : Le formulaire doit être cliquable (même sans backend).
Résultat final : Une page web complète avec tous les éléments vus en HTML5 !
