Ch2 S3 - Langages D'une Page WEB - Le HTML

• Ch2 S3 -Langages d’une page Web – Le HTML
•
•
Constituer une page Web (1ère partie)

Vidéo : http://www.lossendiere.com/wp-content/uploads/2017/03/2-les-langages-du-web-1.mp4
➢ Comprendre la structure d'une page Web.

Activité : Expliquer à une personne comment
programmer en interne une page Web en donnant des
instructions claires pour que le dessin corresponde.
…………………………………………………………………………………………
…………………………………………………………………………………………
…………………………………………………………………………………………
…………………………………………………………………………………………
…………………………………………………………………………………………
…………………………………………………………………………………………
…………………………………………………………………………………………
…………………………………………………………………………………………
…………………………………………………………………………………………
…………………………………………………………………………………………
…………………………………………………………………………………………
Bien entendu, cette configuration n’est que le squelette d’une page Web, ce squelette va évoluer
ensuite suivant différents modèles de page Web (ou templates) en HTML mais aussi leurs décorations
en CSS1. En voici quelques exemples :
1
Sources : http://www.lossendiere.com/
Sciences Numérique et Technologie – Page : 1

Cours basé sur celui de Mr Pablo Sanchez Nom : ………………………………………………. S…
•
•
Par exemple dans l’exemple 3 ci contre il n’y a pas de partie
ASIDE ou SECTION et il y a un seul article.
Le code HTML sera donc très simple
<html>
<head> …….. <head>
<body>
<header> ………… </header>
<nav> ……. </nav>
<articles > ….. </articles>
<footer> ….. </footer>
Les langages HTML et CSS sont des langages informatiques de description.
Ils permettent de décrire la structure et l’apparence d’un document numérique destiné a être transmis
par le web et affiché dans un programme appelé
navigateur internet. (Mozilla firefox, Google Chrome,
Internet Explorer, Safari … )
Le langage HTML décrit seulement la structure du

document.
Le langage CSS décrit la présentation/décoration des

éléments de la structure.
L’ensemble des présentations des éléments forme un style.
➢ L’HTML
Source : https://www.lossendiere.com/2017/10/17/le-langage-html-la-structure-et-le-
contenu-dune-page-web/
A) PRINCIPE DE DESCRIPTION DE LA STRUCTURE ( LANGAGE HTML )
Tous les éléments de contenu d’une page HTML sont encadrés par une balise
ouvrante et une balise fermante.
Ces balises vont délimiter entre quelle zone et quelle zone, il y a par exemple
– un paragraphe <p> …………….. </p>
– un titre <h1> …………………… </h1>
– une partie soulignée <u> …………. </u>
B) LA STRUCTURE GÉNÉRALE D’UNE PAGE HTML

<!DOCTYPE html>
<html>
<head>
<title>Titre de la page web</title>
</head>
<body>
<p>
Premier paragraphe
</p>
</body>
</html>

•
•
Pour que le navigateur sache que le codage est du type HTML et qu’il doit traduire ce langage il y a :
• <html> ….. </html> ——- tout ce qui est a l’intérieur des deux balises est du langage HTML
• En première ligne <!DOCTYPE html> indique que c’est le langage HTML est la version 5 ( HTML5)
• <head> … </head> —— c’est une partie codage qui ne sera pas visible dans le navigateur de
l’internaute
• Les balise <title> … </title> n’affiche pas un titre dans la page web mais sur l’onglet du
navigateur web.
• <body> …. </body> —– tout ce qui est à l’intérieur de ces balises s’affichera dans la page web.
• En général le texte sera compris à l’intérieur de paragraphes à l’intérieurs des balises
<p>…..</p>
C) LES BALISES OUVRANTES ET FERMANTES ET LES BALISES ORPHELINES

La plupart des balises ont une partie ouvrante et fermante, voir l’exemple ci-dessous avec la
balise paragraphe
Certaines balises n’ont pas de partie fermante car elles décrivent un endroit précis, pas une zone :
par exemple, l’endroit ou placer une image, ou faire un retour à la ligne
Les balises qui ne se ferment pas s’appellent des balises orphelines
D) LES ATTRIBUTS DES BALISES

Pour certaines balises il est nécessaire d’ajouter des précisions à l’intérieur de la balise.
On ne peut pas décrire « mettre un lien » il faut décrire vers quelle adresse va aller le lien ?
On ne peut pas décrire « mettre une image » if faut décrire quelle image ? éventuellement
avec quelle taille elle va s’afficher ?
La précision s’appelle un « Attribut«

Pour cette balise anchor <a> … </a> qui sert à faire des liens, c’est l’attribut href (« hypertexte
reference« ) qui va indiquer précisément vers quelle adresse faire le lien.
Pour cette balise image <IMG> qui est une balise orpheline, c’est l’attribut :

•
•
src (« source« ) qui va indiquez de quelle image il s’agit alt (« alternative« ) qui va proposer un
texte décrivant l’image si celle ci n’est plus présente ou si la page est lut par un logiciel pour les
aveugles.
E) IMBRIQUER DES BALISES HTML LES UNE À L’INTÉRIEUR DES AUTRES

Si on veut par exemple que :
Un lien soit à intérieur d’une phrase soulignée qui
elle-même est à l’intérieur d’un paragraphe en
gras.
Le principe c’est celui des poupées russes.
On ferme d’abord les petites poupées avant de
les rentrer dans une plus grosse …
Regardez le dessin ci-dessous pour savoir
comment imbriquer les balises.
F) UN EXEMPLE DE BALISES IMBRIQUÉS, LES LISTES
<ul> …. </ul> indique le début de la liste et à l’intérieur <li> … </li> indique les éléments de la
liste
On peut avoir une liste de textes ou une liste de liens hypertextes ou une liste d’images …
Dans ce cas on a encore d’autres balises imbriquées comme dans l’exemple ci-dessous ou les balises
hypertextes <a href= » … « > … </a> sont imbriquées dans les balises <li> …. </li>
Lorsque les listes avec liens hypertextes sont associés à des styles de présentation CSS on obtient
des menus comme dans l’exemple ci-dessus.

•
•
G) DONNER DU SENS AU TEXTE ( LES BALISES SÉMANTIQUES )
Le web n’est pas seulement vu par les humains.
Vos pages web doivent être comprises des machines comme :
– Les moteurs de recherche (exemple google) qui va se connecter automatiquement a tous les
sites web et les analyser pour les classer.
– Le logiciel d’un aveugle qui va utiliser les balises pour lire une page, va par exemple énoncer
les titres plus ou moins fort ou sur un ton différent selon la balise. Donner une indication
quand une portion de texte est balisée comme importante.
Tout comme le langage humain est composé d’une syntaxe (les règles de grammaire) et d’une
sémantique (son sens)
Le langage HTML à une syntaxe (règles d’écriture) et une sémantique (la signification que les
balises donne au texte).
1) L’IMPORTANCE DES TITRES
Les balises <h1> <h2> <h3> <h4> <h5> <h6> viennent du

mot « heading » en anglais qui signifie titre.
Ces balises indiquent que le texte est un titre et le numéro

donne l’importance de ce titre.
2) DONNER UNE SIGNIFICATION AU TEXTE

Voici quelques unes des balises sémantiques les plus utilisées (la liste n’est pas complète)
• Donner de l’importance au contenu avec les balises <strong> ….. </strong >
• Souligner un texte avec la balise <u>
• Marquer du contenu pour attirer l’attention avec les balises <mark> ….. </mark>
• Insister sur le contenu ou le mettre en évidence (en italique) avec les balise emphase <em>…..
</em>
• Indiquer que le texte a été supprimé, que c’était une erreur avec la balise <s> …. </s>
• Indiquer que le texte est moins important avec les balises <small> …. </small> pour écrire par
exemple un © copyright
• Indiquer que un ou des chiffres sont en exposant avec les balises <sup> … </sup> pour écrire
par exemple une formule mathématique E=mc2
• Indiquer que un ou des chiffres sont en indice avec les balises <sub>….<sub> pour écrire par
exemple la formule de l’eau H2O
H) GESTION DES ESPACES DANS LE LANGAGE HTML

Il n’existe pas en HTML d’éléments permettant de gérer les espaces. Cependant, il est possible
d’utiliser les balises <pre> ….. </pre> qui servent à pré-formater un texte.
Le texte écrit à l’intérieur des balises <pre> </pre> va conserver la mise en forme que nous
allons lui donner.
Par exemple :

•
•
Exercices :
Exercice 1 : Expliquer à une personne comment dessiner une
page Web en donnant des instructions claires pour que le dessin
corresponde.
QUESTIONS
① Quelles seraient les instructions à donner oralement ?
…………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
② Quelles seraient les précisions à donner pour dessiner correctement la page ?
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
③ Créer une liste de tous les types d'informations qui ont été nécessaires pour décrire la structure
de la page.
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................

•
•
Exercice 2 : Que retenir ? (et Analyse de document multimédia)
➢ Vidéo : https://player.vimeo.com/video/138623721
Depuis sa création en 1990, le langage informatique HTML (HyperText Markup Language) est utilisé pour
créer des pages Web. C’est l’une des trois inventions issues du W3C avec le protocole http et les adresses
Web. Son acronyme signifie « langage de balisage d’hypertexte » car il permet en effet de réaliser de
l’hypertexte à base d’une structure de balisage.
Répondez aux questions à partir de la vidéo ci-dessus.
Pour un navigateur, que permet de faire le HTML envoyé par un serveur) ?
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
Comment fonctionne le langage html ?
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
Que signifie HTML?
.....................................................................................................................................
.....................................................................................................................................
Quel est le rôle des balises en HTML ?
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................
.....................................................................................................................................


Ch2 S3 - Langages D'une Page WEB - Le HTML

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Ch2 S3 - Langages D'une Page WEB - Le HTML

Transféré par

Droits d'auteur :

Formats disponibles

• Ch2 S3 -Langages d’une page Web – Le HTML

Constituer une page Web (1ère partie)

➢ Comprendre la structure d'une page Web.

Sciences Numérique et Technologie – Page : 1

Le code HTML sera donc très simple

Le langage HTML décrit seulement la structure du

Le langage CSS décrit la présentation/décoration des

L’ensemble des présentations des éléments forme un style.

B) LA STRUCTURE GÉNÉRALE D’UNE PAGE HTML

Sciences Numérique et Technologie – Page : 2

C) LES BALISES OUVRANTES ET FERMANTES ET LES BALISES ORPHELINES

D) LES ATTRIBUTS DES BALISES

La précision s’appelle un « Attribut«

Sciences Numérique et Technologie – Page : 3

E) IMBRIQUER DES BALISES HTML LES UNE À L’INTÉRIEUR DES AUTRES

F) UN EXEMPLE DE BALISES IMBRIQUÉS, LES LISTES

Sciences Numérique et Technologie – Page : 4

1) L’IMPORTANCE DES TITRES

Les balises <h1> <h2> <h3> <h4> <h5> <h6> viennent du

Ces balises indiquent que le texte est un titre et le numéro

2) DONNER UNE SIGNIFICATION AU TEXTE

H) GESTION DES ESPACES DANS LE LANGAGE HTML

Sciences Numérique et Technologie – Page : 5

Sciences Numérique et Technologie – Page : 6

Sciences Numérique et Technologie – Page : 7

Vous aimerez peut-être aussi