HTML Css

Ministère de l’Enseignement Supérieur,
et de la Recherche Scientifique
Direction Générale des Etudes Technologiques
Institut Supérieur des Etudes Technologiques de Djerba
Support de cours
Programmation Web 1
Elaboré par :
Olfa HAMROUNI
Mouna KORT
Maèl SALAH JRAD
Public cible :
Classe de 1ère année
Licence appliquée : Technologies de l’informatique
Année Universitaire : 2016-2017

Support de cours Programmation Web1
Fiche Matière
Fiche descriptive de la matière : Programmation Web 1
Domaine de formation : Sciences et technologies
Mention : Technologie de l’informatique (TI)
Parcours : Tronc commun (TC)
Semestre : S1
Unité d’enseignement : Développement Web et Multimédia 1
Volume horaire : 21 heures (CI)
Coefficient : 2
Objectifs
 Introduire des terminologies liées au développement web
 Connaitre la syntaxe du langage HTML5
 Connaitre la syntaxe du langage CSS3
 Comprendre les technique de référencement
Pré-requis
 Connaissances générales sur l’Internet et le Web
Evaluation
 Devoir de contrôle
 Examen
 Travaux personnalisés
Moyens pédagogiques
 Tableau
 Fascicule de Travaux dirigés
Méthodologies
 Le cours s’articule autour des séances de travaux dirigés.
 Les TP sont distribués aux étudiants.
Table des matières

Chapitre1. Introduction au Web ............................................................................ 2
1. Introduction .......................................................................................................... 2
2. Définition .............................................................................................................. 3
3. Principe ................................................................................................................ 3
4. Evolution du Web ................................................................................................. 4
5. Les étapes de développement d’un site web .......................................................... 7
5.1. Planification du travail de développement ...................................................... 7
5.2. Mise en œuvre................................................................................................... 8
5.3. Conception ........................................................................................................ 8
5.4. Réalisation ........................................................................................................ 9
6. L'hébergement ...................................................................................................... 9
6.1. Définition .......................................................................................................... 9
6.2. Types d’hébergement ........................................................................................ 9
7. Le référencement ................................................................................................ 10
7.1. Annuaires et moteurs de recherche ............................................................... 10
7.2. Définition du référencement........................................................................... 12
Le langage XHTML.............................................................................................. 14
Chapitre 2 :Le langage XHTML ........................................................................... 15
1. Historique .......................................................................................................... 15
2. XHTML en tant que langage de balisage ............................................................ 16
3. HTML ou XHTML ? ............................................................................................ 16
4. La différence entre HTML et XHTML ................................................................ 16
5. Les éditeurs HTML ............................................................................................. 17
6. Les éditeurs visuels ............................................................................................ 18
7. Les éditeurs classiques ....................................................................................... 18
8. La structure de base d’un document XHTML ..................................................... 18
8.1. L’élément racine <HTML> ............................................................................. 19
8.2. L’élément<HEAD> : en-tête d’un document .................................................. 19
8.3. L’élément <body> : le corps du document ...................................................... 22
Chapitre 3:Mise en forme, liste et tableau ........................................................... 24
1. Les titres............................................................................................................. 24
2. Les divisions de la page ...................................................................................... 24
2.1. Les paragraphes : l’élément <P> .................................................................... 24
2.2. L’élément<DIV> ............................................................................................. 25
3. Les styles physiques ........................................................................................... 25
4. Les listes ............................................................................................................. 26
4.1. Les listes ordonnées ........................................................................................ 26
4.2. Les listes à puces ............................................................................................ 26
4.3. Les listes de définitions .................................................................................. 27
5. Les tableaux ....................................................................................................... 28
5.1. La structure générale d’un tableau ................................................................ 28
5.2. Les attributs de la balise <TABLE> .............................................................. 28
5.3. L'alignement du contenu des cellules ............................................................ 29
5.4. La fusion des cellules ...................................................................................... 30
Chapitre 4: Images, Audio, Vidéo et Liens Hypertextes ...................................... 33
1. Les images .......................................................................................................... 33

1.1. Les types d’images .......................................................................................... 33
1.2. L’insertion d’images ........................................................................................ 33
2. L'audio ................................................................................................................ 35
3. La vidéo .............................................................................................................. 35
4. Les liens hypertextes .......................................................................................... 36
4.1. Définition ........................................................................................................ 36
4.2. Les liens externes............................................................................................ 37
4.3. Les liens internes: les ANCRES / les SIGNETS .............................................. 38
4.4. Les liens déclenchant l’envoi d’un e-mail ........................................................ 39
Chapitre 5. Les formulaires ................................................................................. 41
1. Introduction ........................................................................................................ 41
2. Structure d'un formulaire ................................................................................... 41
3. Les attributs de l'élément <FORM>.................................................................... 42
3.1. L’attribut ID................................................................................................... 42
3.2. l’attribut ACTION ......................................................................................... 42
3.3. L’attribut METHOD ...................................................................................... 42
4. Les éléments intégrés dans l'élément FORM ...................................................... 42
4.1. Les boutons d'envoi ou de soumission ............................................................ 42
4.2. Les boutons de réinitialisation ....................................................................... 43
4.3. Les boutons graphiques .................................................................................. 43
4.4. Les zones de saisie de texte unilignes ............................................................ 44
4.5. Les zones de saisie de mot de passe ............................................................... 46
4.6. Les zones de saisie de texte long .................................................................... 46
4.7. Les boutons radio et les cases a cocher .......................................................... 47
4.8. Les listes de sélection ..................................................................................... 49
4.9. Les zones cachées ........................................................................................... 52
4.10. Les zones file ................................................................................................... 52
5. Apports du HTML5 ............................................................................................. 53
5.1. Les nouveaux objets ........................................................................................ 53
5.2. Les nouveaux attributs ................................................................................... 54
Chapitre 6: Les feuilles de style ........................................................................... 56
1. Introduction ........................................................................................................ 56
2. les avantages des CSS ........................................................................................ 56
3. Définition ............................................................................................................ 56
4. La syntaxe .......................................................................................................... 56
5. Les sélecteurs ..................................................................................................... 57
5.1. La sélection d’un seul élément ....................................................................... 57
5.2. La sélection de plusieurs éléments................................................................ 57
5.3. Le sélecteur universel ..................................................................................... 58
5.4. Les classes....................................................................................................... 58
5.5. L'application de plusieurs classes au même élément .................................... 59
5.6. Le sélecteur d’identifiant ID ........................................................................... 60
5.7. Les pseudo-classes et Les pseudo-éléments ................................................... 60
6. Où écrire les styles ? ........................................................................................... 62
6.1. Manière 1 : dans l’élément <style> ................................................................ 62
6.2. Manière 2 : dans un fichier externe ............................................................... 63
6.3. Manière 3 : dans l’attribut style ..................................................................... 63
7. Le positionnement .............................................................................................. 64
7.1. Généralités ...................................................................................................... 64
7.2. Attributs.......................................................................................................... 66
Annexe1 ............................................................................................................... 69
Annexe2 ............................................................................................................... 75
Chapitre 1
Introduction au Web
Objectifs Spécifiques
A la fin de ce chapitre, l’étudiant sera capable de :
- Connaitre l’origine et l’utilisation d’Internet.
- Identifier les principaux services d'Internet et leurs utilisations.
- Savoir différencier entre le Web et l’Internet.
- Avoir une idée sur les différentes technologies utilisées pour le
développement des sites web.
- Connaitre le cycle de vie d’un site web passant de l’idée vers
l’administration.
Plan du chapitre
1. Introduction
2. Définition
3. Principe
4. Evolution du Web
5. Les étapes de développement d’un site web
6. L'hébergement
7. Le référencement
Volume horaire
- 3 heures
1
Programmation Web 1 Introduction au Web
Chapitre1. Introduction au Web
1. Introduction
Le Web n’est qu’une des applications d’Internet. Il existe d’autres applications qui sont:
 FTP (File Transfer Protocol)

Le protocole FTP permet d’établir une connexion temporaire entre deux machines
pour échanger ou télécharger des fichiers. Les fichiers peuvent être des
programmes, des fichiers textes, des images, des séquences vidéo, de la musique,
des logiciels, etc.
 Messagerie électronique
La messagerie s’utilise soit avec un logiciel de messagerie spécifique soit avec un
navigateur qui intègre ces fonctionnalités. La messagerie est basée sur différents
protocoles : protocole SMTP (Simple Mail Transfer Protocol), POP (Post Office
Protocol). Généralement, chaque internaute dispose d’une adresse mail
reconnaissable au caractère @.
 USENET
Il est appelé aussi news ou newsgroup ou groupe de discussion ou conférence
répartie. Les news sont des forums fédérés par thèmes, où, pendant un temps
donné, les courriers sont conservés sur un serveur. Les news ne sont pas envoyés à
tous les utilisateurs mais stockées sur des ordinateurs dédiés à cette fonction. La
consultation des news résulte d’une démarche volontaire de l’utilisateur.
 TELNET
Ce service est appelé aussi émulation de terminal. Il s’agit d’une connexion à un
ordinateur éloigné. Ce service assure le travail en mode réparti, c'est-à-dire qu’il
est possible d’utiliser les ressources offertes par la machine distante.
 CHAT
Il est appelé aussi tchatte ou bavardage. C’est un lieu de dialogue en directe avec
d’autres utilisateurs du web sur des sujets. Il existe plusieurs façons de chatter, la
plus classique consiste à se connecter à un serveur IRC (protocole Internet Relay
2
Chat) avec un logiciel spécialisé (MSN par exemple), de choisir un pseudo puis de
répondre en direct aux phrases qui s’affichent à l’écran.
2. Définition
Le Web ou le World Wide Web ou le WWW ou le 3W ou la toile d’araignée, est une

source phénoménale d'information. Il s'agit d'un système d'information hypermédia. Il
est constitué de documents MULTIMEDIAS (pages de textes enrichies de sons,
graphiques, images fixes et animées, vidéos, etc...) qui sont reliés entre eux par des
liens HYPERTEXTE.
Ainsi dans les pages qui composent un site web, chaque mot souligné voire certaines
images, est un lien hypertexte cliquable assurant l’affichage d’un autre document. Ce
document pouvant être localisé sur n’importe quel ordinateur du réseau. Des
documents contiennent ainsi des références sur d'autres documents, créant une toile
d'araignée de documents recouvrant le monde.
Le Web a été inventé plusieurs années après Internet, mais c’est lui qui a rendu le
grand public attentif à Internet. Depuis, le Web est fréquemment confondu avec
Internet.
3. Principe
Le Web se base sur:

 Le protocole HTTP
Un protocole de communication est un ensemble de contraintes et de règles
permettant d'établir une communication entre deux entités. HTTP s’agit de
l’abréviation de HyperText Transfer Protocol
 Le langage HTML
HTML s’agit de l’abréviation de HyperText Markup Language. C’est un langage
à balises permettant de doter certains mots ou images d’une propriété
d’hyperlien.
 Les adresses URL
Une adresse URL (Uniform Resource Locator) localise les pages HTML ou
fichiers HTML qui existent dans des serveurs. L’URL est le reflet de la
structuration des informations sur le plan informatique et leur emplacement sur
3
le disque dur du serveur. L’URL peut être une adresse simple (généralement
l’adresse d’une page d’accueil) ou une adresse compliquée.
Exemples :
Exemple d’adresse simple : http://www.yahoo.fr
Exemple d’adresse compliquée :
 Un logiciel de navigation
Pour consulter le web, il faut disposer d’un logiciel de navigation appelé aussi
browser. Ce logiciel fonctionne avec le principe de client/serveur. Le browser sur
le poste de travail est le client, la machine distante sera le serveur.
Les navigateurs les plus répandus aujourd’hui sont les logiciels proposés
gratuitement : Internet Explorer (Microsoft), Firefox (Mozilla), Netscape
Navigator, Opéra, google chrome, etc.
Ces navigateurs permettent de « surfer » sur le Web en utilisant les hyperliens.
Ils permettent également d’accéder à des outils de recherche d’informations
appelés généralement les moteurs de recherche.
4. Evolution du Web
4.1. Web 1.0 [1995->2003]
Le Web1.0 était la 1ère génération du web. Il comprenait des pages statiques. On

prenait de la communication papier et on la transférait sous forme numérique dans
des pages html qui étaient rarement mises à jour voir jamais. L’internaute n’est
alors qu’un spectateur, extérieur à l’information.
Puis les sites web sont devenus plus dynamiques grâce notamment à l'avènement
des CMS (Content Management System=système de gestion de contenu) permettant
de créer des pages web à la volée. Un système de gestion de contenu ou SGC
(Content Management System ou CMS) est une famille de logiciels destinés à la
4
conception et à la mise à jour dynamique de site web. Ils partagent les

fonctionnalités suivantes :
 Ils permettent à plusieurs individus de travailler sur un même document ;

 Ils fournissent une chaîne de publication (workflow) offrant par exemple la
possibilité de mettre en ligne le contenu des documents ;
 Ils permettent de séparer les opérations de gestion de la forme et du contenu.
Dans ce contexte l'internaute est plutôt passif par rapport au Web qui est alors
considéré principalement comme un outil de diffusion et de visualisation de données.
4.2. Web 2.0 [2003 -> 2008]
Le Web 2.0 est la 2ème génération, il est plus orienté vers le partage de données. Il
répond à la question: Comment ce que je mets en ligne peut-être partagé avec
d’autres utilisateurs ? L’internaute n’est plus simplement spectateur, il est devenu
un acteur. Dans cette optique sont apparus les forums, les blogs, les wiki, les flux
RSS et les SPIP.
 Les forums
Un forum est un espace de discussion publique ouvert à plusieurs participants. Les
discussions y sont archivées ce qui permet une communication asynchrone (c'est ce
qui différencie les forums de la messagerie instantanée).
 Les blogs ou WeBlog

C’est un journal personnel en ligne qui permet à un internaute de publier
régulièrement des informations ou de commenter l’actualité sur un sujet. Sa mise à
jour (blogging), normalement quotidienne, est effectuée par un utilisateur (blogger)
n'ayant pas forcément un profil technique. Des logiciels, accessibles via le web,
permettent de créer et de maintenir facilement le blog.
Un blog est constitué d’un ensemble de billets qui sont les articles ou messages. Ils
sont classés par ordre chronologique et les visiteurs peuvent y laisser des
commentaires. Le billet est donc la colonne vertébrale du blog. Le souci quotidien
du blogueur est de trouver le billet qui lui permettra d'attirer des millions de
visiteurs sur son blog.
5
Plusieurs logiciels sont disponibles pour créer des blogs : Blogger, Typepad,
OverBlog, BlogSpirit, SkyBlog, MovableType, WorldPress, Blogware, etc.
 Les wiki
Un wiki est un site web dont les pages sont modifiables par tout ou partie des
visiteurs du site. Il permet ainsi l'écriture et l'illustration collaboratives de
documents.
Plus techniquement, il s’agit d’un outil de collaboration de contenu éditorial libre

(open editing) où l’information est publiée sous une licence de documentation libre,
c’est-à-dire qui autorise la modification et la libre utilisation des œuvres de chacun
des auteurs.
Le premier wiki est créé en 1995 et appelé WikiWikiWeb. En 2010, le plus consulté
de tous les wikis est l'encyclopédie libre Wikipédia.
 Le phénomène de syndication : les fameux flux RSS

RSS est un acronyme de Really Simple Syndication (syndication vraiment simple),
ou de Rich Site Summary (résumé détaillé d'un site)
Un flux (fils) au format RSS est un fichier XML, mis à jour en temps réel, qui
reprend automatiquement les titres ou le texte d'un site. Bien souvent, il s'agit de
sites d'actualité, webzines, blogs... Le flux RSS est ensuite intégré dans une page
web et affiché sous forme de liens cliquables, qui renvoient vers le site auteur du
flux.
Le système du flux RSS est utilisé pour diffuser les nouvelles des sites
d'information, ce qui permet de consulter ces dernières sans forcément visiter le
site, de les formater comme on souhaite, de faire une présélection des articles, etc.
Les webmasters intègrent ces flux à leur site internet pour afficher les actualités
d'autres sites. Les internautes récupèrent des flux pour lire ces actualités sur leur
navigateur préféré.
Pour lire ces flux RSS, il faut un logiciel spécialisé appelé agrégateur. Ce dernier
peut suivre plusieurs fils de syndication en même temps. Il existe plusieurs
exemples dont on cite : Mozilla Thunderbird, Esobi, Akregator, etc.
6
 Le système SPIP
SPIP (Système de Publication pour l'Internet Partagé ou Participatif) est un logiciel
libre destiné à la conception de site Web, de type système de gestion de contenu.
SPIP permet, une fois installé et configuré, dedéfinir l’architecture (les rubriques,
l’arborescence) ainsi que la charte graphique d’un site. SPIP permet ainsi de
développer des sites web relativement complexes et puissants, sans pour autant s’y
connaître en programmation. Il vise tout autant les particuliers que les
professionnels. Une fois l’outil installé, le ou les administrateurs du site n’auront
plus qu’à se concentrer sur les articles à rédiger : la gestion du site se fera au
travers d’une console d’administration accessible à partir d’un simple navigateur.
4.3. Web 3.0 [2008 -> ???]
Le Web 3.0 qui est en train de naître, correspond à un nouveau stade de cette
évolution. Les fils RSS commence à émerger une nouvelle approche, par la
multiplication des réseaux sociaux qui relient directement émetteur et destinataire
de l’information
Un réseau social est un ensemble d'identités sociales (individus ou organisations)
reliées entre elles par des liens créés lors des interactions sociales. Il se représente
par une structure ou une forme dynamique d'un groupement social. Alors que le
nombre de sites de réseaux sociaux augmente tous les jours, citons les suivants:
Facebook , FlickR, Youtube, Dailymotion, Skype, twitter, etc.
5. Les étapes de développement d’un site web
Pour développer un site web, les étapes suivantes sont à suivre :
5.1. Planification du travail de développement
 Réflexion sur l'objectif du site, sa cible et les moyens financiers à engager.

 Réflexion sur les moyens humains pour faire la réalisation et la mise à jour.
 Réflexion sur le contenu : contenu des pages, services attendus, principes de

navigation.
7
5.2. Mise en œuvre
 Dépôt d'un nom de domaine. Un nom de domaine est un identifiant unique

lié à une entité dont les ordinateurs sont reliés au réseau Internet. Le dépôt
des noms de domaines se fait auprès des organismes spécialisés
(InterNic1pour les domaines internationaux et l’Afnic2 pour la France). On ne
peut pas joindre directement ces organismes, il faut passer par
l’intermédiaire d’une société appelée registrar. Il s’agit soit des prestataires
de services pour les entreprises, soit d’hébergeur de site. Le service consiste à
réserver un nom de domaine pour un certain nombre d’années avec une
somme d’argent comme contrepartie. Le système est hiérarchique,
permettant la définition de sous-domaine(s).
Exemples : tunisie.com, bt.com.tn
Il existe deux classes d’extension :

CcTLD (Country Code Top Level Domain): pour les domaines
nationaux composés de deux lettres identifiant un pays : tn (Tunisie), fr
(France), ...
GTLD (Generic Top Level Domain): pour les domaines génériques
composés de trois lettres ou plus : com, net, info, org
 Choix d'un hébergeur.
 Choix et installation d'un outil de développement (SPIP, CMS,...) ou d'un

éditeur de site Web de type WYSIWYG (exemples : NVU, Macromedia
Dreamweaver, Microsoft FrontPage, Webself) ou texte (exemple : Bluefish,
Emacs, Notepad...).
5.3. Conception
 Établissement d'une structure de pages HTML ou XHTML ou CSS.

 Définition d'une arborescence
 Mise au point d'une charte graphique. La charte graphique est un guide
comprenant les recommandations d’utilisation et les caractéristiques des
différents éléments graphiques (logos, couleurs, polices,..) qui peuvent être
1
INTERnet’s Network Information Center
2
Association Française pour le Nommage Internet en Coopération
8
utilisés sur les différents supports de communication de l’entreprise.

La charte graphique permet de garantir l’homogénéité de la communication
visuelle au sein de l’entreprise.
5.4. Réalisation
 Création de pages via le Système de gestion de contenu ou l'éditeur.

 Mise en place de la charte graphique via les feuilles de styles CSS.
 Développement dynamique via des formulaires.
6. L'hébergement
6.1. Définition
Une fois que l’ensemble des pages du site sont créées, il faudra s’assurer qu’elles ont
un aspect identique et très semblable dans les différents navigateurs du marché. Si
c’est le cas, il ne reste plus qu’à transférer l’ensemble des pages du site vers le
serveur web distant qui va les héberger pour les mettre à la disposition de tous. Donc
l’opération d’hébergement consiste à « mettre à disposition d'un espace disque sur un
serveur web afin de diffuser de l'information par le biais d'un site web sur la toile.3 »
6.2. Types d’hébergement
Il existe plusieurs types d’hébergements. À titre d’exemple on cite :

 L’hébergement mutualisé ou partagé (shared hosting)
Un site web partage les ressources d'un serveur avec d'autres sites web. Dans ce
cas un serveur web peut héberger jusqu'à plusieurs milliers de sites.
Les avantages d’un tel hébergement sont :
 Coûts faibles (coûts partagés)
 Toutes les interventions techniques sont à la charge de l'hébergeur
 Aucune connaissance d'administration requise
Par contre, l’inconvénient majeur est que les performances sont moyennes voire
même médiocres dans certains cas
3
Source : dicodunet.com
9
 L’hébergement dédié (dedicated hosting)

Le client loue son propre serveur, et peut l'administrer comme il le souhaite. Ce
type d’hébergement est conseillé pour les sites ayant un grand trafic et un
nombre de visiteurs très élevé.
Les avantages de cet hébergement sont :
 Performances exceptionnelles
 Autonomie totale
Par contre, les inconvénients sont nombreux :

 Coûts importants
 Connaissances d'administration indispensables
 Toutes les interventions techniques sont à la charge du client et sous sa
responsabilité
 Grandes sensibilités aux attaques et aux failles de sécurité
 L’hébergement sur serveur dédié virtuel (virtual dedicated server)
C’est une solution intermédiaire entre l'hébergement mutualisé et dédié : Le
serveur virtuel se comporte (théoriquement) comme un serveur dédié, mais sur
des ressources matérielles physiques mutualisées.
Les avantages de cet hébergement sont :
 Performances très bonnes
 Bonne vision de la consommation en ressources
 Interventions techniques limitées ou inexistantes
 Coûts légèrement réduits par rapport au serveur dédié
En revanche les inconvénients y existent :

 Risque de dégradation des performances si l'infrastructure de l'hébergeur
n'est pas suffisamment robuste
 Connaissances d'administration souhaitables
7. Le référencement
7.1. Annuaires et moteurs de recherche
Lorsqu’on veut effectuer une recherche sur Internet, on utilise un des deux moyens
suivants : les annuaires de recherche ou les moteurs de recherche.
10
 Les annuaires4
Les annuaires proposent une liste de sites Web classée par catégories. Chaque
catégorie s’intéresse à un thème bien déterminé et elle contient, à son tour, des
sous-catégories concernant des aspects plus pointus du thème en question. Les
annuaires sont de trois types :
 Les annuaires généralistes qui n'excluent aucun centre d'intérêt. Exemple :
waaaouh.com, costaud.net, jusseo.com, bloc.com, etc.
 Les annuaires spécialisés et thématiques se penchent exclusivement sur les
sites ou les pages Web traitant un certain sujet, ou destinés à un certain public.
Exemples :
o Domaine informatique : 123-informatique.com, annuaire.aformaclic.fr
o Domaine loisir et tourisme : annuaire-des-vacances.com, univers-
nature.com
o Domaine immobilier : immo-annuaire.com, immo-immo.com
o Domaine automobile : best-of-auto.fr
 Les annuaires géographiques peuvent à la fois se révéler généralistes ou
spécialisés ; dans les deux cas, ils sont relatifs à un pays, une région, une
localité.
 Les moteurs4
Un moteur de recherche est un outil permettant de retrouver des pages Web
associées à des mots clés déclarés par l’internaute. Google, Wanadoo, voila, MSN,
AOL, AltaVista et autres sont des exemples de moteurs de recherche.
En fait, un moteur est constitué de « robots »,encore appelés bots, spiders,

crawlers, ou agents qui parcourent automatiquement les sites web, suit les
liens hypertextes , indexe les pages examinées dans des bases de données et enfin les
affiche dans une liste classée par ordre décroissant de pertinence des informations
identifiées et localisées. Notant que le moteur de recherche Google est le plus
employé dans le monde, selon certaines estimations plus de 80 % des internautes
l'utilisent5.
4
Fr.wikipedia.org
5
Source : accesstoebusiness.com
11
On trouve également des méta-moteurs, c'est-à-dire des sites Web où une même
recherche est lancée simultanément sur plusieurs moteurs de recherche. Les
résultats sont ensuite fusionnés pour être présentés à l'internaute. On peut
citer Copernic, Mamma, Kartoo, Seek.fr, Apollo7, etc.
7.2. Définition du référencement

Dans l’absolu, le référencement est l'action de référencer, c'est-à-dire mentionner
quelque chose ou y faire référence. Dans le domaine du web, le référencement est
l’opération qui rend votre site visible parmi les résultats de recherche des annuaires
et de moteurs. Autrement c’est l’inscription ou l’indexation du site dans un annuaire
et/ou un moteur de recherche. Il existe deux types de référencement :
 Le référencement naturel : c'est le fait de positionner un site le plus haut

possible dans les résultats de moteurs de recherche. Le positionnement d’un site
en premier lieu dans les résultats de recherche dépend de son titre, de la qualité
de son contenu, de la pertinence et du choix des mots clés…
 Le référencement payant ou liens sponsorisés : les liens sponsorisés, liens

commerciaux ou liens promotionnels sont des liens publicitaires apparaissant à
droite ou en haut des pages de résultats des moteurs de recherche. Le
référencement payant est particulièrement recommandé au lancement d'un site
car l'indexation par les moteurs de recherche peut prendre plusieurs mois.
Dans le code source des pages web, c’est la balise « méta » qui est utilisée pour
indiquer le moyen de référencement. Voici un exemple :
<meta name="description" content="Les liens sponsorisés, liens

commerciaux ou liens promotionnels sont des liens publicitaires faisant
partis des techniques utilisées en référencement pour optimiser la
visibilité d'un site Web. Access To eBusiness, agence de webmarketing
en Tunisie">
<meta name="keywords" content="agence referencement Tunisie,
agence webmarketing Tunisie">
Le paramètre « description » indique une présentation du site et le paramètre
« keywords » donne la liste des mots clefs qui définissent le contenu du site ou de la
page en question.
12
Ainsi un moteur de recherche utilise les mots qu'il trouve dans la description, dans
keywords, dans la balise TITLE et dans le texte visible de la page pour leur donner
leur importance nécessaire.
Donc si un mot décrit particulièrement bien le site, il est important qu'on le retrouve
dans ces paramètres.
13
Chapitre 2
Le langage XHTML
A la fin de ce chapitre, l’étudiant doit être capable de :
- Enumérer et décrire les éléments d’une page web.
- Connaitre la syntaxe des principales balises du langage XHTML.
- Manipuler le langage XHTML.
Plan du chapitre
1. Historique
2. XHTML en tant que langage de balisage
3. HTML ou XHTML ?
4. La différence entre HTML et XHTML
5. Les éditeurs HTML
6. Les éditeurs visuels
7. Les éditeurs classiques
8. La structure de base d’un document XHTML
Volume horaire
- 3 heures
14
Programmation Web 1 Le langage XHTML
Chapitre 2 :Le langage XHTML
1. Historique 6
Historiquement, les langages de balisage sont issus du langage SGML (Standard

Generalized Markup Language) créé en 1986 pour structurer des contenus très divers.
Ce langage s’est révélé trop complexe pour être appliqué au Web, d’où la nécessité d’en
créer une version allégée respectant les mêmes principes essentiels. C’est au début des
années 90, en 1992, que le CERN (Centre Européen de Recherche Nucléaire) rend
public le projet World Wide Web. Ce projet consistait à définir un langage de
présentation de documents hypertextes, dérivé de SGML : HTML = HyperText Markup
Language, ainsi qu'un protocole de transfert de ces documents : HTTP = HyperText
Transfert Protocol.
HTML est un langage de description et de structuration de documents hypertextes. Ce

langage est basé sur une syntaxe de balisage très simple. Il est clair que depuis sa
première version, ce langage a bien évolué, surtout avec l’apparition des feuilles de
styles CSS (Cascading Styles Sheets) en 1996. C’est avec ces feuilles de styles qu’il y a
eu une vraie séparation entre l’information (contenu des documents HTML) et de sa
présentation (contenu des feuilles de style).
La dernière recommandation HTML est en version 4 et particulièrement la version «

strict » associée avec l’emploi de CSS2 publié en 1998.
Quelques mois plus tard, toujours en 1998, le langage XML (eXtensible Markup
Language) a vu le jour. Son succès dans de multiples domaines d’application a conduit
le W3C (World Wide Web Consortium) à créer le langage XHTML (eXtensible
HyperText Markup Language) en 2000, non plus comme une nouvelle version de
HTML, mais comme une reformulation de HTML en tant qu’application XML. Donc le
XHTML n'est rien que du HTML, reformulé de façon à respecter les règles strictes
du XML. [1]
6
Source : www.infini-software.com
15
2. XHTML en tant que langage de balisage
Rappelons que, par définition, le langage HTML ou XHTML est un outil de

structuration des documents. Il est basé sur la notion de balises ou marqueurs. Dans
un langage de balisage, tout contenu, qu’il s’agisse de texte, d’image ou d’éléments
multimédias, doit être renfermé dans un élément. En XHTML, chaque élément, appelé
« balise », a un nom et la liste des éléments utilisables est clairement définie dans la
DTD (Document Type Definition) liée à la version utilisée du langage. Généralement,
une balise a la structure suivante :
<nom_balise attribut1="valeur1" attribut2="valeur2" > Contenu_balise </nom_balise>
Les attributs de chaque balise précisent ses caractéristiques. Il peut s’agir par exemple
de la définition de la largeur, de la hauteur ou de l’alignement du contenu.
3. HTML ou XHTML ?
L’utilisation du HTML strict, et plus encore du XHTML s’impose de plus en plus. De

plus, une page web respectant les normes rigoureuses du HTML strict, ou encore du
XHTML, sera plus pertinente pour les moteurs de recherche, mieux interprétée par les
navigateurs graphiques actuels et accessible à tout le monde7. En effet, il existe des
règles de base XHTML qui imposent aux développeurs de pages web de respecter les
spécifications indiquées par le W3C. Plus ces recommandations sont appliquées
rigoureusement dans les pages web, plus ces dernières ont la possibilité d’être
facilement référenciées et indexées par les moteurs de recherche.
Parmi ces règles, on cite :
- Document « bien formée »

- Document « conforme »
- Document « valide »
4. La différence entre HTML et XHTML
Les différences entre HTML et XHTML viennent essentiellement de la syntaxe qui doit
être beaucoup plus propre en XHTML. Voici donc les points qu'il faut obligatoirement
respecter :
7
Source : openweb.eu.org
16
 Toutes les balises doivent avoir une fermeture mais également les balises qui
n'ont pas de balises fermantes. On aura donc <br />, <img />, etc.
 Il faut respecter les règles d'imbrication des éléments comme par exemple
"<p>Le langage <strong>XHTML</strong></p>" et non pas "<p>Le langage
<strong>XHTML</p></strong>".
 Les balises et attributs doivent être entièrement en minuscules. Les valeurs ne

sont pas concernées par cette règle mais doivent par contre être toujours entre
guillemets. Il faut également savoir que les attributs en formes abrégées sont
interdits.
Exemple :
<meta name="Keywords" content="langage, xhtml, html"/>
 L'attribut "name" est remplacé par l'attribut "id". Cependant, pour certains
anciens navigateurs qui ne reconnaissent que très partiellement l'attribut "id",
il convient de mettre les deux à la fois.
Exemple :
<h1 name="titre"id="titre">Langage XHTML</h1>
 L'attribut "name" n'est plus utilisable avec les éléments a, applet, form, frame,
iframe, img, et map.
 Pour déclarer un document XHTML 1.1 et au-delà, on écrira:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
5. Les éditeurs HTML8
Un éditeur HTML (ou éditeur Web) est un logiciel conçu pour faciliter la préparation et
la modification de documents écrits en Hypertext markup language (HTML). Un
document HTML est le principal composant d'une page Web.
L'édition des images, des animations ou du son sont effectuées avec

les logiciels appropriés. Un éditeur HTML ne sert qu'à disposer ces ressources dans
une page Web. Il existe deux catégories d'éditeur :
8
Source : wikipédia.org
17
- Les éditeurs tel-tel (WYSIWYG) ou visuels

- Les éditeurs de texte ou classiques
6. Les éditeurs visuels
Un éditeur visuel permet d'éditer une page Web comme elle apparaît dans
les navigateurs courants. Il propose les fonctions classiques des traitements de texte
WYSIWYG. Ses deux principaux avantages sont la facilité d'utilisation et l'observation
immédiate du rendu graphique. Par contre, ses deux principaux inconvénients sont le
manque de maîtrise sur la qualité du document HTML produit et les risques
d'incompatibilité avec des navigateurs non prévus par l'éditeur. Exemple : Adobe
GoLive, Adobe Dreamweaver, BlueGriffon, Komodo, KompoZer, Netlor…
7. Les éditeurs classiques
Ces éditeurs éditent directement en langage HTML : le code y apparaît et y est traité
comme du texte. Ils requièrent donc une compétence dans ce langage. En contrepartie,
ils permettent à un utilisateur compétent de s'assurer de la qualité du document
produit.
Exemple : Bluefish, Ecoder, Htmledit, HTML Kit, Notepad++, PSPad, Quanta+.
Remarque : certains éditeurs sont visuels mais avec accès au mode texte. En fait,
ils combinent les deux éditeurs présentés ci-dessus. Exemple : Nvu.
8. La structure de base d’un document XHTML
Le squelette d’un document HTML est le suivant :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head> Informations d’entête </head>
<body>
Corps de la page XHTML
</body></html>
 La déclaration DOCTYPE est obligatoire dans tout document. Elle précise le type
de document qui va être créé, la DTD à laquelle il va se conformer et l’adresse du
18
fichier xhtml11.dtd qui contient la DTD elle-même. Rappelons que la DTD est
l’ensemble des règles qui précisent « la grammaire du langage ».
 Les informations d’entête sont :

- le titre: exprimé par la balise TITLE
- les balises méta: exprimées par la balise META
- les objets liés: exprimés par la balise LINK
- les scripts: exprimés par la balise SCRIPT
 Le corps contient tout ce qui apparaîtra dans la fenêtre du navigateur.
Remarque : Il est toujours utile de commenter un code XHTML, comme tout code
informatique d’ailleurs, pour en permettre une meilleure compréhension, en particulier
quand on souhaite le relire un certain temps après l’avoir écrit. Pour le faire, il faut
utiliser les symboles : "" à la fin de celui-ci. , Tout
ce qui est écrit comme commentaires sera ignoré par le navigateur.
Dans ce qui suit, on détaillera chacune des balises déjà mentionnées en exemple ci-
dessus.
8.1. L’élément racine <HTML>
C’est l’élément <html> qui est l’élément racine du document. C’est donc lui qui est
le parent de tous les autres. L’élément <html> est donc le conteneur de premier
niveau placé en haut de la hiérarchie de tous les éléments du document. Il n’existe
que deux éléments enfants de l’élément <html>:head et body. L’élément racine
possède trois attributs facultatifs : xml:lang, dir et xmlns.
8.2. L’élément<HEAD> : en-tête d’un document
L’élément <head> englobe six sous-éléments différents qui ont chacun un rôle bien
déterminé. Il s’agit des sous-éléments :<base>, <link>, <meta>, <script>, <style> et
<title>.
Aucun d’eux n’a de répercussion directement visible dans la page et seul le contenu
de l’élément <title> sera visible, non dans la page mais dans la zone de titre du
navigateur.
Dans ce qui suit, on détaillera deux sous-éléments inclus dans <head>:
19
 Le sous-élément <META /> : les meta-données

La balise <meta /> est un élément dont les informations ne sont pas visibles dans
la page mais elles sont destinées au serveur web, aux navigateurs et aux moteurs
de recherche. Il contient 2 attributs name et http-equiv dont les rôles sont
similaires, et leur valeur associée est contenue dans l’attribut content sous la
forme suivante :
<meta name="nom1" content="valeur 1" />

<meta http-equiv="nom2" content="valeur 2" />
La plupart des valeurs des attributs name et http-equiv sont des mots-clés qui
seront utilisés par les moteurs et les annuaires de recherche.
Le tableau suivant décrit les valeurs possibles de chacun de ces attributs :
Attribut Description
name="author" Désigne le nom de l’auteur de la page.
name="keywords" Dans ce cas, l’attribut content associé à name contient la liste
des mots clés. Chaque mot ou expression est séparé des
autres par une virgule. Il est important de choisir ses mots-
clés pour qu’ils correspondent au contenu du site et d’en
multiplier les variantes dans la liste de l’attribut content. Il
est possible de mettre le même mot au singulier et au pluriel,
au masculin et au féminin.
name="description" Indique une brève description de l’information contenue dans
le site. Elle doit être courte, correcte et concise.
http-equiv="refresh" Force le navigateur à recharger la page. L’attribut content
définit le nombre de secondes de recharge. Utilisé avec les
sites aux informations renouvelées très fréquemment
(cotation boursière, affichage d’heure…)
http-equiv="expires" Force le navigateur à actualiser la page. L’attribut content
définit la date et l’heure de mise à jour (format anglais de
date et heure)
20
À titre d’exemple, on peut écrire les codes suivants :
- Pour afficher une liste de mots clés en anglais :
<meta name="keywords" content="html,xhtml, site web"/>
- Pour afficher une description d’une page qui sera indexée par les moteurs de
recherche :
<meta name="Description" content="Ici se place le résumé

d'un document, d'une
page d'accueil, le descriptif d'une activité, la présentation
d'une société"/>
- Pour que le document sera rechargé toutes les dix secondes
<meta http-equiv="refresh" content="10" />
- Pour que la page sera mise à jour le 11 juillet 2005 à 18 h 34 min 45 en temps
GMT
<meta http-equiv="expires" content="Mon, 11 Jul 2005

18:34:45 GMT"/>
 Le sous-élément <TITLE> : le titre de la page

C’est la balise qui permet d’afficher un titre de la page. Ce titre apparaît dans la
barre de titre située en haut de la fenêtre du navigateur avant même l’affichage
complet de la page web. C’est une balise dont sa présence est obligatoire dans
l’élément <head>. Son contenu est un simple texte qui doit résumer le contenu de la
page en une ligne maximum. Il est important de bien réfléchir à ce contenu car c’est
aussi lui qui apparaîtra comme titre principal du site dans les moteurs de
recherche. Il doit donc être accrocheur et bien correspondre à l’esprit de la page.
Par exemple, on peut écrire le code suivant :
<title>Le site de XHTML 1.1 et CSS 2</title>
L’exemple suivant donne un code possible de la balise <head> avec quelques sous-
éléments :
21
<head>
<title>Titre de la page</title>
<meta name="Author" content="Jean ENGELS"/>
</head>
8.3. L’élément <body> : le corps du document
L’élément <body> est le conteneur de l’ensemble des éléments textuels et graphiques

d’une page web. Les mots clés suivants donnent la liste exhaustive de toutes les
balises qui peuvent être incluses directement dans l’élément <body> :
Address – blockquote – del – div – dl – fieldset – form - h1 - h2 - h3 - h4 - h5 - h6 - hr
– ins – ol – noscript – p – pre – script – table – ul
Tout autre élément y est interdit et le respect de cette liste est une convention
primaire de validation d’un document XHTML. Les éléments ne figurant pas dans
cette liste doivent d’abord être inclus dans des éléments de cette liste (c’est le cas par
exemple de l’élément <img />).
22
Chapitre 3
Mise en forme, liste, tableau
A la fin de ce chapitre, l'étudiant doit être capable de:
- Créer des pages web contenant des tableaux.
- Introduire les notions HTML avancées tels que les tableaux, les
listes.
Plan du chapitre
1. Les titres
2. Les divisions de la page
3. Les styles physiques
4. les listes
5. Les tableaux
Volume horaire
- 3 heures
23
Programmation Web 1 Mise en forme, liste et tableau
Chapitre 3:Mise en forme, liste et tableau
1. Les titres
Dans une page web, c’est en priorité les titres qui identifient les grandes sections
de texte, comme dans un livre. Les titres sont contenus dans les éléments <h1>,
<h2>, <h3>, <h4>, <h5> et<h6>, avec <h1>…</h1>, pour les titres de premier
niveau et <h6> … </h6>, pour les titres de plus bas niveau.
Le code suivant donne un exemple d’utilisation des différents niveaux de titre :
<h1> Titre de niveau 1</h1>

<h2>Titre de niveau 2</h2>
2. Les divisions de la page

Le corps d’un document, contenu dans l’élément <body>, peut être divisé en
différentes parties qui vont constituer les différents blocs de la page. Ces
divisions permettent de bien structurer l’information contenue dans une page.
2.1. Les paragraphes : l’élément <P>
Comme dans un traitement de texte, le contenu d’une page peut être divisé en
différents paragraphes.
- Chaque est précédé et suivi d’un saut de ligne pour marquer la séparation
avec le contenu précédent et suivant.
- Chaque paragraphe doit être délimité par les balises <p> et </p>.
- Chaque paragraphe peut contenir du texte mais également tous les
éléments enligne comme des images, des objets multimédia ou des
composants de formulaire si l’élément <p> est inclut lui-même dans un
formulaire.
24
2.2. L’élément<DIV>
L’élément <div> crée une division de la page. Ce type de division permet de

grouper dans un seul bloc un ensemble composé soit de texte soit d’éléments
inclus, auxquels on pourra appliquer globalement des styles particuliers. À la
différence des paragraphes, une division créée avec <div> permet d’inclure une
très grande variété d’éléments XHTML, comme du texte brut, les éléments en
ligne et la totalité des éléments de niveaux bloc comme l’autorise <body>, mais
également les titres, les listes et les formulaires, ce qui est interdit dans un
paragraphe.
Remarque : Contrairement aux paragraphes <p>, la fin d’une division
n’entraîne pas un saut de ligne par défaut, mais seulement un retour à la
ligne. Les contenus des différentes divisions peuvent donc se succéder sans
rupture. De plus il est possible d’utiliser la balise <span> avec quelques mots
afin de les particulariser et de les mettre en évidence, le plus fréquemment au
moyen d’un style prédéfini (italique, gras, souligné couleur différente…)
3. Les styles physiques
Le tableau suivant résume les balises de styles physiques :
Style Syntaxe Résultat

Gras <b>Texte</b> Texte
<strong> Texte </strong>
Italique <i> Texte </i> Texte
<em> Texte </em>
Souligné <u>Texte</u> Texte
Exposant 10 <sup>3</sup> 103
Indice C <sub> 2</sub> C2
Barré <s> Texte </s> Texte
<strike> Texte </strike>
Police plus grande <big> texte </big> texte
Police plus petite <small>texte</small> texte
Créer un retour en ligne <br /> ---
Ligne horizontale <hr />
Police <font size= ".." face="…"
color="…"> texte </font>
25
L’exemple de code suivant utilise successivement l’ensemble de ces éléments,

créant des styles physiques.
<p>Éléments b et strong : Le contenu suivant est <b> important </b>. La

suite l’est moins. Mais ceci est <strong>également
remarquable.</strong></p>
<p>Éléments i et em : Celui est en <i>caractères italiques </i> et le
suivanten<i><b> caractères italiques gras</b></i>
Celui est en <em>caractères italiques </em> et le suivant en<em><b>
caractèresitaliques gras</b></em></p>
<p> Ce texte là est <big>grand, <big>encore plus grand, <big>et plus
grand encore,<big>toujours plus grand </big></big></big></big></p>
<p>Ce texte ci est <small>petit, <small>encore plus petit, <small>et
plus petitencore, <small>toujours plus petit
</small></small></small></small></p>
<p>Le n<sup>ième</sup> terme de la suite numérique est noté
u<sub>n</sub>.La fonction cube est notée : x<sup>3</sup></p>
4. Les listes
4.1. Les listes ordonnées
Une liste ordonnée est constituée d'un conteneur <ol> (Ordered List) dans
lequel se trouve chaque item de la liste, précédé d'un élément <li>.
Exemple : Le code suivant :
<ol>
<li> Hiver</li>
<li> Automne</li>
<li> Été</li>
<li> Printemps</li>
</ol>
Permet d'afficher la liste ordonnée suivante :

1. Hiver
2. Automne
3. Été
4. Printemps
4.2. Les listes à puces
Une liste à puces est constituée d'un élément ul (Unordered List) dans lequel
chaque item est précédé d'un élément <li>.
26
Exemple : Le code suivant :

<ul>
<li> Hiver</li>
<li> Automne</li>
<li> Été</li>
<li> Printemps</li>
</ul>
Permet d'afficher la liste à puces suivante :

 Hiver
 Automne
 Été
 Printemps
4.3. Les listes de définitions
Une liste de définitions permet de créer une liste de termes, chacun d’entre eux
étant suivi de sa définition. Le conteneur de l’ensemble de la liste est l’élément
<dl> qui ne peut contenir que des éléments <dt>, <dd>, ou l’élément <dl> lui-
même. Le plus souvent, l’élément <dt> contient le terme et <dd> en renferme
la définition. La structure de base d’une liste de définitions est donc la
suivante :
<dl>
<dt>Terme 1</dt>
<dd>Définition 1</dd>
.....
</dl>
Le code suivant donne un exemple de liste de définitions :
<dl>
<dt>XHTML</dt>
<dd><fieldset>eXtensible HyperText Markup Language : le langage
moderne de création de pages web...</fieldset></dd>
<dt>CSS</dt>
<dd><fieldset>Cascading Style Sheet : le langage de création des styles
et du design...</fieldset></dd>
<dt>PHP</dt>
<dd><fieldset>PHP Hypertext Preprocessor : le meilleur langage de
création de pages dynamiques...</fieldset></dd>
<dt>SQL</dt>
<dd><fieldset>Structured Query Language : le langage d’interrogation
des bases de données...</fieldset></dd>
</dl>
27
5. Les tableaux
5.1. La structure générale d’un tableau
L’élément essentiel dans la création de tableaux est <table>. Un tableau doit

se créer ligne par ligne. Chaque ligne est déclarée par un élément <tr> (pour
table row). La création de chaque cellule d’une ligne est déclarée par un
élément <td> (pour table data) pour les cellules standards du tableau ou <th>
(pour tablehead) pour les cellules qui jouent le rôle d’en-tête de colonne ou de
ligne. Pour terminer la présentation d’un tableau, on peut lui attribuer un
titre général qui doit être contenu dans l’élément <caption>, lui-même inclus
dans <table>. Cet élément doit être le premier à apparaître dans <table>. Son
contenu apparaît par défaut au-dessus du tableau.
Le code suivant donne un exemple de création de tableau régulier.
<table border="1">
<caption>Un tableau </caption>
<tr>
<td> Ligne 1 Colonne 1</td>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
5.2. Les attributs de la balise <TABLE>
La balise ou l’élément <table> possède plusieurs attributs dont les plus

utilisés sont :
28
Attributs Désignation
border ="N" Définit la largeur des bordures externes et
internes qui délimitent le tableau et les cellules.
Sa valeur s’exprime exclusivement en nombre
de pixels et la
valeur 0 est admise pour cacher ses bordures.
width ="N px" ou Définit la largeur totale du tableau dans la
width = "N%" page. La possibilité de définir une largeur
relative en pourcentage est très pratique pour
adapter le tableau à l’écran du visiteur.
cellpadding = "N px" ou Définit la largeur de l’espacement entre le
cellpadding = "N%" contenu d’une cellule et sa bordure.
cellspacing = "N px" ou définit l’espacement entre les bordures de
cellspacing = "N%" chaque cellule. Pour que cet attribut soit pris en
compte, il faut que l’attribut border ne soit pas
nul. Si l’attribut cellspacing est non défini, il
prend par défaut la valeur de l’attribut border.
5.3. L'alignement du contenu des cellules
Les attributs align et valign des éléments <table>, <tr>, <td> et <th>
permettent de définir l’alignement de leurs différents contenus. Comme tous
ces éléments sont emboîtés les uns dans les autres, la définition de ces
attributs à des niveaux différents implique des règles de priorité pour
déterminer laquelle des valeurs doit l’emporter.
Ces règles sont les suivantes :
- L’alignement défini dans un élément inclut dans <td> ou <th>
l’emporte sur celui de son parent.
- L’alignement défini dans <td> ou <th> l’emporte sur celui de <tr>.
- L’alignement défini dans <tr> l’emporte sur celui de <table>.
- Le code suivant montre l’application de ces règles
29
<table border="3" width="100%" cellpadding="12px" align="left">

<caption><big>Alignement du contenu des cellules</big></caption>
<tr align="right">
<td align="justify">
<p><big>Texte justifié</big><br/>AAAA</p>
</td>
<td>
<p><big>Texte aligné à droite</big><br/>BBBB </p>
</td>
</tr>
<tr>
<td align="center"><p><big>Texte centré</big><br/>CCCC </p>
</td>
<td><p><big>Texte aligné à gauche</big><br/>DDDDD</p>
</td></tr>
</table>
5.4. La fusion des cellules
Pour concevoir des tableaux irréguliers, il est fréquent de fusionner des

colonnes et des lignes. Pour cet objectif, on utilise respectivement les
attributs « colspan » et « rowspan ».
Exemple: Le code suivant:
<tableborderheight="300"width="400">
<tralign="center">
<tdrowspan="3">A</td>
<tdcolspan="2">B</td>
<td>C</td>
</tr>
<tralign="center">
<td>D</td>
<td>E</td>
<tdrowspan="2">G</td>
</tr>
<tralign="center">
<tdcolspan="2">F</td>
</tr>
</table>
30
Fournit le tableau suivant :
31
Chapitre 4
Les formulaires
- Introduire les notions HTML avancées tels que les images, les
fichiers audio, les fichiers vidéo, les liens hypertextes.
Plan du chapitre
1. Les images
2. L'audio
3. La vidéo
4. Les liens hypertextes
Volume horaire
- 3 heures
32
Programmation Web 1 Images, Audio, Vidéo et Lien Hypertextes
Chapitre 4: Images, Audio, Vidéo et Liens Hypertextes
1. Les images
1.1. Les types d’images
Les navigateurs actuels n’acceptent qu’un nombre restreint de types d’images et il

faudra se limiter aux trois grands types les plus utilisés et enregistrer les images
selon les formats présentés ci-après, qui sont suffisants pour satisfaire tous les
besoins d’un concepteur de sites:
• GIF : Graphics Interface Format, ayant pour extension .gif. Ce format est limité
à 256 couleurs et est donc déconseillé pour les photographies ayant une grande
plage de teintes différentes. On l’utilisera en priorité pour des icônes, des
dessins ou des bandeaux publicitaires car il présente aussi l’avantage de
permettre la création de petites animations et l’entrelacement qui va permettre
l’affichage progressif de l’image, d’abord en basse résolution puis, au fur et à
mesure du chargement, à la résolution maximale.
• JPEG : Joint Photographic Experts Group, ayant pour extensions .jpeg ou .jpg.
Ce format permet la création d’images en 24 bits (16 millions de couleurs), et
est donc très adapté aux photographies réalistes. En contrepartie toutefois, les
images JPEG ont habituellement un poids plus important en Ko, ce qui ralentit
leur chargement.
•PNG : Portable Network Graphics, ayant pour extension .png. Ce format est
assez récent et a été conçu comme alternative au format GIF. Le format PNG
créé à l’initiative du W3C est donc libre de droit et permet la création de
graphiques et de photographies.
1.2. L’insertion d’images
a. L’élément<IMG />
L’élément <img /> permet d’inclure des images dans une page web. Il s’agit d’un
élément de type en ligne et doit être inclus directement dans un élément de type
33
bloc, dans une liste, ou encore d’autres éléments. C’est un élément vide, d’où
l’utilisation du symbole de fermeture incorporé à la fin de la balise d’ouverture.
Les éléments parents de l’élément <img /> sont :a, caption, div, li, p, span, td, th,
etc.
b. L’attribut SRC
Il précise l’adresse relative ou absolue du fichier image que l’on désire afficher
dans la page. Son utilisation est donc obligatoire.
Exemples :
 <img src="image.png" /> : pour une adresse relative, ce qui suppose que le
fichier PNG est situé dans le même répertoire que le fichier XHTML qui
l’incorpore.
 <img src="http://www.votresite.com/images/image.png" />: définit une adresse

absolue, l’image pouvant donc figurer sur un autre serveur que le nôtre.
L’utilisation des adresses relatives est préférable en vue de faciliter la
maintenance du site. Si le fichier n’est pas disponible, les navigateurs affichent
une icône à la place.
c. L’attribut ALT
La présence de cet attribut est également nécessaire et il doit contenir un texte

fournissant une brève description de l’image. Ce texte apparaîtra à la place de
l’image si celle-ci n’est pas disponible (absente du répertoire cible ou illisible).
d. Les attributs HEIGHT et WIDTH
Ils permettent de définir respectivement la hauteur (height) et la largeur (width)

qu’aura l’image sur le média d’affichage. Ces dimensions peuvent être définies à
l’aide de valeurs exactes en pixels ou d’un pourcentage. Dans ce dernier cas, les
pourcentages font référence aux dimensions de l’élément parent de l’image. Si la
fenêtre du navigateur est redimensionnée, les dimensions de l’image seront alors
recalculées, laissant l’image entièrement visible. La définition de ces attributs
accélère l’affichage dans les navigateurs car elle leur permet de déterminer la zone
d’affichage avant même d’avoir téléchargé l’image.
34
2. L'audio
Pour insérer une séquence audio dans une page web, on utilise la balise <audio>. Cette
dernière est l'apport du HTML5.
Syntaxe
<audio src="url fichier audio"></audio>
OU
<audio>
<source src="url fichier audio"></source>…
</audio>
Extensions fichiers
Les fichiers audio supportés par le web ont généralement les extensions suivantes:
mp3, aac et ogg.
Attributs:
A part l'attribut src, la balise audio admet d'autres dont on cite:
• Controls : pour ajouter les boutons « Lecture », « Pause » et la barre de défilement.
• Width : pour modifier la largeur de l'outil de lecture audio.
• Loop : la musique sera jouée en boucle.
• Autoplay : la musique sera jouée dès le chargement de la page.
Exemple:
<audio src="fayrouz.mp3" controls="controls" width="400px"

autoplay="autoplay" loop="loop">
</audio>
3. La vidéo
Pour insérer une séquence vidéo dans une page web, on utilise la balise <video>. Cette
dernière est l'apport du HTML5.
Syntaxe
<video src="url fichier audio"></video>
OU
<video>
<source src="url fichier video"></source>…
35
</video>
Extensions fichiers
Les fichiers vidéo supportés par le web ont généralement les extensions suivantes:
mp4, webm et ogv.
Attributs:
A part l'attribut src, la balise video admet d'autres dont on cite:
• Poster : l'URL de l'image à afficher à la place de la vidéo tant que celle-ci n'est pas
lancée.
• controls : pour ajouter les boutons « Lecture », « Pause » et la barre de défilement.
• width : pour modifier la largeur de la vidéo.
• height : pour modifier la hauteur de la vidéo.
• loop : la vidéo sera jouée en boucle.
• autoplay : la vidéo sera jouée dès le chargement de la page
Exemple:
<video src="film1.mp4" controls="controls" poster="film.jpg" width="400px"

autoplay="autoplay">
</video>
4. Les liens hypertextes

4.1. Définition
Dans l’acronyme XHTML, on peut considérer que l’élément le plus important est le
mot «Hypertext ». En effet, la création de documents contenant des liens hypertextes
est la particularité qui a rendu le Web si populaire. Les liens hypertextes permettent
de passer, d’un simple clic, sur un mot ou sur une image, d’une page à l’autre, qu’elle
soit située sur le même serveur ou en n’importe quel point du réseau. Nous parlerons
dans ce cas de lien externe. Il est également possible de passer instantanément d’un
point de la page à un autre situé dans la même page et identifié par un nom
particulier. Nous parlerons alors de lien interne. Un lien peut permettre, également,
de déclencher l’ouverture automatique de la messagerie électronique du visiteur
pour envoyer un e-mail vers le site ou à l’attention de tout autre destinataire.
36
4.2. Les liens externes
L’élément XHTML primordial pour la création de liens est l’élément <a>, dont le
contenu est situé entre les balises <a> et </a>. Le contenu peut être un texte ou une
image et il est sensible au clic. Ses attributs permettent de définir la cible du lien et
les moyens de le déclencher. Comme il s’agit d’un élément en ligne, il doit être inclus
dans un bloc ou tout autre élément admettant comme contenu cet élément. Quand on
définit un lien dont l’origine est par exemple un texte, celui-ci apparaît souligné,
dans une couleur particulière définie par défaut dans le navigateur (généralement en
bleu), et le curseur prend l’aspect d’une main pour signaler l’existence de ce lien. Ces
conventions visuelles sont communes à tous les navigateurs et il est possible de les
modifier à loisir avec des styles CSS.
Syntaxe:<a href="url">texte ou image</a>
Avec url est l'adresse relative ou absolue du fichier cible vers lequel le navigateur
passe en cliquant sur le texte ou l'image définie.
Exemples:
 <p>La page <a href= "pagecss.html" > CSS2 </a></p>
En cliquant sur CSS2, on passe au fichier pagecss.html. Ce document doit se trouver
sur le serveur, dans le même dossier que la page en cours qui contient le lien. Dans
le cas contraire, on expose les visiteurs à l’affichage de la page maudite des
webmestres, nommée « Erreur 404 ».
 <div>Visitez le site du <a href= "http://www.w3.org" >W3C </a></div>
En cliquant sur le mot W3C, on passe à son site officiel.
L’élément <a> possède un ensemble d’attributs dont on cite l'attribut target. Ce
dernier permet de désigner la fenêtre dans laquelle s'ouvre la page cible d’un lien. Il
peut prendre les valeurs prédéfinies:
 _blank: pour afficher la cible dans une nouvelle fenêtre.
 _parent: pour afficher la cible dans la fenêtre parent de la fenêtre en cours.
 _self: pour afficher la cible dans la fenêtre elle-même.
 _top: pour afficher la cible dans la fenêtre de plus haut niveau.
37
4.3. Les liens internes: les ANCRES / les SIGNETS
Quand le contenu d’une page est volumineux, l’utilisateur ne peut pas en avoir une
vision globale. Il est alors souhaitable de lui proposer une table des matières ou un
menu, composé de liens internes vers les différentes sections de la page. Il pourra
ainsi accéder directement au point de son choix sans faire défiler la page. De même,
si le lien est externe, il est possible d’accéder en un point particulier de la page cible.
Chaque point cible de la page doit être signalé par un lien particulier, appelé ancre,
lequel est créé à l’aide de l’élément <a>, muni simplement d’un attribut id dont la
valeur doit être unique dans la page.
Exemple:
<h1>Vos sujets préférés</h1>

<ul>
<li><a href="#sujet1" id="menu1"> XHTML</a></li>
<li><a href="#sujet2" id="menu2"> CSS</a></li>
<li><a href="#sujet3" id="menu3"> JavaScript</a></li>
</ul>
<hr/>

<div>
<h1>XHTML</h1><a id="sujet1" href="#menu1">Retour au vers le
menu</a><br/>
Quand le contenu d’une page est assez long, l’utilisateur ne peut pas en avoir une
vision globale. Il est alors possible de lui proposer une table des matières ou un
menu composé de liens vers les différentes sections de la page. Il pourra alors
accéder directement au point qui lui convient sans avoir à faire défiler la page…
</div><br/><hr/>

<div>
<h1>CSS</h1><a id="sujet2" href="#menu2">Retour au vers le
menu</a><br/>
</div><br/><hr/>

<div>
<h1>JavaScript</h1><a id="sujet3" href="#menu3">Retour au vers le
menu</a><br/>
</div><br/><hr/>
38
On peut aussi créer un système de navigation complet entre plusieurs pages du même
site à l’emplacement qu’on veut atteindre
Exemple
<h1 id="menuxhtml">XHTML
<a href="xhtml.html#chap1"> Chapitre 1</a>
</h1><hr/>
Avec chap1, chap2 et chap3 sont des ancres à définir dans le fichier xhtml.html grâce à
l’attribut id
4.4. Les liens déclenchant l’envoi d’un e-mail
Un site qui se dit à l’écoute de ses visiteurs doit leur permettre d’entrer en contact
avec son webmestre afin qu’ils envoient leurs observations ou questions. Pour leur
faciliter la tâche, il ne suffit pas d’indiquer une adresse e-mail dans chaque page. On
doit créer un type de lien particulier provoquant, en un clic, l’ouverture automatique
du logiciel de courrier préféré du visiteur avec comme destinataire l’adresse que
l’auteur du site aura choisi dans son code. Pour réaliser cette opération, il suffit que
l’attribut href du lien soit composé du nom de protocole mailto: suivi de l’adresse e-
mail du contact.
Exemples
 <div> <a href="mailto:webmaster@gmail.com"> Contactez nous! </a></div>
 <p>Demande de <a href="mailto:xhtml@gmail.com?subject=Demande de
renseignements">documentation</a></p>
39
Chapitre 5
Les formulaires
- Réaliser des formulaires dans des pages web.
Plan du chapitre
1. Introduction
2. Structure d’un formulaire
3. Les attributs de l’élément <form>
4. Les éléments intègres dans l'élément form
5. Apports du html5
Volume horaire
- 3 heures
40
Programmation Web 1 Les formulaires
Chapitre 5. Les formulaires
1. Introduction
De nos jours, plusieurs actions sont devenues très courantes et ne sont possibles que
grâce à l’existence des formulaires insérés dans une page web. Citons comme exemples:
laisser un avis dans un livre d’or, saisir un mot-clé dans un moteur de recherche,
passer une commande en ligne, etc. Tout échange de données entre un visiteur (le poste
client) et l’ordinateur hébergeant le site (le serveur), opéré via le protocole HTTP, se
fait donc via les saisies effectuées dans un formulaire. L’utilisateur peut entrer des
textes ou des mots de passe, opérer des choix grâce à des boutons radio, de cases à
cocher ou des listes de sélection. Il peut également effectuer le transfert de ses propres
fichiers vers le serveur. Les formulaires sont donc présents dans un très grand nombre
de sites web.
2. Structure d'un formulaire
Les éléments constitutifs d’un formulaire doivent être contenus entre les balises
<form> et </form>. Cette balise peut être incluse directement dans l’élément <body>ou
encore sous l'un des éléments suivants: dd, div, fieldset, li, td, th, etc. Un formulaire
est, généralement, formé d'un ensemble de "fieldset".
L'élément <fieldset> est pratique pour créer des groupes de blocs qui partagent un
objectif commun. Un élément <fieldset>peut être étiquetté avec un élément <legend>.
L'élément <legend> décrit le but de l'élément <fieldset>.
La structure minimale d'un formulaire est:

<form>
<fieldset>
<legend>Titre de la légende</legend>
</fieldset>

</form>
Cette structure est améliorée par un ensemble d'attributs et d'autres éléments intégrés.
41
3. Les attributs de l'élément <FORM>

3.1. L’attribut ID
Il permet d’identifier le formulaire pour pouvoir accéder à ses composants à partir

d’un script JavaScript. On peut utiliser l'attribut name.
3.2. l’attribut ACTION
Cet attribut est obligatoire car il désigne le fichier qui est chargé de traiter les
données du formulaire côté serveur. Le code du script de traitement des données
peut être inclus dans un fichier séparé de celui qui contient le code XHTML mais il
peut être inclus dans ce même fichier qui doit alors avoir une extension appropriée à
la place de .html. Par exemple, .php pour le langage PHP ou .aspx pour ASP.Net. Le
contenu de l’attribut action doit donc être une URL, qui peut être:
 Relative, de la forme: <form action="traitement.php">, Dans ce cas, le fichier
désigné doit être présent dans le même répertoire que le fichier XHTML.
 Absolue, de la forme: <form action = "http://www.monsite.com/trait.php">, dans
ce cas, le fichier doit être présent sur le même serveur, ou même sur un autre
serveur.
3.3. L’attribut METHOD
Il détermine la méthode d’envoi des données vers le serveur. Il peut prendre les deux
valeurs: get ou post. La méthode get est celle qui est utilisée par défaut. Elle
présente l’inconvénient d’ajouter les données du formulaire sous la forme
nom=valeur à la suite de l’URL définie dans l’attribut action.
La seconde valeur de l’attribut method est post. Elle ne présente pas l’inconvénient
de la méthode get car les données transmises sont invisibles dans l’URL. C’est donc
celle recommandée dans la plupart des cas.
4. Les éléments intégrés dans l'élément FORM

4.1. Les boutons d'envoi ou de soumission
Il s'agit d'un bouton indispensable permettant de déclencher l’envoi des données du

formulaire vers le serveur, suite à un clic. La manière la plus courante de créer un
42
bouton d’envoi est d’utiliser l’élément <input/>. Cependant, il est possible d’utiliser
l’élément <button/> pour atteindre le même objectif.
Syntaxe
<input type="submit" value="valider" name="BtValid" title="bouton de
validation"/>
<button type="submit" name="BtValid" title="bouton de validation">
valider</button>
Description des attributs
L'attribut "value" détermine le texte du bouton pour l'élément <input>.
L'attribut "name" attribue un nom au bouton qui sera utilisé par l'un des langages
de script.
L'attribut "title" affiche un bref message permettant d’expliquer le rôle du bouton.
4.2. Les boutons de réinitialisation
Le rôle d'un bouton de réinitialisation est de revenir à l'état initial du formulaire. Il

n’efface pas le contenu de toutes les zones de saisies mais remet le formulaire dans
son état initial, y compris les valeurs par défaut qui ont pu y être définies. Un tel
bouton est le plus souvent créé à l’aide de l’élément <input />. Comme les boutons
d’envoi, c’est l’attribut value qui contient le texte visible sur le bouton. Les autres
attributs sont identiques à ceux des boutons d’envoi.
Syntaxe
<input type="reset" value="annuler" name="BtAnnul" title="bouton annulation"/>
<button type="reset" name=" BtAnnul " title="bouton annulation "> annuler
</button>
4.3. Les boutons graphiques
Le bouton de validation et celui d'annulation peuvent être conçus sous forme

d'images d'où la notion de boutons graphiques.
43
Exemple:
<form action="traitement.php"method="post"name="formul1">
<fieldset>
<legend>Les boutons d’envoi : </legend>
<button type="submit" value="Envoi" name="BtEnv"
title="Bouton d’envoi">
<img src="../images/val.gif" height="50px" width="50px"
<input type="image" src="../images/val1.gif"value="Envoi1"
</fieldset>
<fieldset>
<legend>Les boutons de réinitialisation : </legend>
<button type="reset" value="annuler" name="BtAnnul"
title="Bouton d’effacement">
<img src="../images/annul.gif "height="50px"
width="50px"/>
<input type="image" src="../images/annul1.gif"
value="annuler1" name="BtAnnul1" title="Bouton d'annulation
image"onclick="reset()"/>
</fieldset>
</form>
4.4. Les zones de saisie de texte unilignes
Pour un champ de saisie de texte ne comprenant qu’une ligne, l’attribut type de

l'élément <input>, prend la valeur text. Toute zone de texte doit être,
éventuellement, précédé par une étiquette fournie par l'élément <label>.
En plus des attributs déjà vus (name, value, title), il est possible d’améliorer
l’affichage des zones de texte, en utilisant les attributs suivants:
- Size="N"
Permet de fixer la longueur visible de la zone de texte à N caractères, ce qui

n’empêche pas des saisies plus longues
- Maxlength="N"
Permet de limiter le texte saisi à N caractères. Au-delà de ce nombre, les frappes

effectuées au clavier sont inopérantes
- Disabled="disabled"
Prend la valeur booléenne unique disabled, rend la zone de saisie inactive,

empêchant ainsi toute saisie
44
- readonly="readonly"
Permet d’utiliser une zone de saisie pour afficher une information. Celle-ci ne
peut donc pas être modifiée, mais est en lecture seule
Exemple
<form method="post" action="traitement.php">

<fieldset>
<legend>Vos données personnelles</legend>
<label>Nom : </label>
<input type="text" name="nom"
maxlength="25"/><br/><br/>
<label>Prénom : </label>
<input type="text" name="prenom" value="Votre prénom"
<label>Adresse : </label>
<input type="text" name="adresse" value="Votre adresse"
<label>Pays : </label>
<input type="text" name="pays" value="Votre pays"
<input type="submit" name="envoi" value="Envoyer"/>
</fieldset>
</form>
Remarque
Pour des raisons d’ergonomie, il est préférable que le texte par défaut défini à l’aide
de l’attribut value s’efface tout seul au moment où l’utilisateur clique dessus car
cela lui évite d’avoir à le faire lui-même. Il suffit pour cela d’utiliser une instruction
JavaScript très simple :
Pour réagir à l’événement clic :
<input type="text" name="prenom" value="Votre prénom"
maxlength="25" onclick="this.value="" />
Pour que le texte s’efface dès que la zone reçoit le focus (par tabulation ou clic):
<input type="text" name="adresse" value="Votre adresse"
maxlength="60" onfocus="this.value="" />
45
4.5. Les zones de saisie de mot de passe
Les champs de saisie de mot de passe sont quasi identiques aux champs de saisie de
texte. Ils ne comportent qu’une seule ligne et sont créés avec le même élément
<input/>. La différenciation entre ces deux champs réside dans la valeur de
l’attribut type qui prend la valeur password au lieu de text. Pour l’utilisateur, le
champ a le même aspect visuel, mais quand il tape son mot de passe, les caractères
qu’il utilise ne sont pas affichés dans la zone et sont remplacés par des astérisques
(*), ce qui le protège des regards indiscrets. Les attributs sont les mêmes que pour
un champ de texte.
4.6. Les zones de saisie de texte long
Pour permettre à un visiteur la saisie de textes longs, comme des commentaires

dans les blogs, il existe l'élément <textarea>. Ce dernier crée un champ de saisie de
texte sur plusieurs lignes. Contrairement à l'élément <input>, <textarea> n’est pas
un élément vide et son contenu n’est autre que le texte saisi par le visiteur. Les
dimensions de la zone de saisie doivent obligatoirement être définies. Pour cela, il
faut utiliser les attributs suivants :
- cols="N" : fixe la largeur de la zone à N caractères. Le retour à la ligne est

automatique dans la zone.
- rows="N" : fixe la hauteur à N lignes. Il faut distinguer la hauteur visible et le

nombre de lignes que l’on peut saisir. En effet, le visiteur peut écrire autant de
lignes qu’il le souhaite, quelle que soit la hauteur visible de la zone. Quand le
texte dépasse la capacité de la zone, une barre de défilement vertical apparaît
automatiquement.
Il est à signaler que les attributs : disabled, readonly, name et title restent
valables pour l'élément <textarea>.
46
Exemple
<form action="traitement.php" method="post">
<fieldset>
<legend>Donnez-nous vos impressions</legend>
<label>Votre nom </label>
<input type="text" name="nom" size="25"/><br/>
<label>Vos commentaires</label>
<textarea name="commentaires" cols="70" rows="10"
onfocus="this.value=""">Tapez vos commentaires ici… </textarea><br/>
<input type="submit" value="Envoi de vos commentaires"/>
<input type="reset" value=" Effacer tout"/><br/>
</fieldset>
</form>
4.7. Les boutons radio et les cases a cocher
Pour les données dont les réponses sont prévisibles et en nombre limité, on utilise
des éléments de formulaire spéciaux, nommés boutons radio et cases à cocher.
a. Les boutons RADIO

Les boutons radio sont utilisés pour présenter plusieurs choix dont la réponse est
unique (par exemple, un choix entre Homme et Femme). Pour créer un bouton
radio, on utilise l’élément <input /> avec un attribut "type" qui prend la valeur
"radio". L’ensemble des boutons radio avec lesquels on peut opérer un choix
donné constitue un groupe. Il faut que tous ses éléments aient la même valeur
pour leurs attributs "name". L’attribut "value" de chaque bouton radio contient la
valeur que l’on veut associer à chacun d’eux. Seule la valeur choisie dans le
même groupe est récupérée par le serveur.
L’attribut "checked" qui prend la valeur booléenne unique "checked" permet de

cocher par défaut un des boutons d’un groupe, s’il est plus répandu que les
autres.
L’attribut "readonly" bloque le bouton radio et impose ainsi une valeur.
L’attribut "disabled" dont la valeur unique est "disabled" permet de rendre un

bouton radio inactif. On peut l’utiliser pour désactiver un choix réalisé
antérieurement.
47
L'attribut "title" reste toujours utilisable.
Exemple
<form action="exemple.php" method="post">

<fieldset>
<label>Monsieur</label>
<input type="radio" name="sexe" value="Monsieur"
checked="checked"/>
<label>Madame</label>
<input type="radio" name="sexe" value="Madame"/>
</fieldset>
</form>
b. Les cases a cocher
Les cases à cocher sont utilisées lorsqu’il s’agit d’une réponse contenant plus
qu'un choix. Le fonctionnement paraît identique aux boutons radio à la différence
que les cases à cocher ne font pas partie d’un groupe.
Une case à cocher est encore créée à l’aide de l’élément <input /> dont l’attribut
"type" prend cette fois la valeur "checkbox". Les attributs "name" de chacune des
cases doivent porter des noms différents. L’attribut "value" est indispensable et il
contient la valeur associée à chaque case cochée, qui sera récupérée côté serveur
après l’envoi du formulaire. Cet attribut peut avoir une valeur de type booléen de
la forme « oui » ou « non ».
Les attributs checked, disabled et title ont le même rôle que les boutons radio
peuvent être utilisés dans les mêmes conditions. Le code de création d’une case à
cocher peut donc être le suivant :
48
Exemple
<form action="traitement.php" method="post">
<fieldset>
<legend><big>Quelques renseignements </big></legend>

<label>Mr</label>
<input type="radio" name="sexe" value="Monsieur"
checked="checked"/>
<label>Me</label>
<input type="radio" name="sexe" value="Madame"/>
<label>Mlle</label>
<input type="radio" name="sexe" value="Mademoiselle"/> <

<label>Nom </label>
<input type="text" name="nom" size="25"/><br/>

<label>Pays: </label>
<label>France </label>
<input type="radio" name="pays"/>
<label>Allemagne </label>
<input type="radio" name="pays"/>
<label>Italie </label>
<input type="radio" name="pays"/><br/>

<label>Vos goûts musicaux: </label>
<label>Classique </label>
<input type="checkbox" name="classique"/>
<label> Chanson française </label>
<input type="checkbox" name="chanson"/>
<label> Rock </label>
<input type="checkbox" name="rock"/><br/>
<input type="submit" value="valider"/>
<input type="reset" value="rétablir"/><br/>
</fieldset>
</form>
4.8. Les listes de sélection
Un autre moyen de faciliter la saisie de données par un visiteur d'un site consiste à
lui proposer d’effectuer un ou plusieurs choix parmi une liste de sélection
déroulante pouvant contenir un grand nombre d’éléments. Une liste de sélection est
créée avec l’élément <select>. En soi, cet élément n’entraîne aucun rendu visuel, il
n’est que le conteneur de la liste. Il doit donc inclure ensuite autant d’éléments
49
<option>qu’il y a de choix proposés au visiteur. La structure XHTML d’une liste de

sélection prend alors la forme suivante :
<select name="nom" size="n">

<option value="valeur_1"> valeur_1</option>
<option value=" valeur_2"> valeur_2</option>
<option value=" valeur_n"> valeur_n</option>
</select>
L’élément <select> possède des attributs résumés dans le tableau suivant :

Attribut Description
name="texte" Permet de récupérer la ou les données choisies par
le visiteur dans une variable qui est identifiée par
ce nom
size="Nombre" Définit le nombre de lignes d’options qui sont
visibles lors de l’affichage de la liste
multiple="multiple" Prend la valeur booléenne unique multiple pour
indiquer que l’utilisateur peut opérer plusieurs
choix simultanément dans la liste en maintenant la
touche Ctrl enfoncée
tabindex="Nombre" Attribue un ordre de tabulation à la liste et la
rendre active avec la touche de tabulation
disabled="disabled" Rend la liste inactive et aucun choix n’est plus alors
possible
selected= "selected" définit une valeur par défaut autre que celle de la
première option de la liste
Remarque
Quand l’attribut multiple est défini et que l’on utilise un serveur PHP, les valeurs
choisies sont récupérées dans un tableau, et il faut, pour les récupérer, que le nom
de la liste soit suivi de crochets ouvrant et fermant (par exemple : name="nom[]").
50
Exemple
<form action="exemple.php"method="post">
<fieldset>
<legend><b>Veuillez compléter le questionnaire</b></legend>
<inputtype="text"name="nom"size="40"maxlength="256"value="votre
nom"onclick="this.value=��"/><br/>

<label>Votre pays</label>
<selectname="pays"size="1">
<optionvalue="null"disabled="disabled"> Votre
pays</option>
<optionvalue="France"> France</option>
<optionvalue="Belgique"> Belgique</option>
<optionvalue="Suisse"> Suisse</option>
<optionvalue="Canada"> Canada</option>
</select

<h3>Vos connaissances informatique <small>(Pour faire plusieurs
choix maintenir la touche CTRL enfoncée)</small></h3>
<selectname="savoir[]"size="4"multiple="multiple">
<optionvalue="C++"selected="selected">
C++</option>
<optionvalue="Java"> Java</option>
<optionvalue="PHP"> PHP</option>
<optionvalue="SQL"> SQL</option>
</select><br/>
<inputtype="submit"value="Envoyer "/>
<inputtype="reset"value=" Effacer tout"/><br/>
</fieldset>
</form>
Pour créer des groupes d’options à l’intérieur d’une liste, il faut faire intervenir
l’élément <optgroup> dans l’élément <select>. Les options de chaque groupe sont
incluses entre les balises <optgroup> et </optgroup>. À l’intérieur d’un élément
<select>, on peut inclure autant de groupes que l’on veut. Le libellé de chaque
groupe est donné dans l’attribut "label" de l’élément <optgroup>. Le code de
création d’un groupe a donc la structure suivante :
<select name="nom" size="n">
<optgroup label="nomGroupe">
<option value="valeur_1"> valeur_1</option>
</optgroup>

</select>
51
Exemple
<form action="trait.php"method="post">
<fieldset>
<legend><b>Veuillez compléter le questionnaire</b></legend>

<input type="text" name="nom"/>
<h3>Indiquez quel est votre pays
<select name="pays" size="1">
<option value="null"> Votre pays</option>
<optgroup label="Afrique du nord">
<option value="Tunisie"> Tunisie</option>
<option value="Algérie"> Algérie</option>
<option value="Maroc"> Maroc</option>
<option value="Libye "> Libye</option>
</optgroup>
<optgroup label="Europe">
<option value="France"> France</option>
<option value="Belgique"> Belgique</option>
<option value="Suisse"> Suisse</option>
<option value="Allemagne"> Allemagne</option>
</optgroup>
<optgroupl abel="Autres">
<option value="Europe"> Europe </option>
<option value="Asie"> Asie </option>
<option value="Amériques"> Amériques </option>
<option value="Océanie"> Océanie</option>
</optgroup>
</select></h3>
<input type="submit" value="Envoyer"/>
<input type="reset" value=" Effacer tout"/><br/>
</fieldset>
</form>
4.9. Les zones cachées
Dans certains cas, un formulaire peut contenir des zones de texte cachées. Ces zones
peuvent servir pour recueillir des données. Pour définir ce type de zones de saisie, il
faut recourir à l’élément <input /> avec un attribut type auquel il faut attribuer la
valeur hidden.
4.10. Les zones file
Dans un siteinteractif, il est possible de permettre aux visiteurs d’envoyer des fichiers
du poste client vers le serveur (photo, image d’un objet à vendre…). Il est possible de le
52
faire avec l’élément <input /> doté d’un attribut "type" qui prend la valeur "file". Dans
ce cas, l’élément <form> doit utiliser la méthode "post" et avoir un attribut "enctype"
comme c’est indiqué dans l’exemple suivant :
<formaction="traitement.php"method="post"enctype="multipart/form-
data">
<fieldset>
<legend><b>Envoyez-nous votre photo</b></legend>
<label>Choisissez le fichier JPEG ou PNG : </label>
<inputtype="file"name="fichier"accept="image/jpeg,image/png"/>
</fieldset>
</form>
5. Apports du HTML5
5.1. Les nouveaux objets
Objet Description Code HTML 5

date Champ de saisie d'une date. <input type="date" name="d" />
time Champ de saisie de l'heure. <input type="time" name="t" />
Champ de saisie du mois. <input type="month" name="m"
month
/>
Champ de saisie du numéro de
week <input type="week" name="w" />
la semaine.
datetime- Champ de saisie de la date et <input type="datetime-local"
local de l'heure au format local. name="t" />
Champ permettant l'incré/la
décré d'une valeur numérique
<input type="number" name="n"
number initiale (0 par défaut). On peut
min="1" max="20" step="2/>
fixer la valeur minimale,
maximale ou le pas.
Champ permettant la sélection
d'un code couleur dans une
palette. La couleur est au <input type="color"
color
format héxadécimal. La valeur name="couleur" value="#ff0000"/>
par défaut est le noir qu'on
peut modifier avec l'attribut
53
"value".
Champ ressemblant, en
apparence, à celui de type text,
url mais il n'acceptera que les <input type="url" name="t" />
formats url de type: ftp://,
mailto:// ou http://.
Champ très proche du
type text. La valeur saisie doit
avoir le format d'un email: au
email minium un caractère (caractère <input type="email" name="t" />
non accentué comprenant - et
_) suivi d'un @ suivi à son tour
d'un caractère.
5.2. Les nouveaux attributs

Attribut Description Code HTML 5
Il impose la présence d'une
<input type="text" name="d"
required saisie dans le champ
required="required"/>
correspondant.
Il permet de donner le focus à
<input type="text" name="d"
autofocus un champ dès le chargement
autofocus="autofocus"/>
de la page.
Il donne une chaîne de <input type="email"
caractères contenant des value="toi@site.com" placeholder
placeholder
indications pour le = "veuillez indiquer un E-mail
remplissage d'un champ. valide"/>
Il permet de définir une
Voir dans ce qui suit
pattern expression régulière de
filtrage.
Min, max,
Déjà vu précédemment
step
54
Chapitre 6
Les feuilles de style
- Introduire la mise en page des pages web en utilisant le langage
CSS ;
- Décrire les concepts des feuilles de style ;
- Utiliser les feuilles de style dans la mise en forme des pages web;
- Réaliser une maquette, pour un site web, avec les feuilles de style.
Plan du chapitre
1. Introduction
2. Les avantages des CSS
3. Définition
4. La syntaxe
5. Les sélecteurs
6. Où écrire les styles ?
7. Le positionnement
Volume horaire
- 6 heures
55
Programmation web 1 Les feuilles de style CSS
Chapitre 6: Les feuilles de style
1. Introduction
Le langage CSS (Cascading Style Sheets) est utilisé pour définir l’aspect futur des sites
web, comme par exemple la couleur du fond de la page ou le type de police. Plus
concrètement, le CSS (ou feuille de style) est un document numérique qui va pouvoir
spécifier toutes les caractéristiques de mise en forme du document lié à la balise à
laquelle elle s'applique.
2. les avantages des CSS
La création de styles CSS (Cascading Style Sheets ou feuilles de style en cascade) est le
complément indispensable du langage XHTML. Ce procédé correspond parfaitement à
la séparation du contenu et de la présentation. Cette séparation permet de:
- Alléger les pages en centralisant les définitions des styles en un point unique:
une seule définition pouvant s’appliquer à un grand nombre d’éléments.
- Faciliter la maintenance et l’évolution des sites: elle apporte une grande rigueur
dans la conception des pages et permet un travail collaboratif entre plusieurs
programmeurs travaillant en parallèle, d’où une réduction des délais de
production.
3. Définition
Les propriétés sont regroupées par blocs de règles, délimités par les accolades {}.
Chaque bloc est précédé d'un sélecteur désignant les éléments structurels auxquelles
les propriétés concernées doivent être appliquées (balise, classe, ..).
4. La syntaxe
Pour déclarer un style, il faut suivre quelques règles générales. La syntaxe doit avoir
l'allure suivante:
Sélecteur { propriété 1 : valeur ;
propriété 2 : valeur ;
propriété n : valeur ;
56
}
Exemple :
div { color : red ;
background-color :yellow ;}
Avec :
- div: un sélecteur,
- color: propriété qui détermine la couleur du texte de l’élément, red est la valeur
attribuée à cette couleur,
- background-color désigne la couleur de fond, yellow est sa valeur.
Par la suite, tous les éléments <div> de la page dans laquelle se trouve cette
déclaration ont donc un contenu écrit en rouge sur fond jaune.
5. Les sélecteurs
Les sélecteurs permettent d’appliquer un style à tous les éléments, en une seule ligne
de code, sans avoir à répéter la définition dans plusieurs pages web.
5.1. La sélection d’un seul élément
Il s’agit de la sélection la plus simple, puisque le sélecteur est constitué du nom de

l’élément sans les caractères de début < et de fin de balise />.
Exemple :
p {color : yellow ; background-color :blue;}
Effet: le texte de tous les paragraphes s'affiche en jaune sur fond bleu.
5.2. La sélection de plusieurs éléments
On peut appliquer le même style à plusieurs éléments différents en les énumérant

et en les séparant par une virgule dans le sélecteur. Cette possibilité de
regroupement est utile pour définir des styles communs à un ensemble d’éléments
et évite la répétition.
Exemple
h1 {color : black ; background-color : red;}
div {color : black ; background-color : red;}
p {color : black ; background-color : red;}
57
seront remplacés par :

h1, div, p {color : black ; background-color : red;}
Exemple:
h1,div,p {color : black ; background-color : red;}
div {margin : 20px;}
Effet:
- L’élément<div> va avoir à la fois un texte noir et un fond rouge comme les
éléments <h1> et <p>.
- Il aura, de même, une marge de 20 pixels.
5.3. Le sélecteur universel
Pour appliquer un style à tous les éléments, nous utiliserons le sélecteur universel *
avant la définition d’une ou plusieurs propriétés.
Exemple1:
*{background-color : yellow;}
Effet: tous les éléments auront la couleur de fond jaune.
Exemple2:
*{background-color : yellow;}
p{background-color : gray;}
Effet: tous les éléments ont un fond jaune, sauf <p> aura un fond gris.
5.4. Les classes
Une classe permet d’appliquer un style à un élément via l’attribut class. Pour créer
une classe, le sélecteur est constitué du nom choisi pour la classe précédé d’un point
(.). Le nom de la classe peut être un mot quelconque, en évitant quand même les
noms des propriétés CSS et des éléments XHTML car cela occasionnerait des
confusions. Les classes présentent l’intérêt de pouvoir s’appliquer à n’importe quel
élément, n’importe où dans le code de la page
Exemple1 :
Code CSS : .class1 {color : red;}
Code XHTML : <p class="class1">Texte contenu du paragraphe</p>
58
Effet: le paragraphe aura comme couleur de texte rouge. Il est distingué du reste du
texte qui aura la couleur par défaut.
Exemple2 :
Code CSS:
div.classe1 {background–color : blue; color : red;}
Code XHTML :
<div class="classe1">Texte1</div>
<div>Texte2</div>
Effet: seule Texte1 aura une couleur de texte rouge sur un fond bleu. La classe
classe1 ne sera pas appliqué sur Texte2.
5.5. L'application de plusieurs classes au même élément
La puissance de l'application de plusieurs classes est la possibilité de combiner des

propriétés de chacune des classes.
Exemple :
Code CSS:
.jaune {color: yellow;}
.classe1 {color: red;}
.classe2 {font-style: italic}
.classe3 {background-color: #CCC;}
Code XHTML:
<h1 class="jaune">XHTML et CSS</h1>
<div class="classe1"> Un texte de classe 1(texte rouge) </div>
<div class="classe1 classe2"> Un texte de classe 1 et 2 (texte rouge et en italique)
</div>
<div class="classe1 classe3"> Un texte de classe 1 et 3 (texte rouge et fond gris)
</div>
<div class="jaune classe2 classe3"> Un texte de classe jaune, 2 et 3 (texte jaune,
en italique et fond gris) </div>
59
5.6. Le sélecteur d’identifiant ID
Chaque élément peut avoir un attribut id qui doit être unique dans une page
donnée. Un identifiant doit être précédé par le caractère dièse (#).
Exemple :
Code CSS:
div {color: aqua;}
#bleu {color: white; background-color: blue;}
Code XHTML :
<div id="bleu">Texte en blanc sur bleu</div>
<div>Texte en turquoise </div>
5.7. Les pseudo-classes et Les pseudo-éléments
Les sélecteurs précédents permettent d’attribuer un style à un ou plusieurs éléments

bien définis dans la hiérarchie d’un document XHTML. Les pseudo-classes et les
pseudo-éléments permettent de:
- attribuer un style à une partie d'un élément, par exemple le premier caractère
ou la première ligne d’un paragraphe.
- attribuer un style à un document en fonction des actions de l’utilisateur final,
par exemple le fait de placer son curseur sur un lien ou un composant de formulaire.
 Les pseudo-classes applicables aux liens

Deux pseudo-classes spécifiques aux éléments possèdent un attribut href faisant
référence à un document externe (lien vers une autre page) ou interne (ancre
vers une partie du même document). Il s’agit des pseudo-classes suivantes :
 :link, qui permet d’attribuer un style à un lien qui pointe vers un
document non encore vu. C’est l’état normal de tous les liens à l’ouverture de
la page.
 :visited, pour attribuer un style à un lien qui pointe vers un document déjà
vu, après un retour sur la page d’origine.
Pour les employer, il faut faire précéder le nom de la pseudo-classe de celui de
l’élément.
60
Exemple :
a:link {color: blue;}
a:visited {color: red;}
 Les pseudo-classes dynamiques

Elles permettent d’attribuer un style à un élément en fonction des actions
effectuées par le visiteur. Ces pseudo-classes sont dynamiques car le style
attribué disparaît avec le motif de leur création. Elles sont au nombre de trois :
 :focus, pour attribuer un style à l’élément qui a le focus. Le style disparaît
quand l’élément perd le focus.
Exemple :
a:focus{color: red;}
input:focus{background–color: blue;}
 :hover, pour attribuer un style à un élément visible dont la zone est
survolée par le pointeur de la souris. Quand le pointeur quitte cette zone, le
style est annulé, ce qui peut produire des effets visuels intéressants.
Exemple :
div:hover{backround-color: red; color: white;}
 :active, pour attribuer un style à un élément dit actif, c’est-à-dire quand
l’utilisateur clique sur son contenu. Là aussi, l’effet est transitoire et ne dure
que le temps de l’activation de l’élément.
Exemple
a:active{background-red; color: yellow;}
 Les pseudo-éléments
Leur nom vient de ce qu’ils permettent d’agir sur une partie du contenu d’un
élément comme s’il était contenu dans un nouvel élément fictif. On dénombre les
quatre pseudos éléments suivants :
 :first-letter, qui permet d’affecter un style à la première lettre du contenu
d’un élément indiqué avant ce sélecteur. On l’utilise classiquement pour créer
des effets de lettrines.
Exemple:
p:first-letter {font-size: 300%; color: blue;}
61
 :first-line, qui permet d’affecter un style à la première ligne du contenu de

l’élément indiqué. Cet affichage permet d’attirer l’attention sur un texte.
Exemple :
div:first-line{font-size: 150%; font-weight: bold;}
 :before, qui permet d’insérer un contenu doté d’un style particulier avant
le contenu réel de l’élément précisé, en l’associant avec la propriété content.
Exemple:
Code CSS:
p:before{content:"<<"; font-weight: bold;}
Code XHTML
<p>ceci est un texte</p>
 :after, qui joue un rôle similaire au précédent mais définit un contenu doté
d’un style à la fin du contenu de l’élément utilisé.
Exemple:
Code CSS:
p:after{content:">>"; font-weight: bold;}
Code XHTML
<p>ceci est un texte</p>
6. Où écrire les styles ?
Les styles CSS peuvent être intégrés dans le document XHTML de plusieurs manières :
6.1. Manière 1 : dans l’élément <style>
L’élément <style> a pour vocation de renfermer les définitions des styles CSS
utilisables dans la page qui le contient. Il doit, toujours, être inclus dans l’élément
<head> et qu’il ne peut contenir que des définitions de styles CSS et des
commentaires XHTML délimités par  ou des commentaires CSS délimités
par /* et */.
Exemple 1:
<head>
<style type= "text/CSS">
div,p {font-style: italic;}
h1,h2 {color: red;}
62
</style>
</head>
6.2. Manière 2 : dans un fichier externe
La tendance actuelle étant à la recommandation de la séparation du contenu et de

la présentation des pages web, l’écriture des styles dans les fichiers externes est
fortement conseillée. Il s’agit de fichiers écrits en texte brut réalisables avec un
éditeur simple. Le fichier ne devra contenir que des sélecteurs et les définitions des
styles ainsi que des commentaires CSS (délimités par les caractères /* et */) mais
aucune balise d’élément XHTML. Le fichier CSS doit toujours être enregistré sous
l’extension .CSS.
Exemple :
Code CSS :
/* Styles communs à toutes les pages */
/* fichier:« commun.CSS » */
body {background-color: white; color: marine;}
h1 {color: black; font-size: 20px;}
div,p {font-size: 12px;}
a:link {color: blue;}
a:hover {color: red;}
Code XHTML
<head>
<link rel="stylesheet" type="text/CSS" href="commun.CSS" />
......
</head>
6.3. Manière 3 : dans l’attribut style
Nous signalons cette possibilité pour mémoire car il n’est pas conseillé de l’utiliser.
Exemple :
<p> Le langage <span style="color: red "> XHTML </span> représente la dernière
évolution du <span style="color: gray"> HTML </span></p>
Il va de soi que cette manière ne correspond en rien à la philosophie de l’association
XHTML et CSS, qui commande une séparation du contenu et de la mise en forme.
63
De plus, toute modification de ces styles demande une exploration de tout le code
XHTML afin de repérer tous les attributs style, ce qui rend la maintenance plus
longue à réaliser.
7. Le positionnement
7.1. Généralités
La propriété CSS position permet de modifier le comportement d'affichage des blocs

énuméré comme suit :
 position:static : indique que l'élément doit se comporter normalement.
 position:inherit (CSS2) : déclare que l'élément en question hérite de la
propriété position de son parent. Si la position du parent est de type absolu,
l'élément concerné le sera aussi.
 position:fixed : L'idée est de placer un élément sur la page, et qu'il y reste quel
que soit le défilement.
 position:relative : ne retire pas l'élément du flux, mais le déplace simplement
par rapport à sa position dans le flux.
 position:absolute : retire complètement l'élément concerné du flux, et le place
aux coordonnées définies par les propriétés bottom, left, right ou top.
7.1.1. Position absolue
La position absolue {position: absolute} se détermine par rapport au coin

supérieur
gauche de la fenêtre du browser. Les coordonnées de ce point sont « top = 0 » et «
left = 0 ».
Il y a trois options pour top et left :
 auto (par défaut).
 pixels (vous précisez la valeur suivie de px).
 pourcentage (la même chose suivie de %).
Les coordonnées d'un point de haut en bas pour top et de gauche à droite pour
left.
Pour appliquer une position absolue à un texte on pout utiliser les balises «
SPAN » ou« DIV ». La balise « DIV » est préférable pour les grands textes qu'elle
64
fera précéder et suivre d'un saut de ligne; la balise « SPAN », conçue comme
simple marqueur, sera utilisée pour encadrer un paragraphe.
7.1.2. Position relative
La position relative {position: relative} se détermine par rapport à d'autres

éléments de la page, par exemple un élément du code Html. Un positionnement
relatif sera donc traité dans le flux du document (qui est traité de bas en haut),
et fera référence pour son positionnement à l'élément qui lui est immédiatement
supérieur. Cette propriété est valable pour tous les types de balises.
Exemple d'application :
Soit l'image un.jpg :
toto {position:absolute; top:10px; left:10px;}
<BODY BGCOLOR="#000080" TEXT="#FF0000">
<IMG SRC="1.jpg" BORDER=0 WIDTH=50 HEIGHT=50>
<B><DIV CLASS="toto">Toto et titi</DIV></B>
65
Donne en position absolue : Donne en position relative avec "Toto et Tata":
7.2. Attributs
7.2.1. Clip
Il s'applique uniquement aux éléments de position absolue. Il spécifie la zone de

visibilité du document, c'est à dire l'endroit où le document contenu dans les
balises pourra ne plus être visible s'il dépasse les paramètres de largeurs et de
hauteurs fixés par clip. La syntaxe de clip varie selon les navigateurs, mais les
recommandations du W3C sont du type:
clip:rect(haut,droite,bas,gauche)
Exemple : Prenons l'image un.jpg avec CLIP
<HEAD>
<STYLE TYPE="text/css">

</STYLE>
</HEAD>
<DIV CLASS="toto"><IMG SRC="1.jpg" BORDER=0
WIDTH=50 HEIGHT=50></DIV>
</BODY>
66
Donne :
Remarquons que les ¾ de l'image ont disparu.
7.2.2. Z-index
Z-index, c'est l'attribut qui permet de définir l'empilement des feuilles de styles.
Il indique l'axe vertical d'empilement, ou la priorité d'affichage entre les
éléments superposés. Il s'applique à tous les éléments de position relative ou
absolue. Plus l'index est grand, plus l'élément est situé dessus. Deux éléments
de même index vont se superposer. C'est très pratique pour afficher du texte
sur une image, ou vice-versa.
Exemple avec les deux images un.jpg et deux.jpg :
<STYLE TYPE="text/css">

</STYLE>
</HEAD>
<DIV CLASS="toto"><IMG SRC="1.jpg" BORDER=0 WIDTH=50
HEIGHT=50></DIV>
<DIV CLASS="titi"><IMG SRC="2.jpg" BORDER=0 WIDTH=50
HEIGHT=50></DIV>
67
Donne :
Si l'on place le z-index:2 sur la classe Toto, on aura :
68
Programmation web 1 Annexes
Annexe1
 Les unités de mesure de longueur en CSS
CSS offre différentes unités pour exprimer les dimensions. Certaines
proviennent de la typographie, comme le point (pt) et le pica (pc), d'autres
sont connues pour leur usage quotidien, comme le centimètre (cm) et le
pouce (in). Il y a également une unité "magique" inventée spécifiquement
pour CSS: le pixel px, et une unité dépendant de l'élément contenant qui est
le pourcentage (%).
Le tableau suivant résume les unités :
Type Unité Description

cm Centimètre
mm millimètre
Unité absolue in(inch) Pouce=2.54cm
pt(point) 1pt= 1/72 in
pc(pica) 1pc= 12 pt
px (pixel) Pixel signifie Picture Element. C'est une unité
de mesure relative qui dépend des dimensions
de la zone utile de l'écran et du mode vidéo
utilisé.
Selon les définitions vidéo, le nombre de pixels
Unité relative varie grandement pour un même écran:
- Mode VGA : 640x480 pixels
- Mode SVGA-I : 800x600 pixels
- Mode SVGA-II: 1024x768 pixels.
em ou ex relative à la hauteur des caractères de la police

pourcentage % relative à une unité de longueur
69
 Les propriétés de formatage de texte

 Les polices, taille et décoration
Propriété Description Valeurs

font-style Définit le style de  italic : italique
police  oblique : autre façon de mettre en
italique
 normal : normal (par défaut)
font-variant Définit si la police doit  small-caps : petites capitales
être rendue en petites  normal : normal (par défaut)
capitales ou non
font-weight Définit la graisse de la  bold : gras
police  bolder : plus gras
 lighter : plus fin
 normal : normal (par défaut)
font-size Définit la taille de la  px (pixels)
police  % (pourcentage, 100% = normal)
 em (taille relative, 1.0 = normal)
 ex (taille relative à la hauteur de la
lettre "x". 1.0 = normal)
 nom de taille
- xx-small : très très petit
- x-small : très petit
- small : petit
- medium : moyen
- large : grand
- x-large : très grand
- xx-large : très très grand
font-family Indiquer les noms de Exp:
polices possibles par font-family:police1, police2, police3;
ordre de préférence. Rq: On utilise des guillemets si le
70
nom de la police comporte des

espaces.
text-decoration La décoration du texte  underline : souligné
 overline : ligne au-dessus
 line-through : barré
 blink : clignotant
 none : normal (par défaut)
text-transform Mettre un texte en  uppercase : tout en majuscules
majuscule ou pas  lowercase : tout en minuscules
 capitalize : début des mots en
majuscules
 none : normal (par défaut)
Font Méga-propriété de Indique dans n'importe quel ordre des
police valeurs possibles pour font-family,
font-weight, font-style, fontsize, font-
variant. Exp: font:Arial, bold, 16px;
 L'alignement
Propriété Description Valeurs

 left : à gauche (par défaut)
Définit l'alignement
 center : centré
text-align horizontal d'un texte au
 right : à droite
sein de son conteneur
 justify : texte justifié
A utiliser dans des cellules de tableau
Définit l'alignement
 top : en haut
vertical-align vertical d'un texte au
 middle : au milieu
sein de son conteneur
 bottom : en bas
Définit un alinéa pour la Indiquer une valeur en pixels (px).
text-indent
première ligne de texte Valeur par défaut est 0
Définit la hauteur de
d'un élément Indiquer une valeur en pixels (px) ou
line-height
ligne d'un texte en pourcentage (%)
71
Définit l'espacement
letter-spacing entre chaque lettre d'un Indiquer une valeur en pixels (px)
texte
Définit l'espacement
word-spacing entre chaque mot d'un Indiquer une valeur en pixels (px)
texte
 Les propriétés de couleur et de fond

 Les couleurs
Type Propriété Valeurs possibles

Couleur de texte color Indiquer une couleur:
- En indiquant le nom de la couleur
en anglais (black, blue, green, white,
red...) - En indiquant la couleur en
hexadécimal (#CC48A1)
- En indiquant la couleur en RGB :
rgb (128, 255, 0)
Couleur de fond background-color Même chose que pour color, pour la
couleur de fond du texte
 Les images de fond

Image de fond background-image Indiquer l'url de l'image (notation absolue
ou relative)
background-image:url("images/fond.png");
Background-image:url
("http://www.monsite.com/images/fond.png");
Fond fixé background-  fixed : le fond reste fixe quand on descend
attachment plus bas sur la page
 scroll : le fond défile avec le texte (par
72
défaut)
Répétition du background-  repeat : le fond se répète (par défaut)
fond repeat  repeat-x : le fond ne se répète que sur une
ligne, horizontalement
 repeat-y : le fond ne se répète que sur une
colonne, verticalement
 no-repeat : le fond ne se répète pas, il n'est
affiché qu'une fois
Position du background- 2 façons de faire :
fond position - En notant une distance en px ou %, par
rapport au coin en haut à gauche.
background-position:50px 200px; /* 50 px à
droite, 200px en bas */
- En utilisant des valeurs prédéfinies, une
pour la verticale et une pour l'horizontale :
o top : en haut, verticalement
o center : au milieu, verticalement
o bottom : en bas, verticalement
o left : à gauche, horizontalement
o center : au centre, horizontalement
o right : à droite, horizontalement
background-position : bottom right; /* en
bas à droite */
Méga- background Indique dans n'importe quel ordre des
propriété de valeurs possibles pour background-image,
fond background-repeat, background-
attachment et background-position. L'ordre
des valeurs n'a pas d'importance et on n'est
pas obligé de mettre toutes les valeurs de
ces propriétés (au moins une suffit)
background:url("images/fond.png") no-
73
repeat fixed top right;
 Les propriétés des listes

Type de liste list-style-type Pour les listes non ordonnées (<ul>) :
 disc : un disque noir (par défaut)
 circle : un cercle
 square : un carré
 none : aucune puce ne sera utilisée
Pour les listes ordonnées (<ol>) :
 decimal : des nombres 1, 2, 3, 4... (par
défaut)
 upper-roman : numérotation romaine, en
majuscules (I, II, III,...)
 lower-roman : numérotation romaine, en
minuscules (i, ii, iii, iv, v...)
 upper-alpha : numérotation alphabétique, en
majuscules (A, B, C, D, E...)
 lower-alpha : numérotation alphabétique, en
minuscules (a, b, c, d, e...)
Position en list-style-  inside : sans retrait
retrait position  outside : avec retrait (par défaut)
Puce list-style-image Indiquer l'url de l'image qui servira de puce.

personnalisée list-style-image: url("images/puce.png");
Méga- list-style Réunir les valeurs de list-style-type, list-style-
propriété de position et list-style-image. On n'est pas obligé
liste de mettre toutes les valeurs, et l'ordre n'a pas
d'importance.
list-style: inside square;
74
Annexe2
 Les propriétés des boîtes

 Les dimensions

Largeur width Valeur en px, %, ou encore "auto" (valeur par
défaut, la largeur dépendra du texte à
l'intérieur)
Hauteur height Idem
 Les bordures

Épaisseur de la border-width Indiquer une valeur en px
bordure
Couleur de la border-color Indiquer une valeur de couleur
bordure
Type de border-style  none : pas de bordure (par défaut)
bordure  hidden : bordure cachée
 solid : ligne pleine
 double : ligne double (nécessite une taille
de bordure de 3px minimum)
 dashed : en tirets
 dotted : en pointillés
 inset : effet 3D "enfoncé"
 outset : effet 3D "surélevé"
 ridge : autre effet 3D
Bordure à border-left Indiquer la couleur, l'épaisseur et le type de
gauche bordure pour la bordure gauche
border-left: 2px inset blue; /* Bordure bleue
75
de 2px avec effet 3D "enfoncé" */

Bordure en border-top Idem
haut
Bordure à border-right Idem
droite
Bordure en bas border-bottom Idem
Méga-propriété border Indiquer l'apparence des bordures en haut, à
de bordure droite, en bas et à gauche.
 Les marges extérieures

Marge en haut margin-top Indiquer une valeur comme 20px, 10%, ...
Marge à gauche margin-left Idem
Marge à droite margin-right Idem
Marge en bas margin- Idem
bottom
Méga-propriété margin Indiquer de 1 à 4 valeurs à la suite:
de marge - 1 valeur : c'est la marge pour le haut, le
bas, la gauche et la droite
- 2 valeurs : la première correspond à la
marge pour le haut et le bas, la seconde pour
la gauche et la droite
- 3 valeurs : la première correspond à la
marge du haut, la seconde aux marges à
gauche et à droite, la troisième à la marge du
bas
- 4 valeurs : respectivement la marge du
haut, de la droite, du bas, de la gauche
Exemple, avec 2 valeurs : margin:20px 5px;
/* 20px de marge en haut et en bas, 5px à
gauche et à droite */
76
 Les marges intérieures

Marge intérieure padding-top Indiquer une valeur comme 20px,
en haut 1.5em...
Marge intérieure à padding-left Idem
gauche
Marge intérieure à padding-right Idem
droite
Marge intérieure padding-bottom Idem
en bas
Méga-propriété de padding Idem que margin
marge intérieure
 Les propriétés des tableaux

Type de bordure border-collapse  collapse : les bordures du tableau et
des cellules sont mélangées
 separate : les bordures du tableau et
des cellules sont séparées (par
défaut)
Cellules vides empty-cells  show : les bordures des cellules vides

sont affichées
 collapse : les cellules vides sont
masquées (par défaut)
Position du titre caption-side Indique la position du titre du tableau,

défini via la balise <caption>
 top : en haut du tableau
 bottom : en bas du tableau
 left : à gauche du tableau
 right : à droite du tableau
77
 Les propriétés de positionnement et d'affichage

 Les propriétés d'affichage

Type d'élément display  none : l'élément ne sera pas affiché
 block : l'élément devient de type "block"
(bloc, comme <p>)
 inline : l'élément devient de type "inline"
(en ligne, comme <strong>
 list-item : l'élément devient de type
"élément de liste à puce" (comme <li>)
Affichage visibility  hidden : masqué
 visible : visible (par défaut)
Rq: display:none; fait disparaître
l'élément, tandis que visibility:hidden;
masque l'élément, qui continue quand
même à prendre de la place sur l'écran
Afficher seulement clip Indiquer 4 valeurs comme ceci :
une partie clip: rect(valeur1, valeur2, valeur3,
valeur4);
Cela permet de n'afficher qu'une partie
d'un élément. rect() permet d'indiquer les
coordonnées du rectangle qui sera affiché
Les valeurs 1 à 4 correspondent
respectivement aux coins haut, droit, bas
et gauche du rectangle
 Les propriétés de positionnement

Flottant float  left : flottant à gauche
 right : flottant à droite
 none : pas de flottant (par défaut)
78
Stopper un clear  left : supprime l'effet d'un flottant à gauche

flottant précédent
 right : supprime l'effet d'un flottant à
droite précédent
 both : supprime l'effet d'un flottant
précédent, qu'il soit à gauche ou à droite
 none : pas de suppression de l'effet du
flottant (par défaut)
Type de position  absolute : position absolue par rapport au
positionnement coin en haut à gauche
 fixed : position fixe (fonctionne comme la
position absolue) L'élément reste à sa
position même quand on descend plus bas
dans la page
 relative : position relative, par rapport à la
position "normale" de l'élément
 static : positionnement normal (par défaut)
Position par top Valeur en px, %, em... à utiliser pour un
rapport au haut positionnement absolu, fixe ou relatif
Position par bottom Idem
rapport au bas
Position par left Idem
rapport à gauche
Position par right Idem
rapport à droite
Ordre d'affichage z-index En cas de positionnement absolu par
exemple, si 2 éléments se chevauchent, z-
index permet d'indiquer quel élément doit
être affiché au-dessus de l'autre. La valeur
est un nombre. Plus ce nombre est élevé,
plus l'élément sera affiché en avant.
79
Exp: si 2 éléments sont positionnés en

absolu avec un z-index de 10 pour l'un et de
20 pour l'autre, celui qui a un z-index de 20
est affiché par-dessus
 La propriété CURSOR

Curseur de souris cursor  auto : curseur automatique (par
défaut)
 default : curseur standard
 pointer : curseur en forme de main,
comme quand on pointe sur un lien
 text : curseur utilisé quand on pointe
sur du texte
 wait : curseur utilisé pour indiquer une
attente (sablier)
 help : curseur en forme de point
d'interrogation, indiquant une aide
 move : curseur en forme de croix,
indiquant un déplacement possible
 n-resize : flèche vers le nord
 ne-resize : flèche vers le nord-est
 e-resize : flèche vers l'est
 se-resize : flèche vers le sud-est
 s-resize : flèche vers le sud
 sw-resize : flèche vers le sud-ouest
 w-resize : flèche vers l'ouest
 nw-resize : flèche vers le nord-ouest
 url : curseur personnalisé, de type .cur
ou .ani cursor:
url("images/curseur.cur");
80

HTML Css

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

HTML Css

Transféré par

Droits d'auteur :

Formats disponibles

Ministère de l’Enseignement Supérieur,

Année Universitaire : 2016-2017

Table des matières

1. Les images .......................................................................................................... 33

Chapitre1. Introduction au Web

 FTP (File Transfer Protocol)

Le Web ou le World Wide Web ou le WWW ou le 3W ou la toile d’araignée, est une

Le Web se base sur:

Exemple d’adresse compliquée :

Le Web1.0 était la 1ère génération du web. Il comprenait des pages statiques. On

conception et à la mise à jour dynamique de site web. Ils partagent les

 Ils permettent à plusieurs individus de travailler sur un même document ;

4.2. Web 2.0 [2003 -> 2008]

 Les blogs ou WeBlog

Plus techniquement, il s’agit d’un outil de collaboration de contenu éditorial libre

 Le phénomène de syndication : les fameux flux RSS

4.3. Web 3.0 [2008 -> ???]

5. Les étapes de développement d’un site web

Pour développer un site web, les étapes suivantes sont à suivre :

5.1. Planification du travail de développement

 Réflexion sur l'objectif du site, sa cible et les moyens financiers à engager.

 Réflexion sur le contenu : contenu des pages, services attendus, principes de

5.2. Mise en œuvre

 Dépôt d'un nom de domaine. Un nom de domaine est un identifiant unique

Il existe deux classes d’extension :

 Choix d'un hébergeur.

 Choix et installation d'un outil de développement (SPIP, CMS,...) ou d'un

 Établissement d'une structure de pages HTML ou XHTML ou CSS.

utilisés sur les différents supports de communication de l’entreprise.

 Création de pages via le Système de gestion de contenu ou l'éditeur.

6.2. Types d’hébergement

Il existe plusieurs types d’hébergements. À titre d’exemple on cite :

 L’hébergement dédié (dedicated hosting)

Par contre, les inconvénients sont nombreux :

En revanche les inconvénients y existent :

En fait, un moteur est constitué de « robots »,encore appelés bots, spiders,

7.2. Définition du référencement

 Le référencement naturel : c'est le fait de positionner un site le plus haut

 Le référencement payant ou liens sponsorisés : les liens sponsorisés, liens

<meta name="description" content="Les liens sponsorisés, liens

Chapitre 2 :Le langage XHTML

Historiquement, les langages de balisage sont issus du langage SGML (Standard

HTML est un langage de description et de structuration de documents hypertextes. Ce

La dernière recommandation HTML est en version 4 et particulièrement la version «

2. XHTML en tant que langage de balisage

Rappelons que, par définition, le langage HTML ou XHTML est un outil de

<nom_balise attribut1="valeur1" attribut2="valeur2" > Contenu_balise </nom_balise>

L’utilisation du HTML strict, et plus encore du XHTML s’impose de plus en plus. De

Parmi ces règles, on cite :

- Document « bien formée »

4. La différence entre HTML et XHTML

 Les balises et attributs doivent être entièrement en minuscules. Les valeurs ne

 Pour déclarer un document XHTML 1.1 et au-delà, on écrira:

5. Les éditeurs HTML8

L'édition des images, des animations ou du son sont effectuées avec

- Les éditeurs tel-tel (WYSIWYG) ou visuels

6. Les éditeurs visuels

7. Les éditeurs classiques

8. La structure de base d’un document XHTML

Le squelette d’un document HTML est le suivant :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

 Les informations d’entête sont :

 Le corps contient tout ce qui apparaîtra dans la fenêtre du navigateur.