Exercice divers-STI 3SI [PDF]

Zitiervorschau

Exercices divers

Exercice 1 : Cocher la (les) bonne(s) réponse(s) : a. La balise doit être placée: Après la balise et avant la balise Après la balise et avant la balise Au début et à la fin de tous les documents HTML b. La balise Aide définit : Un lien hypertexte vers un lien interne Un lien interne (signet) qui s’appelle help Cette écriture n’est pas valide c. La balise définit : Une zone mot de passe Une zone dont la saisie est obligatoire Une zone dont la taille maximale est de huit caractères d. Soit la déclaration suivante h1 {font-family : Tahoma;} , le terme h1 désigne : Une valeur Une propriété Un sélecteur e. La ligne suivante permet de Relier un fichier CSS avec un fichier HTML Déclarer les propriétés CSS dans un fichier externe Incorporer les propriétés CSS dans le même fichier HTML f. Pour la règle suivante : h1, h2, h3 {font-family : tahoma, verdana ;} : h1 seulement utilisera la police tahoma h2 utilisera la police verdana h1, h2 et h3 utiliseront la police tahoma g. Quelle est la différence majeure entre les éléments div et span : L’élément div est de type block, l’élément span est de type inline L’élément div peut contenir d’autres éléments de type div et de type inline L’élément span est de type block, l’élément div est de type inline h. Que fait la balise

: Débute un nouveau paragraphe avec le texte aligné au centre Débute une nouvelle section avec le texte aligné au centre Débute une nouvelle ligne avec le texte aligné au centre

-1-

Exercice 2 : Soit le formulaire suivant : 1) Compléter le code html ci-dessous



Formulaire

……………………………………………

Vos coordonnées
Nom*:

Prénom*:

Date de naissance:

Mail:*

Votre site:*

……………



Homme
Femme

…………………………… …………………… …………………… ……………………




2) Donner le code html nécessaire pour ajouter deux boutons Annuler et Envoyer ……………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………

3) On veut avoir un arrière-plan de couleur gris (gray) pour la zone fieldset, citer quelques méthodes de réalisation. ……………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………

-2-

Exercice 3 : Soit la maquette de la page web index suivante 1) Compléter le code Html de la page en utilisant les balises structurantes



…………………………………









2) Pour la partie Entête ajouter le titre « Devoir de synthèse N°1 STI ». Le titre de niveau 1, couleur rouge, centré avec une bordure de type « dashed » et couleur d’arrière-plan vert. Code Html

Code CSS …………………{ ………………………: ………………; ………………………………………: ………………; }



………………………………………



…… ……{ ………………………: ………………; ………………………: ………………; }

3) Pour la partie Menu ajouter une liste non ordonnée de 3 éléments (Exercice N1, Exercice N2, Exercice N3) sous forme des liens hypertextes avec couleur d’arrière-plan vert , couleur des liens blanc et la liste non décorées , padding de 10 px ,largeur 25 % du conteneur et bordure « dashed » Code Html Code CSS

Exercice N°1 Exercice N°2 Exercice N°3

…………{ …………:………; ………………………: ………………; ………………………………………: ………………; ………………………………………: ………………; } ……… …… { ………………………: none; …………………………………: none; }

-3-

4) Pour la partie du contenu majoritaire  Insérer le titre de niveau 2 suivant « C’est un exercice QCM »  Insérer l’image « QCM.jpg » après le titre avec une hauteur de 200 px et largeur 200 px  Le contenu majoritaire doit avoir le bleu comme arrière-plan une bordure de type dashed et une largeur de 85% du conteneur. Code Html

Code CSS



………………………………

………………{ …………:…………; ………………………………………:…………; ……………………:…………; }

………… …………{ …………:…………; …………:…………; }

5) Pour la partie pied de page insérer le titre de niveau 5 suivant « Site en cours de construction »  Couleur d’arrière-plan le vert  Bordure de type dashed Code Html

Code CSS



………………………………



………………{ ………………………………………:…………; ……………………:…………; } ………… …………{ ………………………:…………; ………………………:…………; }

6) L’affichage de la totalité du page web sera exactement comme celle de la maquette. Code CSS ………………{ ……………………:…………………; }

Terminologie CSS width, background-color, border-style, center, height, none, display, color , background, a, text-align, flex, position, right, left, text-decoration, list-style, main.

-4-