Cours Html5 Et Css3
Cours Html5 Et Css3
Cours Html5 Et Css3
CSS3
SAGAR Samya
Introduction
2 SAGAR Samya
Gnralits sur le langage HTML (1)
HTML 5 (HyperText Markup Language) est un langage de balisage (dit aussi
langage de marquage) qui permet de structurer le contenu des pages web
dans diffrents lments.
Historiquement, les langages de balisage sont issus du langage SGML
(Standard Generalized Markup Language) cr en 1986 pour structurer des
contenus trs divers.
Ce langage sest rvl trop complexe pour tre appliqu tel quel au Web, do la
ncessit den crer une version allge respectant les mmes principes essentiels.
Linventeur du HTML (1992), Tim Berners-Lee, lavait conu lorigine
comme un outil de structuration des contenus, principalement textuels, et
non pas pour crer des prsentations diversifies.
Ce sont les dveloppements successifs, lessor populaire du Web et la concurrence
acharne entre Netscape et Microsoft pour semparer du march des navigateurs, qui
ont dtourn HTML de sa vocation premire avec lajout dlments de prsentation
qui navaient rien y faire.
Voulant faire mieux que lautre, chacun des deux grands a empil des couches
superflues sur HTML.
3 SAGAR Samya
Gnralits sur le langage HTML (2)
Il faut galement reconnatre que lentre du Web dans le grand public ncessitait
de rpondre une demande dinterfaces graphiques plus esthtiques.
Labsence dun langage particulier ddi uniquement la prsentation poussait
effectivement les webmestres utiliser tous les moyens pour crer des prsentations
visuelles agrables.
Lapparition de CSS (Cascading Styles Sheets), cr en 1996 par Hkon Wium Lie,
aurait d rsoudre le problme du dtournement de HTML de sa destination
premire.
Mais les mauvaises habitudes taient prises et la facilit faisait le reste.
Lapparition de HTML 4, et particulirement de sa version strict associe lemploi
systmatique de CSS 2 (publi en 1998), pouvait apporter une solution efficace ce
problme.
Limpossibilit pour le W3C de trouver un consensus entre les diteurs de
navigateurs et les crateurs de moteurs de recherche pour faire voluer XHTML a
conduit un Groupe indpendant, le WHATWG (Web Hypertext Application
Technology Working Group) dirig par Ian Hickson (aujourdhui chez Google !),
entamer le dveloppement de HTML 5.
4 SAGAR Samya
HTML et CSS : deux langages pour
crer un site web (1)
HTML (HyperText Markup Language) : il a fait son
apparition ds 1991 lors du lancement du Web. Son rle
est de grer et organiser le contenu. C'est donc en HTML
que vous crirez ce qui doit tre affich sur la page : du
texte, des liens, des images
Vous direz par exemple : Ceci est mon titre, ceci est mon
menu, voici le texte principal de la page, voici une image
afficher, etc. .
CSS (Cascading Style Sheets, aussi appeles Feuilles de
style) : le rle du CSS est de grer l'apparence de la page
web (agencement, positionnement, dcoration, couleurs,
taille du texte).
Ce langage est venu complter le HTML en 1996
5 SAGAR Samya
HTML et CSS : deux langages pour
crer un site web (2)
HTML
(sans CSS)
HTML
Et CSS
6 SAGAR Samya
Les versions de HTML
HTML 1 : c'est la toute premire version cre par Tim Berners-Lee en 1991.
HTML 2 : la deuxime version du HTML apparat en 1994 et prend fin en 1996
avec l'apparition du HTML 3.0. C'est cette version qui posera en fait les bases des
versions suivantes du HTML. Les rgles et le fonctionnement de cette version sont
donns par le W3C (tandis que la premire version a t cre par un seul
homme).
HTML 3 : apparue en 1996, cette nouvelle version du HTML rajoute de
nombreuses possibilits au langage comme les tableaux, les applets, les scripts, le
positionnement du texte autour des images, etc.
HTML 4 : il s'agit de la version la plus rpandue du HTML (plus prcisment, il
s'agit de HTML 4.01). Elle apparat pour la premire fois en 1998 et propose
l'utilisation de frames (qui dcoupent une page web en plusieurs parties), des
tableaux plus complexes, des amliorations sur les formulaires, etc. Mais surtout,
cette version permet pour la premire fois d'exploiter des feuilles de style (CSS)
HTML 5 : c'est LA dernire version. Elle fait beaucoup parler d'elle car elle
apporte de nombreuses amliorations comme la possibilit d'inclure facilement des
vidos, un meilleur agencement du contenu, de nouvelles fonctionnalits pour les
formulaires, etc.
7 SAGAR Samya
Les versions de CSS
CSS 1 : ds 1996, on dispose de la premire version du CSS.
Elle pose les bases de ce langage qui permet de prsenter sa
page web, comme les couleurs, les marges, les polices de
caractres, etc.
CSS 2 : apparue en 1999 puis complte par CSS 2.1, cette
nouvelle version de CSS rajoute de nombreuses options. On
peut dsormais utiliser des techniques de positionnement trs
prcises, qui nous permettent d'afficher des lments o on le
souhaite sur la page.
CSS 3 : c'est la dernire version, qui apporte des
fonctionnalits particulirement attendues comme les
bordures arrondies, les dgrads, les ombres, etc.
8 SAGAR Samya
HTML en pratique (1)
Trs concrtement, un document HTML, lors de son
criture, est un simple fichier texte dont certaines
parties portent une signification particulire,
On appelle le balisage (markup).
Le balisage dfinit ainsi une suite structure imbrique
dlments qui constitue le document.
Un lment est une suite dentits HTML dlimite par des
tiquettes (tags) et reprsentant une unit structurelle du
document :
titre, liste, paragraphe, texte mis en vidence, citation, etc.
HTML dfinit quels sont les lments existants, leurs
attributs et les rgles dimbrication de ces lments.
9 SAGAR Samya
HTML en pratique (2)
Les entits
On appelle entit SGML une unit textuelle. Sa plus simple
expression est un caractre non spcial, cest--dire nimporte lequel
sauf <, >, & et quelques autres qui dpendent de la DTD utilise.
Mais une entit peut tre aussi constitue par une squence de
caractres entoure par les dlimiteurs & et ; qui est remplace par
un autre texte permettant ainsi dabrger un document en
remplaant certaines squences longues et frquentes par une
abrviation plus courte.
Dans HTML les entits complexes servent plutt coder les
caractres spciaux qui ont une signification particulire ou bien des
caractres internationaux lorsque lon veut assurer une stricte
conformit avec le jeu de caractres ASCII
10 SAGAR Samya
HTML en pratique (3)
Les tiquettes (balises ou tags) et les lments
On appelle balises (tags) les dlimiteurs des lments HTML.
Un lment est, la plupart du temps, dlimit par une balise initiale (start-
tag) de la forme <tag> et une balise finale (end-tag) de la forme </tag>.
Certains lments comme
BR (saut de ligne) nont pas dtiquette finale.
Dautres comme P (paragraphe),
LI (liste) ont des tiquettes finales optionnelles.
Les lments simbriquent les uns lintrieur des autres suivant des
rgles dfinies par le langage.
11 SAGAR Samya
HTML en pratique (4)
Les attributs
Les attributs permettent de modifier par dfaut dune balise, ou bien de
spcifier des informations indispensables (comme ladresse dune image
intgre la page, ou bien celle dun lien externe).
Pour chaque lment seuls certains attributs sont autoriss.
La valeur donne aux lments doit figurer entre guillemets ou
apostrophes et ne doit pas contenir de guillemets, apostrophes ou signes >
qui doivent, le cas chant, tre remplacs par les entits HTML
quivalentes.
<balise attribut1="Valeur1" attribut2="Valeur2" attribut3="Valeur3">
Exemple : Cet lment porte le nom de lien hypertexte. On y reconnat
ltiquette initiale <A> dans laquelle on trouve lattribut href qui porte la
valeur est http://www.essths.tn/.
<A href=http://www.essths.tn/>Serveur de lmes</a>
12 SAGAR Samya
HTML en pratique (5)
Les commentaires
Un document HTML peut contenir des commentaires qui
seront ignors par lanalyseur lors de la visualisation. Les
commentaires sont signals par les dlimiteurs SGML spciaux:
<!-- et -->
13 SAGAR Samya
Rgles de base HTML
Un document bien form
Un document HTML doit respecter certaines rgles simples:
Les lments et les attributs sont insensibles la casse.
Par exemple, <body> et <BODY>
Les lments non vides doivent avoir une balise douverture et une balise de
fermeture.
Les lments vides ne comportent quune seule balise et il est plus correct
de les terminer par les caractres /> prcds dun espace pour marquer la
fin de llment.
Par exemple, <br />
14 SAGAR Samya
Lenvironnement de travail
On utilise l'diteur de texte pour crer un fichier ayant
l'extension .html (par exemple : test.html). Ce sera notre
page web.
Exemple diteur de texte (Notepad++, jEdit, vim).
Ce fichier peut tre ouvert dans le navigateur web
simplement en faisant un double-clic dessus.
Le navigateur web est un programme qui permet d'afficher des
sites web. Il lit les langages HTML et CSS pour savoir ce qu'il
doit afficher.
Il existe de nombreux navigateurs web diffrents : Google Chrome,
Mozilla Firefox, Internet Explorer, Safari, Opera
Chacun affiche un site web de manire lgrement diffrente des
autres navigateurs.
15 SAGAR Samya
Structure des documents HTML
16 SAGAR Samya
Structure de base d'une page HTML
La structure divise le document en deux parties :
en en-tte dlimit par llment HEAD
et le corps du document limit par llment BODY.
Llment <HTML> est llment racine.
C'est la balise principale du code. Elle englobe tout le contenu
de votre page.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Titre du Document</TITLE>
</HEAD>
<BODY>
... Le corps du document avec le balisage appropri ...
</BODY>
</HTML>
17 SAGAR Samya
En-tte de document HEAD (1)
Llment HEAD contient des informations
administratives propos du document mais qui ne font
pas strictement partie de ce dernier.
Elles ne sont donc gnralement pas reprsentes par le
visualiseur dans le corps du document.
18 SAGAR Samya
En-tte de document HEAD (2)
Titre du document (TITLE)
Il sagit en fait du seul lment qui soit obligatoire dans un document
HTML.
Il donne un titre au document ou plus exactement une dnomination.
En effet le contenu de cet lment nest pas reprsent dans le corps du
document.
Les visualiseurs graphiques laffichent usuellement sur la barre de fentre
et lutilisent comme titre si vous insrez le document dans votre liste de
marque-pages (bookmarks).
19 SAGAR Samya
En-tte de document HEAD (3)
Meta-information, aide lindexage (META)
Llment META est un lment gnrique permettant de spcifier des
meta-informations propos du document.
Cet lment comprend essentiellement deux attributs qui sont :
name : Nom de la meta-information ;
Content : Valeur de la meta-information
Par exemple on peut ainsi spcifier lauteur du document
<META name=Author content=Oscar Figueiredo>
21 SAGAR Samya
En-tte de document HEAD (5)
Feuille de style incluse (STYLE)
Depuis la version 4.0, HTML permet dinclure une ou plusieurs feuilles
de style (voir les feuilles de styles plus loin dans le cours) lintrieur du
document HTML au moyen de llment STYLE.
Script (SCRIPT)
Cette balise permet d'introduire un script (un petit programme
permettant l'utilisation d'effets dynamiques dans la page). Elle admet un
attribut "requis", type, qui indique son... type (par exemple,
type="text/javascript"). L'attribut language est obsolte.
Cette balise admet d'autres attributs, comme src, qui indique l'URL du
fichier o se trouve le script.
Fichiers lis (LINK)
Cette balise permet de spcifier les URLs de fichiers lis dune manire
ou dune autre au document.
22 SAGAR Samya
Corps de document BODY
Le corps du document contient la suite dlments constituant
le document proprement dit :
en-ttes de chapitres, paragraphes, listes, tableaux,
Ces diffrents lments sont regroups logiquement et dcrits
dans les sections suivantes du cours.
Les attributs de la balise <BODY>
BACKGROUND : Un URL dsignant une image servant de toile de fond au
document ;
BGCOLOR : Une couleur utiliser comme fond de document ;
TEXT : Une couleur utiliser pour le texte du document ;
LINK : Une couleur utiliser pour mettre en vidence les hyperliens ;
VLINK : Une couleur utiliser pour les liens dj visits. ;
ALINK : Une couleur utiliser pour les liens activs.
23 SAGAR Samya
Le prologue DOCTYPE
Il est important (quoique non obligatoire) de dfinir sur la
premire ligne du document la version du langage utilise.
Cette dfinition de version sert essentiellement aux outils
de validation qui permettent de vrifier la syntaxe dun
document.
Ceci se fait au moyen dune formule SGML normalise
Dans HTML5 <!DOCTYPE html>
Plus complexe dans les versions html ultrieurs.
Exemple HTML4 strict: <!DOCTYPE HTML
PUBLIC -//W3C//DTD HTML 4.0//EN>
24 SAGAR Samya
Mise en forme de texte
25 SAGAR Samya
Formatage logique (1)
Titre et sous-titre
Il s'agit ici des titres qui s'afficheront dans la page (et non dans
la barre de titre comme la balise <title> prcdemment) : ce
sont les en-ttes de sections ou paragraphes.
Il existe six niveaux de titres d'importance dcroissante : <h1>,
<h2>, <h3>, <h4>, <h5>, <h6>.
Exemple et code source avec chaque balise TITRE
26 SAGAR Samya
Formatage logique (2)
Paragraphes
La balise <p>
Un paragraphe est dlimit par les balises <p> et </p>.
La balise <p> provoque un saut de ligne avant le paragraphe.
Un paragraphe ne peut en contenir un autre (le navigateur les interprte
comme des paragraphes successifs...).
Attributs de la balise <p> Attribut Valeur(s)
Left (par dfaut)
right
align
center
justify
Rupture de ligne: la balise <br>
Force un retour en dbut de ligne suivante l'intrieur d'un mme
paragraphe. La balise fermante est facultative.
Attributs de la balise <br> Attribut Effet Valeur(s)
rpartit le texte
all
autour d'une image
clear left
flottante ou d'un
right
autre objet
27 SAGAR Samya
Formatage logique (3)
Les balises <div> et <span>
Ces balises jouent un rle particulier. Elles permettent de
dcouper l'information en units logiques, et sont fortement
utilises avec des feuilles de style.
Par exemple, on peut scinder un document HTML avec deux balises
<div> en deux parties, une prsentant... une table des matires, et
l'autre prsentant un contenu de cours.
La balise <span> permet quant elle une structuration interne un
paragraphe. Par exemple, on peut indiquer un changement
momentan de langage utilis avec l'exemple suivant:
<p> Hamlet a dit <span lang="en"> "To be or not to
be" </span>. </p>
28 SAGAR Samya
Formatage logique (4)
Autres balises
Balise Signification
<em> emphasis
<strong> fort
<dfn> dfinition
<kbd> Keyboard(clavier)
<abbr> abrviation
<acronym> acronyme
<sub> subscript/indice
<sup> superscript/exposant
<pre> preformatted
29 SAGAR Samya
Formatage logique (5)
La balise <hr>
Destine sparer diffrentes parties d'un document au moyen d'un
trait horizontal de longueur et d'paisseur variables, et gnralement
pourvu d'un ombrage. Il s'agit d'un conteneur vide dont la balise
fermante est facultative (et mme jamais utilise en HTML).
Cette balise possde des attributs, mais leur emploi est dconseill par
le W3C :
attribut effet valeur(s)
boolen, sa prsence seule supprime
noshade suppression de l'ombrage
l'ombrage
left (valeur par dfaut)
right
align alignement
center
justify
size paisseur du trait nombre en pixels
en pixels ou en pourcentage de la fentre
width largeur du trait
du navigateur (ajouter le symbole %)
30 SAGAR Samya
Formatage physique : Mise en forme de
la police (1)
Police par dfaut
Les navigateurs utilisent par dfaut une police proportionnelle : Times Roman sur les
Macintosh, et Times New Roman sur les PC. En tant qu'utilisateur (surfeur !), il vous
est possible de modifier cette police par dfaut. Cela rend la tche des dveloppeurs
de site d'autant plus ardue...
La balise <font>
Cette balise est dconseille, utiliser plutt les feuilles de style. Pour modifier une
partie du texte, on crira par exemple :
<font face="Verdana, Arial, Helvetica, sans-serif" size="5" color="red">
mon exemple </font>
Qui produira l'effet suivant de couleur rouge :
Les attributs de la balise <font> :
L'attribut face : sa valeur est une liste de polices spares par des virgules, c'est la premire de
cette liste prsente sur le navigateur qui sera utilise. Il est recommand de spcifier en dernier lieu
une famille de polices dite "gnrique" (nous y reviendrons dans la partie sur le CSS).
L'attribut size : Il existe 7 tailles, la taille par dfaut est 3. On peut spcifier une taille relative
l'aide d'un incrment sign, par exemple size="+2", size="-1".
L'attribut color : A l'aide d'un nom de couleur ou d'un code RGB.
31 SAGAR Samya
Formatage physique : Mise en forme de
la police (2)
Autres balises
Balise Signification
<b> gras
<i> italique
<s> ou <strike>
<u> underline/soulignement
34 SAGAR Samya
Codage de la couleur (2)
Les seize couleurs simples
35 SAGAR Samya
Les liens hypertexte
36 SAGAR Samya
Dfinitions : Ancres et liens hypertexte
Un lien hypertexte HTML tablit une relation oriente entre une source et
une destination. Un lien est exprim par un lment A ou LINK.
LINK ne peut intervenir que dans len-tte dun document lintrieur dun
lment HEAD alors que A ne peut intervenir que dans le corps du document
lintrieur de llment BODY.
Une des extrmits du lien est dfinie par llment lui-mme (la source du lien),
lautre extrmit tant dfinie par lattribut href de llment (A ou LINK).
Toute extrmit de lien identifie une ressource atteignable sur le World Wide Web :
un document, une position lintrieur dun document, une image, une squence
vido, etc.
38 SAGAR Samya
Diffrents types de liens (1)
Le lien externe et l'adresse absolue
Des liens pointant vers un autre site. Il va falloir lancer une
requte sur l'ensemble de la toile pour que le serveur qui
possde la page demande puisse l'envoyer via l'Internet, au
client demandeur.
Il suffit ainsi didentifier le document distant par sont adresse
URL.
Exemple :
39 SAGAR Samya
Diffrents types de liens (2)
Le lien interne et l'adresse relative
Des liens pointant vers une autre page d'un mme serveur. Lors
du fonctionnement de ce lien, le navigateur charge une nouvelle
page situe sur le mme serveur. La syntaxe employe sera alors
relative la page en cours.
Ressource situe dans le mme rpertoire que la page
d'appel
La valeur prise par l'attribut href est simplement le nom du fichier, par
exemple href="index.html".
Ressource situe dans un sous-rpertoire du rpertoire
contenant la page d'appel
Il suffit de citer la suite des sous-rpertoires jusqu'au fichier ressource,
par exemple href="archives/2001/18072001.html".
40 SAGAR Samya
Diffrents types de liens (3)
Ressource situe dans un rpertoire contenant la page
d'appel
Il faut remonter successivement chaque rpertoire par "../". Dans cet
exemple, le rpertoire vis est le suprieur hirarchique de 2me
rang (le grand-pre) : href="../../index.html".
41 SAGAR Samya
Diffrents types de liens (4)
Ancre situ dans la mme page dappel
Les ancres sont construites grce llment A muni de lattribut name (ou
bien par lattribut id support par la plupart des lments). Les ancres
permettent de donner un nom un endroit prcis du document afin de
pouvoir y faire rfrence dans un lien.
Pour dfinir un point de branchement : <A name="tiquette"> nom
<A>
Pour faire le lien : <A href="#tiquette"> aller la
partie nom <A>
Concatner une URL et une ancre intra-page
Pour accder directement une section donne d'une autre page donne, il
suffit de concatner l'URL avec la valeur du paramtre name l'aide du
symbole #, par exemple:
<A href="index.html#tablematieres"> retour au
sommaire <A>.
Remarque importante: privilgier l'adresse relative
42 SAGAR Samya
Liens vers des ressources utilisant
d'autres protocoles
Courrier lectronique
L'utilisation de protocole mailto:... provoque l'ouverture de l'application
correspondant au courrier sous Internet Explorer ou sous Netscape.
lien e-mail sans sujet : href="mailto:A.Talon@dupuis.fr"
lien e-mail avec sujet :
href="mailto:A.Talon@dupuis.fr?subject=marsupilami"
lien e-mail avec sujet et texte dans le corps du message :
href="mailto:A.Talon@dupuis.fr?subject=marsupilami?body=longueur_
queue"
lien e-mail avec sujet, envoy deux personnes :
href="mailto:A.Talon@dupuis.fr?cc=Lefuneste@dupuis.fr?subject=mar
supilami"
FTP
Provoque l'ouverture d'une application FTP.
lien externe vers un serveur FTP : href="ftp://ftp.jussieu.fr".
lien externe vers un serveur de news : href="news:news.u-psud.fr". Il est alors
demand au visiteur, le cas chant, s'il veut s'abonner ce serveur de news.
43 SAGAR Samya
Lien vers d'autres objets
Le systme d'exploitation recherchera de lui-mme, selon
l'extension du fichier, quelle application permet de
l'exploiter.
S'il n'a jamais fait l'association, il proposera l'utilisateur de
l'tablir lui-mme.
Vous pouvez galement proposer un fichier (.EXE ou
.ZIP) en tlchargement...
Exemple
<a href="site.zip"> Tlchargement du
site </a>
44 SAGAR Samya
Les listes
45 SAGAR Samya
Notion de liste
Apparue, car elle permet de structurer simplement un
ensemble de donnes.
HTML offre de nombreux lments permettant de construire
des listes ou des numrations.
Ces listes peuvent tre gnralement imbriques les unes dans
les autres.
Les 3 types fondamentaux de listes sont :
la liste simple UL o chaque terme de la liste est prcd dun point ou
dun signe similaire ;
la liste ordonne OL o les termes sont prcds dun numro
dordre ;
la liste de dfinitions DL o chaque terme, dsign par llment DT
peut-tre accompagn dune dfinition dsigne par llment DD.
46 SAGAR Samya
Listes puces
C'est le type de liste le plus simple.
Elle s'introduit en utilisant la balise <ul>, qui signifie
Unordered List. Les lments de la liste sont
dclars par la balise <LI>.
Attributs de la balise <UL>
disc (dfaut)
Le type de signe afficher devant
type chaque entre de la liste circle
square
47 SAGAR Samya
Listes numrotes
Ce type de listes est ordonn.
Elle s'introduit en utilisant la balise <ol>, qui signifie Ordered
List. Les lments de la liste sont galement dclars par la
balise <li>.
La "numrotation" peut se faire de cinq manires diffrentes,
cela tant spcifi par la valeur de l'attribut type. Elle peut
dbuter n'importe quelle position (par exemple 2...), grce
la valeur de l'attribut obsolte start.
Attributs de la balise <OL>
Attribut Effet Valeur(s)
1 (par dfaut)
a
type choix du type de numrotation A
i
I
start numro de dbut de liste selon le type, un numro ou une lettre
48
SAGAR Samya
La balise <li>
Cette balise sert dlimiter un lment de liste UL ou
OL. Ltiquette finale est facultative.
LI peut contenir des lments de type texte, de type
bloc, des listes, des formulaires, des tableaux ainsi que A,
IMG, HR, BR, etc
Attributs de la balise <LI>
Attribut Effet Valeur(s)
Les valeurs possibles sont les
mmes que
Le type de signe ou de
type numrotation utiliser.
celles autorises pour l'attribut
TYPE de llment dans lequel
se trouve llment LI
Le nombre utiliser (dans une
liste OL). Analogue au rle de selon le type, un numro ou
VALUE lattribut start de la balise une lettre
OL
49 SAGAR Samya
Liste de dfinitions
<DL> Une liste de dfinitions. Ne peut contenir quune
squence dlments DT et DD.
<DT> Un terme dfinir. L'tiquette finale est facultative.
Contient des lments de type texte et A, IMG, BR, etc.
<DD> Une dfinition. L'tiquette finale est facultative.
Contient des lments de type texte, de type bloc, des
listes, des formulaires des tableaux ainsi que A, IMG, HR,
BR, APPLET, MAP.
50 SAGAR Samya
Exemple
51 SAGAR Samya
Les tableaux dans une page
Web
52 SAGAR Samya
Structure des tableaux (1)
Crs au dpart pour prsenter des tables de donnes, les tableaux sont
trs vite devenus un moyen efficace de prsentation claire et ordonne.
Ils permettent, par exemple, de faire de manire souple du multi colonne. Mais il
est toujours prfrer les solutions utilisant les feuilles de style pour contrler la
mise en page.
Usuellement un tableau est constitu de lignes et de colonnes. Ce nest pas
tout fait le cas en HTML. Un tableau HTML est compos de
cellules organises en ranges.
Llment TABLE dfinit le tableau. A lintrieur de cet lment, une
succession dlments TR (Table Row) dfinit les ranges, elles-mmes
composes dlments TD et TH dfinissant les cellules proprement
dites.
TD (Table Data) dfinit une cellule simple alors que TH (Table Heading)
dfinit une cellule de titre pour la ligne et/ou la colonne o elle apparat.
Il est galement possible de fournir une lgende au tableau.
53 SAGAR Samya
Structure des tableaux (2)Exemple
...
<TABLE>
<CAPTION>Titre du Tableau</CAPTION>
<TR>
<TH>Titre Colonne 1
<TH>Titre Colonne 2
<TH>Titre Colonne 3
</TR>
<TR>
<TD>Objet 1
<TD>Objet 2
<TD>Objet 3
</TR>
</TABLE>
...
Titre du Tableau
Titre Colonne 1 Titre Colonne 2 Titre Colonne 3
Objet 1 Objet 2 Objet 3
54 SAGAR Samya
Structure des tableaux (3)
Un tableau se dclare grce la balise <table>. Cette
balise peut avoir plusieurs balises-enfants. La plupart sont
facultatives, mais si elles sont prsentes, elles doivent
tre utilises dans cet ordre :
<caption>
<col> ou <colgroup>
<thead>
<tfoot>
<tbody>
55 SAGAR Samya
La balise <table> (1)
Attribut Effet Valeur
summary donne un rapide rsum du contenu du tableau. Cela amliore une chane de caractres
l'accessibilit de la page.
width largeur du tableau une longueur, qui peut s'exprimer en nombre de pixels (ex :
WIDTH="200") ou en pourcentage de la largeur de la fentre du
navigateur(ex :
WIDTH="50%").
border paisseur de la bordure extrieure en pixel (par dfaut, 0, sans bordure)
frame Prsence de l'encadrement extrieur du tableau. Void: aucune
(rien voir avec la balise <frame>, que l'on verra dans la partie above: haut seulement
sur les cadres). below: bas seulement
hsides: haut et bas
vsides: gauche et droite
lhs: gauche seulement
rhs: droite seulement
box: sur les 4 cts
border: sur les 4 cts aussi
rules comme l'attribut frame, mais pour l'encadrement intrieur none: aucun
groups: seulement entre les groupes de lignes (<thead>, <tbody> et
<tfoot>) et les groupes de colonnes (<colgroup> et <col>)
rows: entre les lignes
cols: entre les colonnes
all: partout (valeur par dfaut)
57 SAGAR Samya
La balise <caption>
Cette balise est facultative, et ne peut tre prsente
qu'une seule fois dans le tableau.
Son rle est de donner une lgende au tableau,
plus complte que le court rsum de l'attribut summary.
58 SAGAR Samya
Groupements de colonnes et ranges (1)
<col> et <colgroup>
Le rle fondamental de ces balises est de dfinir des
groupements de colonnes.
59 SAGAR Samya
Groupements de colonnes et ranges (2)
<col> et <colgroup>
Les attributs communs <col> et <colgroup>.
Attribut Effet Valeur(s)
span Nombre de colonnes regrouper un nombre
une longueur, qui peut s'exprimer en nombre
width Largeur de chaque colonne de pixels, en pourcentage, ou bien par
exemple width="0.5*", en proportion relative
top: alignement en haut de la cellule
middle: alignement au milieu de la cellule
(valeur par dfaut)
valign alignement vertical
bottom: alignement en bas de la cellule
baseline: alignement sur la ligne du bas dela
cellule
left (valeur par dfaut)
right
center
align alignement horizontal
justify
char: l'alignement se fait sur un caractre
particulier
un caractre. La valeur par dfaut est celle du
sparateur dcimal dfini par l'attribut de
langage lang, savoir le "." pour la langue par
spcifie quel caractre doit servir de base
char dfaut, et le "," si l'attribut dfinit le franais
pour l'alignement comme langue (lang="fr"). Il n'est pas
demand aux navigateurs de supporter cet
attribut.
spcifie le dcalage en position
charoff horizontale impos au caractre un nombre.
d'alignement.
60 SAGAR Samya
Groupements de colonnes et ranges (3)
<col> et <colgroup> Exemples
Si on doit spcifier que quarante colonnes dans un tableau doivent tre
alignes droite, au lieu d'crire...
<colgroup>
<col width="20">
<col width="20">
... 20 lments col au total...
</colgroup>
... on peut se contenter d'crire...
<colgroup span="40" width="20">
</colgroup>
Quand il est ncessaire d'identifier une unique colonne sur ces quarante, par
exemple la dernire, on peut regrouper sous la forme...
<colgroup width="20">
<col span="39">
<col valign="top">
</colgroup>
61 SAGAR Samya
Groupements de colonnes et ranges (4)
Structure du contenu
Les balises <thead> et <tfoot>
Le rle de ces balises est de contenir les informations
ncessaires l'entte et au bas du tableau.
Il s'agit essentiellement des titres de colonnes.
Ces balises contiennent des lignes (voir le paragraphe
consacr la balise <tr> pour plus de dtails). Il est possible,
pour peu que l'on ait dclar la balise <thead>
(respectivement <tfoot>), de dupliquer l'entte
(respectivement le bas) d'un tableau en cas de saut de page.
Les attributs de ces balises sont les attributs d'alignement
des cellules (valign, align, char et charoff).
62 SAGAR Samya
Groupements de colonnes et ranges (5)
Structure du contenu
La balise <tbody>
Son rle est de dfinir le corps mme d'un tableau.
En dupliquant plusieurs <tbody> au sein d'un mme
tableau, on peut dfinir plusieurs composantes structurelles
d'apparences et de formats diffrents.
Les attributs de cette balise sont les attributs d'alignement
des cellules (valign, align, char et charoff).
63 SAGAR Samya
Tableaux complexes (1)
Un certain nombre dattributs permettent de contrler plus
avant laspect du tableau.
En particulier, les attributs rowspan et colspan des lments TH
et TD permettent de crer des tableaux plus complexes en spcifiant
des cases qui stendent sur plusieurs ranges ou colonnes.
Exemple ...
On note que Vgtaux, bien quoccupant <TABLE>
<TR>
deux lignes ne doit apparatre, dans le code HTML, <TH ROWSPAN=2>Vgtaux
que dans la dfinition de la premire ligne. <TD>Fruits</TR>
<TR><TD>Fleurs </TD></TR>
Plusieurs points importants : </TABLE>
des cases de tableau peuvent tre vides ; ...
64 SAGAR Samya
Tableaux complexes (2) Les lignes
balise <tr>
Cette balise permet de dfinir une ligne dans le
tableau.
Les attributs de cette balise sont
les attributs d'alignement des cellules : valign, align,
char et charoff;
l'attribut bgcolor, dont la fonction est de spcifier la
couleur de fond de la ligne;
Elle peut contenir une ou plusieurs balises <th> ou
<td>.
65 SAGAR Samya
Tableaux complexes (3) Les balises
<td> et <th>
Ces balises acceptent les mmes contenus, ainsi que
les mmes attributs.
Cependant, <th> doit tre utilis pour indiquer des
cellules destines tre des enttes de colonnes.
Ces balises peuvent contenir peu prs tous les
types d'lments, y compris les <div> et les <p>.
66 SAGAR Samya
Tableaux complexes (4) Les balises <td> et <th>
Attribut Effet Valeur(s)
abbr fournit un abrg du contenu de la cellule une chane de caractres
indique quelle catgorie appartient la
axis une chane de caractres
cellule.
renvoi (aux) l'identifiant(s) de la cellule
"header" associe. Cela permet un agent
headers une liste d'indentifiants (spars par des espaces)
vocal de prsenter le type de contenu de
la cellule avant le contenu proprement dit.
row: s'applique la ligne courante
col: s'applique la colonne courante
indique quel est le jeu de cellules auquel la rowgroup: s'applique l'ensemble du <thead>, <tfoot> ou
scope
cellule "header" courante s'applique <tbody> courant
colgroup: s'applique au groupe de colonnes courant (spcifi
par les balises <colgroup> ou <col>)
un nombre. La valeur par dfaut est 1. Si rowspan="0", la
nombre de lignes concernes par la balise cellule s'applique l'ensemble des lignes, depuis la ligne
rowspan
courante. courante jusqu' la dernire dans le <thead>, <tfoot> ou
<tbody> courant.
un nombre. La valeur par dfaut est 1. Si rowspan="0", la
nombre de colonnes concernes par la
colspan cellule s'applique l'ensemble des colonnes, depuis la ligne
cellule courante.
courante jusqu' la dernire du <colgroup>.
left (valeur par dfaut)
right
align alignement horizontal center
justify
char: l'alignement se fait sur un caractre particulier
67 SAGAR Samya
Tableaux complexes (5) Les balises <td> et <th>
Attribut Effet Valeur(s)
un caractre. La valeur par dfaut est celle du sparateur
dcimal dfini par l'attribut de langage attr, savoir le "."
spcifie quel caractre doit servir de
char pour la langue par dfaut, et le "," si l'attribut dfinit le
base pour l'alignement
franais comme langue (attr="fr"). Il n'est pas demand aux
navigateurs de supporter cet attribut.
spcifie le dcalage en position
charoff horizontale impos au caractre un nombre.
d'alignement.
top: alignement en haut de la cellule
middle: alignement au milieu de la cellule (valeur par dfaut)
valign alignement vertical
bottom: alignement en bas de la cellule
baseline: alignement sur la ligne du bas de la cellule
68 SAGAR Samya
Les images dans une page Web
69 SAGAR Samya
Les formats du Web
Pour limiter le temps de chargement, on s'est efforc trs tt d'utiliser des
formats d'images conduisant des fichiers de taille rduite. Les mthodes
reposent sur la compression de l'information transmettre.
Trois formats principaux sont accepts par la plupart des navigateurs.
Format GIF, GIF pour Graphic Interchange Format. Elle ne tolre pas plus
de 256 couleurs (2^8). C'est un format de compression sans perte, qui
est trs utilise pour le stockage et le transfert d'images.
Format JPEG, JPEG pour Joint Photographic Experts Group. Comme son
nom l'indique, JPEG a t dvelopp pour les images photographiques.
Ce format convient aux images obtenues partir de scanner ou d'un
appareil photo numrique. Mais il est dconseill pour les schmas et les
bannires.
Format PNG, pour Portable Network Graphics. Il s'agit d'un nouveau
format libre de tous droits, qui devrait supplanter GIF.
70 SAGAR Samya
La balise <img> (1)
Usage :
La balise <img> est le moyen le plus simple d'insrer une image dans
une page Web mais on pourra aussi lui prfrer la balise <object>
qui est d'un usage beaucoup plus gnral et qui permet d'insrer
d'autres objets multimdia.
Syntaxe minimale :
La balise fermante est facultative : de fait elle est toujours omise. La
syntaxe minimale est :
<img src="monimage.gif" alt="courte description">
L'attribut src comme SouRCe attend pour valeur une URL relative ou absolue.
L'attribut alt donne une courte description texte de l'image, qui peut s'afficher
fugacement au survol de la souris.
71 SAGAR Samya
La balise <img> (2)
Attribut Effet Valeur(s)
src o trouver l'image afficher. Cet attribut est requis. une URL (relative ou absolue).
tiquette affiche la place de l'image si par exemple l'utilisateur a
alt une chane de caractres.
dsactiv l'affichage des images.
Renvoie vers un fichier contenant une "longue" description de
l'image. Permet d'amliorer l'accessibilit en offrant aux
longdesc une URL
malvoyants la possibilit de consulter une description dtaille
d'une image riche en information.
Largeur et hauteur rserves par le navigateur pour l'image dans la
nombre de pixels ou en
page Web. Permet de rserver cette place mme si l'image n'est
width et height pourcentage de la fentre du
pas encore charge. Par dfaut ces valeurs sont celles de l'image
navigateur.
(voir paragraphe suivant).
ismap Indique qu'il s'agit d'une image ractive "server-side" un boolen
usemap Indique qu'il s'agit d'une image ractive "cient-side" un boolen
left (valeur par dfaut)
right
Dtermine la position de l'image par rapport au texte qui top: l'alignement se fait par
l'entoure. L'image peut suivre le flot du texte ou tre enveloppe rapport au sommet de l'image.
align
par ce texte. Par dfaut la valeur est bottom. Cet attribut est bottom: l'alignement se fait par
obsolte en HTML strict. rapport au bas de l'image.
middle: l'alignement se fait par
rapport au centre de l'image.
paisseur de la bordure entourant l'image. Par dfaut zro. On ne
border un nombre
peut pas en choisir la couleur.
Dfinit une marge autour de l'image. hspace dfinit une marge
hspace 72
et vspace SAGAR Samya un nombre de pixels
droite et gauche. vspace dfinit une marge avant et aprs l'image.
La balise <figure>
En HTML5, on dispose de la balise <figure>.
<figure>
<img src="images/blocnotes.png" alt="Bloc-Notes"/>
</figure>
Une figure est le plus souvent accompagne d'une lgende. On utilise la balise
<figcaption> l'intrieur de la balise <figure>
<figure>
<img src="images/blocnotes.png" alt="Bloc-Notes" />
<figcaption>Le logiciel Bloc-Notes</figcaption>
</figure>
La balise <figure> a un rle avant tout smantique. Cela veut dire
qu'elle indique l'ordinateur que l'image a du sens et qu'elle est importante
pour la bonne comprhension du texte. Cela peut permettre un programme
de rcuprer toutes les figures du texte et de les rfrencer dans une table
des figures, par exemple.
73 SAGAR Samya
Les feuilles de style (CSS 3)
74 SAGAR Samya
Gnralits (1)
Principe
l'origine le langage HTML est conu pour structurer le
document (titre, citation, exemple, adresse...)
qualifiant la nature du contenu
non pour prsenter le texte (gras, italique, en retrait, gros caractre...).
Au fil du temps, les crateurs de navigateurs se sont loigns
de ce point de dpart pour en arriver dfinir un langage de
prsentation.
Avec les feuilles de style, le consortium du W3C revient
cette conception initiale :
le HTML structure le texte,
La feuille de style le reprsente.
75 SAGAR Samya
Gnralits (2)
Concept
Dans un document d'une certaine importance, il arrive
frquemment que l'on attribue certains lments des
caractristiques de mise en forme identiques.
Par exemple, les noms de chapitres seront mis en police Arial, en
gras et en couleur bleue.
On peut imaginer que l'on puisse donner cette dfinition de mise
en forme un nom soit "titre" et qu' chaque nouveau chapitre, plutt
que d'crire chaque fois le nom du titre et puis de devoir le mettre
en Arial, gras, bleu, l'on puisse dire l'ordinateur, nom du chapitre
mais dans la mise en forme que j'ai dfini sous le nom de "titre".
78 SAGAR Samya
Feuille de style interne (1)
Cest lincorporer de styles l'intrieur d'une page.
Soit :
A l'intrieur des balises <HEAD></HEAD>
Cette faon de procder est de loin la plus commune et la plus
logique. D'abord parce que les balises HEAD contiennent des
informations pour le browser et les feuilles de style appartiennent
celles-ci. Ensuite parce que l'on rejoint ainsi l'essence mme des
feuilles de style qui est de sparer les lments de mise en forme du
contenu.
A l'intrieur des balises <BODY></BODY>
Cette faon de faire nous parat illogique et peu conforme l'esprit
des feuilles de style qui est de dfinir un style dtermin valable pour
la globalit du document. Mais elle existe pour quelques utilisations
spcifiques
79 SAGAR Samya
Feuille de style interne (2)
A l'intrieur des balises <HEAD></HEAD>
La balise <STYLE> avertit le navigateur que l'on <HTML>
va utiliser des feuilles de style. <HEAD>
L'attribut type="text/css" (obligatoire) informe <STYLE type="text/css">
que ce qui suit est du texte et qu'il s'agit de <!--
La ou les feuille(s)de style
cascading style sheets (css).
-->
La balise Html de commentaires <!-- ... --> </STYLE>
empche que les browsers qui ne connaissent </HEAD>
pas les feuilles de style, tentent d'interprter <BODY> (...) </body>
ces instructions. Les informations l'intrieur </html>
des tags de commentaires seront ignores par ces browsers.
Pour vos propres commentaires propos des feuilles de style, on utilisera la convention
dsormais classique (C, C++, Javascript...) de /* commentaires */.
L'attribut media permet de spcifier le type de media auquel la feuille de style est destine :
screen, la valeur par dfaut; tty, pour les "vieux" systmes d'affichage police de caractre fixe (comme
Lynx); tv, pour les afficheurs de type tlvision avec une faible rsolution; projection, pour les
projecteurs; handheld, pour les afficheurs de poche (avec un petit cran monochrome et une faible bande
passante); print, pour les imprimantes; braille, pour les "afficheurs" braille; aural, pour les navigateurs
synthse vocale; all, pour tous les systmes d'affichage.
80 SAGAR Samya
Feuille de style interne (3)
A l'intrieur des balises <BODY></BODY>
<HTML>
<BODY>
<H1 style="font-family: Arial; font-style: italic"> blabla </H1>
</BODY>
</HTML>
Signalons :
que le style Arial, italique n'affectera que cette seule balise H1.
que la syntaxe est lgrement diffrente de la prcdente.
que l'criture : <STYLE type="text/css">H1 {font-family: Arial; font-
style: italic }</STYLE> fonctionne aussi.
81 SAGAR Samya
Feuille de style externe
Dfinir une prsentation de style valable pour plusieurs pages et mme pour
toutes les pages d'un site.
En crant une page externe qui regroupera toutes les feuilles de style, et en reliant chaque
page cette page de style.
<HTML>
On cre d'abord, dans le rpertoire du site, <HEAD>
un fichier avec l'extension .css soit styles.css
-- Les diffrentes feuilles de style --
</HEAD>
qui contiendra toutes les feuilles de style. <BODY> (...) </body>
</html>
Ensuite, on cre une page normale soit
page1.html (ici dans le mme rpertoire que le fichier styles.css).
La balise <LINK> avertit le
<HTML>
Browser qu'il faudra raliser <HEAD>
un lien. <LINK rel=stylesheet type="text/css" href="styles.css">
L'attribut rel=stylesheet </HEAD>
(sans s et sans guillemets) prcise qu'il y trouvera une feuille de style externe.
L'attribut type="text/css" prcise que l'information est du texte et du genre cascading
style sheets (css).
L'attribut classique de lien href=" ... " donne le chemin d'accs (ou URL) et le nom du
fichier lier.
82 SAGAR Samya
Dfinition dun style (1)
Syntaxe Une feuille de style est une suite de rgles.
slecteur {
proprit_de_style1:valeur1;
proprit_de_style2:valeur2;
...
proprit_de_styleN:valeurN;
}
On peut attribuer un mme style plusieurs balises (spares par des virgules).
H1, H2, H3 {font-family: Arial; font-style: italic}
h2, h3, ul
{
text-align: center;
color: green;
}
Dans cet exemple, tous les titres de niveaux 2 et 3 et les listes seront centrs et
de couleur verte.
84 SAGAR Samya
Dfinition dun style (3) Slecteurs simples
Classe
On dsire parfois affecter des styles diffrents une mme balise.
balise.nom_de_classe {proprit_de_style: valeur}
Et pour l'appeler :
<balise id="nom_de_ID"> .... </balise>
86 SAGAR Samya
Dfinition dun style (5) Slecteurs simples
Cette rgle ne s'appliquera que sur le contenu des balises <em> lorsqu'elles
seront elles-mmes l'intrieur d'un titre de niveau 2 (<h2>). En paraphrasant : la
consigne s'applique aux balises <em> dans le contexte d'une balise <h2>.
Syntaxe : les slecteurs simples sont spars par des espaces. L'enchssement
est possible avec tous les types de slecteurs, balise, identifiant, classe.
.copyright h4 {color: blue;}
#toto b {font-size: large;}
ul ul {list-style: lower-alpha;}
88 SAGAR Samya
Dfinition dun style (7) Slecteurs complexes
Pseudo-classes
Nous allons prendre l'exemple des liens. Un lien peut tre dans trois
tats diffrents :
actif (lors du clic de la souris) ;
a:link
visiter ; { color: blue;
dj visit. font-style: italic; }
a:active
{ text-decoration: overline; }
La syntaxe est donc
[selecteur]:[pseudo-classe] {declaration}
89 SAGAR Samya
Dfinition dun style (8) Slecteurs complexes
Pseudo-lments
CSS dcrit plusieurs pseudo-lments :
first-line modifie le style de la premire ligne d'un paragraphe.
first-letter modifie le style de la premire lettre d'une phrase.
first-child modifie le style du premier lment-enfant du slecteur
courant.
after modifie le style de ce qui suit l'lment.
before modifie le style de ce qui prcde l'lment.
Les trois derniers sont peu ou pas supports.
90 SAGAR Samya
<SPAN> et <DIV> (1)
Utilit
Penser un systme pour "dconnecter" certains
morceaux de paragraphe ou plusieurs paragraphes de
cette logique d'criture avec des feuilles de style.
Ce sont respectivement les balises SPAN et DIV qui
craient ainsi des petits blocs particuliers dans le
document sans devoir repasser par les lments
structurels du Html classique.
Notons que SPAN et DIV s'utilisent toujours avec les
classes et les ID.
91 SAGAR Samya
<SPAN> et <DIV> (2)
SPAN
La balise <SPAN> ... </SPAN> permet d'appliquer des
styles des lments de texte d'un paragraphe ou si vous
prfrez un morceau de paragraphe.
<HTML>
<HEAD>
<STYLE type="text/css">
.element{font-size: x-large; color: navy}
</STYLE>
</HEAD>
<BODY>
<P>Un monde de <SPAN class=element>gants</SPAN>.</P>
</BODY>
</HTML>
92 SAGAR Samya
<SPAN> et <DIV> (3)
DIV
La balise <DIV> ... </DIV> permet de regrouper
plusieurs paragraphes ou si vous prfrez, de dlimiter une
zone comportant plusieurs paragraphes.
<HTML>
<HEAD>
<STYLE type="text/css">
.zone{font-size: x-small}
</STYLE>
</HEAD>
<BODY>
<DIV class=zone>
<P>Commentaire :</P>
<P>N'oubliez pas l'attribut class!</P>
</DIV>
</BODY> </HTML>
93 SAGAR Samya
Positionner avec CSS (1)
Position absolue ou relative
La position absolue {position: absolute} se dtermine
par rapport au coin suprieur gauche de la fentre du
browser.
Les coordonnes de ce point sont top=0 et left=0.
Les coordonnes d'un point s'expriment en pixels, de
haut en bas pour top et de gauche droite pour left.
Prcisons que l'on utilisera presque toujours le positionnement
absolu car plus facile et plus sr.
94 SAGAR Samya
Positionner avec CSS (2)
Positionner du texte
Plaons en position absolue le texte "Publication Html" 50
pixels du haut de la fentre (top) et 150 pixels gauche
(left). <HTML>
<HEAD>
<STYLE type="text/css"> <!--
.pub { position: absolute; top: 100px; left: 25px;
color: yellow; font-size: x-large;
font-weight: bold;} -->
</STYLE>
</HEAD>
<BODY>
<DIV class=pub> Publication Html </DIV>
</BODY>
</HTML>
95 SAGAR Samya
Positionner avec CSS (3)
Positionner une image
Plaons l'image htmlplus.gif en position absolue 50
pixels de haut de la fentre (top) et 100 pixels gauche
(left). Les dimensions de l'image sont width=242 et
height=84.
<HTML>
<BODY>
<span style="position: absolute; top: 50px;
left: 100px; width: 242px; heigth: 84px;">
<IMG src="htmlplus.gif">
</span>
</BODY>
</HTML>
96 SAGAR Samya
Units (1)
Syntaxe
Il ne faut laisser aucun blanc entre le nombre et l'unit.
Une longueur peut tre prcde d'un signe + ou
Units absolues de longueur
Unit Notation Conversion
h1 { margin: 0.5in;}
inch (pouce) in 1in=2,54cm
h2 { line-height: 3cm;}
centimtre cm
h3 { word-spacing: 4mm;}
millimtre mm h4 { font-size: 12pt;}
point pt 1pt=1/72in=0,352778mm h5 { font-size: 1pt; }
pica pc 1pc=12pt=4,233mm
Pourcentages
C'est une fraction de la longueur d'un autre lment : largeur
de l'cran, hauteur des caractres ou toute autre grandeur
dpendant du contexte.
L'interligne des paragraphes vaut 120% p {line-height:
120%;}
de la hauteur des caractres, tandis que
les cellules de classe gauche occuperont 33% td.gauche {width:
de la largeur du tableau o elles se trouvent. 33%;}
98 SAGAR Samya
Units (3)
Couleurs
Les couleurs se codent de la mme manire qu'en HTML,
mais il est galement possible de spcifier explicitement
le codage RGB :
une des seize couleurs standard : aqua, black, blue, fuchsia, gray, green,
lime, maroon, navy, olive, purple, red, silver, teal, white et yellow.
#rrggbb (par exemple, #00cc00).
#rgb (par exemple, #0c0).
rgb(x1,x2,x3), o x1, x2 et x3 sont des entiers compris entre 0 et 255
inclus (par exemple rgb(33,45,127)).
rgb(x%,y%,z%) o x, y et z sont des nombres compris entre 0.0 et 100.0
inclus (par exemple rgb(56%,33%,0%)).
99 SAGAR Samya
html 5 et les nouvelles balises
<header>
<!-- Placez ici le contenu de l'en-tte de votre
page -->
</header>
<footer>
<!-- Placez ici le contenu du pied de page -->
</footer>
<nav>
<ul>
<li><a href="index.html">Accueil</a></li>
<li><a href="forum.html">Forum</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<section>
<h1>Ma section de page</h1>
<p>Bla bla bla bla</p>
</section>
lancement automatique de
autoplay votre vido
boolen