TP3- Html5&CSS Systèmes, technologies et Internet 2020-2021
-Structuration d’une page web.
O b j e c t i f
-Groupement : <span> , <hgroup>
-Sous-fenêtre : <iframe>
-Lien interne et externe
-Mise en page aux différents périphériques d’affichage (mobile, PC)
-Appliquer une transition et une animation à un élément.
Activité 1 :
1. Compléter le schéma suivant par la description de chaque élément constituant une page WEB.
………………………………………………… …………………………………………………
………………………………………………… …………………………………………………
………………………………………………… …………………………………………………
………………………………………………… …………………………………………………
………………………………………………… …………………………………………………
…………………………………………………
…………………………………………………
………………………………………………… …………………………………………………
………………………………………………… …………………………………………………
………………………………………………… …………………………………………………
………………………………………………… …………………………………………………
…………………………………………………
…………………………………………………
………………………………………………………………………………
……………………………………………………………………………… …………………………………………………
……………………………………………………………………………… …………………………………………………
………………………………………………… ………………………….. …………………………………………………
…………………………………………………………………………….. …………………………………………………
…………………………………………………
…………………………………………………
2. Compléter le tableau suivant par la question adéquate pour chaque réponse.
………………………………
………………………………
………………………………
………………………………
………………………
3ème Science Info Lycée Benane/Bodher Prof : Ben Fredj Narjess |page1
TP3- Html5&CSS Systèmes, technologies et Internet 2020-2021
La balise <nav>
Question Réponse
………………………………………………… Au début, la tendance était de l’utiliser de façon unique dans la page.
………………………………………………… Aujourd’hui, même si un certain nombre de thèmes et de frameworks
………………………………………………… gardent cette habitude, la tendance serait plutôt d’utiliser cette balise, un peu
partout, pour regrouper des liens ayant rapport avec la navigation dans le
…………………………………………………
site. Nous retrouvons donc la balise nav pour
…………………………………………………
Le menu principal,
………………………………………………… Les menus secondaires, comme « A propos, Contact, … »,
………………………………………………… Le fil d’ariane (breadcrumb),
………………………………………………… Les liens « page suivante / page précédente » pour les articles, ou les
………………………………………………… commentaires, ainsi que « article précédent / suivant ».
………………………………………………… Il y a également un certain consensus, pour identifier le menu principal grâce
à l’attribut ARIA, role="navigation".
………………………………………………… En fait, beaucoup de thèmes/frameworks intègre la balise au
………………………………………………… conteneur header pour des raisons pratiques: souvent le menu principal du
………………………………………………… site fait parti de l’entête, et il serait donc inutilement compliqué de placer le
bloc nav en dehors du bloc header, alors que visuellement il apparaît à
…………………………………………………
l’intérieur. Donc, pour moi, le choix de placer le menu principal à l’intérieur
………………………………………………… ou l’extérieur de l’entête dépend du design, car la spec ne donne aucune
………………………………………………… indication à ce sujet.
………………………………………………… A l’intérieur des balises nav, l’organisation des liens reste celle utilisée
habituellement. Nous pouvons avoir des menus basés sur les balises ul/li par
exemple.
La balise <aside>
3ème Science Info Lycée Benane/Bodher Prof : Ben Fredj Narjess |page2
TP3- Html5&CSS Systèmes, technologies et Internet 2020-2021
Certainement la moins claire des balises. La définition nous dit que la
………………………………………… balise doit servir à stocker des informations n’ayant pas forcement
rapport avec le contenu de la page. Elle est utilisée dans le cadre
…………………………………………
d’une sidebar, ou d’un bloc adjacent au contenu. Certains s’en
……………………………….……… servent pour marquer la sidebar, par exemple, d’autres s’en servent
……………………………………….. pour contenir les widgets .
La balise <section>
………………………………………… Pour les questions de mises en forme, ces balises seront
………………………………………… contenues, et contiendront des balises div pour leur
……………………………….……… agencement.
………………………………………..
Comme pour la balise aside, je n’utiliserai pas la
………………………………………… balise section à l’intérieur des articles: d’une part,
………………………………………… techniquement cela pose quelques difficultés, et d’autre part,
……………………………….………
cela n’apporte pas une grande valeur ajoutée, les balises H1,
………………………………………..
H2, ... étant déjà là pour segmenter le code.
La sémantisation du langage HTML rend son utilisation un peu
………………………………………… plus délicate qu’avec les versions précédentes. Même si les
………………………………………… erreurs faites aujourd’hui n’ont pas beaucoup de
……………………………….………
conséquences, elles pourront en avoir demain: Les outils
………………………………………..
comme les moteurs de recherche s’appuieront sur ces balises
3ème Science Info Lycée Benane/Bodher Prof : Ben Fredj Narjess |page3
TP3- Html5&CSS Systèmes, technologies et Internet 2020-2021
pour améliorer la pertinence des recherches.
Le mode d’utilisation des balises risque encore d’évoluer dans
les mois à venir. Les choix se stabiliseront, lorsque le langage se
généralisera, ou quand les acteurs majeurs du marché
publieront leurs recommandations. Un peu de veille
technologique s’impose donc.
3. En utilisant le logiciel de création d’une page web, réaliser une page web nommée Accueil.html
sous la forme ci-dessous en utilisant les balises décrite précédemment:
Compléter le paragraphe suivant:
La position absolute permet de _________________________________________________________
_____________________________________________________________________________________
La position relative permet de __________________________________________________________
_____________________________________________________________________________________
La position static permet de___________________________________________________________
_____________________________________________________________________________________
4. Ajouter les liens ci-dessous dans la barre de navigation puis appliquer la mise en forme
nécessaire indiquée dans la figure2 :
Attention : l’ensemble des liens doit être dans une balise liste.
5. Donner la différence entre un lien interne et un lien externe.
Un lien interne ____________________________________________________________________
___________________________________________________________________________________
Un lien externe _____________________________________________________________________
___________________________________________________________________________________
3ème Science Info Lycée Benane/Bodher Prof : Ben Fredj Narjess |page4
TP3- Html5&CSS Systèmes, technologies et Internet 2020-2021
6. Compléter le tableau ci-dessous par la description du lien :
Syntaxe Description
-C’est un lien vers une autre page WEB
-L'attribut title permet d'affiche une bulle
d'aide.
L’attribut download Force un lien à être un
<a href="download/nature1.txt" lien de téléchargement plutôt que
de navigation.
download="nature2.txt">Download Text</a>
permet aussi de renommer le fichier avant le
téléchargement.
Accès vers une page se situant dans le même
répertoire
L'attribut Target spécifie l'endroit où ouvrir le
<a href="page2.html" target="_blank">page2</a>
document lié.
Accès vers une page se situant dans un sous-
répertoire
Accès vers une page se situant dans un
répertoire parent
Lien vers une ancre situé sur la même page
Lien vers une ancre situé sur une autre page
7. Ajouter le code suivant à la page Accueil.html:
Code HTML5 Code CSS
8. Que constater vous ?
……………………………………………………………………………………………………………...
9. Compléter la figure suivante par le rôle de chaque élément de la propriété CSS:
transition: …………………. ……………………… …………………… ……………………….
1 2 3 4
3ème Science Info Lycée Benane/Bodher Prof : Ben Fredj Narjess |page5
TP3- Html5&CSS Systèmes, technologies et Internet 2020-2021
désigne les noms des propriétés CSS sur
1 transition-property lesquelles un effet de transition devrait être
appliqué.
définit le nombre de secondes ou de
millisecondes que doit durer une animation. La
2 transition-duration valeur par défaut, 0s, indique qu'il n'y aura
aucune animation.
décrit la façon dont les valeurs intermédiaires
des propriétés CSS affectées par un effet de
transition sont calculées. Ceci permet donc de
3 transition-timing-function définir une courbe d'accelération, de manière à
ce que la vitesse de la transition varie au
cours de sa durée.
indique la durée à attendre avant de
transition-delay débuter la transition qui s'applique pour
4
un changement de propriété.
10.Ajouter le code suivant à la page Accueil.html:
Code HTML5 Code CSS
ou aussi
11. Que constater vous ?
……………………………………………………………………………………………………………..
12.Compléter la figure suivante par le rôle de chaque élément de la propriété CSS :
animation: …………………. ……………………… …………………… ……………………….
1 2 3 4
3ème Science Info Lycée Benane/Bodher Prof : Ben Fredj Narjess |page6
TP3- Html5&CSS Systèmes, technologies et Internet 2020-2021
définit une liste d'animations qui doivent être
appliquées à l'élément ciblé. Chaque nom indique une
1 animation-name règle @ @keyframes qui définit les valeurs des
propriétés pour la séquence.
définit la durée d'attente avant de démarrer une
2 animation-delay animation une fois qu'elle a été appliquée à un
élément.
indique le nombre de cycles utilisés pour répéter une
3 animation-iteration-count animation avant que celle-ci s'arrête.
définit la façon dont une animation CSS doit se
dérouler au fur et à mesure de chaque cycle.
4 animation-timing-function ……………………………………………………………………………………………………………………………..
………………………………………………………………………………………………………………………………
Exemple des fonctions dans une animation
La règle @keyframes permet aux auteurs de définir les étapes qui composent la
séquence d'une animation CSS. Cela permet de contrôler une animation plus finement
que ce qu'on pourrait obtenir avec les transitions.
@keyframes important2 {
@keyframes identifier { @keyframes important1 {
from {
0% { top: 0; left: 0; } from { margin-top: 50px; } margin-top: 50px;
margin-bottom: 100px;
30% { top: 50px; } 50% { margin-top: 150px
}
to { margin-top: 100px; }
68%, 72% { left: 50px; } to {
} margin-top: 150px
100% { top: 100px; left:
margin-bottom: 50px;
100%; }
}
} }
13.Définir les thermes suivant :
Transition Animation
Une évolution d'une forme, d'une Permet d’ajouter des mouvements à un
étape ou d'un style à une autre. élément.
Un comportement fluide de l'ensemble
Spécifient comment une propriété (ou
de propriétés. En d'autres termes, il
des propriétés) doit effectuer leur
spécifie ce qui doit arriver à un
modification. Chaque
ensemble de propriétés
changement. Définir une nouvelle
d'élément. Vous définissez une
valeur pour certaines propriétés, que ce
animation et décrivez comment cet
soit avec JavaScript ou CSS, est
ensemble de propriétés doit se
toujours une transition, mais par
comporter pendant le processus
défaut, ce n'est pas fluide. En
d'animation.
définissant transition le style css, vous
définissez une manière différente
(fluide) d'effectuer ces modifications.
14.Quel est la différence entre une transition et une animation :
Transition Vs Animation
1. Nécessite un élément déclencheur Animation @keyframes:
(: hover,: focus etc.). 1. Il peut être utilisé pour des animations
2. Seulement 2 états d'animation (début et sans fin.
fin). 2. Peut définir plus de 2 états.
3. Utilisé pour des animations plus simples 3. Pas de frontières.
(boutons, menus déroulants, etc.).
4. Plus facile à créer mais moins de
possibilités d'animation / d'effets.
3ème Science Info Lycée Benane/Bodher Prof : Ben Fredj Narjess |page7
TP3- Html5&CSS Systèmes, technologies et Internet 2020-2021
15.Taper les 3 programmes suivants puis donner le rôle de chaque balise:
Code1
Code2
Code3
hgroupe Il regroupe un ensemble d'éléments <h1>–<h6>.
spam st un conteneur générique en ligne (inline) pour les contenus phrasés.
représente un contexte de navigation imbriqué qui permet en fait d'obtenir une
ifram page HTML intégrée dans la page courante.
16. Ajouter le code suivant dans la balise <head> à l’intérieur d’une page web puis essayer
d’ouvrir cette page à partir d’un PC ou mobile:
<meta name= "viewport" content="width=device-width, initial-scale=1.0" />
17.Quel est le rôle de cette instruction ?
Elle est utilisée par la plupart des sites optimisés pour les mobiles.
La propriété width contrôle la taille du viewport. Elle peut être réglée à une valeur précise de pixels,
comme width=600, ou bien à la valeur spéciale device-width qui correspond à la largeur de l'écran en pixels CSS
à l'échelle 100%. (Il existe les propriétés et valeurs height et device-height correspondantes, qui peuvent être
utiles pour les pages contenant des éléments qui changent de taille ou de position en fonction de la hauteur
du viewport.)
La propriété initial-scale contrôle le niveau de zoom lorsque la page est chargée pour la première fois. Les
propriétés maximum-scale, minimum-scale, et user-scalable contrôlent la manière dont les utilisateurs sont
autorisés à zoomer ou dézoomer une page.
3ème Science Info Lycée Benane/Bodher Prof : Ben Fredj Narjess |page8
TP3- Html5&CSS Systèmes, technologies et Internet 2020-2021
3ème Science Info Lycée Benane/Bodher Prof : Ben Fredj Narjess |page9
