07/10/15

Techniques du web

LST Informatique
FST 2015-2016
Mohamed OUZARF

À quoi ressemble HTML ?

- Lorsque nous ouvrons une page web, faisons un clic-doit :

Afficher Code source.
- Ce que nous voyons c'est du langage HTML tel que le reçoit
le navigateur.
- Une description de la structure d'une page apparaissent. On
parle de balises.

Exemple:
une balise <img> permet de définir l'existence d'une image
au sein de la page,
La balise <table> permet de définir la structure d'un tableau
constitué de lignes et de colonnes.

1
 07/10/15

C’est quoi : HTML ?

¡ Tout d’abord un bréf rappel Historique

de quelques notions fondamentales:

En 1970 nait le protocole TCP/IP qui permet d'uniformiser sous des

règles communes le transit des informations dans un réseau.

En 1984 nait le protocole HTTP qui permet de rendre accessible de

transmettre à travers le réseau un ensemble de pages.

En 1990, est créé le langage HTML (acronyme de HyperText Markup

Langage) qui permet de structurer ces pages; c'est aussi la naissance des
navigateurs Mosaic et Netscape qui interprètent ces fichiers HTML

C’est quoi : HTML ?

En 1995, naissance de JavaScript, langage de programmation qui
permet d'ajouter de l'interactivité aux pages web en permettant de
détecter des événements souris ou clavier.

En 1996, naissance de CSS (acronyme de Cascading Style Sheet)

qui reporte dans un jeu d'instructions le plus souvent écrites dans
un fichier supplémentaire (on parle de feuille de styles)

En 1997 nait XHTML qui impose une syntaxe plus stricte de l'écriture des
pages web.
Peu après nait le logiciel Flash accompagné du langage de programmation
qui lui est associé ActionScript, permettant des contenus interactifs et des
animations au sein de pages web
En 2007 nait une première ébauche d'HTML5

2009 le consortium W3C abandonne définitivement XHTML.

4

2
 07/10/15

HTML Structure et balises

HTML est le langage qui permet de décrire une page web.
Qu'est-ce qu'une page web ?
Une page web est tout simplement un fichier texte transmis par un
serveur après une requête.

Qu'est-ce qu'un serveur ?

C'est une machine connectée au réseau et dont la tâche principale
est d'attendre des requêtes et renvoyer des fichiers.

Comment faire une requête ?

C'est par exemple taper l' URL (Uniform Resource Locator) :
c'est-à-dire ajouter l’adresse web de la page d'accueil d'un site
web dans la barre d'adresses d'un navigateur
Ou
le fait de cliquer sur un lien dans une page d'un site web.
Un navigateur c'est donc une application qui effectue des requêtes, les
5
transmet à un serveur et en interprète le résultat pour l'afficher sur un écran.

Les extensions des fichier HTML

Les extensions les plus communes pour un fichier HTML

sont .html ou .htm.
On distingue deux types de pages : les pages dites statiques et
les pages dynamiques.

Les premières ont un contenu figé : dans le sens où le serveur se

contente de transmettre un fichier qui existe déjà tel quel;

Les secondes ont un contenu qui est élaboré par le serveur, par
exemple lorsqu'on affiche un compte en banque.

Cette exécution met en oeuvre d'autres langages tels que PHP ou

Java : les extensions peuvent alors être différentes
de HTM ou HTML. Par exemple .php ou .jsp...

3
 07/10/15

Création d’une page web

On peut créer une page web tout simplement avec un

éditeur de texte tel que NotePad, ou autre éditeurs dédiés
à ce langage qui permettent de travailler en
mode WYSIWYG. Tel que :Dreamweaver d'Adobe
L'exécution d’un fichier HTML statique nécessite tout simplement
avec un navigateur.

La lecture d'une page dynamique nécessite, la présence d'un serveur

sur notre machine.

Pour être sûr que ce fichier est correctement écrit et sera donc
correctement lu par l'ensemble des navigateurs : Le mieux est de le
tester sur un panel de navigateurs, (Firefox, Chrome, internet-
explorer…).
7

Contenu et structure d’un fichier HTML

Un fichier HTML contient un ensemble de balises. Une balise

est un ensemble de caractères entre crochets, plus
exactement entre le signe < et le signe >.
Une balise caractérise un contenu, par exemple un
paragraphe, un tableau, une partie de texte en italique

Exemple le mot bateau est situé:

entre la balise ouvrante <i> et la balise fermante </i>,
l'ensemble signifiant au navigateur que le mot doit être affiché
en italique

<i> bateau</i>
bateau

4
 07/10/15

Contenu et structure d’un fichier HTML

D'abord, il est conseillé d'indiquer

dans la page HTML une référence à la
norme HTML. Cette déclaration se fait
par une ligne du type <!DOCTYPE
HTML>. L'intérêt est
de pouvoir faire passer les pages au
validateur du consortium W3C, afin
de vérifier qu'on n'a pas
fait d'erreur sur la syntaxe du HTML.
La seconde balise est la balise
<HTML> elle indique le début du
document proprement dit ; on
retrouvera tout à la fin du document
la balise fermante </HTML> ; le
contenu HTML est donc
délimité par ces deux balises.
9

Contenu et structure d’un fichier HTML

On trouve ensuite l'en-tête. Cette partie,

qui n'est pas visible contient des
propriétés globales,
comme le titre du fichier, les mots-clés
que recueillent les navigateurs, etc.

Vient en suite le corps. Le contenu

proprement dit de la page, celui qui fait
l'objet de l'affichage, est
situé entre les balises ouvrantes et
fermantes body.

10

5
 07/10/15

Contenu et structure d’un fichier HTML

Code minimal d'une page HTML :

<!DOCTYPE html>
<html>
<head>

<meta charset="utf-8" />

<title>Titre</title>

</head>

<body>

</body>

</html>
11

Les jeux de balises

Les jeux de balises ouvrantes et fermantes définissent à la

fois une sémantique (les balises ont un sens, par exemple
<p> paragraphe </p>) un comportement
(certaines balises impliquent une interaction, comme le lien
hypertexte a), et éventuellement une apparence prédéfinie
(pour la plupart des navigateurs, le lien a une apparence
bleue et soulignée).

Prenons l'exemple de la balise p. La sémantique indique qu'on est en

présence d'un paragraphe. Ici pas de comportement particulier.
L'apparence du texte est ici régie par des propriétés prédéfinies par
le navigateur, par exemple : Times 12 points, noir.

12

6
 07/10/15

Les jeux de balises

On trouve des balises autofermantes telles que :

<img> (pour image)
<hr> (pour ligne horizontale)
<br> (saut de ligne)…

Certaines balises possèdent des attributs (certains obligatoires,

d'autres facultatifs) qui précisent ou modifient ses propriétés.
Par exemple, au sein de la balise <img >, on définit le chemin
vers l'image à afficher.

<img src=''image.jpg''>

13

Types de balises

On distingue trois types de balises.

Des balises de contenu de flux : ces balises sont des
éléments de structuration de la page à afficher.
On trouve par exemple les balises
• a pour lien hypertexte
• p pour paragraphe
• div pour une partie de contenu
• header pour l'en-tête
• footer pour le pied de page
• table pour tableau
• form pour formulaire
• etc..

14

7
 07/10/15

Types de balises

On trouve aussi des balises de contenu de

phrasé. Ces balises en général imbriquées dans
les précédentes confèrent au contenu qu'elles
enserrent une valeur sémantique
• em pour une mise en relief du texte en italique
• strong pour un contenu en gras
• span pour un contenu à isoler
• input pour une entrée de texte
• select pour une liste déroulante

15

Types de balises

On trouve enfin des balises de Métadonnées qui introduisent

des données complémentaires
• link, qui permet de définir un lien avec une page extérieure
(en pratique, un fichier de style
pour la mise en page du document)
• style, qui définit directement la mise en page des
éléments, position, couleur, etc.
• meta, qui définit les métadonnées du fichier, les mots-clés,
par exemple
• script, qui définit du code additionnel, par exemple
JavaScript que nous découvrirons plus
tard

16

8
 07/10/15

Types de balises

17

les commentaires

Les commentaires ne sont pas affichés dans le navigateur. Ils

donnent des indications sur la nature du contenu à un futur
développeur, mais aussi souvent à soi-même lorsqu'on reprend
le code quelques mois plus tard.

Les commentaires :
débutent par <!–
et
finissent par -->

<!– Ceci est un commentaire -->

18

9
 07/10/15

l'encodage

L'encodage est la manière de stocker en binaire (c'est-à-dire

grâce à des 0 et des 1, des bits) les caractères. C'est aussi de
cette façon que les données vont circuler sur le réseau.

Pour afficher des caractères accentués, des caractères

asiatiques ou arabes...
Le consortium W3C prescrit actuellement l'encodage UTF-8 (qui
est un codage des caractères sur 1 à 4 octets).

Une des façons d'indiquer au navigateur de quelle façon le

document a été encodé est de le préciser dans le <head> par
une balise:
<meta charset= ''UTF-8''>

19

Exemple
<!DOCTYPE html>
<html>
<head>
<title>Page HTML </title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<p>Hello world!</p>
</body>
</html>

20

10
 07/10/15

Gestion du texte :

- <b>voici un texte en gras</b> (BOLD en anglais) :

permet de mettre un texte en gras.
Résultat : voici un texte en gras.
- <i>texte</i> (Italic) : permet de passer un texte en
Italique. Résultat : voici un texte en italique.
- <u>texte</u> (Underligne) : permet de souligner un texte.
Résultat : voici un texte souligné.
- <s>texte</s> (Strike) : permet de rayer un texte.
Beaucoup moins utile. Résultat : voici un texte rayé.

<!DOCTYPE html>
<html>
<head>
<title>Line Break Example</title>
</head>
<!DOCTYPE html> <body>
<html> <p>Hello<br />
<head> You delivered your assignment
<title>Heading Example</title> ontime.<br />
</head> Thanks<br />
<body>
Mahnaz</p>
<h1>This is heading 1</h1> <p>This is paragraph one and should
<h2>This is heading 2</h2> be on top</p>
<h3>This is heading 3</h3> <hr />
<h4>This is heading 4</h4> <p>This is paragraph two and should
<h5>This is heading 5</h5> be at bottom</p>
<h6>This is heading 6</h6> </body>
</body> </html> 22
</html>

11
 07/10/15

Mise en page

<BR> : passer à la ligne, (effet cumulable)

<P> : sauter une ligne, (effet non cumulable)

<CENTER>texte</CENTER> : pour centre un texte dans la page

<P ALIGN="LEFT ou RIGHT ou CENTER">texte à aligner</P> : pour

aligner votre texte

<HR SIZE="épaisseur en pixels" WIDTH=largeur

ALIGN=alignement> : créé une barre, peu utilisée mais utile
parfois...

Mise en page

<!DOCTYPE html>
<html>
<head>
<title>Align Attribute Example</title>
</head>
<body>
<p align="left">This is left aligned</p>
<p align="center">This is center aligned</p>
<p align="right">This is right aligned</p>
</body>
</html>

12
 07/10/15

Images/Audio/Video

- pour insérer les images:

<IMG SRC="nomdevotreimage.extension"
WIDTH="largeurenpixel" HEIGHT="hauteurenpixel">

<IMG SRC= " image.jpg" >

<IMG SRC= " image.jpg" WIDTH= " 300" HEIGHT= " 300">

<IMG SRC= " image.jpg" WIDTH= " 50%" >

Images/Audio/Video

- Insertion d'un élément audio

<audio src="musique.mp3" controls></audio>

<audio controls>
<source src="hype_home.mp3">
<source src="hype_home.ogg">
</audio>

- Insertion d'une vidéo

<video src="sintel.mp4"></video>

<video controls poster="sintel.jpg" width="600">

<source src="sintel.mp4">
<source src="sintel.webm">
<source src="sintel.ogv">
</video>

13
 07/10/15

Tableaux

Structure simple d'un tableau (dans l'ordre d'apparition

des balises) :
- <TABLE> : pour ouvrir un tableau.
- <TR> : pour ouvrir une ligne.
- <TD></TD> : pour ouvrir et fermer une cellule.
- <TH></TH> : pour ouvrir et fermer une cellule entête
contenant du texte centré et en gras.
- </TR> : pour fermer une ligne.
- </TABLE> : pour fermer le tableau.

Tableaux

Options de tableau :

¡ <TABLE WIDTH="X" HEIGHT="X">

où X est la largeur ou la hauteur du tableau définie en
pixels ou en pourcentage en ajoutant %.

¡ <TABLE BORDER="X">
où X est l'épaisseur de la bordure.

¡ <TABLE CELLSPACING="X">
où X est l'espace entre les cellules.

¡ <TABLE CELLPADDING="X">
où X est l'espace entre une cellule et son contenu.

14
 07/10/15

<!DOCTYPE html>
<html>
Tableaux <head>
<title>HTML Table Header</title>
<!DOCTYPE html> </head>
<html> <body>
<head> <table border="1" bordercolor="green"
<title>HTML Tables</title> bgcolor="yellow">
</head> <tr>
<body> <th>Name</th>
<table border="1"> <th>Salary</th>
<tr> </tr>
<td>Row 1, Column 1</td> <tr>
<td>Row 1, Column 2</td> <td>Ramesh Raman</td>
</tr> <td>5000</td>
<tr> </tr>
<td>Row 2, Column 1</td> <tr>
<td>Row 2, Column 2</td> <td>Shabbir Hussein</td>
</tr> <td>7000</td>
</table> </tr>
</body> </table>
</html> </body>
</html>

Liens

Un lien externe c'est :

<A HREF="http://www.nomdusite.com">Accès au site
nomdusite.com</A>

Un lien interne c'est :

<A HREF="mapage.html">Aller sur ma page</A>

Un lien mail c'est :

<A HREF="mailto:pseudo@provider.com">Cliquez pour
m'écrire sur pseudo@provider.com</A>

Un lien sur une image c'est : <A HREF="http://

www.nomdusite.com"><IMG SRC="logodusite.jpg"
BORDER="0" WIDTH="X" HEIGHT="X"></A>

15
 07/10/15

Liens

Liens

<!DOCTYPE html>
<html>
<head>
<title>Div Tag Example</title>
</head>
<body>
<div id="menu" align="middle" >
<a href="/index.htm">HOME</a> |
<a href="/about/contact_us.htm">CONTACT</a> |
<a href="/about/index.htm">ABOUT</a>
</div>

<div id="content" align="left" bgcolor="white">

<h5>Content Articles</h5>
<p>Actual content goes here.....</p>
</div>
</body>
</html>

16
 07/10/15

Frame simple
Un jeu de frame simple (sommaire en haut, contenu en bas) :

<html>
<head>
<title>Bienvenue sur mon site</title>
</head> <frameset rows="50,*" frameborder="NO"
border="0" framespacing="0">
<frame name="sommaire" src="sommaire.html" noresize
scrolling="NO">
<frame name="contenu" src="page1.html">
</frameset>
¡ <noframes>
<body bgcolor="#FFFFFF">
Désolé votre navigateur ne gère pas les frames !
</body>
</noframes>
</html>

Frames
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>HTML Frames</title> <title>HTML Frames</title>
</head> </head>
<frameset rows="10%,80%,10%"> <frameset cols="25%,50%,25%">
<frame name="top" src="/html/ <frame name="left" src="/html/
top_frame.htm" /> top_frame.htm" />
<frame name="main" src="/html/ <frame name="center" src="/html/
main_frame.htm" /> main_frame.htm" />
<frame name="bottom" src="/ <frame name="right" src="/html/
html/bottom_frame.htm" /> bottom_frame.htm" />
<noframes> <noframes>
<body> <body>
Your browser does not support Your browser does not support
frames. frames.
</body> </body>
</noframes> </noframes>
</frameset> </frameset>
34
</html> </html>

17
 07/10/15

HTML Iframes

<!DOCTYPE html>
<html>
<head>
<title>HTML Iframes</title>
</head>
<body>
<p>Document content goes here...</p>
<iframe src="/html/menu.htm"
width="555" height="200">
Sorry your browser does not support
inline frames.
</iframe>
<p>Document content also go here...</p>
</body>
</html>

35

Couleurs : Polices :

Pour donner de la couleur à votre texte :

<FONT COLOR="#votrecodeenhexa">votre texte</FONT>

Pour définir la taille de votre police c'est :

<FONT SIZE="votre taille de 1 à 7">votre texte</FONT>

Pour définir le type de votre police c'est :

<FONT FACE="type de police">votre texte</FONT>

18
 07/10/15

Page-tableaux /couleur :

Définir le fond de page c'est :

<BODY BGCOLOR="#votrecodeenhexa">

Définir la couleur de bordure de votre tableau c'est : <TABLE

BORDERCOLOR="#votrecouleurenhexa"
BORDER="tailledelabordure">
ou
<TABLE BORDERCOLORLIGHT="#0000FF"
BORDERCOLORDARK="#votrecouleurenhexa"
BORDER="tailledelabordure">

Définir la couleur de fond de votre tableau c'est :

<TABLE BGCOLOR="#votrecouleurenhexa">

Définir la couleur de fond d'une cellule de votre tableau c'est :

<TD BGCOLOR="#votrecouleurenhexa">

listes à puces

Une liste non ordonnée est une collection d'éléments connexes qui
n’ont pas d’ordre. Cette liste est créée en utilisant la balise <ul>.
Chaque élément de la liste est marquée par une bulle.

<!DOCTYPE html>
<html> <ul type="square">
<head> <ul type="disc">
<title>HTML Unordered List</title> <ul type="circle">
</head>
<body>
<ul>
<li>Beetroot</li> • Beetroot
<li>Ginger</li> • Ginger
<li>Potato</li> • Potato
<li>Radish</li> • Radish
</ul>
</body>
38
</html>

19
 07/10/15

listes ordonnées

Cette liste est créée en utilisant balise <ol>. La

numérotation commence à un et est incrémenté de un
pour chaque élément de liste ordonnée avec <li>.

<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head> <ol type="1"> - Default-Case Numerals.
<body> <ol type="I"> - Upper-Case Numerals.
<ol> <ol type="i"> - Lower-Case Numerals.
<li>Beetroot</li> <ol type="a"> - Lower-Case Letters.
<li>Ginger</li> <ol type="A"> - Upper-Case Letters.
<li>Potato</li>
<li>Radish</li> 1. Beetroot
</ol> 2. Ginger
</body> 3. Potato
</html> 4. Radish
39

Liste déroulante

<SELECT NAME="genre" SIZE="1">

<OPTION VALUE="Madame" selected>Madame</OPTION>
<OPTION VALUE="Mademoiselle">Mademoiselle</OPTION>
<OPTION VALUE="Monsieur">Monsieur</OPTION>
</SELECT>
¡ Des boutons radio : <INPUT TYPE="radio" NAME="Bouton
choisi" VALUE="Contact téléphonique">
¡ Des cases à cocher : <INPUT TYPE="checkbox"
NAME="Case coché" VALUE="Création de site">
¡ Un bouton d'envoi : <INPUT TYPE="submit"
NAME="Submit" VALUE="A répondu à mon formulaire">

20
 07/10/15

La balise <div>

C’est un conteneur qui peut inclure tous les tags html (tels que
les paragraphes les tableaux, les listes, les images ..., et
également d'autres divisions).
Cet élément est l'un des plus utilisé pour structurer les pages
html en plusieurs grandes sections (en tête, partie principale,
partie navigation, pied de page ...).
<body>
<div style="background-color:black; color:white; padding:20px;">

<h2>London</h2>

<p>London is the capital city of England. </p>

<p>Standing on the River Thames, London has been a major settlement
for two millennia, </p>
</div>

</body> 41

La balise <SPAN>

¡ Permet de caractériser ou mettre en

évidence une portion de texte à l'aide
d'un style prédéfini.
<!DOCTYPE html> <html>
<head>
<title>HTML span Tag</title>
</head>
<body>

<p>This is <span style="color:red">red</span> and

this is <span style="color:green">green</span></p>

</body>
</html> 42

21
 07/10/15

Formulaires

¡
Insérer un formulaire commence toujours par le placement de :

¡ <FORM METHOD="post" ACTION="mailto:votrepseudo@votreprovider.com"

ENCTYPE="TEXT/PLAIN">
Ici vos champs de choix.
</FORM>

Le traitement d’un le formulaire doit être précisée en utilisant les deux

attributs suivants :

L'attribut ACTION
Il indique l'action à exécuter lorsque lors de l'envoi des données.
L'attribut METHOD
Il permet de définir la méthode de transfert des données vers le serveur.
Les deux valeurs possibles sont GET et POST.

<form action="action_page.php" method="get">

Formulaires

¡
Les différents champs (à mettre entre les balises <FORM> et </FORM> sont (par
exemple) :

¡ Champ de ligne simple : <INPUT TYPE="text" NAME="sonnom" SIZE="25"

MAXLENGTH="50" VALUE="Entrez ici votre nom >

¡ SELECT: liste déroulante

¡ Les cases à cocher

¡ Champ multi-lignes : <TEXTAREA NAME="son adresse" ROWS="3"

COLS="25" WRAP="PHYSICAL">Entrez ici votre adresse</TEXTAREA>

https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-
avec-html5-et-css3/les-formulaires-8

22
 07/10/15

Formulaires

L'élément <input> est l'élément le plus important des formulaires.

L'élément <input> a de nombreuses variantes, en fonction du type

d'attribut.

<input type="text">

<form>
First name:<br>
<input type="text"
name="firstname">
<br>
Last name:<br>
<input type="text"
name="lastname">
</form> 45

Formulaires

L'élément <input> est l'élément le plus important des formulaires.

L'élément <input> a de nombreuses variantes, en fonction du type

d'attribut.

<input type="radio">

<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form>

46

23
 07/10/15

Formulaires

L'élément <input> est l'élément le plus important des formulaires.

L'élément <input> a de nombreuses variantes, en fonction du type

d'attribut.

<input type="submit">

<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
47
</form>

Formulaires

L'élément <select> définit une liste déroulante:

<form action="action_page.php">
*Volvo
<select name="cars"> Saab
<option value="volvo">Volvo</option> Fiat
Audi
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br><br>
<input type="submit">
</form>

Volvo
Saab
<option value="fiat" selected>Fiat</option> *Fiat
Audi

24