Lycée Ibn Sina 3INFO

DEVOIR DE SYNTHESE N°1 STI

2Heures
NOM&PRENOM :…………………………………………………………………………………………….
Exercice1 (5pts)
Cocher la bonne réponse :

Qu’est-ce que le padding ? Comment inclure une feuille de

style dans une page html5 ?
o L’espacement entre deux
colonnes o <link src="stylesheet"
o La marge interne d'un value="feuille.css"
élément type="text/css">
o <link rel="stylesheet"
o La marge externe d'un
href="feuille.css">
élément
o <link type="text/css"
o L’espacement entre deux href="feuille.css" >
cellules o <link rel="stylesheet"
src="feuille.css">
Quelle balise permet la saisie de Comment placer une image à
plusieurs lignes de texte ? gauche à l'intérieur d'un bloc pour
qu'elle soit enrobée, habillée du
o <textarea> texte d'un article ?
o <textbox> o { surround: left ; }
o <input type="multiple"> o { float: left ; }
o <input value = "combo"> o { colspan: left ; }
o { span: left ; }
Quelle balise utiliser pour Quel effet produira la balise <em>
regrouper les champs d'un appliquée à une ligne ?
formulaire en les entourant d'une o la justification du texte
bordure ? o sa mise en italique
o <form> o sa mise en gras
o <fieldset> o sa mise en forme comme liste à
o <border> puces.
o <groupby>
Quel type d'images utiliser pour Pour mettre un indice au pied
permettre un fond transparent ? d'une lettre j'utilise
o gif et png o <ind>
o tiff o <ul>
o jpeg et gif o <il>
o bmp et jpeg o <sub>
La règle de style "p.ville { .........} " Où met-on le texte de
s'applique : remplacement d'une image ?
o aux paragraphes <p o dans l'attribut <src>
class="ville">...<p> o dans l'attribut <text>
o aux paragraphes <p o dans l'attribut <alt>
id="ville">...<p> o dans l'attribut <title>
o aux paragraphes <p
value="ville">...<p>
o aux paragraphes < p> <span
"ville">...</span><p>

1
Exercice2 (5 pts)
Donner le code html pour reproduire le tableau ci-dessous :

Nom yyy
Prénom zzz
Date de Jj/mm/aaaa
naissance
Diplôme 2018
2019
Expériences 2020
professionnelles 2021
2022
Activités extra- Loisir1
professionnelles Loisir2
Langues Allemand : lu et
étrangères parlé

2
Exercice3 (10pts)
Soit le formulaire suivant :

1) donner le code html correspondant :

<form><fieldset><legend>……………………………………………………..… </legend>
<h1>Authentification/Inscription</h1><table>………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………..……………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………..……………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………….</table>
<h1>Les réseaux sociaux </h1><table> ……………………………………….………………..
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………

3
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
……………………………………………..………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………</table>
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
……………………………………………………………………………………………</fieldset> </form>

2) écrire le code css adéquat pour appliquer les modifications suivantes :

o Souligner les balises h1 et choisir la police verdana de taille 16px :

………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
o Mettre une image de fond pour le fieldset :
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………..
o Colorer la première ligne du deuxième tableau en gris :
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………..
………………………………………………………………………………………………………………………………
o Animer la légende « Sondage » :
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………..
o Appliquer les marges suivantes pour le formulaire : marge gauche 50px,
marge bas : 100px, marge haut 120px et marge droite 80px avec une
bordure arrondie de 10px :
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………..