TP 1
- Créez un fichier HTML nommé « index.html ».
- Ajoutez une balise
<html>à votre fichier HTML. - À l’intérieur de la balise
<html>, ajoutez une balise<head>. - À l’intérieur de la balise
<head>, ajoutez une balise<title>et définissez le titre de votre page. - Ajoutez une balise
<body>à votre fichier HTML. - À l’intérieur de la balise
<body>, ajoutez une balise<h1>et écrivez le titre de votre page. - Ajoutez une balise
<p>et écrivez une courte description de votre page. - Ajoutez une balise
<img>et utilisez une image de votre choix pour l’afficher sur votre page. - Ajoutez une balise
<a>et créez un lien vers une page web de votre choix. - Ajoutez une liste à puce ou une liste numérotée à votre page en utilisant la balise
<ul>ou<ol>. - Ajoutez une balise
<table>et créez un tableau avec au moins trois colonnes et trois lignes. - Ajoutez une balise
<form>et créez un formulaire avec au moins deux champs (par exemple, un champ de saisie de texte et un bouton de soumission). - Enregistrez votre fichier HTML et ouvrez-le dans un navigateur pour vérifier que tout fonctionne correctement.
Solution
<!DOCTYPE html>
<html>
<head>
<title>Ma page d'exemple</title>
</head>
<body>
<h1>Titre de ma page</h1>
<p>Ceci est une courte description de ma page.</p>
<img src="mon-image.jpg" alt="Ma superbe image">
<a href="http://www.mon-lien.com">Cliquez ici pour aller sur mon site</a>
<ul>
<li>Premier élément de la liste</li>
<li>Deuxième élément de la liste</li>
<li>Troisième élément de la liste</li>
</ul>
<table>
<tr>
<th>Entête 1</th>
<th>Entête 2</th>
<th>Entête 3</th>
</tr>
<tr>
<td>Ligne 1, colonne 1</td>
<td>Ligne 1, colonne 2</td>
<td>Ligne 1, colonne 3</td>
</tr>
<tr>
<td>Ligne 2, colonne 1</td>
<td>Ligne 2, colonne 2</td>
<td>Ligne 2, colonne 3</td>
</tr>
</table>
<form>
<label for="nom">Nom :</label>
<input type="text" id="nom" name="nom"><br><br>
<label for="email">E-mail :</label>
<input type="email" id="email" name="email"><br><br>
<input type="submit" value="Envoyer">
</form>
</body>
</html>
[collapse]
TP 2 – Création d’une page de blog
- Créez un fichier HTML nommé « blog.html ».
- Ajoutez une balise
<html>à votre fichier HTML. - À l’intérieur de la balise
<html>, ajoutez une balise<head>. - À l’intérieur de la balise
<head>, ajoutez une balise<title>et définissez le titre de votre page (par exemple « Mon blog »). - Ajoutez une balise
<body>à votre fichier HTML. - À l’intérieur de la balise
<body>, ajoutez une balise<header>pour l’en-tête de votre page. - À l’intérieur de la balise
<header>, ajoutez une balise<h1>et écrivez le titre de votre blog. - Ajoutez une balise
<nav>pour créer une barre de navigation. - À l’intérieur de la balise
<nav>, ajoutez une balise<ul>pour créer une liste de liens. - Ajoutez plusieurs éléments
<li>pour chaque lien de navigation. - Ajoutez une balise
<main>pour le contenu principal de votre page. - À l’intérieur de la balise
<main>, ajoutez plusieurs balises<article>pour vos articles de blog. - À l’intérieur de chaque balise
<article>, ajoutez une balise<h2>pour le titre de l’article. - Ajoutez une balise
<time>pour la date de publication de l’article. - Ajoutez une balise
<p>pour le contenu de l’article. - Ajoutez une balise
<footer>pour le pied de page de votre page. - À l’intérieur de la balise
<footer>, ajoutez une balise<address>pour vos coordonnées (par exemple, votre adresse e-mail). - Enregistrez votre fichier HTML et ouvrez-le dans un navigateur pour vérifier que tout fonctionne correctement.
Solution
<!DOCTYPE html>
<html>
<head>
<title>Mon blog</title>
</head>
<body>
<header>
<h1>Mon blog</h1>
<nav>
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">À propos</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Mon premier article</h2>
<time>Publié le 15 janvier 2023</time>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vitae tincidunt lorem. Nam euismod erat ac libero maximus, nec varius arcu vulputate. Donec suscipit, nisi in consectetur ullamcorper, eros nulla facilisis mauris, a interdum purus lorem at massa. Duis maximus velit nisl, id laoreet nunc pellentesque in.</p>
</article>
<article>
<h2>Mon deuxième article</h2>
<time>Publié le 20 janvier 2023</time>
<p>Suspendisse finibus elit ut tortor eleifend, vel fermentum lorem fringilla. Fusce ac imperdiet leo. Nullam eget vestibulum orci. Donec porttitor ante nibh, id bibendum tellus faucibus nec. Sed commodo lorem eu sagittis feugiat. Duis posuere magna at enim gravida iaculis.</p>
</article>
</main>
<footer>
<address>Contactez-moi : <a href="mailto:[email protected]">[email protected]</a></address>
</footer>
</body>
</html>
[collapse]
