Sciences Numériques et Technologie Version du 02/01/2024
SNT - TP 02 - Le Web
Il est demandé de rédiger les réponses aux activités dans un document comportant à
chaque fois le numéro de l'activité et les réponses détaillées.
À l'issue de ces activités l'objectif sera de:
1) savoir coder les éléments principaux d'une page web en langage HTML5:
titres, saut de ligne, tableau, liste, hyperlien, inclusion d'image
2) savoir modifier le style d'une page web avec CSS3:
couleur et aspect des polices, couleur des éléments de la page, bordures
3) savoir animer une page avec le langage JavaScript:
appeler une fonction lors d'un clic
Table des matières
Activité 1 : Créer une page Web avec le langage HTML5............................................2
Activité 2 : Changer le style d'une page web avec le langage CSS3...........................4
Activité 3 : Animer une page web avec le langage JavaScript.....................................5
Activité 4 : Connaissance du cours...............................................................................6
1/7
Sciences Numériques et Technologie Version du 02/01/2024
Activité 1 : Créer une page Web avec le langage HTML5
Cette activité est à réaliser sur le site:
[Link]
Lorsque vous voulez visualiser le résultat de vos modifications, appuyez sur Run.
Cette page permet de tester les balises HTML directement dans le navigateur.
Il suffit d'appuyer sur le bouton Run après chaque modification.
Pour sauvegarder, il suffit de cliquer sur l'icône Save et d'enregistrer l'adresse du lien
qui s'affiche.
Avant de commencer, modifier l'affichage, en cliquant sur "Settings":
Questions
a) Créez le squelette de la page HTML, en reprenant ce qui est indiqué dans le
document C02_HTML5.pdf.
Ajoutez l'image:
[Link]
juste en dessous de <body>.
b) Ajoutez un titre <h4>Bibliographie et filmographie</h4> juste en dessous du logo
SNT.
c) Ajoutez en dessous du titre, dans un paragraphe <p></p>, le texte
"Quelques ressources écrites et vidéos en lien avec la SNT.".
d) Créez un lien sur le mot "SNT", ce lien devra pointer sur la page Wikipedia:
[Link]
e) Ajoutez un titre <h5>Livres et supports écrits</h5>
Ajoutez une liste non ordonnée <ul> qui indiquera les mots:
"Programme", qui pointera vers le document
[Link]
"Supports de cours", qui pointera vers la page
[Link]
2/7
Sciences Numériques et Technologie Version du 02/01/2024
f) Ajoutez un saut de ligne avec la balise <br>, à la suite de la liste non ordonnée.
g) Ajoutez un titre <h5>Vidéos</h5>
h) Ajoutez une playlist YouTube en incrustation, en copiant le code HTML:
<iframe width="400" height="250" src="[Link]
list=PLKQTTRuM1AXaqZX_2b8oaeR-VOa7mNv7f" frameborder="0" allow="accelerometer; autoplay;
encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
i) Ajoutez un saut de ligne avec la balise <br>, à la suite de la playlist.
j) Ajoutez un titre <h4>Résultats obtenus</h4>
k) Ajoutez un tableau contenant vos notes en SNT, sur le modèle du tableau ci-
dessous:
l) Si vous avez suivi les étapes, l'aspect final devrait être celui-ci: cliquez ici.
3/7
Sciences Numériques et Technologie Version du 02/01/2024
Activité 2 : Changer le style d'une page web avec le langage CSS3
Pour les questions qui suivent, il faudra vous aider du document C02_CSS3.pdf.
Une feuille de style permet de modifier le style d'une page web, comme par exemple:
- couleur du texte, du fond de page,
- taille de la police de caractères,
- aspect de la police de caractères,
- positionnement des éléments à l'écran
Il faut retenir que:
- le HTML5 gère la structure de la page,
- le CSS3 gère le style de la page.
Questions
a) Dans la zone CSS, ajoutez la propriété :
h4 { font-family: Arial; }
Que se passe-t-il ?
b) Suivant le même principe, modifiez la police des balises <h5> pour que cela soit
du Helvetica, et des balises <p> pour cela soit du Verdana.
c) Ajoutez la propriété color: rgb(200,40,40); dans les accolades des propriétés CSS
des questions a) et b).
Quelle est la couleur des titres <h4> et <h5> ? Était-ce prévisible ?
À partir d'ici, il faut se creuser la tête, réponses moins évidentes.
d) Changez la couleur du texte contenu dans le tableau, et passez-le en gris foncé
avec le code RVB (80,80,80).
e) Changez la couleur du fond de la page web, en gris clair, de code RVB
(220,220,220).
f) Ajoutez une bordure au logo SNT: épaisseur 2 pixels, couleur (50,50,200).
g) Comment faire pour que les notes du tableau soient en gras et de couleur vert
foncé (40, 120, 40)?
h) Comment faire pour que les mots "QCM 01", "QCM 02" et "QCM 03" du tableau
soient en italique, et de couleur orange (250, 120, 0) ?
i) Si vous avez suivi les étapes, l'aspect final devrait être celui-ci: cliquez ici.
4/7
Sciences Numériques et Technologie Version du 02/01/2024
Activité 3 : Animer une page web avec le langage JavaScript
JavaScript est un langage de programmation, et pas un langage de présentation
comme HTML5 et CSS3.
Il faut retenir que le HTML gère la structure de la page, et le CSS le style de la
page.
Questions
a) Ajoutez les instructions :
onclick="javascript:message()"
à l'intérieur de la balise <img> qui définit le logo SNT.
b) Dans la partie JavaScript de [Link], ajoutez le code:
function message() {
[Link]("Vous avez cliqué le logo.");
}
c) Cliquez sur "Run", et testez le fonctionnement de ce code.
d) Pour chacun des liens "SNT", "Programme" et "Supports de cours", ajoutez à l'in-
térieur de la balise <a>:
onclick="return javascript:confirmation();"
Dans la partie JavaScript, ajoutez le code:
function confirmation() {
reponse = confirm('Voulez-vous suivre ce lien ?');
return reponse;
}
e) Que se passe-t-il maintenant quand vous cliquez un lien ?
f) Juste avant la balise </body>, ajoutez le bouton cliquable:
<button onclick="ouvrir_fenetre()">Cliquez ici</button>
Dans la partie JavaScript, ajoutez le code:
function ouvrir_fenetre() {
var mafenetre = [Link]("", "Message", "width=800,height=600");
[Link]("<p>Fenêtre ouverte par clic.</p>");
}
5/7
Sciences Numériques et Technologie Version du 02/01/2024
Activité 4 : Connaissance du cours
Les questions sont basées sur le contenu des supports de cours dont le nom
débute par C02, et les sites web dont l'adresse est indiquée dans les supports.
La recherche des réponses peut aussi parfois nécessiter une recherche sur le web.
Questions
a) En quelle année a été créé le web ?
Au sein de quel organisme a été créé le web ?
Quels sont les deux scientifiques à l'origine de l'invention du web ?
D'après la page [Link]
pour quelle raison le web a-t-il été créé à l'origine ?
b) Au-dessus de quel réseau informatique fonctionne le web ?
c) Pendant combien d'années la France a-t-elle utilisé le Minitel ?
d) En quelle année est apparu le Wi-Fi ?
e) En quelle année le site [Link] a-t-il été créé ?
f) En quelle année et par qui fut fondée la société qui produisait l'ordinateur sur
lequel le premier site web de l'histoire a été hébergé ?
g) Quel est le protocole utilisé par les navigateurs web et les serveurs web ?
h) Qu'est-ce qu'un lien hypertexte ?
i) Par quoi est identifiée une ressource (texte, image, son) sur le web ?
j) Que veut dire l'acronyme URL ?
k) Quels sont les différents types de web qui existent ?
l) À quoi sert le langage HTML ?
m) À quoi sert le langage CSS ?
n) Quelle est la balise HTML qui permet de définir un gros titre ?
Et un paragraphe ? Et un hyperlien ?
o) Quelles sont les trois étapes de fonctionnement d'un moteur de recherche ?
p) Les pages contenant les notes des élèves sur EcoleDirecte sont-elles référencées
dans un moteur de recherche comme Google ? Pourquoi ?
6/7
Sciences Numériques et Technologie Version du 02/01/2024
q) Comment s'appelle le robot d'indexation de Google ?
r) À combien est estimée la taille du web invisible comparativement au web surfa-
cique ?
s) Les darknets fonctionnent-ils indépendamment du réseau internet ?
t) De combien de parties distinctes est constituée une URL ?
u) Quelle est la version actuelle du protocole HTTP ?
v) Citez le nom de 4 navigateurs web.
w) Le contenu situé entre les balises <head></head> d'une page web est-il visible
par les utilisateurs ?
x) Qu'est-ce que le W3C ?
y) Combien d'organismes gèrent le W3C ?
7/7