Vous êtes sur la page 1sur 70

Éléments d’une page web

Contenu - HTML
Structure - HTML
Style - CSS
Comportement - JavaScript

TDI 3 – module Application Hypermedia - 2017 2


HTML : le contenu

whichElement?
Trying to answer that age old question:
Should that be a div, a span, or something
else?

Home
Contribute
About

One of the main challenges we see in


building semantic content is picking what
tag to use when.

TDI 3 – module Application Hypermedia - 2017 3


HTML : le contenu

<h1>whichElement?</h1>
<h2>Trying to answer that age old
question:</h2>
<h2>Should that be a div, a span, or
something else?</h2>

<ul>
<li>Home</li>
<li>Contribute</li>
<li>About</li>
</ul>

<p>One of the main challenges we see in


building semantic content is picking what
tag to use when. This site seeks to help
with that. Now, before we get all judgy and
preachy let me get a few tenants out
there:</p>

TDI 3 – module Application Hypermedia - 2017 4


CSS : le style

h1{
color: red;
}

h2{
color: blue;
font-style: italic;
}

p{
color: white;
background-color: black;
}

TDI 3 – module Application Hypermedia - 2017 5


CSS

Séparation de la structure logique et de la présentation


documents HTML
‣ Structure logique = HTML = ensemble d’éléments de contenu
‣ Présentation suivant une feuille de style (style sheet) qui traite
les éléments de contenu en éléments de présentation
Cascading Style Sheets
‣ Feuilles de styles associées à HTML
‣ En cascade
‣ on peut utiliser des feuilles de styles multiples
‣ il y a un degré d’importance pour chaque feuille de style

TDI 3 – module Application Hypermedia - 2017 6


CSS, généralités

Objectif
‣ Décrire comment un document HTML doit être affiché
‣ Remplace les éléments d’affichage des anciennes versions de
HTML (séparation réelle du contenu et de sa présentation)
‣ L’affichage est pris en charge par le navigateur (normalement)
Principe
‣ Décoration de l’arbre des éléments HTML
‣ Associer un certain nombre d’attributs de style à un élément

TDI 3 – module Application Hypermedia - 2017 7


Feuille de Style CSS
‣ Une feuille de style est composée d'un certain nombre de
règles (rules)
‣ Une règle se compose
‣ d’un sélecteur
‣ d'une déclaration
‣ Une déclaration se compose d’un ensemble de
propriétés/valeurs
‣ Remarque
‣ L’ordre des règles est indifférent
‣ Tous les styles ne peuvent pas s’appliquer à tous les éléments
‣ Ex. : une image n’a pas de style de police

TDI 3 – module Application Hypermedia - 2017 8


Types de styles

TDI 3 – module Application Hypermedia - 2017


Styles intégrés

TDI 3 – module Application Hypermedia - 2017 10


Styles internes

<html>
<head>
<title>Texte du titre</title>
<style type="text/css">
.important {color: red;}
h1 {font-family: Arial; font-style: italic; }
em { color: green }
</style>
</head>
<body>… </body>
</html>

TDI 3 – module Application Hypermedia - 2017 11


Feuilles de styles liées

Les règles se trouvent dans un fichier extérieur


On indique au navigateur où ce trouve cette ressource de
style
on utilise l’élément link dans l’en-tête <head>
<Head>
…..
<link rel="stylesheet" type="text/css" href="fich-style.css" >
…..
</Head>
Intérêt
‣ Plusieurs documents HTML utilisent la même feuille de style

TDI 3 – module Application Hypermedia - 2017 12


Cascading style sheets

On peut avoir concurrence entre plusieurs


styles définis dans de multiples endroits
‣ styles par défaut (1- navigateur)
‣ fichiers CSS externes (2- spécifications globales au site)
‣ élément head du document XHTML (3- spécification globales
au doc.)
‣ attributs style des éléments (4- spécification locales)
‣ style utilisateur (5- spécification de l’utilisateur)

TDI 3 – module Application Hypermedia - 2017 13


Structure des règles

h1 { font-family: Arial, sans-serif; font-style: italic }


séparateur de propriétés/valeurs
TDI 3 – module Application Hypermedia - 2017 14
Exemple

body {
background: #FFFFFF;
color: black; /* commentaire */
margin-left: 5%;
margin-right: 5%;
font-family: Tahoma, Optima,
Arial, sans-serif;
}
TDI 3 – module Application Hypermedia - 2017 15
Types de sélecteur
‣ Simples et groupes
‣ Classes
‣ Pseudo-classes
‣ Pseudo-éléments
‣ Contextuels

TDI 3 – module Application Hypermedia - 2017 16


Sélecteurs CSS : simples et groupes

Simple
‣ Lié à un type d’élément HTML
‣ Utilisation de son nom
‣ Exemple : h1 { text-align: center; }
Groupe
‣ Regroupement de règles qui s’appliquent à plusieurs éléments
‣ Exemple : h2, p { font-family: Optima, Arial, sans-serif; }

TDI 3 – module Application Hypermedia - 2017 17


Grouper des styles

TDI 3 – module Application Hypermedia - 2017


Sélecteurs CSS : classes

TDI 3 – module Application Hypermedia - 2017 19


Sélecteur CSS : pseudo-classes
‣ Sélecteurs qui sélectionnent des éléments en fonction de leur
état à un moment donné
‣ Exemple et intérêt principal
‣ a:link — lien non visité et inactif
‣ a:hover — lien sur lequel passe le pointeur de la souris
‣ a:active — lien sur lequel on clique
‣ a:visited — lien déjà visité
‣ Exemple
‣ a:link {color: blue;}
‣ a:visited {color: magenta;}
‣ a:hover { color: red; text-decoration:none;
font-weight: bold;}
‣ a:active {color: red;}

TDI 3 – module Application Hypermedia - 2017 20


Sélecteurs CSS : pseudo-éléments

:first-letter
‣ première lettre dans un
élément bloc (ex. p, h1, …)
:first-line
‣ première ligne dans un
élément bloc (ex. p, h1, ...)
:after http://www.w3.org/wiki/CSS3/Selectors#Pseudo-elements

:before
‣ avant et après du contenu

TDI 3 – module Application Hypermedia - 2017 21


Sélecteur Id

TDI 3 – module Application Hypermedia - 2017


Sélecteurs CSS : contextuels

CSS :
h1 em { color: red; }
HTML :
<h1>Ceci est un texte de header <em>ce texte est
mis en évidence</em> celui-ci ne l'est pas.</h1>
<p>Dans ce paragraphe,
<em>ceci est mis en évidence</em></p>
TDI 3 – module Application Hypermedia - 2017 23
Exemples de selecteurs

H1 Sélecteur simple.
H1,H2,H3 Groupe de sélecteurs.
TABLE P Eléments imbriqués.
TD>P Sélecteur père-fils direct.
P+P Eléments consécutifs.
P.Important Sous-classe.
.Important Sous-classe indépendante.
P#Ligne12 Sélection par balise et Id.
#Ligne12 Sélection par Id seul.
:First-Letter Pseudo-élément
P[Align=Center] Eléments avec critère.
TD[Rowspan] Elément avec présence d'un attribut.
* Sélecteur universel.
TDI 3 – module Application Hypermedia - 2017
Propriétés de formatage de texte

‣ font-size: small | medium...| % | x pt


‣ font-family: fontname1, fontname2 (si la première n’est pas disponible),
familyname (serif, sans-serif, etc.)
‣ font-weight: bold | lighter
‣ font-style: italic, oblique
‣ text-align: left | center | right | justify
‣ text-indent: (retrait de première ligne) % | 2 px

TDI 3 – module Application Hypermedia - 2017 25


Police : font-family

TDI 3 – module Application Hypermedia - 2017


La propriété font-size
Indiquer la taille du texte, Plusieurs unités sont possibles :
‣ px (pixels)
‣ % (pourcentage, 100% = normal)
‣ em (taille relative, 1.0 = normal)
‣ ex (taille relative à la hauteur de la lettre "x". 1.0 = normal)
nom de taille :
‣ xx-small : très très petit
‣ x-small : très petit
‣ small : petit
‣ medium : moyen
‣ large : grand
‣ x-large : très grand
‣ xx-large : très très grand
TDI 3 – module Application Hypermedia - 2017
Les propriétés font-weight et font-style
font-weight
‣ bold : gras bolder : plus gras
‣ lighter : plus fin
‣ normal : normal (par défaut)
font-style
‣ italic : italique
‣ oblique : autre façon de mettre en italique
‣ normal : normal (par défaut)

TDI 3 – module Application Hypermedia - 2017


La propriété text-decoration et text-transform
text-decoration
‣ underline : souligné
‣ overline : ligne au-dessus
‣ line-through : barré
‣ blink : clignotant
‣ none : normal (par défaut)
font-variant
‣ small-caps : petites capitales
‣ normal : normal (par défaut)
text-transform
‣ uppercase : tout mettre en majuscules
‣ lowercase : tout mettre en minuscules
‣ capitalize : début des mots en majuscules
‣ none : normal (par défaut)
TDI 3 – module Application Hypermedia - 2017
Alignement
Alignement horizontal text-align
‣ left : à gauche (par défaut)
‣ center : centré
‣ right : à droite
‣ justify : texte justifié (prend toute la largeur de la page)
Alignement vertical vertical-align A utiliser dans des cellules de tableau
‣ top : en haut
‣ middle : au milieu
‣ bottom : en bas
Hauteur de ligne line-height Indiquer une valeur en pixels (px) ou
en pourcentage (%) Alinéa text-indent Indiquez une valeur en
pixels (px) pour définir l'alinéa de vos paragraphes Vos
paragraphes commenceront avec le retrait que vous avez
TDI 3 – module Application Hypermedia - 2017
Alignement
Hauteur de ligne line-height
‣ Indiquer une valeur en pixels (px) ou en pourcentage (%)
Alinéa text-indent
‣ Indiquez une valeur en pixels (px) pour définir l'alinéa des
paragraphes
‣ Les paragraphes commenceront avec le retrait indiqué
Césure white-space
‣ normal : le passage à la ligne est automatique (par défaut)
‣ nowrap : pas de passage à la ligne automatique, sauf si une balise
HTML comme <BR> est présente
‣ pre : le passage à la ligne se fait comme le texte saisi dans le code
source (comme balise xHTML )

TDI 3 – module Application Hypermedia - 2017


Exemples pour configurer la taille, la graisse, le style

TDI 3 – module Application Hypermedia - 2017


Aligner et indenter du texte

TDI 3 – module Application Hypermedia - 2017


Hauteur et largeur

TDI 3 – module Application Hypermedia - 2017


Proprietes de la couleur
Couleur de texte color : Indiquer une couleur avec l'une des
méthodes suivantes :
‣ En indiquant le nom de la couleur en anglais (black, blue, green,
white, red...)
‣ En indiquant la couleur en hexadécimal (#CC48A1)
‣ En indiquant la couleur en RGB : rgb (128, 255, 0)
Couleur de fond background-color
‣ Même chose que pour color

TDI 3 – module Application Hypermedia - 2017


Les couleurs

color:
‣ red | blue...| hexcode
background-color:
‣ red | blue...| hexcode

TDI 3 – module Application Hypermedia - 2017 36


Propriétés graphiques : arrière plan

Arrière-plan
‣ background-color (couleur de fond)
‣ background-image (image de fond)
‣ background-repeat (types de répétition de l’image)
‣ background-attachement (arrière-plan fixe quand on utilise
l’ascenseur)
‣ background-position (position par rapport au coin supérieur
gauche)
‣ background (attribut de résumé)
Exemple : p { background: image.gif fixed repeat-y }

TDI 3 – module Application Hypermedia - 2017 37


Proprietes image de fond
Image de fond background-image Indiquer l'url de l'image
(notation absolue ou relative)
‣ background-image:url("images/fond.png"); /* @relative */
‣ Background-image:url("http://.../images/fond.png"); /*@absolue */
Fond fixé background-attachment
‣ fixed : le fond reste fixe quand on descend plus bas sur la page
‣ scroll : le fond défile avec le texte (par défaut)
Répétition du fond background-repeat
‣ repeat : le fond se répète (par défaut)
‣ repeat-x : le fond ne se répète que sur une ligne, horizontalement
‣ repeat-y : le fond ne se répète que sur une colonne, verticalement
‣ no-repeat : le fond ne se répète pas, il n'est affiché qu'une fois
TDI 3 – module Application Hypermedia - 2017
CSS background-image

TDI 3 – module Application Hypermedia - 2017


CSS background-repeat

TDI 3 – module Application Hypermedia - 2017


Usages de background-repeat

TDI 3 – module Application Hypermedia - 2017


CSS3 propriété opacity

TDI 3 – module Application Hypermedia - 2017


Configurer les listes avec CSS

TDI 3 – module Application Hypermedia - 2017


list-type-style

TDI 3 – module Application Hypermedia - 2017


L’élément div : <div>

TDI 3 – module Application Hypermedia - 2017


L’élément span : <span>

TDI 3 – module Application Hypermedia - 2017


span : exemple

TDI 3 – module Application Hypermedia - 2017


Le modèle de la boite

TDI 3 – module Application Hypermedia - 2017


Configurer les marges

TDI 3 – module Application Hypermedia - 2017


Configurer le padding

TDI 3 – module Application Hypermedia - 2017


Configurer les bordures

TDI 3 – module Application Hypermedia - 2017


Configurer un côté spécifique

TDI 3 – module Application Hypermedia - 2017


Centrer le contenu d’une page

TDI 3 – module Application Hypermedia - 2017


Flux normal

TDI 3 – module Application Hypermedia - 2017


Positionnement relatif

TDI 3 – module Application Hypermedia - 2017


Positionnement absolu

TDI 3 – module Application Hypermedia - 2017


Propriété float

TDI 3 – module Application Hypermedia - 2017


Propriété clear

TDI 3 – module Application Hypermedia - 2017


Maquette de page
CSS modèle de page 2 colonnes (navigation à
gauche)

TDI 3 – module Application Hypermedia - 2017


CSS modèle de page 2 colonnes (top logo, left
nav)

TDI 3 – module Application Hypermedia - 2017


Configurer les liens dans une liste non
ordonnée

TDI 3 – module Application Hypermedia - 2017


Propriété display

TDI 3 – module Application Hypermedia - 2017


Configurer les liens dans une liste non
ordonnée

TDI 3 – module Application Hypermedia - 2017


Types d’éléments

Éléments blocs
‣ Prennent la forme d’un bloc dans la page
‣ ensemble de lignes
‣ ne peuvent être contenus que dans d’autres éléments blocs
‣ Exemple : p, img, ul, table, h1, div...
Éléments inline
‣ S’inscrivent dans la continuité des éléments
‣ ne forcent pas un changement de ligne
‣ peuvent être inclus dans n’importe quel élément
‣ Exemple : a, em, span…
Éléments de listes
‣ éléments HTML qui ont un marqueur (ex: bullet) et un ordre
TDI 3 – module Application Hypermedia - 2017 66
Rappel sur div et span

div
‣ élément contenant d’autres éléments, servant à définir un bloc
‣ servira essentiellement à faire du positionnement de bloc
spam
‣ élément contenant d’autres éléments, inline
‣ servira essentiellement à regrouper des caractéristiques
globales pour des éléments textuels

TDI 3 – module Application Hypermedia - 2017 67


Propriétés de positionnement

S’appliquent aux éléments blocs


Attribut position
‣ static
‣ bloc placé en fonction de sa position dans l’ordre des balises,
‣ ne peut pas être modifiée dynamiquement
‣ absolute
‣ bloc placé précisément par rapport aux bords de la fenêtre d’affichage
‣ la position peut être modifiée dynamiquement (déplacement)
‣ relative
‣ bloc positionné par rapport à sa position normale, dans le flux
(ex. décalage de 20 pts à droite)

TDI 3 – module Application Hypermedia - 2017 68


Propriétés graphiques : visibilité

Attribut visibility et display


‣ indiquent si (visible|hidden) et comment un élément est affiché
Attribut z-index
‣ en cas de superposition de blocs d’affichage, indique l’ordre
dans lesquels le navigateur doit les afficher (cf. couches/layers
dans les logiciels de dessin)
Remarques
‣ les distances s’expriment en pixels (px), points (pt), unités
métriques (cm, mm), ou pourcentages de la taille de la fenêtre
(%) ou en unité relative (em, rem)

TDI 3 – module Application Hypermedia - 2017 69


Le modèle de boite (box model)

http://chimera.labs.oreilly.com/books/1234000001819/ch02.html#the_box_model
TDI 3 – module Application Hypermedia - 2017 70
Structure, div et span
‣ Utilité
‣ Regrouper des sous-parties de document
‣ Pour leur donner un nom
‣ Pour enclore (contenir) du texte ou d’autres éléments XHTML
‣ Pour les traiter globalement en leur affectant des styles, des événements…
‣ Mais sans leur donner de sémantique particulière
‣ <span> ... </span>
‣ Élément de type inline
‣ Contient du texte ou d’autres éléments inline
‣ <div> ... </div>
‣ Élément de type block
‣ Contient du texte, d’autres éléments inline ou block
‣ Retour chariot à la fin

TDI 3 – module Application Hypermedia - 2017 71