Chapitre 4 HTML 5 / CSS 3 NSI
Chapitre 4
Initiation à l'HTML et CSS
Le chapitre est une succession d'exercices permettant de découvrir les bases de HTML 5.
( "HyperText Markup Language" soit "langage de marquage hypertexte"), ainsi que les bases
du CCS 3. ( Cascading Style Sheets ou "feuilles de style en cascade.
• Avant tout, créer un dossier NSI_WEB dans votre répertoire NSI.
• Ouvrir le logiciel "Notepad ++".
• Enregistrer un premier chier dans le dossier sous le nom : "ma_page.html". ( ne pas
oublier l'extension html )
• ouvrir et enregistrer un deuxième chier dans le dossier sous le nom : "ma_feuille_style.css".
( ne pas oublier l'extension css )
Nous allons donc gérer en parallèle deux chiers avec Notepad++, le chier contenant la
page et l'autre chier gérant la présentation.
La syntaxe en HTML se fait grâce à des balises limitées pas des chevrons ( < la_balise >
). Les remarques sont écrites entre chevrons et tirets :
<!-- Les remarques -->
Exercice 1 : Recopier le script suivant sur le chier Html :
<!DOCTYPE html>
<html>
<head>
<title>Ma page</title>
<meta charset = "utf-8">
<link rel ="stylesheet" href="ma_feuille_style.css" />
</head>
<body>
<p> Bonjour le monde </p>
</body>
</html>
Recopier le script suivant sur le chier CSS :
body
{
background-color : #FF0000 ; /* en hexadécimal */
}
p
{
color : yellow; /* le nom d'une couleur */
}
Sauvegarder, puis ouvrir le chier en double cliquant dessus, ou à l'aide du navigateur de votre
choix.
[Link] 1/6 Lycée Jean Rostand
Chapitre 4 HTML 5 / CSS 3 NSI
La syntaxe du CCS est :
nom_balise
{
attribut : valeur;
}
Ne pas oublier les " ;" à la n de chaque commandes.
Il est possible de mettre une image de fond.
Enregistrer une image dans votre dossier, en la nommant d'un nom adéquat ( par exemple :
[Link] ).
Recopier le script suivant sur le chier CSS :
body
{
background-image: url([Link]);
}
p
{
color : yellow; /* le nom d'une couleur */
}
Tester ensuite les propriétés suivantes avec les diérentes valeurs :
• background-attachment :
xed ( l'image du fond reste xé )
scroll ( par défaut elle dé le )
• background-repeat :
no-repeat
repeat-x (uniquement sur la première ligne).
repeat-y (uniquement sur la première colonne).
repeat ( par défaut).
• background-position : ( si elle n'est pas répétée )
30px 50px ( soit à 30 pixel de la gauche, et 50 du haut).
top (en haut )
bottom ( en bas)
left
center
right
top rigth ( on peut combiner )
[Link] 2/6 Lycée Jean Rostand
Chapitre 4 HTML 5 / CSS 3 NSI
On peut placer plusieurs images, la première est placée en dessus, et ainsi de suite...
Exercice 2 : Certaines balises permettent de dé nir des propriétés en dehors du corps de la
page.
Recopier le programme suivant :
<!DOCTYPE html>
<html>
<head>
<!-- site de mon_nom -->
<title>Ma page</title>
<meta charset = "utf-8">
<!-- on rajoutera plus tard des liens dans cette zone -->
</head>
<body>
<p> Bonjour le monde </p>
</body>
</html>
Exercice 3 : Recopier le script suivant, et analyser l'actions des diérentes balises :
<body>
<p> <mark> Bonjour </mark> le <q> monde </q> </p>
<p> <mark> <q>Bonjour </q> le monde </mark> </p>
<p> <strong> Regarder </strong>, il y a un <sup> titre </sup> au <em>dessus </em>
de la <sub> page </sub> </p>
</body>
Exercice 4 : Recopier le script suivant, et analyser l'actions des diérentes balises :
<body>
<h1> Ceci est un titre </h1>
<h2> Ceci est un titre </h2>
<h3> Ceci est un titre </h3>
<h3> Ceci est un titre </h3>
<h4> Ceci est un titre </h4>
<h5> Ceci est un titre </h5>
<h6> Ceci est un titre </h6>
</body>
Exercice 5 : Sur le net, aller chercher et enregistrer dans votre dossier ICN_HTML une image
de saxophone. Veiller à lui donner un nom facile. ( exemple : [Link] )
Recopier le script suivant : :
<body>
<img src = "[Link]"/>
<!-- attention à bien noter l'extension -->
<img src = "[Link]"/>
<br/> <!-- pour un retour à la ligne -->
<img src = "[Link]"/>
<hr/>
</body>
[Link] 3/6 Lycée Jean Rostand
Chapitre 4 HTML 5 / CSS 3 NSI
Exercice 6 : Position dans la page :
Recopier le script suivant sur le chier Html :
<!DOCTYPE html>
<html>
<head>
<title>Ma page</title>
<meta charset = "utf-8">
<link rel ="stylesheet" href="ma_feuille_style.css" />
</head>
<body>
<p id="texte_1" > premier texte </p>
<p id="texte_2" > le deuxieme texte </p>
<p id="texte_3" > et un troisieme texte </p>
</body>
</html>
Recopier le script suivant sur le chier CSS :
p
{
border : 3px yellow solid;
}
#texte_1
{
padding-bottom : 10%;
}
#texte_2
{
padding-top : 20px; /* en % ou en px */
}
#texte_3
{
padding-left : 30%;
}
Remplacer la propriété "padding" par "margin".
Analyser les diérentes actions sur la présentation des textes.
Exercice 7 : Image et position dans le texte :
Retrouver l'image du saxophone du dernier TD.
Recopier le script suivant sur le chier Html :
<!DOCTYPE html>
<html>
<head>
<title>Ma page</title>
<meta charset = "utf-8">
<link rel ="stylesheet" href="ma_feuille_style.css" />
</head>
[Link] 4/6 Lycée Jean Rostand
Chapitre 4 HTML 5 / CSS 3 NSI
<body>
<p> <img id="picture" src="[Link]" alt="la saxo">
Le saxophone est un instrument de musique
à vent appartenant à la famille des bois.
Il a été inventé par le Belge Adolphe Sax et
breveté à Paris le 21 mars 1846.
Il ne doit pas être confondu avec le saxhorn,
de la famille des cuivres, mis au point, lui aussi,
par Adolphe Sax. Le saxophone est généralement en laiton,
bien qu'il en existe certains en cuivre, en argent,
en plastique ou plaqués en or1.
( source [Link] )</p>
</body>
</html>
Recopier le script suivant sur le chier CSS :
p
{
border : 3px yellow solid;
width : 25%;
color : red ;
}
#picture
{
float:left;
width: 30%;
}
Exercice 8 : Recopier le script suivant, et analyser l'actions des diérentes balises :
<body>
<table border>
<caption>Liste des participants</caption>
<thead>
<tr>
<th>Nom </th>
<th>Prenom</th>
<th>Date de naissance</th>
</tr>
</thead>
<tbody>
<tr>
<td>Pignon</td>
<td>François</td>
<td> 10/05/78 </td>
</tr>
<tr>
<td>Leventreur</td>
[Link] 5/6 Lycée Jean Rostand
Chapitre 4 HTML 5 / CSS 3 NSI
<td>Jack</td>
<td> 22/06/43 </td>
</tr>
</tbody>
</table>
</body>
Exercice 9 : Recopier le script suivant, et analyser l'actions des diérentes balises :
<body>
<ul>
<li> Chapitre 1 : Naruto Uzumaki </li>
<li> Chapitre 2 : Konohamaru </li>
<li> Chapitre 3 : Sasuke Uchiwa </li>
</ul>
<hr/>
<ol>
<li> Naruto Uzumaki </li>
<li> Konohamaru </li>
<li> Sasuke Uchiwa </li>
</ol>
</body>
Exercice 10 : Recopier le script suivant, et analyser l'actions des diérentes balises :
<body>
<a href= "[Link] Le site du prof </a>
<hr/>
<a href="[Link] title="le site"
target= "_blank"> Le site d'ICN</a>
<hr/>
<a href= "[Link] <img src ="[Link]" /> </a>
</body>
Pour plus de balises, vous pouvez vous dirigez vers les sites suivants :
[Link]
[Link]
[Link] 6/6 Lycée Jean Rostand