// HTML, Javascript XHTML & CSS

(1)

design graphique / web design

// HTML, Javascript XHTML & CSS

version 1.0

date 28 / 04 / 2010 auteur Loïc Swiny

contact mr@sweeen.com

(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

HTML

01. Introduction au langage HTML

02. Introduction aux principes généraux du webdesign et première maquette 03. HTML, les bases

04. La balise <BODY>

05. Texte / alignement, formatage, listes 06. Liens

07. Images & Map 08. Tableaux

09. Frames & I-Frames 10. Formulaires

11. Récapitulatif des balises les plus courantes

JAVASCRIPT

13. Introduction au Javascript 14. Menus dynamiques 15. Popup

16. Full screen

17. Restriction d’accès au contenu

XHTML

18. Introduction au XHTML

CSS

19. Introduction et principe de base 20. Sélecteurs

21. Propriétés

22. Cascades et conflits d’héritage 23. Positionnement

24. Feuille de style pour l’impression 25. Trucs & astuces

LEXIQUE GENERAL

(3)

3 HTML, Javascript, XHTML & CSS

01. Introduction au langage HTML

I. HISTORIQUE

II. QUI UTILISE LE HTML ?

III. APPRENDRE LE HTML

(4)

HTML, Javascript, XHTML & CSS

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.

01. Introduction au HTML

(5)

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)

HTML, Javascript, XHTML & CSS

02. Introduction auw principes

généraux du webdesign & première maquette

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

7 HTML, Javascript, XHTML & CSS

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

# print docs .jpg basse définition en racine

# indd docs indesign

# eps docs illustrator

# pdf docs exportés au format pré-print

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

HTML, Javascript, XHTML & CSS

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

02. Introduction au webdesign

(9)

9 HTML, Javascript, XHTML & CSS

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)

02. Introduction au webdesign

(10)

HTML, Javascript, XHTML & CSS

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

02. Introduction au webdesign

(11)

11 HTML, Javascript, XHTML & CSS

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)

HTML, Javascript, XHTML & CSS

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

03. HTML, les bases

(13)

13 HTML, Javascript, XHTML & CSS

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)

HTML, Javascript, XHTML & CSS

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)

15 HTML, Javascript, XHTML & CSS

04. La balise <BODY>

Structure fondatrice des éléments qui seront visibles sur votre page, la balise <BODY> est à même de recevoir un certain nombre d’attributs dont certains sont incontournables

balise attribut valeurs effet

<body> topmargin leftmargin marginwidth marginheight bgcolor background

style

bgproperties scroll text link alink vlink

pixel pixel pixel pixel

hexadecimale url relatif url absolu

background-repeat: no-repeat;

background-repeat: x;

background-repeat: y;

fixed

yes / no / auto hexadecimale hexadecimale hexadecimale hexadecimale

définit les marges haute et basse de la page (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 page

définit les marges gauche et droite de la page définit la couleur du fond

définit la source relative de l’image de fond définit la source absolue de l’image de fond définit la non répétition du bkg (css intégrée) définit la répétition du bkg sur l’axe X (css intégrée) définit la répétition du bkg sur l’axe Y (css intégrée) définit si la capacité du fond à scroller avec la page définit la présence de la barre de scroll sur la page définit la couleur du texte pour la page

définit la couleur des liens pour la page définit la couleur des liens actifs pour la page définit la couleur des liens visités pour la page

<BODY leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" bgcolor="#aaaaaa" background="images/

bkg.jpg" style="background-repeat:no-repeat;" bgproperties="fixed" link="#ff0000" alink="#33FF00"

vlink="#FF9900" >

(16)

HTML, Javascript, XHTML & CSS

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)

17 HTML, Javascript, XHTML & CSS

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

(18)

HTML, Javascript, XHTML & CSS

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 left right center justify

aligne le texte sur la marge de gauche aligne le texte sur la marge de droite centre le texte entre les marges justifie le texte

ferrage avec en-tête : <h1 align="center">titre</h1>

ferrage avec paragraphe : <p align="left">texte</p>

05. Le texte

(19)

19 HTML, Javascript, XHTML & CSS

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

left right center pixel, % de 1 à 10 hexadecimale sans

aligne la ligne horizontale à gauche aligne la ligne horizontale à droite aligne 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

sans type

disc circle square sans I A a

puce cercle carré

chiffres arabes par défaut chiffres rommains

lettres alphabétiques majuscules lettres alphabétiques minuscules

<ul type="disc">

<li>premier</li>

<li>deuxième</li>

</ul>

<ol type="a">

<li>premier</li>

<li>deuxième</li>

</ol>

05. Le texte

(20)

HTML, Javascript, XHTML & CSS

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)

21 HTML, Javascript, XHTML & CSS

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

url relatif url absolu

_self _blank _parent _top

variable à définir

variable à définir variable à définir

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

appelle la page cible dans le cadre d’appel appelle la page cible dans une nouvelle fenêtre appelle la page cible dans le cadre parent (de niveau immédiatement supérieur) appelle la page cible dans la fenêtre hôte (par-dessus le FRAMESET)

définit une description du lien

(identique à l’attribut ALT pour une image) définit une identité au lien

définit une feuille de style

<a href="fichier.html" title="nomdufichier" target="_blank">texte</a>

II. DENOMINATIFS DES FICHIERS ET DOSSIERS

• Les noms de vos fichiers et de vos dossiers vont constituer vos urls ; sachant que c’est un des premiers endroits que les moteurs de recherche vont analyser pour trouver les mots-clés, il est judicieux de choisir des noms de dossiers en rapport avec le contenu de vos pages.

Par exemple une page portfolio, aura plus de chances d’être trouvée si l’url est portfolio/index.htm que 02/index.htm

• Les accents, les espaces et les caractères de ponctuation sont INTERDITS dans les noms de dossiers et de fichiers, il est néanmoins possible d’inclure des tirets et des tirets bas (underscore).

• Il est recommandé de n’utiliser que des minuscules, car une fois vos pages sur un serveur, les urls deviennent sensibles à la casse.

“index.htm" N’EST PAS la même chose que “INDEX.htm"

06. Les liens

(22)

HTML, Javascript, XHTML & CSS

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>

06. Les liens

(23)

23 HTML, Javascript, XHTML & CSS

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:nom@url.com">Contact</a>

Pour prédéfinir l’objet du mail vous pouvez rajouter ?subject= au corps de l’attibut...

<a href="mailto:nom@url.com?subject=l’objet de votre mail">Contact</a>

06. Les liens

(24)

HTML, Javascript, XHTML & CSS

07. Les images

I. BALISE <IMG> ET ATTRIBUTS

II. LES CARTES CLIQUABLES (OU MAP)

(25)

25 HTML, Javascript, XHTML & CSS

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 variable à définir

pixel pixel left right top middle bottom

variable à définir 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)

HTML, Javascript, XHTML & CSS

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)

27 HTML, Javascript, XHTML & CSS

08. Les tableaux

I. GENERALITéS

II. TABLEAUX AVEC FUSION 1. L’attribut colspan

2. L’attribut rowspan

2. Les attributs colspan & rowspan

(28)

HTML, Javascript, XHTML & CSS

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>

cellpadding cellspacing width height bgcolor background border bordercolor bordercolorlight bordercolordark

width height bgcolor background align

valign colspan rowspan

pixel pixel

pixel / pourcentage pixel / pourcentage hexadecimale

url relatif ou absolu à définir pixel

hexadecimale hexadecimale hexadecimale

url relatif ou absolu à définir left / center / right

top / middle / bottom unité numérique unité 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 tableau définit la hauteur du tableau

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

définit la couleur de la bordure

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

définit la largeur de la cellule dé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 contenu définit l’alignement vertical du contenu

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

08. Les tableaux

(29)

29 HTML, Javascript, XHTML & CSS

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)

HTML, Javascript, XHTML & CSS

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

<TR>

</TR>

<TR>

<TD>cell 2</TD>

<TD>cell 3</TD>

</TR>

<TR>

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

<TR>

<TD rowspan="2">cell 1</TD>

<TD>cell 2</TD>

cell 1 cell 2

cell 3

08. Les tableaux

(31)

31 HTML, Javascript, XHTML & CSS

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.

<TR>

<TD rowspan="4">cell 1</TD>

<TD colspan="3"> cell 2</TD>

</TR>

<TR>

<TD> cell 3</TD>

</TR>

<TR>

</TR>

<TR>

</TR>

</TABLE>

cell 1 cell 2

cell 3 cell 4 cell 5

cell 6 cell 7

cell 8 cell 9

08. Les tableaux

(32)

HTML, Javascript, XHTML & CSS

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)

33 HTML, Javascript, XHTML & CSS

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

</frameset>

</html>

affichage

zone 1 zone 2

construction frameset

zone 1 zone 2

• Deux frame horizontales et deux frames verticales

<html>

<head>

</head>

<frameset rows="20,80">

<frameset cols="20,80">

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

HTML, Javascript, XHTML & CSS

<frame>

cols rows

frameborder border bordercolor framespacing src

name frameborder border bordercolor marginwidth marginheight scrolling noresize

pixel / pourcentage pixel / pourcentage yes / no

pixel

hexadecimale pixel

yes / no pixel

hexadecimale pixel

pixel

yes / no / auto attribut sans valeur

définit un format de frameset vertical définit un format de frameset horizontal définit une bordure de frameset

définit la taille d’une bordure de frameset dé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 frames définit une identité à chaque frame

définit une bordure de frame

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

définit la largeur des marges interieures d’une frame dé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

<html>

<head>

</head>

<frameset cols="20,80" frameborder="no" framespacing="10">

<frame src="zone1.htm" name="zone1" frameborder="no" scrolling="no" noresize>

<frame src="zone2.htm" name="zone2" frameborder="no" scrolling="auto" noresize>

</frameset>

</html>

3. Les attributs ROWS & COLS

rows et cols définissent le type de cadre, qui peut être horizontal (rows/rangée) ou vertical (cols/colonnes).

Ils prennent une serie de valeurs séparées par des virgules. Ces valeurs sont exprimées en pourcentage (valeurs relatives) ou plus généralement en pixel (valeurs absolues).

Une valeur «exotique", l’étoile (*) fera s’ajuster automatiquement la colonne ou la rangée concernée sur l’espace maximum laissé par les autre dans l’ensemble de frame.

<frameset cols="50,*">

4. Les liens appliqués aux frames

Normalement, les pages appelées par des liens s’affichent dans la frame où les liens ont été activés, mais l’attribut de lien target permet d’appeler un cadre par son nom défini avec l’attribut name.

09. Les frames

(35)

35 HTML, Javascript, XHTML & CSS

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

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

pixel pixel yes / no pixel

hexadecimale pixel

pixel

yes / no / auto attribut sans valeur

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

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

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

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

définit l’autorisation d’attribution d’une scrollbar interdit le redimenssionement manuel

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

09. Les frames

(36)

HTML, Javascript, XHTML & CSS

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)

37 HTML, Javascript, XHTML & CSS

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 classique

GET pour (par exemple) définir un moteur de recherche sur votre site

2. Action

Adresse le formulaire vers l’URL du script CGI (fourni par le serveur qui héberge vos pages), qui accepte l’information et vous le retourne suivant les paramètres définis.

Les valeurs les plus couramment utilisées sont :

«mailto:nom@url" : Pour l’envoi du formulaire par le logiciel de messagerie de votre visiteur.

«/cgi-bin/mailer" : Pour l’envoi du formulaire par le script CGI de votre hébergeur

3. Enctype

Cet attribut spécifie le format des données envoyées, dans le cas où un protocole n’imposerait pas de format précis.

Il possède plusieurs valeurs dont :

«text/plain" : Valeur utilisée dans le cas d’un formulaire classique

«multipart/form-data" : Valeur utilisée dans le cas où le formulaire comprendrait un fichier attaché.

Ci-dessous un exemple de code complet :

<form method="post" action="mailto:bob@gmail.com?subject=mes questions en html" enctype="text/plain">

...

</form>

10. Les formulaires

(38)

HTML, Javascript, XHTML & CSS

<form>

<input>

method action enctype type size maxlength name value name name cols rows

post

mailto:nom@url text/plain

text / radio / checkbox submit / reset

pixel pixel

variable à définir variable à définir variable à définir variable à définir pixel

pixel

définit le format du formulaire

définit l’action de transmission des données dé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 champ définit le nombre de caractères maximum à la saisie définit l’identité d’un ou de plusieurs champs définit le contenu du champ lors de la réception définit l’identité d’un ou de plusieurs champs définit le contenu du champ lors de la réception définit la largeur du champ

définit la hauteur du champ

III. LES OBJETS DE FORMULAIRE 1. Champ de texte

Il permet de laisser une courte information (nom, prénom, etc...)

<input type="text" size="20" maxlength="40" name="nomduchamp">

2. Boutons radio (radiobox)

Ils ne permettent qu’un seul choix.

<input type="radio" name="abonnement" value="oui">oui

<input type="radio" name="abonnement" value="non">non oui non

3. Cases à cocher (checkbox)

Elles permettent un ou plusieurs choix.

<input type="checkbox" name="interet" value="musique">musique

<input type="checkbox" name="interet" value="danse">danse

<input type="checkbox" name="interet" value="informatique">informatique musique danse informatique

10. Les formulaires

(39)

39 HTML, Javascript, XHTML & CSS

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)

HTML, Javascript, XHTML & CSS

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)

41 HTML, Javascript, XHTML & CSS

I. BODY

<body> topmargin leftmargin marginwidth marginheight bgcolor background

style

bgproperties scroll text link alink vlink

pixel pixel pixel pixel

hexadecimale url relatif url absolu

background-repeat: no-repeat;

background-repeat: x;

background-repeat: y;

fixed

yes / no / auto hexadecimale hexadecimale hexadecimale hexadecimale

définit les marges haute et basse de la page (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 page

définit les marges gauche et droite de la page définit la couleur du fond

définit la source relative de l’image de fond définit la source absolue de l’image de fond définit la non répétition du bkg (css intégrée) définit la répétition du bkg sur l’axe X (css intégrée) définit la répétition du bkg sur l’axe Y (css intégrée) définit si la capacité du fond à scroller avec la page définit la présence de la barre de scroll sur la page définit la couleur du texte pour la page

définit la couleur des liens pour la page définit la couleur des liens actifs pour la page définit la couleur des liens visités pour la page

II. TEXTE

<u>

<sup>

<sub>

/ / / / /

gras italique souligné exposant indice

III. TITRE / PARAGRAPHE

<p>

<div>

align left

right center justify

aligne le texte sur la marge de gauche aligne le texte sur la marge de droite centre le texte entre les marges justifie le texte

11. Recap’ des balises

(42)

HTML, Javascript, XHTML & CSS

IV. TRAIT HORIZONTAL

<hr> align

width size color noshade

left right center pixel, % de 1 à 10 hexadecimale sans

aligne la ligne horizontale à gauche aligne la ligne horizontale à droite aligne 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

sans type

disc circle square sans I A a

puce cercle carré

chiffres arabes par défaut chiffres rommains

lettres alphabétiques majuscules lettres alphabétiques minuscules

VI. LIENS

<a> href

target

title

name

url relatif url absolu

_self _blank _parent _top

variable à définir

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

appelle la page cible dans le cadre d’appel appelle la page cible dans une nouvelle fenêtre appelle la page cible dans le cadre parent (de niveau immédiatement supérieur) appelle la page cible dans la fenêtre hôte (par-dessus le FRAMESET)

définit une description du lien

(identique à l’attribut ALT pour une image) définit une identité au lien

11. Recap’ des balises

(43)

43 HTML, Javascript, XHTML & CSS

VII. IMAGES

<img> src name width height align

alt border bordercolor hspace vspace

url relatif ou absolu variable à définir pixel

pixel left right top middle bottom

variable à définir 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

VIII. TABLEAUX

<table>

<tr> &

<td>

cellpadding cellspacing width height bgcolor background border bordercolor bordercolorlight bordercolordark

width height bgcolor background align

valign colspan rowspan

pixel pixel

url relatif ou absolu à définir pixel

hexadecimale hexadecimale hexadecimale

url relatif ou absolu à définir left / center / right

top / middle / bottom unité numérique unité 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 tableau définit la hauteur du tableau

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

définit la couleur de la bordure

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

définit la largeur de la cellule dé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 contenu définit l’alignement vertical du contenu

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