TP 2

Html 5 et Css3 3STI 2022-2023
Correction TP1 :
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>systèmes</title>
<link rel="stylesheet" href="forme.css"/>
</head>
<body>
<h1>Systèmes, technologies et internet</h1>
<h2>Les systèmes d'exploitations</h2>
<ol>
<li>Définition</li>
<li>Types</li>
<li>Manipulation des fonctionnalités d’un SE</li>
</ol>
<hr>
<h3>Définition:</h3>
<p>Un système d’exploitation est un ensemble de programmes nécessaires au démarrage et
à l’utilisation d’un ordinateur.</p>
<br>
<p>Il joue le rôle d’une interface entre l’ordinateur et l’utilisateur.</p>
<h3>Types de SE:</h3>
<ul>
<li>SE pour PC </li>
<li>SE pour Mobiles </li>
<li>Systèmes embarqués</li>
</ul>
<h3>Manipulation des fonctionnalités d’un SE</h3>

<table border="1">
<tr><td>Installation d'une Machine Virtuelle</td>
<td>Sécurisation d'un pc</td></tr>
<tr><td>Sauvegarder et restaurer un système</td>
<td>Utilisation d'un émulateur</td></tr>
</table>
</body>
</html>
Le fichier « forme.css »
p{font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 16px;
color: blue;}
ul li{ font-style: italic; }
ol li { font-weight: bold; }
h3{ text-decoration: underline;}
h2{ text-align: center; }
h1{text-shadow: 1px 2px pink;}
body{ background-color: beige;}
3
Suite de TP 1 : Rappel sur les liens hypertextes
On peut insérer dans une page web plusieurs types de liens :
- Lien externe : Un lien vers une autre page web dans internet ou dans l’ordinateur, un lien vers un fichier , …
- Lien interne : Un lien vers un emplacement dans la même page
1- Créer dans votre dossier de travail deux pages web nommées respectivement « mv.html » et
« emuandroid.html »
2- Ouvrir la page « tp1.html » avec l’éditeur VSCODE
3- Créer un lien externe du mot « machine virtuelle » vers la page « mv.html »
Installation d'une <………… href= "…………………………."> Machine Virtuelle <…………>
4- Créer un lien externe du mot « émulateur » vers la page « emuandroid.html »
Utilisation d'un <………… href= "…………………………." target="_blank"> émulateur <…………>
Quel est le rôle de l’attribut target ?
L’attribut target permet d’……………………… la page cible dans ……………………………………………………………………………………..
en lui attribuant la valeur _blank.
5- On veut créer des liens internes allant des éléments de la liste du sommaire vers les différents parties de la page
(1-Définition ----> Définition 2-Types -----> Types …)
a- Créer une ancre pour repérer la partie définition
<h3 …………… = "def">Définition:</h3>
b- Ajouter un lien du premier élément de la liste vers l’ancre ‘def’
<li><a href="……………………….">Définition</a> </li>
c- Refaire le même travail pour le reste
<li><a href="………………………">Types</a></li>
<li><a href="………………………">Manipulation des fonctionnalités d’un SE</a></li>
<h3 id="……………………">Types de SE:</h3>

<h3 id="……………………">Manipulation des fonctionnalités d’un SE</h3>
TP2 : Les balises de groupement : <div>, <span> et <hgroup>
1- Dans le code de la page « tp1.html » , mettre ces deux titres dans un groupe de titre
<………………………>
<h1>Systèmes, technologies et internet</h1>
<h2>Les systèmes d'exploitations</h2>
<………………………>
2- Dans le fichier « forme.css » appliquer à cet élément la mise en forme suivante : alignement
centré, police arial, couleur d’arrière plan « azure » , une bordure d’épaisseur 2px de type solide et
de couleur bleu
………………….. { ………………………….. :……………………………….. ;

……………………….…… :………………………………… ;
………………………..…… : ……………………………….. ;
………………………..…… : ……………………………………………….. ; }
Retenons :
L'élément <hgroup> est utilisé pour regrouper un ensemble des éléments de <h1> à <h6> , lorsqu'un titre a plusieurs
niveaux (sous-titres).
3- On veut changer la couleur d’arrière-plan des paragraphes de la partie définition en jaune. Grouper
ces paragraphes dans un bloc
<……………….> ………….
<p>Un système d’exploitation est un ensemble de programmes {
nécessaires au démarrage et à l’utilisation d’un ordinateur. </p><br> …………………………… :
<p>Il joue le rôle d’une interface entre l’ordinateur et ………………………….. ;
l’utilisateur.</p>
4
<……………….> }
4- On veut souligner le mot « ensemble de programmes »
a- Essayer avec la balise <div>. Que constatez-vous ?
p>Un système d’exploitation ……………………{
est un <div > ensemble de ……………………………………… :
programmes </div> nécessaires ……………………………………….
au démarrage et à ;
l’utilisation d’un ordinateur.
</p>
b- Modifier les deux codes comme suit :
p>Un système d’exploitation span{
est un <span> ensemble de text-decoration:
programmes </span> underline ;
nécessaires au démarrage et
à l’utilisation d’un
ordinateur. </p>
Retenons : Division en bloc ou inline
L'élément div représente une division en mode bloc. Un texte en mode bloc est un texte qui sera automatiquement
procédé et suivi d'un saut de ligne.
A l’opposé, on a les textes en mode inline qui restent dans le texte. On utilise à cette fin l'élément SPAN.
5- On veut ajouter une indentation de 5% pour les listes et les paragraphes

……………………………………….{ ………………………………………………. : …………………………………………………… }
Modifier les sélecteurs afin d’appliquer cette mise en forme uniquement pour les listes
et le deuxième paragraphe.
 Pour appliquer une mise en forme pour différents éléments on peut les identifier
par l’attribut ………………………………….
En Html En CSS
<ol ………………………………> {
………………………………….. :……………….. }
<ul ………………………………………………>
<p …………………………………………………>
6- Transformer tous les caractères de la page web en majuscule
……………………………………….{ ………………………………………………. : …………………………………………………… }
Retenons : Class et id en CSS

Si on a plusieurs éléments de même type, et on veut appliquer à l’un de ces éléments des
mises en forme différentes alors on doit l’identifier par l’attribut « id »
En Html En CSS
<balise id="nomid"> #nomid{ }
Si on veut appliquer la même mise en forme pour différents éléments on peut les identifier
par l’attribut class
En Html En CSS
<balise class="nomclass"> .nomclass{ }
7- Modifier la propriété de l’arrière-plan pour le corps de la page comme suit
body{ background-color: rgba(209, 82, 9, 0.9);}
Diminuer la valeur de l’alpha (0.9) jusqu’à atteindre la valeur 0.1, que remarquez-vous ?
La transparence en css peut se faire avec la valeur rgba(red, green, blue, alpha) , la valeur alpha est
compris entre 0 et 1.
8- Modifier l’arrière-plan par une image de votre choix (mettre l’image dans le même
dossier)
5
……………………………………….{ ………………………………………………. : …………………………………………………… }

TP 2

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

TP 2

Transféré par

Droits d'auteur :

Formats disponibles

Html 5 et Css3 3STI 2022-2023

<h3>Manipulation des fonctionnalités d’un SE</h3>

<h3 id="……………………">Types de SE:</h3>

………………….. { ………………………….. :……………………………….. ;

5- On veut ajouter une indentation de 5% pour les listes et les paragraphes

Retenons : Class et id en CSS

Vous aimerez peut-être aussi