html, javascript, xhtml & css

design graphique / web design

// HTML, JavascriptXHTML & CSS version 1.0 date 28 / 04 / 2010 auteur Loïc Swiny contact [email protected]

2

HTML, Javascript, XHTML & CSS

// sommaire

// page. 03// page. 06// page. 11// page. 15// page. 16// page. 24// page. 27// page. 32// page. 36// page. 40// page. 46

// page. 47// page. 50// page. 54// page. 57// page. 58

// page. 59

// page. 64// page. 68// page. 72// page. 81// page. 82// page. 91// page. 92

// page. 97

HTML01. Introduction au langage HTML02. Introduction aux principes généraux du webdesign et première maquette03. HTML, les bases04. La balise <BODY>05. Texte / alignement, formatage, listes06. Liens07. Images & Map08. Tableaux09. Frames & I-Frames10. Formulaires11. Récapitulatif des balises les plus courantes

JAVASCRIPT13. Introduction au Javascript14. Menus dynamiques15. Popup16. Full screen17. Restriction d’accès au contenu

XHTML18. Introduction au XHTML

CSS19. Introduction et principe de base20. Sélecteurs21. Propriétés22. Cascades et conflits d’héritage23. Positionnement24. Feuille de style pour l’impression25. Trucs & astuces

LEXIQUE GENERAL

3


01. Introduction au langage HTML

I. HISTORIQUE

II. QUI UTILISE LE HTML ?

III. APPRENDRE LE HTML

4


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...

1991 / 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.

1996 / HTML 3.0 De nouvelles balises et de nouveaux attributs sont insérées. Listes, Cartes cliquables, Frames...

1998 / 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).

2000 / XHTML Mise à jour majeure du langage qui devient XHTML. C’est l’avènement du Web 2.0.

2010 / 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.

01. Introduction au HTML

5

HTML, Javascript, XHTML & CSS 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...

6


02. Introduction auw principes généraux du webdesign & première maquetteI. GENERALITES

II. UN PEU D’ORDRE ET DE MéTHODE

III. LE CONTENU

IV. L’ARCHITECTURE 1. Arborescence 2. Liens 3. Modularité

V. LA FORME 1. Zoning 2. Format technique 3. Format visuel

7


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

02. Introduction au webdesign

8


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.


9


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)


10


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 / 1600x1200

... 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.

1600

1000

1200


11


03. HTML, les bases

I. INTRODUCTION

II. LE SQUELETTE D’UNE PAGE 1. L’en tête / HEAD 2. Le corps / BODY

III. LES BALISES 1. Généralités 2. Balises BLOC vs. INLINE

IV. LES ATTRIBUTS

V. QUELQUES REGLES SIMPLES POUR DéBUTER

12


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-8859-1">

• 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-8859-1"></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...

03. HTML, les bases

13


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> <TD> </TD> </TR></TABLE>

• 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>

03. HTML, les bases

14


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)

03. HTML, les bases

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> topmarginleftmargin

marginwidthmarginheight

bgcolor

background

style

bgproperties

scroll

text

linkalinkvlink

pixelpixel

pixelpixel

hexadecimale

url relatifurl absolu

background-repeat: no-repeat;background-repeat: x;background-repeat: y;

fixed

yes / no / auto

hexadecimale

hexadecimalehexadecimalehexadecimale

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)

définit les marges haute et basse de la pagedéfinit les marges gauche et droite de la page

définit la couleur du fond

définit la source relative de l’image de fonddé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 pagedéfinit la couleur des liens actifs pour la pagedé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" >

16


05. Le texte

I. LES STYLES

II. LES ACCENTS

III. LES EN TêTES

IV. LES PARAGRAPHES

V. ALIGNEMENT / FERRAGE

VI. LES LIGNES HORIZONTALES

VII. LES LISTES 1. Les listes non numérotées 2. Les listes numérotées

17


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 :http://www.commentcamarche.net/contents/html/htmlcarac.php3

05. Le texte

http://www.commentcamarche.net/contents/html/htmlcarac.php3

18


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 <h1>titre</h1>






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>...


<Hx><p><div>

align leftrightcenterjustify

aligne le texte sur la marge de gauchealigne le texte sur la marge de droite centre le texte entre les margesjustifie le texte

ferrage avec en-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.

05. Le texte

19


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 :


<hr> align

width

size

color

noshade

leftrightcenter

pixel, %

de 1 à 10

hexadecimale

sans

aligne la ligne horizontale à gauchealigne la ligne horizontale à droitealigne la ligne horizontale au centre

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>


<ul>

<ol>

type

sanstype

disccirclesquare

sansIAa

pucecerclecarré

chiffres arabes par défautchiffres rommainslettres alphabétiques majusculeslettres 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>

05. Le texte

20


06. Les liens

I. GENERALITES

II. DENOMINATIFS DES FICHIERS ET DOSSIERS

III. LIENS RELATIFS

IV. LIENS ABSOLUS

V. LIENS INTERNES à LA PAGE

VI. CAS PARTICULIER, L’ATTRIBUT «MAILTO"

21


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.


<a> href

target

title

name

style


_self_blank_parent

_top

variable à définir



définit la source relative du documentdéfinit la source absolue du document

appelle la page cible dans le cadre d’appelappelle la page cible dans une nouvelle fenêtreappelle 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"

06. Les liens

22


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="http://www.google.com">texte</a>

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.

06. Les liens

23


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>

06. Les liens

24


07. Les images

I. BALISE <IMG> ET ATTRIBUTS

II. LES CARTES CLIQUABLES (OU MAP)

25


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.


<img> src

name

width

height

align

alt

border

bordercolor

hspace

vspace

url relatif ou absolu à définir


pixel

pixel

leftrighttopmiddlebottom


pixel

hexadecimale

pixel

pixel

définit la source relative ou absolue du document

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">

07. Les images

26


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.

07. Les images

27


08. Les tableaux

I. GENERALITéS

II. TABLEAUX AVEC FUSION 1. L’attribut colspan 2. L’attribut rowspan 2. Les attributs colspan & rowspan

28


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> le corps du tableau<tr> une ligne du tableau<td> 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> <td> cell1 </td> </tr></ table >


<table>

<tr> &<td>

cellpaddingcellspacing

widthheight

bgcolorbackground

border bordercolorbordercolorlightbordercolordark

widthheight

bgcolorbackground

alignvalign

colspanrowspan

pixelpixel

pixel / pourcentagepixel / pourcentage

hexadecimaleurl relatif ou absolu à définir

pixelhexadecimalehexadecimalehexadecimale



left / center / righttop / middle / bottom

unité numériqueunité numérique

définit l’espace entre le bord du tableau et les cellules définit l’espace entre les cellules

définit la largeur du tableaudéfinit la hauteur du tableau

définit la couleur de fond du tableaudéfinit une image en arrière plan du tableau

définit la taille de la borduredéfinit la couleur de la borduredéfinit la couleur aux points culminants de la borduredéfinit la couleur de l’ombre de la bordure

définit la largeur de la celluledéfinit la hauteur de la cellule

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

définit l’alignement horizontal du contenudéfinit l’alignement vertical du contenu

définit la fusion de 2 cellules adjacentes sur une lignedéfinit la fusion de 2 cellules adjacentes sur une colonne

08. Les tableaux

29


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">

<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>

</tr>

<tr>

<td align="left" valign="bottom" width="50" height="50"> cell 3 </td> <td align="right" valign="bottom" width="50" height="50"> cell 4 </td>

</tr>

</table>

08. Les tableaux

30


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>

</TABLE>

cell 1

cell 2 cell 3

cell 4

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

08. Les tableaux

31


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

08. Les tableaux

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

33


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


<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.

09. Les frames

34



<frameset>

<frame>

colsrows

frameborderborderbordercolor

framespacing

srcname

frameborder borderbordercolor


scrolling

noresize


yes / nopixelhexadecimale

pixel

url relatif ou absolu à définirvariable à définir

yes / no pixelhexadecimale

pixelpixel

yes / no / auto

attribut sans valeur

définit un format de frameset verticaldéfinit un format de frameset horizontal

définit une bordure de framesetdéfinit la taille d’une bordure de framesetdéfinit la couleur d’une bordure de frameset

définit l’espace entre les cadres d’un frameset

définit la source relative ou absolue des framesdéfinit une identité à chaque frame

définit une bordure de framedéfinit la taille d’une bordure de framedéfinit la couleur d’une bordure de frame

définit la largeur des marges interieures d’une framedéfinit la hauteur des marges interieures d’une frame

définit l’autorisation d’attribution d’une scrollbar

interdit le redimenssionement manuel d’une frame


<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>

09. Les frames

35


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


<iframe> srcname

widthheight



scrolling

noresize


pixelpixel


pixelpixel

yes / no / auto


définit la source relative ou absolue d’une iframedéfinit une identité à chaque iframe

définit la largeur d’une iframedéfinit la hauteur d’une iframe

définit une borduredéfinit la taille d’une borduredéfinit la couleur d’une bordure

définit la largeur des marges interieuresdéfinit la hauteur des marges interieures


interdit le redimenssionement manuel

<iframe src="pageinterne.html" width="200" height="200" frameborder="0"></iframe>

09. Les frames

36


10. Les formulaires

I. GENERALITéS

II. CREATION 1. Method 2. Action 3. Enctype

III. 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

37


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 email)enctype : enctype="text/plain"

1. Method

2 valeurs sont proposées : POST pour un formulaire classiqueGET 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>

10. Les formulaires

38



<form>

<input>

<select>

<textarea>

methodactionenctype

type

sizemaxlengthnamevalue

name

namecolsrows

postmailto:nom@urltext/plain

text / radio / checkboxsubmit / resetpixelpixelvariable à définirvariable à définir


variable à définirpixelpixel

définit le format du formulairedéfinit l’action de transmission des donnéesdéfinit le format des données transmises

définit le type de champ de saisie (texte ou bouton)

définit le nombre de caractères visibles dans le champdéfinit le nombre de caractères maximum à la saisiedéfinit l’identité d’un ou de plusieurs champsdéfinit le contenu du champ lors de la réception

définit l’identité d’un ou de plusieurs champs

définit le contenu du champ lors de la réceptiondéfinit la largeur du champdé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

10. Les formulaires

39


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 :

10. Les formulaires

40


11. Recapitulatif des balises les plus courantes

I. BODY

II. TEXTE

III. TITRE / PARAGRAPHE

IV. TRAIT HORIZONTAL

V. LISTES

VI. LIENS

VII. IMAGES

VIII. TABLEAUX

IX. FRAMES

X. I-FRAMES

XI. FORMULAIRES

41


I. BODY


<body> topmarginleftmargin


bgcolor

background

style

bgproperties

scroll

text

linkalinkvlink

pixelpixel

pixelpixel

hexadecimale


background-repeat: no-repeat;background-repeat: x;background-repeat: y;

fixed

yes / no / auto

hexadecimale

hexadecimalehexadecimalehexadecimale

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)

définit les marges haute et basse de la pagedéfinit les marges gauche et droite de la page

définit la couleur du fond

définit la source relative de l’image de fonddé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 pagedéfinit la couleur des liens actifs pour la pagedéfinit la couleur des liens visités pour la page

II. TEXTE


<b> / <strong><i> / <em><u><sup><sub>

/////

/////

grasitaliquesoulignéexposantindice

III. TITRE / PARAGRAPHE


<H1>...<H6><p><div>

align leftrightcenterjustify

aligne le texte sur la marge de gauchealigne le texte sur la marge de droite centre le texte entre les margesjustifie le texte

11. Recap’ des balises

42


IV. TRAIT HORIZONTAL


<hr> align

width

size

color

noshade

leftrightcenter

pixel, %

de 1 à 10

hexadecimale

sans

aligne la ligne horizontale à gauchealigne la ligne horizontale à droitealigne la ligne horizontale au centre

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


<ul>

<ol>

type

sanstype

disccirclesquare

sansIAa

pucecerclecarré

chiffres arabes par défautchiffres rommainslettres alphabétiques majusculeslettres alphabétiques minuscules

VI. LIENS


<a> href

target

title

name

style


_self_blank_parent

_top




définit la source relative du documentdéfinit la source absolue du document

appelle la page cible dans le cadre d’appelappelle la page cible dans une nouvelle fenêtreappelle 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


43


VII. IMAGES


<img> src

name

widthheight

align

alt

borderbordercolor

hspacevspace

url relatif ou absolu


pixelpixel

leftrighttopmiddlebottom


pixelhexadecimale

pixelpixel

définit la source relative ou absolue du document

définit une identité à l’image

définit la largeur de l’imagedé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’imagedéfinit une couleur au cadre de l’image

définit l’espace horizontal entre l’image et le contenudéfinit un espace vertical entre l’image et le contenu

VIII. TABLEAUX


<table>

<tr> &<td>

cellpaddingcellspacing

widthheight

bgcolorbackground

border bordercolorbordercolorlightbordercolordark

widthheight

bgcolorbackground

alignvalign

colspanrowspan

pixelpixel



pixelhexadecimalehexadecimalehexadecimale



left / center / righttop / middle / bottom

unité numériqueunité numérique

définit l’espace entre le bord du tableau et les cellules définit l’espace entre les cellules

définit la largeur du tableaudéfinit la hauteur du tableau

définit la couleur de fond du tableaudéfinit une image en arrière plan du tableau

définit la taille de la borduredéfinit la couleur de la borduredéfinit la couleur aux points culminants de la borduredéfinit la couleur de l’ombre de la bordure

définit la largeur de la celluledéfinit la hauteur de la cellule

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

définit l’alignement horizontal du contenudéfinit l’alignement vertical du contenu

définit la fusion de 2 cellules adjacentes sur une lignedéfinit la fusion de 2 cellules adjacentes sur une colonne


44


IX. FRAMES


<frameset>

<frame>

colsrows

frameborderborderbordercolor

framespacing

srcname



scrolling

noresize


yes / nopixelhexadecimale

pixel



pixelpixel

yes / no / auto


définit un format de frameset verticaldéfinit un format de frameset horizontal

définit une bordure de framesetdéfinit la taille d’une bordure de framesetdéfinit la couleur d’une bordure de frameset

définit l’espace entre les cadres d’un frameset

définit la source relative ou absolue des framesdéfinit une identité à chaque frame

définit une bordure de framedéfinit la taille d’une bordure de framedéfinit la couleur d’une bordure de frame

définit la largeur des marges interieures d’une framedéfinit la hauteur des marges interieures d’une frame


interdit le redimenssionement manuel d’une frame

X. I-FRAMES


<iframe> srcname

widthheight



scrolling

noresize


pixelpixel


pixelpixel

yes / no / auto


définit la source relative ou absolue d’une iframedéfinit une identité à chaque iframe

définit la largeur d’une iframedéfinit la hauteur d’une iframe

définit une borduredéfinit la taille d’une borduredéfinit la couleur d’une bordure

définit la largeur des marges interieuresdéfinit la hauteur des marges interieures


interdit le redimenssionement manuel


45


XI. FORMULAIRES


<form>

<input>

<select>

<textarea>

methodactionenctype

type

sizemaxlengthnamevalue

name

namecolsrows

postmailto:nom@urltext/plain

text / radio / checkboxsubmit / resetpixelpixelvariable à définirvariable à définir


variable à définirpixelpixel

définit le format du formulairedéfinit l’action de transmission des donnéesdéfinit le format des données transmises

définit le type de champ de saisie (texte ou bouton)

définit le nombre de caractères visibles dans le champdéfinit le nombre de caractères maximum à la saisiedéfinit l’identité d’un ou de plusieurs champsdéfinit le contenu du champ lors de la réception

définit l’identité d’un ou de plusieurs champs

définit le contenu du champ lors de la réceptiondéfinit la largeur du champdéfinit la hauteur du champ


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

47


13. Javascript

I. INTRODUCTION

II. QU’EST CE QUE LE JAVASCRIPT ?

III. JAVA OU JAVASCRIPT ?

IV. A QUOI RESSEMBLE UN CODE JAVASCRIPT ?

48


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.

13. Javascript

49


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-8859-1"></script>

13. Javascript

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)

51


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>

14. JS / Menus dynamiques

52


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’,’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>

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>


53


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.jpgPour onMouseOver > image_01_f2.jpgPour onClick > image_01_f3.jpg


54


15. Javascript / popup

I. QU’EST CE QU’UNE POPUP ?

II. ATTRIBUTS

III. OUVERTURE D’UNE POPUP SIMPLE 1. avec javascript séparé 2. avec javascript inclu

IV. FERMETURE D’UNE POPUP

55


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

widthheight

lefttop

locationdirectorieshistorystatustoolbarmenubarscrollbarsfullscreenresizable

pixelpixel

pixelpixel

yes / noyes / noyes / noyes / noyes / noyes / noyes / noyes / noyes / no

définit la largeur de la fenêtredéfinit la hauteur de la fenêtre

définit la position horizontale sur l’écrandéfinit la position verticale sur l’écran

définit l’affichage de la barre d’adressedéfinit l’affichage de la barre de dossiersdéfinit l’affichage de la barre d’historiquedéfinit l’affichage de la barre de statutdéfinit l’affichage de la barre d’outilsdéfinit l’affichage de la barre de menudéfinit l’affichage des ascenseursdéfinit l’ouverture de la fenêtre en plein écrandé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,scrollbars=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>

15. JS / Popup

56


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=no,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>

15. JS / Popup

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>

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.

59


18. Introduction au XHTML

I. GENERALITES

II. LE DOCTYPE / DTD 1. Qu’est ce que c’est ? 2. Les differentes DTD 3. Choisir sa DTD

III. LA BALISE <HTML>

IV. 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é

60


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" «http://www.w3.org/TR/html4/loose.dtd">

• HTML4.01 strict<!DOCTYPE html PUBLIC «-//W3C//DTD HTML 4.01//EN" «http://www.w3.org/TR/html4/strict.dtd">

• HTML4.01 frameset<!DOCTYPE html PUBLIC «-//W3C//DTD HTML 4.01 Frameset//EN" «http://www.w3.org/TR/html4/frameset.dtd">

• XHTML1.0 strict<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Strict//EN" «http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

• XHTML1.0 transitionel<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN" «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

• HTML4.01 frameset<!DOCTYPE HTML PUBLIC «-//W3C//DTD XHTML 1.0 Frameset//EN" «http://www.w3.org/TR/xhtml1/frameset.dtd">

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 :http://www.alsacreations.com/article/lire/560-DTD-comment-choisir.html


http://www.alsacreations.com/article/lire/560-DTD-comment-choisir.html

61


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="http://www.w3.org/1999/xhtml">

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="http://www.w3.org/1999/xhtml"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 minusculesHTML 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 fermetureEn html certaines balises de fermeture sont facultatives, tandis que d’autres sont obligatoires. En XHTML toutes les balises de fermeture sont obligatoires.

• Balises célibatairesUne balise célibataire comme <br> s’écrit désormais <br />

• Valeurs des attributsEn 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éensCertains 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">


62


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".


63


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.


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

65


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. http://www.csszengarden.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.

19. CSS / Introduction

66


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 */


67


3. Structure

Toutes les CSS ont la même structure

1. Sélecteur : balise html, classe ou ID2. 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) :

px pixel% pourcentageem largeur de policeex hauteur police

• Unités de longueur absolues :

mm millimètrescm centimètresin poucespt point =1/72 de poucespc pica = 12points


68


20. CSS / Les sélecteurs

I. LES 3 TYPES DE SELECTEURS 1. Les sélecteurs HTML 2. Les CLASS 3. Les ID

II. LES PSEUDO CLASSES 1. Pseudo classes de lien 2. Pseudo classes de lien personnalisée

II. REGROUPEMENT DE SELECTEURS

69


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 css2. 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.


70


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} pour les liens par défauta:visited {propriétés} pour les liens visitésa:hover {propriétés} pour les liens survolésa:active {propriété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 soulignementunderline soulignementline-through barréoverline un trait au-dessusunderline 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}


71


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électeursh1, h2, h3 {propriétés}

• un espace entre 2 sélecteurs signifie la descendancep h1 {propriétés} (tous les h1 de ce p seront affectés)

• un > signifie la filiation directep> h1 {propriétés} (descendance directe père/fils)

• un + signifie l’adjacenceh3 + 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.


72


21. CSS / Les propriétés

I. GENERALITéS

II. PROPRIETES DU TEXTE

III. PROPRIETES DES LISTES

IV. PROPRIETES DES COULEURS

V. PROPRIETES DES ARRIERES PLANS

VI. PROPRIETES DES BLOCS BORDURES ET MARGES

VI. PROPRIETES POUR BODY

73


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 taille, style, couleur.Texte alignement, casse, interlignage, espace entre les mots et les lettresCouleur exprimée en valeur hexadécimaleArrière-plans couleur ou images.Blocs, bordures et marges largeur, hauteur, style, épaisseurs, couleurs, remplissage.Interface puces, indentation, curseur, ascenseurs.Positionnement emplacement exact sur l’écran.Affichage et visibilité si un élément apparaît et comment.Impression 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 / obliquenormal / small-capsnormal / boldxx-small / x-small / small / medium / large / x-large / xx-large / valeurserif / sans-serif / monospace / cursive / fantasy / verdana / arial / times

ItaliquePetites capitalesGrasTailleFamille de caractère

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>

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>


74


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


text-align:line-height:text-indent:text-transform:text-decoration:word-spacing:letter-spacing:

left / right / center / justifynormal / pourcentage / valeurnombre / pourcentagenone / capitalize / lowercase / uppercasenone / underline / overline / line-trough / blinkvaleur / valeur négativevaleur / valeur négative

AlignementInterlignageIndentationCapitalesAutresIntermotsInterlettrage

.font{ text-align : left;line-height : normal;text-indent : inherit;text-transform : none;text-decoration : none; word-spacing : inherit;letter-spacing : inherit;}

CAS PARTICULIERS :

• Pour text-decoration: - «La valeur « Blink " 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; }


75


III. PROPRIETES DES LISTES


list-style-type:

list-style-image: (‘url’);

none / disc / circle / squaredecimal / upper-alpha / lower-alpha / upper-roman / lower-roman

url

Liste non numérotéeListe numérotée

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 Listes numérotés

<ul> <ol><li>premier <li>premier<li>deuxième <li>deuxième</ul> </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’); }


76


IV. PROPRIETES DES COULEURS


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; }


77


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.


background-color:background-image:background-repeat:background-attachment:background-position:

transparent / hexadecimal;none / urlno-repeat / repeat-x / repeat-yscroll / fixed left / right / center / top / bottom / pixel / pourcentage

CouleurImageImg repetitionImg scrollingImg positionnement

.bkg{ background-color : transparent;background-image : url(‘images/bkg-base.jpg’);background-repeat : no-repeat;background-attachment: fixed; background-position : left top; }

RACCOURCI : avec background: il est possible de 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;}


78


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.


width:height:

auto, pourcentage, valeur;auto, pourcentage, valeur;

Largeur Hauteur

• La marge extérieure ou margin


margin-top:margin-right:margin-bottom:margin-left:

auto / pourcentage / valeurauto / pourcentage / valeurauto / pourcentage / valeurauto / pourcentage / valeur

Marge ext. hauteMarge ext. droiteMarge ext. basseMarge ext. gauche

• La marge intérieure ou padding


padding-top: padding-right: padding-bottom:padding-left:


Marge int. hauteMarge int. droiteMarge int. basseMarge int. gauche

• La bordure ou border

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.


border-width: border-color:border-style:

border-top-_: border-right-_: border-bottom-_:border-left-_:

thin / medium / thick / valeurrgb / hexadecimale / nominativenone / solid / dotted / dashed / double / groove / ridge / inset / outset

variable à définirvariable à définirvariable à définirvariable à définir

EpaisseurCouleur Style

Bord hautBord droitBord basBord gauche


79


Donc, pour un même bloc défini, nous obtiendrons...

.bloc{ width : auto; height : auto;

padding-top : auto;padding-right : auto;padding-bottom: auto;padding-left : auto;

margin-top : auto;margin-right : auto;margin-bottom : auto;margin-left : auto; border-width : 1px;border-color : black;border-style : solid;}

RACCOURCI : Les 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 : auto; height : auto;

padding : auto auto auto auto;margin : auto auto auto auto;border : 1px black solid;}

Dans le cas de padding: et margin: si on ne met que deux longueurs elles 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.


80


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;}


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;}

82


23. CSS / Positionnements

I. GENERALITéS

II. BOITE DE TYPE BLOC

III. BOITE DE TYPE EN LIGNE

IV. 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

83


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 divLe paragraphe pLes titres h1, h2, h3, h4, h5, h6Les 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

.jaune {margin-left : auto;margin-right : auto;width : 200px;background-color : #ffff00;}

.verte {margin-left : auto;margin-right : auto;width : 200px;background-color : #00ff00;}

III. BOITE DE TYPE EN 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 spanLe lien aL’image imgLes 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 : auto;margin-right : auto;width : 200px;background-color : #ffff00;}

.verte {margin-left : auto;margin-right : auto;width : 200px;background-color : #00ff00;}


84


IV. POSITION


position:

left: top: bottom:right:

staticrelativeabsolutefixedinherit


Positionnement habituel (par defaut) de l’élémentPositionnement par rapport à l’élément précédentPositionnement par rapport aux bords de la page, défile avec pagePositionnement par rapport aux bords de la page, ne défile pas avec pageMême valeur que celle de l’élément parent

• 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;}


85


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 : relative;background-color : #00ff00;}

.jaune {position : absolute;top : 10px;right : 10px;background-color : #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;}


86


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 : 10px;}

.jaune {width : 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;}


87


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...

4. Position flottante

4.1 Généralités


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 : 100px;background-color : #ffff00;float : right;}

.verte {background-color : #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.


88


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>

CSSIdem

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> CSSIdem +…

.spacer {clear : both;}

Le spacer, ne pouvant se placer à côté du bloc flottant, se trouve décalé plus bas que celui-ci.


clear: none / both / left / right


89


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>

CSSIdem +…

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>

CSSIdem +…

hr {clear : both;visibility: hidden;}


90


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> <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…</div>

CSS

.conteneur { width : 100%;}

.flottante { width : 100px; margin : 2px; background-color : #00ff00; float : 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.


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.

92


25. CSS / Trucs & astuces

I. APPLIQUER DEUX CLASSES à UNE BALISE

II. FONTES SPECIFIQUES

III. PALLIER LE PROBLèME DE LA LARGEUR DE BOîTE DANS IE PC

IV. CENTRER LES éLéMENTS DANS LA PAGE, HORIZONTALEMENT

V. CENTRER LE CONTENU D’UNE PAGE EN POSITION ABSOLUE

VI. COLORATION DES ASCENSEURS DANS LES PAGES (PC SEULEMENT)

VII. EMPêCHER LA COLORATION DES ASCENSEURS DANS LES PAGES (PC SEULEMENT)

VIII. FAIRE DéFILER DES IMAGES HORIZONTALEMENT DANS UN DIV

IX. FAIRE DES OMBRES PORTéES SUR VOS BOîTES

93


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 : 100px;border : 5px;padding : 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 : 150px}

#box div{border : 5px;padding : 20px}

25. Trucs et astuces

94


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 : 50px 0px; padding : 0px; text-align : center; }

#Content { width : 500px; margin : 0px auto; text-align : left; padding : 15px; border : 1px dashed #333; background-color : #eee; }

V. CENTRER LE CONTENU 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 :0px; Padding :0px;}#Content { position : absolute; left : 50%; width : 500px; margin-top : 50px; margin-left : -266px; padding : 15px; border : 1px dashed #333;background-color : #eee;}

VI. COLORATION DES ASCENSEURS DANS LES PAGES (PC SEULEMENT)

body, html {scrollbar-face-color : #000000;scrollbar-shadow-color : #000000;scrollbar-highlight-color : #000000;scrollbar-3dlight-color : #000000;scrollbar-darkshadow-color : #000000;scrollbar-track-color : #000000;scrollbar-arrow-color : #000000;}


95


VII. EMPêCHER LA COLORATION DES ASCENSEURS DANS LES PAGES (PC SEULEMENT)

body, html {scrollbar-face-color : ThreeDFace !important;scrollbar-shadow-color : ThreeDDarkShadow !important;scrollbar-highlight-color : ThreeDHighlight !important;scrollbar-3dlight-color : ThreeDLightShadow !important;scrollbar-darkshadow-color : ThreeDDarkShadow !important;scrollbar-track-color : Scrollbar !important;scrollbar-arrow-color : ButtonText !important;}

VIII. FAIRE 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 : inline;height : 100px;padding : 0px;}


96


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 : #ccc; margin : 3em 0 3em 5em;padding : 1,5em;}

#contenu {background-color : #ffd;border : thin solid #999; margin : -3em 0 0 -3em;padding : 1.5em;}


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.

98


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.


99


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.


100


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 1995. 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.


101


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.


102


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 (http://www.exemple.com/ressources/fichier.html), 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 (www.exemple.com), 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.


html, javascript, xhtml & css

Documents