Outil Web

Développement web
Qu'est-ce que le World Wide Web ?
Le World Wide Web (WWW) est un réseau de ressources et

d'informations. Le Web repose sur trois mécanismes pour rendre
ces données facilement disponibles le plus largement possible :
▸ Un système de nommage uniforme pour leur localisation sur le
Web (par exemple, les URL) ;
▸ Des protocoles, pour accéder à des ressources nommées dont
on possède l'adresse (par exemple, HTTP) ;
▸ L'hypertexte, pour faciliter la navigation entre ces ressources
(par exemple, HTML).
2
URL
Chaque ressource disponible sur le Web: document HTML, image,

séquence vidéo, programme, etc. Possède une adresse
représentée sous la forme d'un identifiant de ressource uniforme
ou URL.
URL= Uniform Resource Locator
3
Qu'est-ce que HTML?
Le HTML (Hyper Text Markup Language) est un langage de

programmation à balises. Il est utilisé pour concevoir des pages
Web. Une page écrite en HTML est un fichier texte.
Publier de l'information en vue d'une distribution mondiale
nécessite l'usage d'un langage universellement compréhensible,
d'une sorte de « langue maternelle » acceptée par tous les
ordinateurs. Le langage de publication utilisé sur le World Wide
Web est le langage de balisage hypertexte HTML.
4
Qu'est-ce que HTML?
HTML donne aux auteurs les moyens de :

▸ Publier des documents en ligne possédant des titres, du texte,
des tables, des listes, des photos, etc.
▸ Ramener des informations en ligne via des liens hypertextes;
▸ Concevoir des formulaires pour conduire des transactions
avec des services distants;
▸ Inclure des feuilles de calculs, des séquences vidéos ou
sonores et d'autres applications, directement dans les
documents.
5
Une brève histoire de HTML
La spécification HTML 2.0 (novembre 1995) a été développé sous

l'égide de l'Internet Engineering Task Force (IETF) pour codifier
les pratiques courantes à la fin de 1994. Les spécifications
HTML+ (1993) et HTML 3.0 (1995) proposaient des versions
HTML bien plus riches. Malgré l'absence de consensus autour
d'un standard, ces avant-projets ont conduit à l'adoption d'un
éventail de fonctions nouvelles. Les efforts du groupe de travail
HTML du World Wide Web Consortium pour la codification des
pratiques courantes en 1996 donnèrent naissance à la
spécification HTML 3.2 (janvier 1997).
6
La plupart des gens sont d'accord sur le fait que les documents
HTML devraient fonctionner correctement sur des plates-formes
et des navigateurs différents
Chaque version HTML a essayé de refléter le plus grand
consensus entre les acteurs de l'industrie, de sorte que les
investissements consentis par les fournisseurs de contenus ne
soient pas gaspillés et que leurs documents ne deviennent en peu
de temps illisibles.
7
Le langage HTML a été développé avec l'intuition que les

appareils de toutes sortes devaient pouvoir utiliser les
informations sur le Web : les ordinateurs personnels avec des
écrans de résolution et de profondeur de couleurs variables, les
téléphones cellulaires, les appareils portables, les appareils de
synthèse et de reconnaissance de la parole, les ordinateurs avec
une bande passante faible comme élevée, et ainsi de suite.
8
HTML 4
La spécification HTML 4 prolonge HTML avec des mécanismes

pour les feuilles de styles, les scripts, les cadres, l'incorporation
des objets, la gestion améliorée des écritures de droite à gauche
ou mixtes, les tables enrichies et les améliorations des
formulaires, qui augmentent l'accessibilité pour les personnes
ayant un handicap physique.
La spécification HTML 4.01 est une révision de HTML 4 qui
corrige des erreurs et apporte certains changements depuis la
révision précédente.
9
L'internationalisation
Cette version de HTML a été conçue avec l'aide d'experts dans le

domaine de l'internationalisation, de telle sorte que les
documents peuvent être écrits en toutes langues et diffusés
partout dans le monde. Cela a été accompli en tenant compte du
document [RFC2070], qui traite de l'internationalisation de HTML.
L'adoption de la norme ISO/IEC:10646 (voir [ISO10646]), comme
jeu de caractères du document pour HTML, a représenté une
étape importante. C'est la norme mondiale la plus complète, qui
tient compte des problèmes concernant la représentation des
caractères internationaux.
10
L'accessibilité
Au fur et à mesure de la croissance de la communauté du Web et

de la diversification des capacités et aptitudes de ses membres, il
devient crucial que les technologies employées soient
appropriées à leurs besoins spécifiques. Le langage HTML a été
conçu pour rendre les pages Web plus accessibles à ceux qui ont
des déficiences physiques.
11
Les feuilles de styles
Les feuilles de styles simplifient le balisage HTML et soulagent

grandement HTML des responsabilités de la présentation. Elles
donnent aux auteurs comme aux utilisateurs le contrôle de la
présentation des documents, des informations sur les polices de
caractères, alignement, couleurs, etc.
12
Les scripts
Au travers de scripts, les auteurs peuvent concevoir des pages

Web dynamiques (par exemple, des « formulaires intelligents »
qui réagissent au cours de leur remplissage par l'utilisateur) et
utiliser HTML comme support d'applications en réseau.
Les mécanismes fournis pour associer HTML et scripts sont
indépendants du langage de script.
13
Qu’est-ce qu’une balise?
Une balise commence par le caractère < et finit par le caractère >.
Il existe deux types de balises : les balises d'ouverture et de
fermeture.
▸ Voici une balise d'ouverture : <p>
▸ Et une balise de fermeture : </p>
14
Squelette le plus simple d'une page HTML
<html>
<head>
<title>Bienvenue sur ma première page Web</title>
</head>
<body>
<p>Ceci est un paragraphe.</p>
</body>
</html>
15
Les balises de présentation
Les balises de présentation sont les balises qui permettent de

mettre en forme le texte, de modifier son apparence (texte en
gras, italique, en couleurs, etc...)
Attention, certaines balises sont devenues obsolètes (elles ne
font plus parties de la norme du W3C). Il faut utiliser le CSS pour
arriver au même résultat.
16
Gras
<b></b> ou <strong><strong>
Exemple(s)
<strong>Texte en gras</strong>
17
Italique
<i></i> ou <em><em>
Exemple(s)
<em>Texte en
18
Souligné
<i></i> ou <em><em>
Exemple(s)
<u>Texte souligné</u>
19
Indice
<sub></sub>
Exemple(s)
Note <sub>1</sub>
20
Exposant
<sup></sup>
Exemple(s)
Note <sup>1</sup>
21
Imprimé
<tt></tt>
Exemple(s)
Note <tt>exemple</tt>
22
Préformaté
<pre></pre>
Exemple(s)
<pre>exemple</pre>
23
Centré
<center></center>
Exemple(s)
<center>exemple</center>
24
Taille de la police
<font size="x"></font>
Exemple(s)
Note <font size="4">exemple</font>
25
Couleur de la police
<font color=""></font>
Exemple(s)
Note <font color="#ff0000">exemple</font>
26
Citation
<cite></cite>
Exemple(s)
Note <cite>exemple</cite>
27
Code informatique
<code></code>
Exemple(s)
Note <Code>exemple</Code>
28
Clavier
<kbd></kbd>
Exemple(s)
Note <kbd>exemple</kbd>
29
Caractères "littérale"
<samp></samp>
Exemple(s)
Note <samp>exemple</samp>
30
Variable
<var></var>
Exemple(s)
<var>exemple</var>
31
Liens
Evenement javascript, appel de fonction si clique sur le lien:
<a href="url" onclick="***"></a>
Evenement javascript, appel de fonction si la souris est au-dessus
du lien:
<a href="url" onmouseover="***"></a>
Evenement javascript, appel de fonction si la souris n'est plus au-
dessus du lien:
<a href="url" onmouseout="***"></a>
32
Liens
Lien vers un Email, lance le gestionnaire de mail par dé il
vous faut (thunderbird, outlook, ...):
<a href="mailto:@email"></a>
Lien vers un Email, lance le gestionnaire de mail par dé il
faut avec le sujet (objet) du mail pré rempli:
<a href="mailto:@email?subject=***"></a>
33
Afficher une image

<img src="url">
Alignement de l'image
<img src="url" align=*> *=top|bottom|middle|left|righ
Description de l'image
<img src="url" alt="***">
34
Dimensions de l'image
<img src="url" width="?" height="?">
Bordure de l'image
<img src="url" border=?>
35
Listes
HTML offre la possibilité d'afficher des listes d'informations.
Il existe deux types de listes :
▸ Les listes non ordonnées;
▸ Les listes ordonnées.
36
Listes/ Liste non ordonnée (puces)

<ul>
<li>Samsung</li>
<li>HTC</li>
</ul>
37
Listes/ Type de puces

• Pomme
• Poire
o iOs
o Android
 xml
 html
38

<ul type="disc|circle|square"></ul>
• Pomme
o Android
 html
39

<ul type="disc"><li>Pomme</li></ul>
<ul type="circle"><li> Android</li></ul>
<ul type="square"><li>html</li></ul>
40
Listes/ Liste ordonnée (numérotation)

<ol>
<li>Free</li>
<li>Orange</li>
</ol>
41
Listes/ Type de numérotation

<ol type="A|a|1|I|i"></ol>
<ol type="A"><li>Playstation</li><li>Xbox</li></ol>
<ol type="a"><li>Nintendo</li></ol>
<ol type="1"><li>Voiture</li>
<ol type="I"><li>CSS</li></ol>
<ol type="i"><li>Word</li></ol>
42
Listes/ Numéro de depart

<ol start="nombre">
<ol start="26" type="A"><li>Wii</li></ol>

<ol start="26" type="a"><li>Atari</li></ol>
<ol start="26" type="1"><li>Moto</li></ol>
<ol start="26" type="I"><li>HTML</li></ol>
<ol start="26" type="i"><li>NotePad++</li></ol>
43
Tableaux
Définition d'un tableau:
<table></table>
Bordure du tableau:
<table border=?></table>
Espace des cellules:
<table cellspacing="">
44
Tableaux
Espace de la bordure des cellules:
<table cellpadding="">
Largeur (px, %e):
<table width="">
Lignes du tableau:
<tr></tr>
45
Tableaux
Cellules du tableau:
<td></td>
Alignement du texte
<td align="" valign="">
align = left, right, center
valign = top, middle, bottom
46
Tableaux
Débordement colonnes:
<td colspan="">
Débordement lignes:
<td rowspan="">
En-tête du tableau:
<th></th>
47
Cadres
Cadre du document (au lieu de <body>):
<frameset></frameset>
Hauteur lignes (px ou %):
<frameset rows="">
Largeur colonnes (px ou %)
<frameset cols="">
48
Cadres
Largeur bordure
<frameset border="">
Couleur bordure
<frameset bordercolor="#">
Couleur bordure
49
Cadres
Contenu non-encadré (pour les navigateurs non
compatible):
<noframes></noframes>
Document affiché:
<frame src="url">
Nom du cadre
<frame name="">
50
Formulaires
Method = get, post:
<form action="url" method=""></form>
Champs
Type = text, password, checkbox, radio, image, hidden,
submit, reset
Nom du Champs
<input name="">
51
Formulaires
Valeur du champ:
<input value="">
Grandeur du champ:
<input size="">
Longueur maximum:
<input maxlength="">
52
Formulaires
Liste de sélection
<select></select>
Nom d'une liste
<select name=""></select>
Nombre d'options
<select size=""></select>
53
Formulaires
Choix multiples
<select multiple="multiple">
Option
<option></option>
EditBox
<textaera rows="" cols=""></textaera>
54
Formulaires
Nom de l'EditBox:
<textaera name=""></textaera>
Bouton:
<button></button>
Nom du bouton
<button name=""></button>
55
Formulaires
Type de bouton
<button type=""></button>
Valeur par défaut
<button value=""></button>
56
CSS
Gestion de la transparence
filter:alpha(opacity=30); /* Fonctionne pour IE */
-moz-opacity:.30; /* La propriété de Mozilla */
opacity:.30; /* La propriété de CSS 3 */
Sur une div:
<div style="background-color :blue ;
filter:alpha(opacity=30); -moz-opacity:.30; opacity:.30;width
:100px ;height :50px ;margin:auto;">Transparence CSS sur
un div</div>
57
CSS
Gestion de la transparence
Sur une image:
<div style="background-color :blue; filter:alpha(opacity=30);
-moz-opacity:.30; opacity:.30; margin:auto;text-
align:center;width:400px;">
<img src="/images/logo.png" alt="logo"/>
</div>
58
CSS
Gestion des bordures d’un élément

Taille de la bordure : border-width:
Exemple(s):
border: 1px solid #FF0000;
59
CSS

Style de la bordure : border-style:
Exemple(s):
border: 3px solid #000000;
border: 3px double #000000;
border: 3px groove #000000;
border: 3px dotted #000000;
border: 3px dashed #000000;
60
CSS

Style de la bordure : border-style:
Exemple(s):
border: 3px inset #000000;
border: 3px outset #000000;
border: 3px ridge #000000;
Pour manipuler un des bords de la bordure, il faut utiliser les propriétés
suivantes: border-top (bordure supérieure), border-right (bordure droite),
border-bottom (bordure inférieure), border-left (bordure gauche ).
61
CSS
Gestion des marges d’un élément

Chaque élément est en fait constitué de 4 blocs:
Le bloc margin (margin box) : La marge extérieur de
l'élément.
La bordure (border) : la bordure de l'élément.
Le bloc padding (padding box) : la marge intérieur de
l'élément.
Le contenu (l'élément en lui-même) : le texte, l'image, etc.
62
CSS

Exemple(s):
margin-top :10px; /* Permet de définir une marge de 10
pixels sur le haut de la marge extérieur. */
Il existe aussi la valeur "auto" qui permet au navigateur de fixer

lui-même les marges. Cette technique est souvent utilisée pour
centrer un div dans une page web
63
CSS

Regrouper les différentes directions :
margin:10px; /* 1 valeur : pour toutes les marges */
margin:10px 5px; /* 2 valeurs : la première valeur pour les
marges horizontale (top et bottom) et la seconde pour les
marges vertical (left et right) */
margin: 11px auto 2px; /* 3 valeurs : haut, gauche et droit, bas */
margin: 10px 15px 20px 30px; /* margin: 10px 15px 20px 30px; */
64
CSS
Gestion des couleurs et image de fond

Background-color:
Pour utiliser une couleur, il faut indiquer la couleur avec la
propriété background-color, la couleur peut être en hexa, en
rgb ou en texte.
Exemple(s)
background-color :#ff0000 ;
65
CSS
Background-image:
Pour utiliser une image en fond d'un élément, il faut
indiquer le chemin de l'image à partir du fichier CSS avec la
propriété background-image.
Exemple(s)
background-image : url(./imgs/background.png); /* à partir
du répertoire contenant le fichier CSS */
background-image : url(/imgs/background.png); /* à partir
de la racine du site */
66
CSS

Background-attachement :
Pour fixer l'image, il faut utiliser la propriété background-
attachement.
Exemple(s)
background-attachment:fixed; /* valeur par défaut : scroll*/
67
CSS

Background-repeat :
Il est possible de répéter une image en utilisant la
propriété background-repeat.
Exemple(s)
background-repeat:no-repeat;
background-repeat:repeat; /* Repète l'image sur l'axe horizontale
et verticale */
68
CSS

Exemple(s)
background-repeat:repeat-x; /* Repète l'image sur l'axe
horizontale */
background-repeat:repeat-y; /* Repète l'image sur l'axe
verticale */
69
CSS

Background-position :
Le fond de l'élément (l'image) peut être positionné par
rapport au coin supérieur gauche de l'élément.
Exemple(s)
background-position:20% 50%;
Les valeurs peuvent aussi être des mots-clés: top, bottom,
left, right, center.
background-position:center center;
70
CSS
Gestion des polices

Font-family :
Indique la police de caractères du texte. Les noms de
police doivent être indiquées en les séparant par une
virgule.
71
CSS
Gestion des polices

Police de caractères: font-family
La dernière police indiquée est en règle générale une police
générique :
▸ Serif;
▸ sans-serif;
▸ Monospace;
▸ Cursive;
▸ Fantasy.
72
CSS
Gestion des polices

Police de caractères: font-family
Si vous utilisez une police de caractères contenant des
espaces, il faut l'indiquer avec des guillemets.
Exemple(s)
<p style="font-family : "Times New Roman", Times,
serif;">Times New Roman</p>
<p style="font-family : Arial, Helvetica, sans-serif;">Arial</p>
73
CSS
Gestion des polices

Taille de la police: font-size
La valeur peut être exprimé en px (pixel), em (unité
relative), % (pourcentage), pt (point).
Les valeurs suivantes peuvent aussi être utilisées (de la
taille la plus petite à la plus grande) : xx-small, x-small,
small, medium, large, x-large, xx-large.
74
CSS
Gestion des polices

Taille de la police: font-size
Exemple(s)
<p style="font-size : 12px;">12px</p>
<p style="font-size : 25%;">25%</p>
<p style="font-size : 2em;">2em</p>
75
CSS
Gestion des polices

Inclinaison de la police: font-size
Indique l'inclinaison de la police (italique, oblique, normal)
Exemple(s)
<p style="font-style : italic;">Texte en italique</p>
<p style="font-style : oblique;">Texte en oblique (disponible
suivant la police utilisée)</p>
<p style="font-style : normal;">Normal</p>
76
CSS
Gestion des polices

Graisse de la police: font-weight
Indique la graisse de la police (gras). La valeur est un
nombre entre 100 et 900. Les valeurs suivantes peuvent
aussi être utilisées : lighter, normal, bold, bolder
Exemple(s)
<p style="font-weight : bold;">Gras</p>
<p style="font-weight : 300;">Gras</p>
77
CSS
Gestion des polices

Casse du texte : font-variant
Indique la casse de la police (normal ou petite majuscule).
La valeur peut être soit : small-caps (petite majuscule),
normal
Exemple(s)
<p style="font-variant : small-caps;">Texte en petite
majuscules</p>
<p style="font-variant : normal;">Normal</p>
78
CSS
Gestion du texte
Alignement du texte : text-align
Indique l'alignement horizontale du texte.
Les 4 valeurs possibles sont : left , center, right, justify
Exemple(s)
<p style="text-align : left;">A gauche</p>
<p style="text-align : center;">Centré</p>
<p style="text-align : right;">A droite</p>
<p style="text-align : justify;">Texte justifié</p>
79
CSS
Gestion du texte
Décoration du texte : text-decoration
Décore un texte ou un mot (souligner, surligner, barrer,
clignoter). Les 4 valeurs possibles sont : overline
(surligner), line-through (barrer), underline (souligner), blink
(clignoter : ne fonctionne pas sous IE)
80
CSS
Gestion du texte
Décoration du texte : text-decoration
Exemple(s)
<p style="text-decoration : overline;">Surligner</p>
<p style="text-decoration : line-through;">Barrer</p>
<p style="text-decoration : underline;">Souligner</p>
<p style="text-decoration : blink;">Clignoter</p>
81
CSS
Gestion du texte
Indentation du texte : text-indent
Décale la première ligne d'un paragraphe (ou d'un texte).
Exemple(s)
<p style="text-indent : 10px"> Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Nam sit amet lacus ut nisi
convallis mattis. </p>
82
CSS
Gestion du texte
Casse du texte : text-transform
Modifie la casse du texte (minuscule ou majuscule).
Les 4 valeurs possibles sont : capitalize (première lettre en
majuscule), uppercase (majuscule), lowercase (minuscule),
none (normal)
Exemple(s)
<p style="text-transform: uppercase;">majuscule</p>
<p style="text-decoration : lowercase;">MINUSCULE</p>
83
CSS
Gestion du texte
Espace entre les lettres : letter-spacing
Modifie l'espacement entre les lettres.
Exemple(s)
<p style="letter-spacing : 10px;">Lorem ipsum dolor sit
amet</p>
84
CSS
Gestion du texte
Espace entre les mots : word-spacing
Modifie l'espacement entre les mots.
Exemple(s)
<p style="word-spacing : 10px;">Lorem ipsum dolor sit
amet</p>
85
CSS
Les liens hypertexte

Text-decoration
Utilisez la propriété text-decoration pour retirer le
soulignement des liens.
Exemple(s)
a.test{text-decoration:none;} /* Les liens avec la classe "test"
n'auront pas de soulignement */
Avec cette propriété, vous pouvez aussi souligner, surligner
ou barrer un lien.
86
CSS

Lien par défaut
Exemple(s)
a:link {/*...*/}
Lien visité par défaut

Exemple(s)
a:visited {/*...*/}
87
CSS

Lien survolé par la souris par défaut
Exemple(s)
a:hover {/*...*/}
Lien cliqué par défaut

Exemple(s)
a:active {/*...*/}
88
CSS

Style sur une classe ou un id
Vous pouvez aussi modifier la mise en forme de liens ayant
une classe ou un id.
Exemple(s)
a.menu:visited{/*...*/} /* Les liens visités ayant la classe
"menu" */
a#header:hover{/*...*/} /* Les liens survolés par la souris ayant l'id
"header" */
89
CSS

Style sur une classe ou un id
Exemple(s)
a.lien:link{text-decoration:none; color:#ff0000;}
a.lien:visited{text-decoration:none; color:#ff00ff;font-
weight:bold;}
a.lien:hover{text-decoration:underline; color:#000000;}
a.lien:active{text-decoration:none; color:#00ff00;font-
style:italic;}
90
CSS
Gestion du curseur de la souris

Les principales formes
91
CSS

Curseur personnel
Vous pouvez attribuer une image (.cur ou .ani) comme
curseur en utilisant la syntaxe suivante :
cursor:url("test.cur"), auto;
92
CSS

Curseurs de redimensionnement

Outil Web

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

Outil Web

Transféré par

Droits d'auteur :

Formats disponibles

Développement web

Qu'est-ce que le World Wide Web ?

Le World Wide Web (WWW) est un réseau de ressources et

Chaque ressource disponible sur le Web: document HTML, image,

Qu'est-ce que HTML?

Le HTML (Hyper Text Markup Language) est un langage de

Qu'est-ce que HTML?

HTML donne aux auteurs les moyens de :

Une brève histoire de HTML

La spécification HTML 2.0 (novembre 1995) a été développé sous

Une brève histoire de HTML

Une brève histoire de HTML

Le langage HTML a été développé avec l'intuition que les

La spécification HTML 4 prolonge HTML avec des mécanismes

Cette version de HTML a été conçue avec l'aide d'experts dans le

Au fur et à mesure de la croissance de la communauté du Web et

Les feuilles de styles

Les feuilles de styles simplifient le balisage HTML et soulagent

Au travers de scripts, les auteurs peuvent concevoir des pages

Qu’est-ce qu’une balise?

Squelette le plus simple d'une page HTML

Les balises de présentation

Les balises de présentation sont les balises qui permettent de

Les balises de présentation

Les balises de présentation

Les balises de présentation

Les balises de présentation

Les balises de présentation

Les balises de présentation

Les balises de présentation

Les balises de présentation

Les balises de présentation

Les balises de présentation

Les balises de présentation

Les balises de présentation

Les balises de présentation

Les balises de présentation

Les balises de présentation

Les balises de présentation

Les balises de présentation

Les balises de présentation

Afficher une image

Les balises de présentation

Les balises de présentation

Les balises de présentation

Listes/ Liste non ordonnée (puces)

Les balises de présentation

Listes/ Type de puces

Les balises de présentation

Listes/ Type de puces

Les balises de présentation

Listes/ Type de puces

Les balises de présentation

Listes/ Liste ordonnée (numérotation)

Les balises de présentation

Listes/ Type de numérotation

Les balises de présentation

Listes/ Numéro de depart

<ol start="26" type="A"><li>Wii</li></ol>

Les balises de présentation

Les balises de présentation

Les balises de présentation

Les balises de présentation