TP1 - Atelier 1 - 2

ISET SBZ- Préparation à la certification HTML5 Atelier I
Atelier n°1
Création de l'interface utilisateur avec HTML5 : Texte,
graphiques et multimédia
Sur votre ordinateur ou un lecteur flash, créez un sous-dossier dans le dossier Mes documents. Ce
dossier contiendra les fichiers sur lesquels vous allez travailler tout au long des ateliers. Il s'agit de
votre dossier de travail. Vous pouvez le nommer HTML5 par exemple.
I . CRÉER UNE PAGE WEB SIMPLE

1. Ouvrez un éditeur de page Web(NotePad++ par exemple), un outil de développement
d'applications ou même un simple éditeur de texte tel que le Bloc-notes, puis entrez la
commande suivante :
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>78704 Tout pour vos animaux de compagnie</title>
</head>
<body>
<h1>Soins et alimentation</h1><p> Votre chien est un ami pour la vie.
Pourquoi ne pas lui offrir les meilleurs soins possibles ?</p><p> Assurez-
vous que votre animal dispose de suffisamment d'<i><b>eau fraîche</b></i> par
temps chaud. Lorsque vous faites de longues promenades avec votre chien,
pensez à prendre un bol pliable et une bouteille d'eau. Vous trouverez
différents modèles de bol dans de nombreux magasins animaliers à moins de 10
dollar.</p>
</body>
</html>
Enregistrez le fichier sous L2-animal-orig.html dans le dossier de travail que vous avez créé
dans Mes documents.
2. Accédez à votre dossier de travail et ouvrez la page HTML dans un navigateur Web.
3. Pour voir l'effet d'une balise manquante dans une paire de balises, supprimez la balise de fin
</b> après « fraîche ». Créez un nouveau fichier pour tester les modifications en l'enregistrant
sous le nom L2-animal-test.html, puis ouvrez-le dans le navigateur.
4. Pour voir l'effet d'une imbrication incorrecte, déplacez la balise de fin </i> après la dernière
balise </p>. Réenregistrez le fichier L2-animal-test.html et affichez-le dans un navigateur.
5. Fermez le fichier L2-animal-test.html dans l'éditeur et ouvrez L2-animal-orig.html.
6. Ajoutez une mention de copyright au bas de la page en appuyant plusieurs fois sur la touche
Entrée après la balise de fermeture </p> et en entrant <p>© 2016</p>. Appuyez sur
Entrée pour ajouter une ligne vierge. Assurez-vous que la mention de copyright se trouve au-
dessus des balises de fin </body> et </html>.
7. Créez un nouveau fichier en enregistrant le fichier L2-animal-test.html sous L2-animal
copyright.html, puis affichez-le dans le navigateur. Le symbole du copyright (C entouré d'un
cercle) est-il visible, comme illustré à la figure 2-6 ? Si ce n'est pas le cas, remplacez &copy ;
par ©, enregistrez le fichier, puis réaffichez-le.
8. Accédez à la page Web du service de validation du balisage du W3C à l'adresse
http://validator.w3.org/. Téléchargez le fichier L2-animal-copyright.html et cliquez sur
Check afin que le service vérifie le fichier.Le vérificateur devrait confirmer que votre fichier
est valide.
9. Laissez l'outil d'édition et le navigateur Web ouverts si vous passez immédiatement à la
section suivante.
Page 1 sur 5
II. MODIFIER LES BALISES DE TEXTE D'UNE PAGE WEB :

1. Dans votre outil d'édition, créer le fichier L2-animal-copyright.html puis taper dedans le
code suivant :

<!doctype html>
<html>
<head>
<title>TP1</title>
</head>
<body>
<p> Assurez-vous que votre animal dispose de suffisamment d'<i><b>eau
fraîche</b></i> par temps chaud.</p>
</body>
</html>
2. Dans le paragraphe suivant, remplacez les balises italique et gras par l'élément strong.
<p> Assurez-vous que votre animal dispose de suffisamment d'<strong>eau fraîche</strong>
par temps chaud.</p>
3. Ajoutez des balises de début et de fin <small>à la mention de copyright, de manière à les
imbriquer correctement dans les balises du paragraphe.
4. Enregistrez le fichier sous L2-animal-modification.html, puis affichez-le dans un navigateur Web.
5. Laissez l'outil d'édition et le navigateur Web ouverts si vous passez immédiatement à la section
suivante.
III. UTILISER L'ÉLÉMENT MARK :
1. Dans votre outil d'édition, ouvrez le fichier L2-animal-modification.html s'il n'est pas déjà
ouvert.
2. Modifiez le paragraphe suivant en insérant l'élément mark autour du texte « ami pour la vie ».
<p>Votre chien est un <mark style="background-color:orange;">ami pour la
vie</mark>
3. Créez un nouveau fichier en l'enregistrant sous le nom L2-animal-mark.html, puis affichez-le
dans un navigateur Web.
IV. AFFICHER LES EFFETS DES ÉLÉMENTS OBSOLÈTES :
1. Dans votre outil d'édition, ouvrez le fichier L2-animal-mark.html s'il n'est pas déjà ouvert.
2. Modifiez le titre h1 de manière à incorporer l'élément center, comme illustré :
<h1><center>Soins et alimentation</center></h1>
3. Créez un nouveau fichier en l'enregistrant sous le nom L2-animal-temp.html, puis affichez-le
dans un navigateur Web. L'élément center a-t-il centré le titre dans votre navigateur ?
4. Ajoutez l'élément big au contenu suivant, comme illustré :
<p>Votre chien est un <mark style="background-color:orange;"><big>ami pour la
vie</big></mark>.
5. Enregistrez lek fichier et affichez-le dans un navigateur Web.
V. AFFICHER UNE IMAGE SUR UNE PAGE WEB
1. Recherchez un fichier JPG, PNG, GIF ou BMP sur votre ordinateur afin de l'utiliser dans cet
exercice. Il peut s'agir de n'importe quelle image, mais un contenu en rapport avec les
animaux de compagnie est tout à fait approprié.
2. Dans votre outil d'édition, ouvrez L2-animal-mark.html.
3. Supprimez les balises <mark> du premier paragraphe.
4. Insérez le balisage suivant après l'élément h1, en laissant une ligne vierge avant et après
celui-ci et en remplaçant dogwalk.jpg par votre propre fichier image :
<figure>
Page 2 sur 5
<img src="dogwalk.jpg" alt="Promener son chien" width="100" height="125" />

<figcaption>Un chien heureux est un bon chien</figcaption>
</figure>
5. Créez un nouveau fichier en l'enregistrant sous le nom L2-animal-image.html, puis affichez-
le dans un navigateur Web.
6. Laissez l'outil d'édition et le navigateur Web ouverts si vous passez immédiatement à
l'exercice suivant.
VI. UTILISER LESÉLÉMENTS FIGURE ET FIGCAPTION
1. Recherchez deux autres fichiers JPG, PNG, GIF ou BMP afin de les utiliser dans cet exercice. Il
peut s'agir de n'importe quelle image, mais un contenu en rapport avec les animaux de
compagnie est tout à fait approprié. Trois images sont nécessaires pour exécuter les étapes
suivantes.
2. Dans votre outil d'édition, ouvrez le fichier L2-animal-image.html s'il n'est pas déjà ouvert.
3. Remplacez le balisage de la figure qui suit l'élément h1 par ce qui suit, en remplaçant les
noms des fichiers image (doghappy.jpg, dogpaws.jpg et dogwalk.jpg) par les noms de vos
propres fichiers image :
<figure>
<img src="doghappy.png" alt="Chien heureux" width="100" height="125" />
<img src="dogpaws.png" alt="Pattes de chien" width="100" height="125" />
<img src="dogwalk.jpg" alt="Promener son chien" width="100" height="125" />
<figcaption>Un chien heureux est un bon chien</figcaption>
</figure>
4. Enregistrez le fichier sous L2-animal-imagesmultiples, puis affichez-le dans un navigateur
Web.
5. Fermez le fichier L2-animal-imagesmultiples. Laissez l'outil d'édition et le navigateur Web
ouverts si vous passez immédiatement à l'exercice suivant.
VII. UTILISER L’ÉLÉMENTFIGURE CANVAS POUR CREER UNE FORME :
1. Dans votre outil d'édition, entrez le balisage suivant :
<!doctype html>
<html><head><meta charset="UTF-8"><title>Test canvas</title>
<script> function f1() {
var canvas = document.getElementById("smlRectangle");
context = canvas.getContext("2d");
context.fillStyle = "rgb(0,0,255)";
context.fillRect(10, 20, 200, 100);
}
</script>
</head>
<body onload = "f1();">
<canvas id="smlRectangle" height="100" width="200 "></canvas>
</body>
</html>
2. Enregistrez le fichier sous L2-canvas.html, puis affichez-le dans un navigateur.
3. Si aucun rectangle bleu n'est visible, accédez à la page Web du service de validation du W3C
à l'adresse http://validator.w3.org. Téléchargez le fichier L2-canvas.html et cliquez sur
Check afin que le service vérifie le fichier. Corrigez les erreurs signalées par le vérificateur, si
nécessaire. Réenregistrez le fichier et affichez-le dans un navigateur.
4. Gardez le fichier, l'outil d'édition et le navigateur Web ouverts si vous passez immédiatement
à l'exercice suivant.
VIII. UTILISER L’ÉLÉMENTFIGURE CANVAS POUR CREER LE CONTOUR D’UNE
FORME :
1. Dans votre outil d'édition, enregistrez L2-canvas.html sous le nom L2-canvas-stroke.html.
2. Remplacez les lignes de code fillStyle et fillRect par le code suivant :
context.strokeStyle = "red";
Page 3 sur 5
context.strokeRect(10,20,200,100);
3. Supprimez les attributs width et height de l'élément canvas dans le corps (après id
="smlRectangle").
4. Enregistrez le fichier et affichez-le dans un navigateur Web.
IX. AJOUTER UN TEXTE DE SECOURS A VOTRE DOCUMENT :

1. Dans votre outil d'édition, ouvrez L2-canvas.html et enregistrez-le sous L2-canvas-
secours.html.
2. Remplacez l'élément canvas par la mention suivante :
<canvas id="smlRectangle" height="100" width="200"> Votre navigateur ne prend
pas en charge la balise canvas.
</canvas>
3. Enregistrez le fichier et affichez-le dans le navigateur Web Internet Explorer 9. Le dessin créé
à l'aide de l'élément canvas devrait s'afficher.
4. Appuyez sur F12 pour passer en mode navigateur, cliquez sur Mode document dans la barre
de menus, puis sélectionnez Normes d'Internet Explorer 7.
5. Appuyez de nouveau sur F12. Un message d'erreur s'affiche, indiquant que le navigateur ne
reconnaît pas une propriété ou une méthode. Fermez le message d'erreur. La fenêtre du
navigateur affiche le texte de secours, comme illustré à la figure
6. Gardez le fichier, l'outil d'édition et le navigateur Web ouverts si vous passez immédiatement
à l'exercice suivant.
X. CREER UN GRAPHIQUE VECTORIEL SVG:
1. Dans votre outil d'édition, entrez le balisage suivant :
<!doctype html>
<html>
<head>
<title>Étoile SVG</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<polygon points="100,10 40,180 190,60 10,60
160,180"style="fill:aqua;stroke:orange;stroke-width:5;fill-rule:evenodd;"/>
</svg>
</body>
</html> .
2. Enregistrez le fichier sous L2-SVG.html, puis affichez-le dans un navigateur Web. La page
doit ressembler à la figure 2-17. Si la page ne s'affiche pas, vérifiez-la à l'aide du Service
de validation du W3C à l'adresse http://validator.w3.org et corrigez les erreurs, si
nécessaire.
3. Modifiez les valeurs de paramètres de quelques points de polygone. Enregistrez le fichier
sous L2-SVG-test.html, puis affichez-le dans un navigateur Web.
4. Supprimez fill-rule:evenodd ;, enregistrez le fichier, puis affichez-le dans un navigateur
Web.
5. Fermez tous les fichiers de données ouverts. Laissez l'outil d'édition et le navigateur Web
ouverts si vous passez immédiatement à l'exercice suivant.
XI. UTILISER L’ELEMENT VIDEO :
1. Recherchez un clip vidéo et un fichier image à utiliser en tant qu'affiche. Si vous ne
disposez pas de clip vidéo, recherchez un fichier MP4 disponible dans le domaine public sur
le Web et téléchargez-le. Enregistrez la vidéo et le fichier image dans votre dossier HTML5.
Page 4 sur 5
2. Dans votre outil d'édition, créez un fichier HTML avec le balisage suivant. Remplacez les
noms des fichiers par ceux de votre fichier image et clip vidéo. Modifiez l'attribut type, si
nécessaire et remplacez sample.mp4 par le nom de votre fichier vidéo.
<!doctype html>
<html>
<head>
<title>Test vidéo</title>
</head>
<body>
<video width="400" height="300" poster="sample.jpg" autoplay="autoplay"
controls="controls">
<source src="video.mp4" type="video/mp4" />
</video>
</body>
</html>
3. Enregistrez votre fichier sous L2-video.html.
4. Accédez à la page Web du service de validation du balisage du W3C à l'adresse
http://validator.w3.org/. Téléchargez le fichier L2-video.html et cliquez sur Check afin que
le service vérifie le fichier. Corrigez les erreurs signalées par le vérificateur en cas de balises
manquantes ou de fautes de frappe, le cas échéant.
5. Ouvrez le fichier HTML dans un navigateur Web. La vidéo démarre-t-elle automatiquement ?
Les contrôles sont-ils affichés ? Ouvrez le fichier L2-video.html dans plusieurs navigateurs
Web afin de le tester.
6. Dans votre outil d'édition, supprimez la ligne autoplay et remplacez controls="controls" par
controls simplement.
7. Réenregistrez le fichier et validez-le. La validation ne doit générer aucune erreur. Ceci signifie
que HTML5 permet d'utiliser une méthode plus courte pour spécifier l'attribut controls. Le
même principe s'applique aux attributs autoplay et loop.
8. Laissez l'outil d'édition et le navigateur Web ouverts si vous passez immédiatement à
l'exercice suivant.
XII. UTILISER L’ELEMENT AUDIO :
1. Recherchez un clip audio.
2.Dans votre outil d'édition, créez un fichier HTML avec le balisage suivant. Remplacez le nom de
fichier par celui de votre clip audio.
<!doctype html>
<html>
<head>
<title>Test audio</title>
</head>
<body>
<audio src="audio.mp3" controls="controls">
</audio>
</body>
</html>
3. Enregistrez votre fichier sous L2-audio.html, puis affichez-le dans un navigateur. Vous devez
obtenir quelque chose similaire à la figure 2-19. Dans la mesure où l'attribut autoplay n'a pas
été inclus dans cet exemple, vous devez cliquer sur le bouton Lecture pour lancer le clip
audio.
4. Si les contrôles audio ne s'affichent pas, accédez à la page Web du service de validation du
W3C à l'adresse http://validator.w3.org. Téléchargez le fichier L2-audio.html et cliquez sur
Check afin que le service vérifie le fichier. Corrigez les erreurs signalées par le vérificateur en
cas de balises manquantes ou de fautes de frappe, le cas échéant.
5. Réenregistrez le fichier et ouvrez-le dans un navigateur Web. Lisez le clip audio.
6. Fermez tous les fichiers ouverts, ainsi que l'outil d'édition et le navigateur Web.
Page 5 sur 5

TP1 - Atelier 1 - 2

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

TP1 - Atelier 1 - 2

Transféré par

Droits d'auteur :

Formats disponibles

ISET SBZ- Préparation à la certification HTML5 Atelier I

I . CRÉER UNE PAGE WEB SIMPLE

II. MODIFIER LES BALISES DE TEXTE D'UNE PAGE WEB :

<img src="dogwalk.jpg" alt="Promener son chien" width="100" height="125" />

4. Enregistrez le fichier et affichez-le dans un navigateur Web.

IX. AJOUTER UN TEXTE DE SECOURS A VOTRE DOCUMENT :

Vous aimerez peut-être aussi