Atelier n°1 : HTML
Partie A :
L’objectif de la partie A consiste à vous familiariser avec les principes de base du langage HTML.
Pour chacun des exemples ci-dessous, effectuez les opérations suivantes :
1. Retranscrivez l’exemple dans le bloc-notes.
2. Sauvegardez votre fichier avec l’extension .html.
3. Ouvrez le fichier avec un navigateur.
4. Notez vos observations.
Exemple 1 Observations
<html> ______________________________________
<body> ______________________________________
Bonjour tout le monde. C’est ma première page ______________________________________
Web!
______________________________________
</body>
</html> ______________________________________
______________________________________
_____________________________________
Exemple 2 Observations
<html> ______________________________________
<body> ______________________________________
<p>Introduction au web. </p> ______________________________________
<p>Je maîtrise HTML. </p>
______________________________________
<p>Je maîtrise CSS. </p>
<p>Je maîtrise PHP. </p> ______________________________________
</body> ______________________________________
</html> ______________________________________
Exemple 3 Observations
<html> ______________________________________
<body> ______________________________________
<p> ______________________________________
Je me demande vraiment<br />comment faire<br
______________________________________
/>
pour<br />contrôler le changement ______________________________________
<br />de ligne. ______________________________________
</p> ______________________________________
</body> ______________________________________
</html> ______________________________________
_____________________________________
1
Atelier n°1 : HTML
Exemple 4 Observations
<html> ______________________________________
<head> ______________________________________
<title> HTML-TP1 </title> ______________________________________
</head>
______________________________________
<body>
Cette phrase est placée<br />sur deux lignes. ______________________________________
<p style ="text-align:right">Premier ______________________________________
paragraphe </p> ______________________________________
<p style ="text-align:center">Deuxième ______________________________________
paragraphe </p> ______________________________________-
<p style ="text-align:left">Troisième ______________________________________
paragraphe </p> ______________________________________
</body> ______________________________________
</html>
Exemple 5 Observations
<html> ______________________________________
<body> ______________________________________
<!—Ce contenu à valider ! --> ______________________________________
<p>Aucune différence entre HTML4 et HTML5
______________________________________
</p>
</body> ______________________________________
</html> ______________________________________
Exemple 6 Observations
<html> ______________________________________
<body style="background-color:yellow"> ______________________________________
<h2> Je n’aime pas tellement cette couleur de ______________________________________
fond. Quels sont les autres couleurs
______________________________________
disponibles ?</h2>
</body> ______________________________________
</html> ______________________________________
______________________________________
______________________________________
______________________________________
2
Atelier n°1 : HTML
Partie B :
Exercice1
Créer le fichier « [Link] » comme ci-dessus :
Exercice2
Créer le fichier « [Link] » comme ci-dessus :
3
Atelier n°1 : HTML
Exercice3
Créer le fichier « [Link] » comme ci-dessus :
