Chapitre 1 DEV

Chapitre 1 Programmation Web 1
Introduction générale
Enseignante : Mme L. MANSOURI
1
HTML : HyperText Markup Language
• Un langage de description de données

• Langage de balisage
• Utilisé pour créer des pages web
• Extensions des fichiers : .html ou bien .htm
2
Historique
HTML 1 : c'est la toute première version créée par Tim

Berners-Lee en 1991.
HTML 2 : apparaît en 1994 et prend fin en 1996 avec

l'apparition du HTML 3.0. C'est cette version qui posera en fait
les bases des versions suivantes du HTML.
Les règles et le fonctionnement de cette version sont donnés
par le W3C
HTML 3 : apparue en 1996, cette nouvelle version du HTML

rajoute de nombreuses possibilités au langage comme les
tableaux, les applets, les scripts, le positionnement du texte
autour des images, etc.
3
Historique
HTML 4 : il s 'agit de la version la plus répandue du HTML. Elle

apparaît pour la première fois en 1998 et propose l'utilisation de
frames (qui découpent une page web en plusieurs parties), des
tableaux plus complexes, des améliorations sur les formulaires,
etc. Mais surtout, cette version permet pour la première fois
d'exploiter des feuilles de style, notre fameux CSS !
HTML 5 : c'est la dernière version. elle apporte de nombreuses

nouveautés comme la possibilité d'inclure facilement des vidéos,
un meilleur agencement du contenu, des nouvelles
fonctionnalités pour les formulaires, etc…
4
Quelques organismes de normalisations
W3C
Le World Wide Web Consortium, abrégé par le sigle W3C, est un

organisme de normalisation à but non-lucratif, fondé en octobre 1994
Tim Berners-Lee, chargé de promouvoir la compatibilité des
technologies du World Wide Web telles que HTML, XHTML, XML,
RDF, SPARQL, CSS..
WHATWG
Le Web Hypertext Application Technology Working Group est une

collaboration non officielle des différents développeurs des navigateurs
web ayant pour but le développement de nouvelles technologies
destinées à faciliter l'écriture et le déploiement d'applications à travers
le Web.
La Mozilla Foundation, Opera Software et Apple, Inc. en sont les
premiers contributeurs.
5
❖WHATWG travaillait sur de nouveaux formulaires et
applications,
+
❖le W3C travaillait sur XHTML 2.
→ En 2006, ils ont décidé de coopérer pour créer le

HTML5.
6
Validation & compatibilité
 Différents navigateurs peuvent produire différents résultats

à partir d’un même code.
 Nécessité de tester son code sous différents navigateurs !
→Le W3C met deux outils à notre disposition :

◦ Validateur HTML : http://validator.w3.org
◦ Validateur CSS : http://jigsaw.w3.org/css-validator
7
Les éditeurs html
Les catégories de logiciel de création des pages html :
• Les WYSIWYG (What You See Is What You Get - Ce Que Vous
Voyez Est Ce Que Vous Obtenez) : ce sont des programmes qui se
veulent très faciles d'emploi, ils permettent de créer des sites web
sans apprendre de langage particulier. Parmi les plus connus d'entre
eux : Mozilla Composer, Microsoft Expression Web, Dreamweaver…
• Les éditeurs de texte : ce sont des programmes dédiés à

l'écriture de code. On peut en général les utiliser pour de multiples
langages, pas seulement HTML et CSS. Ils se révèlent être de
puissants alliés pour les créateurs de sites web !
8
Page web
9
10
Les bases du html
❖Balise simple(orpheline) : <br/>
❖Balise double (paire de balises, ouvrante et fermante) :

Exemple : <title>Titre de la page</title>
❖Attribut :
Exemple : <html lang="fr"></html>
<meta charset="utf-8"/>
❖Élément :
Ensemble de données délimité par une balise double
Balise ouvrante Balise fermante
<a href=“http://www.youtube.com”> Le site YouTube </a>
attribut
élément a 11
Ordre d’imbrication des balises
12
Les commentaires
❖Non interprétés par le navigateur

❖Visibles dans le code source
Exemple :
<!- - Un commentaire HTML - ->
<!- -Un autre commentaire HTML- ->
<!- -
Encore un autre commentaire HTML mais cette fois-ci, il est
affiché sur plusieurs lignes
- ->
13
Page HTML5 minimale
14
Les balises META
Les balises META servent à placer des métadonnées (metadata)
dans une page HTML.
On placera ces informations dans l’élément head, et elles ne
seront pas affichées sur la page.
Les outils susceptibles de les exploiter :
❖aux navigateurs web
❖aux moteurs de recherche;
❖plus largement, à tous les outils d’indexation, c’est-à-dire
tous les outils qui analysent vos pages pour y identifier
diverses informations.
BUT : permettre aux navigateurs et aux moteurs

de recherche de mieux identifier un site web, facilitant sa
classification et son référencement.
15
Les balises META
Les balises META permettent aux navigateurs et aux moteurs
de recherche de mieux identifier un site web, facilitant sa
classification et son référencement.
Les plus utilisés :

▪Meta Content-Type :utilisée pour déclarer le type de document
qui est réceptionné par le visiteur et parfois l'encodage utilisé.
En HTML4, cette balise inclut également le charset.
En HTML5 par contre, la balise Charset est une balise différente.
▪meta DESCRIPTION :est utilisée par les moteurs de recherche
pour donner une description à une page d'un site.
16
▪Meta LANGUAGE
▪meta KEYWORDS
▪meta GENERATOR: précise le logiciel utilisé pour créer la page
▪meta AUTHOR : permet d’identifier d’auteur de la page
▪meta COPYRIGHT: permet de spécifier le copyright du site
▪ meta ROBOTS: autorise ou interdit l'indexation par les
robots des moteurs de recherche.
Elle peut contenir plusieurs valeurs :
- "index" : cette page sera indexée par le robot
- "noindex : cette page ne sera pas indexée par le robot
- "follow" :Les liens contenus dans la page seront indexés.
- "nofollow" :les liens contenus dans la page ne seront pas indexés
- "all" :est équivalent à "index,follow"
- "none" :est équivalent à "noindex,nofollow"
17
Exemples :
<meta http-equiv="Content-Type" content="text/html; />

<meta charset="utf-8" />
< meta name = " description " content = " La description de la page " />
<meta name="Language" CONTENT="fr" />
< meta name = " keywords " content = " Ecrire ici les mots clés " />
< meta name = " generator " content = " PrestaShop " />
< meta name = " robots " content = " index,follow " />
< meta name = " author " content = " MANSOURI Lamia" />
18
Types de balises
Il existe deux sortes d’éléments html :
 Les blocs : <p>, <h1>, <ul>,<table>, <form>….
<div> est un bloc générique
 Les éléments en lignes : qui doivent être placés à l’intérieur de
blocs : <a>, <em>, <strong>,<br>,<img>, …
<span> est un élément en ligne générique.
Remarque :D'une façon générale, un élément en-ligne (inline) peut

s'emboîter dans un élément bloc, l'inverse n'est pas vrai.
On peut emboîter sans problème un élément block dans un autre
élément bloc ou un élément inline dans un autre élément inline.
Emboîtement autorisé Emboîtement INTERDIT

<p> <strong>
Phrase avec un <strong> <p>Première phrase</p>
mot </strong> important <p>Deuxième phrase</p>
</p> </strong> 19
Quelques balises de structuration du texte
balise description
strong Mise en valeur forte
em Mise en valeur italique
mark Mise en valeur visuelle
p définit un paragraphe.
h1,h2,…,h6 Titre de niveau 1,2…6
20
Les listes
Les 3 types fondamentaux de listes sont :
•la liste ordonnée (numérotée) <OL> (= Ordered List)

les éléments sont précédés d'un numéro d'ordre
•la liste simple à puces, non ordonnée, <UL> (= Unordered

List). chaque élément de la liste est introduite dans le code par
le marqueur LI (= LIst entry).
•la liste de définitions <DL>: chaque élément peut-être

accompagné d'une définition écrite à la ligne suivante avec un
retrait.
21
Les attributs
Type="type" UL (déprécié en faveur des css) :

& spécifie l'aspect des marqueurs
OL des éléments
Start="nombre" OL commence la numérotation à la
valeur spécifiée.
Value="nombre" LI spécifie le nombre des éléments.
Compact OL & UL rendu plus compact de la liste
22
L’attribut type peut prendre ces valeurs :
<UL type="disc "> Puces rondes pleine

<UL type="circle"> Puces rondes creuses
<UL type="square"> Puces carrées
<OL type=1> (1,2,3)
<OL type=a> (a,b,c)
<OL type=A> (A,B,C)
<OL type=i> (i,ii,iii)
<OL type=I> (I,II,III)
23
Les listes ordonnées
Une liste ordonnée est délimitée par les balises <OL> et </OL>
entre lesquelles chaque élément de la liste est précédé de
balise <LI>.
Exemple :
<OL>
<LI>élément 1</LI>
<LI>élément 2 </LI>
</OL>
24
Les listes non ordonnées
Une liste non numérotée est définie de la même façon, sauf qu'elle est
encadrée par les balises <UL> et </UL>.
Exemple :
<UL>
</UL>
25
Il est possible d'imbriquer des listes du même type ou de types différents.
Exemple 1 :
<UL>
<LI>élément 1 :
<OL>
<LI>sous-élément A </LI>
<LI>sous-élément B </LI>
</OL>
</Li>
</UL>
26
Exemple 2 :
27
Liste de tabulations ou de définition
Il est possible de définir des listes spéciales, permettant de

faire des glossaires, en utilisant les balises <DL> et </DL>
pour encadrer la liste, <DT> pour spécifier un élément et
<DD> pour indiquer sa définition.
<DL>
<DT>HTML<DD>HyperText Markup
Language
<DT>HTTP<DD>HyperText Transfert
Protocol
</DL>
28

Chapitre 1 DEV

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

Chapitre 1 DEV

Transféré par

Droits d'auteur :

Formats disponibles

Chapitre 1 Programmation Web 1

Enseignante : Mme L. MANSOURI

• Un langage de description de données

HTML 1 : c'est la toute première version créée par Tim

HTML 2 : apparaît en 1994 et prend fin en 1996 avec

HTML 3 : apparue en 1996, cette nouvelle version du HTML

HTML 4 : il s 'agit de la version la plus répandue du HTML. Elle

HTML 5 : c'est la dernière version. elle apporte de nombreuses

Le World Wide Web Consortium, abrégé par le sigle W3C, est un

Le Web Hypertext Application Technology Working Group est une

→ En 2006, ils ont décidé de coopérer pour créer le

 Différents navigateurs peuvent produire différents résultats

 Nécessité de tester son code sous différents navigateurs !

→Le W3C met deux outils à notre disposition :

Les catégories de logiciel de création des pages html :

• Les éditeurs de texte : ce sont des programmes dédiés à

❖Balise double (paire de balises, ouvrante et fermante) :

<a href=“http://www.youtube.com”> Le site YouTube </a>

❖Non interprétés par le navigateur

BUT : permettre aux navigateurs et aux moteurs

Les plus utilisés :

<meta http-equiv="Content-Type" content="text/html; />

<meta name="Language" CONTENT="fr" />

Remarque :D'une façon générale, un élément en-ligne (inline) peut

Emboîtement autorisé Emboîtement INTERDIT

Les 3 types fondamentaux de listes sont :

•la liste ordonnée (numérotée) <OL> (= Ordered List)

•la liste simple à puces, non ordonnée, <UL> (= Unordered

•la liste de définitions <DL>: chaque élément peut-être

Type="type" UL (déprécié en faveur des css) :

<UL type="disc "> Puces rondes pleine

Il est possible de définir des listes spéciales, permettant de

Vous aimerez peut-être aussi