// HTML, Javascript XHTML & CSS

Transcription

1 design graphique / web design // HTML, Javascript XHTML & CSS version 1.0 date 28 / 04 / 2010 auteur Loïc Swiny contact [email protected]

2 // sommaire HTML 01. Introduction au langage HTML 02. Introduction aux principes généraux du webdesign et première maquette 03. HTML, les bases 04. La balise <BODY> 05. Texte / alignement, formatage, listes 06. Liens 07. Images & Map 08. Tableaux 09. Frames & I-Frames 10. Formulaires 11. Récapitulatif des balises les plus courantes JAVASCRIPT 13. Introduction au Javascript 14. Menus dynamiques 15. Popup 16. Full screen 17. Restriction d accès au contenu XHTML 18. Introduction au XHTML CSS 19. Introduction et principe de base 20. Sélecteurs 21. Propriétés 22. Cascades et conflits d héritage 23. Positionnement 24. Feuille de style pour l impression 25. Trucs & astuces LEXIQUE GENERAL // 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. 97 2

3 01. Introduction au langage HTML I. HISTORIQUE II. qui utilise le html? III. apprendre le html 3

4 01. Introduction au HTML Le HTML ou HyperTexte Markup Language est le langage de publication utilisé sur le World Wide Web. Très facile à maîtriser, il s agit tout simplement d un langage à balises («tags" au format ASCII), délimitées entre crochets et affinées dans leur formes par des attributs ; ces instructions placées dans un simple fichier texte au format.html (ou.htm) sont ensuite interprétées par les différents navigateurs pour en faire apparaitre le contenu sur votre écran I. HISTORIQUE C est Tim Berners-Lee qui a écrit et développé ce langage pour répondre aux besoins du système d échange d informations qu il venait d inventer : le World Wide Web. Pour expliciter physiquement ces échanges entre machine, un protocole spécifique a été mis en place, c est le HTTP (Hyper Text Transfert Protocol) ; moyen simple et efficace d accéder sur un réseau à des documents liés entre eux par des hyperliens. Ecrits en HTML, les documents s enchaînent les uns les autres par un simple clic de souris et sont transportés jusqu au lecteur grâce au protocole HTTP. Un leger point historique / HTML 1.0 Le language HTML voit le jour au au CERN (Centre d études et de recherches nucléaires) situé près de Genève. Il y a peu de balises : on peut cependant insérer des images, créer des liens hypertextes, mais tout cela en noir, sur un fond gris, et sans interface graphique! 1995 / HTML 2.0 Cette norme voit apparaître des possibilités de mise en page avec des tableaux / HTML 3.0 De nouvelles balises et de nouveaux attributs sont insérées. Listes, Cartes cliquables, Frames / HTML 4.0 Outre de nouvelles commandes (I-Frames), un nouveau principe révolutionnaire de mise en page séparant le fond et la forme est mis en place, ce sont les feuilles de style en cascade (css / cascading style sheet) / XHTML Mise à jour majeure du langage qui devient XHTML. C est l avènement du Web / HTML 5.0 (?) La mise en place d une nouvelle standardisation du langage XHTML est prévue pour la nouvelle décennie à venir. Que nous réserve t elle?! II. qui utilise le html? Avant d arriver au stade de produit fini permettant la consultation par l internaute des informations qu il contient, la vie d un site Internet se construit en suivant plusieurs étapes dont la construction HTML n est qu un des jalons. Dans le process moderne de la construction d un produit de communication interactive, ce sont les intégrateurs, situés juste après les infographistes et juste avant les developpeurs (ingénieurs informaticiens responsables de l implémentation des fonctions dynamiques du produit) qui sont en charge de la construction des pages HTML. Ils y incluent textes, images, documents flash, sons et vidéos en fonction des recommandations graphiques des studios créatifs et c est à eux tout particulièrement que l on demande une excellente connaissance du code. 4

5 01. Introduction au HTML III. apprendre le html Si vous n avez jamais consulté le code source d une 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 élémentaire ainsi que par sa simplicité physique, apprendre le HTML pour integrer un ensemble de pages web et les rendre cohérentes entre elles ne nécessite aucune compétence 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 d enregistrer le fichier au format «texte seulement", avec l extension.html. On peut également utiliser des éditeurs à interface d intégration accompagnée de type Dreamweaver, mais il est toutefois recommandé de bien connaître la base du langage pour les utiliser correctement afin d en optimiser les flux de production. A l arrivée, la phase la plus délicate de la construction d un produit de communication interactive ne réside pas dans son intégration mais plus dans la compréhension et l application des process et méthodes qui vont rendre sa création plus fonctionnelle, fluide et efficace. Ce que nous allons voir ensemble... 5

6 02. Introduction auw principes généraux du webdesign & première maquette I. GENERALITES II. III. IV. un peu d ordre et de méthode le contenu l architecture 1. Arborescence 2. Liens 3. Modularité V. la forme 1. Zoning 2. Format technique 3. Format visuel 6

7 02. Introduction au webdesign I. GENERALITES Avant de se lancer dans l habillage graphique ou même l intégration d un produit, il convient de réfléchir à sa finalité et d en définir le contenu, l architecture, et la forme générale... Pour ce faire des outils sont à votre disposition : le brief créatif, le benchmark de referencement sectoriel, une bonne connaissance de la typologie, des contraintes d intégration et de l architecture de l information des sites internet (cf. Methodologie des metiers du design interactif). Ajoutez à l ensemble un gout prononcé pour la culture design et ses publications, votre curiosité naturelle, une bibliothèque de sources graphiques bien fournie (images bitmap & vectorielles, fontes, brosses photoshop...) et un peu de talent... mais n oubliez jamais qu au début tout commence toujours par une page blanche et un stylo pour esquisser vos premières recherches. II. un peu d ordre et de méthode Avant même d envisager toute activité productive, prenez le temps d adopter une logique de traitement et d ordonnancement de vos dossiers de travail. Travailler avec une nomenclature de classification redondante vous permettra de gagner un temps précieux lors du développement de projets futurs. Bien qu en la matière il n existe aucune règle pré-établie, il vous est conseillé d adopter la nomenclature suivante : # production # année # n de dossier_nom du client # admin tous documents de travail fournis ou crées (brief, benchmark, charte graphique etc...) # logos docs.jpg basse définition en racine # eps docs illustrator # psd docs photoshop # maquette docs.jpg en racine # psd docs photoshop # print docs.jpg basse définition en racine # indd docs indesign # eps docs illustrator # pdf docs exportés 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. l architecture) Quitte à optimiser votre process de developpement, vous pouvez même créer un répertoire «_dossier type" contenant les dossiers pré-crées que vous n aurez plus qu a dupliquer er renommer à la création de tout nouveau projet 7

8 02. Introduction au webdesign III. le contenu La définition du contenu de tout produit de communication interactive est certainement un des points les plus important à dégager en amont du projet. C est sa définition exhaustive qui vous permettra de calibrer correctement le contenu de chaque rubrique et donc de le valoriser de façon la plus efficace possible. Il n est en effet rien de plus désagréable à consulter qu une page au contenu mal calibré, soit parce que trop «vide" soit parce que trop «riche" en information. Une bonne définition des contenus donnera à vos visiteurs l envie de revenir sur votre produit, c est donc une phase de construction à ne surtout pas négliger. Maîtrisez le sujet abordé : Même si vous n êtes pas familier du produit traité, prenez le temps de vous renseigner sur ce dernier, vous serez pâr la suite plus à l aise lorsqu il s agira d architecturer l info. Dégagez les principales rubriques : Soyez à même de proposer un rubriquage le plus cohérent possible par rapport au produit à traiter ; ce faisant en devancant la demande du client vous eviterez l ecueil d une arborescence mal équilibrée. Préparez vos sources : Réunissez et contrôlez textes, paragraphes, orthographe, images, contenus interactifs... plus vous aurez une vision complète de la quantité de contenu à integrer, plus votre produit sera cohérent et efficace. IV. l architecture Sous peine de courir très vite à la catastrophe (dans le cas de produits à la profondeur conséquente et/ou évolutive) et de perdre un temps précieux lors de la phase d intégration, dégagez au plus tôt l architecture physique (arborescence) de votre site. 1. Préparez l arborescence de votre site. Dans le dossier «web". Il s agit en fait de la création/localisation physique des dossiers qui vont accueillir vos pages. A l instar de votre dossier de travail une bonne nomenclature de dénomination de toute arborescence est essentielle à l accompagnement d un travail propre et clair. # web index.html fichier html de la page d accueil 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 UNIQUEMENT NB : En raison des standards referentiels (google et autres moteurs de recherche), votre première page (page d accueil, homepage,...), doit se nommer index.html. Il est de plus préférable que les noms de vos pages é dossiers ne dépassent pas 8 caractères. 8

9 02. Introduction au webdesign 2. Spécifiez les liens vers vos différentes 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 dernière lorsque vous la formaliserez physiquement dans votre code (cf. Methodologie des metiers du design interactif / 08. Architecture de l information). 3. Modularité du produit. En fonction de sa profondeur et/ou de la commande client, pensez à architecturer votre produit pour qu il puisse, au cas échéant, accueillir de nouvelles rubriques. Dans cette optique votre maquette se doit de ne pas être trop «rigide" graphiquement parlant. V. la forme 1. Zoning Afin de faciliter l intégration du code avec un éditeur html, n hésitez pas à réaliser un gabarit structurant de votre future maquette faisant apparaitre le «zoning" de votre produit ; ceci également dans le but d affecter aux éléments des côtes en pixels pour une mise en page soignée. Dessinez un premier croquis de votre produit Spécifiez les côtes en pixels 2. Format technique Le developpement d un produit de communication interactive, de par la finalité de son support de diffusion (écran) ne s envisage pas de la même manière qu un produit imprimé. Voiçi un rappel des différences principales à prendre en considération lors de la création de la maquette : (cf. Methodologie des metiers du design interactif / 09. Contraintes html des projets de communication interactive) 9

10 02. Introduction au webdesign 3. Format visuel A contrario de l édition de documents destinés à l imprimerie (dans un format fixe donc), l un des paramètres les plus importants à prendre en compte lors de la construction d un produit de communication interactive est la modularité du support final. En effet, dans l univers de la création interactive vous allez vous heurter à la modularité de... La multiplicité des plateformes MAC / PC La multiplicité des système d exploitation MAC OS X / WINDOWS XP, Vista, Seven / LINUX La multiplicité navigateurs OPERA / SAFARI / FIREFOX / INTERNET EXPLORER 6, 7, 8 La diversité des définitions d écrans 1024x768 / 1152x864 / 1280x1024 / 1600x pour ne citer que les paramètres les plus importants à considerer. Nous aurions pû aussi citer la puissance des connexions proposées par les fournisseurs d accès ou bien encore la qualité d affichage des couleurs à l écran et la puissance des machines. Il est donc essentiel lors de la création d une interface de penser à tout ces paramètres pour éviter de vous confronter à un conflit (voir une impossibilité) d intégration d élément lors de la découpe de ce dernier. Pour eviter les migraines, et dans le cadre de la construction d un produit classique à diffusion d information verticale (ceci excluant de facto les formats et expérimentation plus exotiques) il est conseillé de travailler à partir d un gabarit au format max de 1600x1200 pixels incluant une «zone utile" centrée de 1000 pixels de large

11 03. HTML, les bases I. introduction II. III. IV. LE squelette d une page 1. L en tête / HEAD 2. Le corps / BODY les balises 1. Généralités 2. Balises BLOC vs. INLINE les attributs V. quelques regles simples pour débuter 11

12 03. HTML, les bases I. introduction Comme nous l avons 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) délimitées entre crochets et affinées dans leur formes par des attributs. A l aide de ces attributs et des valeurs insérées, vous allez définir la forme de votre texte (gras, italique, polices...), inclure des images, des animations, de la vidéo, du son, et des liens vers d autres pages... qui seront ensuite interprétées par les différents navigateurs pour en faire apparaitre le contenu sur votre écran II. LE squelette d une page Une page HTML est divisée en deux parties : l en-tête (HEAD) et le corps (BODY) de la page... <html> <head> <title> Le titre de la page</title> </head> <body> <font face="arial" size="1">texte</font> </body> </html> 1. L en tête / HEAD Invisible à l écran, cette partie regroupe toutes les informations nécessaires à un bon affichage de votre page par les différents navigateurs Internet. Dans cette partie vont se joindre : La balise <title> : Pour le titre de la page <title>titre de la page</title> Les balises <meta> : Aussi appellées «meta-balises". Principalement utilisées pour l indexation et le référencement des sites par les moteurs de recherche, ces dernières sont devenues facultatives, voire obsolètes. Les seules balises absolument nécessaires à une page sont TITLE et DESCRIPTION. <meta title="nom du site"> <meta description="description du site"> Le character set : HTML etant optimisé pour une utilisation en langue anglaise (langage n utilisant pas d accent), il vous est plus que fortement conseillé d appliquer une méta balise de définition d alphabet prenant en compte ces derniers sous peine d être condamné à les signigfier physiquement dans le code <meta http-equiv="content-type" content="text/html; charset=iso "> L appel des feuilles de style : <style type="text/css">...</style> pour un style interne à la page et appliqué à une balise de type inline <link rel="stylesheet" type="text/css" href="monstyle.css"> pour une feuille de style externe à la page L appel des javascript : Utilisé pour les parties dynamiques de votre page <script src="javascript.js" type="text/javascript" charset="iso "></script> 2. Le corps / BODY C est la partie où, toujours grâce à l utilisation des balises, vous intégrerez les différents éléments de votre page visibles à l écran : texte, hyperliens, images, animations, vidéo, son... 12

13 03. HTML, les bases III. les balises 1. Généralités Les balises sont des séquences de caractères interprétées par les navigateurs Web. Lorsque l on regarde le contenu d une page HTML, on repère assez facilement les balises HTML, ce sont les portions de texte semblables à celle-ci : <B>ceci est du gras</b> Une balise est facilement identifiable, elle est constituée d un mot (ou plusieurs dans certain cas) encadrée par les signes inférieur < et supérieur >. La plupart des balises doivent être fermées. La majorité des balises servent à la mise en page (texte en gras, tableaux...), mais toutes ne sont pas dédiées à la mise en page des documents, en effet, le HTML permet par exemple de donner des informations sur le document lui même (informations qui ne seront pas affichées), d appeler des fichiers externes comme des images, des animations Flash, des sons... Etant donné que c est un langage de description, il n est pas sensible à la casse, en effet on peut aussi bien écrire : <B>mot en gras</b> que <b>mot en gras</b> 2. Balises BLOC vs. INLINE Bien que la définition de cette notion soit un peu prématurée à ce stade (nous y reviendrons lorsque nous aborderons l utilisation des CSS), il s agit d une notion essentielle à prendre en considération. Dans l immédiat gardez en memoire qu il y a deux type de balises : les balises de type BLOC : dont le développement vertical est généralement dédié aux définitions structurelles des contenus de votre page (listes, tableaux, etc...) <TABLE> <TR> </TR> </TABLE> <TD> </TD> les balises de type INLINE : dont le développement horizontal est généralement dédié aux définitions d apparence des contenus de votre page (images, textes, etc...) <FONT SIZE="1" COLOR="black"><I><B>texte</B></I></FONT> 13

14 03. HTML, les bases IV. les attributs Ce sont les spécifications particulières de chaque balise (dont nous verrons la liste afférente à chacune lorsque abordé). Ils permettent de modifier l effet de la balise ou précisent son action. Les attributs figurent après le nom des balises dans les < > ; ils sont séparés par des espaces et leur valeur est indiquée entre guillemets. <font face="arial" size="1" >texte</font> Dans cet exemple concernant une ligne de texte, cette dernière a reçu une balise de définition de police de caractère font qui elle-même a reçu un attribut de famille face et de taille size V. quelques regles simples pour débuter Pratiquement toutes les balises vont par paire (balises d ouverture et de fermeture) par exemple : <b> et </b> Ecrivez vos balises en minuscules, cela peut faciliter le transfert de votre code vers le XHTML Essayer d aérer votre code au maximum en utilisant la tabulation de votre clavier à chaque implementation descendante de code (cf. exemple de squelette de page au début de ce dossier) 14

15 04. La balise <BODY> Structure fondatrice des éléments qui seront visibles sur votre page, la balise <BODY> est à même de recevoir un certain nombre d attributs dont certains sont incontournables balise attribut valeurs effet <body> topmargin pixel définit les marges haute et basse de la page (pour I.E) leftmargin pixel définit les marges gauche et droite de la page (pour I.E) marginwidth marginheight bgcolor background style bgproperties scroll text link alink vlink pixel pixel hexadecimale url relatif url absolu background-repeat: no-repeat; background-repeat: x; background-repeat: y; fixed yes / no / auto hexadecimale hexadecimale hexadecimale hexadecimale définit les marges haute et basse de la page définit les marges gauche et droite de la page définit la couleur du fond définit la source relative de l image de fond définit la source absolue de l image de fond définit la non répétition du bkg (css intégrée) définit la répétition du bkg sur l axe X (css intégrée) définit la répétition du bkg sur l axe Y (css intégrée) définit si la capacité du fond à scroller avec la page définit la présence de la barre de scroll sur la page définit la couleur du texte pour la page définit la couleur des liens pour la page définit la couleur des liens actifs pour la page définit la couleur des liens visités pour la page <BODY leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" bgcolor="#aaaaaa" background="images/ bkg.jpg" style="background-repeat:no-repeat;" bgproperties="fixed" link="#ff0000" alink="#33ff00" vlink="#ff9900" > 15

16 05. Le texte I. Les styles II. III. IV. Les accents Les en têtes Les paragraphes V. Alignement / FERRAGE VI. VII. Les lignes horizontales Les listes 1. Les listes non numérotées 2. Les listes numérotées 16

17 05. Le texte Au sein d une page HTML le texte s implémente dans le <body> de cette dernière. Ce dernier se doit d être bien entendu lui aussi codé. Voici les codes de mise en page de texte les plus courant I. Les styles gras <b> ou <strong> <strong>texte</strong> italique <I> ou <em> <em>texte</em> souligné <u> <u>texte</u> exposant <sup> 11<sup>e</sup> siècle indice <sub> H<sub>2</sup>O Bien entendu, les styles peuvent se cumuler pour une même portion de texte. Dans ce cas, l ordre de définition des balises de style importe peu. gras & italique <em> et <strong> <em><strong>texte<strong></em> ou <strong><em>texte</em><strong> II. Les accents Même si l utilisation judicieuse d un character set Européen (gérant les les accents) placé en meta balise dans votre header est censé vous eviter ce genre de désagrément... il faut savoir que dans l absolu les accents se codent! il se peut donc que vous ayez besoin de coder un accent au format ascii ou d utiliser un caractère spécial. Pour ce faire, le principe est le suivant commencez par & puis la lettre à accentuer puis le codage de l accent et terminez par un point virgule. Ainsi pour é : vous écrirez é Ci-dessous un tableau récapitulatif des principaux codes : é é espace forcé è è à à ô ô â â ï ï ü ü œ œ ç ç ««õ õ "» Pour une liste plus exhaustive des charactères spéciaux : 17

18 05. Le texte III. Les en têtes Utilisés pour le titrage, ils changent la taille des caractères et génèrent un retour à la ligne automatique. h1 h2 h3 h4 h5 h6 <h1>titre</h1> <h2>titre</h2> <h3>titre</h3> <h4>titre</h4> <h5>titre</h5> <h6>titre</h6> IV. Les paragraphes Un document lu, c est avant tout un document aéré : 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 même que les sauts de ligne et les tabulations ne sont pas pris en compte. Il faudra donc les signifier par des balises spécifiques dédiés. Lorsque vous développez vos pages, il existe deux balises qui permettent d obtenir, soit un saut de ligne, soit le commencement d un nouveau paragraphe. La balise <p> exprime le début d un paragraphe et génère un double espace. La balise de fermeture </p> est facultative La balise <br> effectue un retour à la ligne et génère un simple espace. <br> est une balise orpheline et donc ne se ferme pas.. V. Alignement / Ferrage Pour ferrer un ou plusieurs bloc de texte, on appliquera l attribut align soit aux en-têtes, soit au paragraphe. En l absence de l une ou l autre de ces balises il est toujours possible de ferrer un texte en utilisant la balise universelle <div>... balise attribut valeurs effet <Hx> <p> <div> align left right center justify aligne le texte sur la marge de gauche aligne le texte sur la marge de droite centre le texte entre les marges justifie le texte ferrage avec en-tête : <h1 align="center">titre</h1> ferrage avec paragraphe : <p align="left">texte</p> ferrage avec balise universelle : <div align="justify">texte</div> NB : Par défaut, comme toujours, l alignement du texte se fait sur la gauche. 18

19 05. Le texte VI. Les lignes horizontales Utiliser des lignes ou des filets horizontaux est très pratique pour séparer les différentes parties de votre document. Cette méthode s obtient avec la balise <hr> et ne nécessite pas de balise de fermeture. Elle possède plusieurs attributs : balise attribut valeurs effet <hr> align left aligne la ligne horizontale à gauche right aligne la ligne horizontale à droite center aligne la ligne horizontale au centre width size color noshade pixel, % de 1 à 10 hexadecimale sans définit la largeur de la ligne définit l épaisseur de la ligne définit la couleur de la ligne (uniquement I.E) s il est présent, l effet d ombre 3D est annulé <hr width="200" align="left" color="#ff0000" noshade> VII. LISTES La 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 géré de façon plus complète avec les CSS 1. Les listes non numérotées <ul> Avec <ul> pour «unordered list" les élements apparaissant entre les balises <li> 2. Les listes numérotées <ol> Avec <ol> pour «ordered list" les élements apparaissant entre les balises <li> balise attribut valeurs effet <ul> type disc puce circle cercle square carré <ol> sans type sans I A a chiffres arabes par défaut chiffres rommains lettres alphabétiques majuscules lettres alphabétiques minuscules <ul type="disc"> <li>premier</li> <li>deuxième</li> </ul> <ol type="a"> <li>premier</li> <li>deuxième</li> </ol> 19

20 06. Les liens I. GENERALITES II. III. IV. DENOMINATIFS DES FICHIERS ET DOSSIERS LIENS RELATIFS LIENS ABSOLUS V. liens internes à la page VI. CAS particulier, l attribut «MAIlto" 20

21 06. Les liens I. GENERALITES A l intérieur de votre document, la balise <a> permet d établir un lien hypertexte (l essence même du Web) vers un autre document ou encore vers l extérieur (vers un autre site web). Tout ce qui se trouve entre la balise <a> et </a> sera considéré un lien et apparaîtra par défaut souligné à l écran. balise attribut valeurs effet <a> href url relatif définit la source relative du document url absolu définit la source absolue du document target title name style _self _blank _parent _top variable à définir variable à définir variable à définir appelle la page cible dans le cadre d appel appelle la page cible dans une nouvelle fenêtre appelle la page cible dans le cadre parent (de niveau immédiatement supérieur) appelle la page cible dans la fenêtre hôte (par-dessus le FRAMESET) définit une description du lien (identique à l attribut ALT pour une image) définit une identité au lien définit une feuille de style <a href="fichier.html" title="nomdufichier" target="_blank">texte</a> II. DENOMINATIFS DES FICHIERS ET DOSSIERS Les noms de vos fichiers et de vos dossiers vont constituer vos urls ; sachant que c est un des premiers endroits que les moteurs de recherche vont analyser pour trouver les mots-clés, 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 d être trouvée si l url est portfolio/index.htm que 02/index.htm Les accents, les espaces et les caractères de ponctuation sont INTERDITS dans les noms de dossiers et de fichiers, il est néanmoins possible d inclure des tirets et des tirets bas (underscore). Il est recommandé de n utiliser que des minuscules, car une fois vos pages sur un serveur, les urls deviennent sensibles à la casse. index.htm" N EST PAS la même chose que INDEX.htm" 21

22 06. Les liens III. LIENS RELATIFS Lorsqu on crée des liens il faut indiquer le chemin du fichier. Si on se trouve dans le même répertoire, il suffit d indiquer le nom de la page. <a href="ficher.html">texte</a> Si le fichier se trouve dans un autre dossier, il faut indiquer le chemin d accès au fichier. En cas d arborescence descendante <a href="dossier/fichier.html">texte</a> En cas d arborescence montante <a href="../index.html">texte</a> Ici../ permet de remonter d un niveau dans l arborescence. En cas d arborescence à 2 niveaux <a href="../../index.html">texte</a> Pour aller d un fichier qui se trouve dans un dossier vers un fichier qui se trouve dans un autre dossier, il faut monter l arborescence pour redescendre. <a href="../dossier/fichier.html">texte</a> Ici../ permet de sortir du dossier en cours, puis il faut redescendre dans l arborescence et indiquer dans quel dossier on veut aller. IV. LIENS ABSOLUS Généralement lorsque l on cherche à placer un lien vers un site externe à celui qui est en cours de développement, il faut indiquer ce dernier dans sa version complète et conforme au protocole HTTP (ou autre). Le principe de création des liens absolus est le même que pour les liens relatifs. <a href=" V. liens internes à la page Les liens internes permettent de se déplacer à l intérieur d un même fichier html sans que le visiteur soit obligé de faire «scroller" la fenêtre du navigateur. L utilisateur va donc cliquer sur un lien et il sera amené vers la destination du lien interne. Pour cela deux étapes sont nécessaires : Définir la cible de destination du lien grace à l attribut name <a name="haut">texte</a> et associer ce même nom de destination au lien précédé d un diese. <a href="#haut">lien vers le haut de la page</a> Il n est pas nécessaire, dans ce cas précis, de mettre un texte ou une image, entre les balises d ouverture et de fermeture, mais le nom ne doit pas contenir d espaces, ni d accents, ni de caractères spéciaux. 22

23 06. Les liens VI. cas particulier, l attribut «MAIlto" Cas particulier parmis les attributs de la balise <a>. Il s agit d un lien de messagerie qui fait apparaître le client de messagerie du navigateur (Outlook Express pour IE par exemple). <a href="mailto:[email protected]">contact</a> Pour prédéfinir l objet du mail vous pouvez rajouter?subject= au corps de l attibut... <a href="mailto:[email protected]?subject=l objet de votre mail">contact</a> 23

24 07. Les images I. balise <img> et attributs II. Les cartes cliquables (ou map) 24

25 07. Les images I. balise <img> et attributs Pour afficher une image dans une page HTML on utilise la balise <img> assortie de ses attributs afférents, dont les plus courants sont présentés ci après Généralement les éléments graphique d une même page sont stockés dans le repertoire «images" d une même rubrique. balise attribut valeurs effet <img> src url relatif ou absolu à définir définit la source relative ou absolue du document name width height align alt border bordercolor hspace vspace variable à définir pixel pixel left right top middle bottom variable à définir pixel hexadecimale pixel pixel définit une identité à l image définit la largeur de l image définit la hauteur de l image définit le positionnement de l image dans l espace définit une description de l image définit un cadre à l image définit une couleur au cadre de l image définit l espace horizontal entre l image et le contenu définit un espace vertical entre l image et le contenu <img src="images/nom.jpg" name="statue" width="75" height="100" border="0" alt="image"> 25

26 07. Les images II. Les cartes cliquables (ou map) Il s agit de définir des zones sensibles (donc cliquables) dans une image. Il faut alors calculer les coordonnées de ces zones. Il est possible de faire des zones carrées ou rectangulaires, des cercles et des polygones. Ici un carré, un cercle et un polygone... Les coordonnées du carré/rectangle sont les coordonnées x et y des coins supérieurs gauche et inférieur droit. ici : 198, 5, 297, 221 Les coordonnées du cercle sont celles du centre et du rayon. ici : 119, 73, 65 Les coordonnées du polygone sont les points x et y de chaque point. ici : 4,169, 51, 179, 102, 198, 131, 211, 144, 222, 5, 219 Dans la page il faut à la fois décrire la carte... <map name="lecture"> <area shape="rect" coords="198,5,297,221" href="fleurs.html"> <area shape="circle" coords="119,73,65" href="jeune_fille.html"> <area shape="poly" coords="4,169,51,179,102,198,131,211,144,222,5,219" href="journal.html"> </map>... et dans l appel d image, relier l image à ce code : <img src="lire.jpg" width="300" height="225" border="0" usemap="#lecture"> NB : Il est possible de rajouter l attribut alt sur chacune des zones. 26

27 08. Les tableaux I. generalités II. TABLEAUX AVEC FUSION 1. L attribut colspan 2. L attribut rowspan 2. Les attributs colspan & rowspan 27

28 08. Les tableaux I. generalités La balise <table> permet d insérer un tableau à votre page et c est l une des balises les plus utilisées. En effet les tableaux permettent une meilleure présentation des informations, nombreux sont les sites qui utilisent les tableaux pour obtenir une mise en page de type journal. La création des tableaux se passe essentiellement autour de 3 balises : <table> <tr> <td> le corps du tableau une ligne du tableau une cellule du tableau Bien entendu, toutes ces balises doivent êtres fermées pour indiquer la fin du tableau, d une ligne ou d une cellule. <table> <tr> </tr> </ table > <td> cell1 </td> balise attribut valeurs effet <table> cellpadding pixel définit l espace entre le bord du tableau et les cellules cellspacing pixel définit l espace entre les cellules width height pixel / pourcentage pixel / pourcentage définit la largeur du tableau définit la hauteur du tableau bgcolor background hexadecimale url relatif ou absolu à définir définit la couleur de fond du tableau définit une image en arrière plan du tableau border bordercolor bordercolorlight bordercolordark pixel hexadecimale hexadecimale hexadecimale définit la taille de la bordure définit la couleur de la bordure définit la couleur aux points culminants de la bordure définit la couleur de l ombre de la bordure <tr> & <td> width height pixel / pourcentage pixel / pourcentage définit la largeur de la cellule définit la hauteur de la cellule bgcolor background hexadecimale url relatif ou absolu à définir définit la couleur de fond de la ligne et/ou de la cellule définit une image en arrière plan de la cellule align valign left / center / right top / middle / bottom définit l alignement horizontal du contenu définit l alignement vertical du contenu colspan rowspan unité numérique unité numérique définit la fusion de 2 cellules adjacentes sur une ligne définit la fusion de 2 cellules adjacentes sur une colonne 28

29 08. Les tableaux En principe, la hauteur et la largeur d une cellule s adaptent automatiquement aux données (texte ou image), néanmoins, vous pouvez définir une hauteur et une largeur pour un tableau ou une cellule ; l espacement des cellules et la taille des bordures peut être aussi paramétrés. Gardez à l esprit que La taille du tableau se détermine en pixels ou en pourcentage. La taille fixe a pour avantage de garder la mise en page, la taille en pourcentage s adaptera à la taille de l écran mais risque de modifier la mise en page. La taille des cellules s adapte à leur contenu. <table cellspacing="0" cellpadding="0" width="100" height="100" bgcolor="#33cccc" border="0"> <tr bgcolor="#99ffff"> </tr> <tr> </tr> </table> <td align="left" valign="top" width="50" height="50" bgcolor="#996666"> cell 1 </td> <td align="right" valign="top" width="50" height="50"> cell 2 </td> <td align="left" valign="bottom" width="50" height="50"> cell 3 </td> <td align="right" valign="bottom" width="50" height="50"> cell 4 </td> 29

30 08. Les tableaux II. tableaux avec fusion Les lignes et cellules d un tableau peuvent êtres fusionnés, afin d obtenir des zones de mise en forme de contenu modulables et adaptées aux besoins d une maquette. Cette fusion est réalisé avec les attributs colspan et rowspan. Pour fusionner 2 cellules adjacentes sur une ligne, l attribut COLSPAN est requis Pour fusionner 2 cellules adjacentes sur une «colonne ", l attribut ROWSPAN est requis 1. L attribut COLSPAN Sur une ligne : La ligne du haut s étend sur 2 cellules <TABLE width="100" border="1"> <TR> <TD colspan="2">cell 1</TD> </TR> <TR> <TD>cell 2</TD> <TD>cell 3</TD> </TR> </TABLE> cell 1 cell 2 cell 3 Sur plusieurs lignes : La ligne du haut s étend sur 2 cellules même chose pour la ligne du bas <TABLE width="100" border="1"> <TR> <TD colspan="2">cell 1</TD> </TR> <TR> <TD>cell 2</TD> <TD>cell 3</TD> </TR> <TR> <TD colspan="2">cell 4</TD> </TR> cell 1 cell 2 cell 3 cell 4 </TABLE> 2. L attribut ROWSPAN La 1e ligne comporte la cellule 1 qui s étend sur 3 rangées de «colonne". Le terme «colonne" n étant pas tout à fait exact syntaxiquement parlant puisqu il s agit en fait d un ensemble de cellules situées les unes sous les autres <TABLE width="100" border="1"> <TR> <TD rowspan="2">cell 1</TD> <TD>cell 2</TD> </TR> <TR> <TD>cell 3</TD> </TR> </TABLE> cell 1 cell 2 cell 3 30

31 08. Les tableaux 3. Les attributs COLSPAN et ROWSPAN Comme vous pouvez vous en douter, les attributs colspan et rowspan peuvent s utiliser conjointement dans une même construction tabiulaire. Néanmoins prenez garde à la compléxité syntaxique que de telles architectures peuvent engendrer. En fonction de ce que vous choisirez de construire ou une logique et une ecriture irréprochable (à défaut une bonne dose d aspirine) seront requises. <TABLE width="100" border="1"> <TR> <TD rowspan="4">cell 1</TD> <TD colspan="3"> cell 2</TD> </TR> <TR> <TD> cell 3</TD> <TD> cell 4</TD> <TD> cell 5</TD> </TR> <TR> <TD colspan="2"> cell 6</TD> <TD> cell 7</TD> </TR> <TR> <TD> cell 8</TD> <TD colspan="2"> cell 9</TD> </TR> </TABLE> cell 1 cell 2 cell 3 cell 4 cell 5 cell 6 cell 7 cell 8 cell 9 31

32 09. Les frames & I-frames I. generalités 1. Qu est ce que les frames? 2. Comment ca marche? 3. Les attributs ROWS & COLS 4. Les liens appliqués aux frames 5. Compatibilité des navigateurs III. LES I-FRAMES 32

33 09. Les frames I. generalités 1. Qu est ce que les frames? Auparavant les navigateurs ne pouvaient afficher qu un seul fichier HTML, mais on peut désormais diviser en plusieurs zones la page affichée. Ces zones ou fenêtres ou encore cadres se nomment frame. Les frames sont apparues avec la version 3.0.d HTML et même si bon nombre de Webmasters les utilisaient, elles n étaient pas une composante officielle du langage. Après quelques années d utilisation intensives dans la fin de la période pré web 2.0, les frame sont tombés en disgrace pour des raisons d optimisation des protocoles de referencement. Elles ne sont donc presque plus utilisées aujourd hui. Il n en reste pas moins que lorsqu utilisées avec parcimonie et à bon escient, elles sont toujours un outil fort pratique. 2. Comment ca marche? Dans une page d index, la balise <frameset> prend la place de la balise <body> ; c est elle qui dans un premier temps va définir les cadres, qu ils 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 <html> <head> <title>page avec frames</title> </head> <frameset cols="20,80"> <frame src="zone1.htm" name="zone1"> <frame src="zone2.htm" name="zone2"> </frameset> </html> affichage zone 1 zone 2 construction frameset zone 1 zone 2 Deux frame horizontales et deux frames verticales <html> <head> <title>page avec frames</title> </head> <frameset rows="20,80"> <frame src="zone1.htm" name="zone1"> <frameset cols="20,80"> <frame src="zone2.htm" name="zone2"> <frame src="zone3.htm" name="zone3"> </frameset> </frameset> </html> affichage zone 1 zone 2 zone 3 construction frameset zone 1 frameset zone 2 zone 3 Bien entendu, la famille des balises <frame> va se voir enrichie par un certain nombre d attributs qui vont spécifier le comportement de ces dernières. 33

34 09. Les frames balise attribut valeurs effet <frameset> cols rows pixel / pourcentage pixel / pourcentage définit un format de frameset vertical définit un format de frameset horizontal frameborder border bordercolor yes / no pixel hexadecimale définit une bordure de frameset définit la taille d une bordure de frameset définit la couleur d une bordure de frameset framespacing pixel définit l espace entre les cadres d un frameset <frame> src name url relatif ou absolu à définir variable à définir définit la source relative ou absolue des frames définit une identité à chaque frame frameborder border bordercolor yes / no pixel hexadecimale définit une bordure de frame définit la taille d une bordure de frame définit la couleur d une bordure de frame marginwidth marginheight pixel pixel définit la largeur des marges interieures d une frame définit la hauteur des marges interieures d une frame scrolling yes / no / auto définit l autorisation d attribution d une scrollbar noresize attribut sans valeur interdit le redimenssionement manuel d une frame <html> <head> <title>page avec frames</title> </head> <frameset cols="20,80" frameborder="no" framespacing="10"> <frame src="zone1.htm" name="zone1" frameborder="no" scrolling="no" noresize> <frame src="zone2.htm" name="zone2" frameborder="no" scrolling="auto" noresize> </frameset> </html> 3. Les attributs ROWS & COLS rows et cols définissent le type de cadre, qui peut être horizontal (rows/rangée) ou vertical (cols/colonnes). Ils prennent une serie de valeurs séparées par des virgules. Ces valeurs sont exprimées en pourcentage (valeurs relatives) ou plus généralement en pixel (valeurs absolues). Une valeur «exotique", l étoile (*) fera s ajuster automatiquement la colonne ou la rangée concernée sur l espace maximum laissé par les autre dans l ensemble de frame. <frameset cols="50,*"> 4. Les liens appliqués aux frames Normalement, les pages appelées par des liens s affichent dans la frame où les liens ont été activés, mais l attribut de lien target permet d appeler un cadre par son nom défini avec l attribut name. <a href="index.htm" target="zone1">lien</a> 34

35 09. Les frames 5. Compatibilité des navigateurs Même si il est de plus en plus rare de trouver des navigateurs non compatibles, il faut néanmoins ne pas négliger cet aspect, sous peine de se passer de quelques visiteurs. La technique consiste à utiliser la balise <noframes> qui permet de spécifier un texte HTML en version normale. Entre ces balises il faut donc, théoriquement, développer un deuxième site : vous pouvez pour simplifier le travail préciser des regrets polis et insérer des liens vers les sites officiels des navigateurs pour que le visiteur opte pour une mise à jour. <frameset rows="20,80"> <frame src="zone1.htm" name="zone1"> <frame src="zone2.htm" name="zone2"> </frameset> <noframes> <body> Désolé mais ce site utilise la technique des frames. Merci de faire la mise à jour de votre navigateur. </body> </noframes> III. LES I-FRAMES La technique des cadres locaux s obtient avec la balise <iframe> elle permet d insérer une fenêtre à n importe quel endroit de votre document. Cette fenêtre fera référence à un autre document HTML. La balise <iframe> doit être insérée dans le corps de votre document, c est-à-dire entre <body> et </body>. Elle a les mêmes attributs que la balise <frame> plus les attributs width et height balise attribut valeurs effet <iframe> src url relatif ou absolu à définir définit la source relative ou absolue d une iframe name variable à définir définit une identité à chaque iframe width height frameborder border bordercolor marginwidth marginheight scrolling noresize pixel pixel yes / no pixel hexadecimale pixel pixel yes / no / auto attribut sans valeur définit la largeur d une iframe définit la hauteur d une iframe définit une bordure définit la taille d une bordure définit la couleur d une bordure définit la largeur des marges interieures définit la hauteur des marges interieures définit l autorisation d attribution d une scrollbar interdit le redimenssionement manuel <iframe src="pageinterne.html" width="200" height="200" frameborder="0"></iframe> 35

36 10. Les formulaires I. generalités II. III. CREATION 1. Method 2. Action 3. Enctype les objets de formulaire 1. Champ de texte 2. Boutons radio (radiobox) 3. Cases à cocher (checkbox) 4. Liste déroulante 5. Boite de dialogue 6. Boutons 36

37 10. Les formulaires I. generalités Les formulaires permettent avant tout de faire réagir votre visiteur, de l inviter à laisser ses impressions, ses commentaires. La création des formulaires se réalise grâce à plusieurs champs, dans lesquels le visiteur va entrer une information ou opter pour un choix. L information est ensuite envoyée, à l aide de scripts, sur le serveur qui vous héberge puis renvoyée, dans la plupart des cas, sur l adresse électronique de votre choix. II. CREATION Nous traitons ici la structure du formulaire en html, l envoi des données se faisant par. La balise dédié aux formulaires est <form>. Elle possède 3 attributs : method : method="post" (la plus courante) action : action="mailto:nom@url" (si vous envoyez votre formulaire par ) enctype : enctype="text/plain" 1. Method 2 valeurs sont proposées : POST pour un formulaire classique GET pour (par exemple) définir un moteur de recherche sur votre site 2. Action Adresse le formulaire vers l URL du script CGI (fourni par le serveur qui héberge vos pages), qui accepte l information et vous le retourne suivant les paramètres définis. Les valeurs les plus couramment utilisées sont : «mailto:nom@url" : Pour l envoi du formulaire par le logiciel de messagerie de votre visiteur. «/cgi-bin/mailer" : Pour l envoi du formulaire par le script CGI de votre hébergeur 3. Enctype Cet attribut spécifie le format des données envoyées, dans le cas où un protocole n imposerait pas de format précis. Il possède plusieurs valeurs dont : «text/plain" : Valeur utilisée dans le cas d un formulaire classique «multipart/form-data" : Valeur utilisée dans le cas où le formulaire comprendrait un fichier attaché. Ci-dessous un exemple de code complet : <form method="post" action="mailto:[email protected]?subject=mes questions en html" enctype="text/plain">... </form> 37

38 10. Les formulaires balise attribut valeurs effet <form> method action enctype post text/plain définit le format du formulaire définit l action de transmission des données définit le format des données transmises <input> type size maxlength name value text / radio / checkbox submit / reset pixel pixel variable à définir variable à définir définit le type de champ de saisie (texte ou bouton) définit le nombre de caractères visibles dans le champ définit le nombre de caractères maximum à la saisie définit l identité d un ou de plusieurs champs définit le contenu du champ lors de la réception <select> name variable à définir définit l identité d un ou de plusieurs champs <textarea> name cols rows variable à définir pixel pixel définit le contenu du champ lors de la réception définit la largeur du champ définit la hauteur du champ III. les objets de formulaire 1. Champ de texte Il permet de laisser une courte information (nom, prénom, etc...) <input type="text" size="20" maxlength="40" name="nomduchamp"> 2. Boutons radio (radiobox) Ils ne permettent qu un seul choix. <input type="radio" name="abonnement" value="oui">oui <input type="radio" name="abonnement" value="non">non oui non 3. Cases à cocher (checkbox) Elles permettent un ou plusieurs choix. <input type="checkbox" name="interet" value="musique">musique <input type="checkbox" name="interet" value="danse">danse <input type="checkbox" name="interet" value="informatique">informatique musique danse informatique 38

39 10. Les formulaires 4. Liste déroulante Elle permet de définir un menu à choix multiple. <select name="pays"> <option>france</option> <option>allemagne</option> <option>espagne</option> <option>italie</option> </select> france 5. Boite de dialogue Elle permet d écrire des commentaires sans limitation de nombre de caractères. <textarea cols="20" rows="4" name="commentaires">vos commentaires</textarea> 6. Boutons Pour envoyer le formulaire et annuler les données inscrites dans le formulaire <input type="submit" name="submit" value="envoyer"> <input type="reset" name="reset" value="annuler"> Envoyer Annuler Voici un exemple de formulaire, formaté dans un tableau : 39

40 11. Recapitulatif des balises les plus courantes I. body II. III. IV. texte TITRE / PARAGRAPHE TRAIT HORIZONTAL V. listes VI. VII. VIII. IX. liens images tableaux frames X. i-frames XI. formulaires 40

41 11. Recap des balises I. BODY balise attribut valeurs effet <body> topmargin leftmargin pixel pixel définit les marges haute et basse de la page (pour I.E) définit les marges gauche et droite de la page (pour I.E) marginwidth marginheight bgcolor background style bgproperties scroll text link alink vlink pixel pixel hexadecimale url relatif url absolu background-repeat: no-repeat; background-repeat: x; background-repeat: y; fixed yes / no / auto hexadecimale hexadecimale hexadecimale hexadecimale définit les marges haute et basse de la page définit les marges gauche et droite de la page définit la couleur du fond définit la source relative de l image de fond définit la source absolue de l image de fond définit la non répétition du bkg (css intégrée) définit la répétition du bkg sur l axe X (css intégrée) définit la répétition du bkg sur l axe Y (css intégrée) définit si la capacité du fond à scroller avec la page définit la présence de la barre de scroll sur la page définit la couleur du texte pour la page définit la couleur des liens pour la page définit la couleur des liens actifs pour la page définit la couleur des liens visités pour la page II. texte balise attribut valeurs effet <b> / <strong> <i> / <em> <u> <sup> <sub> / / / / / / / / / / gras italique souligné exposant indice III. TITRE / PARAGRAPHE balise attribut valeurs effet <H1>...<H6> <p> <div> align left right center justify aligne le texte sur la marge de gauche aligne le texte sur la marge de droite centre le texte entre les marges justifie le texte 41

42 11. Recap des balises IV. TRAIT HORIZONTAL balise attribut valeurs effet <hr> align left right center aligne la ligne horizontale à gauche aligne la ligne horizontale à droite aligne la ligne horizontale au centre width size color noshade pixel, % de 1 à 10 hexadecimale sans définit la largeur de la ligne définit l épaisseur de la ligne définit la couleur de la ligne (uniquement I.E) s il est présent, l effet d ombre 3D est annulé V. listes balise attribut valeurs effet <ul> type disc puce circle cercle square carré <ol> sans type sans I A a chiffres arabes par défaut chiffres rommains lettres alphabétiques majuscules lettres alphabétiques minuscules VI. liens balise attribut valeurs effet <a> href url relatif définit la source relative du document url absolu définit la source absolue du document target title name style _self _blank _parent _top variable à définir variable à définir variable à définir appelle la page cible dans le cadre d appel appelle la page cible dans une nouvelle fenêtre appelle la page cible dans le cadre parent (de niveau immédiatement supérieur) appelle la page cible dans la fenêtre hôte (par-dessus le FRAMESET) définit une description du lien (identique à l attribut ALT pour une image) définit une identité au lien définit une feuille de style 42

43 11. Recap des balises VII. images balise attribut valeurs effet <img> src url relatif ou absolu définit la source relative ou absolue du document name width height align alt border bordercolor hspace vspace variable à définir pixel pixel left right top middle bottom variable à définir pixel hexadecimale pixel pixel définit une identité à l image définit la largeur de l image définit la hauteur de l image définit le positionnement de l image dans l espace définit une description de l image définit un cadre à l image définit une couleur au cadre de l image définit l espace horizontal entre l image et le contenu définit un espace vertical entre l image et le contenu VIII. tableaux balise attribut valeurs effet <table> cellpadding pixel définit l espace entre le bord du tableau et les cellules cellspacing pixel définit l espace entre les cellules width height pixel / pourcentage pixel / pourcentage définit la largeur du tableau définit la hauteur du tableau bgcolor background hexadecimale url relatif ou absolu à définir définit la couleur de fond du tableau définit une image en arrière plan du tableau border bordercolor bordercolorlight bordercolordark pixel hexadecimale hexadecimale hexadecimale définit la taille de la bordure définit la couleur de la bordure définit la couleur aux points culminants de la bordure définit la couleur de l ombre de la bordure <tr> & <td> width height pixel / pourcentage pixel / pourcentage définit la largeur de la cellule définit la hauteur de la cellule bgcolor background hexadecimale url relatif ou absolu à définir définit la couleur de fond de la ligne et/ou de la cellule définit une image en arrière plan de la cellule align valign left / center / right top / middle / bottom définit l alignement horizontal du contenu définit l alignement vertical du contenu colspan rowspan unité numérique unité numérique définit la fusion de 2 cellules adjacentes sur une ligne définit la fusion de 2 cellules adjacentes sur une colonne 43

44 11. Recap des balises IX. frames balise attribut valeurs effet <frameset> cols rows pixel / pourcentage pixel / pourcentage définit un format de frameset vertical définit un format de frameset horizontal frameborder border bordercolor yes / no pixel hexadecimale définit une bordure de frameset définit la taille d une bordure de frameset définit la couleur d une bordure de frameset framespacing pixel définit l espace entre les cadres d un frameset <frame> src name url relatif ou absolu à définir variable à définir définit la source relative ou absolue des frames définit une identité à chaque frame frameborder border bordercolor yes / no pixel hexadecimale définit une bordure de frame définit la taille d une bordure de frame définit la couleur d une bordure de frame marginwidth marginheight pixel pixel définit la largeur des marges interieures d une frame définit la hauteur des marges interieures d une frame scrolling yes / no / auto définit l autorisation d attribution d une scrollbar noresize attribut sans valeur interdit le redimenssionement manuel d une frame X. i-frames balise attribut valeurs effet <iframe> src name width height frameborder border bordercolor marginwidth marginheight scrolling noresize url relatif ou absolu à définir variable à définir pixel pixel yes / no pixel hexadecimale pixel pixel yes / no / auto attribut sans valeur définit la source relative ou absolue d une iframe définit une identité à chaque iframe définit la largeur d une iframe définit la hauteur d une iframe définit une bordure définit la taille d une bordure définit la couleur d une bordure définit la largeur des marges interieures définit la hauteur des marges interieures définit l autorisation d attribution d une scrollbar interdit le redimenssionement manuel 44

45 11. Recap des balises XI. formulaires balise attribut valeurs effet <form> method action enctype post text/plain définit le format du formulaire définit l action de transmission des données définit le format des données transmises <input> type size maxlength name value text / radio / checkbox submit / reset pixel pixel variable à définir variable à définir définit le type de champ de saisie (texte ou bouton) définit le nombre de caractères visibles dans le champ définit le nombre de caractères maximum à la saisie définit l identité d un ou de plusieurs champs définit le contenu du champ lors de la réception <select> name variable à définir définit l identité d un ou de plusieurs champs <textarea> name cols rows variable à définir pixel pixel définit le contenu du champ lors de la réception définit la largeur du champ définit la hauteur du champ 45

46 12. Balises obsolètes Avec la migration effective d HTML vers le format XHTML, il existe un grand nombre de balises et/ou d attributs qui sont aujourd hui considérées comme obsolètes car pour la plupart remplacées par du formatage en CSS. Certaines disparaissent, d autres ont changées de syntaxe ; Suivant les recommandations du W3C, il est préférable de ne plus les utiliser. Quelques exemples : <b>...</b> pour du gras est remplacé par <strong>...</strong> <i>...</i> pour l italique est remplacé par <em>...</em> <font size="1">...</font> pour changer la taille du texte. Il y avait 7 tailles de texte, 1,2,3,4,5,6 et 7. <font color="#000000">...</font> pour changer la couleur du texte. Choix de couleur en valeur hexadécimal. <font face="verdana, Arial,sans-serif">...</font> pour changer la police du texte en donnant une liste de police. De même, quelques attributs trouveront leurs équivalence au sein des mêmes CSS (notament les attributs de la balise <BODY>) : ALIGN WIDTH HEIGHT BORDER BACKGROUND BGCOLOR HSPACE et VSPACE LINK, VLINK, ALINK 46

47 13. Javascript I. introduction II. Qu est ce que le Javascript? III. JAVA ou Javascript? IV. A quoi ressemble un code Javascript? 47

48 13. Javascript I. introduction Je ne saurai trop le répéter comme nous l avons évoqué en début d année le but de ces leçons n est pas de vous transformer en ingénieur informaticien. L objectif de cette partie est de vous dégrossir l aspect quelque peu rébarbatif d une 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. Qu est ce que le Javascript? Le Javascript (ne pas confondre avec JAVA) est un langage informatique de type dynamique qui vous sera utile pour améliorer la présentation et l interactivité de vos pages Web. Dynamique? Jusqu ici, toutes vos pages HTML étaient statiques. Cela veut dire que le visiteur pouvait consulter votre site, mais pas plus. Grâce à un langage dynamique, le visiteur peut lui-même «modifier" ou interagir sur certains éléments de votre site. Très utile pour traiter les événements occasionnés par un internaute sur une page web, le Javascript permet la mise en place de menus dynamiques, d ouvrir et/ou fermer des fenêtres «pop-up", de forcer une fenêtre de navigateur à s ouvrir en plein écran, et bien plus encore III. JAVA ou Javascript? Ne pas confondre ces deux langages totalement différents. JAVA est un langage beaucoup plus complexe que Javascript notamment parce que son code source est compilé avant son exécution ce qui assure notamment la confidentialité de ce dernier (on n accède 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 d être décompilé. Un script compilé voit sa source cachée. A l inverse, le Javascript et le HTML sont interprétés, c est-à-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 n ont rien en commun. 48

49 13. Javascript IV. A quoi ressemble un code Javascript? Il s agit de balises que l on place généralement entre les balises <head> et <body> d une page html, mais que l on peut placer presque partout. JavaScript s intègre directement dans votre page HTML entre les deux balises <script> et </script>. De plus, afin de solliciter l interpréteur JavaScript, on précise dans la balise ouvrante : <script langage="javascript"> <html> <head> <title>mon premier script!</title> </head> <script type="text/javascript" langage="javascript">>  </script> <body> </body> </html> Une autre solution d incrémentation consiste à externaliser le «moteur" de votre script. Pour ce faire, il vous faut créer à 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 qu a «appeller" cette partie depuis votre page html en utilisant la ligne de code suivante (toujours placée entre le header et le body) : <script src="script.js" type="text/javascript" charset="iso "></script> 49

50 14. Javascript / menus dynamiques I. Navi simple II. 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) 50

51 14. JS / Menus dynamiques I. Navi simple Il s agit d une construction qui vous est à présent familière. Un tableau faisant apparaître les divers éléments bitmap d une même navigation avec la définition des balises de lien <A HREF="#"><img src="images/navi_01.jpg" border="0"></a> II. Navi dynamique 1. onmouseout, on mouseover Pour rendre ce même menu dynamique par l utilisation du langage Javascript il faudra d abord placer entre le header et le body de la page la balise javascript suivante : <script language="javascript"> 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&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=mm_findobj(n,d.layers[i].document); return x; function MM_nbGroup(event, grpname) //v3.0 var i,img,nbarr,args=mm_nbgroup.arguments; if (event == «init" && args.length > 2) if ((img = MM_findObj(args[2]))!= null &&!img.mm_init) img.mm_init = true; img.mm_up = args[3]; img.mm_dn = img.src; if ((nbarr = document[grpname]) == null) nbarr = document[grpname] = new Array(); nbarr[nbarr.length] = img; for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i]))!= null) if (!img.mm_up) img.mm_up = img.src; img.src = img.mm_dn = args[i+1]; nbarr[nbarr.length] = img; else if (event == «over") document.mm_nbover = nbarr = new Array(); for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i]))!= null) if (!img.mm_up) img.mm_up = img.src; img.src = (img.mm_dn && args[i+2])? args[i+2] : args[i+1]; nbarr[nbarr.length] = img; else if (event == «out" ) for (i=0; i < document.mm_nbover.length; i++) img = document.mm_nbover[i]; img.src = (img.mm_dn)? img.mm_dn : img.mm_up; else if (event == «down") if ((nbarr = document[grpname])!= null) for (i=0; i < nbarr.length; i++) img=nbarr[i]; img.src = img.mm_up; img.mm_dn = 0; document[grpname] = nbarr = new Array(); for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i]))!= null) if (!img.mm_up) img.mm_up = img.src; img.src = img.mm_dn = args[i+1]; nbarr[nbarr.length] = img; </script> 51

52 14. JS / Menus dynamiques PAS DE PANIQUE! Même si cette balise et ses attributs peuvent vous sembler d une approche quelque peu barbare, ne vous inquiétez pas de cette dernière. Il s agit tout simplement du «moteur " de votre script et ce dernier a été généré par fireworks. Vous n aurez JAMAIS à intervenir dessus, gardez juste en mémoire que son incrémentation est nécessaire au bon fonctionnement de votre menu dynamique Une fois ce moteur mis en place (en interne où en externe), la première chose à faire pour rendre actif les différents éléments bitmap (les images) de votre navigation va être dans la balise <img> de donner un attribut de nom à chacun de ces derniers (en général le même que l image concernée) : <A HREF="#"><img name="navi_01" src="images/navi_01.jpg" border="0"></a> Attention cet attribut sera unique pour chaque image. L étape suivante sera de définir les attributs de changement d état de vos images, pour cela nous utiliserons les attributs onmouseout et onmouseover que nous placerons dans la balise <a> après l attribut href. <A HREF="#" onmouseout="mm_nbgroup( out );" onmouseover="mm_nbgroup( over, navi_01, images/navi_01_ f2.jpg, images/navi_01_f2.jpg,1);"> Notez bien que si l attribut onmouseout est strictement invariable, l attribut onmouseover devra faire l objet de modifications récurrentes pour chaque image concernée. Tout d abord la mise à l équivalent de l attribut «name " appelé par le code javascript onmouseover="mm_nbgroup( over, navi_01, images/navi_01_f2.jpg, images/navi_01_f2.jpg,1);" Puis l appel de la deuxième image qui apparaîtra lors du passage de la souris sur l image onmouseover="mm_nbgroup( over, navi_01, images/navi_01_f2.jpg, images/navi_01_f2.jpg,1);" 2. onmouseout, on mouseover multiple Pour ce cas de figure qui peut s avérer très pratique à l occasion il s agit tout simplement de doubler l appel d image au sein du onmouseover <A HREF="#" onmouseout="mm_nbgroup( out );" onmouseover="mm_nbgroup( over, navi_01, image s/navi_01_f2.jpg, images/navi_01_f2.jpg, navi_04, images/navi_01_f2.jpg, images/navi_01_ f2.jpg,1);"><img name="navi_04" src="images/navi_01.jpg" border="0"></a> Attention! Notez bien que pour éviter la confusion dans l appel de l image, Javascript demande à ce que l appel de l image concernée ne soit pas le même que la première appelée, d où l intérêt de la définition d un attribut «name " unique à chaque image. <A HREF="#" onmouseout="mm_nbgroup( out );" onmouseover="mm_nbgroup( over, navi_01, images/navi_01_ f2.jpg, images/navi_01_f2.jpg, navi_04, images/navi_01_f2.jpg, images/navi_01_f2.jpg,1);"><img name="navi_04" src="images/navi_01.jpg" border="0"></a> 52

53 14. JS / Menus dynamiques 3. Navi dynamique / onmouseout, on mouseover, onclick (2 images) Si vous souhaitez qu une image cliquée faisant apparaître son deuxième état reste apparente sur votre barre de navigation vous allez devoir utiliser l attribut onclick à l intérieur de votre balise <a> à la suite des deux précédents attributs <A HREF="#" onmouseout="mm_nbgroup( out );" onmouseover="mm_nbgroup( over, navi_01, images/navi_01_ f2.jpg, images/navi_01_f2.jpg,1);" onclick="mm_nbgroup( down, navbar1, navi_01, images/navi_01_ f2.jpg,1);"><img name="navi_01" src="images/navi_01.jpg" border="0"></a> C est cet attribut qui définira quelle image reste affichée après l action. Attention! Dans le cas présenté, l attribut Javascript navbar1 est le dénominatif de votre barre de navigation. Le script global prendra donc en considération tous les autres éléments utilisant ce même attribut comme faisant partie de la même navigation. 4. Navi dynamique / onmouseout, on mouseover, onclick (3 images) Si vous souhaitez qu une image cliquée fasse apparaître un troisième état il vous suffira de changer l appel de l image à afficher dans ce même attribut onclick <A HREF="#" onmouseout="mm_nbgroup( out );" onmouseover="mm_nbgroup( over, navi_01, images/ navi_01_f2.jpg, images/navi_01_f2.jpg,1);" onclick="mm_nbgroup( down, navbar1, navi_01, images/navi_01_ f3.jpg,1);"><img name="navi_01" src="images/navi_01.jpg" border="0"></a> NB : Pour plus de facilité de compréhension de votre code lorsque vous l incrémenterez, il vous est conseiller de normer l appellation de vos différentes images selon le protocole suivant Pour onmouseout > image_01.jpg Pour onmouseover > image_01_f2.jpg Pour onclick > image_01_f3.jpg 53

54 15. Javascript / popup I. Qu est ce qu une POPUP? II. III. IV. Attributs Ouverture d une popup simple 1. avec javascript séparé 2. avec javascript inclu Fermeture d une popup 54

55 15. JS / Popup I. Qu est ce qu une POPUP? A l instar d une fenêtre de navigateur qui s ouvrirait suite à la définition d un attribut de target _blank dans une balise d action, une pop up est une fenêtre de navigateur paramétrable qui s ouvre à l extérieur de la page consultée. La définition de ses différents paramètres va faire l objet de l utilisation du langage Javascript. II. Attributs attribut valeurs effet width height pixel pixel définit la largeur de la fenêtre définit la hauteur de la fenêtre left top location directories history status toolbar menubar scrollbars fullscreen resizable pixel pixel yes / no yes / no yes / no yes / no yes / no yes / no yes / no yes / no yes / no définit la position horizontale sur l écran définit la position verticale sur l écran définit l affichage de la barre d adresse définit l affichage de la barre de dossiers définit l affichage de la barre d historique définit l affichage de la barre de statut définit l affichage de la barre d outils définit l affichage de la barre de menu définit l affichage des ascenseurs définit l ouverture de la fenêtre en plein écran définit le redimensionnement de la fenêtre III. Ouverture d une popup simple Il existe plusieurs méthodes pour ouvrir une fenêtre popup. La première méthode fait appel à un code séparé de la balise d action, la seconde est incluse dans cette même balise. 1. avec javascript séparé Avant de définir votre action il faudra placer ce code entre le header et le body de votre page <script language="javascript"> function OpenPopup(POP) window.open (POP, popup, width=300,height=200,directories=no,history=no,status=no,toolbar=no,menubar=no,scro llbars=no,resizable=no ); </script> Ce code définira l appel à la popup ainsi que ses différents attributs ensuite via un «onclick " il n y a plus qu à faire appel au code sus défini lors de l établissement du lien : <A HREF="#" onclick="javascript:openpopup( popup.htm );"><img src="images/btn.jpg" border="0"></a><br> 55

56 15. JS / Popup 2. avec javascript inclu La méthode est similaire à la première sauf que cette fois ci nous allons inclure directement le code javascript à l intérieur de la balise <a> <A HREF="#" onclick="javascript:window.open( popup.htm, popup, width=300,height=200,toolbar=no,directories=n o,status=no,menubar=no,scrollbars=no,history=no,resizable=no );"><img src="images/btn.jpg" border="0"></a> Ces deux méthodes fonctionnent aussi bien avec du texte qu avec une image Attention : Il est à noter toutefois que l utilisation de la première méthode est plus indiquée lorsqu il s agit d appeler une popup depuis un document flash. Dans ce cas de figure le code action script à utiliser sur le bouton concérné sera : on (release) geturl(«javascript:openpopup( popup.htm );"); IV. Fermeture d une popup Dans la fenetre concernée et sans ajout de code séparé il suffira d inclure un onclick circonstancié à la définition de l action <a href="#" onclick="javascript:parent.close();"><img src="images/btn.jpg" border="0"></a> 56

57 16. Javascript / fullscreen Très simple d utilisation et très pratique pour «forcer " l ouverture d une page en plein écran ATTENTION : Nonobstant que ce script ne fonctionne qu avec IE, il n est pas toujours très apprécié 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 : <script language="javascript"> function fullscreen() window.open(«fenetre.htm","","fullscreen=yes, scrollbars=auto") </script> Puis lors de la définition de votre lien faites appel à la fonction scriptée : <A HREF="#" onclick="fullscreen()">appel DE FENETRE FULL SCREEN</A> 57

58 17. Javascript / restriction d accès au contenu Très pratique à utiliser avec des clients aux tendances paranoïaques Inclure ce code entre le header et le body : <SCRIPT language="javascript">  </SCRIPT> Ce dernier «invalidera " les options de récupération d élément du bouton droit de la souris. Bien entendu cette option n empêchera en rien un utilisateur averti d aller récupérer la source via l option affichage/ source du menu de son navigateur et de récupérer ce qui l intéresse au sein de la page. 58

59 18. Introduction au XHTML I. GENERALITES II. III. IV. le DOCTYPE / DTD 1. Qu est ce que c est? 2. Les differentes DTD 3. Choisir sa DTD la balise <html> les regles d ecriture 1. Généralités 2. Balises BLOC vs. INLINE 2.1 Positionnement par défaut des balises 2.2 Imbrications et emboîtements V. balises <div> & <span> VI. en resumé 59

60 18. Introduction au XHTML I. GENERALITES Ce chapitre expose les règles d écriture qui caractérisent XHTML par rapport à HTML. Ces règles garantissent une meilleure adaptabilité de vos pages aux futurs développement du Web et aux évolutions des navigateurs et des outils de visualisation utilisés (téléphones mobiles, PDA etc...) ainsi qu une plus grande facilité de mise à jour et de mise aux normes d accessibilité. XHTML présente les mêms balises et attributs que HTML. Bien qu ils soient accéptés par XHTML et les navigateurs, certains éléments sont déconseillés parce que défavorables à l accéssibilité et aux tendances modernes. Signalons que ces recommandations qui, sans être imposées par le langage, constituent en quelque sorte des règles de bon sens. Ce même bon sens qui implique ces recommandations... mais sans dogmatisme. II. le DOCTYPE / DTD 1. Qu est ce que c est? Le «Doctype", la Déclaration de Type de Document (souvent appelé DTD) est une déclaration qui figure en tête d un fichier.htm pour informer le navigateur du type de document dont il s agit. Elle prévient en premier lieu si le langage utilisé est HTML ou XHTML. Dans le cas de HTML on peut se passer du doctype, les paramètrtes par défaut sont suffisants. Dans le cas de XHTML en revanche, le doctype est indispensable car il agit sur la façon dont les navigateurs respectent les normes d affichage des contenus et notament les feuilles de style CSS. 2. Les differentes DTD HTML4.01 transitionel <!DOCTYPE html PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN" « HTML4.01 strict <!DOCTYPE html PUBLIC «-//W3C//DTD HTML 4.01//EN" « HTML4.01 frameset <!DOCTYPE html PUBLIC «-//W3C//DTD HTML 4.01 Frameset//EN" « XHTML1.0 strict <!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Strict//EN" « XHTML1.0 transitionel <!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN" « HTML4.01 frameset <!DOCTYPE HTML PUBLIC «-//W3C//DTD XHTML 1.0 Frameset//EN" « 3. Choisir sa DTD De façon générale utilisez de préférence XHTML1.0 Strict, c est a priori la plus adaptée à vos besoins. C est 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 d information sur les DTD et leurs finalités d utilisation : 60

61 18. Introduction au XHTML III. la balise <html> En fait, un fichier XHTML est un fichier XML. Il faut donc définir ce qu on appelle son espace des noms. Cela se fait dans la balise <html> qui s écrit : <html xmlns=" La balise <html> a aussi deux paramètres facultatifs qui précisent la langue utilisée. Pour XML anglais, avec un contenu français, on écrira : <html xmlns=" xml:lang="en" lang="fr"> IV. les regles d ecriture 1. Généralités Nous venons de voir deux différences entre HTML et XHTML ; la nécessité du DOCTYPE et celle du paramètre xmlns dans <html>. De fait, il n y en a pas beaucoup d autres. Tout ce que nous avons vu dans les chapitres précédents fonctionne aussi bien en HTML qu en XHTML car nous avons obéi à peu de choses près aux règles d écriture de XHTML. Voiçi ces règles : Majuscules et minuscules HTML est indifférent aux deux alors qu XHTML exige des minuscules pour toutes les balises et attributs. Pour les valeurs des attributs c est selon ; pour une désignation de fichier, il faut suivre la forme du nom tel qu il a été crée. Balises de fermeture En html certaines balises de fermeture sont facultatives, tandis que d autres sont obligatoires. En XHTML toutes les balises de fermeture sont obligatoires. Balises célibataires Une balise célibataire comme <br> s écrit désormais <br /> Valeurs des attributs En XHTML toute valeur d attribut doit être entre guillemets si la valeur ne contient pas d espaces ou de caractères spéciaux. Paramètres boléens Certains paramètres jouent uniquement par leur présence en HTML. Par exemple, <input type="checkbox checked"> installe dans un formulaire une case cochée par défaut. En XHMTL il faut écrire <input type="checkbox" checked="checked"> 61

62 18. Introduction au XHTML 2. Balises BLOC vs. INLINE Une autre distinction entre les éléments est celle à faire entre BLOC et EN LIGNE. Chaque balise se caractérise par une double identité : Une structure HTML qui n a intrinsèquement aucun rapport avec l affichage de l élément. Son rendu sur les navigateurs (affichage, positionnement, comportement) défini par défaut selon le bon vouloir de chaque navigateur et modifiable à l aide des CSS. Pour y voir plus clair, les différentes balises qui composent une page html ont été classées : Les balises de type BLOC BODY, DIV, Paragraphes (P), en-têtes (H1 à H6), tableaux (TABLE) Ces éléments se placent nécessairement les uns en dessous des autres, commencent une nouvelle ligne et forcent le suivant à faire de même. Ils servent à distinguer les parties entières de texte. Les balises de type INLINE Il s agit par exemple de A, B, I, SPAN, les images... Elles ne forcent jamais de retour à la ligne et peuvent être l enfant de n importe quel autre élément. Elles sont prévues pour rester dans le texte et l enrichir (lien hypertexte, renforcement, emphase, etc.). La compréhension de la structure des balises va avoir de nombreuses implications par la suite, et paradoxalement c est souvent un sujet peu connu des webmasters. Au niveau le plus basique retenons simplement que des balises de type bloc peuvent contenir d autres balises de type bloc et des balises de type inline et qu une balise possède un rendu CSS qui n a pas forcément de rapport avec sa structure HTML. Les balises ont toutes par défaut une valeur de rendu CSS particulière selon qu elles seront du type bloc ou inline. Il est particulièrement important de comprendre que : De leur structure HTML vont dépendre les imbrications et emboîtements autorisés. De leur rendu CSS vont dépendre leurs comportements, positionnements, affichages, etc. 2.1 Positionnement par défaut des balises Les balises de type bloc se placent toujours l une en dessous de l autre par défaut (comme un retour chariot). Par exemple, une suite de paragraphes <p> ou les éléments d une liste <li>. Par ailleurs, une balise bloc occupe automatiquement, par défaut, toute la largeur disponible dans son conteneur. <p>paragraphe 1</p> <p>paragraphe 2</p> Les balises de type inline se placent toujours l un à côté de l autre afin de rester dans le texte. Par exemple, le renforcement d une partie de texte à l aide de la balise <b>. <b><i>texte</i> autre texte</b> Ce texte va s afficher sur une seule ligne (aucun retour à la ligne) car les éléments qui le composent sont de rendu CSS «en-ligne". 62

63 18. Introduction au XHTML 2.2 Imbrications et emboîtements En règle générale 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 <div> (type bloc) englobe les deux paragraphes (type bloc). <div> <p>paragraphe 1</p> <p>paragraphe 2</p> </div> Par contre, nous n aurions pas pu écrire : <span> <p>paragraphe 1</p> <p>paragraphe 2</p> </span> car la balise <span> (dont la structure est inline) n est pas autorisée à contenir des éléments de structure bloc comme les paragraphes. NB : Les balises inline se distinguent elles mêmes en deux parties : les balises remplacés et les non remplacés Les balises remplacés sont les seuls qui possèdent des dimensions (width, height ) par défaut. Il s agit des balises <img>, <input>, <textarea>, <select> et <object>. Les balises non remplacés n ont pas de dimension à proprement parler par défaut (elles n occupent que la place minimum nécessaire à leur contenu). C est le cas des éléments <strong>, <em>, <span>, etc V. balises <div> & <span> Ces deux balises permettent de structurer la page. Elles permettent de délimiter une partie de la page qui peut ainsi recevoir un nom et des spécifications de mise en forme. Elles sont faites pour cela. <div> est de type bloc et peut regrouper d autres balises du même type comme des balise en ligne. <span> est une balise en ligne. Elle ne peut délimiter qu un fragment de texte. VI. en resumé XHTML est le nouveau standard d intégration. Il est une passerelle vers les futures versions. XHTML interagit facilement avec les autres langages dérivés de XML. Ayant des règles plus strictes, XHTML vous conduit à créer des pages plus cohérentes et qui fonctionnent mieux. XHTML 1.0 est accépté par les anciens navigateurs. En outre, les nouveaux navigateurs respectent mieux les normes CSS avec lui. XHTML permet de créer des pages pour les PDA, les téléphones, les lecteurs d écran pour malvoyants etc... XHTML s accorde parfaitement avec les fichiers CSS et il vous incitera à éviter les balises de présentation pour réserver la mise en forme aux styles ; ce qui facilitera la prise en compte des problèmes d accéssibilité dans vos pages. 63

64 19. CSS / Introduction et principe de base I. GENERALITES 1. Pourquoi utiliser des feuilles de style? 2. Avantages des feuilles de style 3. Qu est-ce qu un «style "? II. regles et syntaxe 1. Comment écrit on en CSS? 2. Ou placer les CSS? 3. Structure 4. Unités de longueur 64

65 19. CSS / Introduction I. GENERALITES Au début était HTML, conçu pour donner de l information puis des balises de présentation de style sont apparues comme <b> et <font> ensuite les tableaux ont été créés pour insérer des données tabulaires. MAIS avec la variété actuelle de navigateurs qui ne respectent pas nécessairement les standards initialement crées par le W3C, on passe aujourd hui plus de temps à vérifier que les affichages soient identiques sur plusieurs navigateurs, voire plusieurs versions du même navigateur qu à créer son code. C est pourquoi sont apparues les feuilles de style ou CSS (Cascading Style Sheet), qui sont une nouvelle tentative de standardisation des langages d intégration initié par le W3C pour aboutir à un affichage identique sur toutes les configurations matérielles de la terre conforme aux désirs de l auteur. 1. Pourquoi utiliser des feuilles de style? Les CSS permettent de décrire la présentation d une page web et remplacent donc avantageusement l ancienne méthode, qui consistait à utiliser ces fameuses balises, attributs et autres tableaux. Elles permettent de centraliser toute la mise en forme et d avoir à peu de frais une mise en page cohérente ; elles sont notamment utilisées pour définir les couleurs, les polices, le rendu, et d autres caractéristiques liées à la présentation d un document. L objectif est donc de bien séparer la structure (écrite en HTML ou similaire) de la présentation (en CSS) du document. Pour un unique contenu plusieurs affichages sont donc possibles. (cf. com/) Dans le cas de sites disposant d une arborescence conséquente, il peut être intéressant de créer une feuille pour les bases (polices, couleurs arrière-plan, etc ) puis des feuilles complémentaires pour chaque division du site. Cette séparation fournit un certain nombre de bénéfices, permettant d améliorer l accessibilité, de changer plus facilement de structure et de présentation, et de réduire la complexité de l architecture d un document. 2. Avantages des feuilles de style La structure du document et la présentation sont gérés dans des fichiers séparés. La conception d un document se fait dans un premier temps sans se soucier de la présentation, ce qui permet d être plus efficace. La présentation est uniformisée, les documents (pages html) font référence à la (aux) même(s) feuille(s) de styles. Un même document peut donner le choix entre plusieurs feuilles de style (css d impression ou de lecture à l écran). Le code HTML est considérablement réduit en taille et en complexité, puisqu il ne contient plus de balises de présentation, il est donc plus rapide à afficher. 3. Qu est-ce qu un «style "? Les propriétés des styles regroupent différentes valeurs, telles que les choix de police, de taille de couleur à appliquer aux différents éléments d une page, ainsi toutes les balises HTML pourront être positionnés, décorés, dimensionnés... C est ce que font les CSS : définir ces valeurs dans la page html à l aide d un code séparé en utilisant les balises comme <h1> </h1> qui de base en possède une taille et une graisse non modifiable mais qui est complètement redéfinissable en css. 65

66 19. CSS / Introduction II. regles et syntaxe 1. Comment écrit on en CSS? Le langage CSS est très simple, et le mieux est de commencer par un exemple. En HTML, pour définir un élément de texte en gras, vous avez pris l habitude de placer les balises <b> et </b> <b>texte</b> Puis avec l évolution des standards vous avez écrit <strong>texte</strong> Voici comment dans le cas d une application directe, le langage CSS va interpréter la même requête : <p style= font-weight: bold; >texte</p> Le point-virgule à la fin sert à séparer les propriétés, comme par exemple : <p style= font-weight: bold; color: red; >texte</p> Mais s il ne s agissait que de remplacer une syntaxe par une autre, l intérêt des CSS serait nul. Il existe donc plusieurs façons d utiliser ces dernières 2. Ou placer les CSS? Dans une balise html dans le corps du document <h1 style= font-size:15px ; color:#555 ; >Titre</h1> Dans l en-tête d un document (balise <head>) <style type="text/css">... </style> Dans un fichier externe relié au doc html à l aide d une balise <link> (dans l en-tête également) <link rel="stylesheet" type="text/css" href="style.css" /> Pour créer ce fichier, à l aide d un éditeur de texte standard (notepad ou simple text), enregistrez un nouveau document portant l extension.css. Bien entendu aucune balise html ne figurera dans ce fichier. Ces deux méthodes peuvent d ailleurs être utilisées ensemble pour un même document. Dans ces conditions, si elles se contredisent, c est la feuille écrite directement dans le document qui prédomine. En général, prévoyez d avoir une feuille de style dans un fichier séparé pour définir la présentation de tout un site, par la suite rajoutez ce qui est nécessaire dans chaque page. Nb : Il est possible de mettre des commentaires presque n importe où dans une feuille de style CSS en les encadrant de /* et */ 66

67 19. CSS / Introduction 3. Structure Toutes les CSS ont la même structure 1. Sélecteur : balise html, classe ou ID 2. Propriétés : les identifiants (équivalents des balises) 3. Valeurs : les données de la propriété (équivalents des attributs) La paire propriété/valeur est appelée : définition <p sélecteur = propriété : valeur; >titre</p> <p style= font-size : 11px; >titre</p> ou sélecteur p propriété : valeur; font-size : 11px; 4. Unités de longueur Unités de longueur relatives (à l objet parent) : Unités de longueur absolues : px pixel % pourcentage em largeur de police ex hauteur police mm cm in pt pc millimètres centimètres pouces point =1/72 de pouces pica = 12points 67

68 20. CSS / Les sélecteurs I. les 3 types de selecteurs 1. Les sélecteurs HTML 2. Les CLASS 3. Les ID II. II. les pseudo classes 1. Pseudo classes de lien 2. Pseudo classes de lien personnalisée regroupement de selecteurs 68

69 20. CSS / Les sélecteurs I. les 3 types de selecteurs La définition des sélecteurs va décider à quel(s) élément(s) une règle s applique On trouve 3 types de sélecteurs : 1. Les sélecteurs html qui offrent la possibilité de redéfinir les balises html en css 2. Les CLASS qui sont des règles librement choisies applicables à n importe quelle balise html. 3. Les ID qui sont similaires aux classes mais qui s appliquent qu une seule fois pour un élément donné. 1. Les sélecteurs HTML Nous l avons vu dans le précédent dossier théorique. Il s agit en fait d un simple changement de syntaxe. <strong>texte</strong> devient <p style= font-weight : bold; >texte</p> 2. Les CLASS N importe quel balise peut se voir attribuer le sélecteur CLASS, qui va servir à faire le lien avec une feuille de style, de même que plusieurs balises peuvent utiliser le même sélecteur CLASS. Ainsi, pour un paragraphe, on écrira : <p class="exemple"> que l on couplera avec la définition de CSS : p.exemple font-family: sans-serif; Tous ces paragraphes apparaîtront dans une police différente Le sélecteur CLASS s utilise souvent en conjonction avec les balises <div> et <span>, 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 l espace entre les paragraphes ; je ne peux pas non plus mettre une énumération ou une table dans l exemple. Il vaut mieux alors écrire : div.exemple border-left: solid blue 2px; Et écrire en corrélation sur la page html : <div class="exemple"> <p>ici mon exemple.</p> <p>il peut faire plusieurs paragraphes</p> </div> Je peux également utiliser.exemple comme sélecteur, qui s appliquera alors à tous les éléments de classe «exemple", quel que soit leur type, et me laisse ainsi la liberté d écrire <p class="exemple"> dans les cas simples, et de recourir à un div dans les cas plus compliqués. 69

70 20. CSS / Les sélecteurs 3. Les ID D une certaine manière ID est un sélecteur redondant : tout ce qu on peut faire avec on peut en faire autant voire plus avec CLASS. Mais ID a son utilité car il définit un élément de manière unique dans l ensemble des balises : un document HTML valide ne devrait ainsi pas comporter deux éléments avec le même ID. De fait, ID est le sélecteur idéal dès qu il s agit de positionner un élément au sein de l interface, dans le cas ou deux éléments ne devraient logiquement pas avoir la même position dans l interface. Ainsi, pour un paragraphe, on écrira <p id="exemple"> que l on couplera avec la définition de CSS : #exemple font-family: sans-serif; Enfin une balise pouvant disposer d un ID et d une (ou plusieurs) CLASS (ID disposant d une préséance hiérarchique sur CLASS) peut permettre de préciser un élément particulier au sein d un ensemble de CLASS. <p id="titre" class="texte rouge gras"></p> Ajoutons que JavaScript peut manipuler les balises avec un ID. Enfin, rappelons pour terminer qu au sein de la CSS, les ID sont définis avec le signe dièse (#nom) et les CLASS avec un point (.nom). II. les pseudo classes 1. Pseudo classes de lien En terme de CSS la définition de certaines fonctionnalités, en particulier les liens, dispose d un traitement spécial Il s agit de les redéfinir de la manière suivante et dans l ordre : a:link propriétés a:visited propriétés a:hover propriétés a:active propriétés pour les liens par défaut pour les liens visités pour les liens survolés pour les liens actifs et la classique définition de lien dans la page html <a href="fichier.html">link</a> Les propriétés applicables à ces pseudo-classes sont les mêmes que ceux applicables au texte : typo, couleur, taille, arrière-plan etc... plus la «décoration", c est-à-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-decoration none pas de soulignement underline soulignement line-through barré overline un trait au-dessus underline overline un trait en dessous et un trait au-dessus Pour appliquer les mêmes paramètres à plusieurs états de liens, séparer les sélecteurs par une virgule. a:link, a:visited color: #000000, text-decoration:none 70

71 20. CSS / Les sélecteurs 2. Pseudo classes de lien personnalisée Il se peut que vous vouliez, dans une même page, des liens qui se comportent différemment. Par exemple pour différencier 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 personnalisée. Nous allons donc cumuler les deux. Par exemple si je choisis des paramètres propres aux liens externes du site, je peux imaginer une classe personnalisée que je nommerai : «.lienext" Cela donnera dans le css a.lienext:link propriétés a.lienext:visited propriétés a.lienext:hover propriétés a.lienext:active propriétés Puis dans le html, il sera impératif d appliquer la classe ainsi créée <a href="fichier.html" class="lienext" />link</a> Il existe encore quelques autres pseudo-classes, mais elles sont souvent mal reconnues par les navigateurs, et moins utiles. II. regroupement de selecteurs L une des grandes forces des sélecteurs CSS est leur capacités à se combiner les uns avec les autres, ainsi on pourra retrouver ces groupements sous plusieurs formes : une, entre 2 sélecteurs signifie l application d une même définition aux sélecteurs h1, h2, h3 propriétés un espace entre 2 sélecteurs signifie la descendance p h1 propriétés (tous les h1 de ce p seront affectés) un > signifie la filiation directe p> h1 propriétés (descendance directe père/fils) un + signifie l adjacence h3 + p propriétés (correspond au premier paragraphe qui suit une en-tête h3) nb : «Parent-enfant " ou «filiation directe " = un niveau au-dessous «Descendance " = deux niveaux ou plus séparent les éléments. 71

72 21. CSS / Les propriétés I. generalités II. III. IV. proprietes du texte proprietes des listes proprietes des couleurs V. proprietes des arrieres plans VI. VI. proprietes des blocs bordures et marges proprietes pour body 72

73 21. CSS / Les propriétés I. generalités Les propriétés des sélecteurs indiquent l apparence que les éléments doivent prendre et permettent de changer énormément d aspects de la présentation de ces derniers. C est en utilisant conjointement ces dernières, que la mise en page de votre contenu va prendre forme. Police Texte Couleur Arrière-plans Blocs, bordures et marges Interface Positionnement Affichage et visibilité Impression taille, style, couleur. alignement, casse, interlignage, espace entre les mots et les lettres exprimée en valeur hexadécimale couleur ou images. largeur, hauteur, style, épaisseurs, couleurs, remplissage. puces, indentation, curseur, ascenseurs. emplacement exact sur l écran. si un élément apparaît et comment. comment définir l aspect de la page à l impression. II. proprietes du texte 1. polices de caractère L utilisation de CSS fait complètement disparaître l usage de l antique élément <font>. propriétés valeurs effet font-style: font-variant: font-weight: font-size: font-family: normal / italic / oblique normal / small-caps normal / bold xx-small / x-small / small / medium / large / x-large / xx-large / valeur serif / sans-serif / monospace / cursive / fantasy / verdana / arial / times Exemple d application pour une CSS inclue à la page HTML : <style type="text/css">.font font-style : normal; font-variant : normal; font-weight : normal; font-size : small; font-family : sans-serif; </style> Italique Petites capitales Gras Taille Famille de caractère RACCOURCI : Avec font: il est possible de spécifier plusieurs propriétés d un coup. Il faut alors placer à la suite et dans l ordre les éventuels style, variante, graisse, taille, et famille. <style type="text/css">.font font : normal normal normal small sans-serif; </style> 73

74 21. CSS / Les propriétés Cas 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 à l interprétation de ces valeurs par les différents navigateurs. Pour éviter de mauvaises surprises on préférera utiliser une valeur fixe exprimée en pixels Pour font-family: comme tout le monde n à pas toutes les polices du monde, il est possible d en indiquer plusieurs, séparées par des virgules (les noms comportant des espaces doivent être mis entre guillemets). Ceci dit, CSS définit des familles génériques, serif, sans-serif, monospace, cursive et fantasy... il est conseillé de toujours mettre une famille générique en dernier recours. 2. texte propriétés valeurs effet text-align: line-height: text-indent: text-transform: text-decoration: word-spacing: letter-spacing:.font text-align : left; line-height : normal; text-indent : inherit; text-transform : none; text-decoration : none; word-spacing : inherit; letter-spacing : inherit; Cas particuliers : left / right / center / justify normal / pourcentage / valeur nombre / pourcentage none / capitalize / lowercase / uppercase none / underline / overline / line-trough / blink valeur / valeur négative valeur / valeur négative Pour text-decoration: - «La valeur «Blink " n est pas opérationnelle avec IE - Il est possible de donner plusieurs décorations en les séparant par un espace.font text-decoration : underline overline; Alignement Interlignage Indentation Capitales Autres Intermots Interlettrage 74

75 21. CSS / Les propriétés III. proprietes des listes propriétés valeurs effet list-style-type: none / disc / circle / square decimal / upper-alpha / lower-alpha / upper-roman / lower-roman Liste non numérotée Liste numérotée list-style-image: ( url ); url Appel d une image Nous avons déjà vu dans les précédents cours comment créer une liste en HTML (cf. p.16 / 05 - le texte) Pour mémoire Listes non numérotées <ul> <li>premier <li>deuxième </ul> Listes numérotés <ol> <li>premier <li>deuxième </ol> Avec CSS nous agirons de même, à ceci près que nous ignorerons les paramètres de calibrage HTML Pour ce faire nous définirons la déclaration de classe pour les éléments UL ou OL de la page dans notre feuille de style en sachant que les propriétés de ces derniers seront héritées par les LI ul list-style-type : disc ; Bien entendu si plusieurs listes différentes doivent apparaître dans une même page, il sera alors nécessaire de déclarer une classe nominative.liste list-style-type : square ; En cas d appel à une image, nous utiliserons la syntaxe suivante ul list-style-image : url( images/btn.gif ); 75

76 21. CSS / Les propriétés IV. proprietes des couleurs propriétés valeurs effet color: RVB décimale / hexadecimale / nominative Couleur du texte La couleur se règle avec color: et peut s indiquer de plusieurs manières : Soit en définissant une couleur RVB décimale en utilisant des valeurs allant de 0 à 255 ou en pourcentage.fontcolor color: rgb(0,0,0); Soit en définissant une couleur hexadécimale (16 millions de couleurs) en indiquant les valeurs RVB d une couleur selon la notation #RRVVBB, empruntée au HTML, où RR, VV et BB représentent 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 doublée peut être indiquée une seule fois..fontcolor color: #000000; Soit en utilisant le tableau nominatif des couleurs standard Attention : Si vous souhaitez utiliser cette méthode, gardez à l esprit que le standard CSS ne garanti que l affichage des 16 couleurs définies ci après (ce qui est peu). Aqua Black Blue Fuchsia Gray Green Lime Maroon Navy Olive Purple Red Silver Teal White Yellow.fontcolor color: black; 76

77 21. CSS / Les propriétés V. proprietes des arrieres plans A présent, voyons comment le CSS va agir sur les arrières plans il va être possible d agir sur la couleur, la définition d une image, sa répétition et son scrolling ainsi que sur son positionnement au sein de la page. propriétés valeurs effet background-color: background-image: background-repeat: background-attachment: background-position:.bkg background-color : transparent; background-image : url( images/bkg-base.jpg ); background-repeat : no-repeat; background-attachment: fixed; background-position : left top; transparent / hexadecimal; none / url no-repeat / repeat-x / repeat-y scroll / fixed left / right / center / top / bottom / pixel / pourcentage Couleur Image Img repetition Img scrolling Img positionnement Raccourci : avec background: il est possible de spécifier plusieurs propriétés d un coup. Il faut alors placer à la suite et dans l ordre les éventuels couleurs, images, répétitions, scrolling et position..bkg background: transparent url( images/bkg-base.jpg ) no-repeat fixed left top; 77

78 21. CSS / Les propriétés VI. proprietes des blocs bordures et marges Un BLOC ou une BOITE (un paragraphe, un titre, une table) définie par sa largeur et, cas échéant, sa hauteur est entouré de trois zones de l intérieur vers l extérieur : Largeur et hauteur : width et height Ces deux propriétés permettent d ajuster la largeur et la hauteur d un bloc. Attention toutefois à utiliser height avec parcimonie, le contenant d un bloc étant toujours prioritaire sur la définition de la valeur. propriétés valeurs effet width: height: auto, pourcentage, valeur; auto, pourcentage, valeur; Largeur Hauteur La marge extérieure ou margin propriétés valeurs effet margin-top: margin-right: margin-bottom: margin-left: La marge intérieure ou padding auto / pourcentage / valeur auto / pourcentage / valeur auto / pourcentage / valeur auto / pourcentage / valeur Marge ext. haute Marge ext. droite Marge ext. basse Marge ext. gauche propriétés valeurs effet padding-top: padding-right: padding-bottom: padding-left: La bordure ou border auto / pourcentage / valeur auto / pourcentage / valeur auto / pourcentage / valeur auto / pourcentage / valeur Marge int. haute Marge int. droite Marge int. basse Marge int. gauche En utilisant les propriétés de type border-côté-, il est possible d intervenir sur chacun d entre eux séparément mais il est largement préférable d utiliser border tout court. propriétés valeurs effet border-width: border-color: border-style: thin / medium / thick / valeur rgb / hexadecimale / nominative none / solid / dotted / dashed / double / groove / ridge / inset / outset Epaisseur Couleur Style border-top-_: border-right-_: border-bottom-_: border-left-_: variable à définir variable à définir variable à définir variable à définir Bord haut Bord droit Bord bas Bord gauche 78

79 21. CSS / Les propriétés Donc, pour un même bloc défini, nous obtiendrons....bloc width height : auto; : 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 border-color border-style : 1px; : black; : solid; Raccourci : Les caractéristiques de bloc permettent de spécifier leurs propriétés respectives d un coup. Il faut alors les placer à la suite et dans l ordre (dans le sens des aiguilles d une montre, en partant de midi).bloc width height padding margin border : auto; : auto; : auto auto auto auto; : auto auto auto auto; : 1px black solid; Dans le cas de padding: et margin: si on ne met que deux longueurs elles définissent les marges haute et basse d une part et gauche et droite d autre part si on n en met qu une, les quatre marges sont égales. 79

80 21. CSS / Les propriétés VI. proprietes pour body Maintenant que nous avons vu la plupart des propriétés les plus importantes des CSS, il est utile de souligner qu afin de faciliter l intégration des éléments les plus récurrents de votre page, nombre d entre elles sont directement applicables à la balise body de cette dernière! 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; 80

81 22. CSS / Cascades et conflits d héritage Comme nous l avons vu dans les généralités, une feuille de style s écrit dans le langage appelé CSS, pour Cascading Style Sheet. Le terme cascading souligne une propriété importante du langage ; ses caractéristiques de présentations se propagent en cascade d un élément à ses fils. Pour mémoire Le style en ligne l emporte sur la feuille de style interne La feuille de style interne l emporte sur la feuille de style externe. Mais aussi Les ID l emportent sur les CLASS Les CLASS l emportent sur les sélecteurs contextuels, pseudo-class et pseudo elements On peut aussi considérer l importance des CSS en fonction des valeurs de leurs spécificités qui ont pour effet de donner une importance différente à chaque règle. ID : spéc. 100 / CLASS : spéc. 10 / Sélecteur contextuels : spéc. 1 / Règles héritées : spéc. 0 Qu est ce que l héritage? C est le mécanisme par lequel les styles s appliquent à un élément, mais aussi à ses descendants. Prenons exemple sur la structure d une page html En haut de la hiérarchie se trouve la balise html qui contient la balise body qui contient d autres éléments Si html est l ascendant de l ensemble (aussi appelé élément racine), body est l ascendant de tout ce que montre le navigateur. Même si quelques propriétés ne sont pas hérités (comme border par exemple), la plupart du temps pour optimiser le code beaucoup de paramètres héritent de leur parent par défaut (la couleur d arrière plan du body sera la même pour toutes les couleurs d arrière-plan de la page) sauf si une déclaration contradictoire est faite ensuite NB : En CSS, si vous souhaitez qu un élément prenne le dessus sur tout le reste, il faut alors utiliser le paramètre de règle «importante", c est-à-dire que cette dernière doit être suivie de!important. P.dark color:#333!important; 81

82 23. CSS / Positionnements I. generalités II. III. IV. BOIte de type bloc boite de type en ligne positions 1. Positionnement relatif 2. Positionnement absolu 3. Positionnement fixe 4. Position flottante 4.1 Généralités 4.2 Débordement et spacer 4.3 Une variante du spacer <hr /> V. conclusion 82

83 23. CSS / Positionnements I. generalités Par défaut, les navigateurs affichent les boîtes issues du document html dans l ordre du flux normal. Pour représenter le positionnement en flux normal, on peut imaginer le navigateur parcourant (logiquement) la page de code HTML du début à la fin et retranscrivant son contenu au fur et à mesure des balises rencontrées. Comme dans la lecture d un texte, il procède verticalement, commençant en haut de l écran pour aller jusqu en bas, et horizontalement de gauche à droite, sur la totalité de l espace disponible et nécessaire en largeur comme en hauteur. II. BOIte de type bloc Par défaut, les boîtes de type bloc seront affichées dans une succession verticale. Les principales balises créant des boîtes bloc sont : La balise div Le paragraphe p Les titres h1, h2, h3, h4, h5, h6 Les listes et éléments de liste ul, ol, li Prenons par exemple deux blocs différenciés par leur couleur : HTML <p class="jaune">une boîte jaune</p> <p class="verte">une boîte verte</p> CSS III. boite de type en ligne Par défaut, les boîtes de type en-ligne sont affichées dans une succession horizontale. Les principaux éléments créant des boîtes en ligne sont : L élément span Le lien a L image img Les emphases em et strong Prenons par exemple deux portions de texte différenciées par leur couleur : HTML <p> <span class="jaune">une boîte jaune</span> <span class="verte">une boîte verte</span> </p> CSS.jaune margin-left margin-right width background-color : auto; : auto; : 200px; : #ffff00;.jaune margin-left margin-right width background-color : auto; : auto; : 200px; : #ffff00;.verte margin-left margin-right width background-color : auto; : auto; : 200px; : #00ff00;.verte margin-left margin-right width background-color : auto; : auto; : 200px; : #00ff00; 83

84 23. CSS / Positionnements IV. position propriétés valeurs effet position: static relative absolute fixed inherit Positionnement habituel (par defaut) de l élément Positionnement par rapport à l élément précédent Positionnement par rapport aux bords de la page, défile avec page Positionnement par rapport aux bords de la page, ne défile pas avec page Même valeur que celle de l élément parent left: top: bottom: right: auto / pourcentage / valeur auto / pourcentage / valeur auto / pourcentage / valeur auto / pourcentage / valeur Les propriétés left, top, bottom, right Surtout utilisées avec le positionnement absolute, ces quatre propriétés définissent l emplacement d un élément par rapport à l élément parent. Elles déplacent l élément sans changer ses dimensions. Ne confondez pas avec les propriétés Margin qui elles modifient les dimensions de l élément. 1. Positionnement relatif Le positionnement relatif permet d inscrire un contenu en flux normal, puis de le décaler horizontalement et/ ou verticalement. Le contenu suivant n est pas affecté par ce déplacement qui peut donc entraîner des chevauchements. HTML <p> Lorem <span class="jaune">boîte en position relative</span> ipsum dolor. </p> CSS.relative position: relative; bottom: 5px; background-color: #ffff00; Pour illustrer le risque de chevauchement, ajoutons un décalage vers la droite : CSS. relative_decale position: relative; bottom: 5px; left: 3em; background-color: #ffff00; 84

85 23. CSS / Positionnements 2. Positionnement absolu Le positionnement absolu retire totalement du flux le contenu concerné : sa position est déterminée par référence aux limites du conteneur. Celui-ci peut-être : Le bloc conteneur initial, à défaut de boîte positionnée, c est à dire le plus souvent la fenêtre du navigateur. Une boîte elle-même positionnée (position relative ou absolue). Ceci s avère très utile en particulier pour : Placer les menus de navigation en fin de page, pour améliorer l accessibilité de votre site en donnant un accès immédiat à son contenu dans les navigateurs textes, tout en les faisant apparaître en haut de page ou encore dans une colonne pour les navigateurs graphiques. Créer plusieurs colonnes au positionnement indépendant de l ordre dans lequel elles se trouvent en HTML. HTML <div class="verte"> <p>lorem ipsum </p> <p class="jaune">boîte jaune en position absolue</p> </div> CSS.verte position background-color.jaune position top right background-color : relative; : #00ff00; : absolute; : 10px; : 10px; : #ffff00; Inévitablement, la boîte en position absolue recouvre le contenu de notre paragraphe. Pour l éviter, dotons la boîte conteneur verte d un remplissage supérieur suffisant : CSS.verte padding-top : 10px; 85

86 23. CSS / Positionnements Nous pourrions aussi bien fixer la largeur de la boîte jaune et doter le texte de la boîte verte d un remplissage à droite: CSS.verte padding-right.jaune width : 10px; : 10px; Utilisation : une mise en page à trois colonnes La position absolue offre donc une alternative aux flottants pour réaliser des mises en pages à plusieurs colonnes. Le cas typique est celui des trois colonnes dont voici le code : HTML <div class=" gauche"> </div> <div class=" centre"> </div> <div class="droite"> </div> CSS.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; 86

87 23. CSS / Positionnements 3. Positionnement fixe La seule différence avec le positionnement absolu tient au fait que l élément fixé reste en place même si la page défile avec l ascenseur. nb : IE6 ne reconnait pas encore ce mode de positionnement Position flottante 4.1 Généralités propriétés valeurs effet float: none / left / right Une boîte flottante est retirée du flux normal et placée le plus à droite ou le plus à gauche possible dans son conteneur. Le contenu suivant cette boîte flottante s écoule le long de celle-ci, dans l espace laissé libre. HTML <p class="jaune">une boîte jaune flottant</p> <p class="verte">une boîte verte doté d un contenu plus long </p> CSS.jaune width background-color float.verte background-color : 100px; : #ffff00; : right; : #00ff00; Le navigateur place tout d abord la boîte jaune, alignée sur le bord droit de cette partie de notre page, puis reprend le cours normal du flux dans l espace laissé libre à sa gauche pour afficher la boîte verte. Le flux occupe tout l espace disponible, la boîte verte reprend donc toute la largeur de la page sitôt passée la limite inférieure de la boîte flottante jaune. Dans les navigateurs n appliquant pas la feuille de style (navigateurs texte ou non conformes aux standards ), la boîte flottante sera simplement inscrite en flux normal avant la boîte qui la suit. 87

88 23. CSS / Positionnements 4.2 Débordement et spacer Reprenons notre exemple, mais inversons les contenus: celui de la boîte flottante jaune est à présent plus long que celui de la boîte verte : HTML <p class="jaune">une boîte jaune flottante dotée d un contenu plus long </p> <p class="verte">une boîte verte</p> CSS Idem La boîte flottante, plus longue que la boîte verte, déborde verticalement plus bas que celle-ci. La solution le spacer (appliqué à un léger changement de structure) Il consiste à inclure dans la boîte verte (placée dans une balise <div> précédant la jaune) un élément bloc au contenu fictif doté de la propriété clear; qui lui interdit d être adjacent à une boîte flottante. HTML <div class="verte"> <p class="jaune">une boîte jaune flottant doté d un contenu plus long </p> <p>une boîte verte</p> <div class="spacer"></div> </div> CSS Idem +.spacer clear : both; Le spacer, ne pouvant se placer à côté du bloc flottant, se trouve décalé plus bas que celui-ci. propriétés valeurs effet clear: none / both / left / right 88

89 23. CSS / Positionnements 4.2 Une variante du spacer <hr /> Le défaut du spacer est d introduire dans le code HTML un contenu fictif à des fins de présentation Lorsque la boîte adjacente à la boîte flottante est suivie d une coupure logique dans votre page (nouvelle section de texte ), il est préférable d associer la propriété clear à un contenu réel. La ligne horizontale créée par la balise <hr /> peut jouer avantageusement ce rôle : HTML <div class="verte"> <p class="jaune">une boîte jaune flottant doté d un contenu plus long </p> <p>une boîte verte</p> <hr> </div> CSS Idem + hr clear : both; Vous pouvez toutefois rendre la balise invisible tout en la laissant agir sur le flux à l aide de la propriété visibility: hidden; HTML <div class="verte"> <p class="jaune">une boîte jaune flottant doté d un contenu plus long </p> <p>une boîte verte</p> <hr> </div> CSS Idem + hr clear : both; visibility: hidden; 89

90 23. CSS / Positionnements Une utilisation des flottantes : les vignettes On obtient une série de vignettes pouvant accueillir par exemple des images, les liens d un menu de navigation, etc (ou encore permettant de réaliser une mise en page en colonnes) en créant une série de boîtes flottantes placées dans une boîte conteneur servant à délimiter l espace visuel où s affichent les boîtes flottantes. Elle s adapte automatiquement à la largeur d affichage disponible : faute de place à droite, une boîte flottante sera replacée à la ligne. HTML <div> </div> <p class="flottante">boîte verte 1</p> <p class="flottante">boîte verte 2</p> <p class="flottante">boîte verte 3</p> etc CSS.conteneur width : 100%;.flottante width margin background-color float : 100px; : 2px; : #00ff00; : left; V. conclusion Le positionnement CSS donne donc toute liberté dans la mise en page. Comparée à l utilisation des tableaux, cette technique offre des avantages essentiels : Gestion de la présentation à partir d un document unique pour un nombre quelconque de pages? Stricte séparation du contenu et de la présentation, d où un contenu mieux structuré, dénué 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 s adaptent plus facilement aux différentes configurations des utilisateurs (taille de la zone d affichage, règlages de tailles de caractères ). Effets graphiques nouveaux, tels le recouvrement en position fixe/absolue. 90

91 24. CSS / Feuilles de style pour l impression Il est possible de dire au navigateur d utiliser une feuille de style pour l affichage sur le web et une différente pour l impression papier. Pour ce il suffit de créer une première feuille de style externe pour l affichage sur le web et de la relier à la page html dans l en-tête comme suit : <link rel= stylesheet type= text/css href= ecran.css > Ensuite, il faut créer une deuxième feuille de style externe pour l affichage lors de l impression (enlever les barres de navigation, les images inutiles, mettre une couleur de police noire ) et la relier à la page html comme ceci : <link rel= stylesheet type= text/css media= print href= print.css > Lorsque l utilisateur demandera à imprimer la page, ou même à faire un aperçu avant impression, c est cette feuille de style qui sera prise en compte. 91

92 25. CSS / Trucs & astuces I. appliquer deux classes à une balise II. III. IV. fontes specifiques Pallier le problème de la largeur de boîte dans IE PC Centrer les éléments dans la page, horizontalement V. Centrer le contenu d une page en position absolue VI. VII. VIII. IX. Coloration des ascenseurs dans les pages (PC seulement) Empêcher la coloration des ascenseurs dans les pages (PC seulement) Faire défiler des images horizontalement dans un div Faire des ombres portées sur vos boîtes 92

93 25. Trucs et astuces I. appliquer deux classes à une balise Il est possible d appliquer une ou plusieurs classes à une balise HTML. Il suffit de séparer les noms des classes par un espace, le tout entre guillemets. <p class="titre bordure"> II. fontes specifiques Vous voulez absolument vos titres (par exemple) dans une police très spécifique que très peu d utilisateurs verront car ils n auront pas la police en question. La seule solution est donc une image <h1>mon titre </h1> h1 background : url(titreimage.gif) no-repeat; height : hauteur de l image ; III. Pallier le problème de la largeur de boîte dans IE PC Dans IE 6 PC la bordure et le remplissage sont à l intérieur de l élément, alors que dans les autres navigateurs ils sont à l extérieur de l élément. <div id="box">...</div> #box width border padding : 100px; : 5px; : 20px Donc la boîte 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 boîte de 150px, et à l intérieur d utiliser un <div> qui lui aura les paramètres de remplissage et bordure. <div id="box"> <div>... </div> </div> #box width #box div border padding : 150px : 5px; : 20px 93

94 25. Trucs et astuces IV. Centrer les éléments dans la page, horizontalement Il faut donner aux marges de droite et gauche les propriétés : auto; Rajouter : text-align:center; dans l élément conteneur, ici le BODY. Cependant l attribut text-align est hérité. Pour pallier ce problème, remettez un text-align:left; dans l élément du contenu. body margin padding text-align : 50px 0px; : 0px; : center; #Content width : 500px; margin : 0px auto; text-align : left; padding : 15px; border : 1px dashed #333; background-color : #eee; V. Centrer le contenu d une page en position absolue L astuce est d utiliser une marge gauche négative : position:absolute; left:50%; Puis la marge gauche est définie à l opposé de la moitié de la largeur de la boîte : margin-left:-266px; body Margin Padding #Content position :0px; :0px; : 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; 94

95 25. Trucs et astuces VII. Empêcher la coloration des ascenseurs dans les pages (PC seulement) body, html scrollbar-face-color scrollbar-shadow-color scrollbar-highlight-color scrollbar-3dlight-color scrollbar-darkshadow-color scrollbar-track-color scrollbar-arrow-color : ThreeDFace!important; : ThreeDDarkShadow!important; : ThreeDHighlight!important; : ThreeDLightShadow!important; : ThreeDDarkShadow!important; : Scrollbar!important; : ButtonText!important; VIII. Faire défiler des images horizontalement dans un div <div id="boite"> <div id="image"> <img src="image.jpg" width="100" height="67"> <img src=" image.jpg" width="100" height="67"> <img src=" image.jpg" width="100" height="67"> <img src=" image.jpg" width="100" height="67"> <img src=" image.jpg" width="100" height="67"> </div> </div> #boite margin : 0; padding : 0px; height : 87px; width : 309px; background-color : #fff; overflow : auto; white-space : nowrap; #image display height padding : inline; : 100px; : 0px; 95

96 25. Trucs et astuces IX. Faire des ombres portées sur vos boîtes Dans le html, le <div>externe correspond à l ombre. Elle devra avoir une couleur légèrement plus foncée que l interne <div class=ombre> <div class=contenu> Le contenu de ma boîte ici<br /> </div> </div> #ombre background-color margin padding : #ccc; : 3em 0 3em 5em; : 1,5em; #contenu background-color : #ffd; border : thin solid #999; margin : -3em 0 0-3em; padding : 1.5em; 96

97 26. Lexique général Accessibilité web L accessibilité web c est mettre le web et ses services à la disposition de tous les individus, quel que soit leur matériel ou logiciel, leur infrastructure réseau, leur langue maternelle, leur culture, leur localisation géographique, ou leurs aptitudes physiques ou mentales. Rendre les sites web accessibles, autorise, en théorie, l accès à l information, aux services (réservation de billet de train, de place de concerts, d achats en ligne...) pour les personnes en situation de handicap temporaire ou permanent ainsi que pour toutes les personnes âgées. Le consortium W3C établit des standards très précis pour s assurer de l accessibilité du web. Agence web Agence de communication multimédia, spécialisée dans le conseil, la conception, l intégration et le développement d applications web. Les agences web constituent une nouvelle forme de prestataires de services : elles regroupent des personnes spécialisées dans des activités telles que la conception de sites web, le marketing relationnel, le développement et l intégration d applications de commerce électronique. Une agence web peut prendre en charge tout ou partie d un projet Internet. Issue du monde du service et de la communication, elle se caractérise par l expérience acquise et les méthodologies appliquées. Elle veut répondre à l ensemble des nouveaux besoins rencontrés par les entreprises qui développent une stratégie d affaires électroniques. Elle offre généralement trois compétences : un pôle conseil, un pôle ingénierie en charge de la réalisation du site et enfin un pôle communication. Bande passante La bande passante correspond à la quantité maximale de données qu une voie de communication peut transmettre par seconde. Elle est calculée en bits par seconde (bit/s), c est-à-dire en se servant d une unité qui mesure aussi le débit et la vitesse de transmission des données. La bande passante peut devenir ainsi une indication de vitesse et de débit. C est pour cela que, dans certains contextes, on remplace en anglais le terme bandwidth par throughput et, en français, le terme bande passante par débit. Base de données Une base de données est un ensemble structuré et organisé permettant le stockage de grandes quantités d informations afin d en faciliter l exploitation (ajout, mise à jour, recherche de données). Une base de données se traduit physiquement par un ensemble de fichiers sur disque. 97

98 26. Lexique général CSS (Cascading Style Sheets) Le langage CSS (Cascading Style Sheets : feuilles de style en cascade) est utilisé pour décrire la présentation d un document structuré écrit en HTML ou en XML, et c est le World Wide Web Consortium (W3C) qui en a la direction. CSS est utilisé pour définir les couleurs, les polices, le rendu, et d autres caractéristiques liées à la présentation d un document. L objectif est de bien séparer la structure (écrite en HTML ou similaire) et la présentation (en CSS) du document. Cette séparation fournit un certain nombre de bénéfices, permettant d améliorer l accessibilité, de changer plus facilement de structure et de présentation, et de réduire la complexité de l architecture d un document. Enfin, CSS permet de s adapter aux caractéristiques du récepteur. HTML ne décrit que l architecture interne, et CSS décrit tous les aspects de la présentation. CSS peut définir 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 présentation sont gérés dans des fichiers séparés. La conception d un document se fait dans un premier temps sans se soucier de la présentation, ce qui permet d être plus efficace. Dans le cas d un site Internet, la présentation est uniformisée : Les documents (pages html) font référence à la (aux) même(s) feuille(s) de styles. Cette caractéristique permet de plus un relookage rapide. Un même document peut donner le choix entre plusieurs feuilles de style (impression ou lecture à l écran par exemple). Certains navigateurs web permettent d accéder facilement à un choix de feuilles de style. Le code HTML est considérablement réduit en taille et en complexité, puisqu il ne contient plus de balises de présentation. Design graphique Procédé de création et de développement d une ou de plusieurs images visant à harmoniser l environnement visuel proposé à l usager. Le design demande de la recherche, du modelage, des ajustements et du re-design. Design interactif Procédé de création et de développement graphique, audio, textuel et animé d une présentation visant à créer une interactivité entre l usager et le système proposé. Ce faisant, le site web ou le logiciel prend constemment en compte les actions de l interacteur, et produit ainsi un contenu ou réalise un objectif. Design web Le design web désigne la création du support visuel à destination d un site web. Il s agit d une phase prépondérante dans la conception d un tel site. L identité d un site web après être conceptualisée sera transformée en lignes de code et images pour s afficher dans un fureteur web. Comme pour l infographie et le graphisme, le design web n a pas encore acquit son indépendance à part entière comme activité artistique. Les raisons sont nombreuses, autant que les affinités qu elle exige ; le design web concerne la création de la charte graphique, l interface et la navigation du site, l arborescence. Ce qui demande de nombreuse compétence en graphisme, programmation, animation. L objet du design web est de valoriser l image du propriétaire du site par le biais d éléments graphiques afin d en renforcer son identité visuelle, néanmoins plusieurs contraintes liée à l ergonomie réduisent les possibilités. Un site doit avant tout répondre aux attentes des utilisateurs. Généralement un compromis doit être trouvé entre le graphisme et la sobriété nécessaires à la lecture et la navigation. 98

99 26. Lexique général Formulaire web En informatique, un formulaire est un espace de saisie dans l interface utilisateur, pouvant comporter plusieurs zones, ou «champs " : on peut y saisir du texte, cocher des cases, effectuer un choix dans une liste de termes prédéfinis, appuyer sur des boutons, etc. Ces zones de saisie assurent l interactivité entre le client (par exemple, le navigateur de l internaute) et le serveur (par exemple, la machine qui héberge les pages web sur internet). Les boutons des formulaires permettent de lancer des actions prédéfinies par l auteur des pages. Ces actions sont des scripts (javascript, PHP, Perl, CGI...) qui envoient les données saisies au serveur. Ce dernier les traite et renvoie une réponse à l utilisateur via la page web. HTML Langage de balisage de texte qui permet la création 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é défini par le CERN (Centre européen de recherche nucléaire). HTTP Le Hypertext Transfer Protocol, abrégé HTTP, littéralement «protocole de transfert hypertexte ", est un protocole de communication informatique client-serveur développé pour le World Wide Web. Il est utilisé pour transférer les documents (document HTML, image, feuille de style, etc.) entre le serveur HTTP et le navigateur Web lorsqu un visiteur consulte un site Web. HTTPS (Secured) est la variante du HTTP sécurisé avec les protocoles SSL ou TLS. Il permet au visiteur de vérifier l identité du site auquel il accède grâce à un certificat d authentification. Il permet également de chiffrer la communication. Il est généralement utilisé pour les transactions financières en ligne : commerce électronique, banque en ligne, courtage en ligne, etc. Interactivité L interactivité est la composante grâce à laquelle un logiciel ou un site internet prend constamment en compte les actions de l interacteur. L interactivité est souvent associée aux technologies permettant des échanges homme-machine où la conduite et le déroulement de la situation est lié a des processus de rétroaction, de collaboration, de coopération entre les acteurs qui produisent ainsi un contenu, réalisent un objectif, ou plus simplement modifient et adaptent leur comportement. Elle distingue une communication interactive qui s opposerait à une communication à sens unique, sans réaction du destinataire, sans feedback. Interface Une interface permet d échanger des informations entre l utilisateur humain et la machine. Pour que cette communication soit la plus simple possible, on utilise différents éléments. Les périphériques d entrée, comme le clavier, la souris, ou le scanner permettent à l homme de donner des renseignements ou des ordres à la machine. Les périphériques de sortie comme l écran, des diodes ou l imprimante permettent à la machine de répondre aux ordres et d afficher des informations. 99

100 26. Lexique général Internet Internet est le nom donné au réseau informatique mondial, reposant sur le système d adresses 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. L usage courant fait référence à Internet de différentes manières. Outre les recommandations officielles, il n est pas rare de rencontrer les termes suivants : «le Net " ou «le net ", «Internet ", «l Internet ", «le réseau des réseaux " ou plus simplement «le réseau " ou «le Réseau " décliné parfois en «Le réseau ". Certains termes sont utilisés à tort pour faire référence à Internet, par exemple : «la Toile ", «le web " ou «le Web " (the Web en anglais), mais cela désigne le Web et non pas Internet. Cette confusion entre web et net existe aussi en anglais. Intranet Réseau informatique privé, à l intérieur d une organisation, qui utilise les protocoles de communication et les technologies du réseau Internet. Un intranet est un réseau privé ne contenant en fait qu un seul site. Par analogie avec site Internet (ou site Web), correspondant au site public d un organisme ou d une entreprise accessible sur le réseau Internet, on utilise parfois site intranet pour parler du site privé accessible uniquement à l interne par le personnel d un organisme ou d une entreprise. JavaScript JavaScript 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 première fois dans les versions bétas de Netscape Navigator 2.0. D abord appelé LiveScript, il a été rebaptisé JavaScript et est décrit comme un complément à Java dans un communiqué de presse commun de Netscape et Sun Microsystems, daté du 4 décembre Cette initiative a contribué à créer auprès du public une certaine confusion entre les deux langages, proches syntaxiquement mais pas du tout dans leurs concepts fondamentaux, qui perdure encore aujourd hui. Le propos de JavaScript est de manipuler de façon simple des objets, au sens informatique, fournis par une application hôte. JavaScript est aujourd hui défini par la norme ECMA-262, aussi connue sous l appellation ECMAScript. La troisième édition d ECMA-262 parue en 1999 correspond à la version 1.5 de JavaScript. Son implémentation par Microsoft porte quant à elle le nom de JScript. Il est question d une version JavaScript 1.6 supportée par la version 1.5 de Firefox. Du code JavaScript peut être intégré directement au sein des pages Web, pour y être exécuté sur le poste client. C est alors le navigateur Web qui prend en charge l exécution de ces petits bouts de programmes appelés scripts. Généralement, JavaScript sert à contrôler les données saisies dans des formulaires HTML, ou à interagir avec le document HTML via l interface DOM, fournie par le navigateur (on parle alors parfois d HTML dynamique). Il est aussi utilisé pour réaliser des services dynamiques, parfois futiles ou strictement cosmétiques. 100

101 26. Lexique général Langage de programmation Langage artificiel comprenant un ensemble de caractères, de symboles et de mots régis par des règles qui permettent de les assembler, utilisé pour donner des instructions à un ordinateur. L une des principales qualités d un langage de programmation est la portabilité qui permet à un logiciel développé dans un langage de programmation à grande portabilité, de fonctionner sur différents types de systèmes informatiques. Le terme «langage de programmation " recouvre une vaste panoplie, allant du langage machine formé d instructions binaires, aux langages de haut niveau dont la forme se rapproche des langages naturels. Lien hypertexte Connexion activable à la demande sur le web, reliant des données textuelles ayant une relation de complémentarité les unes avec les autres, et ce, où qu elles se trouvent dans Internet. Dans les pages Web, la présence d un lien hypertexte est signalée visuellement par son ancre qui peut être une partie de phrase ou un mot soulignés ou de couleur différente de celle du texte, ou encore une image, une icône, un graphique. Navigateur web Logiciel client capable d exploiter les ressources hypertextes et hypermédias du Web ainsi que les ressources d Internet dans son ensemble, qui permet donc la recherche d information et l accès à cette information. Internet Explorer, Mozilla Firefox, Netscape Communicator et Opera sont des exemples de navigateurs Web. Protocole FTP Protocole de transfert de fichiers qui permet de télécharger une copie de données choisies par l internaute, d un ordinateur à un autre, selon le modèle client-serveur. Les données téléchargées peuvent prendre la forme de logiciels, de fichiers de toute nature (textes, graphiques, images, sons, etc.). Le sigle FTP est également utilisé pour dénommer les applications qui fonctionnent selon le protocole FTP, ainsi que les transferts effectués grâce à ce protocole. Référencement Le référencement est l ensemble des techniques qui permettent d inscrire un site dans les moteurs de recherche, les répertoires ou dans les annuaires. Le référencement est souvent associé avec le positionnement qui, quant à lui, représente l art d optimiser la place du site dans les réponses fournies par les moteurs de recherche. Le référencement d un site web se fait, selon l outil de recherche, en précisant l adresse URL du site et l adresse de courriel du webmestre, ou en ajoutant d autres informations telles que le titre de la page d accueil, un texte descriptif, une catégorie, quelques mots clés, etc. 101

102 26. Lexique général URL Chaîne de caractères normalisés servant à identifier et à localiser des ressources consultables sur Internet et à y accéder à l aide d un navigateur. Une adresse URL ( comprend le nom du protocole de communication (http) ou encore ftp, telnet, mailto, news, etc., des protocoles associés à d autres services offerts sur Internet ; le nom du serveur ( nom de domaine de l ordinateur hébergeant la ressource demandée ; le chemin d accès à la ressource (/ressources/fichier) qui permet au serveur de connaître l emplacement de la ressource (c est-à-dire le répertoire, le sous-répertoire et le nom du fichier demandé) et l extension (html) qui indique le format dans lequel la page a été créée. Dans une adresse URL, la barre oblique permet de spécifier un sous-répertoire. W3C (World Wide Web Consortium) Le World Wide Web Consortium, abrégé 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 n émet pas des normes, mais des recommandations. Sa gestion est assurée conjointement par le Massachusetts Institute of Technology (MIT) aux États-Unis, le European Research Consortium for Informatics and Mathematics (ERCIM) en Europe (auparavant l Institut national de recherche en informatique et en automatique français (INRIA)) et l Université 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 proposée) Candidate Recommendation (candidat à la recommandation) Une recommandation peut être mise à jour par errata édité séparément, jusqu à l accumulation de suffisamment de modifications ; une nouvelle version de la recommandation est alors publiée (XML en est aujourd hui à sa troisième version). Parfois, une recommandation recommence le processus, comme RDF. Le W3C publie aussi des remarques informatives qui ne sont pas destinées à être traitées en tant que norme. Le consortium laisse le soin aux fabricants de suivre les recommandations. Contrairement à l Organisation internationale de normalisation ou d autres corps internationaux de standardisation, le W3C ne possède pas de programme de certification, et beaucoup de standards ne définissent pas formellement un niveau de conformité. Ils sont ainsi souvent implantés partiellement. World Wide Web Le World Wide Web (ou le Web, la Toile, WWW ou encore W3), littéralement la «toile (d araignée) mondiale ", est un système hypertexte public réparti sur Internet et qui permet de consulter, avec un navigateur Web, des pages Web mises en ligne dans des sites Web. L image de la toile vient des hyperliens qui lient les pages Web entre elles. Le Web a rendu les médias grand public attentifs à Internet. Depuis, il est fréquemment confondu avec ce dernier. Ce n est cependant qu un des systèmes disponibles sur Internet, avec le courrier électronique, Usenet, la messagerie instantanée, etc. Internet précède le Web de nombreuses années. 102

Montrer encore