TP 1

3ième S.I.
Systèmes et Technologies de l’Informatique
HTML5 & CSS3 (Module 1 )
I. Rappel :
Un site web s’ouvre avec un ……………………….
Exemple : …………………………………………………………………………………
Un site web est codé avec les langages …………………et ………………….
Pour créer un site web, on utilise un ………………………………
Exemple : …………………………………………………………………………………
……………...(…………………………………………………….) : structure le contenu
……………...(……………………………………….) : gère l’apparence et la présentation
L’extension d’une page web est : ……………….
L’extension d’une page css est : ……………….
Une page web est constituée de deux parties principales : l’entête <…………> et le corps
<………….>
Il y a des balises …………………..(balises ouvrantes et fermantes) et des balises
…………………….(sans balises fermantes)
Les balises sont parfois accompagnées d’……………………
La structure d’un document HTML
<!DOCTYPE html>
<html>
<head>
………………………….
<title> ……………</title>
</head>
<body>
………………… …………………………………………….
…………………
</body>
</html>
Lycée secondaire jemmel 1 Prof :Trimeche Awatef

3ième S.I. Systèmes et Technologies de l’Informatique
TP1 : Rappel
❖ HTML(HyperText Markup Language) : C’est un langage de description de contenu et de structure
d’une page web
A l’aide de l’éditeur Vs code, créer et enregistrer la page web suivante sous le nom « tp1.html » dans
votre dossier de travail :
1- Quelles sont les balises à utiliser pour définir :

- Un titre de niveau n : < …………… > < …………….. >
- Un paragraphe : < …………… > < …………… >
- Un saut de ligne : < ……………>
- Une ligne horizontale : < …………….. >
- Une liste ordonnée <………… >
<…………> <………….>
< ………… >
- Une liste non-ordonnée <………… >
<…………> <………….>
< ………… >
- Un tableau < …………….. >
< …………>
<…………….> <……………>
< …………>
< …………….. >

❖ CSS : (Cascading Style Sheets), permet de choisir la couleur du texte, la police

utilisée, la taille du texte, les bordures, le fond… et de faire la mise en page du site, donc il
concerne la mise en forme des pages web.
SYNTAXE :
Sélecteur 1
{
propriété1: valeur1;
propriété2: valeur2;
propriété n: valeur n;
}
Description Propriété Valeurs (exemples)
Police du texte font-family police1, police2,police3,…
Taille du texte font-size 1.3em, 16px, 120%...
Gras font-weight bold : gras , bolder : plus gras , lighter : plus
fin ,
normal : pas gras (par défaut)
Italique font-style italic (italique ), oblique(autre façon de
mettre en italique) , normal (par défaut)
Soulignement, ligne au- text- underline (souligné), overline ( ligne au-
dessus, barré ou clignotant decoration dessus),
line-through (barré),blink (clignotant),
none : normal (par défaut)
Alignement horizontal du text-align left : aligné à gauche (par défaut)
texte center : centré
right : aligné à droite
justify : justifié (prend toute la largeur de la
page)
Ombre de texte text-shadow Exemple : 5px 5px 2px blue
(horizontale, verticale, fondu, couleur)
1- Créer une feuille de style nommée « forme.css » dans le même dossier puis ajouter la
balise suivante dans la partie head du code HTML. <link rel="stylesheet" href="
forme.css"/>
2- Appliquer pour les paragraphes : police verdana, taille 16px et couleur bleu
3- Mettre les éléments des listes non-ordonnée en italique
…………………………………………………………….
4- Mettre les éléments de la liste ordonnée en gras ……………………………………………………..
5- Souligner tous les titres de niveau 3 …………………………………………………………….
6- Mettre le titre de niveau 2 au centre …………………………………………………………………….
7- Appliquer un effet d’ombre pour le premier titre (3px 4px et de couleur rose)
…………………….…………………..
8- Changer la couleur de l’arrière-plan de la page par une couleur de votre choix
……………………………………………..

Annexe : les balises HTML

Mise en forme des textes et des paragraphes
Code HTML Rôle Aperçu

------------------------------- Mise en forme des textes ---------------------------
< B > texte < /B > Afficher le texte en gras texte
< I > texte < /I > Afficher le texte en italique texte
< U > texte < /U > Souligner le texte texte
< S > texte < /S > Barrer le texte texte
------------------------------- Mise en forme de caractères ---------------------------
<font SIZE = ‘‘….’’ color= "#......"  SIZE = X, la taille des caractères
face= “………”> </font>  Color = "X", sa couleur
 Face = …, sa police
X<sup>2</sup> Texte en exposant X²
H<sub>2</sub>O Texte en indice H2O
------------------------------- Traçage d’une ligne --------------------------------
<HR> Tracer une ligne horizontale
<HR SIZE = 8 WIDTH = "25%" ALIGN  SIZE = X, la hauteur de la ligne.
= RIGHT>  WIDTH = "X", sa largeur.
 ALIGN = …, son alignement
(CENTER, LEFT, RIGHT).
-------------------------- Mise en page -------------------------
< center> Tunisie</center> Centrer une écriture Tunisie
< div align= ‘‘left’’> Tunisie </div> Alignement à gauche Tunisie
< div align= ‘‘right’’>Tunisie </div> Alignement à droite Tunisie
< div align= ‘‘center’’>Tunisie</div> Alignement centré Tunisie
--------------------------- Création d’un paragraphe ---------------------------
<P> C’est un nouveau paragraphe Début et fin d’un nouveau
</P> paragraphe
<P align=center>...</P>
<P align=left>...</P>
<P align=right>...</P>
-------------------------- Création d’une nouvelle ligne -------------------------
<BR> C’est une nouvelle ligne Passer à la ligne suivante
-------------------------- Ecrire un commentaire -------------------------
< !-- --> Pour écrire un commentaire
------------------------------- Affichage de texte--------------------------------

<H1> Titre 1 </H1> Sa taille dépend de la valeur de
<H2> Titre 2 </H2> n. <H1> … </H1> la plus grande Titre 1
<H3> Titre 3 </H3> et <H6> … </H6> la plus petite. Titre 2
<H4> Titre 4 </H4> Titre 3
Titre 6

------------------------------- Affichage d’une liste -------------------------------

<UL> Afficher une liste non ▪ Bonjour mes amis
<LI> Bonjour mes amis </LI> Numérotée. ▪ Bon travail
<LI> Bon travail </LI>
</UL>
<OL START="1"> Afficher une liste Numérotée. 1. Pascal
<LI>Pascal 2. Cobol
<LI> Cobol 3. C++
<LI> C++
</OL>
<OL TYPE=”I “ START="5">
<LI>Word V. Word
<LI> Excel VI. Excel
<LI> Power point VII. Power point
</OL>
<H4>Lexique</H4>
Les listes de définitions
<DL>
<DT>A</DT>
<DD>Array Abs Access </DD>
<DT>B</DT>
<DD> Bit Byte Boolean</DD>
<DT>C</DT>
<DD>Com cos chr char</DD>
</DL>
➢ La propriété type de la balise <UL> peut avoir les valeurs suivantes :
 square : puces carrées.
 circle : puces circulaires.
 disc : puces circulaires pleines (valeur par défaut)
➢ La propriété type de la balise <OL> peut avoir les valeurs suivantes :
 A : Lettres majuscules.
 a : lettres minuscules.
 I : chiffres romains majuscules.
 i : chiffres romains minuscules.
 1 : chiffres arabes (valeur par défaut)

Correction tp1 :
Html :
<!DOCTYPE html>
<html >
<head>
<link rel="stylesheet" href="forme.css"/>
<title> système </title>
</head>
<body>
<h1>système ,Technologie 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><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 mobile</li>
<li>Système embarqué</li>
</ul>
<h3>Manipulation des fonctionnalités d'un SE</h3>
<table border="2">
<tr>
<td>Installation d'une machine virtuelle</td>
<td>sécurisation d'un Pc</td>

</tr>
<tr>
<td>Sauvegarder et restaurer un PC</td>
<td>utilisation d'un émulateur </td>
</tr>
</table>
</body>
</html>
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: 4px 3px pink;
body{ background-color:rgb(95, 160, 97);}

TP 1

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 1

Transféré par

Droits d'auteur :

Formats disponibles

3ième S.I.

Systèmes et Technologies de l’Informatique

HTML5 & CSS3 (Module 1 )

Lycée secondaire jemmel 1 Prof :Trimeche Awatef

1- Quelles sont les balises à utiliser pour définir :

Lycée secondaire jemmel 2 Prof :Trimeche Awatef

❖ CSS : (Cascading Style Sheets), permet de choisir la couleur du texte, la police

Lycée secondaire jemmel 3 Prof :Trimeche Awatef

Annexe : les balises HTML

Code HTML Rôle Aperçu

------------------------------- Affichage de texte--------------------------------

Lycée secondaire jemmel 4 Prof :Trimeche Awatef

------------------------------- Affichage d’une liste -------------------------------

➢ La propriété type de la balise <UL> peut avoir les valeurs suivantes :

 square : puces carrées.

 circle : puces circulaires.

 disc : puces circulaires pleines (valeur par défaut)

➢ La propriété type de la balise <OL> peut avoir les valeurs suivantes :

 I : chiffres romains majuscules.

 i : chiffres romains minuscules.

 1 : chiffres arabes (valeur par défaut)

Lycée secondaire jemmel 5 Prof :Trimeche Awatef

<link rel="stylesheet" href="forme.css"/>

<title> système </title>

<h1>système ,Technologie et Internet </h1>

<h2>les systèmes d'exploitations</h2>

<li>Manipulation des fonctionnalités d'un SE </li>

<p>un système d'exploitation est un ensemble de programmes nécessaires au démarrage et à

<li>SE pour PC</li>

<li>SE pour mobile</li>

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

<td>Installation d'une machine virtuelle</td>

<td>sécurisation d'un Pc</td>

<td>Sauvegarder et restaurer un PC</td>

<td>utilisation d'un émulateur </td>

font-family: Verdana, Geneva, Tahoma, sans-serif;

text-shadow: 4px 3px pink;

body{ background-color:rgb(95, 160, 97);}

Lycée secondaire jemmel 7 Prof :Trimeche Awatef

Vous aimerez peut-être aussi