NUMÉRIQUE ET
SCIENCES
INFORMATIQUES WEB TP 1 : HTML 1ere
1 CRÉER UNE PREMIÈRE PAGE EN HTML
➔ Créer un dossier TP1_HTML dans votre espace de travail WEB. A l’intérieur de ce dossier, créer un dossier images.
➔ Ouvrir Notepad++ et saisir le texte suivant :
<!DOCTYPE html>
<html>
</html>
➔ Enregistrer le fichier dans le dossier HTML sous index.txt (format texte)
➔ Ouvrir le fichier avec un navigateur. Que constatez-vous ?
➔ Sur Notepad++, enregistrer le document sous index.html (format HTML).
➔ Ouvrir le document à nouveau dans un navigateur. Constater les différences.
Remarque : Le nom de fichier index.html est le nom recherché par défaut dans un site par le navigateur. C’est la première
page qui s’affiche quand on entre l’adresse web.
➔ Entre les balises <html>, insérer l’élément head et l’élément body (respectivement l’en-tête et le corps de la page) :
<!DOCTYPE html/>
<html>
<head>
</head>
<body>
</body>
</html>
➔ Ajouter dans l’en-tête la balise <meta charset="utf-8" /> qui définit l’encodage pour afficher les caractères spéciaux
comme les accents en français.
➔ Pour donner un titre à cette page web, ajouter dans l’en-tête l’élément <title> NSI </title>.
➔ Enregistrer et rafraîchir votre page web dans le navigateur. Où apparaît le titre ?
2 STRUCTURE DE LA PAGE
En HTML 5, la structure de la page doit respecter la forme suivante :
➔ Ajouter dans le corps de la page, les éléments header, section, aside et footer.
➔ Ajouter l’élément nav à l’intérieur de l’élément header
➔ Ajouter l’élément article à l’intérieur de l’élément section.
Bien respecter l'indentation et l'alignement des
balises ouvrantes et fermantes
3 METTRE DES TITRES DANS L’ARTICLE
En HTML, pour mettre des titres dans le corps de la page, l’élément h1 à h6 de type block sont utilisés.
➔ Ajouter des titres dans votre article en suivant l’exemple ci-dessous :
<h1> NSI </h1>
<h2> Enseignement de spécialité</h2>
<h3> Objectifs </h3>
<h6> Lycée </h6>
➔ Enregistrer et observer le contenu de votre page dans un navigateur.
Remarque : les éléments au contenu très court peuvent avoir les balises ouvrante et fermante sur une même ligne.
NSI WEB : TP1 HTML Licence Creative Commons 4 - Passieux page 1/4
4 AJOUTER DU TEXTE
Pour ajouter du texte, l’élément paragraphe p de type block est généralement utilisé.
➔ Copier l’exemple de paragraphe suivant après l’élément <h3> Objectifs </h3> (indenter) :
<p> L'enseignement de spécialité numérique et sciences informatiques du cycle terminal de la voie générale
vise l'appropriation des fondements de l'informatique pour préparer les élèves à une poursuite d'études
dans l'enseignement supérieur, en les formant à la pratique d'une démarche scientifique et en développant
leur appétence pour des activités de recherche </p>
➔ Observer le rendu de votre page dans un navigateur. Comment s’affiche les espaces dans le navigateur ? Comment
s’affiche les retours à la ligne ?
➔ Le retour à la ligne est décrit par l’élément <br/> et la ligne horizontale par l’élément <hr/>. Testez-les dans le
paragraphe.
5 LISTE ORDONNÉE OU NON-ORDONNÉE
Pour la liste non ordonnée (liste à puces), l’élément de type block ul est utilisé. Pour la liste ordonnée (liste numérotée),
l’élément de type block ol est requis. Ensuite, on rajoute des éléments de liste dans l’élément ul ou ol, avec l’élément de liste
de type block li, comme dans l’exemple ci-dessous :
➔ Ajouter la liste ci-contre dans l’élément nav de votre page (indenter) : <ul>
<li> Accueil </li>
➔ Enregistrer et observer le rendu dans votre navigateur. <li> Programme </li>
<li> Volume horaire </li>
Nous verrons plus tard avec le CSS comment positionner les différentes </ul>
parties de la page.
6 AUTRES ÉLÉMENTS SPÉCIFIQUES DU TEXTE ET COMMENTAIRES
em Emphase : Mettre l’accent sur …
strong Emphase plus forte
Il existe de nombreux éléments de type inline structurant du
texte en HTML5, listés dans le tableau ci-contre : abbr Indique une abréviation
acronym Acronyme : mot formé d’initiales
➔ Tester quelques exemples dans votre paragraphe en
ajoutant dans votre fichier HTML le commentaire adress Indique une adresse
correspondant sub Met le contenu en indice
(Ex : <!-- Ceci est un commentaire --> ). sup Mettre le contenu en exposant
cite Contient une citation
➔ Enregistrer et observer le rendu dans un navigateur.
blockquote Paragraphe d’une citation
code Ajoute du code
mark Surligner le texte en jaune
7 CRÉER DES LIENS HYPERTEXTES
Un lien hypertexte est une référence sur un document, une référence sur une page web ou un site web. En cliquant sur un
lien hypertexte, on atteint la page ou le site référencé.
Dans une page HTML, ces liens vont pouvoir être associés à un texte qui sera rendu d'une manière particulière (par exemple
souligné en bleu) pour marquer qu'il s'agit d'un lien hypertexte.
En HTML, on utilise l’élément de type inline a avec l'attribut href ajouté à l'intérieur de la balise.
LIEN VERS UN SITE WEB Un site web est généralement composé de plusieurs pages web. L'adresse d'un site web est
l'adresse de sa page d'accueil (index) : on parle d'adresse web, ou d'URL (Uniform Resource Locator). C'est l'adresse qui
apparaît dans la barre d'adresses de votre navigateur.
Pour faire un lien hypertexte vers un site web, il faut indiquer l'URL dans la valeur de l'attribut href de l’élément a
<a href="http://wikipedia.fr">Wikipedia</a>
Va produire l’hypertexte "Wikipedia" à partir duquel on pourra atteindre le site http://wikipedia.fr.
➔ Rajouter le lien suivant dans votre élément aside :
<a href="https://eduscol.education.fr/cid144156/nsi-bac-2021.html" >Source Eduscol </a>
NSI WEB : TP1 HTML Licence Creative Commons 4 - Passieux page 2/4
➔ Tester ce lien. Pour afficher le lien dans un autre onglet, vous devez rajouter dans la balise <a> l'attribut
target="_BLANK". Modifier votre balise et tester.
LIEN VERS UN ENDROIT PRÉCIS DE LA PAGE EN COURS Un lien peut pointer vers un endroit précis de la page
en cours appelé une ancre. Un lien vers cette ancre permet alors d’aller directement à la partie qui nous intéresse.
Pour créer une ancre il suffit d’ajouter l’attribut identifiant id à la balise vers laquelle on veut pointer. L’identifiant sert à
donner un nom unique à cette balise, ce peut être n’importe quelle balise.
Pour faire un lien hypertexte vers une ancre, il faut indiquer le nom de son identifiant précédé de # dans la valeur de l'attribut
href de l’élément a
➔ Ajouter dans le titre h1 l'attribut suivant :
<h1 id="ancre1">
Ensuite l’hypertexte pointant vers ce lien est rajouté avec la valeur #ancre1 dans l’attribut href :
<a href="#ancre1">Revenir au début</a>
➔ Ajoutez ce lien dans l’élément footer de votre page.
➔ Enregistrer et tester le avec un navigateur (réduire la page pour tester)
LIEN VERS UNE AUTRE PAGE DU SITE
Pour faire un lien vers un autre fichier du site, donner directement le nom <!DOCTYPE html>
du fichier HTML dans la valeur de l’attribut href de l’élément a. <html>
<head>
<a href="page2.html">Page suivante</a> <meta charset="utf-8" />
<title> Programme </title>
Cela permettra d’obtenir un lien vers le fichier HTML page2.html. Le
</head>
chemin relatif est utilisé ici, cela ne fonctionne donc que si page2.html est <body>
dans le même répertoire que index.html. Sinon, vous devez indiquer dans <section>
href le chemin avec les sous-dossiers. <article>
<h1>Programme de NSI </h1>
➔ Créer le fichier html programme.html suivant le script ci-contre dans </article>
le même répertoire que index.html. </section>
</body>
➔ Faire un lien dans le menu (éléments nav ul li) de la page index.html <html>
vers la page programme.html.
<li> <a href="programme.html"> Programme </a> </li>
➔ Enregistrer et tester votre lien avec un navigateur.
Il est aussi possible de rajouter d’autres attributs à l’élément a. Par exemple, title permet de définir un texte qui sera ouvert
dans une infobulle lorsque le curseur survolera le lien
8 AJOUTER DES IMAGES
L’élément de type inline img est utilisé pour insérer une image dans un Une petite remarque
document HTML. L'adresse de l'image est précisée à la valeur de l'attribut Il se peut que la photo trouvée sur le
src ajouté à l'intérieur de la balise. web ait été commandée à un
<img src="images/image.jpg" /> photographe qui gagne sa vie de son art.
Comme sur un livre, un CD de musique, un
Ici une adresse relative est utilisée, pointant le fichier image.jpg dans le tableau, ... les personnes qui souhaitent
répertoire images du dossier en cours. diffuser cette photo doivent donc payer des
➔ Trouver une image libre de droits sur internet sur le thème de droits d'auteur à l'artiste.
l'informatique Les sommes ainsi payées lui permettent de
➔ Enregistrer l’image dans le dossier nommé images dans le vivre.
répertoire HTML. Le fait de s'approprier ainsi une image
➔ Dans le fichier index.html, insérer le lien dans un nouvel article. trouvée sur le web, de ne pas la payer,
➔ Enregistrer et vérifier que cela fonctionne. constitue un manque à gagner pour l'auteur
de la photo, une sorte de vol. Cela est, en
Il est possible de rendre une image cliquable en insérant un élément img principe, punissable par la loi.
à l’intérieur d’un élément a. Nous éviterons donc, sauf pour usage privé,
<a href="https://commons.wikimedia.org"> d'utiliser des images ou des textes qui sont
<img src="images/image.jpg" /> </a> soumis au droit d'auteur.
Le site wikipédia par exemple, propose des
De plus, l’attribut recommandé alt signifie « texte alternatif » et s’affiche images libres de droit
si l’image ne peut être chargée. (https://commons.wikimedia.org). Il est aussi
<img src="images/image.jpg" alt="image du cloud" /> possible de s’assurer que les images utilisées
soient libres de droit sur Google image en
NSI WEB : TP1 HTML Licence Creative Commons 4 - Passieux page 3/4
sélectionnant Outils >Droit
donne d’usage>Réutilisation autorisée
9 LES FIGURES
Les figures peuvent être utilisées avec des images <figure>
comme avec du texte. L’élément de type block figure est <figcaption>Des illustrations de l'informatique
utilisé. L’intérêt est de rajouter un élément figcaption à </figcaption>
l’intérieur de l’élément figure pour ajouter une légende. <img src="images/monimage1.jpg">
<img src="images/monimage2.jpg">
➔ Télécharger deux autres images et modifier votre <img src="images/monimage3.jpg">
dernier article comme l’élément figure ci-contre en </figure>
indiquant vos noms de fichiers.
10 LES TABLEAUX
Les tableaux se déclarent avec l’élément de type block table. <table>
Il contient : <caption>Calories de différents
- L’élément caption pour le titre du tableau ; aliments</caption>
<tr>
- Une cellule d’en-tête de colonne (attribut scope= "col") ou <th colspan="2">Produits</th>
d’en-tête de ligne (attribut scope="row") avec l’élément th ; <th>kcal/100g</th>
- Les autres lignes avec l’élément tr ; </tr>
- Chaque ligne contient l’élément td définissant une cellule ; <tr>
<td rowspan="2">Fruits</td>
Deux attributs peuvent être utilisés <td>Abricot</td>
pour l’élément td : <td>43</td>
</tr>
- colspan pour fusionner des <tr>
cellules en colonnes ; <td>Ananas</td>
- rowspan pour fusionner des <td>55</td>
cellules en lignes ; </tr>
Les tableaux sont utilisés pour <tr>
aligner des éléments en ligne et <td>Légumes</td>
colonne. <td>Artichaut</td>
<td>47</td>
➔ Créer une nouvelle page </tr>
volume.html, contenant le </table>
code HTML qui permettra
d'obtenir le tableau ci-contre :
Dans le fichier index.html, modifier l'élément de navigation correspondant pour faire un lien hypertexte vers ce nouveau
fichier.
11 INSERTION D’UN ÉLÉMENT AUDIO
L’élément audio est reconnu par tous les navigateurs récents. Il faut l’utiliser avec l’attribut src pour définir la source et
controls pour afficher les boutons « Lecture », « Pause » et la barre de défilement…
<audio src="musique.mp3" controls></audio>
La balise peut être complétée avec les attributs suivants :
● loop : la musique sera jouée en boucle.
● autoplay : la musique sera jouée dès le chargement de la page. Cette option est souvent bloquée par les navigateurs.
➔ A l’intérieur du dossier HTML, créer un dossier ressources et y glisser un fichier mp3.
➔ Ajouter une balise audio jouant le mp3 dans la balise <aside> du fichier index.html et testez-la avec un navigateur.
12 INSERTION D’UN ÉLÉMENT VIDÉO
L’élément video se comporte comme l’élément audio.
<video src="video.mp4" controls></video>
➔ Télécharger une vidéo mp4.
➔ Intégrer cette vidéo dans le fichier index.html, en dessous du titre h2 et testez-la avec un navigateur.
NSI WEB : TP1 HTML Licence Creative Commons 4 - Passieux page 4/4
