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 [Link]
C) Retourner à l’Explorateur de fichier
1) Faire un clic droit sur le fichier [Link] 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 (heading 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="[Link] 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[Link]
Ajouter le code suivant à votre code HTML puis vérifier son affichage :
<img src="[Link]">
B) Pour centrer l’image, il est possible d’utiliser la balise <center>. Modifier votre code
ainsi et voir le changement :
<center><img src="[Link]"></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é [Link]
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.
