cours base_______________________HTML.ppt

1
Techniques du web
LST Informatique
FST 2016-2017
Mohamed OUZARF

2
À 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.
https://codepen.io/techie4good/pen/PGYvRB

C’est quoi : HTML ?
 Tout d’abord un bréf rappel Historique
de quelques notions fondamentales:
3
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

4
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
2009 le consortium W3C abandonne définitivement XHTML.
En 2007 nait une première ébauche d'HTML5

5
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
transmet à un serveur et en interprète le résultat pour l'afficher sur un écran.

6
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...

7
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…).

8
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

9
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.

10
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.

11
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Titre</title>
</head>
<body>
</body>
</html>
Code minimal d'une page HTML :

12
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.

13
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''>

14
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..

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

16
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

18
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 -->
les commentaires

19
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''>
l'encodage

Exemple
20
<!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>

<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

23
<!DOCTYPE html>
<html>
<head>
<title>Heading Example</title>
</head>
<body>
<h1>This is heading 1</h1>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Line Break Example</title>
</head>
<body>
<p>Hello<br />
You delivered your assignmentontime.<br />
Thanks<br />
Mahnaz</p>
<p>This is paragraph one and should be on
top</p>
<hr />
<p>This is paragraph two and should be at
bottom</p>
</body>
</html>
Exemples

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>
Exemple

- pour insérer les images:
<IMG SRC="nomdevotreimage.extension"
WIDTH="largeurenpixel" HEIGHT="hauteurenpixel">
Images/Audio/Video
<IMG SRC= " image.jpg" >
<IMG SRC= " image.jpg" WIDTH= " 300" HEIGHT= " 300">
<IMG SRC= " image.jpg" WIDTH= " 50%" >

Images/Audio/Video
<audio src="musique.mp3" controls></audio>
- Insertion d'un élément audio
- Insertion d'une vidéo
<video controls poster="sintel.jpg" width="600">
<source src="sintel.mp4">
<source src="sintel.webm">
<source src="sintel.ogv">
</video>
<audio controls>
<source src="hype_home.mp3">
<source src="hype_home.ogg">
</audio>
<video src="sintel.mp4"></video>

27
Encodage Audio & Vidéo
à partir d'un signal échantillonné (théorème de Shannon), on a
imposé aux CD audio un format de stockage du son ayant les
données suivantes :
Fréquence d'échantillonnage = 44,1 kHz
Données codées sur 16 bits
Son stéréo
La place occupée par une minute de musique. On a 44100
échantillons en 1 seconde (44,1 kHz). Chaque échantillon est
codé sur 16 bits soit 2 octets et le son est stéréo. Soit 10 Mo
On voit qu'un signal audio au format CDA
prend beaucoup de place d'où l'idée de
chercher à le compresser « ENCODER ».
Pour encoder un morceau de musique,
on a besoin du fichier représentant le
morceau à encoder et d'un encodeur.

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.
Tableaux

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

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>
Liens

DIV
<!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>
Liens

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>
Frame simple

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

HTML Iframes
36
<!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>
<iframe width="560" height="315"
src="https://www.youtube.com/embed/m_fvJATkRl8" frameborder="0"
L’alternative YouTube

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>
Couleurs : Polices :

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">
Page-tableaux /couleur :

39
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.
listes à puces
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>
• Beetroot
• Ginger
• Potato
• Radish
<ul type="square">
<ul type="disc">
<ul type="circle">

40
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>
<body>
<ol>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>
1. Beetroot
2. Ginger
3. Potato
4. Radish
<ol type="1"> - Default-Case Numerals.
<ol type="I"> - Upper-Case Numerals.
<ol type="i"> - Lower-Case Numerals.
<ol type="a"> - Lower-Case Letters.
<ol type="A"> - Upper-Case Letters.

<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">
Liste déroulante

42
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 ...).
La balise <div>
<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>

La balise <SPAN>
 Permet de caractériser ou mettre en
évidence une portion de texte à l'aide
d'un style prédéfini.
43
<!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>


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>
Formulaires
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">


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>
Formulaires
https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-ave
c-html5-et-css3/les-formulaires-8

46
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>
Formulaires

47
d'attribut.
Formulaires
<input type="radio">
<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form>

48
d'attribut.
Formulaires
<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">
</form>

L'élément <select> définit une liste déroulante:
<form action="action_page.php">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br><br>
<input type="submit">
</form>
*Volvo
Saab
Fiat
Audi
Formulaires
<option value="fiat" selected>Fiat</option>
Volvo
Saab
*Fiat
Audi

TP
50
Réaliser un site web à partir d’une maquette :
1- construire le squelette HTML de la page.
2- mettre en forme la page avec CSS.

cours base_______________________HTML.ppt

Contenu connexe

Similaire à cours base_______________________HTML.ppt (20)

Plus de AmineReal (11)

Dernier (17)

cours base_______________________HTML.ppt

Notes de l'éditeur