HTML, Javascript, Xhtml & Css

Download HTML, Javascript, Xhtml & Css

Post on 06-Dec-2015

13 views

Category:

Documents

3 download

DESCRIPTION

HTML, Javascript, Xhtml & Css

TRANSCRIPT

design graphique / web design// HTML, JavascriptXHTML & CSS version 1.0 date 28 / 04 / 2010 auteur Loc Swiny contact mr@sweeen.com2HTML, Javascript, XHTML & CSS// sommaire// page. 03// page. 06// page. 11// page. 15// page. 16// page. 24// page. 27// page. 32// page. 36// page. 40// page. 46// page. 47// page. 50// page. 54// page. 57// page. 58// page. 59// page. 64// page. 68// page. 72// page. 81// page. 82// page. 91// page. 92// page. 97HTML01. Introduction au langage HTML02. Introduction aux principes gnraux du webdesign et premire maquette03. HTML, les bases04. La balise 05. Texte / alignement, formatage, listes06. Liens07. Images & Map08. Tableaux09. Frames & I-Frames10. Formulaires11. Rcapitulatif des balises les plus courantesJAVASCRIPT13. Introduction au Javascript14. Menus dynamiques15. Popup16. Full screen17. Restriction daccs au contenuXHTML18. Introduction au XHTMLCSS19. Introduction et principe de base20. Slecteurs21. Proprits22. Cascades et conflits dhritage23. Positionnement24. Feuille de style pour limpression25. Trucs & astucesLEXIQUE GENERAL3HTML, Javascript, XHTML & CSS01. Introduction au langage HTMLI. HISTORIQUEII. QUI UTILISE LE HTML ? III. APPRENDRE LE HTML4HTML, Javascript, XHTML & CSSLe HTML ou HyperTexte Markup Language est le langage de publication utilis sur le World Wide Web. Trs facile matriser, il sagit tout simplement dun langage balises (tags" au format ASCII), dlimites entre crochets et affines dans leur formes par des attributs ; ces instructions places dans un simple fichier texte au format .html (ou .htm) sont ensuite interprtes par les diffrents navigateurs pour en faire apparaitre le contenu sur votre cranI. HISTORIQUECest Tim Berners-Lee qui a crit et dvelopp ce langage pour rpondre aux besoins du systme dchange dinformations quil venait dinventer : le World Wide Web.Pour expliciter physiquement ces changes entre machine, un protocole spcifique a t mis en place, cest le HTTP (Hyper Text Transfert Protocol) ; moyen simple et efficace daccder sur un rseau des documents lis entre eux par des hyperliens. Ecrits en HTML, les documents senchanent les uns les autres par un simple clic de souris et sont transports jusquau lecteur grce au protocole HTTP.Un leger point historique...1991 / HTML 1.0 Le language HTML voit le jour au au CERN (Centre dtudes et de recherches nuclaires) situ prs de Genve. Il y a peu de balises : on peut cependant insrer des images, crer des liens hypertextes, mais tout cela en noir, sur un fond gris, et sans interface graphique !1995 / HTML 2.0 Cette norme voit apparatre des possibilits de mise en page avec des tableaux.1996 / HTML 3.0 De nouvelles balises et de nouveaux attributs sont insres. Listes, Cartes cliquables, Frames...1998 / HTML 4.0 Outre de nouvelles commandes (I-Frames), un nouveau principe rvolutionnaire de mise en page sparant le fond et la forme est mis en place, ce sont les feuilles de style en cascade (css / cascading style sheet).2000 / XHTML Mise jour majeure du langage qui devient XHTML. Cest lavnement du Web 2.0.2010 / HTML 5.0 (?)La mise en place dune nouvelle standardisation du langage XHTML est prvue pour la nouvelle dcennie venir. Que nous rserve telle ?!II. QUI UTILISE LE HTML ? Avant darriver au stade de produit fini permettant la consultation par linternaute des informations quil contient, la vie dun site Internet se construit en suivant plusieurs tapes dont la construction HTML nest quun des jalons.Dans le process moderne de la construction dun produit de communication interactive, ce sont les intgrateurs, situs juste aprs les infographistes et juste avant les developpeurs (ingnieurs informaticiens responsables de limplmentation des fonctions dynamiques du produit) qui sont en charge de la construction des pages HTML. Ils y incluent textes, images, documents flash, sons et vidos en fonction des recommandations graphiques des studios cratifs et cest eux tout particulirement que lon demande une excellente connaissance du code.01. Introduction au HTML5HTML, Javascript, XHTML & CSS 01. Introduction au HTMLIII. APPRENDRE LE HTMLSi vous navez jamais consult le code source dune page HTML, connectez-vous sur une page avec votre navigateur favori et consultez son fichier source" (Affichage/Source, ou Afficher la source" avec le clic droit de la souris lorsque le pointeur est sur la page).De par sa structure des plus lmentaire ainsi que par sa simplicit physique, apprendre le HTML pour integrer un ensemble de pages web et les rendre cohrentes entre elles ne ncessite aucune comptence en terme de langage de programmation. On peut crire du HTML avec un diteur de texte de base (Notepad, ou Simple Text), ou en utilisant un traitement de texte condition denregistrer le fichier au format texte seulement", avec lextension .html. On peut galement utiliser des diteurs interface dintgration accompagne de type Dreamweaver, mais il est toutefois recommand de bien connatre la base du langage pour les utiliser correctement afin den optimiser les flux de production.A larrive, la phase la plus dlicate de la construction dun produit de communication interactive ne rside pas dans son intgration mais plus dans la comprhension et lapplication des process et mthodes qui vont rendre sa cration plus fonctionnelle, fluide et efficace.Ce que nous allons voir ensemble...6HTML, Javascript, XHTML & CSS02. Introduction auw principes gnraux du webdesign & premire maquetteI. GENERALITESII. UN PEU DORDRE ET DE MTHODEIII. LE CONTENUIV. LARCHITECTURE 1. Arborescence 2. Liens 3. ModularitV. LA FORME 1. Zoning 2. Format technique 3. Format visuel7HTML, Javascript, XHTML & CSSI. GENERALITESAvant de se lancer dans lhabillage graphique ou mme lintgration dun produit, il convient de rflchir sa finalit et den dfinir le contenu, larchitecture, et la forme gnrale... Pour ce faire des outils sont votre disposition : le brief cratif, le benchmark de referencement sectoriel, une bonne connaissance de la typologie, des contraintes dintgration et de larchitecture de linformation des sites internet (cf. Methodologie des metiers du design interactif). Ajoutez lensemble un gout prononc pour la culture design et ses publications, votre curiosit naturelle, une bibliothque de sources graphiques bien fournie (images bitmap & vectorielles, fontes, brosses photoshop...) et un peu de talent... mais noubliez jamais quau dbut tout commence toujours par une page blanche et un stylo pour esquisser vos premires recherches.II. UN PEU DORDRE ET DE MTHODE Avant mme denvisager toute activit productive, prenez le temps dadopter une logique de traitement et dordonnancement de vos dossiers de travail. Travailler avec une nomenclature de classification redondante vous permettra de gagner un temps prcieux lors du dveloppement de projets futurs.Bien quen la matire il nexiste aucune rgle pr-tablie, il vous est conseill dadopter la nomenclature suivante : # production# anne# n de dossier_nom du client # admin tous documents de travail fournis ou cres (brief, benchmark, charte graphique etc...) # logos docs .jpg basse dfinition en racine # eps docs illustrator # psd docs photoshop # maquette docs .jpg en racine # psd docs photoshop # print docs .jpg basse dfinition en racine # indd docs indesign # eps docs illustrator # pdf docs exports au format pr-print # psd docs photoshop # sources # images docs images (.jpg, .tiff, .png, etc...) # flash docs .fla et .swf # textes docs redactionnels (.txt, .doc, etc...) # web docs .html finaux # arborescence variable (cf. IV. larchitecture) Quitte optimiser votre process de developpement, vous pouvez mme crer un rpertoire _dossier type" contenant les dossiers pr-cres que vous naurez plus qua dupliquer er renommer la cration de tout nouveau projet02. Introduction au webdesign8HTML, Javascript, XHTML & CSSIII. LE CONTENULa dfinition du contenu de tout produit de communication interactive est certainement un des points les plus important dgager en amont du projet. Cest sa dfinition exhaustive qui vous permettra de calibrer correctement le contenu de chaque rubrique et donc de le valoriser de faon la plus efficace possible.Il nest en effet rien de plus dsagrable consulter quune page au contenu mal calibr, soit parce que trop vide" soit parce que trop riche" en information. Une bonne dfinition des contenus donnera vos visiteurs lenvie de revenir sur votre produit, cest donc une phase de construction ne surtout pas ngliger. Matrisez le sujet abord : Mme si vous ntes pas familier du produit trait, prenez le temps de vous renseigner sur ce dernier, vous serez pr la suite plus laise lorsquil sagira darchitecturer linfo. Dgagez les principales rubriques : Soyez mme de proposer un rubriquage le plus cohrent possible par rapport au produit traiter ; ce faisant en devancant la demande du client vous eviterez lecueil dune arborescence mal quilibre. Prparez vos sources : Runissez et contrlez textes, paragraphes, orthographe, images, contenus interactifs... plus vous aurez une vision complte de la quantit de contenu integrer, plus votre produit sera cohrent et efficace.IV. LARCHITECTURESous peine de courir trs vite la catastrophe (dans le cas de produits la profondeur consquente et/ou volutive) et de perdre un temps prcieux lors de la phase dintgration, dgagez au plus tt larchitecture physique (arborescence) de votre site.1. Prparez larborescence de votre site.Dans le dossier web". Il sagit en fait de la cration/localisation physique des dossiers qui vont accueillir vos pages. A linstar de votre dossier de travail une bonne nomenclature de dnomination de toute arborescence est essentielle laccompagnement dun travail propre et clair.# web index.html fichier html de la page daccueil style.css feuille de style du produit javascript.js moteurs javascript du produit # images dossier des images communes TOUTES les pages du site (fonds, navigation, etc...) # nom de rubrique_01 dossier de la rubrique index.htm fichier html de la page de la rubrique # images dossier des images communes la rubrique UNIQUEMENT # nom de rubrique_02 dossier de la rubrique index.htm fichier html de la page de la rubrique # images dossier des images communes la rubrique UNIQUEMENT # etc... dossier de la rubrique index.htm fichier html de la page de la rubrique # images dossier des images communes la rubrique UNIQUEMENTNB : En raison des standards referentiels (google et autres moteurs de recherche), votre premire page (page daccueil, homepage, ...), doit se nommer index.html. Il est de plus prfrable que les noms de vos pages dossiers ne dpassent pas 8 caractres.02. Introduction au webdesign9HTML, Javascript, XHTML & CSS2. Spcifiez les liens vers vos diffrentes pages. Pour bien visualiser la navigation entre les pages de votre produit, rien ne vaut un bon croquis qui vous permettra de formaliser correctement cette dernire lorsque vous la formaliserez physiquement dans votre code (cf. Methodologie des metiers du design interactif / 08. Architecture de linformation).3. Modularit du produit. En fonction de sa profondeur et/ou de la commande client, pensez architecturer votre produit pour quil puisse, au cas chant, accueillir de nouvelles rubriques. Dans cette optique votre maquette se doit de ne pas tre trop rigide" graphiquement parlant. V. LA FORME1. ZoningAfin de faciliter lintgration du code avec un diteur html, nhsitez pas raliser un gabarit structurant de votre future maquette faisant apparaitre le zoning" de votre produit ; ceci galement dans le but daffecter aux lments des ctes en pixels pour une mise en page soigne. Dessinez un premier croquis de votre produit Spcifiez les ctes en pixels2. Format techniqueLe developpement dun produit de communication interactive, de par la finalit de son support de diffusion (cran) ne senvisage pas de la mme manire quun produit imprim. Voii un rappel des diffrences principales prendre en considration lors de la cration de la maquette : (cf. Methodologie des metiers du design interactif / 09. Contraintes html des projets de communication interactive)02. Introduction au webdesign10HTML, Javascript, XHTML & CSS3. Format visuelA contrario de ldition de documents destins limprimerie (dans un format fixe donc), lun des paramtres les plus importants prendre en compte lors de la construction dun produit de communication interactive est la modularit du support final.En effet, dans lunivers de la cration interactive vous allez vous heurter la modularit de... La multiplicit des plateformes MAC / PC La multiplicit des systme dexploitation MAC OS X / WINDOWS XP, Vista, Seven / LINUX La multiplicit navigateurs OPERA / SAFARI / FIREFOX / INTERNET EXPLORER 6, 7, 8 La diversit des dfinitions dcrans 1024x768 / 1152x864 / 1280x1024 / 1600x1200... pour ne citer que les paramtres les plus importants considerer. Nous aurions p aussi citer la puissance des connexions proposes par les fournisseurs daccs ou bien encore la qualit daffichage des couleurs lcran et la puissance des machines.Il est donc essentiel lors de la cration dune interface de penser tout ces paramtres pour viter de vous confronter un conflit (voir une impossibilit) dintgration dlment lors de la dcoupe de ce dernier. Pour eviter les migraines, et dans le cadre de la construction dun produit classique diffusion dinformation verticale (ceci excluant de facto les formats et exprimentation plus exotiques) il est conseill de travailler partir dun gabarit au format max de 1600x1200 pixels incluant une zone utile" centre de 1000 pixels de large.16001000120002. Introduction au webdesign11HTML, Javascript, XHTML & CSS03. HTML, les basesI. INTRODUCTIONII. LE SQUELETTE DUNE PAGE 1. Len tte / HEAD 2. Le corps / BODYIII. LES BALISES 1. Gnralits 2. Balises BLOC vs. INLINEIV. LES ATTRIBUTSV. QUELQUES REGLES SIMPLES POUR DBUTER12HTML, Javascript, XHTML & CSSI. INTRODUCTIONComme nous lavons vu dans le premier chapitre, le HTML est un langage de description qui pour formater et mettre en page ses contenus utilise des balises (tags) dlimites entre crochets et affines dans leur formes par des attributs. A laide de ces attributs et des valeurs insres, vous allez dfinir la forme de votre texte (gras, italique, polices...), inclure des images, des animations, de la vido, du son, et des liens vers dautres pages... qui seront ensuite interprtes par les diffrents navigateurs pour en faire apparaitre le contenu sur votre cranII. LE SQUELETTE DUNE PAGEUne page HTML est divise en deux parties : len-tte (HEAD) et le corps (BODY) de la page... Le titre de la page texte 1. Len tte / HEADInvisible lcran, cette partie regroupe toutes les informations ncessaires un bon affichage de votre page par les diffrents navigateurs Internet. Dans cette partie vont se joindre : La balise : Pour le titre de la pagetitre de la page Les balises : Aussi appelles meta-balises". Principalement utilises pour lindexation et le rfrencement des sites par les moteurs de recherche, ces dernires sont devenues facultatives, voire obsoltes. Les seules balises absolument ncessaires une page sont TITLE et DESCRIPTION. Le character set : HTML etant optimis pour une utilisation en langue anglaise (langage nutilisant pas daccent), il vous est plus que fortement conseill dappliquer une mta balise de dfinition dalphabet prenant en compte ces derniers sous peine dtre condamn les signigfier physiquement dans le code Lappel des feuilles de style :... pour un style interne la page et appliqu une balise de type inline pour une feuille de style externe la page Lappel des javascript : Utilis pour les parties dynamiques de votre page 2. Le corps / BODYCest la partie o, toujours grce lutilisation des balises, vous intgrerez les diffrents lments de votre page visibles lcran : texte, hyperliens, images, animations, vido, son...03. HTML, les bases13HTML, Javascript, XHTML & CSSIII. LES BALISES1. Gnralits Les balises sont des squences de caractres interprtes par les navigateurs Web. Lorsque lon regarde le contenu dune page HTML, on repre assez facilement les balises HTML, ce sont les portions de texte semblables celle-ci :ceci est du gras Une balise est facilement identifiable, elle est constitue dun mot (ou plusieurs dans certain cas) encadre par les signes infrieur < et suprieur >. La plupart des balises doivent tre fermes. La majorit des balises servent la mise en page (texte en gras, tableaux...), mais toutes ne sont pas ddies la mise en page des documents, en effet, le HTML permet par exemple de donner des informations sur le document lui mme (informations qui ne seront pas affiches), dappeler des fichiers externes comme des images, des animations Flash, des sons... Etant donn que cest un langage de description, il nest pas sensible la casse, en effet on peut aussi bien crire : mot en gras que mot en gras2. Balises BLOC vs. INLINEBien que la dfinition de cette notion soit un peu prmature ce stade (nous y reviendrons lorsque nous aborderons lutilisation des CSS), il sagit dune notion essentielle prendre en considration. Dans limmdiat gardez en memoire quil y a deux type de balises : les balises de type BLOC : dont le dveloppement vertical est gnralement ddi aux dfinitions structurelles des contenus de votre page (listes, tableaux, etc...) les balises de type INLINE : dont le dveloppement horizontal est gnralement ddi aux dfinitions dapparence des contenus de votre page (images, textes, etc...)texte03. HTML, les bases14HTML, Javascript, XHTML & CSSIV. LES ATTRIBUTSCe sont les spcifications particulires de chaque balise (dont nous verrons la liste affrente chacune lorsque abord). Ils permettent de modifier leffet de la balise ou prcisent son action.Les attributs figurent aprs le nom des balises dans les < > ; ils sont spars par des espaces et leur valeur est indique entre guillemets.texteDans cet exemple concernant une ligne de texte, cette dernire a reu une balise de dfinition de police de caractre font qui elle-mme a reu un attribut de famille face et de taille sizeV. QUELQUES REGLES SIMPLES POUR DBUTER Pratiquement toutes les balises vont par paire (balises douverture et de fermeture) par exemple : et Ecrivez vos balises en minuscules, cela peut faciliter le transfert de votre code vers le XHTML Essayer darer votre code au maximum en utilisant la tabulation de votre clavier chaque implementation descendante de code (cf. exemple de squelette de page au dbut de ce dossier) 03. HTML, les bases15HTML, Javascript, XHTML & CSS04. La balise Structure fondatrice des lments qui seront visibles sur votre page, la balise est mme de recevoir un certain nombre dattributs dont certains sont incontournablesbalise attribut valeurs effet topmarginleftmarginmarginwidthmarginheightbgcolorbackgroundstylebgpropertiesscrolltextlinkalinkvlinkpixelpixelpixelpixelhexadecimaleurl relatifurl absolubackground-repeat: no-repeat;background-repeat: x;background-repeat: y;fixedyes / no / autohexadecimalehexadecimalehexadecimalehexadecimaledfinit les marges haute et basse de la page (pour I.E)dfinit les marges gauche et droite de la page (pour I.E)dfinit les marges haute et basse de la pagedfinit les marges gauche et droite de la pagedfinit la couleur du fonddfinit la source relative de limage de fonddfinit la source absolue de limage de fonddfinit la non rptition du bkg (css intgre)dfinit la rptition du bkg sur laxe X (css intgre)dfinit la rptition du bkg sur laxe Y (css intgre)dfinit si la capacit du fond scroller avec la pagedfinit la prsence de la barre de scroll sur la pagedfinit la couleur du texte pour la pagedfinit la couleur des liens pour la pagedfinit la couleur des liens actifs pour la pagedfinit la couleur des liens visits pour la page16HTML, Javascript, XHTML & CSS05. Le texteI. LES STYLESII. LES ACCENTSIII. LES EN TTESIV. LES PARAGRAPHESV. ALIGNEMENT / FERRAGEVI. LES LIGNES HORIZONTALESVII. LES LISTES 1. Les listes non numrotes 2. Les listes numrotes17HTML, Javascript, XHTML & CSSAu sein dune page HTML le texte simplmente dans le de cette dernire. Ce dernier se doit dtre bien entendu lui aussi cod. Voici les codes de mise en page de texte les plus courantI. LES STYLES gras ou texte italique ou texte soulign texte exposant 11e sicle indice H2OBien entendu, les styles peuvent se cumuler pour une mme portion de texte. Dans ce cas, lordre de dfinition des balises de style importe peu. gras & italique et texte ou texteII. LES ACCENTSMme si lutilisation judicieuse dun character set Europen (grant les les accents) plac en meta balise dans votre header est cens vous eviter ce genre de dsagrment... il faut savoir que dans labsolu les accents se codent ! il se peut donc que vous ayez besoin de coder un accent au format ascii ou dutiliser un caractre spcial. Pour ce faire, le principe est le suivant commencez par & puis la lettre accentuer puis le codage de laccent et terminez par un point virgule. Ainsi pour : vous crirez Ci-dessous un tableau rcapitulatif des principaux codes : espace forc " Pour une liste plus exhaustive des charactres spciaux :http://www.commentcamarche.net/contents/html/htmlcarac.php305. Le texte18HTML, Javascript, XHTML & CSSIII. LES EN TTESUtiliss pour le titrage, ils changent la taille des caractres et gnrent un retour la ligne automatique. h1 titre h2 titre h3 titre h4 titre h5 titre h6 titre IV. LES PARAGRAPHESUn document lu, cest avant tout un document ar : il faut donc diviser le contenu de votre texte en plusieurs paragraphes. En terme de gestion du texte, les retours la ligne dans le code, de mme que les sauts de ligne et les tabulations ne sont pas pris en compte. Il faudra donc les signifier par des balises spcifiques ddis.Lorsque vous dveloppez vos pages, il existe deux balises qui permettent dobtenir, soit un saut de ligne, soit le commencement dun nouveau paragraphe. La balise exprime le dbut dun paragraphe et gnre un double espace. La balise de fermeture est facultative La balise effectue un retour la ligne et gnre un simple espace. est une balise orpheline et donc ne se ferme pas..V. ALIGNEMENT / FERRAGEPour ferrer un ou plusieurs bloc de texte, on appliquera lattribut align soit aux en-ttes, soit au paragraphe. En labsence de lune ou lautre de ces balises il est toujours possible de ferrer un texte en utilisant la balise universelle ... balise attribut valeurs effetalign leftrightcenterjustifyaligne le texte sur la marge de gauchealigne le texte sur la marge de droite centre le texte entre les margesjustifie le texte ferrage avec en-tte : titreferrage avec paragraphe : texteferrage avec balise universelle : texteNB : Par dfaut, comme toujours, lalignement du texte se fait sur la gauche. 05. Le texte19HTML, Javascript, XHTML & CSSVI. LES LIGNES HORIZONTALESUtiliser des lignes ou des filets horizontaux est trs pratique pour sparer les diffrentes parties de votre document. Cette mthode sobtient avec la balise et ne ncessite pas de balise de fermeture. Elle possde plusieurs attributs :balise attribut valeurs effet alignwidthsizecolornoshadeleftrightcenterpixel, %de 1 10hexadecimalesansaligne la ligne horizontale gauchealigne la ligne horizontale droitealigne la ligne horizontale au centredfinit la largeur de la lignedfinit lpaisseur de la lignedfinit la couleur de la ligne (uniquement I.E)sil est prsent, leffet dombre 3D est annul VII. LISTESLa liste est une balise de type bloc relativement facile mettre en place en html. On en distingue deux type. Toutefois, nous verrons par ailleurs que ce formatage sera gr de faon plus complte avec les CSS 1. Les listes non numrotes Avec pour unordered list"les lements apparaissant entre les balises 2. Les listes numrotes Avec pour ordered list"les lements apparaissant entre les balises balise attribut valeurs effettypesanstypedisccirclesquaresansIAapucecerclecarrchiffres arabes par dfautchiffres rommainslettres alphabtiques majusculeslettres alphabtiques minusculespremierdeuxime premierdeuxime 05. Le texte20HTML, Javascript, XHTML & CSS06. Les liensI. GENERALITESII. DENOMINATIFS DES FICHIERS ET DOSSIERS III. LIENS RELATIFSIV. LIENS ABSOLUSV. LIENS INTERNES LA PAGEVI. CAS PARTICULIER, LATTRIBUT MAILTO"21HTML, Javascript, XHTML & CSSI. GENERALITESA lintrieur de votre document, la balise permet dtablir un lien hypertexte (lessence mme du Web) vers un autre document ou encore vers lextrieur (vers un autre site web). Tout ce qui se trouve entre la balise et sera considr un lien et apparatra par dfaut soulign lcran.balise attribut valeurs effet hreftargettitlenamestyleurl relatifurl absolu_self_blank_parent_topvariable dfinirvariable dfinirvariable dfinirdfinit la source relative du documentdfinit la source absolue du documentappelle la page cible dans le cadre dappelappelle la page cible dans une nouvelle fentreappelle la page cible dans le cadre parent (de niveau immdiatement suprieur)appelle la page cible dans la fentre hte (par-dessus le FRAMESET)dfinit une description du lien (identique lattribut ALT pour une image)dfinit une identit au lien dfinit une feuille de styletexteII. DENOMINATIFS DES FICHIERS ET DOSSIERS Les noms de vos fichiers et de vos dossiers vont constituer vos urls ; sachant que cest un des premiers endroits que les moteurs de recherche vont analyser pour trouver les mots-cls, il est judicieux de choisir des noms de dossiers en rapport avec le contenu de vos pages.Par exemple une page portfolio, aura plus de chances dtre trouve si lurl est portfolio/index.htm que 02/index.htm Les accents, les espaces et les caractres de ponctuation sont INTERDITS dans les noms de dossiers et de fichiers, il est nanmoins possible dinclure des tirets et des tirets bas (underscore). Il est recommand de nutiliser que des minuscules, car une fois vos pages sur un serveur, les urls deviennent sensibles la casse.index.htm" NEST PAS la mme chose que INDEX.htm"06. Les liens22HTML, Javascript, XHTML & CSSIII. LIENS RELATIFSLorsquon cre des liens il faut indiquer le chemin du fichier. Si on se trouve dans le mme rpertoire, il suffit dindiquer le nom de la page.texte Si le fichier se trouve dans un autre dossier, il faut indiquer le chemin daccs au fichier. En cas darborescence DESCENDANTE texte En cas darborescence MONTANTE texte Ici ../ permet de remonter dun niveau dans larborescence. En cas darborescence 2 niveaux texte Pour aller dun fichier qui se trouve dans un dossier vers un fichier qui se trouve dans un autre dossier, il faut monter larborescence pour redescendre.texteIci ../ permet de sortir du dossier en cours, puis il faut redescendre dans larborescence et indiquer dans quel dossier on veut aller.IV. LIENS ABSOLUSGnralement lorsque lon cherche placer un lien vers un site externe celui qui est en cours de dveloppement, il faut indiquer ce dernier dans sa version complte et conforme au protocole HTTP (ou autre). Le principe de cration des liens absolus est le mme que pour les liens relatifs.texteV. LIENS INTERNES LA PAGELes liens internes permettent de se dplacer lintrieur dun mme fichier html sans que le visiteur soit oblig de faire scroller" la fentre du navigateur. Lutilisateur va donc cliquer sur un lien et il sera amen vers la destination du lien interne. Pour cela deux tapes sont ncessaires : Dfinir la cible de destination du lien grace lattribut name texteet associer ce mme nom de destination au lien prcd dun diese.lien vers le haut de la pageIl nest pas ncessaire, dans ce cas prcis, de mettre un texte ou une image, entre les balises douverture et de fermeture, mais le nom ne doit pas contenir despaces, ni daccents, ni de caractres spciaux.06. Les liens23HTML, Javascript, XHTML & CSSVI. CAS PARTICULIER, LATTRIBUT MAILTO"Cas particulier parmis les attributs de la balise . Il sagit dun lien de messagerie qui fait apparatre le client de messagerie du navigateur (Outlook Express pour IE par exemple).ContactPour prdfinir lobjet du mail vous pouvez rajouter ?subject= au corps de lattibut...Contact06. Les liens24HTML, Javascript, XHTML & CSS07. Les imagesI. BALISE ET ATTRIBUTSII. LES CARTES CLIQUABLES (OU MAP)25HTML, Javascript, XHTML & CSSI. BALISE ET ATTRIBUTSPour afficher une image dans une page HTML on utilise la balise assortie de ses attributs affrents, dont les plus courants sont prsents ci aprsGnralement les lments graphique dune mme page sont stocks dans le repertoire images" dune mme rubrique. balise attribut valeurs effet srcnamewidthheightalignalt borderbordercolorhspacevspaceurl relatif ou absolu dfinirvariable dfinirpixelpixelleftrighttopmiddlebottomvariable dfinirpixelhexadecimalepixelpixeldfinit la source relative ou absolue du documentdfinit une identit limagedfinit la largeur de limagedfinit la hauteur de limagedfinit le positionnement de limage dans lespacedfinit une description de limage dfinit un cadre limagedfinit une couleur au cadre de limagedfinit lespace horizontal entre limage et le contenudfinit un espace vertical entre limage et le contenu07. Les images26HTML, Javascript, XHTML & CSSII. LES CARTES CLIQUABLES (OU MAP)Il sagit de dfinir des zones sensibles (donc cliquables) dans une image. Il faut alors calculer les coordonnes de ces zones. Il est possible de faire des zones carres ou rectangulaires, des cercles et des polygones.Ici un carr, un cercle et un polygone...Les coordonnes du carr/rectangle sont les coordonnes x et y des coins suprieurs gauche et infrieur droit. ici : 198, 5, 297, 221Les coordonnes du cercle sont celles du centre et du rayon. ici : 119, 73, 65Les coordonnes du polygone sont les points x et y de chaque point.ici : 4,169, 51, 179, 102, 198, 131, 211, 144, 222, 5, 219Dans la page il faut la fois dcrire la carte...... et dans lappel dimage, relier limage ce code :NB : Il est possible de rajouter lattribut alt sur chacune des zones. 07. Les images27HTML, Javascript, XHTML & CSS08. Les tableauxI. GENERALITSII. TABLEAUX AVEC FUSION 1. Lattribut colspan 2. Lattribut rowspan 2. Les attributs colspan & rowspan28HTML, Javascript, XHTML & CSSI. GENERALITSLa balise permet dinsrer un tableau votre page et cest lune des balises les plus utilises.En effet les tableaux permettent une meilleure prsentation des informations, nombreux sont les sites qui utilisent les tableaux pour obtenir une mise en page de type journal.La cration des tableaux se passe essentiellement autour de 3 balises : le corps du tableau une ligne du tableau une cellule du tableauBien entendu, toutes ces balises doivent tres fermes pour indiquer la fin du tableau, dune ligne ou dune cellule. cell1 balise attribut valeurs effet &cellpaddingcellspacingwidthheightbgcolorbackgroundborder bordercolorbordercolorlightbordercolordarkwidthheightbgcolorbackground alignvaligncolspanrowspanpixelpixelpixel / pourcentagepixel / pourcentagehexadecimaleurl relatif ou absolu dfinirpixelhexadecimalehexadecimalehexadecimalepixel / pourcentagepixel / pourcentagehexadecimaleurl relatif ou absolu dfinir left / center / righttop / middle / bottomunit numriqueunit numriquedfinit lespace entre le bord du tableau et les cellules dfinit lespace entre les cellulesdfinit la largeur du tableaudfinit la hauteur du tableaudfinit la couleur de fond du tableaudfinit une image en arrire plan du tableaudfinit la taille de la borduredfinit la couleur de la borduredfinit la couleur aux points culminants de la borduredfinit la couleur de lombre de la borduredfinit la largeur de la celluledfinit la hauteur de la celluledfinit la couleur de fond de la ligne et/ou de la cellule dfinit une image en arrire plan de la cellule dfinit lalignement horizontal du contenudfinit lalignement vertical du contenudfinit la fusion de 2 cellules adjacentes sur une lignedfinit la fusion de 2 cellules adjacentes sur une colonne08. Les tableaux29HTML, Javascript, XHTML & CSSEn principe, la hauteur et la largeur dune cellule sadaptent automatiquement aux donnes (texte ou image), nanmoins, vous pouvez dfinir une hauteur et une largeur pour un tableau ou une cellule ; lespacement des cellules et la taille des bordures peut tre aussi paramtrs.Gardez lesprit que La taille du tableau se dtermine en pixels ou en pourcentage. La taille fixe a pour avantage de garder la mise en page, la taille en pourcentage sadaptera la taille de lcran mais risque de modifier la mise en page. La taille des cellules sadapte leur contenu. cell 1 cell 2 cell 3 cell 4 08. Les tableaux30HTML, Javascript, XHTML & CSSII. TABLEAUX AVEC FUSIONLes lignes et cellules dun tableau peuvent tres fusionns, afin dobtenir des zones de mise en forme de contenu modulables et adaptes aux besoins dune maquette.Cette fusion est ralis avec les attributs colspan et rowspan. Pour fusionner 2 cellules adjacentes sur une ligne, lattribut COLSPAN est requis Pour fusionner 2 cellules adjacentes sur une colonne ", lattribut ROWSPAN est requis1. Lattribut COLSPANSur une ligne : La ligne du haut stend sur 2 cellules cell 1 cell 2 cell 3cell 1cell 2 cell 3Sur plusieurs lignes : La ligne du haut stend sur 2 cellules mme chose pour la ligne du bas cell 1 cell 2 cell 3 cell 4cell 1cell 2 cell 3cell 42. Lattribut ROWSPANLa 1e ligne comporte la cellule 1 qui stend sur 3 ranges de colonne". Le terme colonne" ntant pas tout fait exact syntaxiquement parlant puisquil sagit en fait dun ensemble de cellules situes les unes sous les autres cell 1 cell 2 cell 3cell 1 cell 2cell 308. Les tableaux31HTML, Javascript, XHTML & CSS3. Les attributs COLSPAN et ROWSPANComme vous pouvez vous en douter, les attributs colspan et rowspan peuvent sutiliser conjointement dans une mme construction tabiulaire. Nanmoins prenez garde la complxit syntaxique que de telles architectures peuvent engendrer. En fonction de ce que vous choisirez de construire ou une logique et une ecriture irrprochable ( dfaut une bonne dose daspirine) seront requises. cell 1 cell 2 cell 3 cell 4 cell 5 cell 6 cell 7 cell 8 cell 9cell 1 cell 2cell 3 cell 4 cell 5cell 6 cell 7cell 8 cell 908. Les tableaux32HTML, Javascript, XHTML & CSS09. Les frames & I-framesI. GENERALITS 1. Quest ce que les frames ? 2. Comment ca marche ? 3. Les attributs ROWS & COLS 4. Les liens appliqus aux frames 5. Compatibilit des navigateursIII. LES I-FRAMES33HTML, Javascript, XHTML & CSSI. GENERALITS1. Quest ce que les frames ?Auparavant les navigateurs ne pouvaient afficher quun seul fichier HTML, mais on peut dsormais diviser en plusieurs zones la page affiche. Ces zones ou fentres ou encore cadres se nomment frame. Les frames sont apparues avec la version 3.0.dHTML et mme si bon nombre de Webmasters les utilisaient, elles ntaient pas une composante officielle du langage.Aprs quelques annes dutilisation intensives dans la fin de la priode pr web 2.0, les frame sont tombs en disgrace pour des raisons doptimisation des protocoles de referencement. Elles ne sont donc presque plus utilises aujourdhui. Il nen reste pas moins que lorsquutilises avec parcimonie et bon escient, elles sont toujours un outil fort pratique.2. Comment ca marche ?Dans une page dindex, la balise prend la place de la balise ; cest elle qui dans un premier temps va dfinir les cadres, quils soient verticaux ou horizontaux, ainsi que leurs dimensions (en % ou en pixels).Voici deux exemples parmis les plus courants ainsi que leur code source... Deux frame horizontales page avec frames affichage zone 1 zone 2constructionframesetzone 1 zone 2 Deux frame horizontales et deux frames verticales page avec frames affichagezone 1zone 2 zone 3constructionframesetzone 1framesetzone 2 zone 3Bien entendu, la famille des balises va se voir enrichie par un certain nombre dattributs qui vont spcifier le comportement de ces dernires.09. Les frames34HTML, Javascript, XHTML & CSSbalise attribut valeurs effetcolsrowsframeborderborderbordercolorframespacingsrcnameframeborder borderbordercolormarginwidthmarginheightscrollingnoresizepixel / pourcentagepixel / pourcentageyes / nopixelhexadecimalepixelurl relatif ou absolu dfinirvariable dfiniryes / no pixelhexadecimalepixelpixelyes / no / auto attribut sans valeurdfinit un format de frameset verticaldfinit un format de frameset horizontaldfinit une bordure de framesetdfinit la taille dune bordure de framesetdfinit la couleur dune bordure de framesetdfinit lespace entre les cadres dun framesetdfinit la source relative ou absolue des framesdfinit une identit chaque framedfinit une bordure de framedfinit la taille dune bordure de framedfinit la couleur dune bordure de framedfinit la largeur des marges interieures dune framedfinit la hauteur des marges interieures dune framedfinit lautorisation dattribution dune scrollbar interdit le redimenssionement manuel dune frame page avec frames 3. Les attributs ROWS & COLSrows et cols dfinissent le type de cadre, qui peut tre horizontal (rows/range) ou vertical (cols/colonnes). Ils prennent une serie de valeurs spares par des virgules. Ces valeurs sont exprimes en pourcentage (valeurs relatives) ou plus gnralement en pixel (valeurs absolues).Une valeur exotique", ltoile (*) fera sajuster automatiquement la colonne ou la range concerne sur lespace maximum laiss par les autre dans lensemble de frame.4. Les liens appliqus aux framesNormalement, les pages appeles par des liens saffichent dans la frame o les liens ont t activs, mais lattribut de lien target permet dappeler un cadre par son nom dfini avec lattribut name. lien09. Les frames35HTML, Javascript, XHTML & CSS5. Compatibilit des navigateursMme si il est de plus en plus rare de trouver des navigateurs non compatibles, il faut nanmoins ne pas ngliger cet aspect, sous peine de se passer de quelques visiteurs. La technique consiste utiliser la balise qui permet de spcifier un texte HTML en version normale. Entre ces balises il faut donc, thoriquement, dvelopper un deuxime site : vous pouvez pour simplifier le travail prciser des regrets polis et insrer des liens vers les sites officiels des navigateurs pour que le visiteur opte pour une mise jour. Dsol mais ce site utilise la technique des frames. Merci de faire la mise jour de votre navigateur.III. LES I-FRAMESLa technique des cadres locaux sobtient avec la balise elle permet dinsrer une fentre nimporte quel endroit de votre document. Cette fentre fera rfrence un autre document HTML.La balise doit tre insre dans le corps de votre document, cest--dire entre et . Elle a les mmes attributs que la balise plus les attributs width et heightbalise attribut valeurs effet srcnamewidthheightframeborder borderbordercolormarginwidthmarginheightscrollingnoresizeurl relatif ou absolu dfinirvariable dfinirpixelpixelyes / no pixelhexadecimalepixelpixelyes / no / auto attribut sans valeurdfinit la source relative ou absolue dune iframedfinit une identit chaque iframedfinit la largeur dune iframedfinit la hauteur dune iframedfinit une borduredfinit la taille dune borduredfinit la couleur dune borduredfinit la largeur des marges interieuresdfinit la hauteur des marges interieuresdfinit lautorisation dattribution dune scrollbar interdit le redimenssionement manuel09. Les frames36HTML, Javascript, XHTML & CSS10. Les formulairesI. GENERALITSII. CREATION 1. Method 2. Action 3. EnctypeIII. LES OBJETS DE FORMULAIRE 1. Champ de texte 2. Boutons radio (radiobox) 3. Cases cocher (checkbox) 4. Liste droulante 5. Boite de dialogue 6. Boutons37HTML, Javascript, XHTML & CSSI. GENERALITSLes formulaires permettent avant tout de faire ragir votre visiteur, de linviter laisser ses impressions, ses commentaires. La cration des formulaires se ralise grce plusieurs champs, dans lesquels le visiteur va entrer une information ou opter pour un choix. Linformation est ensuite envoye, laide de scripts, sur le serveur qui vous hberge puis renvoye, dans la plupart des cas, sur ladresse lectronique de votre choix.II. CREATIONNous traitons ici la structure du formulaire en html, lenvoi des donnes se faisant par .La balise ddi aux formulaires est . Elle possde 3 attributs :method : method="post" (la plus courante)action : action="mailto:nom@url" (si vous envoyez votre formulaire par email)enctype : enctype="text/plain"1. Method2 valeurs sont proposes : POST pour un formulaire classiqueGET pour (par exemple) dfinir un moteur de recherche sur votre site2. ActionAdresse le formulaire vers lURL du script CGI (fourni par le serveur qui hberge vos pages), qui accepte linformation et vous le retourne suivant les paramtres dfinis. Les valeurs les plus couramment utilises sont :mailto:nom@url" : Pour lenvoi du formulaire par le logiciel de messagerie de votre visiteur. /cgi-bin/mailer" : Pour lenvoi du formulaire par le script CGI de votre hbergeur3. EnctypeCet attribut spcifie le format des donnes envoyes, dans le cas o un protocole nimposerait pas de format prcis. Il possde plusieurs valeurs dont :text/plain" : Valeur utilise dans le cas dun formulaire classiquemultipart/form-data" : Valeur utilise dans le cas o le formulaire comprendrait un fichier attach.Ci-dessous un exemple de code complet : ... 10. Les formulaires38HTML, Javascript, XHTML & CSSbalise attribut valeurs effetmethodactionenctypetypesizemaxlengthnamevaluenamenamecolsrowspostmailto:nom@urltext/plaintext / radio / checkboxsubmit / resetpixelpixelvariable dfinirvariable dfinirvariable dfinirvariable dfinirpixelpixeldfinit le format du formulairedfinit laction de transmission des donnesdfinit le format des donnes transmisesdfinit le type de champ de saisie (texte ou bouton)dfinit le nombre de caractres visibles dans le champdfinit le nombre de caractres maximum la saisiedfinit lidentit dun ou de plusieurs champsdfinit le contenu du champ lors de la rceptiondfinit lidentit dun ou de plusieurs champsdfinit le contenu du champ lors de la rceptiondfinit la largeur du champdfinit la hauteur du champIII. LES OBJETS DE FORMULAIRE1. Champ de texteIl permet de laisser une courte information (nom, prnom, etc...)2. Boutons radio (radiobox)Ils ne permettent quun seul choix.oui non oui non3. Cases cocher (checkbox)Elles permettent un ou plusieurs choix.musique danseinformatique musique danse informatique10. Les formulaires39HTML, Javascript, XHTML & CSS4. Liste droulanteElle permet de dfinir un menu choix multiple. france allemagne espagne italiefrance5. Boite de dialogueElle permet dcrire des commentaires sans limitation de nombre de caractres.vos commentaires6. BoutonsPour envoyer le formulaire et annuler les donnes inscrites dans le formulaireEnvoyer AnnulerVoici un exemple de formulaire, format dans un tableau :10. Les formulaires40HTML, Javascript, XHTML & CSS11. Recapitulatif des balises les plus courantesI. BODYII. TEXTEIII. TITRE / PARAGRAPHEIV. TRAIT HORIZONTALV. LISTESVI. LIENSVII. IMAGESVIII. TABLEAUXIX. FRAMESX. I-FRAMESXI. FORMULAIRES41HTML, Javascript, XHTML & CSSI. BODYbalise attribut valeurs effet topmarginleftmarginmarginwidthmarginheightbgcolorbackgroundstylebgpropertiesscrolltextlinkalinkvlinkpixelpixelpixelpixelhexadecimaleurl relatifurl absolubackground-repeat: no-repeat;background-repeat: x;background-repeat: y;fixedyes / no / autohexadecimalehexadecimalehexadecimalehexadecimaledfinit les marges haute et basse de la page (pour I.E)dfinit les marges gauche et droite de la page (pour I.E)dfinit les marges haute et basse de la pagedfinit les marges gauche et droite de la pagedfinit la couleur du fonddfinit la source relative de limage de fonddfinit la source absolue de limage de fonddfinit la non rptition du bkg (css intgre)dfinit la rptition du bkg sur laxe X (css intgre)dfinit la rptition du bkg sur laxe Y (css intgre)dfinit si la capacit du fond scroller avec la pagedfinit la prsence de la barre de scroll sur la pagedfinit la couleur du texte pour la pagedfinit la couleur des liens pour la pagedfinit la couleur des liens actifs pour la pagedfinit la couleur des liens visits pour la pageII. TEXTEbalise attribut valeurs effet / / //////////grasitaliquesoulignexposantindiceIII. TITRE / PARAGRAPHEbalise attribut valeurs effet...align leftrightcenterjustifyaligne le texte sur la marge de gauchealigne le texte sur la marge de droite centre le texte entre les margesjustifie le texte11. Recap des balises42HTML, Javascript, XHTML & CSSIV. TRAIT HORIZONTALbalise attribut valeurs effet alignwidthsizecolornoshadeleftrightcenterpixel, %de 1 10hexadecimalesansaligne la ligne horizontale gauchealigne la ligne horizontale droitealigne la ligne horizontale au centredfinit la largeur de la lignedfinit lpaisseur de la lignedfinit la couleur de la ligne (uniquement I.E)sil est prsent, leffet dombre 3D est annulV. LISTESbalise attribut valeurs effettypesanstypedisccirclesquaresansIAapucecerclecarrchiffres arabes par dfautchiffres rommainslettres alphabtiques majusculeslettres alphabtiques minusculesVI. LIENSbalise attribut valeurs effet hreftargettitlenamestyleurl relatifurl absolu_self_blank_parent_topvariable dfinirvariable dfinirvariable dfinirdfinit la source relative du documentdfinit la source absolue du documentappelle la page cible dans le cadre dappelappelle la page cible dans une nouvelle fentreappelle la page cible dans le cadre parent (de niveau immdiatement suprieur)appelle la page cible dans la fentre hte (par-dessus le FRAMESET)dfinit une description du lien (identique lattribut ALT pour une image)dfinit une identit au lien dfinit une feuille de style11. Recap des balises43HTML, Javascript, XHTML & CSSVII. IMAGESbalise attribut valeurs effet srcnamewidthheightalignalt borderbordercolorhspacevspaceurl relatif ou absolu variable dfinirpixelpixelleftrighttopmiddlebottomvariable dfinirpixelhexadecimalepixelpixeldfinit la source relative ou absolue du documentdfinit une identit limagedfinit la largeur de limagedfinit la hauteur de limagedfinit le positionnement de limage dans lespacedfinit une description de limage dfinit un cadre limagedfinit une couleur au cadre de limagedfinit lespace horizontal entre limage et le contenudfinit un espace vertical entre limage et le contenuVIII. TABLEAUXbalise attribut valeurs effet &cellpaddingcellspacingwidthheightbgcolorbackgroundborder bordercolorbordercolorlightbordercolordarkwidthheightbgcolorbackground alignvaligncolspanrowspanpixelpixelpixel / pourcentagepixel / pourcentagehexadecimaleurl relatif ou absolu dfinirpixelhexadecimalehexadecimalehexadecimalepixel / pourcentagepixel / pourcentagehexadecimaleurl relatif ou absolu dfinir left / center / righttop / middle / bottomunit numriqueunit numriquedfinit lespace entre le bord du tableau et les cellules dfinit lespace entre les cellulesdfinit la largeur du tableaudfinit la hauteur du tableaudfinit la couleur de fond du tableaudfinit une image en arrire plan du tableaudfinit la taille de la borduredfinit la couleur de la borduredfinit la couleur aux points culminants de la borduredfinit la couleur de lombre de la borduredfinit la largeur de la celluledfinit la hauteur de la celluledfinit la couleur de fond de la ligne et/ou de la cellule dfinit une image en arrire plan de la cellule dfinit lalignement horizontal du contenudfinit lalignement vertical du contenudfinit la fusion de 2 cellules adjacentes sur une lignedfinit la fusion de 2 cellules adjacentes sur une colonne11. Recap des balises44HTML, Javascript, XHTML & CSSIX. FRAMESbalise attribut valeurs effetcolsrowsframeborderborderbordercolorframespacingsrcnameframeborder borderbordercolormarginwidthmarginheightscrollingnoresizepixel / pourcentagepixel / pourcentageyes / nopixelhexadecimalepixelurl relatif ou absolu dfinirvariable dfiniryes / no pixelhexadecimalepixelpixelyes / no / auto attribut sans valeurdfinit un format de frameset verticaldfinit un format de frameset horizontaldfinit une bordure de framesetdfinit la taille dune bordure de framesetdfinit la couleur dune bordure de framesetdfinit lespace entre les cadres dun framesetdfinit la source relative ou absolue des framesdfinit une identit chaque framedfinit une bordure de framedfinit la taille dune bordure de framedfinit la couleur dune bordure de framedfinit la largeur des marges interieures dune framedfinit la hauteur des marges interieures dune framedfinit lautorisation dattribution dune scrollbar interdit le redimenssionement manuel dune frameX. I-FRAMESbalise attribut valeurs effet srcnamewidthheightframeborder borderbordercolormarginwidthmarginheightscrollingnoresizeurl relatif ou absolu dfinirvariable dfinirpixelpixelyes / no pixelhexadecimalepixelpixelyes / no / auto attribut sans valeurdfinit la source relative ou absolue dune iframedfinit une identit chaque iframedfinit la largeur dune iframedfinit la hauteur dune iframedfinit une borduredfinit la taille dune borduredfinit la couleur dune borduredfinit la largeur des marges interieuresdfinit la hauteur des marges interieuresdfinit lautorisation dattribution dune scrollbar interdit le redimenssionement manuel11. Recap des balises45HTML, Javascript, XHTML & CSSXI. FORMULAIRESbalise attribut valeurs effetmethodactionenctypetypesizemaxlengthnamevaluenamenamecolsrowspostmailto:nom@urltext/plaintext / radio / checkboxsubmit / resetpixelpixelvariable dfinirvariable dfinirvariable dfinirvariable dfinirpixelpixeldfinit le format du formulairedfinit laction de transmission des donnesdfinit le format des donnes transmisesdfinit le type de champ de saisie (texte ou bouton)dfinit le nombre de caractres visibles dans le champdfinit le nombre de caractres maximum la saisiedfinit lidentit dun ou de plusieurs champsdfinit le contenu du champ lors de la rceptiondfinit lidentit dun ou de plusieurs champsdfinit le contenu du champ lors de la rceptiondfinit la largeur du champdfinit la hauteur du champ11. Recap des balises46HTML, Javascript, XHTML & CSS12. Balises obsoltesAvec la migration effective dHTML vers le format XHTML, il existe un grand nombre de balises et/ou dattributs qui sont aujourdhui considres comme obsoltes car pour la plupart remplaces par du formatage en CSS.Certaines disparaissent, dautres ont changes de syntaxe ; Suivant les recommandations du W3C, il est prfrable de ne plus les utiliser. Quelques exemples : ... pour du gras est remplac par ... ... pour litalique est remplac par ... ... pour changer la taille du texte. Il y avait 7 tailles de texte, 1,2,3,4,5,6 et 7. ... pour changer la couleur du texte. Choix de couleur en valeur hexadcimal. ... pour changer la police du texte en donnant une liste de police. De mme, quelques attributs trouveront leurs quivalence au sein des mmes CSS (notament les attributs de la balise ) : ALIGN WIDTH HEIGHT BORDER BACKGROUND BGCOLOR HSPACE et VSPACE LINK, VLINK, ALINK47HTML, Javascript, XHTML & CSS13. JavascriptI. INTRODUCTIONII. QUEST CE QUE LE JAVASCRIPT ?III. JAVA OU JAVASCRIPT ?IV. A QUOI RESSEMBLE UN CODE JAVASCRIPT ?48HTML, Javascript, XHTML & CSSI. INTRODUCTIONJe ne saurai trop le rpter comme nous lavons voqu en dbut danne le but de ces leons nest pas de vous transformer en ingnieur informaticien. Lobjectif de cette partie est de vous dgrossir laspect quelque peu rbarbatif dune approche du langage Javascript et de vous transmettre quelques unes des utilisations les plus utiles que vous aurez utiliser dans la construction de vos architectures les plus courantes.II. QUEST CE QUE LE JAVASCRIPT ?Le Javascript (ne pas confondre avec JAVA) est un langage informatique de type dynamique qui vous sera utile pour amliorer la prsentation et linteractivit de vos pages Web. Dynamique ? Jusquici, toutes vos pages HTML taient statiques. Cela veut dire que le visiteur pouvait consulter votre site, mais pas plus. Grce un langage dynamique, le visiteur peut lui-mme modifier" ou interagir sur certains lments de votre site.Trs utile pour traiter les vnements occasionns par un internaute sur une page web, le Javascript permet la mise en place de menus dynamiques, douvrir et/ou fermer des fentres pop-up", de forcer une fentre de navigateur souvrir en plein cran, et bien plus encoreIII. JAVA OU JAVASCRIPT ?Ne pas confondre ces deux langages totalement diffrents. JAVA est un langage beaucoup plus complexe que Javascript notamment parce que son code source est compil avant son excution ce qui assure notamment la confidentialit de ce dernier (on naccde pas au code en faisant clic droit Afficher la source !!!).Et a veut dire quoi, compil ? Une fois compil, le script ne peut plus tre modifi moins dtre dcompil. Un script compil voit sa source cache.A linverse, le Javascript et le HTML sont interprts, cest--dire que le code source sera visible et le fichier ne sera pas compress".Retenez qu part les syllabes java" qui reviennent dans les deux noms ces deux codes nont rien en commun.13. Javascript49HTML, Javascript, XHTML & CSSIV. A QUOI RESSEMBLE UN CODE JAVASCRIPT ?Il sagit de balises que lon place gnralement entre les balises et dune page html, mais que lon peut placer presque partout. JavaScript sintgre directement dans votre page HTML entre les deux balises et . De plus, afin de solliciter linterprteur JavaScript, on prcise dans la balise ouvrante : Mon premier script ! > Une autre solution dincrmentation consiste externaliser le moteur" de votre script.Pour ce faire, il vous faut crer la racine du site une simple page au format .js (script.js par exemple) qui accueillera la partie du code script.Il ne restera plus qua appeller" cette partie depuis votre page html en utilisant la ligne de code suivante (toujours place entre le header et le body) :13. Javascript50HTML, Javascript, XHTML & CSS14. Javascript / menus dynamiquesI. NAVI SIMPLEII. NAVI DYNAMIQUE 1. onmouseout, on mouseover 2. onmouseout, on mouseover multiple 3. onmouseout, on mouseover, onclick (2 images) 4. onmouseout, on mouseover, onclick (3 images)51HTML, Javascript, XHTML & CSSI. NAVI SIMPLEIl sagit dune construction qui vous est prsent familire.Un tableau faisant apparatre les divers lments bitmap dune mme navigation avec la dfinition des balises de lienII. NAVI DYNAMIQUE1. onmouseout, on mouseoverPour rendre ce mme menu dynamique par lutilisation du langage Javascript il faudra dabord placer entre le header et le body de la page la balise javascript suivante : function MM_findObj(n, d) { //v3.0 var p,i,x; if(!d) d=document; if((p=n.indexOf(?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i52HTML, Javascript, XHTML & CSSPAS DE PANIQUE !Mme si cette balise et ses attributs peuvent vous sembler dune approche quelque peu barbare, ne vous inquitez pas de cette dernire. Il sagit tout simplement du moteur " de votre script et ce dernier a t gnr par fireworks. Vous naurez JAMAIS intervenir dessus, gardez juste en mmoire que son incrmentation est ncessaire au bon fonctionnement de votre menu dynamiqueUne fois ce moteur mis en place (en interne o en externe), la premire chose faire pour rendre actif les diffrents lments bitmap (les images) de votre navigation va tre dans la balise de donner un attribut de nom chacun de ces derniers (en gnral le mme que limage concerne) :Attention cet attribut sera unique pour chaque image.Ltape suivante sera de dfinir les attributs de changement dtat de vos images, pour cela nous utiliserons les attributs onMouseOut et onMouseOver que nous placerons dans la balise aprs lattribut href.Notez bien que si lattribut onMouseOut est strictement invariable, lattribut onMouseOver devra faire lobjet de modifications rcurrentes pour chaque image concerne.Tout dabord la mise lquivalent de lattribut name " appel par le code javascriptonMouseOver="MM_nbGroup(over,navi_01,images/navi_01_f2.jpg,images/navi_01_f2.jpg,1);"Puis lappel de la deuxime image qui apparatra lors du passage de la souris sur limage onMouseOver="MM_nbGroup(over,navi_01,images/navi_01_f2.jpg,images/navi_01_f2.jpg,1);"2. onmouseout, on mouseover multiplePour ce cas de figure qui peut savrer trs pratique loccasion il sagit tout simplement de doubler lappel dimage au sein du onMouseOverAttention ! Notez bien que pour viter la confusion dans lappel de limage, Javascript demande ce que lappel de limage concerne ne soit pas le mme que la premire appele, do lintrt de la dfinition dun attribut name " unique chaque image.14. JS / Menus dynamiques53HTML, Javascript, XHTML & CSS3. Navi dynamique / onmouseout, on mouseover, onclick (2 images)Si vous souhaitez quune image clique faisant apparatre son deuxime tat reste apparente sur votre barre de navigation vous allez devoir utiliser lattribut onClick lintrieur de votre balise la suite des deux prcdents attributsCest cet attribut qui dfinira quelle image reste affiche aprs laction.Attention ! Dans le cas prsent, lattribut Javascript navbar1 est le dnominatif de votre barre de navigation. Le script global prendra donc en considration tous les autres lments utilisant ce mme attribut comme faisant partie de la mme navigation.4. Navi dynamique / onmouseout, on mouseover, onclick (3 images)Si vous souhaitez quune image clique fasse apparatre un troisime tat il vous suffira de changer lappel de limage afficher dans ce mme attribut onClickNB : Pour plus de facilit de comprhension de votre code lorsque vous lincrmenterez, il vous est conseiller de normer lappellation de vos diffrentes images selon le protocole suivantPour onMouseOut > image_01.jpgPour onMouseOver > image_01_f2.jpgPour onClick > image_01_f3.jpg14. JS / Menus dynamiques54HTML, Javascript, XHTML & CSS15. Javascript / popupI. QUEST CE QUUNE POPUP ?II. ATTRIBUTSIII. OUVERTURE DUNE POPUP SIMPLE 1. avec javascript spar 2. avec javascript incluIV. FERMETURE DUNE POPUP55HTML, Javascript, XHTML & CSSI. QUEST CE QUUNE POPUP ?A linstar dune fentre de navigateur qui souvrirait suite la dfinition dun attribut de target _blank dans une balise daction, une pop up est une fentre de navigateur paramtrable qui souvre lextrieur de la page consulte.La dfinition de ses diffrents paramtres va faire lobjet de lutilisation du langage Javascript.II. ATTRIBUTS attribut valeurs effetwidthheightlefttoplocationdirectorieshistorystatustoolbarmenubarscrollbarsfullscreenresizablepixelpixelpixelpixelyes / noyes / noyes / noyes / noyes / noyes / noyes / noyes / noyes / nodfinit la largeur de la fentredfinit la hauteur de la fentredfinit la position horizontale sur lcrandfinit la position verticale sur lcrandfinit laffichage de la barre dadressedfinit laffichage de la barre de dossiersdfinit laffichage de la barre dhistoriquedfinit laffichage de la barre de statutdfinit laffichage de la barre doutilsdfinit laffichage de la barre de menudfinit laffichage des ascenseursdfinit louverture de la fentre en plein crandfinit le redimensionnement de la fentreIII. OUVERTURE DUNE POPUP SIMPLEIl existe plusieurs mthodes pour ouvrir une fentre popup.La premire mthode fait appel un code spar de la balise daction, la seconde est incluse dans cette mme balise.1. avec javascript sparAvant de dfinir votre action il faudra placer ce code entre le header et le body de votre pagefunction OpenPopup(POP){window.open (POP,popup,width=300,height=200,directories=no,history=no,status=no,toolbar=no,menubar=no,scrollbars=no,resizable=no);}Ce code dfinira lappel la popup ainsi que ses diffrents attributs ensuite via un onClick " il ny a plus qu faire appel au code sus dfini lors de ltablissement du lien :15. JS / Popup56HTML, Javascript, XHTML & CSS2. avec javascript incluLa mthode est similaire la premire sauf que cette fois ci nous allons inclure directement le code javascript lintrieur de la balise Ces deux mthodes fonctionnent aussi bien avec du texte quavec une imageAttention : Il est noter toutefois que lutilisation de la premire mthode est plus indique lorsquil sagit dappeler une popup depuis un document flash. Dans ce cas de figure le code action script utiliser sur le bouton concrn sera :on (release) { getURL(javascript:OpenPopup(popup.htm);");}IV. FERMETURE DUNE POPUPDans la fenetre concerne et sans ajout de code spar il suffira dinclure un onClick circonstanci la dfinition de laction15. JS / Popup57HTML, Javascript, XHTML & CSS16. Javascript / fullscreenTrs simple dutilisation et trs pratique pour forcer " louverture dune page en plein cranATTENTION : Nonobstant que ce script ne fonctionne quavec IE, il nest pas toujours trs apprci par les internautes qui peuvent y voir une agression manifeste de leurs habitudes de consultation de pages Internet.Inclure ce code entre le header et le body : function fullscreen(){ window.open(fenetre.htm","","fullscreen=yes, scrollbars=auto") } Puis lors de la dfinition de votre lien faites appel la fonction scripte :APPEL DE FENETRE FULL SCREEN58HTML, Javascript, XHTML & CSS17. Javascript / restriction daccs au contenuTrs pratique utiliser avec des clients aux tendances paranoaquesInclure ce code entre le header et le body :Ce dernier invalidera " les options de rcupration dlment du bouton droit de la souris.Bien entendu cette option nempchera en rien un utilisateur averti daller rcuprer la source via loption affichage/source du menu de son navigateur et de rcuprer ce qui lintresse au sein de la page.59HTML, Javascript, XHTML & CSS18. Introduction au XHTMLI. GENERALITESII. LE DOCTYPE / DTD 1. Quest ce que cest ? 2. Les differentes DTD 3. Choisir sa DTDIII. LA BALISE IV. LES REGLES DECRITURE 1. Gnralits 2. Balises BLOC vs. INLINE 2.1 Positionnement par dfaut des balises 2.2 Imbrications et embotementsV. BALISES & VI. EN RESUM60HTML, Javascript, XHTML & CSSI. GENERALITESCe chapitre expose les rgles dcriture qui caractrisent XHTML par rapport HTML. Ces rgles garantissent une meilleure adaptabilit de vos pages aux futurs dveloppement du Web et aux volutions des navigateurs et des outils de visualisation utiliss (tlphones mobiles, PDA etc...) ainsi quune plus grande facilit de mise jour et de mise aux normes daccessibilit.XHTML prsente les mms balises et attributs que HTML. Bien quils soient accpts par XHTML et les navigateurs, certains lments sont dconseills parce que dfavorables laccssibilit et aux tendances modernes.Signalons que ces recommandations qui, sans tre imposes par le langage, constituent en quelque sorte des rgles de bon sens.Ce mme bon sens qui implique ces recommandations... mais sans dogmatisme.II. LE DOCTYPE / DTD1. Quest ce que cest ?Le Doctype", la Dclaration de Type de Document (souvent appel DTD) est une dclaration qui figure en tte dun fichier .htm pour informer le navigateur du type de document dont il sagit. Elle prvient en premier lieu si le langage utilis est HTML ou XHTML. Dans le cas de HTML on peut se passer du doctype, les paramtrtes par dfaut sont suffisants. Dans le cas de XHTML en revanche, le doctype est indispensable car il agit sur la faon dont les navigateurs respectent les normes daffichage des contenus et notament les feuilles de style CSS.2. Les differentes DTD HTML4.01 transitionel HTML4.01 strict HTML4.01 frameset XHTML1.0 strict XHTML1.0 transitionel HTML4.01 frameset3. Choisir sa DTDDe faon gnrale utilisez de prfrence XHTML1.0 Strict, cest a priori la plus adapte vos besoins. Cest aussi la plus facile utiliser et apprendre.Si vous utilisez des iframe ou un attribut target, utilisez XHTML1.0 transitional.Si vous voulez utiliser les frameset et frame, utilisez la DTD XHTML1.0 frameset.Pour plus dinformation sur les DTD et leurs finalits dutilisation :http://www.alsacreations.com/article/lire/560-DTD-comment-choisir.html18. Introduction au XHTML61HTML, Javascript, XHTML & CSSIII. LA BALISE En fait, un fichier XHTML est un fichier XML. Il faut donc dfinir ce quon appelle son espace des noms. Cela se fait dans la balise qui scrit :La balise a aussi deux paramtres facultatifs qui prcisent la langue utilise. Pour XML anglais, avec un contenu franais, on crira :IV. LES REGLES DECRITURE1. GnralitsNous venons de voir deux diffrences entre HTML et XHTML ; la ncessit du DOCTYPE et celle du paramtre xmlns dans . De fait, il ny en a pas beaucoup dautres.Tout ce que nous avons vu dans les chapitres prcdents fonctionne aussi bien en HTML quen XHTML car nous avons obi peu de choses prs aux rgles dcriture de XHTML.Voii ces rgles : Majuscules et minusculesHTML est indiffrent aux deux alors quXHTML exige des minuscules pour toutes les balises et attributs. Pour les valeurs des attributs cest selon ; pour une dsignation de fichier, il faut suivre la forme du nom tel quil a t cre. Balises de fermetureEn html certaines balises de fermeture sont facultatives, tandis que dautres sont obligatoires. En XHTML toutes les balises de fermeture sont obligatoires. Balises clibatairesUne balise clibataire comme scrit dsormais Valeurs des attributsEn XHTML toute valeur dattribut doit tre entre guillemets si la valeur ne contient pas despaces ou de caractres spciaux. Paramtres bolensCertains paramtres jouent uniquement par leur prsence en HTML. Par exemple, installe dans un formulaire une case coche par dfaut.En XHMTL il faut crire 18. Introduction au XHTML62HTML, Javascript, XHTML & CSS2. Balises BLOC vs. INLINEUne autre distinction entre les lments est celle faire entre BLOC et EN LIGNE. Chaque balise se caractrise par une double identit : Une structure HTML qui na intrinsquement aucun rapport avec laffichage de llment. Son rendu sur les navigateurs (affichage, positionnement, comportement) dfini par dfaut selon le bon vouloir de chaque navigateur et modifiable laide des CSS.Pour y voir plus clair, les diffrentes balises qui composent une page html ont t classes : Les balises de type BLOCBODY, DIV, Paragraphes (P), en-ttes (H1 H6), tableaux (TABLE) Ces lments se placent ncessairement les uns en dessous des autres, commencent une nouvelle ligne et forcent le suivant faire de mme. Ils servent distinguer les parties entires de texte. Les balises de type INLINEIl sagit par exemple de A, B, I, SPAN, les images... Elles ne forcent jamais de retour la ligne et peuvent tre lenfant de nimporte quel autre lment. Elles sont prvues pour rester dans le texte et lenrichir (lien hypertexte, renforcement, emphase, etc.). La comprhension de la structure des balises va avoir de nombreuses implications par la suite, et paradoxalement cest souvent un sujet peu connu des webmasters.Au niveau le plus basique retenons simplement que des balises de type bloc peuvent contenir dautres balises de type bloc et des balises de type inline et quune balise possde un rendu CSS qui na pas forcment de rapport avec sa structure HTML. Les balises ont toutes par dfaut une valeur de rendu CSS particulire selon quelles seront du type bloc ou inline. Il est particulirement important de comprendre que : De leur structure HTML vont dpendre les imbrications et embotements autoriss. De leur rendu CSS vont dpendre leurs comportements, positionnements, affichages, etc. 2.1 Positionnement par dfaut des balisesLes balises de type bloc se placent toujours lune en dessous de lautre par dfaut (comme un retour chariot). Par exemple, une suite de paragraphes ou les lments dune liste . Par ailleurs, une balise bloc occupe automatiquement, par dfaut, toute la largeur disponible dans son conteneur. Paragraphe 1Paragraphe 2Les balises de type inline se placent toujours lun ct de lautre afin de rester dans le texte. Par exemple, le renforcement dune partie de texte laide de la balise . texte autre texteCe texte va safficher sur une seule ligne (aucun retour la ligne) car les lments qui le composent sont de rendu CSS en-ligne". 18. Introduction au XHTML63HTML, Javascript, XHTML & CSS 2.2 Imbrications et embotementsEn rgle gnrale Une balise de type bloc peut contenir une (ou plusieurs) balise bloc et/ou inline (sauf exception). Une balise de type inline ne peut contenir QUE une (ou plusieurs) balise inline. Par exemple, la balise (type bloc) englobe les deux paragraphes (type bloc).Paragraphe 1Paragraphe 2Par contre, nous naurions pas pu crire : Paragraphe 1Paragraphe 2car la balise (dont la structure est inline) nest pas autorise contenir des lments de structure bloc comme les paragraphes. NB : Les balises inline se distinguent elles mmes en deux parties : les balises remplacs et les non remplacs Les balises remplacs sont les seuls qui possdent des dimensions (width, height) par dfaut. Il sagit des balises , , , et . Les balises non remplacs nont pas de dimension proprement parler par dfaut (elles noccupent que la place minimum ncessaire leur contenu). Cest le cas des lments , , , etc V. BALISES & Ces deux balises permettent de structurer la page. Elles permettent de dlimiter une partie de la page qui peut ainsi recevoir un nom et des spcifications de mise en forme. Elles sont faites pour cela. est de type bloc et peut regrouper dautres balises du mme type comme des balise en ligne. est une balise en ligne. Elle ne peut dlimiter quun fragment de texte.VI. EN RESUM XHTML est le nouveau standard dintgration. Il est une passerelle vers les futures versions. XHTML interagit facilement avec les autres langages drivs de XML. Ayant des rgles plus strictes, XHTML vous conduit crer des pages plus cohrentes et qui fonctionnent mieux. XHTML 1.0 est accpt par les anciens navigateurs. En outre, les nouveaux navigateurs respectent mieux les normes CSS avec lui. XHTML permet de crer des pages pour les PDA, les tlphones, les lecteurs dcran pour malvoyants etc... XHTML saccorde parfaitement avec les fichiers CSS et il vous incitera viter les balises de prsentation pour rserver la mise en forme aux styles ; ce qui facilitera la prise en compte des problmes daccssibilit dans vos pages.18. Introduction au XHTML64HTML, Javascript, XHTML & CSS19. CSS / Introduction et principe de baseI. GENERALITES 1. Pourquoi utiliser des feuilles de style ? 2. Avantages des feuilles de style 3. Quest-ce quun style " ?II. REGLES ET SYNTAXE 1. Comment crit on en CSS ? 2. Ou placer les CSS ? 3. Structure 4. Units de longueur65HTML, Javascript, XHTML & CSSI. GENERALITESAu dbuttait HTML, conu pour donner de linformationpuis des balises de prsentation de style sont apparues comme et ensuite les tableaux ont t crs pour insrer des donnes tabulaires.MAISavec la varit actuelle de navigateurs qui ne respectent pas ncessairement les standards initialement cres par le W3C, on passe aujourdhui plus de temps vrifier que les affichages soient identiques sur plusieurs navigateurs, voire plusieurs versions du mme navigateur qu crer son code.Cest pourquoi sont apparues les feuilles de style ou CSS (Cascading Style Sheet), qui sont une nouvelle tentative de standardisation des langages dintgration initi par le W3C pour aboutir un affichage identique sur toutes les configurations matrielles de la terre conforme aux dsirs de lauteur.1. Pourquoi utiliser des feuilles de style ?Les CSS permettent de dcrire la prsentation dune page web et remplacent donc avantageusement lancienne mthode, qui consistait utiliser ces fameuses balises, attributs et autres tableaux. Elles permettent de centraliser toute la mise en forme et davoir peu de frais une mise en page cohrente ; elles sont notamment utilises pour dfinir les couleurs, les polices, le rendu, et dautres caractristiques lies la prsentation dun document. Lobjectif est donc de bien sparer la structure (crite en HTML ou similaire) de la prsentation (en CSS) du document. Pour un unique contenu plusieurs affichages sont donc possibles. (cf. http://www.csszengarden.com/)Dans le cas de sites disposant dune arborescence consquente, il peut tre intressant de crer une feuille pour les bases (polices, couleurs arrire-plan, etc) puis des feuilles complmentaires pour chaque division du site.Cette sparation fournit un certain nombre de bnfices, permettant damliorer laccessibilit, de changer plus facilement de structure et de prsentation, et de rduire la complexit de larchitecture dun document.2. Avantages des feuilles de style La structure du document et la prsentation sont grs dans des fichiers spars. La conception dun document se fait dans un premier temps sans se soucier de la prsentation, ce qui permet dtre plus efficace. La prsentation est uniformise, les documents (pages html) font rfrence la (aux) mme(s) feuille(s) de styles. Un mme document peut donner le choix entre plusieurs feuilles de style (css dimpression ou de lecture lcran). Le code HTML est considrablement rduit en taille et en complexit, puisquil ne contient plus de balises de prsentation, il est donc plus rapide afficher.3. Quest-ce quun style " ?Les proprits des styles regroupent diffrentes valeurs, telles que les choix de police, de taille de couleur appliquer aux diffrents lments dune page, ainsi toutes les balises HTML pourront tre positionns, dcors, dimensionns...Cest ce que font les CSS : dfinir ces valeurs dans la page html laide dun code spar en utilisant les balises comme qui de base en possde une taille et une graisse non modifiable mais qui est compltement redfinissable en css.19. CSS / Introduction66HTML, Javascript, XHTML & CSSII. REGLES ET SYNTAXE1. Comment crit on en CSS ?Le langage CSS est trs simple, et le mieux est de commencer par un exemple.En HTML, pour dfinir un lment de texte en gras, vous avez pris lhabitude de placer les balises et textePuis avec lvolution des standards vous avez crittexteVoici comment dans le cas dune application directe, le langage CSS va interprter la mme requte :texteLe point-virgule la fin sert sparer les proprits, comme par exemple : texteMais sil ne sagissait que de remplacer une syntaxe par une autre, lintrt des CSS serait nul.Il existe donc plusieurs faons dutiliser ces dernires2. Ou placer les CSS ? Dans une balise html dans le corps du documentTitre Dans len-tte dun document (balise )... Dans un fichier externe reli au doc html laide dune balise (dans len-tte galement)Pour crer ce fichier, laide dun diteur de texte standard (notepad ou simple text), enregistrez un nouveau document portant lextension .css. Bien entendu aucune balise html ne figurera dans ce fichier.Ces deux mthodes peuvent dailleurs tre utilises ensemble pour un mme document. Dans ces conditions, si elles se contredisent, cest la feuille crite directement dans le document qui prdomine. En gnral, prvoyez davoir une feuille de style dans un fichier spar pour dfinir la prsentation de tout un site, par la suite rajoutez ce qui est ncessaire dans chaque page.Nb : Il est possible de mettre des commentaires presque nimporte o dans une feuille de style CSS en les encadrant de /* et */ 19. CSS / Introduction67HTML, Javascript, XHTML & CSS3. StructureToutes les CSS ont la mme structure1. Slecteur : balise html, classe ou ID2. Proprits : les identifiants (quivalents des balises)3. Valeurs : les donnes de la proprit (quivalents des attributs)La paire proprit/valeur est appele : dfinitiontitre titreou slecteur p{ {proprit : valeur; font-size : 11px;} }4. Units de longueur Units de longueur relatives ( lobjet parent) :px pixel% pourcentageem largeur de policeex hauteur police Units de longueur absolues :mm millimtrescm centimtresin poucespt point =1/72 de poucespc pica = 12points19. CSS / Introduction68HTML, Javascript, XHTML & CSS20. CSS / Les slecteursI. LES 3 TYPES DE SELECTEURS 1. Les slecteurs HTML 2. Les CLASS 3. Les IDII. LES PSEUDO CLASSES 1. Pseudo classes de lien 2. Pseudo classes de lien personnaliseII. REGROUPEMENT DE SELECTEURS69HTML, Javascript, XHTML & CSSI. LES 3 TYPES DE SELECTEURSLa dfinition des slecteurs va dcider quel(s) lment(s) une rgle sappliqueOn trouve 3 types de slecteurs :1. Les slecteurs html qui offrent la possibilit de redfinir les balises html en css2. Les CLASS qui sont des rgles librement choisies applicables nimporte quelle balise html.3. Les ID qui sont similaires aux classes mais qui sappliquent quune seule fois pour un lment donn.1. Les slecteurs HTMLNous lavons vu dans le prcdent dossier thorique. Il sagit en fait dun simple changement de syntaxe.texte devient texte2. Les CLASSNimporte quel balise peut se voir attribuer le slecteur CLASS, qui va servir faire le lien avec une feuille de style, de mme que plusieurs balises peuvent utiliser le mme slecteur CLASS.Ainsi, pour un paragraphe, on crira : que lon couplera avec la dfinition de CSS :p.exemple { font-family: sans-serif;}Tous ces paragraphes apparatront dans une police diffrenteLe slecteur CLASS sutilise souvent en conjonction avec les balises et , qui deviennent ainsi des balises tout faire... Supposons que je veuille mettre un filet bleu gauche de mes exemples. Je peux crire : p.exemple { border-left: solid blue 2px;}Mais si je fais ainsi, je ne peux pas mettre un exemple de plusieurs paragraphes, parce que le filet bleu serait interrompu dans lespace entre les paragraphes ; je ne peux pas non plus mettre une numration ou une table dans lexemple. Il vaut mieux alors crire : div.exemple { border-left: solid blue 2px; }Et crire en corrlation sur la page html : Ici mon exemple.Il peut faire plusieurs paragraphesJe peux galement utiliser .exemple comme slecteur, qui sappliquera alors tous les lments de classe exemple", quel que soit leur type, et me laisse ainsi la libert dcrire dans les cas simples, et de recourir un div dans les cas plus compliqus. 20. CSS / Les slecteurs70HTML, Javascript, XHTML & CSS3. Les IDDune certaine manire ID est un slecteur redondant : tout ce quon peut faire avec on peut en faire autant voire plus avec CLASS. Mais ID a son utilit car il dfinit un lment de manire unique dans lensemble des balises : un document HTML valide ne devrait ainsi pas comporter deux lments avec le mme ID. De fait, ID est le slecteur idal ds quil sagit de positionner un lment au sein de linterface, dans le cas ou deux lments ne devraient logiquement pas avoir la mme position dans linterface.Ainsi, pour un paragraphe, on crira que lon couplera avec la dfinition de CSS :#exemple{font-family: sans-serif;}Enfin une balise pouvant disposer dun ID et dune (ou plusieurs) CLASS (ID disposant dune prsance hirarchique sur CLASS) peut permettre de prciser un lment particulier au sein dun ensemble de CLASS.Ajoutons que JavaScript peut manipuler les balises avec un ID.Enfin, rappelons pour terminer quau sein de la CSS, les ID sont dfinis avec le signe dise (#nom) et les CLASS avec un point (.nom). II. LES PSEUDO CLASSES1. Pseudo classes de lienEn terme de CSS la dfinition de certaines fonctionnalits, en particulier les liens, dispose dun traitement spcial Il sagit de les redfinir de la manire suivante et dans lordre : a:link {proprits} pour les liens par dfauta:visited {proprits} pour les liens visitsa:hover {proprits} pour les liens survolsa:active {proprits} pour les liens actifs et la classique dfinition de lien dans la page htmllinkLes proprits applicables ces pseudo-classes sont les mmes que ceux applicables au texte : typo, couleur, taille, arrire-plan etc... plus la dcoration", cest--dire soulignement, barre au-dessus, barr, clignotant (sauf dans IE).nb : Lorsque souhait, il est necessaire de preciser la disparition du soulignement par defaut des liens... a:link {text-decoration : none; } Autres choix pour text-decorationnone pas de soulignementunderline soulignementline-through barroverline un trait au-dessusunderline overline un trait en dessous et un trait au-dessusPour appliquer les mmes paramtres plusieurs tats de liens, sparer les slecteurs par une virgule. a:link, a:visited {color: #000000, text-decoration:none}20. CSS / Les slecteurs71HTML, Javascript, XHTML & CSS2. Pseudo classes de lien personnaliseIl se peut que vous vouliez, dans une mme page, des liens qui se comportent diffremment. Par exemple pour diffrencier les liens internes des liens externes de votre produit. Il faut alors utiliser la fois les pseudo-classes : a:link, a:visited, a:hover, a:active ET une classe personnalise.Nous allons donc cumuler les deux. Par exemple si je choisis des paramtres propres aux liens externes du site, je peux imaginer une classe personnalise que je nommerai : .lienext"Cela donnera dans le css a.lienext:link {proprits}a.lienext:visited {proprits}a.lienext:hover {proprits}a.lienext:active {proprits}Puis dans le html, il sera impratif dappliquer la classe ainsi crelink Il existe encore quelques autres pseudo-classes, mais elles sont souvent mal reconnues par les navigateurs, et moins utiles. II. REGROUPEMENT DE SELECTEURSLune des grandes forces des slecteurs CSS est leur capacits se combiner les uns avec les autres, ainsi on pourra retrouver ces groupements sous plusieurs formes : une , entre 2 slecteurs signifie lapplication dune mme dfinition aux slecteursh1, h2, h3 {proprits} un espace entre 2 slecteurs signifie la descendancep h1 {proprits} (tous les h1 de ce p seront affects) un > signifie la filiation directep> h1 {proprits} (descendance directe pre/fils) un + signifie ladjacenceh3 + p {proprits} (correspond au premier paragraphe qui suit une en-tte h3)nb : Parent-enfant " ou filiation directe " = un niveau au-dessous Descendance " = deux niveaux ou plus sparent les lments.20. CSS / Les slecteurs72HTML, Javascript, XHTML & CSS21. CSS / Les propritsI. GENERALITSII. PROPRIETES DU TEXTEIII. PROPRIETES DES LISTESIV. PROPRIETES DES COULEURSV. PROPRIETES DES ARRIERES PLANSVI. PROPRIETES DES BLOCS BORDURES ET MARGESVI. PROPRIETES POUR BODY73HTML, Javascript, XHTML & CSSI. GENERALITSLes proprits des slecteurs indiquent lapparence que les lments doivent prendre et permettent de changer normment daspects de la prsentation de ces derniers. Cest en utilisant conjointement ces dernires, que la mise en page de votre contenu va prendre forme.Police taille, style, couleur.Texte alignement, casse, interlignage, espace entre les mots et les lettresCouleur exprime en valeur hexadcimaleArrire-plans couleur ou images.Blocs, bordures et marges largeur, hauteur, style, paisseurs, couleurs, remplissage.Interface puces, indentation, curseur, ascenseurs.Positionnement emplacement exact sur lcran.Affichage et visibilit si un lment apparat et comment.Impression comment dfinir laspect de la page limpression.II. PROPRIETES DU TEXTE1. polices de caractreLutilisation de CSS fait compltement disparatre lusage de lantique lment . proprits valeurs effetfont-style:font-variant: font-weight: font-size: font-family: normal / italic / obliquenormal / small-capsnormal / boldxx-small / x-small / small / medium / large / x-large / xx-large / valeurserif / sans-serif / monospace / cursive / fantasy / verdana / arial / timesItaliquePetites capitalesGrasTailleFamille de caractreExemple dapplication pour une CSS inclue la page HTML :.font{ font-style : normal;font-variant : normal;font-weight : normal;font-size : small;font-family : sans-serif; }RACCOURCI : Avec font: il est possible de spcifier plusieurs proprits dun coup. Il faut alors placer la suite et dans lordre les ventuels style, variante, graisse, taille, et famille. .font{font : normal normal normal small sans-serif; }21. CSS / Les proprits74HTML, Javascript, XHTML & CSSCAS PARTICULIERS : Pour font-size: qui prend une valeur descriptive (xx-small, x-small, small, medium, large, x-large, xx-large), ou une valeur relative la taille actuelle (larger, smaller ou un pourcentage) ; cependant attention linterprtation de ces valeurs par les diffrents navigateurs. Pour viter de mauvaises surprises on prfrera utiliser une valeur fixe exprime en pixels Pour font-family: comme tout le monde n pas toutes les polices du monde, il est possible den indiquer plusieurs, spares par des virgules (les noms comportant des espaces doivent tre mis entre guillemets). Ceci dit, CSS dfinit des familles gnriques, serif, sans-serif, monospace, cursive et fantasy... il est conseill de toujours mettre une famille gnrique en dernier recours.2. texteproprits valeurs effettext-align:line-height:text-indent:text-transform:text-decoration:word-spacing:letter-spacing:left / right / center / justifynormal / pourcentage / valeurnombre / pourcentagenone / capitalize / lowercase / uppercasenone / underline / overline / line-trough / blinkvaleur / valeur ngativevaleur / valeur ngativeAlignementInterlignageIndentationCapitalesAutresIntermotsInterlettrage.font{ text-align : left;line-height : normal;text-indent : inherit;text-transform : none;text-decoration : none; word-spacing : inherit;letter-spacing : inherit;}CAS PARTICULIERS : Pour text-decoration: - La valeur Blink " nest pas oprationnelle avec IE - Il est possible de donner plusieurs dcorations en les sparant par un espace.font{ text-decoration : underline overline; }21. CSS / Les proprits75HTML, Javascript, XHTML & CSSIII. PROPRIETES DES LISTESproprits valeurs effetlist-style-type:list-style-image: (url);none / disc / circle / squaredecimal / upper-alpha / lower-alpha / upper-roman / lower-roman urlListe non numroteListe numroteAppel dune imageNous avons dj vu dans les prcdents cours comment crer une liste en HTML (cf. p.16 / 05 - le texte)Pour mmoireListes non numrotes Listes numrots premier premierdeuxime deuxime Avec CSS nous agirons de mme, ceci prs que nous ignorerons les paramtres de calibrage HTML Pour ce faire nous dfinirons la dclaration de classe pour les lments UL ou OL de la page dans notre feuille de style en sachant que les proprits de ces derniers seront hrites par les LIul{ list-style-type : disc ; }Bien entendu si plusieurs listes diffrentes doivent apparatre dans une mme page, il sera alors ncessaire de dclarer une classe nominative.liste{ list-style-type : square ; }En cas dappel une image, nous utiliserons la syntaxe suivanteul{ list-style-image : url(images/btn.gif); }21. CSS / Les proprits76HTML, Javascript, XHTML & CSSIV. PROPRIETES DES COULEURSproprits valeurs effetcolor: RVB dcimale / hexadecimale / nominative Couleur du texteLa couleur se rgle avec color: et peut sindiquer de plusieurs manires : Soit en dfinissant une couleur RVB dcimale en utilisant des valeurs allant de 0 255 ou en pourcentage.fontcolor{color: rgb(0,0,0); } Soit en dfinissant une couleur hexadcimale (16 millions de couleurs) en indiquant les valeurs RVB dune couleur selon la notation #RRVVBB, emprunte au HTML, o RR, VV et BB reprsentent respectivement un nombre entre 00 et FF pour le Rouge, le Vert et le Bleu. En CSS il est possible de raccourcir ce code en #RVB. Chaque lettre double peut tre indique une seule fois..fontcolor{color: #000000; } Soit en utilisant le tableau nominatif des couleurs standardAttention : Si vous souhaitez utiliser cette mthode, gardez lesprit que le standard CSS ne garanti que laffichage des 16 couleurs dfinies ci aprs (ce qui est peu).Aqua Black Blue Fuchsia Gray Green Lime MaroonNavy Olive Purple Red Silver Teal White Yellow.fontcolor{color: black; }21. CSS / Les proprits77HTML, Javascript, XHTML & CSSV. PROPRIETES DES ARRIERES PLANSA prsent, voyons comment le CSS va agir sur les arrires plans il va tre possible dagir sur la couleur, la dfinition dune image, sa rptition et son scrolling ainsi que sur son positionnement au sein de la page. proprits valeurs effetbackground-color:background-image:background-repeat:background-attachment:background-position:transparent / hexadecimal;none / urlno-repeat / repeat-x / repeat-yscroll / fixed left / right / center / top / bottom / pixel / pourcentageCouleurImageImg repetitionImg scrollingImg positionnement.bkg{ background-color : transparent;background-image : url(images/bkg-base.jpg);background-repeat : no-repeat;background-attachment: fixed; background-position : left top; }RACCOURCI : avec background: il est possible de spcifier plusieurs proprits dun coup. Il faut alors placer la suite et dans lordre les ventuels couleurs, images, rptitions, scrolling et position..bkg{background: transparent url(images/bkg-base.jpg) no-repeat fixed left top;}21. CSS / Les proprits78HTML, Javascript, XHTML & CSSVI. PROPRIETES DES BLOCS BORDURES ET MARGESUn BLOC ou une BOITE (un paragraphe, un titre, une table) dfinie par sa largeur et, cas chant, sa hauteur est entour de trois zones de lintrieur vers lextrieur : Largeur et hauteur : width et height Ces deux proprits permettent dajuster la largeur et la hauteur dun bloc. Attention toutefois utiliser height avec parcimonie, le contenant dun bloc tant toujours prioritaire sur la dfinition de la valeur.proprits valeurs effetwidth:height: auto, pourcentage, valeur;auto, pourcentage, valeur;Largeur Hauteur La marge extrieure ou marginproprits valeurs effetmargin-top:margin-right:margin-bottom:margin-left:auto / pourcentage / valeurauto / pourcentage / valeurauto / pourcentage / valeurauto / pourcentage / valeurMarge ext. hauteMarge ext. droiteMarge ext. basseMarge ext. gauche La marge intrieure ou paddingproprits valeurs effetpadding-top: padding-right: padding-bottom:padding-left:auto / pourcentage / valeurauto / pourcentage / valeurauto / pourcentage / valeurauto / pourcentage / valeurMarge int. hauteMarge int. droiteMarge int. basseMarge int. gauche La bordure ou borderEn utilisant les proprits de type border-ct-, il est possible dintervenir sur chacun dentre eux sparment mais il est largement prfrable dutiliser border tout court.proprits valeurs effetborder-width: border-color:border-style: border-top-_: border-right-_: border-bottom-_:border-left-_:thin / medium / thick / valeurrgb / hexadecimale / nominativenone / solid / dotted / dashed / double / groove / ridge / inset / outsetvariable dfinirvariable dfinirvariable dfinirvariable dfinirEpaisseurCouleur StyleBord hautBord droitBord basBord gauche21. CSS / Les proprits79HTML, Javascript, XHTML & CSSDonc, pour un mme bloc dfini, nous obtiendrons....bloc{ width : auto; height : auto;padding-top : auto;padding-right : auto;padding-bottom: auto;padding-left : auto;margin-top : auto;margin-right : auto;margin-bottom : auto;margin-left : auto; border-width : 1px;border-color : black;border-style : solid;}RACCOURCI : Les caractristiques de bloc permettent de spcifier leurs proprits respectives dun coup. Il faut alors les placer la suite et dans lordre (dans le sens des aiguilles dune montre, en partant de midi).bloc{ width : auto; height : auto;padding : auto auto auto auto;margin : auto auto auto auto;border : 1px black solid;}Dans le cas de padding: et margin: si on ne met que deux longueurs elles dfinissent les marges haute et basse dune part et gauche et droite dautre part si on nen met quune, les quatre marges sont gales. 21. CSS / Les proprits80HTML, Javascript, XHTML & CSSVI. PROPRIETES POUR BODYMaintenant que nous avons vu la plupart des proprits les plus importantes des CSS, il est utile de souligner quafin de faciliter lintgration des lments les plus rcurrents de votre page, nombre dentre elles sont directement applicables la balise body de cette dernire !body{font : normal normal normal 12px sans-serif; text-align : justify;line-height : normal;text-indent : inherit;text-transform : none;text-decoration : none;word-spacing : inherit;letter-spacing : inherit;color : #000;background : transparent url(images/bkg.jpg) repeat-y center top; margin : 0;padding : 0;}21. CSS / Les proprits81HTML, Javascript, XHTML & CSS22. CSS / Cascades et conflits dhritageComme nous lavons vu dans les gnralits, une feuille de style scrit dans le langage appel CSS, pour Cascading Style Sheet. Le terme cascading souligne une proprit importante du langage ; ses caractristiques de prsentations se propagent en cascade dun lment ses fils. Pour mmoire Le style en ligne lemporte sur la feuille de style interne La feuille de style interne lemporte sur la feuille de style externe.Mais aussi Les ID lemportent sur les CLASS Les CLASS lemportent sur les slecteurs contextuels, pseudo-class et pseudo elementsOn peut aussi considrer limportance des CSS en fonction des valeurs de leurs spcificits qui ont pour effet de donner une importance diffrente chaque rgle.ID : spc. 100 / CLASS : spc. 10 / Slecteur contextuels : spc. 1 / Rgles hrites : spc. 0Quest ce que lhritage ?Cest le mcanisme par lequel les styles sappliquent un lment, mais aussi ses descendants.Prenons exemple sur la structure dune page htmlEn haut de la hirarchie se trouve la balise html qui contient la balise body qui contient dautres lments Si html est lascendant de lensemble (aussi appel lment racine), body est lascendant de tout ce que montre le navigateur.Mme si quelques proprits ne sont pas hrits (comme border par exemple), la plupart du temps pour optimiser le code beaucoup de paramtres hritent de leur parent par dfaut (la couleur darrire plan du body sera la mme pour toutes les couleurs darrire-plan de la page) sauf si une dclaration contradictoire est faite ensuiteNB : En CSS, si vous souhaitez quun lment prenne le dessus sur tout le reste, il faut alors utiliser le paramtre de rgle importante", cest--dire que cette dernire doit tre suivie de !important.P.dark {color:#333 !important;}82HTML, Javascript, XHTML & CSS23. CSS / PositionnementsI. GENERALITSII. BOITE DE TYPE BLOCIII. BOITE DE TYPE EN LIGNEIV. POSITIONS 1. Positionnement relatif 2. Positionnement absolu 3. Positionnement fixe 4. Position flottante 4.1 Gnralits 4.2 Dbordement et spacer 4.3 Une variante du spacer V. CONCLUSION83HTML, Javascript, XHTML & CSSI. GENERALITSPar dfaut, les navigateurs affichent les botes issues du document html dans lordre du flux normal. Pour reprsenter le positionnement en flux normal, on peut imaginer le navigateur parcourant (logiquement) la page de code HTML du dbut la fin et retranscrivant son contenu au fur et mesure des balises rencontres. Comme dans la lecture dun texte, il procde verticalement, commenant en haut de lcran pour aller jusquen bas, et horizontalement de gauche droite, sur la totalit de lespace disponible et ncessaire en largeur comme en hauteur.II. BOITE DE TYPE BLOCPar dfaut, les botes de type bloc seront affiches dans une succession verticale. Les principales balises crant des botes bloc sont :La balise divLe paragraphe pLes titres h1, h2, h3, h4, h5, h6Les listes et lments de liste ul, ol, liPrenons par exemple deux blocs diffrencis par leur couleur :HTMLUne bote jauneUne bote verteCSS.jaune {margin-left : auto;margin-right : auto;width : 200px;background-color : #ffff00;}.verte {margin-left : auto;margin-right : auto;width : 200px;background-color : #00ff00;}III. BOITE DE TYPE EN LIGNEPar dfaut, les botes de type en-ligne sont affiches dans une succession horizontale.Les principaux lments crant des botes en ligne sont :Llment spanLe lien aLimage imgLes emphases em et strongPrenons par exemple deux portions de texte diffrencies par leur couleur :HTML Une bote jaune Une bote verteCSS.jaune {margin-left : auto;margin-right : auto;width : 200px;background-color : #ffff00;}.verte {margin-left : auto;margin-right : auto;width : 200px;background-color : #00ff00;}23. CSS / Positionnements84HTML, Javascript, XHTML & CSSIV. POSITION proprits valeurs effetposition:left: top: bottom:right:staticrelativeabsolutefixedinheritauto / pourcentage / valeurauto / pourcentage / valeurauto / pourcentage / valeurauto / pourcentage / valeurPositionnement habituel (par defaut) de llmentPositionnement par rapport llment prcdentPositionnement par rapport aux bords de la page, dfile avec pagePositionnement par rapport aux bords de la page, ne dfile pas avec pageMme valeur que celle de llment parent Les proprits left, top, bottom, rightSurtout utilises avec le positionnement absolute, ces quatre proprits dfinissent lemplacement dun lment par rapport llment parent. Elles dplacent llment sans changer ses dimensions. Ne confondez pas avec les proprits Margin qui elles modifient les dimensions de llment.1. Positionnement relatifLe positionnement relatif permet dinscrire un contenu en flux normal, puis de le dcaler horizontalement et/ou verticalement. Le contenu suivant nest pas affect par ce dplacement qui peut donc entraner des chevauchements.HTMLLorem bote en position relative ipsum dolor.CSS.relative {position: relative;bottom: 5px;background-color: #ffff00;}Pour illustrer le risque de chevauchement, ajoutons un dcalage vers la droite :CSS. relative_decale{position: relative;bottom: 5px;left: 3em;background-color: #ffff00;}23. CSS / Positionnements85HTML, Javascript, XHTML & CSS2. Positionnement absoluLe positionnement absolu retire totalement du flux le contenu concern : sa position est dtermine par rfrence aux limites du conteneur. Celui-ci peut-tre : Le bloc conteneur initial, dfaut de bote positionne, cest dire le plus souvent la fentre du navigateur. Une bote elle-mme positionne (position relative ou absolue). Ceci savre trs utile en particulier pour : Placer les menus de navigation en fin de page, pour amliorer laccessibilit de votre site en donnant un accs immdiat son contenu dans les navigateurs textes, tout en les faisant apparatre en haut de page ou encore dans une colonne pour les navigateurs graphiques. Crer plusieurs colonnes au positionnement indpendant de lordre dans lequel elles se trouvent en HTML. HTMLLorem ipsumBote jaune en position absolueCSS.verte {position : relative;background-color : #00ff00;}.jaune {position : absolute;top : 10px;right : 10px;background-color : #ffff00;}Invitablement, la bote en position absolue recouvre le contenu de notre paragraphe. Pour lviter, dotons la bote conteneur verte dun remplissage suprieur suffisant :CSS.verte {padding-top : 10px;}23. CSS / Positionnements86HTML, Javascript, XHTML & CSSNous pourrions aussi bien fixer la largeur de la bote jaune et doter le texte de la bote verte dun remplissage droite:CSS.verte {padding-right : 10px;}.jaune {width : 10px;}UTILISATION : UNE MISE EN PAGE TROIS COLONNESLa position absolue offre donc une alternative aux flottants pour raliser des mises en pages plusieurs colonnes. Le cas typique est celui des trois colonnes dont voici le code :HTMLCSS.gauche {width : 15%;position : absolute;top : 5px;left : 5px;border : 1px solid black;}.centre {margin : 5px 20%;padding : 0px 10px;border : 1px solid black;}.droite {width : 15%;position : absolute;top : 5px;right : 5px;border : 1px solid black;}23. CSS / Positionnements87HTML, Javascript, XHTML & CSS3. Positionnement fixeLa seule diffrence avec le positionnement absolu tient au fait que llment fix reste en place mme si la page dfile avec lascenseur.nb : IE6 ne reconnait pas encore ce mode de positionnement...4. Position flottante 4.1 Gnralitsproprits valeurs effetfloat: none / left / rightUne bote flottante est retire du flux normal et place le plus droite ou le plus gauche possible dans son conteneur. Le contenu suivant cette bote flottante scoule le long de celle-ci, dans lespace laiss libre.HTMLUne bote jaune flottantUne bote verte dot dun contenu plus longCSS.jaune {width : 100px;background-color : #ffff00;float : right;}.verte {background-color : #00ff00;}Le navigateur place tout dabord la bote jaune, aligne sur le bord droit de cette partie de notre page, puis reprend le cours normal du flux dans lespace laiss libre sa gauche pour afficher la bote verte. Le flux occupe tout lespace disponible, la bote verte reprend donc toute la largeur de la page sitt passe la limite infrieure de la bote flottante jaune.Dans les navigateurs nappliquant pas la feuille de style (navigateurs texte ou non conformes aux standards), la bote flottante sera simplement inscrite en flux normal avant la bote qui la suit.23. CSS / Positionnements88HTML, Javascript, XHTML & CSS 4.2 Dbordement et spacerReprenons notre exemple, mais inversons les contenus: celui de la bote flottante jaune est prsent plus long que celui de la bote verte :HTMLUne bote jaune flottante dote dun contenu plus longUne bote verteCSSIdemLa bote flottante, plus longue que la bote verte, dborde verticalement plus bas que celle-ci. La solution le spacer (appliqu un lger changement de structure)Il consiste inclure dans la bote verte (place dans une balise prcdant la jaune) un lment bloc au contenu fictif dot de la proprit clear; qui lui interdit dtre adjacent une bote flottante.HTMLUne bote jaune flottant dot dun contenu plus longUne bote verte CSSIdem +.spacer {clear : both;}Le spacer, ne pouvant se placer ct du bloc flottant, se trouve dcal plus bas que celui-ci.proprits valeurs effetclear: none / both / left / right23. CSS / Positionnements89HTML, Javascript, XHTML & CSS4.2 Une variante du spacer Le dfaut du spacer est dintroduire dans le code HTML un contenu fictif des fins de prsentationLorsque la bote adjacente la bote flottante est suivie dune coupure logique dans votre page (nouvelle section de texte), il est prfrable dassocier la proprit clear un contenu rel. La ligne horizontale cre par la balise peut jouer avantageusement ce rle :HTMLUne bote jaune flottant dot dun contenu plus longUne bote verteCSSIdem +hr {clear : both;}Vous pouvez toutefois rendre la balise invisible tout en la laissant agir sur le flux laide de la proprit visibility: hidden; HTMLUne bote jaune flottant dot dun contenu plus longUne bote verteCSSIdem +hr {clear : both;visibility: hidden;}23. CSS / Positionnements90HTML, Javascript, XHTML & CSSUne utilisation des flottantes : les vignettesOn obtient une srie de vignettes pouvant accueillir par exemple des images, les liens dun menu de navigation, etc (ou encore permettant de raliser une mise en page en colonnes) en crant une srie de botes flottantes places dans une bote conteneur servant dlimiter lespace visuel o saffichent les botes flottantes. Elle sadapte automatiquement la largeur daffichage disponible : faute de place droite, une bote flottante sera replace la ligne.HTML bote verte 1 bote verte 2 bote verte 3 etcCSS.conteneur { width : 100%;}.flottante { width : 100px; margin : 2px; background-color : #00ff00; float : left;} V. CONCLUSIONLe positionnement CSS donne donc toute libert dans la mise en page. Compare lutilisation des tableaux, cette technique offre des avantages essentiels : Gestion de la prsentation partir dun document unique pour un nombre quelconque de pages ? Stricte sparation du contenu et de la prsentation, do un contenu mieux structur, dnu de balisage superflu. Meilleure accessibilit, le contenu pouvant tre organis correctement dans les navigateurs non graphiques, tout en tant librement dispos dans les navigateurs graphiques. Elasticit des mises en page obtenues, qui sadaptent plus facilement aux diffrentes configurations des utilisateurs (taille de la zone daffichage, rglages de tailles de caractres). Effets graphiques nouveaux, tels le recouvrement en position fixe/absolue.23. CSS / Positionnements91HTML, Javascript, XHTML & CSS24. CSS / Feuilles de style pour limpressionIl est possible de dire au navigateur dutiliser une feuille de style pour laffichage sur le web et une diffrente pour limpression papier.Pour ce il suffit de crer une premire feuille de style externe pour laffichage sur le web et de la relier la page html dans len-tte comme suit :Ensuite, il faut crer une deuxime feuille de style externe pour laffichage lors de limpression (enlever les barres de navigation, les images inutiles, mettre une couleur de police noire ) et la relier la page html comme ceci :Lorsque lutilisateur demandera imprimer la page, ou mme faire un aperu avant impression, cest cette feuille de style qui sera prise en compte.92HTML, Javascript, XHTML & CSS25. CSS / Trucs & astucesI. APPLIQUER DEUX CLASSES UNE BALISEII. FONTES SPECIFIQUESIII. PALLIER LE PROBLME DE LA LARGEUR DE BOTE DANS IE PCIV. CENTRER LES LMENTS DANS LA PAGE, HORIZONTALEMENTV. CENTRER LE CONTENU DUNE PAGE EN POSITION ABSOLUEVI. COLORATION DES ASCENSEURS DANS LES PAGES (PC SEULEMENT)VII. EMPCHER LA COLORATION DES ASCENSEURS DANS LES PAGES (PC SEULEMENT)VIII. FAIRE DFILER DES IMAGES HORIZONTALEMENT DANS UN DIV IX. FAIRE DES OMBRES PORTES SUR VOS BOTES93HTML, Javascript, XHTML & CSSI. APPLIQUER DEUX CLASSES UNE BALISEIl est possible dappliquer une ou plusieurs classes une balise HTML. Il suffit de sparer les noms des classes par un espace, le tout entre guillemets.II. FONTES SPECIFIQUESVous voulez absolument vos titres (par exemple) dans une police trs spcifique que trs peu dutilisateurs verront car ils nauront pas la police en question. La seule solution est donc une imageMon titre h1{background : url(titreimage.gif) no-repeat;height : hauteur de limage ; } III. PALLIER LE PROBLME DE LA LARGEUR DE BOTE DANS IE PCDans IE 6 PC la bordure et le remplissage sont lintrieur de llment, alors que dans les autres navigateurs ils sont lextrieur de llment. ...#box{width : 100px;border : 5px;padding : 20px} Donc la bote fera 150px (100px + 2 fois 5px des bordures + 2 fois 20 px de remplissage) dans IE6 PC et 100px dans les autres.Une solution simple consiste donner la largeur de la bote de 150px, et lintrieur dutiliser un qui lui aura les paramtres de remplissage et bordure. ... #box{width : 150px}#box div{border : 5px;padding : 20px}25. Trucs et astuces94HTML, Javascript, XHTML & CSSIV. CENTRER LES LMENTS DANS LA PAGE, HORIZONTALEMENTIl faut donner aux marges de droite et gauche les proprits : auto;Rajouter : text-align:center; dans llment conteneur, ici le BODY. Cependant lattribut text-align est hrit. Pour pallier ce problme, remettez un text-align:left; dans llment du contenu. body { margin : 50px 0px; padding : 0px; text-align : center; } #Content { width : 500px; margin : 0px auto; text-align : left; padding : 15px; border : 1px dashed #333; background-color : #eee; } V. CENTRER LE CONTENU DUNE PAGE EN POSITION ABSOLUELastuce est dutiliser une marge gauche ngative : position:absolute; left:50%;Puis la marge gauche est dfinie loppos de la moiti de la largeur de la bote : margin-left:-266px;body {Margin :0px; Padding :0px;}#Content { position : absolute; left : 50%; width : 500px; margin-top : 50px; margin-left : -266px; padding : 15px; border : 1px dashed #333;background-color : #eee;}VI. COLORATION DES ASCENSEURS DANS LES PAGES (PC SEULEMENT)body, html {scrollbar-face-color : #000000;scrollbar-shadow-color : #000000;scrollbar-highlight-color : #000000;scrollbar-3dlight-color : #000000;scrollbar-darkshadow-color : #000000;scrollbar-track-color : #000000;scrollbar-arrow-color : #000000;}25. Trucs et astuces95HTML, Javascript, XHTML & CSSVII. EMPCHER LA COLORATION DES ASCENSEURS DANS LES PAGES (PC SEULEMENT)body, html {scrollbar-face-color : ThreeDFace !important;scrollbar-shadow-color : ThreeDDarkShadow !important;scrollbar-highlight-color : ThreeDHighlight !important;scrollbar-3dlight-color : ThreeDLightShadow !important;scrollbar-darkshadow-color : ThreeDDarkShadow !important;scrollbar-track-color : Scrollbar !important;scrollbar-arrow-color : ButtonText !important;}VIII. FAIRE DFILER DES IMAGES HORIZONTALEMENT DANS UN DIV #boite {margin : 0;padding : 0px;height : 87px;width : 309px;background-color : #fff;overflow : auto;white-space : nowrap;}#image {display : inline;height : 100px;padding : 0px;}25. Trucs et astuces96HTML, Javascript, XHTML & CSSIX. FAIRE DES OMBRES PORTES SUR VOS BOTESDans le html, le externe correspond lombre. Elle devra avoir une couleur lgrement plus fonce que linterne Le contenu de ma bote ici #ombre{background-color : #ccc; margin : 3em 0 3em 5em;padding : 1,5em;}#contenu {background-color : #ffd;border : thin solid #999; margin : -3em 0 0 -3em;padding : 1.5em;} 25. Trucs et astuces97HTML, Javascript, XHTML & CSS26. Lexique gnralAccessibilit web Laccessibilit web cest mettre le web et ses services la disposition de tous les individus, quel que soit leur matriel ou logiciel, leur infrastructure rseau, leur langue maternelle, leur culture, leur localisation gographique, ou leurs aptitudes physiques ou mentales.Rendre les sites web accessibles, autorise, en thorie, laccs linformation, aux services (rservation de billet de train, de place de concerts, dachats en ligne...) pour les personnes en situation de handicap temporaire ou permanent ainsi que pour toutes les personnes ges. Le consortium W3C tablit des standards trs prcis pour sassurer de laccessibilit du web.Agence webAgence de communication multimdia, spcialise dans le conseil, la conception, lintgration et le dveloppement dapplications web. Les agences web constituent une nouvelle forme de prestataires de services : elles regroupent des personnes spcialises dans des activits telles que la conception de sites web, le marketing relationnel, le dveloppement et lintgration dapplications de commerce lectronique.Une agence web peut prendre en charge tout ou partie dun projet Internet. Issue du monde du service et de la communication, elle se caractrise par lexprience acquise et les mthodologies appliques. Elle veut rpondre lensemble des nouveaux besoins rencontrs par les entreprises qui dveloppent une stratgie daffaires lectroniques. Elle offre gnralement trois comptences : un ple conseil, un ple ingnierie en charge de la ralisation du site et enfin un ple communication.Bande passanteLa bande passante correspond la quantit maximale de donnes quune voie de communication peut transmettre par seconde. Elle est calcule en bits par seconde (bit/s), cest--dire en se servant dune unit qui mesure aussi le dbit et la vitesse de transmission des donnes. La bande passante peut devenir ainsi une indication de vitesse et de dbit. Cest pour cela que, dans certains contextes, on remplace en anglais le terme bandwidth par throughput et, en franais, le terme bande passante par dbit.Base de donnes Une base de donnes est un ensemble structur et organis permettant le stockage de grandes quantits dinformations afin den faciliter lexploitation (ajout, mise jour, recherche de donnes). Une base de donnes se traduit physiquement par un ensemble de fichiers sur disque.98HTML, Javascript, XHTML & CSSCSS (Cascading Style Sheets)Le langage CSS (Cascading Style Sheets : feuilles de style en cascade) est utilis pour dcrire la prsentation dun document structur crit en HTML ou en XML, et cest le World Wide Web Consortium (W3C) qui en a la direction.CSS est utilis pour dfinir les couleurs, les polices, le rendu, et dautres caractristiques lies la prsentation dun document. Lobjectif est de bien sparer la structure (crite en HTML ou similaire) et la prsentation (en CSS) du document. Cette sparation fournit un certain nombre de bnfices, permettant damliorer laccessibilit, de changer plus facilement de structure et de prsentation, et de rduire la complexit de larchitecture dun document.Enfin, CSS permet de sadapter aux caractristiques du rcepteur. HTML ne dcrit que larchitecture interne, et CSS dcrit tous les aspects de la prsentation. CSS peut dfinir couleur, police, alignement de texte, taille, position, mais aussi le formatage non visuel, comme la vitesse laquelle le document doit tre lu par des lecteurs de texte.Ainsi, les avantages des feuilles de style sont multiples : La structure du document et la prsentation sont grs dans des fichiers spars. La conception dun document se fait dans un premier temps sans se soucier de la prsentation, ce qui permet dtre plus efficace. Dans le cas dun site Internet, la prsentation est uniformise : Les documents (pages html) font rfrence la (aux) mme(s) feuille(s) de styles. Cette caractristique permet de plus un relookage rapide. Un mme document peut donner le choix entre plusieurs feuilles de style (impression ou lecture lcran par exemple). Certains navigateurs web permettent daccder facilement un choix de feuilles de style. Le code HTML est considrablement rduit en taille et en complexit, puisquil ne contient plus de balises de prsentation.Design graphiqueProcd de cration et de dveloppement dune ou de plusieurs images visant harmoniser lenvironnement visuel propos lusager. Le design demande de la recherche, du modelage, des ajustements et du re-design.Design interactifProcd de cration et de dveloppement graphique, audio, textuel et anim dune prsentation visant crer une interactivit entre lusager et le systme propos. Ce faisant, le site web ou le logiciel prend constemment en compte les actions de linteracteur, et produit ainsi un contenu ou ralise un objectif.Design webLe design web dsigne la cration du support visuel destination dun site web. Il sagit dune phase prpondrante dans la conception dun tel site. Lidentit dun site web aprs tre conceptualise sera transforme en lignes de code et images pour safficher dans un fureteur web.Comme pour linfographie et le graphisme, le design web na pas encore acquit son indpendance part entire comme activit artistique. Les raisons sont nombreuses, autant que les affinits quelle exige ; le design web concerne la cration de la charte graphique, linterface et la navigation du site, larborescence. Ce qui demande de nombreuse comptence en graphisme, programmation, animation.Lobjet du design web est de valoriser limage du propritaire du site par le biais dlments graphiques afin den renforcer son identit visuelle, nanmoins plusieurs contraintes lie lergonomie rduisent les possibilits. Un site doit avant tout rpondre aux attentes des utilisateurs. Gnralement un compromis doit tre trouv entre le graphisme et la sobrit ncessaires la lecture et la navigation.26. Lexique gnral99HTML, Javascript, XHTML & CSSFormulaire webEn informatique, un formulaire est un espace de saisie dans linterface utilisateur, pouvant comporter plusieurs zones, ou champs " : on peut y saisir du texte, cocher des cases, effectuer un choix dans une liste de termes prdfinis, appuyer sur des boutons, etc. Ces zones de saisie assurent linteractivit entre le client (par exemple, le navigateur de linternaute) et le serveur (par exemple, la machine qui hberge les pages web sur internet).Les boutons des formulaires permettent de lancer des actions prdfinies par lauteur des pages. Ces actions sont des scripts (javascript, PHP, Perl, CGI...) qui envoient les donnes saisies au serveur. Ce dernier les traite et renvoie une rponse lutilisateur via la page web.HTMLLangage de balisage de texte qui permet la cration de documents hypertextes affichables par un navigateur Web.Le langage HTML est une application de la norme ISO-SGML (Standard Generalized Markup Language) et a t dfini par le CERN (Centre europen de recherche nuclaire).HTTPLe Hypertext Transfer Protocol, abrg HTTP, littralement protocole de transfert hypertexte ", est un protocole de communication informatique client-serveur dvelopp pour le World Wide Web. Il est utilis pour transfrer les documents (document HTML, image, feuille de style, etc.) entre le serveur HTTP et le navigateur Web lorsquun visiteur consulte un site Web.HTTPS (Secured) est la variante du HTTP scuris avec les protocoles SSL ou TLS. Il permet au visiteur de vrifier lidentit du site auquel il accde grce un certificat dauthentification. Il permet galement de chiffrer la communication. Il est gnralement utilis pour les transactions financires en ligne : commerce lectronique, banque en ligne, courtage en ligne, etc.InteractivitLinteractivit est la composante grce laquelle un logiciel ou un site internet prend constamment en compte les actions de linteracteur.Linteractivit est souvent associe aux technologies permettant des changes homme-machine o la conduite et le droulement de la situation est li a des processus de rtroaction, de collaboration, de coopration entre les acteurs qui produisent ainsi un contenu, ralisent un objectif, ou plus simplement modifient et adaptent leur comportement.Elle distingue une communication interactive qui sopposerait une communication sens unique, sans raction du destinataire, sans feedback.InterfaceUne interface permet dchanger des informations entre lutilisateur humain et la machine. Pour que cette communication soit la plus simple possible, on utilise diffrents lments.Les priphriques dentre, comme le clavier, la souris, ou le scanner permettent lhomme de donner des renseignements ou des ordres la machine. Les priphriques de sortie comme lcran, des diodes ou limprimante permettent la machine de rpondre aux ordres et dafficher des informations.26. Lexique gnral100HTML, Javascript, XHTML & CSSInternetInternet est le nom donn au rseau informatique mondial, reposant sur le systme dadresses global des protocoles de communication TCP/IP (Transmission Control Protocol/Internet Protocol) et qui rend accessible au public des services comme le courrier lectronique et le World Wide Web.Lusage courant fait rfrence Internet de diffrentes manires. Outre les recommandations officielles, il nest pas rare de rencontrer les termes suivants : le Net " ou le net ", Internet ", lInternet ", le rseau des rseaux " ou plus simplement le rseau " ou le Rseau " dclin parfois en Le rseau ".Certains termes sont utiliss tort pour faire rfrence Internet, par exemple : la Toile ", le web " ou le Web " (the Web en anglais), mais cela dsigne le Web et non pas Internet. Cette confusion entre web et net existe aussi en anglais.IntranetRseau informatique priv, lintrieur dune organisation, qui utilise les protocoles de communication et les technologies du rseau Internet.Un intranet est un rseau priv ne contenant en fait quun seul site. Par analogie avec site Internet (ou site Web), correspondant au site public dun organisme ou dune entreprise accessible sur le rseau Internet, on utilise parfois site intranet pour parler du site priv accessible uniquement linterne par le personnel dun organisme ou dune entreprise.JavaScriptJavaScript est un langage de programmation de type script, utilisant les objets, principalement utilis dans les pages Web.JavaScript a t cr en 1995 par Brendan Eich pour Netscape Communications Corporation. Il est apparu pour la premire fois dans les versions btas de Netscape Navigator 2.0.Dabord appel LiveScript, il a t rebaptis JavaScript et est dcrit comme un complment Java dans un communiqu de presse commun de Netscape et Sun Microsystems, dat du 4 dcembre 1995. Cette initiative a contribu crer auprs du public une certaine confusion entre les deux langages, proches syntaxiquement mais pas du tout dans leurs concepts fondamentaux, qui perdure encore aujourdhui.Le propos de JavaScript est de manipuler de faon simple des objets, au sens informatique, fournis par une application hte.JavaScript est aujourdhui dfini par la norme ECMA-262, aussi connue sous lappellation ECMAScript. La troisime dition dECMA-262 parue en 1999 correspond la version 1.5 de JavaScript. Son implmentation par Microsoft porte quant elle le nom de JScript. Il est question dune version JavaScript 1.6 supporte par la version 1.5 de Firefox.Du code JavaScript peut tre intgr directement au sein des pages Web, pour y tre excut sur le poste client. Cest alors le navigateur Web qui prend en charge lexcution de ces petits bouts de programmes appels scripts.Gnralement, JavaScript sert contrler les donnes saisies dans des formulaires HTML, ou interagir avec le document HTML via linterface DOM, fournie par le navigateur (on parle alors parfois dHTML dynamique). Il est aussi utilis pour raliser des services dynamiques, parfois futiles ou strictement cosmtiques.26. Lexique gnral101HTML, Javascript, XHTML & CSSLangage de programmationLangage artificiel comprenant un ensemble de caractres, de symboles et de mots rgis par des rgles qui permettent de les assembler, utilis pour donner des instructions un ordinateur.Lune des principales qualits dun langage de programmation est la portabilit qui permet un logiciel dvelopp dans un langage de programmation grande portabilit, de fonctionner sur diffrents types de systmes informatiques.Le terme langage de programmation " recouvre une vaste panoplie, allant du langage machine form dinstructions binaires, aux langages de haut niveau dont la forme se rapproche des langages naturels.Lien hypertexteConnexion activable la demande sur le web, reliant des donnes textuelles ayant une relation de complmentarit les unes avec les autres, et ce, o quelles se trouvent dans Internet.Dans les pages Web, la prsence dun lien hypertexte est signale visuellement par son ancre qui peut tre une partie de phrase ou un mot souligns ou de couleur diffrente de celle du texte, ou encore une image, une icne, un graphique.Navigateur webLogiciel client capable dexploiter les ressources hypertextes et hypermdias du Web ainsi que les ressources dInternet dans son ensemble, qui permet donc la recherche dinformation et laccs cette information.Internet Explorer, Mozilla Firefox, Netscape Communicator et Opera sont des exemples de navigateurs Web.Protocole FTPProtocole de transfert de fichiers qui permet de tlcharger une copie de donnes choisies par linternaute, dun ordinateur un autre, selon le modle client-serveur.Les donnes tlcharges peuvent prendre la forme de logiciels, de fichiers de toute nature (textes, graphiques, images, sons, etc.).Le sigle FTP est galement utilis pour dnommer les applications qui fonctionnent selon le protocole FTP, ainsi que les transferts effectus grce ce protocole.Rfrencement Le rfrencement est lensemble des techniques qui permettent dinscrire un site dans les moteurs de recherche, les rpertoires ou dans les annuaires. Le rfrencement est souvent associ avec le positionnement qui, quant lui, reprsente lart doptimiser la place du site dans les rponses fournies par les moteurs de recherche.Le rfrencement dun site web se fait, selon loutil de recherche, en prcisant ladresse URL du site et ladresse de courriel du webmestre, ou en ajoutant dautres informations telles que le titre de la page daccueil, un texte descriptif, une catgorie, quelques mots cls, etc.26. Lexique gnral102HTML, Javascript, XHTML & CSSURLChane de caractres normaliss servant identifier et localiser des ressources consultables sur Internet et y accder laide dun navigateur.Une adresse URL (http://www.exemple.com/ressources/fichier.html), comprend le nom du protocole de communication (http) ou encore ftp, telnet, mailto, news, etc., des protocoles associs dautres services offerts sur Internet ;le nom du serveur (www.exemple.com), nom de domaine de lordinateur hbergeant la ressource demande ; le chemin daccs la ressource (/ressources/fichier) qui permet au serveur de connatre lemplacement de la ressource (cest--dire le rpertoire, le sous-rpertoire et le nom du fichier demand) et lextension (html) qui indique le format dans lequel la page a t cre.Dans une adresse URL, la barre oblique permet de spcifier un sous-rpertoire.W3C (World Wide Web Consortium)Le World Wide Web Consortium, abrg W3C, est un consortium fond en octobre 1994 pour promouvoir la compatibilit des technologies du World Wide Web telles que HTML, XHTML, XML, CSS, PNG, SVG et SOAP. Le W3C nmet pas des normes, mais des recommandations. Sa gestion est assure conjointement par le Massachusetts Institute of Technology (MIT) aux tats-Unis, le European Research Consortium for Informatics and Mathematics (ERCIM) en Europe (auparavant lInstitut national de recherche en informatique et en automatique franais (INRIA)) et lUniversit Keio au Japon. Un document W3C traverse plusieurs tapes avant de devenir une Recommandation : Working Draft (brouillon de travail) Last Call (dernier appel) Proposed Recommendation (recommandation propose) Candidate Recommendation (candidat la recommandation)Une recommandation peut tre mise jour par errata dit sparment, jusqu laccumulation de suffisamment de modifications ; une nouvelle version de la recommandation est alors publie (XML en est aujourdhui sa troisime version). Parfois, une recommandation recommence le processus, comme RDF. Le W3C publie aussi des remarques informatives qui ne sont pas destines tre traites en tant que norme. Le consortium laisse le soin aux fabricants de suivre les recommandations. Contrairement lOrganisation internationale de normalisation ou dautres corps internationaux de standardisation, le W3C ne possde pas de programme de certification, et beaucoup de standards ne dfinissent pas formellement un niveau de conformit. Ils sont ainsi souvent implants partiellement.World Wide Web Le World Wide Web (ou le Web, la Toile, WWW ou encore W3), littralement la toile (daraigne) mondiale ", est un systme hypertexte public rparti sur Internet et qui permet de consulter, avec un navigateur Web, des pages Web mises en ligne dans des sites Web. Limage de la toile vient des hyperliens qui lient les pages Web entre elles.Le Web a rendu les mdias grand public attentifs Internet. Depuis, il est frquemment confondu avec ce dernier. Ce nest cependant quun des systmes disponibles sur Internet, avec le courrier lectronique, Usenet, la messagerie instantane, etc. Internet prcde le Web de nombreuses annes.26. Lexique gnral