Cours Introduction a la programmation Web ISI Ettaieb Abdessattar

22/04/2017Ettaieb Abdessattar
Abdessattar
Ettaieb
Cours Introduction a la
programmation Web

● Dans ce chapitre nous allons aborder les aspects statiques des pages
WEB.
● Nous introduisons HTML, CSS et les formulaires.
● Nous présentons HTML en général mais nous insistons sur l’usage de
XHTML.
● Il est important de toujours séparer le contenu de la présentation. HTML
autorise quelques élément de présentation mais nous vous conseillons
de ne pas les utiliser.
● HTML sert pour le contenu et uniquement le contenu.
● Tous les aspects de présentation sont pris en charge par CSS.

Cours Dev. Web de Mr. Ramzi Guetari - UVT

Ce chapitre est donc composé de trois sous
chapitres :
● Un sous chapitre consacré à HTMLet XHTML.
● Un sous chapitre consacré à CSS (Cascading
Style Sheets)
● Un sous chapitre consacré aux formulaires

HTML: Hyper Text Markup Language
● UneHYPER structure est une structure
non linéaire. Composées de nœuds avec des
liens entre eux.
● TEXT : le contenu de la structure est du texte.
● MARKUP : des données de marquage ou
de balisagepermettant d’assigner à chaque
partie marquée/balisée une certaine sémantique.
HTML : LANGAGE DE BALISES POUR LA CRÉATION DE DOCUMENTS
HYERTEXTES
● HTML est une recommandation du W3C
: http://www.w3.org/TR/html/
http://www.w3.org/TR/tr-technology-

● HTML n’est pas un langage de programmation, il sert à la
description de documents.
● L’usage de HTML se limite aucontenu
d’un document et non à sa
présentation.
● Les documents HTML sont des documents plus ou moins
structurés. La structure est décrite dans une DTD
(Document TypeDéfinition).
● La structure d’un document HTML est imposée par la DTD
HTML.
● HTML est destiné à être le plus portable possible :
Balisage logique.
Dégradation progressive de présentation.

● HTML est un format ouvert, il n’impose aucune contrainte
ni matérielle ni logicielle. Un éditeur de texte suffit pour
produire du HTML.
● L’accessibilité est une caractéristique primordiale des
documents HTML.
● XHTML est accessible par tout le
monde y compris les daltoniens,
malvoyants, aveugles, etc.
● HTML ne permetpas de décrire un
comportement dynamique des
documents.

● WWW Project Proposal (mars1989)
● W3 Consortium (1994) http://www.w3.org
● HTML 1.0 (août1994)
● HTML 2.0 (novembre 1995)
● HTML 3.2 (janvier 1997)
● HTML 4.0 (avril 1998)
● HTML 4.01 (décembre 1999)
● XHTML 1.0 (janvier 2000)
● HTML 5 depuis 2007 au W3C, recommandation
2013/2014

contenu
texte
d’un
document HTML.
● Un élément HTML commence par une
balise ouvrante, suivit d’un contenu texte et
se termine par une balise fermante.● Exemple :
Ceci
est un paragraphe
est le tag ouvrant l’élément
est le tag fermant l’élément
"Ceci est un paragraphe" représente le contenu texte de
l’élément
● Le contenu du tag (ce qui est entre < et >) est le nom de
l’élément. Dans l’exemple c’est « P» qui représente un
paragraphe en HTML
● Il y a des éléments vides exemple (ou encore
 )
● Une balise (tag) associeune sémantique
au

FICHIER HTML MINIMUM (DOCUMENT SANS CONTENU)
<!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
doc-01.html

● Les éléments obligatoires dans un document HTML sont :
● L’élément <HTML>: c’est cequ’on appelle
le DOCTYPE (type du document)
● L’élément <BODY>: le corps d’un document HTML.
● L’élément <BODY> est un « sous élément » del’élément
<HTML>
● Les éléments HTML ne se chevauchent pas c’est-à-dire
qu’un élément
Bouvert dans un élément Adoit être fermé avant de fermer
l’élément A
<A> … … … </A>
JUSTE
<A> … … </A> … 
FAUX

● Les éléments HTML peuvent avoir des attributs.
● Les attributs sont des propriétés associées aux éléments et
servent comme des compléments d’information sur ces
derniers (accessibilité, navigation, etc.)
● Un attribut est une paire : nom="valeur"
nom : nom de l’attribut
valeur : valeur de l’attribut (doit être entre guillemets ou entre
apostrophes)
● Les noms des attributs doivent être en minuscule en
XHTML
● Exemple :
Paragrphe en français …

● Comme pour tout langage, les commentaire permettent une
aide non négligeable à la compréhension.
● HTML dispose de commentaires.
● Un commentaire débute par et peut s’étaler sur
plusieurs lignes
● On vous recommande de ne pas utiliser un double tiret « --
» à l’intérieur d’un commentaire.
● Il est interdit de placer des commentaires à l’intérieur d’un
élément.
● Exemple :

à
quelqu
es
● La syntaxeHTML et XHTMLsont très
semblables différences près :
XHTML est plus stricte queHTML.
Les éléments XHTML doivent être correctement
imbriqués. Les documents XHTML doivent être
bien formés et valides. Les noms des balises
doivent être en minuscule.
Tous les éléments XHTML doivent être fermés.
● La DTDHTML est une DTD SGML (Standard
Generalized Markup Language)
● La DTD XHTML est écrite en XML.

<?xml ... ?>
<!DOCTYPE ... >




<html ...>
<head>
<meta.../>
<title> titre </title>
</head>
<body>
…
</body>
</html>
EXEMPLE DE DOCUMENTS
XHTML

16
● Il est important de valider les document (X)HTML avant de
les publier.
● Le W3C met à disposition des développeurs un validateur
en ligne.
● Validateur (X)HTML: http ://validator.w3.org
● D’autres validateurs sont disponibles,
certains éditeur (X)HTML WYSIWYG
font aussi office de validateurs

● <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN“
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
● <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN“
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
● <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
● <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN”
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

PRINCIPALES DTD
● 1.0 Strict
Usage pour un balisage propre, sans informations relatives à
la présentation (sans information sur “font”, “color”, ou “size”)
Il faut utiliser CSS (Cascading Style Sheets) pour ajouter des
éléments de présentation au document.
● 1.0 Transitional
Pour du HTML avec ou sans
CSS Autorise les éléments
HTML dépréciés
● 1.0 Frameset : à utiliser si le document doit supporter les
frames HTML.
● 1.1 : comme la 1.0 Strict, avec le support pour le chinois.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Développement Orienté WEB</title>
</head>
<body>
<h1>Un simple paragraphe</h1>
Exemple de documents XHTML simple basé sur la DTD 1.0 stricte
</body>
</html>
doc-02.html

Contenu de l’élément title
Contenu de l’élément h1
Contenu de l’élément p

● Balises de structure
● Balises de mise en forme (dépréciées, ne pas en
faire usage)
● Balises Meta (entêtes)
● Balise pour les liens hypertextes
● Balises de listes
● Balises de table (tableaux)
● Balises de formulaire
● Balises d’objets, images et applets (images
cliquables)
● Balises de Frame

Les balises du contenu XHTML
peuvent être :
● Bloc (BLOCK)
HTML
BLOC
● En ligne
(INLINE)
HTML EN
LIGNE

BALISE : HTML
● L’élément définissant un document
● Type : Balise Structurelle
● Contient deux éléments HEAD et BODY
● Attributs :
xmlns="http://www.w3.org/1999/xhtml"
Namespace du document (indique que les balises utilisées se
réfèrent uniquement au XHTML et pas à d'autres types de docs
XML, il est possible d’inclure d’autres namedpace)
xml:lang et lang : identification de la langue du document
(redondant): fr, en, de, it, ar, etc. Spécialisations possible: en-US, en-
UK, etc.

BALISE : HTML
EXEMPLE
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="fr"
lang="fr">
<head>
...
</head>
<body>
...
</body>
</html>

BALISE : HTML/HEAD
● L’élément définissant les entêtes et les métadonnées d’un
document
● Contient deux éléments TITLE (obligatoire),
META, LINK,SCRIPT, STYLE, BASE
● Attributs :NON

BALISE : HTML/HEAD/TITLE
● L’élément définissant le titre du document et apparait
généralement en haut du navigateur (voir diapo 20).
● Contient seulement du texte
● Attributs :NON

BALISE : HTML/HEAD/META
● L’élément définissant les meta-
information sur le document.
Les métadonnées servent, entre autres, aux
moteurs de recherche.
● Élement de type contentless (sans contenu)
● Attributs :NON

BALISE :
HTML/HEAD/META
EXEMPLES<meta name="author" content=“Ramzi GUETARI"/>
<meta name="keywords" content=“WEB,HTML,CSS,Formulaires"/>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
Redondant avec la processing instruction :
<?xml version="1.0" encoding="iso-8859-1"?>
<meta http-equiv="Refresh"
content="15; url=http://www.uvt.rnu.tn/"/>
rafraîchit au bout de 15 secondes. Utile pour redirections

BALISE : HTML/HEAD/LINK
● L’élément définissant un lien avec une ressource tel qu’une
feuille de style par exemple.
● Élement de type contentless (sans contenu)
●Attributs :
NON
EXEMPLE :
<link href="../../styles/uvt-style.css“
rel="stylesheet" type="text/css"/>

BALISE DE STRUCTURE :
HTML/HEAD/SCRIPT
•Code Javascript ou autre
HTML/HEAD/STYLE
•Style (CSS) inline
HTML/HEAD/BASE
Base pour le calcul des liens relatifs

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict //EN"
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="fr" lang="fr" >
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-15"/>
<title>Un document xhtml sans contenu</title>
</head>
<body>
</body>
</html>
BALISE : HTML/HEAD
EXEMPLE

BALISE : HTML/BODY
● L’élément définissant Le corps du document
● Le corps est structuré en sections, paragraphes, listes, etc.
● Peut contenir les éléments : P | H1 | H2 | H3 | H4 | H5 | H6 |
OL | UL | DL | PRE | DIV | BLOCKQUOTE | FORM | HR |
TABLE | FIELDSET | ADDRESS
● Peut contenir des attributs de style mais on recommande
une feuille de style pour cela.

BALISE : P
● L’élément définissant un paragraphe
● Type : Balise Block
● La balise P admet tous les attributs commun à HTML (voir
liste complète ici : http://www.w3.org/TR/html-
markup/global-attributes.html). Parmi les attributs les plus
utilisés :
lang / xml:lang permettant d’associer la langue utilisée pour
rédiger le paragraphe
dir qui indique la direction du texte (dir="ltr" : de gauche à
droite, dir="rtl" : de droite à gauche)
EXEMPLE : voir l’exemple doc-04.html

BALISE : HX (X=1,…6)
● L’élément Hx définit un titre de niveau x.
Il existe six niveaux représenter les titres de
sections, par importance décroissante : H1, H2,…, H6.
● Le problème c’est qu’on peut commencer par H6 et terminer
par H1. Il n’y a pas de hiérarchie et par conséquent un
manque de structuration.

 BALISE : OL
● L’élément définissant une liste numérotée.
● Contient l’élément LI
● Attributs : les attributs globaux de HTML mais aussi :
 reversed : attribut booléen qui indique un ordre décroissant lorsqu’il est
présent.
 start : doit avoir une valeur entière valide indiquant le valeur initiale.

BALISE : LI
● L’élément définissant un item d’une liste.
● Contient du texte uniquement.
● Attributs : les attributs globaux de HTML. Si l’élément LI est
situé dans une liste de type OL, il peut contenir l’attribut
value. Cet attribut prend une valeur entière valide et
représente le numéro d’ordre de l’item.

BALISE : UL
● L’élément définissant une liste à puces (non
numérotée).
● Contient l’élément LI
● Attributs : les attributs globaux de HTML.

BALISE : DL
● L’élément définissant une liste de
définition.
● Contient l’élément DT (titre) et DD
(donnée).
● Attributs : les attributs globaux de
HTML.

BALISE : PRE
● L'élément PRE représente un bloc de texte pré-formaté,
dans lequel la structure est représentée par les
conventions typographiques plutôt que par des éléments.
● Contient du texte uniquement

BALISE : DIV
● L'élément DIV n'a aucune signification particulière et
permet simplement de regrouper ses éléments fils. Il peut
être utilisé avec les attributs classe, lang et titre pour
marquer une sémantique commune à un groupe
d'éléments consécutifs.
● Type : Balise Structurelle (n’utiliser qu’en dernier recours)
Dans l’exemple, une division contient du texte en anglais britannique alors
que le document est rédigé en américain.

BALISE : BLOCKQUOTE
● Le contenu dans un BLOCKQUOTE représente une
citation d'une autre source, dont l'adresse d’origine, si elle
en a un, peut être cité dans l'attribut cite.
● Attributs : les attributs globaux de HTML et l’attribut cite
dont la valeur est une URL valide représentant un lien sur
le texte origine cité.

BALISE : HR
● L'élément HR représente une rupture thématique au niveau
du paragraphe, par exemple, un changement de scène
dans une histoire, ou une transition à un autre sujet dans
une section d'un livre de référence.
● Elément contentless

BALISE : TABLE
● Permet de définir les tableaux en HTML.
● Contient dans l'ordre suivant : éventuellement un élément
CAPTION suivi de zéro ou plusieurs éléments
COLGROUP, suivi éventuellement par un élément THEAD,
suivi éventuellement par un élément TFOOT, suivie par
zéro ou plusieurs éléments de TBODY ou un ou plusieurs
éléments de TR, suivie éventuellement par une élément
TFOOT (mais il ne peut y avoir qu’un seul élément TFOOT
au total), éventuellement mélangé avec un ou plusieurs
éléments de script.

BALISE : TABLE
● L’élément CAPTION représente un titre ou une légende de
la table.
● COLGROUP permet de grouper une ou plusieurs
colonnes. Dans l’exemple (doc-13.html) on regroupe les
colonnes 3 par trois (l’élément COL)
● THEAD représente le bloc de lignes qui se composent
d'étiquettes de colonne (en-têtes) pour l'élément TABLE
parent.
● L'élément TFOOT représente le bloc de lignes qui se
composent des résumés de colonnes (pieds de page) pour
l'élément TABLE parent.

BALISE : TABLE
● L'élément TBODY représente un bloc de lignes qui consiste
en un corps de données pour l'élément TABLE parent. Il
peut donc séparer la table en bloc de lignes. Dans
l’exemple (), la table est séparée en blocs de 3 lignes
chacun grace à l’élément tbody.
● L'élément TR représente une rangée de cellules d'un
tableau. Il est composé d’élément TH ou TD.

Cet exemple utilise CSS qu’on verra dans le chapitre 6
BALISE : TABLE
● L'élément TH est utilisé pour définir une cellule d'en-tête qui
est utilisé à l'intérieur d'une table
● L'élément TD est utilisé pour définir une
cellule de données qui est utilisé à l'intérieur
d'une table

BALISE : ADDRESS
● L'élément ADDRESS représente les informations de
contact pour l’élément ancêtre ARTICLE ou DODY le plus
proche. Si c'est l'élément BODY, les informations de
contact s'applique au document dans son ensemble.

BALISE : IMG
● Un élément IMG représente une image.
● Attributs : deux attributs obligatoires : src (url absolue ou
relative indiquant le fichier source de l’image) et alt (qui
fournit un contenu textuel descriptif de l’image pour ceux
qui ne peuvent pas traiter les images ou qui ont désactivé
le chargement des images).

BALISE : A
● Si l'élément A possède un attribut href, alors il représente
un lien hypertexte (une ancre hypertexte) marqué par son
contenu. S’il n'a pas d'attribut href, alors il représente un
espace réservé pour le cas où un lien aurait du ou devrait
être placée.
● En plus de l’attribut href, l’élément A peut avoir les attributs
target, download, rel, hreflang, et type qui ne sont
utilisés que si l’attribut href est présent.

BALISE : OBJECT
● L'élément OBJECT peut représenter une ressource
externe, qui, en fonction du type de la ressource, est
traitée comme une image, en tant que contexte de
navigation imbriqués, ou comme une ressource externe
pouvant être traitées par un plugin (vidéo par exemple).
● L'attribut data, le cas échéant, indique l'adresse de la
ressource. S'il est présent, l'attribut doit être une URL
valide et non vide.

Cours Introduction a la programmation Web ISI Ettaieb Abdessattar

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (14)

Similaire à Cours Introduction a la programmation Web ISI Ettaieb Abdessattar

Similaire à Cours Introduction a la programmation Web ISI Ettaieb Abdessattar (20)

Plus de Abdessattar Ettaieb

Plus de Abdessattar Ettaieb (10)

Cours Introduction a la programmation Web ISI Ettaieb Abdessattar