Artil Maroc Loit

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

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>

CSS : le style
h1{
color: red;
}
h2{
color: blue;
font-style: italic;
}
p{
color: white;
background-color: black;
}

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

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

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

Types de styles
TDI 3 – module Application Hypermedia - 2017

Styles intégrés

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>

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

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)

Structure des règles
h1 { font-family: Arial, sans-serif; font-style: italic }

séparateur de propriétés/valeurs
Exemple
body {
background: #FFFFFF;
color: black; /* commentaire */
margin-left: 5%;
margin-right: 5%;
font-family: Tahoma, Optima,
Arial, sans-serif;
}
Types de sélecteur
‣ Simples et groupes
‣ Classes
‣ Pseudo-classes
‣ Pseudo-éléments
‣ Contextuels

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

Grouper des styles

Sélecteurs CSS : classes

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

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

Sélecteur Id

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

Police : font-family

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

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
text-transform
‣ uppercase : tout mettre en majuscules
‣ lowercase : tout mettre en minuscules
‣ capitalize : début des mots en majuscules
‣ none : normal (par défaut)
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
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 )

Exemples pour configurer la taille, la graisse, le style

Aligner et indenter du texte

Hauteur et largeur

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

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

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 }

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
CSS background-image

CSS background-repeat

Usages de background-repeat

CSS3 propriété opacity

Configurer les listes avec CSS

list-type-style

L’élément div : <div>

L’élément span : <span>

span : exemple

Le modèle de la boite

Configurer les marges

Configurer le padding

Configurer les bordures

Configurer un côté spécifique

Centrer le contenu d’une page

Flux normal

Positionnement relatif

Positionnement absolu

Propriété float

Propriété clear

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

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

Configurer les liens dans une liste non
ordonnée

Propriété display

Configurer les liens dans une liste non
ordonnée

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

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)

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)

Le modèle de boite (box model)
http://chimera.labs.oreilly.com/books/1234000001819/ch02.html#the_box_model
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

Artil Maroc Loit

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Artil Maroc Loit

Uploaded by

Copyright:

Available Formats

Éléments d’une page web

TDI 3 – module Application Hypermedia - 2017 2

One of the main challenges we see in

TDI 3 – module Application Hypermedia - 2017 3

<p>One of the main challenges we see in

TDI 3 – module Application Hypermedia - 2017 4

TDI 3 – module Application Hypermedia - 2017 5

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

TDI 3 – module Application Hypermedia - 2017 6

TDI 3 – module Application Hypermedia - 2017 7

TDI 3 – module Application Hypermedia - 2017 8

TDI 3 – module Application Hypermedia - 2017

TDI 3 – module Application Hypermedia - 2017 10

TDI 3 – module Application Hypermedia - 2017 11

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

TDI 3 – module Application Hypermedia - 2017 12

On peut avoir concurrence entre plusieurs

TDI 3 – module Application Hypermedia - 2017 13

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

TDI 3 – module Application Hypermedia - 2017 16

TDI 3 – module Application Hypermedia - 2017 17

TDI 3 – module Application Hypermedia - 2017

TDI 3 – module Application Hypermedia - 2017 19

TDI 3 – module Application Hypermedia - 2017 20

TDI 3 – module Application Hypermedia - 2017 21

TDI 3 – module Application Hypermedia - 2017

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

TDI 3 – module Application Hypermedia - 2017 25

TDI 3 – module Application Hypermedia - 2017

TDI 3 – module Application Hypermedia - 2017

TDI 3 – module Application Hypermedia - 2017

TDI 3 – module Application Hypermedia - 2017

TDI 3 – module Application Hypermedia - 2017

TDI 3 – module Application Hypermedia - 2017

TDI 3 – module Application Hypermedia - 2017

TDI 3 – module Application Hypermedia - 2017 36

TDI 3 – module Application Hypermedia - 2017 37

TDI 3 – module Application Hypermedia - 2017

TDI 3 – module Application Hypermedia - 2017

TDI 3 – module Application Hypermedia - 2017

TDI 3 – module Application Hypermedia - 2017

TDI 3 – module Application Hypermedia - 2017

TDI 3 – module Application Hypermedia - 2017

TDI 3 – module Application Hypermedia - 2017

TDI 3 – module Application Hypermedia - 2017

TDI 3 – module Application Hypermedia - 2017

TDI 3 – module Application Hypermedia - 2017

TDI 3 – module Application Hypermedia - 2017

TDI 3 – module Application Hypermedia - 2017

TDI 3 – module Application Hypermedia - 2017

TDI 3 – module Application Hypermedia - 2017

TDI 3 – module Application Hypermedia - 2017

TDI 3 – module Application Hypermedia - 2017

TDI 3 – module Application Hypermedia - 2017

TDI 3 – module Application Hypermedia - 2017

TDI 3 – module Application Hypermedia - 2017

TDI 3 – module Application Hypermedia - 2017

TDI 3 – module Application Hypermedia - 2017

TDI 3 – module Application Hypermedia - 2017

TDI 3 – module Application Hypermedia - 2017

TDI 3 – module Application Hypermedia - 2017

TDI 3 – module Application Hypermedia - 2017

TDI 3 – module Application Hypermedia - 2017 67