NOM: Prénom : Groupe: 2 Examen de TP en Technologie Web SMI-S3 ( HTML5 / CSS 3/ JavaScript) durée : 30Min
documents polycopié TD et TP non
autorisés Soigner votre écriture et ne dépassez pas les lignes Coordonnatrice du Module : Pr. F. Benabbou
Question 1 :
Le But est de réaliser le menu suivant :
Pour cela, réaliser deux fichiers styles.css et menu.html. Tous les styles doivent être définis dans styles.css.
Les propriétés sont les suivantes :
- Ce menu est réalisé avec la balise table, la largeur est de 10%
- La couleur d’arrière-plan est yellow, La marge intérieure est de 20px - Le texte représente des liens (lien1.html, lien2.html,…) de couleur bleu.
- Au suvol du lien par la souris la couleur devient rouge.
Menu.html Styls.css
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
……… ………
Question 2 :
Le But est de superposer un texte avec une image (futur.jpg):
Pour cela, réaliser deux fichiers imgs.css et image.html. Tous les styles doivent être définis dans imgs.css.
1. Les propriétés de base l’image sont les suivantes :
- Largeur 400px, Hauteur 200px, Ajouter de l’ombre de couleur rgba(0, 0, 0, 0.5) à l’image.
2. Les propriétés de base de texte du texte :
- Times New Roman, Taille du texte xx-large, gras, couleur en blanc.
3. Ajouter les propriétés nécessaires pour obtenir le résultat final.
Menu.html Styls.css
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
NOM: Prénom : Groupe: 2
Pour cela, réaliser deux fichiers styles.css et menu.html. Tous les styles doivent être définis dans styles.css.
Les propriétés sont les suivantes :
- Ce menu est réalisé avec une liste, la largeur est de 10%
- La couleur d’arrière-plan est yellow, La marge intérieure est de 10px
- Le texte représente des liens (lien1.html, lien2.html,…) de couleur bleu. Au suvol du lien par la souris la taille du texte devient 18pt.
Menu.html Styls.css
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
Question 2 :
Le But est de superposer un texte avec une image (futur.jpg):
Pour cela, réaliser deux fichiers imgs.css et image.html. Tous les styles doivent être définis dans imgs.css.
Les propriétés de base l’image sont les suivantes :
- Largeur 400px, Hauteur 200px, Ajouter de l’ombre de couleur rgba(0, 0, 0, 0.5) à l’image.
Les propriétés de base de texte du texte :
- Times New Roman, Taille du texte xx-large, gras, couleur en blanc.
Ajouter les propriétés nécessaires pour obtenir le résultat final.
Menu.html Styls.css
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
NOM: Prénom : Groupe: 1
NOM: Prénom : durée : 1H30
Rattrapage de Technologie Web
SMI-S3 ( HTML5 / CSS 3/ JavaScript)
Note :
documents polycopié TD et TP non autorisés
Soigner votre écriture et ne dépassez pas les lignes
Coordonnatrice du Module : Pr. F. Benabbou
Question 1 : Dessinez le résultat visuel produit par le navigateur pour le document HTML suivant (pour l’image vous mettez un rectangle à sa place ):
<!DOCTYPE html>
<html>
<head>
<style>
img{
position:relative;width:100px;height:100px;
} div{
position:absolute; display:inline;
width:100px;height:100px;left:100px;
z-index:2;
} table{
border: 2px solid black;}
</style></head>
<body>
<img src="logo.jpg"/>
<div><table>
<tr><td><a href="p1.html">
thème 1</a></td></tr>
<tr><td><a href="p2.html">thème 2
</a></td></tr>
<tr><td><a href="p3.html"> thème 3
</a></td></tr>
<tr><td><a href="p4.html">
thème 4 </a></td></tr>
</table></div></body></html>
Question 2 : réalisez le formulaire suivant :
……….
……….
……….
……….
……….
……….
……….
……….
……….
……….
……….
……….
……….
……….
……….
……….
……….
……….
……….
……….
……….
……….
……….
……….
……….
……….
……….
Question 3
Cette question est liée à la question 2. Écrire la fonction JavaScript confirm()qui
permet:
1. De vérifier que le client a fait au moins une commande
a. Si oui la fonction affiche un alert avec le nom, et les produits commandés b. sinon elle affiche un message invitant le client à choisir un produit
2. Indiquez les modifications à mettre dans le code html du formulaire (uniquement la partie à mettre à jour).
……….
……….
……….
……….
……….
……….
……….
……….
……….
……….
……….
……….
……….
……….
……….
……….
……….
……….
……….
……….
……….
……….
……….
……….
Question 4 : Définir les feuilles de style avec les propriétés suivantes : Définir une classe cadre dont la marge
gauche est 2.5%; et marge droite est 95%;
la position est relative ; le style de la
bordure haute est outset et sa couleur est
noir, la largeur est 1px.
la hauteur et largeur est de 50px, elle flotte à droite et elle est sans bordure.
Définir une classe cache pour la balise
<div> qui permet de cacher le texte superflux(le cas du texte qui sort du cadre), et d’avoir une hauteur 100 %.
Question 5 : Pour chacun des styles suivant expliquer à quelles balises les
sélecteurs de classe sont appliqués (il n’est pas demandé d’expliquer l’effet du style !) : 1. H1 EM { color: blue }
2. DIV OL>LI P{
line-height: 1.3;}
3. H1.opener + H2 { margin-top: - 5mm }
4.
div P:first-child EM { font-weight : bold; }
1. ...
...
2. ...
...
3. ...
...
4. ...
...
