25 0 726KB
TP3- Html5&CSS
Systèmes, technologies et Internet
2020-2021
O b j e c t i f
-Structuration d’une page web.
-Groupement : , -Sous-fenêtre : -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 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
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 ………………………………………… Pour les questions de mises en forme, ces balises seront ………………………………………… contenues, et contiendront des balises div pour leur ……………………………….……… agencement.
………………………………………..
………………………………………… ………………………………………… ……………………………….……… ……………………………………….. ………………………………………… ………………………………………… ……………………………….……… ……………………………………….. 3ème Science Info
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
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 lien de téléchargement plutôt que de navigation. 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 document lié. Accès vers une page se situant dans un sousrépertoire
Download Text
page2
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 CSS
Code HTML5
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 3ème Science Info
Lycée Benane/Bodher
2
3
Prof : Ben Fredj Narjess
4 |page5
TP3- Html5&CSS
1
2
3
4
Systèmes, technologies et Internet
2020-2021
transition-property
désigne les noms des propriétés CSS sur lesquelles un effet de transition devrait être appliqué.
transition-duration
définit le nombre de secondes ou de millisecondes que doit durer une animation. La valeur par défaut, 0s, indique qu'il n'y aura aucune animation.
transition-timing-function
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 définir une courbe d'accelération, de manière à ce que la vitesse de la transition varie au cours de sa durée.
transition-delay
indique la durée à attendre avant de débuter la transition qui s'applique pour un changement de propriété.
10.Ajouter le code suivant à la page Accueil.html: Code CSS
Code HTML5
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 3ème Science Info
Lycée Benane/Bodher
2
3
Prof : Ben Fredj Narjess
4 |page6
TP3- Html5&CSS
Systèmes, technologies et Internet
2020-2021
animation-name
définit une liste d'animations qui doivent être appliquées à l'élément ciblé. Chaque nom indique une règle @ @keyframes qui définit les valeurs des propriétés pour la séquence.
2
animation-delay
définit la durée d'attente avant de démarrer une animation une fois qu'elle a été appliquée à un élément.
3
animation-iteration-count
indique le nombre de cycles utilisés pour répéter une animation avant que celle-ci s'arrête.
animation-timing-function
définit la façon dont une animation CSS doit se dérouler au fur et à mesure de chaque cycle. …………………………………………………………………………………………………………………………….. ………………………………………………………………………………………………………………………………
1
4
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 identifier {
@keyframes important1 {
0% { top: 0; left: 0; }
from { margin-top: 50px; }
30% { top: 50px; }
50% { margin-top: 150px to { margin-top: 100px; }
68%, 72% { left: 50px; }
}
100% { top: 100px; left: 100%; } }
@keyframes important2 { from { margin-top: 50px; margin-bottom: 100px; } to { margin-top: 150px margin-bottom: 50px; } }
13.Définir les thermes suivant : Transition
Animation
Une évolution d'une forme, d'une étape ou d'un style à une autre. Spécifient comment une propriété (ou des propriétés) doit effectuer leur modification. Chaque changement. Définir une nouvelle valeur pour certaines propriétés, que ce soit avec JavaScript ou CSS, est toujours une transition, mais par défaut, ce n'est pas fluide. En définissant transition le style css, vous définissez une manière différente (fluide) d'effectuer ces modifications.
Permet d’ajouter des mouvements à un élément. Un comportement fluide de l'ensemble de propriétés. En d'autres termes, il spécifie ce qui doit arriver à un ensemble de propriétés d'élément. Vous définissez une animation et décrivez comment cet ensemble de propriétés doit se comporter pendant le processus d'animation.
14.Quel est la différence entre une transition et une animation : Transition
Vs
1. Nécessite un élément déclencheur (: hover,: focus etc.).
2. Seulement 2 états d'animation (début et fin). 3. Utilisé pour des animations plus simples (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
Animation
Animation @keyframes: 1. Il peut être utilisé pour des animations sans fin. 2. Peut définir plus de 2 états. 3. Pas de frontières.
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 –.
spam
st un conteneur générique en ligne (inline) pour les contenus phrasés.
ifram
représente un contexte de navigation imbriqué qui permet en fait d'obtenir une page HTML intégrée dans la page courante.
16. Ajouter le code suivant dans la balise à l’intérieur d’une page web puis essayer d’ouvrir cette page à partir d’un PC ou mobile:
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
3ème Science Info
Systèmes, technologies et Internet
Lycée Benane/Bodher
Prof : Ben Fredj Narjess
2020-2021
|page9