NSI - Numérique et Sciences Informatique

Activité2

TP de découverte.
Application, mise en œuvre de savoirs/savoir-faire
Recherche et validation de solutions.
Evaluation.

PROBLEMATIQUE
Créer une page html, destinée à un serveur Web , en séparant sa structure de sa présentation.

CONDITIONS DE DEROULEMENT DE L’ACTIVITE

Phases de
Objectifs Activités
travail
Découvrir le rôle des CSS dans un document
A) Mise en
HTML. Lecture de la mise en situation.
situation
Utilisation du langage CSS pour définir
B) Etude de la Modifier et enrichir l’aspect d’une page web avec
l’aspect d’une page.
problématique des CSS.
Mise en forme d’un document constitué
Créer une page html, destinée à un serveur Web de texte avec des balises html. Utilisation
C) Synthèse
embarquée, en séparant la forme du fond. du langage CSS pour définir son aspect.

RESSOURCES DOCUMENTAIRES, LOGICIELS ET MATERIELS

Découverte du langage HTML et des styles CSS Page 1
NSI - Numérique et Sciences Informatique

PC + Navigateur (Internet explorer, Mozilla etc..) + Notepad++

Dépliant des balises HTML, propriétés CSS

Découverte du langage HTML et des styles CSS Page 2

NSI - Numérique et Sciences Informatique

A) Mise en situation
A1) Page Web
« Une page Web est une ressource du World Wide Web conçue pour être
consultée par des visiteurs à l'aide d'un navigateur Web (Internet Explorer,
Mozilla Firefox etc.).
Elle a une adresse Web. Techniquement, une page Web est souvent
constituée d'un document en Hypertext Mark-Up Language (HTML) et
d'images. Cependant, tout type de ressources ou d'assemblage de
ressources, textuelles, visuelles, sonores, logicielles, peuvent constituer une Clic droit
Exemple de page Web
page Web. » (Wikipédia)

A2) Hypertext Markup Language (HTML)

En effectuant un clic droit sur une page Web, on accède à un menu contextuel et à
la possibilité de visualiser le code de la page comme dans la copie d’écran ci-
dessous.

Dans le TP1, vous avez découvert les balises html (voir les rappels en ANNEXE 1 et 2 de ce document).
Certaines d’entres-elles, comme <div> et <span> permettent de diviser un document et de fixer la
position des objets.
Plus généralement, une page HTML est conçue en essayant de séparer sa structure de sa présentation.

A3) Les feuilles de style en cascade

« CSS (Cascading Style Sheets : feuilles de style en cascade) est un langage informatique qui sert à
décrire la présentation des documents HTML.

L'un des objectifs majeurs des CSS est de permettre la mise en forme hors des documents. Il est par
exemple possible de ne décrire que la structure d'un document en HTML, et de décrire toute la
présentation dans une feuille de style CSS séparée.

Ainsi, les avantages des feuilles de style sont multiples :

- La structure du document et la présentation peuvent être gérées dans des fichiers séparés.
- La conception d'un document se fait dans un premier temps sans se soucier de la présentation, ce qui
permet d'être plus efficace.
- Dans le cas d'un site web, la présentation est uniformisée : les documents (pages HTML) font
référence aux mêmes feuilles de styles. Cette caractéristique permet de plus une remise en forme rapide
de l'aspect visuel.
- Le code HTML est considérablement réduit en taille et en complexité, puisqu'il ne contient plus de
balises ni d'attributs de présentation. » (Wikipédia)

Notre objectif est de modifier vos pages HTML de la synthèse activité 1 en séparant la structure de la page (HTML)
de sa présentation (CSS).

Aujourd’hui, votre page HTML ne sera pas déployée sur un serveur, mais simplement stockée sur le disque dur du
PC !

Découverte du langage HTML et des styles CSS Page 3

NSI - Numérique et Sciences Informatique

B) Etude de la problématique

B1) Présentation
« Le design d'un site évolue toujours au fil du temps. Le problème,
lorsqu'on n'utilise pas de feuilles de style, c'est qu'il faut reprendre
toutes les pages HTML une à une pour modifier une police de
caractère ou une couleur de fond...

Avec les "Cascading Style Sheets" (CSS), ce lourd handicap est résolu.

C'est dans la feuille de style CSS que l'on va déclarer toute la mise en forme des pages : le
positionnement des éléments, l'image de fond, les polices de caractère, les couleurs, etc.
Celle-ci sera liée à chaque page html. Ainsi, lorsqu'on en modifiera un élément, cela se répercutera
immédiatement sur toutes les pages html.» [Link]
Pseudo
Sélecte

Classe

classe

Ce TP constituant une introduction aux feuilles de style, seules les notions de sélecteur, de
ur

classe générique et de pseudo-classe seront abordées.

« La correction » de la synthèse du premier TP HTML servira de support pour les illustrer.

B2) Analyse, modification et amélioration d’une page Web

B21) Présentation
« La correction de la page Tintin », réalisée dans le TP
précédent, servira de support à cette partie du TP.

Notre objectif est dans un premier temps, de placer les « effets

visuels » de cette page dans une feuille de style puis d’utiliser
les possibilités des CSS pour l’enrichir.

B22) Analyse de la page existante

On donne le code HTML de la page « Tintin et le secret de la Licorne » en ANNEXE 1 de ce
document.

La balise <table>, repérée table 1, possède les propriétés « width » et « border » .

Ces propriétés pourront être déplacées dans une feuille de style (CSS)

Q1) Dans le code HTML de l’annexe 1, identifier, l’autre balise, dont les propriétés, liées à la
présentation de la page peuvent être déplacées dans une feuille de style.
Complétez le DR1.

Découverte du langage HTML et des styles CSS Page 4

NSI - Numérique et Sciences Informatique

B23) Modification d’une page existante

Ouvrez la page « [Link] » avec Notepad++.

Ouvrez la page « [Link] »

Ce document présente quelques différences, détaillées ci-dessous, avec celui de l’annexe 1.

Comme vous pouvez le constater dans l’extrait de code ci-dessous, les balises <body> et <table>
ont été débarrassées des propriétés identifiées précédemment.
<body>
<table align="center">
…

La balise identifiant un lien vers une feuille de style, est présente dans l’en-tête de la page.
<head>
<title> Tintin et le secret de la licorne correction finale </title>

<link rel="stylesheet"href="[Link]"/>

</head>

Ouvrez la page [Link] Les images et le texte doivent apparaître sur un fond d’écran blanc.

MODIFICATION DU FICHIER [Link]

 Déclaration d’un sélecteur

Le sélecteur body est présent dans le fichier mais il est vide !!!
Vous devez le compléter pour déclarer des propriétés de style permettant de définir la couleur du fond de
la page et la couleur du texte.

Notion de sélecteur
Sélecteur : toute balise HTML privé de < >. Le sélecteur « accroche » un effet de style à un élément
ou une balise html. Chaque sélecteur (body, p etc.) possède un ensemble de propriétés qui peuvent
être définies par une ou plusieurs feuilles de style.

La déclaration d’un style s’effectue par le couple propriété : valeur ;

Syntaxe Identifie la
nature de l’effet
Identifie ce qui souhaité
selecteur { propriété1 : valeur1 ; sera défini dans
propriété2 : valeur2 ; le style adopté
…
propriétén : valeurn ;
}

Découverte du langage HTML et des styles CSS Page 5

NSI - Numérique et Sciences Informatique

Sélectionnez CSS dans Notepad++ et complétez le fichier HTML comme ci-dessous.

/* Sélecteur */
body { background-color: black;
color : white;
}

Remarques
Les propriétés des CSS portent des noms différents de celles incluses directement dans le code HTML

Chaque couple propriété : valeur se termine par un « ; » et l’ensemble est encadré par des accolades
{ }.

Principales propriétés
 1 Propriétés liées aux polices de caractères
 2 Propriétés liées à la mise en page des textes
 3 Propriétés liées aux arrière-plans
 4 Propriétés liées aux listes
 5 Propriétés liées aux bordures
 6 Propriétés liées à la définition des marges

Voici un lien qui rassemble les différentes propriétés utilisées dans les CSS.

[Link]

Ouvrez maintenant le page votre navigateur

Le fond d’écran doit être noir et le texte blanc !

Découverte du langage HTML et des styles CSS Page 6

NSI - Numérique et Sciences Informatique

 Déclaration d’une classe générique

La balise <body> étant unique dans la page, il suffit de déclarer le sélecteur body pour définir toutes ses
propriétés. Pour ce qui est de la balise <table>, la déclaration d’un sélecteur table n’est pas envisageable
car la page comporte trois tableaux auxquels on ne peut pas appliquer les mêmes propriétés.
A la place d’un sélecteur, vous allez déclarer une classe générique.

Les classes génériques

Les classes permettent d’appliquer plusieurs styles différents à une même balise. Le concepteur
peut ainsi définir ses propres sélecteurs. Les classes génériques peuvent être appliquées à toute
balise.

Syntaxe
Déclaration : .nom_classe {déclaration(s) de style}
Utilisation : <descripteur class=nom_classe> … </selecteur>

Exemple : Description
.bleu {color:blue}

Utilisation
<p class=bleu> Voici le résumé </p>

Complétez le fichier CSS comme ci-dessous.

Déclaration
<style>
/* Sélecteur */
body { background-color: black;
color : white;
}

/* Classe générique */ Ne pas oublier le point

.table1 { width : 921px; devant table1 !
border: 1px;
}
</style>

Dans le fichier HTML il faut changer definer la class “table1”:

<body>
<table class="table1" align="center">

Ouvrez la page dans Internet Explorer. Le tableau doit être centré sur l’écran.

Découverte du langage HTML et des styles CSS Page 7

NSI - Numérique et Sciences Informatique

B24) Amélioration de la page existante

La page « [Link] » est structurée par un tableau comme ci-dessous :

Image1
Paragraphe 1

Image2 Paragraphe2

Paragraphe3 Image3

Paragraphe4

On souhaite apporter les modifications suivantes :

Texte du paragraphe 1 : taille = 22pixels,

police = Trebuchet ou MSArial ou Helvetica ou sans-serif
italique
Alignement horizontal = justifié

Texte des paragraphes 2 et 3 : taille = 18pixels,

police = Trebuchet ou MSArial ou Helvetica ou sans-serif
Alignement horizontal = justifié

Texte du paragraphe 4 : taille = 14pixels

Police = Arial
Italique
Alignement horizontal = centré

Q2) Identifier le nom des propriétés nécessaires à ces modifications grâce au site suivant
[Link]

 Complétez le DR

Créez trois classes paragraphe1, paragraphes23 et paragraphe4 Puis modifiez le fichier html.

Ouvrez la page dans votre navigateur.

Découverte du langage HTML et des styles CSS Page 8

NSI - Numérique et Sciences Informatique

 Déclaration d’une pseudo-classe

Pour rajouter un peu d’interactivité à la page, vous allez utiliser des pseudo-classes.

Les pseudo-classes autorisent des définitions pour l’affichage des balises dans des états particuliers.

Syntaxe
Déclaration selecteur : nompseudoclasse {déclaration(s) de style}

 Les pseudo-classes d’ancre : link, visited

Exemple : couleur du fond d’un lien déjà visité rouge et la couleur du texte associé blanc.
a : visited {color :white ;backgroun-color :red}

 Les pseudo-classes dynamiques : hover, active, focus

Exemple : mise en italique du lien au passage de la souris.

a :hover {font-style:italic;}

Q3) Notez sur le DR1 les déclarations de pseudo-classes d’ancre permettant de rendre le lien
« Allociné.com » jaune lorsqu’il n’a pas été visité (link) ,vert si la souris est au dessus puis blanc après.
Modifiez le fichier HTML.

Ouvrez la page et testez le lien.

Découverte du langage HTML et des styles CSS Page 9

NSI - Numérique et Sciences Informatique

C) Synthèse :

Reprenez vos pages HTML demandées en fin d’activité 1 en respectant les contraintes ci-dessus.

La structure est à coder en HTML et la présentation est à réaliser avec un fichier CSS externe

 Contraintes à respecter pour la présentation de la page (voir également l’annexe 6)

 Propriétés de la page
- Famille de caractères : Arial, Helvetica, sans-serif
- Couleur de fond : au choix
- Couleur du texte : au choix

 Propriétés du titre
- Taille au choix (plus grand que le texte)

 Propriétés du tableau
- Centré dans la page
- Bord extérieur apparent : 2 pixels
- Texte : taille au choix
Les mots « classe, option et module » doivent se différentier du reste (couleur différente
etc…)

 Propriété du lien
Cible : Visité : couleur au choix
Non visité : couleur au choix Ce travail est à envoyer dans les
huit jours s’il n’a pas été rendu à la
 Propriété du bas de page fin de la séance de TP.
Texte : italique Ok : clignote

Q4) Réalisez la page HTML demandée en respectant les contraintes ci-dessus. La structure est à coder
en HTML et la présentation est à réaliser avec des CSS.

Découverte du langage HTML et des styles CSS Page 10

NSI - Numérique et Sciences Informatique

ANNEXE 1 : Code HTML de la page « Tintin et le secret de la Licorne »

<html>
<head>
<title> Tintin et le secret de la licorne correction finale </title>
</head>

<body bgcolor="black" text="white">

<table align="center" width="921px" border="1"> <!-- Table 1 -->
<tr>
<td>
<table> <!-- Table 2 -->
<tr>
<td colspan="3" align="center"><img src="[Link]"/> </td>
</tr>

<tr>
<td colspan="3">
<p><h4>« Parce qu’il achète la maquette d’un bateau appelé la Licorne,
Tintin, un jeune reporter, se retrouve entraîné dans une fantastique aventure
à la recherche d’un fabuleux secret. </h4>
<p>
</td>
</tr>

<tr>
<td align="center"><img src="tintin4_Web.jpg"/></td>
<td colspan="2">
<p>En enquêtant sur une énigme vieille de plusieurs siècles,
il contrarie les plans d’Ivan Ivanovitch Sakharine, un homme diabolique
convaincu que Tintin a volé un trésor en rapport avec un pirate nommé Rackham le Rouge.
<br/>
Avec l’aide de Milou, son fidèle petit chien blanc, du capitaine Haddock, un vieux loup
de mer au mauvais caractère, et de deux policiers maladroits, Dupond et Dupont, Tintin
va parcourir la moitié de la planète, et essayer de se montrer plus malin et plus rapide
que ses ennemis, tous lancés dans cette course au trésor à la recherche d’une épave
engloutie qui semble receler la clé d’une immense fortune… et une redoutable malédiction.
</p>
</td>
</tr>
</table>
Découverte du langage HTML et des styles CSS Page 11
NSI - Numérique et Sciences Informatique

<table> <!-- Table 3 -->

<tr>
<td colspan="2">
<p> De la haute mer aux sables des déserts d’Afrique, Tintin et ses amis vont
affronter mille obstacles, risquer leur vie, et prouver que quand on est prêt
à prendre tous les risques, rien ne peut vous arrêter… »
</p>
</td>
<td align="center"><img src="[Link]"/> </td>
</tr>

<tr>
<td colspan="3" align="center">
<br/>
<p><i>Un lien pour visualiser la vidéo de présentation du film :
<a href="[Link] target="_blank">
Allociné.com </a></i>
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

Découverte du langage HTML et des styles CSS Page 12