Support de cours Programmation Web 1 - msj-learning.commsj-learning.com/pdf/html.pdf · Support de...
85
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
Transcript of Support de cours Programmation Web 1 - msj-learning.commsj-learning.com/pdf/html.pdf · Support de...
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.
Support de cours Programmation Web1
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
Support de cours Programmation Web1
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
Support de cours Programmation Web1
Annexe1 ............................................................................................................... 69
Annexe2 ............................................................................................................... 75
1
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
Programmation Web 1 Introduction au Web
2
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
Programmation Web 1 Introduction au Web
3
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
Programmation Web 1 Introduction au Web
4
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
Programmation Web 1 Introduction au Web
5
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.
Programmation Web 1 Introduction au Web
6
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.
Programmation Web 1 Introduction au Web
7
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.
Programmation Web 1 Introduction au Web
8
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
Programmation Web 1 Introduction au Web
9
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
3Source : dicodunet.com
Programmation Web 1 Introduction au Web
10
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.
Programmation Web 1 Introduction au Web
11
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 5Source : accesstoebusiness.com
Programmation Web 1 Introduction au Web
12
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.
Programmation Web 1 Introduction au Web
13
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.
14
Chapitre 2 Le langage XHTML
Objectifs Spécifiques
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
Programmation Web 1 Le langage XHTML
15
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]
6Source : www.infini-software.com
Programmation Web 1 Le langage XHTML
16
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 :
7Source : openweb.eu.org
Programmation Web 1 Le langage XHTML
17
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 :
8Source : wikipédia.org
Programmation Web 1 Le langage XHTML
18
- 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
Programmation Web 1 Le langage XHTML
19
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 : "<!--" au début du commentaire et "-->" à 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>:
Programmation Web 1 Le langage XHTML
20
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)
Programmation Web 1 Le langage XHTML
21
À 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 :
Programmation Web 1 Le langage XHTML
22
<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 />).
23
Chapitre 3 Mise en forme, liste, tableau
Objectifs Spécifiques
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
Programmation Web 1 Mise en forme, liste et tableau
24
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> <h3>Titre de niveau 3</h3>
<h4>Titre de niveau 4</h4> <h5>Titre de niveau 5</h5> <h6>Titre de niveau 6</h6>
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.
Programmation Web 1 Mise en forme, liste et tableau
25
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>
<strong> Texte </strong>
Texte
Italique <i> Texte </i>
<em> Texte </em>
Texte
Souligné <u>Texte</u> Texte
Exposant 10 <sup>3</sup> 103
Indice C <sub> 2</sub> C2
Barré <s> Texte </s>
<strike> Texte </strike>
Texte
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>
Programmation Web 1 Mise en forme, liste et tableau
26
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>.
Programmation Web 1 Mise en forme, liste et tableau
27
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>
Programmation Web 1 Mise en forme, liste et tableau
28
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>
<td> Ligne 1 Colonne 2</td> <td> Ligne 1 Colonne 3</td>
</tr> <tr>
<td> Ligne 2 Colonne 1</td> <td> Ligne 2 Colonne 2</td> <td> Ligne 2 Colonne 3</td>
</tr> <tr>
<td> Ligne 3 Colonne 1</td> <td> Ligne 3 Colonne 2</td> <td> Ligne 3 Colonne 3</td>
</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 :
Programmation Web 1 Mise en forme, liste et tableau
29
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
width = "N%"
Définit la largeur totale du tableau dans la
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
cellpadding = "N%"
Définit la largeur de l’espacement entre le
contenu d’une cellule et sa bordure.
cellspacing = "N px" ou
cellspacing = "N%"
définit l’espacement entre les bordures de
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
Programmation Web 1 Mise en forme, liste et tableau
30
<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>
Programmation Web 1 Mise en forme, liste et tableau
31
Fournit le tableau suivant :
32
Chapitre 4 Les formulaires
Objectifs Spécifiques
A la fin de ce chapitre, l'étudiant doit être capable de:
- 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
Programmation Web 1 Images, Audio, Vidéo et Lien Hypertextes
33
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
Programmation Web 1 Images, Audio, Vidéo et Lien Hypertextes
34
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.
Programmation Web 1 Images, Audio, Vidéo et Lien Hypertextes
35
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>…
Programmation Web 1 Images, Audio, Vidéo et Lien Hypertextes
36
</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.
Programmation Web 1 Images, Audio, Vidéo et Lien Hypertextes
37
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.
Programmation Web 1 Images, Audio, Vidéo et Lien Hypertextes
38
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/> <!-- Première section --> <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/>
<!-- Deuxième section --> <div> <h1>CSS</h1><a id="sujet2" href="#menu2">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/> <!-- Troisième section -->
<div> <h1>JavaScript</h1><a id="sujet3" href="#menu3">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/>
Programmation Web 1 Images, Audio, Vidéo et Lien Hypertextes
39
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>
<a href="xhtml.html#chap2"> Chapitre 2</a> <a href="xhtml.html#chap3"> Chapitre 3</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:[email protected]"> Contactez nous! </a></div>
<p>Demande de <a href="mailto:[email protected]?subject=Demande de
renseignements">documentation</a></p>
40
Chapitre 5 Les formulaires
Objectifs Spécifiques
A la fin de ce chapitre, l'étudiant doit être capable de:
- 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
Programmation Web 1 Les formulaires
41
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> <!-- éventuellement un ensemble d'autres fieldset -->
</form>
Cette structure est améliorée par un ensemble d'attributs et d'autres éléments intégrés.
Programmation Web 1 Les formulaires
42
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
Programmation Web 1 Les formulaires
43
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.
Programmation Web 1 Les formulaires
44
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" /></button> <input type="image" src="../images/val1.gif"value="Envoi1" name=" BtEnv1"title="Bouton d’envoi image"onclick="submit()"/>
</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
Programmation Web 1 Les formulaires
45
- 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" maxlength="25"/><br/><br/>
<label>Adresse : </label> <input type="text" name="adresse" value="Votre adresse"
maxlength="60"/><br/><br/> <label>Pays : </label> <input type="text" name="pays" value="Votre pays"
maxlength="20"/><br/><br/> <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="" />
Programmation Web 1 Les formulaires
46
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>.
Programmation Web 1 Les formulaires
47
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.
Programmation Web 1 Les formulaires
48
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 :
Programmation Web 1 Les formulaires
49
Exemple
<form action="traitement.php" method="post">
<fieldset> <legend><big>Quelques renseignements </big></legend>
<!--Civilité--> <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"/> <br/>
<!--Nom --> <label>Nom </label>
<input type="text" name="nom" size="25"/><br/> <!-- Pays -->
<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/> <!-- Goûts -->
<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
Programmation Web 1 Les formulaires
50
<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_3"> valeur_3</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[]").
Programmation Web 1 Les formulaires
51
Exemple
<form action="exemple.php"method="post"> <fieldset>
<legend><b>Veuillez compléter le questionnaire</b></legend> <label>Nom : </label>
<inputtype="text"name="nom"size="40"maxlength="256"value="votre nom"onclick="this.value=����"/><br/>
<!-- Liste à choix unique --> <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
<!-- Liste à choix multiples --> <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>
<option value=" valeur_2"> valeur_2</option> </optgroup> <!-- Autres groupes -->
</select>
Programmation Web 1 Les formulaires
52
Exemple
<form action="trait.php"method="post"> <fieldset> <legend><b>Veuillez compléter le questionnaire</b></legend>
<!-- Liste à choix unique --> <label>Nom : </label>
<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
Programmation Web 1 Les formulaires
53
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 :
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" />
month Champ de saisie du mois. <input type="month" name="m"
/>
week Champ de saisie du numéro de
la semaine. <input type="week" name="w" />
datetime-
local
Champ de saisie de la date et
de l'heure au format local.
<input type="datetime-local"
name="t" />
number
Champ permettant l'incré/la
décré d'une valeur numérique
initiale (0 par défaut). On peut
fixer la valeur minimale,
maximale ou le pas.
<input type="number" name="n"
min="1" max="20" step="2/>
color
Champ permettant la sélection
d'un code couleur dans une
palette. La couleur est au
format héxadécimal. La valeur
par défaut est le noir qu'on
peut modifier avec l'attribut
<input type="color"
name="couleur" value="#ff0000"/>
<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>
Programmation Web 1 Les formulaires
54
"value".
url
Champ ressemblant, en
apparence, à celui de type text,
mais il n'acceptera que les
formats url de type: ftp://,
mailto:// ou http://.
<input type="url" name="t" />
Champ très proche du
type text. La valeur saisie doit
avoir le format d'un email: au
minium un caractère (caractère
non accentué comprenant - et
_) suivi d'un @ suivi à son tour
d'un caractère.
<input type="email" name="t" />
5.2. Les nouveaux attributs
Attribut Description Code HTML 5
required
Il impose la présence d'une
saisie dans le champ
correspondant.
<input type="text" name="d"
required="required"/>
autofocus
Il permet de donner le focus à
un champ dès le chargement
de la page.
<input type="text" name="d"
autofocus="autofocus"/>
placeholder
Il donne une chaîne de
caractères contenant des
indications pour le
remplissage d'un champ.
<input type="email"
value="[email protected]" placeholder
= "veuillez indiquer un E-mail
valide"/>
pattern
Il permet de définir une
expression régulière de
filtrage.
Voir dans ce qui suit
Min, max,
step
Déjà vu précédemment
55
Chapitre 6 Les feuilles de style
Objectifs Spécifiques
A la fin de ce chapitre, l'étudiant doit être capable de:
- 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
Programmation web 1 Les feuilles de style CSS
56
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 ;
Programmation web 1 Les feuilles de style CSS
57
}
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;}
Programmation web 1 Les feuilles de style CSS
58
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>
Programmation web 1 Les feuilles de style CSS
59
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>
Programmation web 1 Les feuilles de style CSS
60
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.
Programmation web 1 Les feuilles de style CSS
61
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;}
Programmation web 1 Les feuilles de style CSS
62
: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 <!-- et --> 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;}
Programmation web 1 Les feuilles de style CSS
63
</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.
Programmation web 1 Les feuilles de style CSS
64
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
Programmation web 1 Les feuilles de style CSS
65
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>
Programmation web 1 Les feuilles de style CSS
66
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">
<!--
.toto {
position:absolute;
top:10px;
left:10px;
clip:rect(0, 25, 25, 0);
} -->
</STYLE>
</HEAD>
<BODY BGCOLOR="#000080" TEXT="#FF0000">
<DIV CLASS="toto"><IMG SRC="1.jpg" BORDER=0
WIDTH=50 HEIGHT=50></DIV>
</BODY>
Programmation web 1 Les feuilles de style CSS
67
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"> <!-- .toto { position:absolute; top:10px; left:10px; } .titi { position:absolute; top:30; left:30; z-index:2; } --> </STYLE> </HEAD> <BODY BGCOLOR="#000080" TEXT="#FF0000"> <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>
Programmation web 1 Les feuilles de style CSS
68
Donne :
Si l'on place le z-index:2 sur la classe Toto, on aura :
Programmation web 1 Annexes
69
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
Unité absolue
cm Centimètre
mm millimètre
in(inch) Pouce=2.54cm
pt(point) 1pt= 1/72 in
pc(pica) 1pc= 12 pt
Unité relative
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
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
Programmation web 1 Annexes
70
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
police
italic : italique
oblique : autre façon de mettre en
italique
normal : normal (par défaut)
font-variant Définit si la police doit
être rendue en petites
capitales ou non
small-caps : petites capitales
normal : normal (par défaut)
font-weight Définit la graisse de la
police
bold : gras
bolder : plus gras
lighter : plus fin
normal : normal (par défaut)
font-size Définit la taille de la
police
px (pixels)
% (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
polices possibles par
ordre de préférence.
Exp:
font-family:police1, police2, police3;
Rq: On utilise des guillemets si le
Programmation web 1 Annexes
71
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
majuscule ou pas
uppercase : tout en majuscules
lowercase : tout en minuscules
capitalize : début des mots en
majuscules
none : normal (par défaut)
Font Méga-propriété de
police
Indique dans n'importe quel ordre des
valeurs possibles pour font-family,
font-weight, font-style, fontsize, font-
variant. Exp: font:Arial, bold, 16px;
L'alignement
Propriété Description Valeurs
text-align
Définit l'alignement
horizontal d'un texte au
sein de son conteneur
left : à gauche (par défaut)
center : centré
right : à droite
justify : texte justifié
vertical-align
Définit l'alignement
vertical d'un texte au
sein de son conteneur
A utiliser dans des cellules de tableau
top : en haut
middle : au milieu
bottom : en bas
text-indent Définit un alinéa pour la
première ligne de texte
d'un élément
Indiquer une valeur en pixels (px).
Valeur par défaut est 0
line-height Définit la hauteur de
ligne d'un texte
Indiquer une valeur en pixels (px) ou
en pourcentage (%)
Programmation web 1 Annexes
72
letter-spacing
Définit l'espacement
entre chaque lettre d'un
texte
Indiquer une valeur en pixels (px)
word-spacing
Définit l'espacement
entre chaque mot d'un
texte
Indiquer une valeur en pixels (px)
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
Type Propriété Valeurs possibles
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-
attachment
fixed : le fond reste fixe quand on descend
plus bas sur la page
scroll : le fond défile avec le texte (par
Programmation web 1 Annexes
73
défaut)
Répétition du
fond
background-
repeat
repeat : le fond se répète (par défaut)
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
fond
background-
position
2 façons de faire :
- 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-
propriété de
fond
background Indique dans n'importe quel ordre des
valeurs possibles pour background-image,
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-
Programmation web 1 Annexes
74
repeat fixed top right;
Les propriétés des listes
Type Propriété Valeurs possibles
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
retrait
list-style-
position
inside : sans retrait
outside : avec retrait (par défaut)
Puce
personnalisée
list-style-image
Indiquer l'url de l'image qui servira de puce.
list-style-image: url("images/puce.png");
Méga-
propriété de
liste
list-style Réunir les valeurs de list-style-type, list-style-
position et list-style-image. On n'est pas obligé
de mettre toutes les valeurs, et l'ordre n'a pas
d'importance.
list-style: inside square;
Programmation web 1 Annexes
75
Annexe2
Les propriétés des boîtes
Les dimensions
Type Propriété Valeurs possibles
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
Type Propriété Valeurs possibles
Épaisseur de la
bordure
border-width Indiquer une valeur en px
Couleur de la
bordure
border-color Indiquer une valeur de couleur
Type de
bordure
border-style none : pas de bordure (par défaut)
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 à
gauche
border-left Indiquer la couleur, l'épaisseur et le type de
bordure pour la bordure gauche
border-left: 2px inset blue; /* Bordure bleue
Programmation web 1 Annexes
76
de 2px avec effet 3D "enfoncé" */
Bordure en
haut
border-top Idem
Bordure à
droite
border-right Idem
Bordure en bas border-bottom Idem
Méga-propriété
de bordure
border Indiquer l'apparence des bordures en haut, à
droite, en bas et à gauche.
Les marges extérieures
Type Propriété Valeurs possibles
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-
bottom
Idem
Méga-propriété
de marge
margin Indiquer de 1 à 4 valeurs à la suite:
- 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 */
Programmation web 1 Annexes
77
Les marges intérieures
Type Propriété Valeurs possibles
Marge intérieure
en haut
padding-top Indiquer une valeur comme 20px,
1.5em...
Marge intérieure à
gauche
padding-left Idem
Marge intérieure à
droite
padding-right Idem
Marge intérieure
en bas
padding-bottom Idem
Méga-propriété de
marge intérieure
padding Idem que margin
Les propriétés des tableaux
Type Propriété Valeurs possibles
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
Programmation web 1 Annexes
78
Les propriétés de positionnement et d'affichage
Les propriétés d'affichage
Type Propriété Valeurs possibles
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
une partie
clip
Indiquer 4 valeurs comme ceci :
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
Type Propriété Valeurs possibles
Flottant float left : flottant à gauche
right : flottant à droite
none : pas de flottant (par défaut)
Programmation web 1 Annexes
79
Stopper un
flottant
clear left : supprime l'effet d'un flottant à gauche
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
positionnement
position absolute : position absolue par rapport au
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
rapport au haut
top Valeur en px, %, em... à utiliser pour un
positionnement absolu, fixe ou relatif
Position par
rapport au bas
bottom Idem
Position par
rapport à gauche
left Idem
Position par
rapport à droite
right Idem
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.
Programmation web 1 Annexes
80
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
Type Propriété Valeurs possibles
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");
