ème

Partie 2 : Systèmes & Technologies de l’informatique 4 SI

Activité : Révision HTML5-CSS3 7) Dans la partie footer, Insérer un paragraphe contenant le texte :
"Copyright© 2023/2024"
1) Créer la page "Accueil.html" avec un style css enregistré dans un fichier externe 8) Les évènements :
« style.css » ▪ La zone de texte votre nom et prénom lorsqu’elle perd le focus l’arrière-plan
Voici la structure de la page web à créer : devient vert.
▪ Si on clique sur le bouton afficher, Le clic sur le bouton "Connexion" un
message affiche : Bienvenue + votre nom et prénom.
header Position absolue, largeur 1300px, hauteur 200px, image de
l’arrière-plan ‘entete.png’
Section Position absolue, top 200px, largeur 1300px, hauteur 500px,
couleur de l’arrière-plan rgb(241, 234, 225)
nav flottant à gauche, hauteur 500px, largeur 300px, couleur de
l’arrière-plan : cornflowerblue;
bordure supérieur droite et inférieur droite arrondies de 50%
footer Position absolue, top: 700px, hauteur: 50px, largeur: 1300px,
couleur de l’arrière-plan rgb(202, 177, 226)
ul Position absolue, marge haut 120px
ul a Lien non souligné, police oblique, taille police: xx-large;
li Pas de puce apparente, marge interne 50px
La balise <section> contient trois balises : h1 Couleur du texte : rgb(204, 175, 184)
1 : <article> 2 : <nav> 3 : <div id= "lien"> Texte centré, taille police 50px, marge haut 75px.
La balise <article> contient deux balises sémantiques : article Hauteur 450px, largeur 1000px, marge haut: 20px, flottant à droite
4 : <div id= "texte"> 5 : <aside> #texte Largeur 600px, hauteur 450px, flotant à gauche, marge haut 80px,
2) Dans la partie header, insérer un titre de niveau 1 contenant le texte suivant : police Gras
Club création de site web #lien Largeur 1000px, hauteur 40px, top: 450px, alignement du texte:
3) Dans la partie nav: droite, taille police: larger
- Créer une liste non-ordonnée avec les 3 items suivants : Accueil, Inscription, aside flotant à gauche, largeur 200px, hauteur 400px, marge haut 100px,
Connexion marge gauche 50px;
- Sur chaque item de la liste , mettre un lien hypertexte pointant vers « # » footer p Police : gras, oplique, taille police: larger,
4) Dans la partie <div id= "texte">de la parie article : couleur de l’arrière-plan: darkcyan,
- Insérer un paragraphe (lorem50)
form taille police : Larger
- Insérer un formulaire
- Mettre le formulaire en zone de groupe qui aura comme légende : Connexion Transition et transformation
- Dans un tableau de deux lignes et deux colonnes (avec une bordure=0) : 9) Appliquer un effet de transition au bouton « connexion », qui se déclenche en
-Insérer 2 labels : nom et prénom et mot de passe (chacune dans une ligne du survolant la souris au dessus après 2s, permettant de changer la taille à 20px. La
tableau) durée de transition est de 10s.
-Insérer 2 zones de texte (text et password) devant chaque label 10) Appliquer un effet de transition au titre, qui se déclenche en survolant la souris
- Insérer un bouton Connexion au dessus après 2s, permettant de changer sa couleur en rouge .La durée est de 5s.
5) Dans la partie aside, insérer l’image ‘image.png’ 11) Appliquer les effets de transformations suivants au bouton en survolant la souris:
6) Dans la partie <div id= "lien"> , insérer un lien recherche web qui affiche la translation de 50px puis rotation de 45degré puis doubler la taille et enfin le
page google.com déformer de 30 degré (translate, rotate, scale et skew).