TP3 CSS html5 Partage [PDF]

Zitiervorschau

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