Html 5 et Css3 3STI
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="[Link]"/>
</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 « [Link] »
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;}
Lycée Zaouiet Elmagaiez 3 Jihen Tahri Chaouch
Html 5 et Css3 3STI
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 « [Link] » et
« [Link] »
2- Ouvrir la page « [Link] » avec l’éditeur VSCODE
3- Créer un lien externe du mot « machine virtuelle » vers la page « [Link] »
Installation d'une <a href= " [Link] "> Machine Virtuelle </a>
4- Créer un lien externe du mot « émulateur » vers la page « [Link] »
Utilisation d'un <a href= " [Link] ." target="_blank"> émulateur </a>
Quel est le rôle de l’attribut target ?
L’attribut target permet d’ouvrir la page cible dans un nouvel onglet 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 id = "def">Définition:</h3>
b- Ajouter un lien du premier élément de la liste vers l’ancre ‘def’
<li><a href="#def">Définition</a> </li>
c- Refaire le même travail pour le reste
<li><a href="#typ">Types</a></li>
<li><a href="#man">Manipulation des fonctionnalités d’un SE</a></li>
<h3 id="typ">Types de SE:</h3>
<h3 id="man">Manipulation des fonctionnalités d’un SE</h3>
TP2 : Les balises de groupement : <div>, <span> et <hgroup>
1- Dans le code de la page « [Link] » , mettre ces deux titres dans un groupe de titre
< hgroup >
<h1>Systèmes, technologies et internet</h1>
<h2>Les systèmes d'exploitations</h2>
</ hgroup >
2- Dans le fichier « [Link] » 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
hgroup { text-align: center;
font-family:Arial, Helvetica, sans-serif;
background-color: azure;
border: 2px solid blue;}
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
<div> div
<p>Un système d’exploitation est un ensemble de programmes {
nécessaires au démarrage et à l’utilisation d’un ordinateur. </p><br> background-
<p>Il joue le rôle d’une interface entre l’ordinateur et color:yellow ;
l’utilisateur.</p>
</div>
}
4- On veut souligner le mot « ensemble de programmes »
Lycée Zaouiet Elmagaiez 4 Jihen Tahri Chaouch
Html 5 et Css3 3STI
a- Essayer avec la balise <div>. Que constatez-vous ?
2 problèmes : les deux divisions sont soulignées
Le paragraphe est divisé en plusieurs bloc
Solution du premier problème : on identifie la deuxième division par l’attribut id comme
suit
p>Un système d’exploitation #s{
est un <div id= "s" > text-decoration:
ensemble de programmes </div> underline ;
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>
=>C’est la solution pour le deuxième problème
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
ol,ul,p{ text-indent: 5%;}
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 class
En Html En CSS
<ol class ="c1" > .c1 {
text-indent: 5%;}
<ul class ="c1" >
<p class ="c1" >
6- Transformer tous les caractères de la page web en majuscule
*{ text-transform: uppercase;}
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.
Lycée Zaouiet Elmagaiez 5 Jihen Tahri Chaouch
Html 5 et Css3 3STI
8- Modifier l’arrière-plan par une image de votre choix (mettre l’image dans le même
dossier)
body{ background-image: url([Link]);}
Lycée Zaouiet Elmagaiez 6 Jihen Tahri Chaouch