Vous êtes sur la page 1sur 4

Exercices divers

Exercice 1 :
Cocher la (les) bonne(s) réponse(s) :
a. La balise <HTML> doit être placée:
Après la balise <TITLE> et avant la balise </BODY>
Après la balise <!DOCTYPE html> et avant la balise <TITLE>
Au début et à la fin de tous les documents HTML
b. La balise <a href=”#help”>Aide</a> 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 <input type=password name=p maxlength=8 required> 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 <link rel="stylesheet" href="styles/look.css"/> 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 <P ALIGN="center"> :
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

<…………………………>
<html>
<…………………>
<………………………… charset="utf-8">
<title>Formulaire</title>
</…………………>
<body>
<h1>……………………………………………</h1>
<………………… name="formulaire" method="post" action="destination.php">
<………………………………>
<………………………><h2>Vos coordonnées</h2></legend>
<br/>
<label>Nom*:</label><br/><input ……………="……………" placeholder="……………………" ……………………… /><br/>
<label>Prénom*:</label><br/><input ……………="……………" ………………………="vote prénom" required/> <br/>
<label>Date de naissance:</label><br /><input type="……………" value="jj/mm/aaaa"><br/>
<label>Mail:*</label><br/><input ……………="……………" id="email" ……………=".+@globex.com"/><br/>
<……………>Votre site:*</ ……………><br /><input ……………="text" value="http://www."/><br/>
<label>……………</label><br/><input ……………="……………" /><br />
<……………>
<input ……………="……………" name="sex" value="Homme" />Homme <br/>
<input ……………="……………" name="sex" value="Femme"/>Femme
</div>
<……………>
<option disabled="………………………" selected="">……………………………</option>
<……………>……………………</……………>
<……………>……………………</……………>
<……………>……………………</……………>
</select> <br/>
</fieldset>
</……………>
</……………>
</……………>

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

<……………………………>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="ds.css"rel="stylesheet">
<title> …………………………………</title>
</head>
<body>
<……………> </……………>
<……………> </……………>
<……………> </……………>
<……………> </……………>
<……………> </……………>
</body>
</html>

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
…………{
<…………> …………:………;
<……… class="…… "> ………………………: ………………;
<……><a href="#">Exercice N°1</a></…> ………………………………………: ………………;
………………………………………: ………………;
<……><a href="#">Exercice N°2</a></…> }
……… …… {
<……><a href="#">Exercice N°3</a></…>
………………………: 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-