3ième S.I.

Systèmes et Technologies de l’Informatique

HTML5 & CSS3 (Module 1 )

Tp2 : 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 « droit.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 « droit.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 « tp1.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

Lycée secondaire jemmel 1 Prof :Trimeche Awatef

3ième S.I. Systèmes et Technologies de l’Informatique

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

……………………….…… :………………………………… ;
………………………..…… : ……………………………….. ;
………………………..…… : ……………………………………………….. ; }

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- 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 span{

d’exploitation est
un <span> ensemble text-
de programmes decoration:
</span> nécessaires
underline ;
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.

Lycée secondaire jemmel 2 Prof :Trimeche Awatef

3ième S.I. Systèmes et Technologies de l’Informatique

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
……………………………………….{ ………………………………………………. : …………………………………………………… }
En CSS

………………………………….. :……………….. }

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)
……………………………………….{ ………………………………………………. : …………………………………………………… }

Lycée secondaire jemmel 3 Prof :Trimeche Awatef