Vous êtes sur la page 1sur 34

Technologies Web

HTML
Wajdi GARALI

INSAT 2010
Evaluation de connaissance
 Qu’est ce qu’un site Web ?
 Quelle différence existe entre une
application et un site Web ?
 Quelles sont les bonne pratique d’un
développement d’un site Web ?
– Règle de développement multimédia
– Déploiement d’un site Web?
– Architecture Web?

2
Web Statique
 Un site Web statique est un site ou
chacune des pages est créée en HTML.
Un ordinateur qui se connecte au
serveur, demande une page. Celle ci lui
est directement servie (elle est stockée
toute prête sur le serveur)
 Un site Web statique est un site dont les
données ne dépendent pas de
l'utilisateur qui le visite.

3
Web Statique

Architecture d’accès

4
Web Dynamique
 Un site dynamique est un site qui prend
en compte certains paramètres pour
générer la page à afficher en fonction de
paramètres (par exemple en fonction de
l'utilisateur : un membre d'un forum)

5
Web Dynamique
 Par opposition, un site Web dynamique
est un site Web dont les pages sont
générées dynamiquement à la demande.
 Le contenu est obtenu (par exemple) en
combinant l'utilisation d'un langage de
scripts ou de programmation et une
base de données.
 Il s'agit souvent de PHP pour le langage
et MySQL pour la base de données.
 Il existe d’autres langage comme ASP,
JSP, et d’autre bases de données SQL
Serveur, Oracle, etc.
6
Web Dynamique

Architecture d’accès

7
HTML (Introduction)
La démocratisation du World Wide
Web, littéralement la large toile
d'araignée mondiale, a engendré la
nécessité de développer des sites
Internet adaptés aux aspirations du
public en matière de visibilité,
d'attraction et de convivialité et en
adéquation avec les technologies
Internet déjà existantes
8
HTML (Introduction)
l'organisme W3C (World Wide Web
Consortium) chargé de la
standardisation des technologies
du Web, a élaboré un langage de
développement appelé HTML
(Hyper Text Market Language)
fonctionnant sur l'ensemble des
plateformes existantes ; Windows,
Linux, MacOS, etc.
9
HTML (Introduction)
 Depuis l'adoption de la quatrième
version en 1997, HTML est devenu un
outil basique de développement web.
 WYSIWYG : What You See Is What You
Get. (Ce que vous voyez, vous
l'obtenez).
 Se lancer dans l'apprentissage de ce
langage et à concevoir des sites à
l'allure professionnelle et attrayante.

10
HTML (Plan du cours)
 Structure
 Le texte
 Les images
 Les liens
 Les tableaux
 Les cadres
 Les formulaires
 Les autres langages
– Insertion des scripts
– Insertion par objet
– ...
11
HTML (Structure)
Les balises
– Les balises sont des instructions
HTML. Elles sont reconnaissables à
leur forme particulière. En effet,
chacune est encadrée par les signes
inférieur à (" < ") et supérieur à (" > ").

<Instruction HTML>

12
HTML (Structure)
Les balises
– Les balises permettent l'ouverture et
la fermeture d'une instruction HTML.
Une barre oblique, le slash (" / ") en
l'occurrence, différencie les deux
types de balises.
– La balise <...> marque le début de
l'instruction. La balise </...> marque la
fin de l'instruction:
<Instruction HTML>
... Diverses éléments HTML ...
</Instruction HTML> 13
HTML (Structure)
Le type de document
La commande <DOCTYPE " ... ">* définit le type
de document.
Standard pris en
*Type de document
compte
"-//IETF//DTD HTML Level 1//EN" HTML 1.0
"-//IETF//DTD HTML//EN" HTML 2.0
"-//IETF//DTD HTML 3.0//EN" HTML 3.0
"-//W3C//DTD HTML 3.2//EN" HTML 3.2
"-//W3C//DTD HTML 4.0
HTML 4.0
Transitionnal//EN"
"-//W3C//DTD HTML 4.0//EN" HTML 4.0
" ... "
14
HTML (Structure)
Le type de document
– Exemple:

<!DOCTYPE HTML PUBLIC


"-//W3C//DTD HTML 4.0//EN">
<HTML>
... Diverses commandes HTML ...
</HTML>

15
HTML (Structure)
La balise META
– Cette commande particulièrement
importante permet de mettre
directement à la disposition des
moteurs de recherche des
informations relatives au site.
– Exemple:

16
HTML (Structure)
La balise META
– La commande <META NAME=" M "
CONTENT=" D "> permet de décrire en
détail la page HTML et d'énoncer ses
propriétés.
– La commande <META HTTP-EQUIV="
M " CONTENT=" D "> définit une
information chargée avec la page
dans le protocole http

17
HTML (Structure)
La balise META
<HTML>
<HEAD>
<TITLE>TITRE PERTINENT</TITLE>
<META NAME="Author" CONTENT="Nom de l'auteur">
<META NAME="Description" CONTENT="Description du contenu
de la page">
<META NAME="Keywords" CONTENT="Liste des mots clés">
<META NAME="Robots" CONTENT="index/noindex,
follow/nofollow">
<META NAME="Made" CONTENT="adresse@eMail">
<META NAME="Owns" CONTENT="Nom du propriétaire">
<META NAME="Generator" CONTENT="Nom du logiciel">
...
</HEAD>
<BODY>
... Diverses commandes HTML ...
</BODY>
18
</HTML>
HTML (Structure)
Le corps du document
– Le corps de la page contient tous les
éléments visibles à partir d'un
navigateur : les liens, le texte, les
images, les éléments multimédias, les
formulaires, etc.
– Ainsi, le corps regroupe un grand
nombre d'attributs afin de définir la
couleur de fond ou de texte.
– La commande <BODY> marque le
début du corps. La commande
</BODY> marque la fin de du corps.
19
HTML (Structure)
Le corps du document

<HTML>
<HEAD>
<TITLE>Un titre pertinent</TITLE>
<META NAME="Description" CONTENT="...">
<HTTP-EQUIV="Date" CONTENT="01/01/2000">
...
</HEAD>
<BODY>
... Diverses commandes HTML ...
</BODY>
</HTML>
20
HTML (Texte)
Le texte
– Les titres
– Les paragraphes
– Les commandes de lignes
– La police
– Les listes

21
HTML (Texte)
 Les titres
– Comme dans un traitement de texte, la mise
en forme hiérarchisée du texte améliore
l'aspect visuel du document.
– Le langage HTML met six niveaux de titres
différents à la disposition des
programmeurs.
Cependant, le résultat fourni par les six
balises de titre peut dépendre du navigateur
utilisé pour afficher les pages.
– La commande <Hniveau de titre*> marque le
début du titre. La commande </Hniveau de
titre*> marque la fin du titre. 22
HTML (Texte)
 Les titres
<HTML>
<HEAD>
<TITLE>Un titre pertinent</TITLE>
<META NAME="Description"
CONTENT="...">
...
</HEAD>
<BODY>
<H1>Titre</H1>
... Diverses commandes HTML ...
</BODY>
</HTML> 23
HTML (Texte)
 Le paragraphe
– Afin d'améliorer la présentation du
texte dans un page, le langage HTML
fournit à l'utilisateur les moyens
nécessaires à un formatage complet
du texte.
– Une balise permet de formater un
texte brut en paragraphe.
– La commande <P> marque le début du
paragraphe. La commande </P>
marque la fin du paragraphe 24
HTML (Texte)
 Le paragraphe
<HTML>
<HEAD>
<TITLE>Un titre pertinent</TITLE>
<META NAME="Description" CONTENT="...">
...
</HEAD>
<BODY>
<H1 ALIGN="Alignement">Titre</H1>
<P>Paragraphe</P>
... Diverses commandes HTML ...
</BODY>
</HTML> 25
HTML (Texte)
 Les commandes de lignes
– Des instructions permettent d'insérer des nouvelles
de ligne (<BR>), ou d'empécher des sauts de ligne
(<NOBR>) ou encore d'organiser des ruptures de
ligne (<WBR>).
La commande <BR> coupe une ligne à un endroit
désiré.
L'attribut CLEAR="Marge"* interrompt le flux de texte et
le reprend lorsque la marge est dégagée, c'est-à-dire,
lorsque aucun objet flottant ne se trouve entre le
début de la ligne de texte et la marge.
La commande <NOBR> empêche une rupture de ligne.
La commande </NOBR> marque la fin de la rupture de
ligne.
La commande <WBR> permet au sein de l'instruction
<NOBR> de créer une rupture de ligne. Elle ne
fonctionne que dans Internet Explorer. 26
HTML (Texte)
 Les commandes de lignes
<HTML>
<HEAD>
<TITLE>Un titre pertinent</TITLE> <META
NAME="Description" CONTENT="...">
...
</HEAD>
<BODY>
<H1 ALIGN="Alignement">Titre</H1>
<P> Une première ligne<BR>
<NOBR>Une seconde ligne
<WBR> extrêmement longue
</NOBR>
</P>
... Diverses commandes HTML ...
</BODY>
</HTML> 27
HTML (Texte)
Les commandes de lignes

28
HTML (Texte)
 La police
– Plusieurs commandes permettent de définir
les caractéristiques de la police, en
l'occurrence le type, la taille et la couleur des
caractères.

– La commande <FONT FACE="Nom de la


police"*> définit les caractéristiques des
caractères. La commande </FONT> ferme la
commande

– Un attribut "FACE" définit la police, "SIZE"


s'occupe de la taille et "COLOR" prend en
charge la couleur. 29
HTML (Texte)
 La police
<HTML>
<HEAD>
<TITLE>Un titre pertinent</TITLE> <META
NAME="Description" CONTENT="...">
...
</HEAD>
<BODY>
<H1>Titre</H1>
<P ALIGN="left">Paragraphe</P>
<DIV ALIGN="right">
<FONT FACE="Nom de police"> Texte </FONT>
</DIV>
... Diverses commandes HTML ...
</BODY>
</HTML>
30
HTML (Texte)
 La police

31
Technologie
 Technique HTML simple
– Outil Editeur de Texte: Blocnote, Wordpad
 Dressez la liste des problèmes
techniques qui ont été résolus
– Résumez leur impact
 Dressez la liste de toutes les
incertitudes
– Indiquez la cause des incertitudes

32
Références
Cours HTML
http://www.cicrp.jussieu.fr

33
Objectifs fixés pour la
prochaine séance
 Évaluation des acquis
 Suite sur les liens en HTML
 Tableau en HTML
 Formulaire en HTML
 Tous les étudiants sont amenés à
reprendre le fichier HTML
 Travail demandé: réaliser un fichier
HTML en employant des structures, des
mises en forme et des liens différents.
– Le fichier fera preuve de l’évaluation
pratique.
34