Programmation!web!1!

Transcription

!
!
!
!
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!
!
Programmation!web!1!
SUPPORT!DE!COURS!
!!!!!!
MAEL!SALAH!JRAD!(ASSISTANTE!TECHNOLOQUE!A!ISET!DE!
DJERBA)!
Public!cible!:!
Classe!de!1ère!année!
Licence!:!Technologies!de!l’informatique!
Parcours!:!Tronc!commun!(TC)!
!
!
!
!
!
!
Version!2014!
!
!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!AVANT!PROPOS!
!
!
!
Le! présent! support! de! cours! «! Programmation! Web! 1! »! est! destiné! aux! étudiants!
informaticiens,!d'un!cycle!court,!des!instituts!supérieurs!des!études!technologiques.!
!
!
La!préparation!de!ce!support!a!été!faite!conformément!au!programme!approuvé!par!
la! Direction! Générale! des! Etudes! Technologiques! et! en! collaboration! avec! les! collègues!
suivants!:!
Olfa!Hamrouni!(Technologue)!
Mouna!kort!!(Technologue)!
!
!
!
FICHE!DESCRIPTIVE!DE!LA!MATIERE!:!PROGRAMMATION!WEB1!
Domaine!de!formation!:!!!!!!!!!
Mention!:!
Parcours!:!
Semestre!:!
Unité!d’enseignement!:!
Volume!horaire!:!
Coefficient!:!
!
Sciences!et!technologies!
Technologie!de!l’informatique!(TI)!
Tronc!commun!(TC)!
S1!
Développement!Web!et!Multimédia!1!
21!heures!(CI)!
2!
!
Résumé!
Ce! cours! est! destiné! aux! étudiants! disposant! de! quelques! notions! de! programmation!
procédurale,!pour!leur!fournir!les!notions!de!base!pour!utiliser!efficacement!les!feuilles!de!style!
dans!la!conception!de!site!web!en!respectant!les!bonnes!
pratiques.!
!
!
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éSrequis!
•! 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!WEB!1!»!
!
!
Sommaire!
!
CHAPITRE!I!:!INTRODUCTION!AU!WEB!....................................................................................................!2!
1.!
INTRODUCTION!...........................................................................................................................!2!
2.!
DEFINITION!..................................................................................................................................!3!
3.!
PRINCIPE!......................................................................................................................................!3!
4.!
EVOLUTION!DU!WEB!...................................................................................................................!4!
1.1.!
WEB!1.0![1995d>2003]!.........................................................................................................!4!
1.2.!
WEB!2.0![2003!d>!2008]!.......................................................................................................!5!
1.3.!
WEB!3.0!![2008!d>!???]!........................................................................................................!7!
5.!
LES!ETAPES!DE!DEVELOPPEMENT!D’UN!SITE!WEB!......................................................................!7!
5.1.!
PLANIFICATION!DU!TRAVAIL!DE!DEVELOPPEMENT!:!...........................................................!7!
5.2.!
MISE!EN!ŒUVRE!:!................................................................................................................!7!
5.3.!
CONCEPTION!:!.....................................................................................................................!8!
5.4.!
REALISATION!:!.....................................................................................................................!8!
6.!
L'HEBERGEMENT!.........................................................................................................................!9!
6.1.!
DEFINITION!..........................................................................................................................!9!
6.2.!
TYPES!D’HEBERGEMENT!......................................................................................................!9!
6.3.!
LE!REFERENCEMENT!..........................................................................................................!10!
CHAPITRE!2!:!LE!LANGAGE!XHTML!........................................................................................................!14!
1.!
HISTORIQUE!!..............................................................................................................................!14!
2.!
XHTML!EN!TANT!QUE!LANGAGE!DE!BALISAGE!..........................................................................!15!
3.!
HTML!OU!XHTML!?!....................................................................................................................!15!
4.!
LA!DIFFERENCE!ENTRE!HTML!ET!XHTML!...................................................................................!15!
5.!
LES!EDITEURS!HTML!!!................................................................................................................!16!
5.1.!
LES!EDITEURS!VISUELS!.......................................................................................................!17!
5.2.!
LES!EDITEURS!CLASSIQUES!................................................................................................!17!
6.!
!
LA!STRUCTURE!DE!BASE!D’UN!DOCUMENT!XHTML!..................................................................!17!
6.1.!
L’ELEMENT!RACINE!<HTML>!.............................................................................................!18!
6.2.!
L’ELEMENT!<HEAD>!:!ENdTETE!D’UN!DOCUMENT!.............................................................!18!
6.3.!
L’ELEMENT!<BODY>!:!LE!CORPS!DU!DOCUMENT!..............................................................!20!
!
CHAPITRE!3:!MISE!EN!FORME,!LISTE!ET!TABLEAU!.................................................................................!22!
1.!
LES!TITRES!..................................................................................................................................!22!
2.!
LES!DIVISIONS!DE!LA!PAGE!........................................................................................................!22!
3.!
LES!STYLES!PHYSIQUES!..............................................................................................................!23!
4.!
LES!LISTES!..................................................................................................................................!24!
4.1.!
LES!LISTES!ORDONNEES!.....................................................................................................!24!
4.2.!
LES!LISTES!A!PUCES!............................................................................................................!25!
4.3.!
LES!LISTES!DE!DEFINITIONS!...............................................................................................!25!
5.!
LES!TABLEAUX!...........................................................................................................................!26!
5.1.!
LA!STRUCTURE!GENERALE!D’UN!TABLEAU!........................................................................!26!
5.2.!
LES!ATTRIBUTS!DE!LA!BALISE!<TABLE>!..............................................................................!27!
5.3.!
L'ALIGNEMENT!DU!CONTENU!DES!CELLULES!....................................................................!28!
5.4.!
LA!FUSION!DES!CELLULES!..................................................................................................!29!
CHAPITRE!4!:!IMAGES,!AUDIO,!VIDEO!ET!LIENS!HYPERTEXTES!.............................................................!31!
1.!
LES!IMAGES!...............................................................................................................................!31!
1.1.!
LES!TYPES!D’IMAGES!.........................................................................................................!31!
1.2.!
L’INSERTION!D’IMAGES!.....................................................................................................!31!
2.!
L'AUDIO!.....................................................................................................................................!32!
3.!
LA!VIDEO!....................................................................................................................................!33!
4.!
LES!LIENS!HYPERTEXTES!............................................................................................................!34!
4.1.!
DEFINITION!........................................................................................................................!34!
4.2.!
LES!LIENS!EXTERNES!..........................................................................................................!35!
4.3.!
Les!liens!INTERNES:!les!ancres!/!LES!SIGNETS!...................................................................!36!
4.4.!
LES!LIENS!DECLENCHANT!L’ENVOI!D’UN!EdMAIL!...............................................................!38!
1.!
LES!NOUVEAUX!OBJETS!.............................................................................................................!39!
2.!
LES!NOUVEAUX!ATTRIBUTS!.......................................................................................................!39!
CHAPITRE!5:!LES!FORMULAIRES!............................................................................................................!40!
1.!
INTRODUCTION!.........................................................................................................................!40!
2.!
STRUCTURE!D’UN!FORMULAIRE!................................................................................................!40!
3.!
LES!ATTRIBUTS!DE!L’ELEMENT!<FORM>!....................................................................................!41!
3.1.!
L’ATTRIBUT!ID!....................................................................................................................!41!
3.2.!
L’ATTRIBUT!ACTION!...........................................................................................................!41!
3.3.!
L’ATTRIBUT!!METHOD!........................................................................................................!41!
4.!
!
LES!ELEMENTS!INTEGRES!DANS!L'ELEMENT!FORM!...................................................................!42!
!
4.1.!
LES!BOUTONS!D’ENVOI!OU!DE!SOUMISSION!....................................................................!42!
4.2.!
LES!BOUTONS!DE!REINITIALISATION!.................................................................................!42!
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!SELECTION!..................................................................................................!50!
4.9.!
LES!ZONES!CACHEES!..........................................................................................................!54!
4.10.!
5.!
LES!ZONES!FILE!..............................................................................................................!54!
APPORTS!DU!HTML5!.................................................................................................................!55!
5.1.!
LES!NOUVEAUX!OBJETS!.....................................................................................................!55!
5.2.!
LES!NOUVEAUX!ATTRIBUTS!...............................................................................................!56!
CHAPITRE!6!:!INTRODUCTION!AU!CSS!...................................................................................................!59!
1.!
LES!AVANTAGES!DES!CSS!...........................................................................................................!59!
2.!
LA!SYNTAXE!...............................................................................................................................!59!
3.!
LES!SELECTEURS!........................................................................................................................!60!
3.1.!
LA!SELECTION!D’UN!SEUL!ELEMENT!..................................................................................!60!
3.2.!
LA!SELECTION!DE!PLUSIEURS!ELEMENTS!...........................................................................!60!
3.3.!
LE!SELECTEUR!UNIVERSEL!.................................................................................................!61!
3.4.!
LES!CLASSES!.......................................................................................................................!61!
3.5.!
L'APPLICATION!DE!PLUSIEURS!CLASSES!AU!MEME!ELEMENT!...........................................!62!
3.6.!
LE!SELECTEUR!D’IDENTIFIANT!ID!.......................................................................................!63!
3.7.!
LES!PSEUDOdCLASSES!ET!LES!PSEUDOdELEMENTS!.............................................................!63!
4.!
OU!ECRIRE!LES!STYLES!?!............................................................................................................!65!
4.1.!
MANIERE!1!:!DANS!L’ELEMENT!<STYLE>!............................................................................!65!
4.2.!
Manière!2!:!dans!un!fichier!externe!..................................................................................!66!
CHAPITRE!7!:!PROPRIETES!DE!MISE!EN!FORME!ET!DE!LISTES!................................................................!69!
1.!
LES!UNITES!DE!MESURE!DE!LONGUEUR!EN!CSS!........................................................................!69!
2.!
LES!PROPRIETES!DE!FORMATAGE!DE!TEXTE!..............................................................................!70!
2.1.!
LES!POLICES,!TAILLE!ET!DECORATION!...............................................................................!70!
2.2.!
L'ALIGNEMENT!..................................................................................................................!71!
3.!
LES!PROPRIETES!DE!COULEUR!ET!DE!FOND!...............................................................................!72!
3.1.!
!
LES!COULEURS!...................................................................................................................!72!
!
3.2.!
4.!
LES!IMAGES!DE!FOND!........................................................................................................!72!
LES!PROPRIETES!DES!LISTES!.......................................................................................................!74!
CHAPITRE!8!:!PROPRIETES!DE!BOITES,!DE!TABLEAUX,!D'AFFICHAGE!ET!DE!POSITIONNEMENT!...........!76!
1.!
1.1.!
LES!DIMENSIONS!...............................................................................................................!76!
1.2.!
LES!BORDURES!...................................................................................................................!76!
1.3.!
LES!MARGES!EXTERIEURES!................................................................................................!77!
1.4.!
LES!MARGES!INTERIEURES!................................................................................................!77!
2.!
LES!PROPRIETES!DES!TABLEAUX!................................................................................................!78!
3.!
LES!PROPRIETES!DE!POSITIONNEMENT!ET!D'AFFICHAGE!.........................................................!78!
3.1.!
LES!PROPRIETES!D'AFFICHAGE!..........................................................................................!78!
3.2.!
LES!PROPRIETES!!DE!POSITIONNEMENT!............................................................................!79!
4.!
!
LES!PROPRIETES!DES!BOITES!.....................................................................................................!76!
LA!propriété!CURSOR!................................................................................................................!81!
!
CHAPITRE!1
INTRODUCTION!AU!WEB
!
!
PRESREQUIS!:!
!
Aucun!
OBJECTIFS!GENERAUX!:!
!
Introduire!la!notion!d’Internet!ainsi!que!ses!services.!
!
Présenter!les!étapes!et!les!techniques!de!création!d’un!site!web.!
PLAN!:!
I.
II.
III.
IV.
V.
VI.
VII.
INTRODUCTION!
DEFINITION!
PRINCIPE!
EVOLUTION!DU!WEB!
LES!ETAPES!DE!DEVELOPPEMENT!D’UN!SITE!WEB!
L'HEBERGEMENT!
LE!REFERENCEMENT!!
!
[NOM!DE!L’AUTEUR]!
!
1!
!
CHAPITRE!I!:!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!ELECTRONIQUE!
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'estdàddire! 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!Chat)!avec!un!logiciel!
!
2!
!
spécialisé! (MSN! par! exemple),! de! choisir! un! pseudo! puis! de! répondre! en! direct! aux!
phrases!qui!s’affichent!à!l’écran.!!
2.! DEFINITION!
!
!
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!le!disque!dur!du!serveur.!L’URL!peut!
!
3!
!
ê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!
1.1.!WEB!1.0![1995S>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!
!
4!
!
Management!System!ou!CMS)!est!une!famille!de!logiciels!destinés!à!la!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.!
1.2.!WEB!2.0![2003!S>!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! peutdêtre! partager! 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!wikis,!les!flux!RSS!et!les!SPIP.!
!! Les!forums!
Un!forum!est!un!espace!de!discussion!publique!ouvert!à!plusieurs!participants.!Les!
discussions!y!sont!archivées!ce!qui!permet!une!communication!asynchrone!(c'est!ce!
qui!différencie!les!forums!de!la!messagerie!instantanée).!!
!! Les!blogs!ou!weBlog!
C’est! un! journal! personnel! en! ligne! qui! permet! à! un! internaute! de! publier!
régulièrement!des!informations!ou!de!commenter!l’actualité!sur!un!sujet.!Sa!mise!à!
jour!(blogging),!normalement!quotidienne,!est!effectuée!par!un!utilisateur!(blogger)!
n'ayant! pas! forcément! un! profil! technique.! Des! logiciels,! accessibles! via! le! web,!
permettent!de!créer!et!de!maintenir!facilement!le!blog.!
Un!blog!est!constitué!d’un!ensemble!de!billets!qui!sont!les!articles!ou!messages.!Ils!
sont! classés! par! ordre! chronologique! et! les! visiteurs! peuvent! y! laisser! des!
commentaires.!Le!billet!est!donc!la!colonne!vertébrale!du!blog.!Le!souci!quotidien!
du! blogueur! est! de! trouver! le! billet! qui! lui! permettra! d'attirer! des! millions! de!
visiteurs!sur!son!blog.!
!
5!
!
Plusieurs! logiciels! sont! disponibles! pour! créer! des! blogs! :! Blogger,! Typepad,!
OverBlog,!!BlogSpirit,!SkyBlog,!MovableType,!WorldPress,!Blogware,!etc.!
!! Les!wiki!
Un! wiki! est! un! site! web! dont! les! pages! sont! modifiables! par! tout! ou! partie! des!
visiteurs! du! site.! Il! permet! ainsi! l'écriture! et! l'illustration! collaboratives! de!
documents.!
Plus!techniquement,!il!s’agit!d’un!outil!de!collaboration!de!contenu!éditorial!libre!
(open!editing)!où!l’information!est!publiée!sous!une!licence!de!documentation!libre,!
c’estdàddire!qui!autorise!la!modification!et!la!libre!utilisation!des!œuvres!de!chacun!
des!auteurs.!
Le!premier!wiki!est!créé!en!1995!et!appelé!Wiki!Wiki!Web.!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.!
!! Le!système!SPIP!
!
6!
!
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.!
1.3.!WEB!3.0!![2008!S>!???]!
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!ETAPES!DE!DEVELOPPEMENT!D’UN!SITE!WEB!
!Pour!développer!un!site!web,!les!étapes!suivantes!sont!à!suivre!:!
5.1.!PLANIFICATION!DU!TRAVAIL!DE!DEVELOPPEMENT!:!
!! 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.!
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!
!
7!
!
de! domaines! se! fait! auprès! des! organismes! spécialisés! (InterNic1! pour! 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!sousddomaine(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!
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.!REALISATION!:!
!!
Création!de!pages!via!le!Système!de!gestion!de!contenu!ou!l'éditeur.!!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
1
2
INTERnet’s Network Information Center
Association Française pour le Nommage Internet en Coopération
!
8!
!
!!
Mise!en!place!de!la!charte!graphique!via!les!feuilles!de!styles!CSS.!
!!
Développement!dynamique!via!des!formulaires.!
6.! L'HEBERGEMENT!
6.1.!DEFINITION!
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’HEBERGEMENT!!
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!
!! 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!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
3
Source : dicodunet.com
!
9!
!
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!
6.3.!LE!REFERENCEMENT!!
6.3.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.!
!! 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!sousd
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.!
[NOM!DE!L’AUTEUR]! 10!
!
!
!! 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!:!123dinformatique.com,!annuaire.aformaclic.fr!
o! Domaine!loisir!et!tourisme!:!annuaireddesdvacances.com,!universdnature.com!
o! Domaine!immobilier!:!immodannuaire.com,!immodimmo.com!
o! Domaine!automobile:!bestdofdauto.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.!
On! trouve! également! des! métaSmoteurs,! c'estdàddire! 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.!
6.3.2.! DEFINITION!DU!REFERENCEMENT!
Dans! l’absolu,! le! référencement! est! l'action! de! référencer,! c'estdàddire!
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!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
4
Fr.wikipedia.org
Source : accesstoebusiness.com
5
!
!
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!:!
<metaname="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">)
<metaname="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.!!
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.
!
PROGRAMMATION!WEB!1!!
!
CHAPITRE!2!:!LE!LANGAGE!XHTML!!!!!!
!
CHAPITRE!2
LE!LANGAGE!XHTML
!
!
PRESREQUIS!:!
!
Notions!de!base!de!HTML!
!
Connaitre!la!syntaxe!des!principales!balises!du!langage!HTML.!
!
S’introduire!au!langage!XHTML.!
PLAN!:!
I. HISTORIQUE!!
II. XHTML!EN!TANT!QUE!LANGAGE!DE!BALISAGE!
III. HTML!OU!XHTML!?!
IV. LA!DIFFERENCE!ENTRE!HTML!ET!XHTML!!
V. LES!EDITEURS!HTML!
1.!LES!EDITEURS!VISUELS!
2.!LES!EDITEURS!CLASSIQUES!
VI. LA!STRUCTURE!DE!BASE!D’UN!DOCUMENT!XHTML!!
1. L’ELEMENT!RACINE!<HTML>!
2. L’ELEMENT!<HEAD>!:!ENdTETE!D’UN!DOCUMENT!!
3. L’ELEMENT!<BODY>!:!LE!CORPS!DU!DOCUMENT!!
!
!
!
!
CHAPITRE!2!:!LE!LANGAGE!XHTML!
!
1.! HISTORIQUE!6!
Historiquement,!les!langages!de!balisage!sont!issus!du!langage!SGML!(Standard!Generalized!
Markup!Language)!créé!en!1986!pour!structurer!des!contenus!très!divers.!Ce!langage!s’est!
révélé!trop!complexe!pour!être!appliqué!au!Web,!d’où!la!nécessité!d’en!créer!une!version!
allégée!respectant!les!mêmes!principes!essentiels.!C’est!au!début!des!années!90,!en!1992,!que!
le!CERN!(Centre!Européen!de!Recherche!Nucléaire)!rend!public!le!projet!World!Wide!Web.!Ce!
projet!consistait!à!définir!un!langage!de!présentation!de!documents!hypertextes,!dérivé!de!
SGML! :! HTML! =! HyperText! Markup! Language,! ainsi! qu'un! protocole! de! transfert! de! ces!
documents!:!HTTP!=!HyperText!Transfert!Protocol.!!
HTML!est!un!langage!de!description!et!de!structuration!de!documents!hypertextes.!Ce!langage!
est!basé!sur!une!syntaxe!de!balisage!très!simple.!Il!est!clair!que!depuis!sa!première!version,!ce!
langage!a!bien!évolué,!surtout!avec!l’apparition!des!feuilles!de!styles!CSS!(Cascading!Styles!
Sheets)! en! 1996.! C’est! avec! ces! feuilles! de! styles! qu’il! y! a! eu! une! vraie! séparation! entre!!
l’information!(contenu!des!documents!HTML)!et!de!sa!présentation!(contenu!des!feuilles!de!
style).!
La!dernière!recommandation!HTML!est!en!version!4!et!particulièrement!la!version!«strict!»!
associée!avec!l’emploi!de!CSS2!publié!en!1998.!!
Quelques!mois!plus!tard,!toujours!en!1998,!le!langage!XML!(eXtensible!Markup!Language)!a!
vu!le!jour.!Son!succès!dans!de!multiples!domaines!d’application!a!conduit!le!W3C!(World!Wide!
Web! Consortium)! à! créer! le! langage! XHTML! (eXtensible! HyperText! Markup! Language)! en!
2000,!non!plus!comme!une!nouvelle!version!de!HTML,!mais!comme!une!reformulation!de!
HTML!en!tant!qu’application!XML.!Donc!le!XHTML!n'est!rien!que!du!HTML,!reformulé!de!façon!
à!respecter!les!règles!strictes!du!XML.![1]!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
6
Source : www.infini-software.com
!
!
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!DIFFERENCE!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:!
!!
Toutes!les!balises!doivent!avoir!une!fermeture!mais!également!les!balises!qui!n'ont!pas!
de!balises!fermantes.!On!aura!donc!<br!/>,!<img!/>,!etc.!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
7
Source : openweb.eu.org
!
!!
!
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!:!
! <metaname="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!:!
! <h1name="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!auddelà,!on!écrira:!
! <html)xmlns="http://www.w3.org/1999/xhtml")xml:lang="fr">)
5.! LES!EDITEURS!HTML!!8!
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!:!
-!Les!éditeurs!teldtel!(WYSIWYG)!ou!visuels!
-!Les!éditeurs!de!texte!ou!classiques!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
8
Source : wikipédia.org
!
!
5.1.!!LES!EDITEURS!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…!
5.2.!LES!EDITEURS!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!ciddessus.!Exemple!:!Nvu.!
6.! 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!fichier!
xhtml11.dtd!qui!contient!la!DTD!elledmê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!:!"<!dd"!au!début!du!commentaire!et!"dd>"!à!la!fin!de!celuidci.!,!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!ciddessus.!
6.1.!L’ELEMENT!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.!
6.2.!L’ELEMENT!<HEAD>!:!ENSTETE!D’UN!DOCUMENT!!
L’élément! <head>! englobe! six! sousdéléments! différents! qui! ont! chacun! un! rôle! bien!
déterminé.!Il!s’agit!des!sousdé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!sousdéléments!inclus!dans!<head>:!
!! LE!SOUSSELEMENT!<META!/>!:!LES!METASDONNEES!
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! httpdequiv! 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="valeur1")/>)
<meta)http[equiv="nom2")content="valeur2")/>)
!
!
La! plupart! des! valeurs! des! attributs! name! et! httpdequiv! sont! des! motsdclé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!
motsdclé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.!!
httpd
Force!le!navigateur!à!recharger!la!page.!L’attribut!content!
equiv="refresh"!
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…)!
httpd
Force!le!navigateur!à!actualiser!la!page.!L’attribut!content!
equiv="expires"!
définit!la!date!et!l’heure!de!mise!à!jour!(format!anglais!de!
date!et!heure)!
À!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!SOUSSELEMENT!<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! sousd
éléments!:!
<head>)
<title>Titre)de)la)page</title>)
<meta)name="Author")content="Jean)ENGELS")/>)
</head>!
6.3.!L’ELEMENT!<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!d!h1!d!h2!d!h3!d!h4!d!h5!d!h6!d!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!/>).!
!
!
CHAPITRE!3
!
CHAPITRE!3!:!MISE!EN!FORME!,LISTE!ET!TABLEAU!!!!!!
MISE!EN!FORME!,LISTE!!ET!
TABLEAU!
!
!
PRESREQUIS!:!
!
!
Introduire!les!notions!HTML!avancées!tels!que!les!tableaux,!les!listes.!
PLAN!:!
I.
LES!TITRES!
1. LES!DIVISIONS!DE!LA!PAGE!
2. LES!PARAGRAPHES!:!L’ELEMENT!<P>!
3. L’ELEMENT!<DIV>!
II.
III.
LES!STYLES!PHYSIQUES!
LES!LISTES!
1. LES!LISTES!ORDONNEES!
2. LES!LISTES!A!PUCES!
3. LES!LISTES!DE!DEFINITIONS!
IV.
LES!TABLEAUX!
1.
2.
3.
4.
LA!STRUCTURE!GENERALE!D’UN!TABLEAU!
LES!ATTRIBUTS!DE!LA!BALISE!<TABLE>!
L'ALIGNEMENT!DU!CONTENU!DES!CELLULES!
LA!FUSION!DES!CELLULES!
!
!
!
!
!
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>)
<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’ELEMENT!<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!en!ligne!
comme! des! images,! des! objets! multimédia! ou! des! composants! de! formulaire! si!
l’élément!<p>!est!inclut!luidmême!dans!un!formulaire.!
!
!
!
!
!
2.2.!L’ELEMENT!<DIV>!
L’élément!<div>!crée!une!division!de!la!page.!Ce!type!de!division!permet!de!grouper!dans!
un!seul!bloc!un!ensemble!composé!soit!de!texte!soit!d’éléments!inclus,!auxquels!on!pourra!
appliquer!globalement!des!styles!particuliers.!À!la!différence!des!paragraphes,!une!division!
créée!avec!<div>!permet!d’inclure!une!très!grande!variété!d’éléments!XHTML,!comme!du!
texte!brut,!les!éléments!en!ligne!et!la!totalité!des!éléments!de!niveaux!bloc!comme!l’autorise!
<body>,!mais!également!les!titres,!les!listes!et!les!formulaires,!ce!qui!est!interdit!dans!un!
paragraphe.!!
Remarque!:!Contrairement!aux!paragraphes!<p>,!la!fin!d’une!division!n’entraîne!pas!un!saut!
de! ligne! par! défaut,! mais! seulement! un! retour! à! la! ligne.! Les! contenus! des! différentes!
divisions!peuvent!donc!se!succéder!sans!rupture.!De!plus!il!est!possible!d’utiliser!la!balise!
<span>!avec!quelques!mots!afin!de!les!particulariser!et!de!les!mettre!en!évidence,!le!plus!
fréquemment!au!moyen!d’un!style!prédéfini!(italique,!gras,!souligné!couleur!différente…)!
3.! LES!STYLES!PHYSIQUES!
Le!tableau!suivant!résume!les!balises!de!styles!physiques!:!
Style!
Syntaxe!
Résultat!
Gras!
<b>Texte</b>)
Texte!
<strong>)Texte)</strong>)
Italique!
<i>)Texte)</i>)
Texte!
<em>)Texte)</em>)
Souligné!
<u>Texte</u>)
Texte!
Exposant!
10)<sup>3</sup>)
103!
Indice!
C)<sub>)2</sub>)
C2 !
Barré!
<s>)Texte)</s>)
Texte!
<strike>)Texte)</strike>)
Police!plus!grande!
<big>)texte)</big>)
texte!
Police!plus!petite!
<small>texte</small>)
texte!
!
!
Créer!un!retour!en!ligne!
<br)/>)
ddd!
Ligne!horizontale!
<hr)/>)
!
Police!
<font) size=) "..") face="…") !
color="…">)texte)</font>)
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)
suitel’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!ORDONNEES!
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!A!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>.!
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!DEFINITIONS!
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>! luidmê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)
decré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)
depages)dynamiques...</fieldset></dd>)
)
<dt>SQL</dt>)
<dd><fieldset>Structured) Query) Language) :) le) langage) d’interrogation) des)
basesde)données...</fieldset></dd>)
</dl>)
5.! LES!TABLEAUX!
5.1.!!LA!STRUCTURE!GENERALE!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’endtê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>,! luidmême! inclus! dans! <table>.! Cet!
!
!
élément!doit!être!le!premier!à!apparaître!dans!<table>.!Son!contenu!apparaît!par!défaut!aud
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>)
3</td>)
</tr>)
<tr>)
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!:!!
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%"!!
cellspacing!=!"N!px"!!!ou!!
cellspacing!=!"N%"!!!
!
Définit! la! largeur! de! l’espacement! entre! le! contenu!
d’une!cellule!et!sa!bordure.!
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!
<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:!
<table)border)height="300")width="400">)
<tr)align="center">)
<td)rowspan="3">A</td>)
<td)colspan="2">B</td>)
<td>C</td>)
)
</tr>)
<td>D</td>)
<td>E</td>)
<td)rowspan="2">G</td>)
)
</tr>)
<td)colspan="2">F</td>)
</tr>)
</table>)
Fournit!le!tableau!suivant!:!
!
!
CHAPITRE!4
! CHAPITRE!4!:!IMAGES,AUDIO,VIDEO!ET!LIENS!HYPERTEXTES!!!!!!
IMAGE!,AUDIO,VIDEO!ET!LIENS!
HYPERTEXTES
!
!
PRESREQUIS!:!
!
!
Introduire! les! notions! HTML! avancées! tels! que! les! images,! les! fichiers! audio,! les!
fichiers!vidéo,!les!liens!hypertextes!
PLAN!:!
I. LES!IMAGES!
1. LES!TYPES!D’IMAGES!
2. L’INSERTION!D’IMAGES!
II. L'AUDIO!
III. LA!VIDEO!
IV. LES!LIENS!HYPERTEXTES!
1.
DEFINITION!
2.
LES!LIENS!EXTERNES!
3.
LES!LIENS!INTERNES:!LES!ANCRES!/!LES!SIGNETS!
4.
LES!LIENS!DECLENCHANT!L’ENVOI!D’UN!EdMAIL!
!
!
!
!
CHAPITRE!4!:!IMAGES,!AUDIO,!VIDEO!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!cidaprè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’ELEMENT!<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!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!
celledci!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.!
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!VIDEO!
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>…)
</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!celledci!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.!DEFINITION!
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!edmail!vers!le!site!
ou!à!l’attention!de!tout!autre!destinataire.!
!
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,!celuidci!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!elledmême.!
•!_top:!pour!afficher!la!cible!dans!la!fenêtre!de!plus!haut!niveau.!
!
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)/>)
!
à)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)/>)
à)faire)défiler)la)page…))
</div><br)/><hr)/>)
!
!
!
On!peut!aussi!créer!un!système!de!navigation!complet!entre!plusieurs!pages!du!même!
site!à!l’emplacement!qu’on!veut!atteindre!!
Exemple.
<h1)id="menuxhtml">XHTML))
<a)href="xhtml.html#chap1">)Chapitre)1)</a>)
</h1><hr)/>!
!
!
Avec!chap1,!chap2!et!chap3!sont!des!ancres!à!définir!dans!le!fichier!xhtml.html!grâce!à!
l’attribut!id!
4.4.!LES!LIENS!DECLENCHANT!L’ENVOI!D’UN!ESMAIL!
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!edmail!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!edmail!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>!
!
!
!
!
CHAPITRE!5
!
CHAPITRE!5!:!LES!FORMULAIRES!!!!!!
LES!FORMULAIRES
!
!
PRESREQUIS!:!
!
!
Introduire!les!notions!HTML!avancées!tels!que!les!images,!les!formulaires!
PLAN!:!
I. INTRODUCTION!!
II. STRUCTURE!D’UN!FORMULAIRE!
III. LES!ATTRIBUTS!DE!L’ELEMENT!<FORM>!
1. L’ATTRIBUT!ID!
2. L’ATTRIBUT!ACTION!
3. L’ATTRIBUT!!METHOD!
IV. LES!ELEMENTS!INTEGRES!DANS!L'ELEMENT!FORM!
1. LES!BOUTONS!D’ENVOI!OU!DE!SOUMISSION!
2. LES!BOUTONS!DE!REINITIALISATION!
3. LES!BOUTONS!GRAPHIQUES!
4. LES!ZONES!DE!SAISIE!DE!TEXTE!UNILIGNES!
5. LES!ZONES!DE!SAISIE!DE!MOT!DE!PASSE!
6. LES!ZONES!DE!SAISIE!DE!TEXTE!LONG!
7. LES!BOUTONS!RADIO!ET!LES!CASES!A!COCHER!
8. LES!LISTES!DE!SELECTION!
9. LES!ZONES!CACHEES!
10. LES!ZONES!FILE!
V. APPORTS!DU!HTML5!
1. LES!NOUVEAUX!OBJETS!
2. LES!NOUVEAUX!ATTRIBUTS!
!
!
!
!
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!motdclé!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>)
)
)
)
</fieldset>)
)
<![[)éventuellement)un)ensemble)d'autres)fieldset)[[>)
<legend>Titre)de)la)légende</legend>)
</form>)
!
!
!
Cette!structure!est!améliorée!par!un!ensemble!d'attributs!et!d'autres!éléments!intégrés.!
3.! LES!ATTRIBUTS!DE!L’ELEMENT!<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!ELEMENTS!INTEGRES!DANS!L'ELEMENT!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!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!REINITIALISATION!
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.!
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"/></button>) )
)
)
<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.! Auddelà! 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!
-!
readonly="readonly"!
Permet!d’utiliser!une!zone!de!saisie!pour!afficher!une!information.!Celledci!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! luidmê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="")/>)
!
!
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>.!
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.!.
!
!
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!:!
!
!
!
!
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!SELECTION!
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!<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[]").!
Exemple.
<form)action="exemple.php")method="post">)
<fieldset>)
)
) <legend><b>Veuillez)compléter)le)questionnaire</b></legend>)
) <label>Nom):)</label>)
) )
<input)type="text")name="nom")size="40")
maxlength="256"value="votre)nom")onclick="this.value=‘‘")/><br)/>)
) <![[)Liste)à)choix)unique)[[>)
) <label>Votre)pays</label>)
) )
<select)name="pays")size="1">)
) )
)<option)value="null")disabled="disabled">)Votre)
pays</option>)
!
!
) )
)
<option)value="France")>)France</option>)
) )
)
<option)value="Belgique")>)Belgique</option>)
) )
)
<option)value="Suisse")>)Suisse</option>)
) )
)
<option)value="Canada")>)Canada</option>)
) )
</select)
) <![[)Liste)à)choix)multiples)[[>)
) <h3>Vos)connaissances)informatique)<small>(Pour)faire)
plusieurs)choix))maintenir)la)touche)CTRL)enfoncée)</small></h3>)
) )
<select)name="savoir[]")size="4")multiple="multiple")>)
) )
)
<option)value="C++")selected="selected">)
C++</option>)
) )
)
<option)value="Java">)Java</option>)
) )
)
<option)value="PHP">)PHP</option>)
) )
)
<option)value="SQL">)SQL</option>)
) )
</select><br)/>)
) <input)type="submit")value="Envoyer)")/>)
) <input)type="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>!
Exemple.
<form)action="trait.php")method="post")>)
<fieldset>)
)
<legend><b>Veuillez)compléter)le)questionnaire</b></legend>)
<![[)Liste)à)choix)unique)[[>)
)
<label>Nom):)</label>)
)
)
)
<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")>)
<input)type="text")name="nom")/>)
Allemagne</option>)
)
)
)
</optgroup>)
)
)
)
<optgroup)label="Autres">)
)
)
)
)
<option)value="Europe")>)Europe)</option>)
)
)
)
)
<option)value="Asie")>)Asie)</option>)
!
)
)
!
)
)
<option)value="Amériques")>)Amériques)
<option)value="Océanie")>)Océanie</option>)
</option>)
)
)
)
)
)
)
)
</optgroup>)
)
)
</select></h3>)
)
<input)type="submit")value="Envoyer")/>)
)
<input)type="reset")value=")Effacer)tout")/><br)/>)
)
</fieldset>)
</form>)
4.9.!LES!ZONES!CACHEES!
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!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!:!
<form)action="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>)
<input)type="file"name="fichier")accept="image/jpeg,image/png")
/>)
</fieldset>)
!
!
</form>!
</body>!
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"!/>!
datetimed Champ! de! saisie! de! la! date! et! de! <input!type="datetimedlocal"!name="t"!
local!
l'heure!au!format!local.!
/>!
Champ! permettant! l'incré/la! décré!
number!
d'une! valeur! numérique! initiale! (0! <input!
type="number"!
name="n"!
par! défaut).! On! peut! fixer! la! valeur! min="1"!max="20"!step="2/>!
minimale,!maximale!ou!le!pas.!
Champ!permettant!la!sélection!d'un!
code! couleur! dans! une! palette.! La!
color!
couleur! est! au! format! héxadécimal.!
La!valeur!par!défaut!est!le!noir!qu'on!
<input! type="color"! name="couleur"!
value="#ff0000"/>!
peut!modifier!avec!l'attribut!"value".!
Champ!ressemblant,!en!apparence,!à!
url!
celui!de!type!text,!mais!il!n'acceptera!
que! les! formats! url! de! type:! ftp://,!
<input!type="url"!name="t"!/>!
mailto://!ou!http://.!
!
!
Champ! très! proche! du! type! text.! La!
valeur!saisie!doit!avoir!le!format!d'un!
email:! au! minium! un! caractère!
email!
(caractère!non!accentué!comprenant!
<input!type="email"!name="t"!/>!
d! et! _)! suivi! d'un! @! suivi! à! son! tour!
d'un!caractère.!
5.2.!
LES!NOUVEAUX!ATTRIBUTS!
Attribut!
required!
Description!
Il! impose! la! présence! d'une! saisie! <input!
dans!le!champ!correspondant.!
Il! permet! de! donner! le! focus! à! un!
autofocus!
Code!HTML!5!
champ! dès! le! chargement! de! la!
page.!
type="text"!
name="d"!!
required="required"/>!
<input!
type="text"!
name="d"!!
autofocus="autofocus"/>!
Il! donne! une! chaîne! de! caractères! <input!
type="email"!
placeholder! contenant! des! indications! pour! le! value="[email protected]"! ! ! ! placeholder! =!
remplissage!d'un!champ.!
"veuillez!indiquer!un!Edmail!valide"/>!
Il!permet!de!définir!une!expression! Voir!dans!ce!qui!suit!
pattern!
régulière!de!filtrage.!
Min,! max,! !
step!
!
Déjà!vu!précédemment!
!
!
!
!
!
!
!
Exemples.
<input)type="text")pattern="[A[F][0[9]{5}"/>)
<input)type="text")pattern="[a[zA[Z]+[0[9]{4}[A[Z]?"/>)
<input)type="text")pattern="[a[z]{6,}")/>)
<input)type="text")pattern="[A[Z]{6,10}")/>)
<input)type="text")pattern=".{10}")/>)
<input)type="tel")pattern="^[0[9]{8}$"/>)
<input) type="email") pattern="[a[zA[Z0[9.[_) ]+@[a[zA[Z]+\.[a[zA[
Z]{2,3}"/>)
<input)type="url")pattern="^http://www\..+\..+$"/>)
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
CHAPITRE!6!:!INTRODUCTION!AU!CSS!!!
!
CHAPITRE!6
INTRODUCTION!AU!CSS
!
!
PRESREQUIS!:!
!
Langage!HTML,!XHTML!
!
Introduire!la!mise!en!page!des!pages!web!en!utilisant!le!langage!CSS.!
PLAN!:!
I. LES!AVANTAGES!DES!CSS!
II. LA!SYNTAXE!
III. LES!SELECTEURS!
1. LA!SELECTION!D’UN!SEUL!ELEMENT!
2. LA!SELECTION!DE!PLUSIEURS!ELEMENTS!
3. LE!SELECTEUR!UNIVERSEL!
4. LES!CLASSES!
5. L'APPLICATION!DE!PLUSIEURS!CLASSES!AU!MEME!ELEMENT!
6. LE!SELECTEUR!D’IDENTIFIANT!ID!
7. LES!PSEUDOdCLASSES!ET!LES!PSEUDOdELEMENTS!
IV. OU!ECRIRE!LES!STYLES!?!
1. MANIERE!1!:!DANS!L’ELEMENT!<STYLE>!
2. MANIERE!2!:!DANS!UN!FICHIER!EXTERNE!
3. MANIERE!3!:!DANS!L’ATTRIBUT!STYLE!
!
!
CHAPITRE!6!:!INTRODUCTION!AU!CSS!
!
1.! 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.!!
2.! 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);)
)
))))))}!
!
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,!!
-! backgrounddcolor!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.!
3.! LES!SELECTEURS!
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.!!
3.1.!LA!SELECTION!D’UN!SEUL!ELEMENT!
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.!
3.2.!LA!SELECTION!DE!PLUSIEURS!ELEMENTS!
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;}!
!
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.!
3.3.!LE!SELECTEUR!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:!
!!*{backgrounddcolor!:!yellow;}!
! p{backgrounddcolor!:!gray;}!
!
Effet:!tous!les!éléments!ont!un!fond!jaune,!sauf!<p>!aura!un!fond!gris.!
3.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>!
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.!
3.5.!L'APPLICATION!DE!PLUSIEURS!CLASSES!AU!MEME!ELEMENT!
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>)
!
!
!
3.6.!LE!SELECTEUR!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>!
3.7.!LES!PSEUDOSCLASSES!ET!LES!PSEUDOSELEMENTS!
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! pseudodclasses! et! les! pseudod
é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!pseudoSclasses!applicables!aux!liens!
Deux! pseudodclasses! 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!pseudodclasses!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!pseudodclasse!de!celui!de!l’élément.!
!
!
!
Exemple!:!
) a:link){color:)blue;})
) a:visited){color:)red;}!
!
!! Les!pseudoSclasses!dynamiques!
Elles!permettent!d’attribuer!un!style!à!un!élément!en!fonction!des!actions!effectuées!par!
le!visiteur.!Ces!pseudodclasses!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’estdàddire!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!pseudoSé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!:!
!
!
%! :firstSletter,! 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;})
%! :firstSline,!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>)
4.! OU!ECRIRE!LES!STYLES!?!
Les!styles!CSS!peuvent!être!intégrés!dans!le!document!XHTML!de!plusieurs!manières!:!
4.1.!MANIERE!1!:!DANS!L’ELEMENT!<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!
<!dd!et!dd>!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;})
)
</style>)
)
</head>!
!
4.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>)
!
!
!
!
!
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.!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.!
!
!
!
!
!
!
CHAPITRE!7
!
CHAPITRE!7!:!PROPRIETES!DE!MISE!EN!FORME!ET!LISTE!!
PROPRIETES!DE!MISE!EN!FORME!
ET!LISTES
!
PRESREQUIS!:!
!
!
!
Manipuler!!les!propriétés!de!mise!en!forme!et!listes!de!CSS!
PLAN!:!
I.
LES!UNITES!DE!MESURE!DE!LONGUEUR!EN!CSS!
II. LES!PROPRIETES!DE!FORMATAGE!DE!TEXTE!
1. LES!POLICES,!TAILLE!ET!DECORATION!
2. L'ALIGNEMENT!
III. LES!PROPRIETES!DE!COULEUR!ET!DE!FOND!!
1. LES!COULEURS!
2. LES!IMAGES!DE!FOND!
IV. LES!PROPRIETES!DES!LISTES!
!
!
!
!
CHAPITRE!7!:!PROPRIETES!DE!MISE!EN!FORME!ET!DE!LISTES!
!
1.! LES!UNITES!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é!absolue!
Unité!
Description!
cm!
Centimètre!
mm!
millimètre!
in(inch)!
Pouce=2.54cm!
pt(point)!
1pt=!1/72!in!
pc(pica)!
1pc=!12!pt!
px!(pixel)!
Pixel!signifie!Picture!Element.!C'est!une!unité!de!mesure!
!
!
relative!qui!dépend!des!dimensions!de!la!zone!utile!de!
l'écran!et!du!mode!vidéo!utilisé.!!
Selon! les! définitions! vidéo,! le! nombre! de! pixels! varie!
grandement!pour!un!même!écran:!
Unité!relative!
-! Mode!VGA!:!640x480!pixels!!
-! Mode!SVGAdI!:!800x600!pixels!!
-! Mode!SVGAdII:!1024x768!pixels.!!
pourcentage!
em!ou!ex!
relative!à!la!hauteur!des!caractères!de!la!police!
%!
relative!à!une!unité!de!longueur!
!
!
!
!
!
!
!
!
2.! LES!PROPRIETES!DE!FORMATAGE!DE!TEXTE!
2.1.!!LES!POLICES,!TAILLE!ET!DECORATION!
!
Propriété!
Description!
Valeurs!
fontdstyle!!
Définit!le!style!de!police!
•!italic!:!italique!!
•!oblique!:!autre!façon!de!mettre!en!italique!
•!normal!:!normal!(par!défaut)!
fontdvariant!
Définit!si!la!police!doit!être! •!smalldcaps!:!petites!capitales!
rendue!en!petites!capitales! •!!normal!:!normal!(par!défaut)!
ou!non!
fontdweight!
Définit! la! graisse! de! la! •!bold!:!gras!!
police!
•!bolder!:!plus!gras!!
•!lighter!:!plus!fin!!
•!normal!:!normal!(par!défaut)!
fontdsize!
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!!
-!xxdsmall!:!très!très!petit!!
-!xdsmall!:!très!petit!!
-!small!:!petit!!
-!medium!:!moyen!!
-!large!:!grand!!
-!xdlarge!:!très!grand!!
-!xxdlarge!:!très!très!grand!
!
fontdfamily!
!
Indiquer! les! noms! de! Exp:!
polices!possibles!par!ordre! fontdfamily:police1,!police2,!police3;!!
de!préférence.!
Rq:!On!utilise!des!guillemets!si!le!nom!de!la!
!
police!comporte!des!espaces.!!
!
textddecoration!
La!décoration!du!texte!
•! underline!:!souligné!!
•! overline!:!ligne!auddessus!!
•! linedthrough!:!barré!!
•! blink!:!clignotant!!
•! !none!:!normal!(par!défaut)!
textdtransform!
Mettre!
un!
texte!
en! •!
uppercase!:!tout!en!majuscules!
•!
lowercase!:!tout!en!minuscules!!
majuscule!ou!pas!
•!capitalize!:!début!des!mots!en!majuscules!
•!
Font!
Mégadpropriété!de!police!
!none!:!normal!(par!défaut)!
Indique! dans! n'importe! quel! ordre! des!
valeurs! possibles! pour! fontdfamily,! fontd
weight,! fontdstyle,! fontsize,! fontdvariant.!
Exp:!font:Arial,!bold,!16px;!!
2.2.!L'ALIGNEMENT!
Propriété!
Description!
Définit!
textdalign!
Valeurs!
l'alignement!
horizontal! d'un! texte! au!
sein!de!son!conteneur!
•!left!:!à!gauche!(par!défaut)!!
•!center!:!centré!
•!right!:!à!droite!!
•!justify!:!texte!justifié!!
Définit!l'alignement!vertical!
verticaldalign!
d'un! texte! au! sein! de! son!
conteneur!
A!utiliser!dans!des!cellules!de!tableau!!
•!top!:!en!haut!!
•!middle!:!au!milieu!
•!bottom!:!en!bas!
!
!
Définit! un! alinéa! pour! la!
textdindent!
première! ligne! de! texte!
d'un!élément.
Indiquer!une!valeur!en!pixels!(px).!Valeur!
par!défaut!est!0!
Définit! la! hauteur! de! ligne! Indiquer! une! valeur! en! pixels! (px)! ou! en!
linedheight!
d'un!texte!
pourcentage!(%)!
Définit! l'espacement! entre!
letterdspacing!
chaque!lettre!d'un!texte!
Définit! l'espacement! entre!
worddspacing!
chaque!mot!d'un!texte!
Indiquer!une!valeur!en!pixels!(px)!
Indiquer!une!valeur!en!pixels!(px)!
3.! LES!PROPRIETES!DE!COULEUR!ET!DE!FOND!!
3.1.!LES!COULEURS!
Type!
Propriété!
Valeurs!possibles!
Couleur!de!texte!
color!
Indiquer!une!couleur:!
d! En! indiquant! le! nom! de! la! couleur! en! anglais!
(black,!blue,!green,!white,!red...)!d!En!indiquant!la!
couleur!en!hexadécimal!(#CC48A1)!!
d!En!indiquant!la!couleur!en!RGB!:!rgb!(128,!255,!0)!
Couleur!de!fond!
backgrounddcolor!
Même! chose! que! pour! color,! pour! la! couleur! de!
fond!du!texte!
3.2.!LES!IMAGES!DE!FOND!
Type!
Propriété!
Image!de!fond! backgrounddimage!
Valeurs!possibles!
Indiquer!l'url!de!l'image!(notation!absolue!ou!relative)!!
backgrounddimage:url("images/fond.png");!!
Backgrounddimage:url!
("http://www.monsite.com/images/fond.png");!!
Fond!fixé!
backgroundd
attachment!
•!fixed!:!le!fond!reste!fixe!quand!on!descend!plus!bas!
sur!la!page!!
•!scroll!:!le!fond!défile!avec!le!texte!(par!défaut)!
!
!
Répétition! du! backgrounddrepeat! •!repeat!:!le!fond!se!répète!(par!défaut)!!
fond!
•!repeatdx! :! le! fond! ne! se! répète! que! sur! une! ligne,!
horizontalement!!
•!repeatdy!:!le!fond!ne!se!répète!que!sur!une!colonne,!
verticalement!!
•!nodrepeat!:!le!fond!ne!se!répète!pas,!il!n'est!affiché!
qu'une!fois!
Position!
du! backgroundd
fond!
position!
2!façons!de!faire!:!
d!En!notant!une!distance!en!px!ou!%,!par!rapport!au!
coin!en!haut!à!gauche.!
backgrounddposition:50px!200px;!/*!50!px!à!droite,!
200px!en!bas!*/!!
d! 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!
!backgrounddposition! :! bottom! right;! /*! en! bas! à!
droite!*/!
Mégad
background!
Indique! dans! n'importe! quel! ordre! des! valeurs!
propriété! de!
possibles! pour! backgrounddimage,! backgroundd
fond!
repeat,! backgrounddattachment! et! backgroundd
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")! nodrepeat! fixed!
top!right;!
!
!
4.! LES!PROPRIETES!DES!LISTES!
Type!
Propriété!
Valeurs!possibles!
Type!de!liste!
listdstyledtype!
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)!
•!upperdroman!:!numérotation!romaine,!en!majuscules!
(I,!II,!III,...)!
•!lowerdroman!:!numérotation!romaine,!en!minuscules!
(i,!ii,!iii,!iv,!v...)!
•!upperdalpha! :! numérotation! alphabétique,! en!
majuscules!(A,!B,!C,!D,!E...)!
•!lowerdalpha! :! numérotation! alphabétique,! en!
minuscules!(a,!b,!c,!d,!e...)!
Position!
en! listdstyledposition!
•!inside!:!sans!retrait!
retrait!
!
•!outside!:!avec!retrait!(par!défaut)!
Puce!
listdstyledimage!
Indiquer!l'url!de!l'image!qui!servira!de!puce.!
personnalisée! !
listdstyledimage:!url("images/puce.png");!
Mégad
Réunir!les!valeurs!de!listdstyledtype,!listdstyledposition!et!
listdstyle!
propriété! de!
listdstyledimage.!On!n'est!pas!obligé!de!mettre!toutes!les!
liste!
valeurs,!et!l'ordre!n'a!pas!d'importance.!
listdstyle:!inside!square;!
!
!
PROGRAMMATION!WEB!1!!!!!!!!!!!!!!CHAPITRE!8!:!PROPRIETES!DE!BOITES!,TABLEAU,D'AFFICHAGE!ET!DE!POSITIONNEMENT!!!!!!
!!!!!!
CHAPITRE!8
PROPRIETES!DE!
BOITES,TABLEAU,D'AFFICHAGE!ET!DE!
POSITIONNEMENT
!
PRESREQUIS!:!
!
!
!
Manipuler!les!propriétés!de!boites,!tableau,!d'affichage!et!de!positionnement!de!
CSS.!
PLAN!:!
I.
1.
2.
3.
4.
II.
III.
1.
2.
IV.
LES!PROPRIETES!DES!BOITES!!
LES!DIMENSIONS!
LES!BORDURES!!
LES!MARGES!EXTERIEURES!!
LES!MARGES!INTERIEURES!!
LES!PROPRIETES!DES!TABLEAUX!!
LES!PROPRIETES!DE!POSITIONNEMENT!ET!D'AFFICHAGE!
LES!PROPRIETES!D'AFFICHAGE!
LES!PROPRIETES!DE!POSITIONNEMENT!!
LA!PROPRIETE!CURSOR!
!
!
!!!!!!
CHAPITRE!8!:!PROPRIETES!DE!BOITES,!DE!TABLEAUX,!D'AFFICHAGE!
ET!DE!POSITIONNEMENT!
!
!
1.! LES!PROPRIETES!DES!BOITES!!
1.1.!!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!
1.2.!LES!BORDURES!!
Type!
Propriété!
Épaisseur! de! la! borderdwidth!
Valeurs!possibles!
Indiquer!une!valeur!en!px!
bordure!
Couleur! de! la! borderdcolor!
Indiquer!une!valeur!de!couleur!
bordure!
Type!de!bordure!
borderdstyle!
•!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! borderdleft!
Indiquer! la! couleur,! l'épaisseur! et! le! type! de!
bordure!pour!la!bordure!gauche!!
!
!!!!!!
borderdleft:! 2px! inset! blue;! /*! Bordure! bleue! de!
2px!avec!effet!3D!"enfoncé"!*/!
Bordure!en!haut!
borderdtop!
Idem!
Bordure!à!droite!
borderdright!
Idem!
Bordure!en!bas!
borderdbottom!
Idem!
Mégadpropriété!
border!
Indiquer! l'apparence! des! bordures! en! haut,! à!
de!bordure!
droite,!en!bas!et!à!gauche.!
1.3.!LES!MARGES!EXTERIEURES!!
Type!
Propriété!
Valeurs!possibles!
Marge!en!haut!
margindtop!
Indiquer!une!valeur!comme!20px,!10%,!...!
Marge!à!gauche!
margindleft!
Idem!
Marge!à!droite!
margindright!
Idem!
Marge!en!bas!
margindbottom!
Idem!
Mégadpropriété!
margin!
Indiquer!de!1!à!4!valeurs!à!la!suite:!
de!marge!
d!1!valeur!:!c'est!la!marge!pour!le!haut,!le!bas,!la!
gauche!et!la!droite!!
d! 2! valeurs! :! la! première! correspond! à! la! marge!
pour!le!haut!et!le!bas,!la!seconde!pour!la!gauche!
et!la!droite!!
d!3!valeurs!:!la!première!correspond!à!la!marge!du!
haut,!la!seconde!aux!marges!à!gauche!et!à!droite,!
la!troisième!à!la!marge!du!bas!!
d!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!*/!
1.4.!LES!MARGES!INTERIEURES!!
Type!
Propriété!
Valeurs!possibles!
!
!!!!!!
Marge!intérieure!en! paddingdtop!
Indiquer!une!valeur!comme!20px,!1.5em...!
haut!
Marge! intérieure! à! paddingdleft!
Idem!
gauche!
Marge! intérieure! à! paddingdright!
Idem!
droite!
Marge!intérieure!en! paddingdbottom!
Idem!
bas!
Mégadpropriété! de! padding!
Idem!que!margin!
marge!intérieure!
2.! LES!PROPRIETES!DES!TABLEAUX!!
Type!
Propriété!
Valeurs!possibles!
Type!de!bordure!
borderdcollapse!
•! 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!
emptydcells!
•! show!:!les!bordures!des!cellules!vides!sont!
affichées!!
•! collapse!:!les!cellules!vides!sont!masquées!
(par!défaut)!
Position!du!titre!
captiondside!
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!
3.! LES!PROPRIETES!DE!POSITIONNEMENT!ET!D'AFFICHAGE!
3.1.!LES!PROPRIETES!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>!
•!listditem!:!l'élément!devient!de!type!"élément!
de!liste!à!puce"!(comme!<li>)!
Affichage!
visibility!
•!hidden!:!masqué!
!
•!visible!:!visible!(par!défaut)!
Rq:! display:none;! fait! disparaître! l'élément,!
tandis! que! visibility:hidden;! masque! l'élément,!
qui!continue!quand!même!à!prendre!de!la!place!
sur!l'écran!
Afficher! seulement! clip!
Indiquer!4!valeurs!comme!ceci!:!
une!partie!
clip:!rect(valeur1,!valeur2,!valeur3,!valeur4);!
!
Cela! permet! de! n'afficher! qu'une! partie! d'un!
élément.!
rect()!
permet!
d'indiquer!
les!
coordonnées!du!rectangle!qui!sera!affiché!
Les!valeurs!1!à!4!correspondent!respectivement!
aux!coins!haut,!droit,!bas!et!gauche!du!rectangle!
3.2.!LES!PROPRIETES!!DE!POSITIONNEMENT!!
Type!
Propriété!
Valeurs!possibles!
Flottant!
float!
•!left!:!flottant!à!gauche!!
•!right!:!flottant!à!droite!!
•!none!:!pas!de!flottant!(par!défaut)!
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! position!
•!absolute!:!position!absolue!par!rapport!au!coin!en!
positionnement!
haut!à!gauche!!
•!fixed! :! position! fixe! (fonctionne! comme! la!
position! absolue)! L'élément! reste! à! sa! position!
même!quand!on!descend!plus!bas!dans!la!page!!
•!relative! :! position! relative,! par! rapport! à! la!
position!"normale"!de!l'élément!
•!static!:!positionnement!normal!(par!défaut)!!
Position!
par! top!
Valeur! en! px,! %,! em...! à! utiliser! pour! un!
rapport!au!haut!!
positionnement!absolu,!fixe!ou!relatif!
Position!
par! bottom!
Idem!
par! left!
Idem!
rapport!au!bas!
Position!
rapport!à!gauche!
Position!
par! right!
rapport!à!droite!
Ordre!d'affichage!
Idem!
!
zdindex!
!
En!cas!de!positionnement!absolu!par!exemple,!si!2!
éléments! se! chevauchent,! zdindex! permet!
d'indiquer!quel!élément!doit!être!affiché!auddessus!
de!l'autre.!La!valeur!est!un!nombre.!Plus!ce!nombre!
est!élevé,!plus!l'élément!sera!affiché!en!avant.!
Exp:!si!2!éléments!sont!positionnés!en!absolu!avec!
un! zdindex! de! 10! pour! l'un! et! de! 20! pour! l'autre,!
celui!qui!a!un!zdindex!de!20!est!affiché!parddessus!
!
!!!!!!
4.! 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!!
•!ndresize!:!flèche!vers!le!nord!!
•!nedresize!:!flèche!vers!le!norddest!!
•!edresize!:!flèche!vers!l'est!!
•!sedresize!:!flèche!vers!le!suddest!!
•!sdresize!:!flèche!vers!le!sud!!
•!swdresize!:!flèche!vers!le!suddouest!!
•!wdresize!:!flèche!vers!l'ouest!!
•!nwdresize!:!flèche!vers!le!norddouest!!
•!url!:!curseur!personnalisé,!de!type!.cur!ou!.ani!
cursor:!url("images/curseur.cur");!
!
PROGRAMMATION!WEB!1!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!CHAPITRE!8!:!PROPRIETES!DE!MISE!EN!FORME!ET!LISTES!!!!!!
!
!
!

Programmation!web!1!

Transcription

Documents pareils

Son CV - David Marchesson

CV - Undergraphic, création de site Internet à Amboise (37)

Anibal Cavaco Silva Tower of Belem/Tour de Bélem

card loading.ai

version pdf

Bruno Vargas et Didier Debord

quality assurance returns / consumer complaint

facture proforma - Pierre Etchegoyen

Untitled