SNT
Module : Le Web (partie 1)
Introduction : Dans l’histoire de la communication, le Web est une révolution : il a ouvert à
tous la possibilité et le droit de publier et ce au travers de page Web. Cela permet aussi de
diffuser toutes sortes d’informations dont ni la qualité, ni la pertinence, ni la véracité ne sont
pas toujours garanties et dont la vérification des sources n’est pas toujours facile. Nous allons
nous intéresser ici à la structure et la construction de page web, élément fondamental du
développement du web, le couple HTML+CSS (Hyper Text Markup Langage et Cascading
Style Sheets).
L’HTML : L’Hypertext Markup Language, généralement abrégé HTML, est le format de
données conçu pour représenter les pages web. C’est un langage de balisage permettant
d’écrire de l’hypertexte, d’où son nom. HTML permet également de structurer
sémantiquement et de mettre en forme le contenu des pages, d’inclure des ressources
multimédias dont des images, des formulaires de saisie, et des programmes informatiques.
Grâce au HTML vous allez pouvoir, dans votre navigateur afficher du texte, afficher des
images, proposer des hyperliens (liens vers d'autres pages web), afficher des formulaires et
même maintenant afficher des vidéos. L’HTML n'est pas un langage de programmation
(comme le Python par exemple), c'est un langage de description. Il est essentiellement basé
sur la notion de balises qui permettent de déclarer et structurer les données de la page. Une
balise est un ensemble de caractères qui commence par < et fini par >. Les balises vont par
paire (la balise d'ouverture et la balise de fermeture) et agissent sur les caractères qu'elles
encadrent. Voici un exemple de structuration d’une page HTML :
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
</head>
<body>
</body>
</html>
La balise <!DOCTYPE html> : Elle permet de déclarer que la page est bien une page au
format HTML5.
La balise <head> : Elle permet de déclarer l’entête de la page c’est-à-dire les informations
utiles pour que l’ensemble de la page puisse être comprise par le navigateur. Au minimum, on
indiquera la nature des caratères utilisés dans la page, ici UTF-8. L’UTF-8 (abréviation de
l’anglais Universal Character Set Transformation Format - 8 bits) est un codage de caractères
informatiques conçu pour coder l’ensemble des caractères du « répertoire universel de
caractères codés », totalement compatible avec le standard Unicode, en restant compatible
avec la norme ASCII limitée à l’anglais de base, mais très largement répandue depuis des
décennies. L’UTF-8 est utilisé par 82,2 % des sites web en décembre 2014, 87,6 % en 2016,
90,5 % en 2017 et près de 93,1% en février 2019. Par sa nature, UTF-8 est d’un usage de plus
en plus courant sur Internet, et dans les systèmes devant échanger de l'information. Il s’agit
également du codage le plus utilisé dans les systèmes GNU, Linux et compatibles pour gérer
LFI Pékin 2020-2021
SNT
Module : Le Web (partie 1)
le plus simplement possible des textes et leurs traductions dans tous les systèmes d’écritures
et tous les alphabets du monde.
La balise <body> : Elle permet de déclarer le contenu réel et visible par l’utilisation de la
page HTML.
Comme déjà évoqué ci-dessus, en HTML tout est une histoire de balise que l'on ouvre et que
l'on ferme. Une balise ouvrante est de la forme <nom de la balise>, les balises fermantes sont
de la forme </nom de la balise>. Par ailleurs, toute balise ouverte doit être refermée à un
moment ou un autre. Enfin pour terminer avec les généralités sur les balises, il est important
de savoir qu'une structure du type :
Exemple 1 : Exemple 2 : Exemple 3 :
<balise1> <balise1> <balise1>
<balise2> </balise1> <balise2>
</balise1> <balise2> </balise2>
</balise2> </balise2> </balise1>
INTERDIT ! car la balise 2 a OK ! car la balise 1 est bien OK ! car la balise 2 est bien
été ouverte après la balise1, elle fermée avant la balise 2. ouverte et fermé avant la
devra donc être refermée avant fermeture de la balise 1.
la balise 1.
1) Création d’une page web (avec l'éditeur Notepad++ mais il en existe d'autres)
Codage de ta 1ère page :
1 Ouvre Notepad++
Entre l’ensemble des
informations qui vont
2 te permettre de
déclarer ta page et de
donner un titre.
Enregistre ton
3 document sous
l’extension « .html »
LFI Pékin 2020-2021
SNT
Module : Le Web (partie 1)
Exécute ta page dans
le navigateur de ton
choix pour voir le
résultat (entre chaque
4 modification pense à
enregistrer avant
d’exécuter dans le
navigateur).
2) Ajouter du contenu à une page web (quelques balises incontournables)
Création d’un paragraphe de texte : On débute un paragraphe (ou bien une ligne) par déclarer
la balise <p>…</p>. Cette balise permet de déclarer un paragraphe. A partir de ce moment,
on peut remplir la page avec le contenu que l’on désire.
Insertion d’une image : Il est parfois utile d’insérer des images pour illustrer un texte. Ces
images peuvent être déjà stoker sur votre ordinateur ou bien venir directement d’internet. Il va
donc falloir indiquer au navigateur qui va lire votre page Web où se trouve l’image :
Si l’image est stockée sur votre disque dur :
<img src=………. . alt="…" height="..." width="…">
Exemple : <img src=image/[Link] alt="pomme" height="10px" width="10px">
déclare à quoi déclare sa déclare sa
nom de extension
Balise image correspond hauteur (en largeur (en
l’image (exple : .jpeg)
l’image pixels) pixels)
Si l’image provient d’Internet :
<img src="……….." alt="…" height="..." width="…">
Exemple : <img src="[Link]
1702316/" alt="pomme" height="10px" width="10px">
déclare à quoi déclare sa déclare sa
Balise image url de l’image ([Link] correspond hauteur (en largeur (en
l’image pixels) pixels)
Insertion d’un lien hypertexte : La balise <a> … </a> permet de créer des liens hypertextes.
Ce sont ces liens hypertextes qui vous permettent de "voyager" entre les pages d'un site ou
entre les sites. Les liens hypertextes sont par défaut soulignés et de couleur bleue (modifiable
grâce au CSS). La balise a possède un attribut href qui a pour valeur le chemin du fichier que
l'on cherche à atteindre ou l'adresse du site cible.
<a href="………….">…………………..</a>
Exemple : <a href="[Link] de Google France</a>
déclare le nom
Balise lien url de l’image ([Link] ou adresse locale ([Link])
du lien
LFI Pékin 2020-2021
SNT
Module : Le Web (partie 1)
Insertion d’un tableau : Selon les informations à écrire, il peut être utile de les ranger dans un
tableau. Pour cela il va falloir déclarer plusieurs balises :
Définition du tableau <TABLE></TABLE> Début et fin de tableau
Définition d'une ligne <TR></TR> Début et fin de ligne
Définition d'une cellule <TD></TD> Début et fin de cellule
Exemple :
Code html : Ce que l’on voit sur la page Web :
<TABLE>
<TR><TD>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>
Bien sur chaque cellule de votre tableau peut contenir du texte, des images, des liens, des
arrières plans et même des tableaux. Par ailleurs on peut aussi complexifier notre tableau en
choisissant une mise en forme spécifique comme la fusion de cellules, de lignes, ou de
colonnes. On peut même définir la taille de chacune des cellules :
<TD width=?> en pixels
Largeur d'une cellule
<TD width=%> en pourcentage
Fusion de lignes <TD rowspan=?>
Fusion de colonnes <TD colspan=?>
Création d’une liste : Selon les informations à écrire, il peut être utile de les ranger dans une
liste. Pour cela il va falloir déclarer plusieurs balises :
Pour une liste ordonnée :<OL>…</OL> puis <LI>…</LI> pour chaque élément
Pour une liste non ordonnée : <UL>…</UL> puis <LI>…</LI> pour chaque élément
Code html : Ce que l’on voit sur la page Web :
<p>Les mois du printemps</p>
<UL>
<LI>avril</LI>
<LI>mai</LI>
</UL>
<p>Les mois de l'automne</p>
<OL>
<LI>octobre</LI>
<LI>novembre</LI>
</OL>
Le CSS : Les feuilles de style en cascade, généralement appelées CSS de l'anglais Cascading
Style Sheets, forment un langage informatique qui décrit la présentation des documents
HTML et XML. Les standards définissant CSS sont publiés par le World Wide Web
Consortium (W3C). Introduit au milieu des années 1990, CSS devient couramment utilisé
dans la conception de sites web et bien pris en charge par les navigateurs web dans les années
2000. Aujourd’hui l’ensemble des sites Web intègrent le CSS3 :
LFI Pékin 2020-2021
SNT
Module : Le Web (partie 1)
Ce langage permet de pouvoir structurer une page Web en bloc positionnable n’importe où
sur la page avec des attributs propres tels que l’arrière-plan, les couleurs, les bordures, etc.
Bref c’est le décor de votre page Web.
!!! Attention !!! : On peut ajouter du « décor » à une page web en langage HTML par l’ajout
de balises spécifiques. Néanmoins cette méthode alourdie la structure de la page HTML,
utilise des balises qui deviennent petit à petit obsolètes, ne permet qu’un nombre plus limité
d’action, et d’une manière générale ce n’est pas une pratique à mettre en œuvre.
Exemple de balise HTML pour donner du « style » : ([Link]
<H1>…</H1>
Taille d’un titre Il existe les balises H1 à H6 selon l’importance que l’on veut
donner au titre.
Gras <B>...</B> ou bien <STRONG> ... </STRONG>
Italique <I>...</I> ou bien <EM> ... </EM>
Souligner <U>…</U>
Taille de caractère <FONT SIZE=?> ... </FONT>
Couleur de caractère <FONT COLOR="#..."> ... </FONT>
Centrage <CENTER> ... </CENTER>
A la ligne <BR>
!!!! Donc la bonne pratique est de mettre en place une feuille de style !!!!
Déclarer une feuille de style : On peut le faire de 2 façons différentes :
Soit dans la page HTML. Cela s’avère pratique lorsque l’on a qu’une seule page
HTML puisque l’ensemble des informations sont au même endroit. Dans ce cas, il faut
déclarer le style dans les balises <style> du <head> de la page HTML :
LFI Pékin 2020-2021
SNT
Module : Le Web (partie 1)
(Méthode recommandée) Soit dans une feuille annexe qu’il faudra relier à la page
HTML pour que le navigateur puisse attribuer l’ensemble du décor à la page HTML.
Cette méthode est à privilégier à partir du moment où l’on a plusieurs pages
auxquelles on veut attribuer le même design. Cela évite de le recopier sur chaque page.
Pour cela, il faut ouvrir un nouveau document texte (format .TXT) puis relier ce
document à la page HTML :
a) Ouvrir un document texte :
b) Inscrire les balises <html>…</html> :
c) L’enregistrer avec un nom clair (ici « [Link] ») et placer ce fichier au même
endroit que la page HTML.
d) Relier ce document avec la page HTML avec Notepad++ avec la balise <LINK> :
LFI Pékin 2020-2021
SNT
Module : Le Web (partie 1)
Quel que soit la solution choisie, les déclarations de style sont soumises à des règles d’écriture
spécifiques. En effet, il faut pouvoir dire au navigateur précisément quel style appliqué à
chaque élément HTML. On va pour cela utiliser des tags. Les tags sont en réalité des ancre
c’est-à-dire des références entre le code HTML et le CSS. Il en existe deux grands types :
CLASS
ID
Dans la page HTML
<p>
On déclare une balise spécifique comme par exemple un
blablablabla
paragraphe et le contenu qui va avec.
</p>
<p ID=”paragraphe”>
On référence ensuite la balise avec l’attribut ID ou CLASS. blablablabla
La différence est qu’ID référence un élément unique alors </p>
que CLASS permet d’attribuer le même style à plusieurs
éléments. Dans l’exemple, si tous les balises sont tagger ou
avec CLASS alors elles auront le même style mais si je veux
qu’une balise ait un style différent des autres alors il faudra <p CLASS=”paragraphe”>
le tagger avec ID. blablablabla
</p>
Dans la feuille de style
Avec le tag ID #paragraphe {…… ;}
Avec le tag CLASS . paragraphe {….. ;}
Il suffit ensuite d’indiquer entre les { } les caractéristiques des chaque balise :
Arrière-plan (insérer une image, couleur, …)
Bordure (apparence, couleur, taille, …)
Taille (des blocs, des caractères, …)
Marges
Ajout de vidéo ou de lecteur audio
LFI Pékin 2020-2021
SNT
Module : Le Web (partie 1)
[Link]
[Link]
[Link]
[Link]
Structuration de la page HTML : Grâce à la feuille de style, vous allez pourvoir organiser
votre page en blocs que vous paramétrez comme vous le voudrez. Voici deux exemples
possibles d’organisation :
Prenons le 1er cas. Il y a 4 blocs donc il va falloir les déclarer dans la page HTML puis
attribuer des caractéristiques à chacun des blocs dans la feuille de style.
Dans la page HTML
On déclare les blocs avec la balise <DIV>…</DIV>. <div header>
La balise <div> est un bloc, donc un objet rectangulaire qui </div>
ne peut être réparti sur plusieurs lignes. Elle possède les <div nav>
attributs margin, padding, width, height. Elle est précédée et
</div>
suivie d'un saut de ligne. <div main>
</div>
A ce stade, le navigateur comprend qu’il y a 4 blocs empilés <div footer>
mais ne sait pas quels styles leur attribuer. </div>
Nb : Si l’on veut appliquer le 2ème model, on indiquera dans le CSS que le <nav> et le <main>
doivent être l’un à côté de l’autre en utilisant la caractéristique {float ;} en utilisant les tags
ID ou CLASS.
Néanmoins, pour le 2ème modèle, on privilégiera une des évolutions du CSS3 : CSS GRID qui
permettent de placer les blocs (<DIV>) plus facilement. Ce sera plus modulable en particulier
dans le cas des pages web dites responsives c’est-à-dire adaptables à toutes les tailles d’écran.
Il existe plusieurs façons d'appliquer un CSS GRID. Voici une proposition d'utilisation :
LFI Pékin 2020-2021
SNT
Module : Le Web (partie 1)
On veut appliquer le modèle ci-contre. Pour
cela on va devoir d'abord créer une grille
virtuelle qui va nous permettre ensuite de
placer et d'organiser nos blocs :
Définition de la grille dans le CSS
body{display:grid; Declaration de la grille
grid-template-columns: 1fr 1fr 1fr 1fr; 4 colonnes de taille identique
grid-template-rows: 50px 50px 50px 50px; 4 lignes de taille identique
grid-gap: 1%; 1 espace de 1 entre chaque case
grid-template-areas: (optionnel)
"header header header header"
"nav main main main"
"nav main main main" Remplissage de la grille
"nav main main main"
"footer footer footer footer";}
Permet de relier le div à une position
#header{ grid-area : header ; display : grid ; …….;} dans la grille. Il suffit ensuite de
#nav{ grid-area: nav ; display :grid ; …….;} compléter le CSS de chaque DIV pour
#main{ grid-area : main ; display : grid ; …….;} afficher les caractéristiques propres à
#footer{ grid-area : footer ; display : grid ; …….;} chacun.
LFI Pékin 2020-2021