✔ Intro A (préparation du poste)° Réaliser les actions suivantes :
Ouvrir l'explorateur de fichiers et aller dans votre dossier personnel (Documents).
(Sur Windows uniquement) : dans le sous-menu AFFICHAGE de l'explorateur, vérifier que l'option permettant de voir les extensions des fichiers est bien sélectionnée. Sinon, activez l'option.
Créer dans votre dossier, un dossier que vous nommerez SNT puis créer dans ce dossier SNT, un nouveau dossier que vous nommerez web02.
Il vous faut un éditeur de texte (pas un traitement de texte) capable de rajouter de la coloration syntaxique.
Trouver Notepad++ ou VSCodium dans les programmes. Ouvrir le logiciel.
Si vous ne trouvez ni l'un, ni l'autre : demandez à l'enseignant.
Si cela ne donne toujours rien, télécharger Notepad++ ou VSCodium et lancer l'installation sur votre poste en plaçant le tout dans le répertoire Mes Documents dans un répertoire portant le nom du logiciel.
Si vraiment rien ne fonctionne, vous pourrez toujours commencer en allant sur un site comme w3school.
Important : si vous êtes sur une machine sous Windows, pensez à aller dans affichage et demander d'afficher les extensions de fichier si ce n'est pas fait.
1.1 Elément (type block) paragraphe p
p pour paragraphe
L'élément p est un élément en 3 parties qui permet de définir des paragraphes à l'intérieur de votre texte.
C'est un élément de type block : il provoque un passage à la ligne et sera réglable en largeur.
<p>Premier test sur la première ligne.</p>
Exemple d'utilisation
Exemple Code-source
1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html><html><head><title>AVEC BALISE P</title></head><body><p>Premier test sur la première ligne.</p><p>Et hop,</p><p>la troisième ligne.</p></body></html>
Résultat à l'affichage
Visuel créé par le navigateur après analyse du code HTML
✔ 01° Effectuer les actions suivantes pour réaliser votre première page Web :
Ouvrir votre éditeur de texte (attention, pas de traitement de texte !). Par exemle Notepad++ ou VSCodium.
Réaliser un copier-coller du code-source suivant dans l'éditeur.
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html><html><head><metacharset="utf-8"/><title>TP web</title></head><body><p>Premier test sur la première ligne.</p><p>Et hop,</p><p>la troisième ligne.</p></body></html>
Si les balises ne sont pas en couleur :
chercher l'onglet Langage/Language dans votre logiciel et sélectionner H puis HTML pour indiquer que notre code est un code HTML.
Si UTF-8 n'est pas indiqué en bas à droite de la fenêtre du logiciel
chercher l'onglet Encodage/Encoding et sélectionner Convertir en UTF-8. Sinon, rien à faire.
✔ 02° Réaliser les actions suivantes (en demandant de l'aide si vous ne savez pas le faire) :
En utilisant Enregistrer Sous ou Save As, enregistrer ce fichier texte sous le nom page1.html dans web02.
N'oubliez pas l'extension .html.
De la même façon, notez bien .html, pas .hml, .hmlt ou je ne sais quoi d'autre.
Aller dans votre répertoire de travail pour observer le contenu de votre répertoire web02.
Si vous ne voyez rien, ce que vous avez raté quelque chose.
✔ 03° Double-cliquer sur le fichier page1.html : vous allez envoyer les données (du HTML) au navigateur défini par défaut pour qu'il l'interprète et vous montre le résultat.
Et voilà, vous avez créé votre première page "personnelle".
✔ 04° Fermer l'éditeur de code comme si c'était la fin de l'heure.
Comment faire pour modifier le code maintenant ?
C'est facile : allez dans l'explorateur pour trouver le fichier, sélectionnez le avec un simple clic-gauche puis faites un clic-droit et choisir "Editer avec Notepad++" et prendre votre éditeur de texte.
Si rien n'apparaît : il faut alors ouvrir Notepad++ et aller dans le menu Fichier et utiliser Ouvrir pour sélectionner votre fichier.
Normalement, vous devez avoir à nouveau le code HTML sous les yeux.
Si ce n'est pas le cas, pensez à me demander de l'aide.
Vous savez maintenant comment fonctionne HTML et comment éditer du code avec un éditeur de texte. Vous allez donc pouvoir commencer à créer votre propre page.
2.1 Elément (type block) titre h1 à h6
h pour header (en-tête)
L'élément h1 est un élément en 3 parties qui permet de définir un titre de niveau 1.
C'est un élément de type block : il provoque un passage à la ligne et sera réglable en largeur.
Il existe 6 types de titre, allant de h1 à h6.
<h1>I - Le HTML</h1>
Le h signifie header, en-tête en anglais.
Exemple
Visuel créé par le navigateur après analyse du code HTML
Code HTML
Voici le lien vers la page dont le code est fourni ci-dessous :
VOIR LA PAGE
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html><html><head><title>LES TITRES</title><metacharset="utf-8"/></head><body><h1>Titre de niveau 1</h1><h2>Titre de niveau 2</h2><h3>Titre de niveau 3</h3><h4>Titre de niveau 4</h4><h5>Titre de niveau 5</h5><h6>Titre de niveau 6</h6><p>Un simple paragraphe ici.</p></body></html>
⚙ 05° Réaliser une page Web correctement articulée et nommée chanson.html ou serie.html ou film.html dans laquelle on trouvera :
Un élément html contenant un élément head et un élément Un élément body;
Un élément h1 contenant le titre de la chanson/série/film ;
Au moins deux éléments p résumant de quoi parle la chanson/série/film.
Un élément p expliquant le style de cette oeuvre.
Exemple de ce que cela pourrait rendre.
Titre de la chanson (à remplacer) :
Cette chanson parle de ...
Cette chanson est issue du style musical ...
Continuons en rajoutant des listes ordonnées ou non ordonnées.
2.2 Elément (type liste) ordonnée ol
ol pour ordered list
L'élément ol est un élément en 3 parties qui permet de contenir des éléments li. Le tout sera interprété comme une liste numéroté.
C'est un élément de type block : il provoque un passage à la ligne et sera réglable en largeur.
La structure est donc semblable à cela :
1
2
3
4
5
<ol><li>...</li><li>...</li><li>...</li></ol>
Exemple avec affichage et code correspondant
Visuel créé par le navigateur après analyse du code HTML
<!DOCTYPE html><html><head><metacharset="utf-8"/></head><body><h1>Exemple de liste ordonnée</h1><p>Les 4 piliers de l'informatique :</p><ol><li>Données</li><li>Algorithmique</li><li>Langage</li><li>Machine</li></ol></body></html>
⚙ 06-A° Sous les paragraphes précédents, rajouter dans votre code-source une liste ordonnée contenant les adresses(URL) de trois pages Web qui parlent de votre thème.
Il faudra donc passer par un moteur de recherche type Qwant, DuckDuckGo, Google, faire la rechercher et copier les adresses visibles dans la barre d'adresses et les coller chacun dans l'un des éléments li de votre code-source.
Il faudra donc afficher quelque chose qui ressemble à ceci (en remplaçant les URL par de vraies URLs...) :
3 sites parlant de cette chanson :
URL1
URL2
URL3
Attention : ne créez pas de liens pour le moment (même si vous savez les faire), juste les urls.
⚙ 06-B° Faire interpréter votre fichier par le navigateur pour voir le résultat.
Vous devez constatez qu'on obtient bien uniquement un affichage des adresses/URLs et pas de vrais liens.
2.3 Elément (type inline)a pour créer des liens
a comme anchor (ancre)
L'élément a est un élément en 3 parties qui permet de définir un clic sur lequel on pourra cliquer pour se rendre sur une autre page par exemple.
C'est un élément de type inline : il ne provoque pas de passage à la ligne et on peut donc placer plusieurs liens dans le même paragraphe par exemple.
1
<ahref="https://py-rates.org/">Un jeu</a>
L'élément a est plus délicat à utiliser que les autres éléments car on répartit les informations à lui transmettre à deux endroits :
On transmet l'URL de destination dans la balise d'ouverture, via un attribut nommé href
1
<ahref="https://py-rates.org/">un jeu</a>
Le texte ou l'image à cliquer est à placer en tant que contenu interne, entre les deux balises.
1
<ahref="https://py-rates.org/">Un jeu</a>
On pense à fermer la zone du lien, sinon tout ce qui suit sera cliquable.
1
<ahref="https://py-rates.org/">Un jeu</a>
ERREUR TYPIQUE 1 : n'oubliez pas de signaler la fin de votre balise d'ouverture en plaçant le chevron > après avoir écrit votre adresse.
ERREUR TYPIQUE 2 : n'oubliez pas de placer votre adresse dans un string ("https://py-rates.org/").
Exemple
1
<ahref="https://py-rates.org/">Un jeu</a>
Le résultat du code ci-dessus donne ceci :
Un jeu
; vous noterez qu'il est bien inline puisqu'il ne provoque pas de passage à la ligne.
⚙ 06-C° Modifier votre code-source pour réaliser réellement trois liens cliquables. Lancer votre code-source pour vérifier que votre page contient bien 3 liens maintenant.
Continuons avec les listes non ordonnées.
2.4 Balise liste non ordonnée ul ("block")
ul pour unordered list
L'élément ol est un élément en 3 parties qui permet de contenir des éléments li. Le tout sera interprété comme une liste à puces.
C'est un élément de type block : il provoque un passage à la ligne et sera réglable en largeur.
La structure est donc semblable à cela :
1
2
3
4
5
<ul><li>...</li><li>...</li><li>...</li></ul>
Exemple avec affichage et code correspondant
Visuel créé par le navigateur après analyse du code HTML
<!DOCTYPE html><html><head><metacharset="utf-8"/></head><body><h1>Exemple de liste NON ordonnée</h1><p>Les 4 piliers de l'informatique :</p><ul><li>Données</li><li>Algorithmique</li><li>Langage</li><li>Machine</li></ul></body></html>
⚙ 07° Sous les paragraphes précédents, rajouter dans chanson.html une liste non ordonnée contenant les informations suivantes :
Interprète ou groupe.
Date de sortie
Durée
Il nous reste à voir comment insérer les images correctement.
2.5 Elément (inline-block)img
Balise orpheline img
La balise orphelineimg> permet d'insérer une image dont on connaît l'adresse.
<imgsrc="url de l'image">
Il s'agit d'un élément inline-block : on peut régler sa largeur (comme un block) mais il ne provoque pas de passage à la ligne automatique (comme un inline).
Comme pour les liens, pensez à transmettre l'adresse sous forme de string.
Trouver l'URL d'une image
Pour trouver l'URL d'une image, il faut :
cliquer jusqu'à atteindre l'image directement sur un site : il ne faut pas rester sur la page du moteur de recherche !
faire un clic-droit dessus
utiliser ouvrir l'image dans un nouvel onglet et
copier son URL réelle qui se trouvera alors dans la barre des adresses.
Exemple d'application : trouver l'URL de cette image :
Si vous trouvez pas https://doc.infoforall.fr/commun/images/accueil_blender_150.png, pensez à me demander de l'aide.
Choisir une largeur précise
On peut choisir la largeur de l'image à l'affichage à l'aide de l'attribut width (largeur en anglais).
Notez qu'on transmet le string "100", pas juste 100 : l'image aura à l'écran une largeur de 100 pixels.
On obtient alors
Si on veut 50 pixels, il suffit de le préciser. On peut même mettre deux images de cette largeur à la suite l'une de l'autre, étant inline-block, elles seront sur la même ligne :
⚙ 08° Illustrer votre page en rajoutant au moins trois images. Régler leurs largeurs pour qu'elles s'adaptent bien à votre page.
Si vous désirez qu'une image de petite taille soit seule sur sa ligne, il suffit de la place dans un paragraphe p.
Remarque : si vous voulez centrer l'image, c'est la question suivante...
⚙ 09° Le prochain TP traitera du CSS qui va permettre de gérer les couleurs et la position des éléments.
En attendant, testez ceci en plaçant votre image dans un paragraphe dont la balise d'ouverture est celle-ci :
1
<pstyle="text-align:center;"><img...></p>
L'explication viendra dans la prochaine activité.
⚙ 10° Zipper votre fichier HTML. Envoyer le fichier zippé via l'ENT à votre enseignant.
Je n'en parle pas dans l'activité, mais vous avez certainement constaté une différence de taille entre HTML et Python : si votre code HTML est incorrect, l'interpréteur HTML affiche quand même quelque chose.
Python est un langage de programmation : on donne des ordres que la machine doit exécuter. Si une demande est mal formulée, il est donc possible que l'exécuter soit désastreux et dangereux. Donc, autant stopper.
HTML est un langage de description : si la description est mal formulée, il n'y a aucun risque et donc on préfère que l'utilisateur voit quelque chose, même si c'est en partie mal affiché.
⚙ 11° A ce stade de l'activité, vous avez normalement compris qu'il n'y a pas nécessairement de lien entre le texte affiché pour faire office de lien et la destination où nous amène le lien.
Alors comment peut-on vérifier la validité d'un lien ?
Le survoler à la souris est déjà un bon réflexe : en bas à gauche de la plupart des navigateurs la destination du lien apparaît. Le lien pourrait encore être changé à la volée une fois le clic effectué mais la plupart du temps, les arnaqueurs ne s'embêtent pas à être aussi sournois.
Ici, on peut voir que quelqu'un a détourné le lien wikiedia sur l'informatique pour qu'il amène à l'article sur les chats.
Question : quel est le vrai lien qui mène à l'excellent site norvégien w3schools.com ?
Passez la souris au dessus du premier lien permet de voir qu'il mène vers un article sur le Phishing (le hameçonnage en français). Le fait de tromper un internaute en lui faisant croire qu'il est sur un site alors qu'il n'est que sur une copie presque parfaite de ce site.
Attention, cette technique de vérification n'est pas infalsifiable. Falsifier l'adresse de destination est extrêmement facile...
⚙ 12° Quel est le vrai lien qui mène à l'excellent site norvégien w3schools.com ?
Et oui, perdu. Les deux ont l'air de mené au bon site mais seul le second est le vrai lien.
Vous pouvez sélectionner le code pour l'inspecter. Là, c'est assez facile : la fonction qui modifie le lien uniquement après le clic est située juste en dessous.
