TP 6 : Introduction à HTML

Préambule
Nous allons apprendre à faire des pages Web grâce au langage HTML.

A) Pour commencer, créer un dossier où enregistrer votre travail

1) Exécuter un ​Explorateur de fichiers​ à l’aide du menu ​Démarrer ​de
Windows.
2) Dans le dossier ​Documents​, créer un nouveau dossier ​TPWeb​.

B) Ensuite, nous utilisons l’éditeur de code ​NotePad++

1) Lancer ​NotePad++​ à l’aide du menu ​Démarrer​ de Windows.
2) Dans NotePad++, cliquer sur le menu ​Fichier ​puis la commande ​Nouveau​.
3) Ecrire alors le texte suivant :

Bonjour !

4) Enregistrer ce texte : menu ​Fichier​ puis commande ​Enregistrer sous...

5) Dans le dossier ​TPWeb​, enregistrer votre fichier sous le nom ​TP6.html

C) Retourner à l’Explorateur de fichier

1) Faire un ​clic droit​ sur le fichier ​TP6.html​ puis choisir ​Ouvrir avec FireFox
2) Vérifier que ​FireFox​ affiche bien Bonjour !

Pour résumer, nous avons besoin de 3 logiciels pour travailler :

- L’​Explorateur de fichiers​ pour visualiser notre dossier de travail ​TPWeb
- NotePad++​ pour écrire le code ​HTML
- FireFox ​pour visualiser nos pages ​Web
Exercice 1 - Modification du code HTML
Dans ​NotePad++​, modifier le texte :

Bonjour à tous !

- Enregistrer cette modification à l’aide du menu ​Fichier ​puis de la commande

Enregistrer​.
- Vérifier que ce nouveau texte est bien affiché dans ​FireFox​.
- Si ce n’est pas le cas, il faut ​actualiser​ la page (bouton ​Actualiser​ ou touche ​F5​)

Exercice 2 - Première balise

En ​HTML​, il est possible d’entourer un ou plusieurs mots avec des ​balises​.
Ces balises mettent en forme les mots.

Il y a généralement :
- une balise de début,
- suivie de mots à mettre en forme,
- et enfin une balise de fin.

Dans ​NotePad++​, nous allons ajouter une balise pour mettre ​Bonjour ​en gras (​bold en
anglais). Pour cela taper le code suivant :

<b>Bonjour</b> à tous !

Vérifier dans FireFox que le mot ​Bonjour​ est bien mis en gras, et seulement ce mot.

!!! N’oubliez pas d’actualiser la page !!!

Exercice 3 - Autres balises
Il existe de très nombreuses balises !
Tester celles ci-dessous, en les plaçant autour du mot ​Bonjour​, pour voir leurs effets.

!!! Il faut bien penser à fermer ces balises (ex. <i>Bonjour</i>) !!!

● <b>​ - Bold (Gras)

● <strong>​ - Important
● <i>​ - Italic (Italique)
● <em>​ - Emphasized (Italique)
● <mark>​ - Marked (Surligné)
● <small>​ - Small (Petit)
● <del>​ - Deleted (Barré)
● <ins>​ - Inserted (Text inséré - s’affiche aussi en souligné)
● <sub>​ - Subscript (Écrit sous la ligne)
● <sup>​ - Superscript (Écrit au dessus de la ligne)

Exercice 4 - Paragraphes
Lorsqu’on souhaite regrouper des phrases dans un même paragraphe, nous utilisons la
balise <p>​.
Bien noter ​qu’un saut de ligne (touche ​entrée​) dans ​NotePad++ ne fera ​JAMAIS ​de retours
à la ligne dans le ​navigateur Web ​! Pour cela il faut mettre des paragraphes ​<p> ou forcer
le retour à la ligne par la balise ​<br>​.

Ecrire le code ​HTML ​suivant et vérifier que les deux paragraphes sont bien séparés
visuellement ​par un espace vertical.

<b>​Bonjour​</b>​ à tous !
<p>​Ceci est mon premier paragraphe. Il n’est pas très long​</p>
<p>​Voici maintenant le deuxième paragraphe.
Noter le retour à la ligne ​qui n'apparaît pas​ dans FireFox​</p>

Modifier le code ​HTML ​en ajoutant la balise ​<br>​. Observer alors la différence.

<b>Bonjour</b> à tous !
<p>Ceci est mon premier paragraphe. Il n’est pas très long</p>
<p>Voici maintenant le deuxième paragraphe.​<br>
Noter le retour à la ligne ​qui apparaît​ dans FireFox</p>
Exercice 5 - Titres
Certaines balises permettent de structurer votre document ​HTML​. Par exemple,
les balises ​<h_>​ permettent d’indiquer des titres (​h​eading en anglais):

● <h1>​ - Heading level 1 (Titre niveau 1)

● <h2>​ - Heading level 2 (etc)
● etc jusqu’à ​<h6>

Ecrire le code HTML pour avoir le document suivant :

Exercice 6 - Liens
Il est possible de naviguer entre pages à l’aide de liens Web (appelés aussi hyperliens ou
liens hypertexte).

Ajouter le code HTML suivant pour ouvrir une page Wikipédia :

<a href="​https://www.wikipedia.org​">​Lien vers Wikipédia​</a>

Exercice 7 - Images
A) Des images peuvent également être ajoutées.

Choisir une ​image ​sur ​Wikipédia​, puis ​l’enregistrer ​dans votre dossier ​TPWeb ​sous le nom
i​mage1.png

Ajouter le code suivant à votre code HTML puis vérifier son affichage :

<img src="​image1.png​">
 B) Pour centrer l’image, il est possible d’utiliser la balise <center>. Modifier votre code
ainsi et voir le changement :

<center><img src="​image1.png​"></center>

C) Une image peut aussi provenir directement d’internet. Modifier votre code pour
afficher une image de votre choix trouvée sur internet :

D) Il est possible de fixer la taille d’une image. Modifier votre code précédent pour que
l’image est pour largeur (width) 100 pixels :

E) Modifier votre code précédent pour que l’image est pour largeur 20% de la largeur de
la page web. Modifier la taille de la page de votre navigateur pour observer que
l’image change de taille également :

Exercice 8 - Liens et images

Il est possible d’ajouter un lien Web dans une image.

Rechercher sur le Web le code à ajouter pour que l’image de l’exercice 7 pointe vers
Wikipédia :

Exercice 9 - Consolidation
Dans ​NotePad++​, ​créer ​un n
​ ouveau fichier ​nommé ​tp6-ex8.html

Taper le code ​HTML ​correspondant à la page ​Web ​ci-dessous (l’image pourra être
sauvegardée en local - dans votre dossier de travail, ou bien être directement référencée sur
le Web) :
Exercice 9 - Poursuivre le TP 5 Visual Basic
Dans le cas où il vous resterait du temps, merci de poursuivre le ​TP 5​ de programmation
Visual Basic.