SlideShare une entreprise Scribd logo
1  sur  82
Télécharger pour lire hors ligne
Concept & Outils pour Internet
Intégration Web

Stéphane PERES – stephane.peres@npcmedia.fr
Twitter : @webchronique
2013

Pour DL les cours :
http://webchronique.com/cours/
Pour commencer …

XHTML/CSS

Page 2
Pour commencer

Pour commencer
 Objectifs du module
 Principes fondamentaux
Documents Hypermédias (xHTML)
Les feuilles de style CSS

XHTML/CSS

Page 3
Pour commencer

Objectifs du module ?
 Vous rendre plus critiques par rapport au Web en général

 Comprendre ce qui se passe quand vous cliquez sur une
page Web
 Être capable de dialoguer avec des concepteurs
 Être capable de réaliser votre propre site Web
 Initiation aux nouvelles balises HTML5 et CSS3

XHTML/CSS

Page 4
Pour commencer

Les cours …
4 h de CM + 20 h de TD (groupe)

Pour voir
 Balises standards, tableaux, listes, divisions,
 Formulaires, images, boutons …
 Feuilles de style CSS, DTD..

Pour ne pas voir
 PHP
 JavaScript (ex de bibliothèque : jQuery)
 Flash (AS3)1
XHTML/CSS

Page 5
Pour commencer

Évaluation :
 Un examen final de 2h pratique (50%).
 Un site Web à réaliser en binôme (50%).

XHTML/CSS

Page 6
Pour commencer

Pour commencer
 Objectifs du module
 Principes fondamentaux
Documents Hypermédias (xHTML)
Les feuilles de style CSS

XHTML/CSS

Page 7
Pour commencer

L’informatique

Science du traitement rationnel,
notamment
par
machines
automatiques, de l'information
L’ENIAC
 Electronic Numerical
Integrator And Calculator,
1943-1945

 ~18 000 tubes
 Calcul d’une trajectoire en
deux jours
http://www.computerhistory.org/
XHTML/CSS

Page 8
Pour commencer

L’informatique

 IBM Blue Gen : 46 000
milliards d'opérations/s soit
~15 000 PC
 Exemple de Google :
 25 sites, 450 000 serveurs
(estimation)
 8 000 serveurs en 2001
 200 000 serveurs pour Microsoft
en 2006

 Apparition de divers médias
 Internet : affichage d’éléments
texte, image, son, liens, animation,
interaction

XHTML/CSS

Page 9
Pour commencer

L’accès au média

Nécessité de l’hypertexte
 Pauvreté des Interfaces Homme / Machine (IHM)
 Ecran : espace réduit, à 2 dimensions
 Clavier : peu pratique, lent, dépendant des langues
 Souris : rapide mais actions réduites

 Hypertexte





XHTML/CSS

Regroupe les principaux média : texte, image, son, vidéo
Une mise en forme de type « traitement de texte »
Des liens vers d’autres documents hypertextes
Interactivité

Page 10
Pour commencer

SGML
Standard Generalized Markup Language
 HTML, créé par Tim Berners-Lee pour le World Wide
Web, est une application de SGML.
 Structure les documents textes pour l’édition

 Inclusion de média
 Pas de style de présentation (pas de CSS)

 Mise en page simplifiée
 Standard dès 1983
XHTML/CSS

Page 11
Pour commencer

SGML : principe

 Définir des balises
 <ouvrante>…</fermante>

 Utiliser ces balises pour structurer le contenu d’un
document
 Structure logique du document
(et non la mise en forme complexe)
• Titre,
• Sous-titre,
• Corps de texte,
• Graphique

XHTML/CSS

Page 12
Pour commencer

SGML : principe
 Plusieurs éléments
 DTD (Document Type Definition)
• Définition de la structure type du document
• Jeu de balises disponibles pour le document SGML
 Instance du document
• Texte réel du document, fait référence à une DTD
 Synthèse du document

 Option du document
 Jeu de caractères

XHTML/CSS

Page 13
Pour commencer

HTML : norme pour internet
 HyperText Mark-up Langage, dérivé de SGML
 Langage de balisage très simple
 Plusieurs média regroupés dans la même page
• texte, image, son, vidéo, autre...
 Mise en forme
• textes avec mise en forme, tableaux, cadres
 Liens
• accéder à des pages distantes, à une partie d’un document

 Balises prédéfinies (pas de définition possible)
 Caractérisent un bloc de données
• <B> … caractères gras … </B>
• <A HREF="http://www.univ-mlv.fr"> un lien </A>
 Ou une action (une seul balise !)
• </P> fin de paragraphe </BR> saut de ligne
XHTML/CSS

Page 14
Pour commencer

HTML : évolution
1995 : HTML 2
 Mise en forme très succincte
 Structuration hiérarchique du document
• titres 1-7, paragraphes, listes ...
 Formatage des caractères
• gras, italique, couleurs ...
 Formatage des paragraphes
• alignement, décalage…

 Images GIF et JPEG
 Lien sur le texte et les images
 Passage à une autre page

1997 : HTML 3.2
 Aide à la mise en forme
 Tableaux
 Décomposition de l’écran en cadres (frame)
XHTML/CSS

Page 15
Pour commencer

HTML : évolution

2000-2006 : XHTML
(Extensible Markup Language => XML)
 XHTML se fonde sur la syntaxe définie par XML, plus récente, mais
plus simple que celle définie par SGML sur laquelle repose HTML

2007 à nos jours : HTML5 et abandon du XHTML 2
 Compromis entre la richesse sémantique du langage et l’utilité
pratique des solutions disponibles pour remplir l’objectif majeur
d’indépendance envers le média de restitution.

XHTML/CSS

Page 16
Pour commencer

HTML : contenu d’une page

 Données des médias + informations de mise en forme
du document
 Entête : informations générales sur le document
(classification)
 Titre (obligatoire)
 Format
 Informations sur l’auteur, la date de création …

 Corps du document
 Couleur ou texture du fond de la page
 Fond sonore
 Contenu proprement dit

XHTML/CSS

Page 17
Pour commencer

HTML : Structure d’une page

<HTML>
<HEAD>
<TITLE>titre du document</TITLE>
</HEAD>
<BODY>
<!-- Commentaire -->
<H1>titre 1</H1>
<P align=LEFT> paragraphe
<A HREF="adresse.html"> nom du lien </A>
</P>
<IMG SRC="image.jpg" width=100 >
<UL>
<LI> item 1 </LI>
<LI> item 2 </LI>
<OL>
<LI> sous item 1 </LI>
<LI> sous item 2 </LI>
</OL>
</UL>
</BODY>
</HTML>
XHTML/CSS

Page 18
Pour commencer

HTML : Principe du client/serveur

XHTML/CSS

Page 19
Pour commencer

Un Web plus beau

Quelques exemples :
http://www.iutopi.com/
http://www.billysdiner.com/
http://www.ro.me/film

XHTML/CSS

Page 20
Pour commencer

Interdiction de faire cela

XHTML/CSS

Page 21
Documents Hypermédias (xHTML)

XHTML/CSS

Page 22
xHTML

Éléments & balises

 Les éléments = associer à différents blocs
(texte, images...) des informations structurelles,
sémantiques et de présentation désirées :
 Liens hypertextes, des titres, des paragraphes des listes, des
tableaux, des images

 Les éléments sont délimités par des balises qui
encadrent l’élément : <xx> éléments </xx>
 Les balises sont prédéfinies en html

XHTML/CSS

Page 23
xHTML

Les attributs

 Permettent d’apporter des précisions sur une balise
 Syntaxe : nom_attribut="valeur attribut";
 Convention
pour les
balises et
attributs
indifféremment en minuscule ou en majuscule

:

 Rajouter feuille de style "standard"

XHTML/CSS

Page 24
xHTML

HTML : Structure d’une page

Un document HTML comporte 2 parties,
encadrées par des balises <HTML> et </HTML> :

 Une en-tête de déclaration délimitée par les balises
<HEAD> et </HEAD>
 Le corps du document, dans lequel on placera le contenu
de celui-ci délimité par les balises <BODY> et </BODY>

XHTML/CSS

Page 25
xHTML

Les jeux de caractères

 Code ASCII standard sur 7 bits
 Caractères accentués utilisent un codage particulier :
& + la lettre + l'accent
 Exemple : &eacute; => é

http://www.snv.jussieu.fr/archambault/cours/html/ressources/caracteres.html

XHTML/CSS

Page 26
xHTML

Les entêtes et paragraphe
 Les éléments H1, H2... H6 permettent de définir des
titres de différents niveaux
 Il y a 6 niveaux d'entête, H1, H2, H3, H4, H5 et H6.
H1 correspond au titre principal, etc.

 Taille de fenêtre dépend du navigateur
 Définir les paragraphes via la balise <P> </P>
 Forcer un saut de ligne <BR>
XHTML/CSS

Page 27
xHTML

Les listes

 Il existe 3 types de listes :
 Les listes non numérotées (élément UL)
• pour indiquer chaque nouvel item de la liste, on utilise l'élément
<LI>.
 Les listes numérotées (élément OL)
• pour indiquer chaque nouvel item de la liste, on utilise l'élément
<LI>.
 Les listes descriptives (élément DL)
• Chaque item est composé d'un terme (élément DT) et d'une
description (élément DD).

XHTML/CSS

Page 28
xHTML

Les images
 On utilise l'élément <IMG> (sans </IMG>) pour placer
les images. Deux attributs sont obligatoires :
 L'attribut src spécifie le nom du fichier image à charger. Les
fichiers images doivent impérativement être aux formats GIF, JPG
ou PNG (présence d’une couche alpha).
 L'attribut alt indique un contenu alternatif, c'est à dire un texte à
afficher à la place de l'image lorsque, pour différentes raisons, elle
n'apparaît pas.
 Attributs optionnels :
• align
• border
• width, height
• hspace, vspace

XHTML/CSS

Page 29
xHTML

Les liens hypertextes

 Les liens hypertextes sont définis à l'aide des balises
<A> </A>.
 Le texte de cet élément constitue la zone cliquable
 L’attribut HREF permet de spécifier l’adresse URL que
l’on désire afficher

 Exemple :
<A HREF="adresse de destination"> Nom du lien </A>

XHTML/CSS

Page 30
xHTML

Les liens hypertextes : typologie de liens
 Les liens hypertextes : types de liens









Un document
Un fichier HTML
Un texte
Une image GIF, JPEG, PNG ou PostScript
Un son
Un film
Un autre service Internet
Un FTP (Transfert de fichiers)
<a href="ftp://ftp.ibp.fr/pub"> Le serveur de l'IBP</a>

 Un SMTP (Échange de courrier électronique)
<a href="mailto:archambault@iut.univlehavre.fr">
envoyer un message à D. Archambault</a>

 …

XHTML/CSS

Page 31
xHTML

Les images cliquables

 Il suffit de placer un élément IMG dans un lien
hypertexte <A>.
 Exemple :
<A HREF="adresse de destination"> <IMG src="..."> </A>

XHTML/CSS

Page 32
xHTML

Les cartes cliquables
 Une image dans laquelle sont définies des zones
associées à des liens
 A la balise <IMG>, on associe l’attribut map qui
permet d'indiquer le nom de la carte qui doit être
utilisée, puis on décrit le contenu de la balise <MAP>
via des balises <AREA> qui définissent une zone.

 La balise <AREA> doit comporter différents attributs :
 l'attribut href pour indiquer l'adresse du lien de cette zone
 l'attribut shape pour indiquer la forme de la zone (rect, circle, poly)
 l’attribut coords pour indiquer les coordonnées des différentes
formes

XHTML/CSS

Page 33
xHTML

Les cartes cliquables : exemple

<IMG src=imagemap.gif alt="Carte cliquable" usemap=#map>
<MAP name=map>
<AREA href="index.html" shape="rect" coords="10,10,280,40"
alt="Cours HTML">
<AREA href="intro.html" shape="rect" coords="10,50,70,110"
alt="Introduction">
<AREA href="bases.html" shape="circle" coords="110,80,30"
alt="Bases">
<AREA href="textes/liens.html"
shape="poly«coords="150,70,180,70,180,50,210,80,180,110,180,90,150,
90" alt="Liens">
<AREA nohref shape="rect" coords="220,50,280,110" alt="Rien">
<AREA href="textes/refs.html" shape="default" alt="Références">
</MAP>
http://www.snv.jussieu.fr/archambault/cours/html/textes/images.html#imgclic
XHTML/CSS

Page 34
xHTML

Les tableaux
Un tableau est décrit par différents éléments :
 L'élément TABLE correspond au tableau lui-même.
 L'élément TR est utilisé pour définir chacune des lignes du
tableau.
 L'élément TD est utilisé pour définir chaque colonne du
tableau.
<TABLE>
<TR> <TD> A </TD> <TD> B </TD> </TR>
<TR> <TD> C </TD> <TD> D </TD> </TR>
</TABLE>
XHTML/CSS

Page 35
xHTML

Les tableaux
L'élément TD peut être utilisé avec les attributs suivants :
 colspan : la cellule courante s'étend sur plusieurs
colonnes.
 rowspan : la cellule courante s'étend sur plusieurs lignes.
 nowrap : évite les sauts de lignes à l'intérieur de la
cellule courante.

 align

: alignement horizontal.

 valign

: alignement vertical.

L'élément TH (à la place de TR permet de définir des
cellules d'entête => un titre).
XHTML/CSS

Page 36
xHTML

Les tableaux
Principaux attributs applicables à l'élément TAB :
 border : pour spécifier l'épaisseur de la bordure
extérieure.

 cellpading : pour spécifier l'espace entre les bordures
et le contenu des cellules.
 cellspacing : pour spécifier l'épaisseur des bordures
et entre les cellules.
 width : permet de déterminer quelle proportion de la
largeur de la fenêtre doit être occupée.

XHTML/CSS

Page 37
xHTML

Les formulaires
La balise <FORM> contient deux attributs :
 L'attribut ACTION : indique l'action à exécuter lors de
l'envoi des données.

 L'attribut METHOD : définit la méthode de transfert des
données. Les deux valeurs possibles sont GET ou POST.
<FORM METHOD="POST" ACTION="http://www....">
...
</FORM>
<FORM NAME="nom_du_formulaire" ACTION="mailto:votre_e-mail"
METHOD="post" ENCTYPE="text/plain">
...
</FORM>
XHTML/CSS

Page 38
xHTML

Les formulaires : les bases

 Tous les champs de saisie se font dans des balises
<INPUT> sans le </INPUT>
 L’attribut type de la balise <INPUT> permet de choisir
le type de saisie (prédéfinie) que vous pouvez utiliser.

XHTML/CSS

Page 39
xHTML

Les formulaires : les bases

Les deux types incontournables :

 Le type text permet de saisir un texte :
<INPUT TYPE="text" NAME="nom_du_champ" SIZE="taille"
MAXLENGTH="taille_maximum" VALUE="texte_par_défaut">

 Type submit permet de générer le bouton avec lequel
le formulaire sera envoyé à l’action de celui-ci :
<INPUT TYPE="submit" VALUE="texte_à_afficher">

XHTML/CSS

Page 40
xHTML

Les formulaires

Les formulaires : les autres types de saisie (input)
 Le type passwd permet de saisir un texte caché (mot de
passe)
<INPUT TYPE="password" NAME="nom_du_champ"
SIZE="taille" MAXLENGTH="taille_maximum">

 Le type radio permet de faire un choix entre plusieurs
propositions (une seule valeur à cochée)
<INPUT TYPE="radio" NAME="nom" VALUE="valeur">

XHTML/CSS

Page 41
xHTML

Les formulaires

Les formulaires : les autres types de saisie (input)
 Le type checkbox permet de faire un choix multiple
entre plusieurs propositions (il est possible de cocher
plusieurs cases)
<INPUT TYPE="checkbox" NAME="nom" VALUE="valeur">

 Le type file permet de saisir le nom d’un fichier
<INPUT TYPE="file" NAME="nom" SIZE="taille">

 Le type reset permet d’effacer tous les champs du
formulaire
<INPUT TYPE="file" NAME="nom" SIZE="taille">
XHTML/CSS

Page 42
xHTML

Les formulaires : les autres éléments

Les listes : permettent de faire le choix entre un grand
nombre de valeurs prédéfinies via l’utilisation des balises
<SELECT> et </SELECT>. Chaque choix est matérialisé
par la balise <OPTION> qui ajoute une option dans la liste.
<SELECT NAME="nom_de_la_liste">
<OPTION VALUE="valeur_1">Choix_1
<OPTION VALUE="valeur_2">Choix_2
<OPTION VALUE="valeur_X">Choix_X
</SELECT>

XHTML/CSS

Page 43
xHTML

Les formulaires : le champ de saisie multi-lignes

Permet d'écrire un commentaire assez long, via les
balises <TEXTAREA> et </TEXTAREA>
<TEXTAREA NAME="nom_du_champ" ROWS="nombre_de_lignes"
COLS="nombre_de_colonnes"> </TEXTAREA>

XHTML/CSS

Page 44
xHTML

Les formulaires : pour aller (un peu) plus loin

La balise <INPUT> peut accepter un type caché pour
transférer des informations cachées qui seront envoyées à
l’action associé à la validation du formulaire.
<INPUT
TYPE="hidden"
[CHECKED]>

NAME="nom"

VALUE="valeur"

La balise <INPUT> peut aussi accepter un type image pour
personnaliser un bouton
<INPUT TYPE="image" SRC="adresse_de_l'image" WIDTH=
"largeur" HEIGHT="hauteur" BORDER= "bordure">

XHTML/CSS

Page 45
xHTML

Les formulaires : pour aller (un peu) plus loin
La récupération des variables d’un formulaire se fait
systématiquement en "dynamique" : PHP …
<form method="POST" action="titi.php">
<input type="text" name="xx">
<input type="submit" value="OK">
</form>
titi.php
<html>
<head>
<title>Recepteur</title>
</head>
<body>
<?php
echo $_POST['xx'] ;
?>
</body>
</html>
XHTML/CSS

Page 46
xHTML

Les divisions : balise <DIV>
Permet de découper la page en bloc et d’associer des
paramètres différents à chaque bloc.

XHTML/CSS

Page 47
xHTML

Les divisions : pour mieux comprendre

 Il existe deux types généraux d'éléments HTML : les
balises de type "en-ligne" et les balises de type "bloc".
 Le flux d'un document pourrait se définir comme étant
le comportement naturel d'affichage des éléments
d'une page web.
Autrement dit, les éléments se succèdent dans l'ordre où
ils sont déclarés dans le code HTML.

XHTML/CSS

Page 48
xHTML

Les divisions : pour mieux comprendre

 Il existe plusieurs schémas de positionnement : un
schéma
de
positionnement
dans
le
flux
(positionnement par défaut), et quatre schémas de
positionnement qui sortent l'élément du flux
(positionnement absolu, positionnement fixe et
positionnement relatif, positionnement flottant).
 L'imbrication des éléments les uns aux autres est
possible et prédéfinie : cela permet de "styler"
facilement les éléments similaires aux calques

XHTML/CSS

Page 49
xHTML

Balise <DIV> : les attributs importants
 Le positionnement relatif permet de décaler un
élément par rapport à une position de référence: celle
qu'il avait dans le flux. Les éléments qui le suivent et le
précèdent ne sont pas influencés par ce décalage
puisqu'ils considèrent que l'élément est toujours dans
le flux à sa position initiale.
 Permet de servir de référent à un élément enfant positionné en
absolu (rappelons qu'un élément positionné absolument grâce aux
propriétés top, left, … le fera par rapport à la fenêtre du
navigateur à défaut d'avoir un parent lui-même positionné).
 Bénéficie de la possibilité d'utiliser la propriété z-index pour gérer
des superpositions d'éléments (propriété inopérante pour des
éléments du flux).
XHTML/CSS

Page 50
xHTML

Balise <DIV> : les attributs importants
 La position absolue : l'élément étant totalement extrait
du flux, il ne dépend plus du tout des éléments qui le
côtoient.
"un élément positionné en absolu se réfère non pas à son
parent direct, mais au premier ancêtre positionné qu'il
rencontre"
Propriétés associée : top, bottom, left ou right
Les coordonnées d'un point s'expriment alors de haut en
bas (top) et de gauche à droite (left).

XHTML/CSS

Page 51
xHTML

Balise <DIV> : les attributs importants

 Le positionnement fixe (position: fixed) positionne
l'élément par rapport à la fenêtre du navigateur (top,
right, …), l'élément est fixé à un endroit et ne pourra
se mouvoir, même par exemple lors de la présence
d'une barre de défilement.
 La position statique (position: static) correspond
simplement à la valeur par défaut d'un élément du flux.

XHTML/CSS

Page 52
xHTML

Balise <DIV> : les attributs importants
<DIV style="position: absolute; top: 99 px;
left: 99 px; visibility : visible; z-index : 2;">

XHTML/CSS

Page 53
xHTML

Balise <DIV> : les attributs importants
 La propriété flottant (float) adopte par défaut la
largeur qu'occupe son contenu. Le principe de base
est simple: un élément flottant est ôté partiellement du
flux et placé à l'extrême gauche (float: left) ou droite
(float: right) de son conteneur, forçant par la même
occasion tout contenu du flux qui suit à l'envelopper.

 La propriété clear s'utilise conjointement au float et
permet à un élément (qui peut être d'ailleurs lui-même
flottant) de ne plus subir le comportement d'habillage
dicté par un objet flottant qui le précède directement
et, par conséquent, de se caler en dessous de ce
dernier.
XHTML/CSS

Page 54
Les feuilles de style CSS

XHTML/CSS

Page 55
CSS

Les feuilles de style (CSS)
Cascading Style Sheets (feuilles de style en cascade),
notée CSS.
Fichier (.css) contenant des caractéristiques de mise en
forme.

Idée : séparer la mise en page du contenu
 Définir un type de présentation une seule fois, que l'on
réutilise dans toutes les pages.

 Propagation naturelle des modifications.
XHTML/CSS

Page 56
CSS

Les feuilles de style (css) : utilisation

Dans l’entête du fichier HTML
<html>
<head>
<title>Titre du fichier html</title>
<link rel="stylesheet" type="text/css"
href="formats.css">
</head>
<body>
</body>
</html>

XHTML/CSS

Page 57
CSS

Les feuilles de style (css) : utilisation
Structure de base du fichier CSS:
sélecteur { propriété: valeur; … }
 Le sélecteur est de trois types :
1. Balise
2. Identifiant (id)
3. Classe (class)
 La propriété, c'est l'attribut qu'on veut appliquer
(font, background, margin, etc).
 Enfin la valeur précise les caractéristiques de la
propriété.

XHTML/CSS

Page 58
CSS

Les feuilles de style (css) : utilisation

Le plus simple : associer un style à une balise HTML
div {background-color: red ; … }

Résultat: toutes les divisions de tous les fichiers utilisant
cette feuille de style auront une couleur de fond rouge.

XHTML/CSS

Page 59
CSS

Les feuilles de style (css) : utilisation

Format associé à plusieurs balises HTML
div, table { background-color: red ; … }

Résultat : toutes les divisions et toutes les tables de tous les
fichiers utilisant cette feuille de style auront une couleur de
fond rouge.

XHTML/CSS

Page 60
CSS

Les feuilles de style (css) : utilisation

On aimerait bien quand même être plus « sélectif » :

 Multiplier les fichiers .css (pas cool !).
 Pouvoir appliquer un style à une seule division bien
précise ou à un sous-ensemble de divisions
correctement choisies.

XHTML/CSS

Page 61
CSS

Les feuilles de style (css) : utilisation
Le plus simple : l’identificateur unique

Définition
(dans le .css)

#toto { background:red; }

Utilisation
(dans le .html)

<div id= "toto">

XHTML/CSS

Page 62
CSS

Les feuilles de style (css) : utilisation

Identificateur : problème d’unicité
Il n'est pas correct d'avoir deux mêmes id dans une page

ex :
<div id="toto"></div>
<div id="toto"></div>
Bien pratique avec du java pour avoir accès à un élément
précis

XHTML/CSS

Page 63
CSS

Les feuilles de style (css) : utilisation
Identificateur : exemple parfait pour ces 4 divisions
#toto1 {
background:white;
}
#toto2 {
background:jauneclair;
}
…

<div
<div
<div
<div
XHTML/CSS

id="toto1"></div>
id="toto2"></div>
id="toto3"></div>
id="toto4"></div>
Page 64
CSS

Les feuilles de style (css) : utilisation
Identificateur : pas
possible avec ces 2
tableaux pour lesquels
on aimerait avoir les
mêmes propriétés (de
mise en page).

Les classes : lorsqu'il y aura plusieurs objets de ce type.

XHTML/CSS

Page 65
CSS

Les feuilles de style (css)
On ajoute un attribut class à une balise :
Soit la classe Rouge appliquée à la balise div :

Définition
(dans le .css)

div.rouge {
font: Verdana 12px; color:
#FF0000;
}

Utilisation
(dans le .html)

<div class="Rouge">
Texte à mettre
en rouge et en gras
</div>

XHTML/CSS

Page 66
CSS

Les feuilles de style (css)

La notion de classe
au sens large

Exemple de classification :
Hiérarchie de propriétés
et mécanisme d’héritage

XHTML/CSS

Page 67
CSS

Les feuilles de style (css)
Les classes universelles (s’applique à n’importe quelle balise)

Définition
(dans le .css)

.toto {
background:red;
}

Utilisation
(dans le .html)

<div class="toto">
ou
<P class="toto">

XHTML/CSS

Page 68
CSS

Les feuilles de style (css)
Les classes : règle de cascade
.headline { color:red; font-size: 3; }
#specials { color:blue; font-style: italic; }

sont appliquées à un même élément XHTML:
<h1 id="specials" class="headline">
Today's Specials </h1>

la couleur bleue prévaudra sur la couleur rouge.

XHTML/CSS

Page 69
CSS

Les feuilles de style (css) : utilisation
Les classes : principe d’héritage

Définition
(dans le .css)

a.titi { color:red; }

Cela ne concerne que les balises <a> de classe titi.

Utilisation
(dans le .html)

XHTML/CSS

<DIV>
<A class="titi" href=…> </A>
</DIV>

Page 70
CSS

Les feuilles de style (css) : utilisation

Exemple :
Définition
(dans le .css)

div.menu a:hover{
propriétés
}

Cela va affecter uniquement les liens <a> survolés
("a:hover") contenus dans les <div> de classe ".menu"

Utilisation
(dans le .html)

XHTML/CSS

<DIV class="menu">
<A href=…></A>
</DIV>

Page 71
CSS

Les feuilles de style (css) : utilisation
les pseudo-class de la balise <A>
L'héritage s'applique aussi à la balise de liens <a>.
Ses enfants sont les pseudo-classes suivantes :
: link (lien par défaut)
: visited (lien déjà visité)
: hover (lien au survol)
: active (lien actif)

Définition
(dans le .css)

a:hover { color:red; }

Utilisation
(dans le .html)

<A href=…> </A>

XHTML/CSS

Page 72
CSS

Les feuilles de style (css) : utilisation

Les classes : ne pas confondre !

Définition
(dans le .css)

div.menu , a:hover{
propriétés
}

Cela va affecter à la fois les liens <a> survolés
("a:hover") et les <div> de classe ".menu" survolées

XHTML/CSS

Page 73
HTML 5

XHTML/CSS

Page 74
HTML5

Les possibilités avec HTML 5
Canvas : permet de dessiner au sein de la page web, à
l'intérieur de la balise HTML <canvas>. On peut dessiner des
formes (triangles, cercles…) mais aussi ajouter des images,
les manipuler, appliquer des filtres graphiques
SVG : permet de créer des dessins vectoriels au sein des
pages web. À la différence de Canvas, ces dessins peuvent
être agrandis à l'infini (c'est le principe du vectoriel).
Drag & Drop : permet de faire « glisser-déposer » des objets
dans la page web, de la même façon qu'on peut faire glisserdéposer des fichiers sur son bureau.

XHTML/CSS

Page 75
HTML5

Les possibilités avec HTML 5
File API : permet d'accéder aux fichiers stockés sur la
machine du visiteur (avec son autorisation).
Géolocalisation : pour localiser le visiteur et lui proposer des
services liés au lieu où il se trouve (ex. : les horaires des
salles de cinéma proches).
Web Storage : permet de stocker un grand nombre
d'informations sur la machine du visiteur.
Appcache : permet de demander au navigateur de mettre en
cache certains fichiers, qu'il ne cherchera alors plus à
télécharger systématiquement.
WebGL : permet d'introduire de la 3D dans les pages web
XHTML/CSS

Page 76
HTML5

Les formats audio et vidéo
La balise <audio> que nous allons découvrir est reconnue
par tous les navigateurs récents, y compris Internet Explorer
à partir de la version 9 (IE9).
Ex 1 :
<audio src="hype_home.mp3" controls>Veuillez mettre à
jour votre navigateur !</audio>
Ex 2 :
<audio controls>
<source src="hype_home.mp3"></source>
<source src="hype_home.ogg"></source>
</audio>

XHTML/CSS

Page 77
HTML5

Les formats audio et vidéo
La balise <video> que nous allons découvrir est reconnue
par tous les navigateurs récents, y compris Internet Explorer
à partir de la version 9 (IE9).
Ex 1 :
<video src="sintel.webm" controls poster="sintel.jpg"
width="600"> Il est temps de mettre à jour votre
navigateur !</video>
Ex 2 :
<video controls poster="sintel.jpg" width="600">
<source src="sintel.mp4" />
<source src="sintel.webm" />
<source src="sintel.ogv" />
</video>
XHTML/CSS

Page 78
Aide mémoire HTML & CSS

XHTML/CSS

Page 79
xHTML

Aide mémoire
http://webchronique.com/astuce-pour-les-developpeurs-html-css-php-mod-rewrite-seo/

XHTML/CSS

Page 80
xHTML

Styles Reset
@charset "utf-8";
/*
Theme Name: Webchronique
Theme URI: http://www.npcmedia.fr
Version: 1.6
Description: Design by <a href="http://www.npcmedia.fr">NPC MEDIA Création</a>.
Ce theme est protege par les droits d'auteurs.
Author: NPC MEDIA Création
Author URI: http://www.npcmedia.fr
*/
/*-------------------------------------*/
/*------------[STYLES RESET]-----------*/
/*-------------------------------------*/
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr,
acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike,
strong, sub, sup, tt, var,b, u, i, center, dl, dt, dd, ol, ul, li,fieldset, form, label,
legend,table, caption, tbody, tfoot, thead, tr, th, td
{ margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%;
vertical-align: baseline; }
body
{ line-height: 1; }
ol, ul
{ list-style: none; }
blockquote, q
{ quotes: none; }
blockquote:before, blockquote:after,q:before, q:after
{ content: ''; content: none; }
:focus
{ outline: 0; }
ins
{ text-decoration: none; }
del
{ text-decoration: line-through; }
table
{ border-collapse: collapse; border-spacing: 0; }

XHTML/CSS

Page 81
xHTML

Fond Face & CSS3

/* Polices */
@font-face
{ font-family:"Century Gothic";
src:url('../fonts/Century_Gothic.ttf'); }

/* Fondu */
a:link, a:visited
{ color:#cd9251; text-decoration:none; -webkit-transitionproperty:color;-webkit-transition-duration:1s;-moz-transition-property:color;-moz-transitionduration:1s;transition-property:color;transition-duration:1s; }

/* Opacité */
.single #sidebar img
moz-opacity:0.5; */ }

{ margin-bottom:15px; filter:alpha(opacity=50); opacity: 0.5; /* -

/* Coin arrondie */
input[type=text],input.text, input.title, textarea, select
{ background-color:#1F1F1F; padding: 2px; color: #cd9251; -mozborder-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; transitionduration:1s;transition-property:background-color;-moz-transition-duration:1s;-moz-transitionproperty:background-color;-webkit-transition-duration:1s;-webkit-transition-property:backgroundcolor; }

XHTML/CSS

Page 82

Contenu connexe

Tendances

Formation PHP
Formation PHPFormation PHP
Formation PHPkemenaran
 
Cours javascript
Cours javascriptCours javascript
Cours javascriptkrymo
 
Programmer en html5, css 3 et java script (70 480)
Programmer en html5, css 3 et java script (70 480)Programmer en html5, css 3 et java script (70 480)
Programmer en html5, css 3 et java script (70 480)Chamseddine Ouerhani
 
Fascicule de tp atelier développement web
Fascicule de tp atelier développement webFascicule de tp atelier développement web
Fascicule de tp atelier développement webHouda TOUKABRI
 
Cours développement côté serveur
Cours développement côté serveurCours développement côté serveur
Cours développement côté serveurHouda TOUKABRI
 
Un exemple élémentaire d'application MVC en PHP
Un exemple élémentaire d'application MVC en PHPUn exemple élémentaire d'application MVC en PHP
Un exemple élémentaire d'application MVC en PHPKristen Le Liboux
 
Les bases de l'HTML / CSS
Les bases de l'HTML / CSSLes bases de l'HTML / CSS
Les bases de l'HTML / CSSSamuel Robert
 
Cours JavaScript.ppt
Cours JavaScript.pptCours JavaScript.ppt
Cours JavaScript.pptPROFPROF11
 
Introduction à l’orienté objet en Python
Introduction à l’orienté objet en PythonIntroduction à l’orienté objet en Python
Introduction à l’orienté objet en PythonAbdoulaye Dieng
 
Cours CSS feuilles de style en cascade- mars 2015
Cours CSS feuilles de style en cascade- mars 2015Cours CSS feuilles de style en cascade- mars 2015
Cours CSS feuilles de style en cascade- mars 2015Abdoulaye Dieng
 
Cours php & Mysql - 1ére partie
Cours php & Mysql - 1ére partieCours php & Mysql - 1ére partie
Cours php & Mysql - 1ére partiekadzaki
 
Prise en main de WordPress
Prise en main de WordPressPrise en main de WordPress
Prise en main de WordPressAbdoulaye Dieng
 
Applications Android - cours 3 : Android Studio (Outil de développement)
Applications Android - cours 3 : Android Studio (Outil de développement)Applications Android - cours 3 : Android Studio (Outil de développement)
Applications Android - cours 3 : Android Studio (Outil de développement)Ahmed-Chawki Chaouche
 

Tendances (20)

Formation PHP
Formation PHPFormation PHP
Formation PHP
 
Cours javascript
Cours javascriptCours javascript
Cours javascript
 
Cours javascript v1
Cours javascript v1Cours javascript v1
Cours javascript v1
 
Programmer en html5, css 3 et java script (70 480)
Programmer en html5, css 3 et java script (70 480)Programmer en html5, css 3 et java script (70 480)
Programmer en html5, css 3 et java script (70 480)
 
Initiation au html
Initiation au htmlInitiation au html
Initiation au html
 
Fascicule de tp atelier développement web
Fascicule de tp atelier développement webFascicule de tp atelier développement web
Fascicule de tp atelier développement web
 
Cours développement côté serveur
Cours développement côté serveurCours développement côté serveur
Cours développement côté serveur
 
Php cours
Php coursPhp cours
Php cours
 
Un exemple élémentaire d'application MVC en PHP
Un exemple élémentaire d'application MVC en PHPUn exemple élémentaire d'application MVC en PHP
Un exemple élémentaire d'application MVC en PHP
 
Les bases de l'HTML / CSS
Les bases de l'HTML / CSSLes bases de l'HTML / CSS
Les bases de l'HTML / CSS
 
Langage HTML
Langage HTMLLangage HTML
Langage HTML
 
Cours HTML/CSS
Cours HTML/CSSCours HTML/CSS
Cours HTML/CSS
 
Cours JavaScript.ppt
Cours JavaScript.pptCours JavaScript.ppt
Cours JavaScript.ppt
 
Introduction à l’orienté objet en Python
Introduction à l’orienté objet en PythonIntroduction à l’orienté objet en Python
Introduction à l’orienté objet en Python
 
Cours CSS feuilles de style en cascade- mars 2015
Cours CSS feuilles de style en cascade- mars 2015Cours CSS feuilles de style en cascade- mars 2015
Cours CSS feuilles de style en cascade- mars 2015
 
HTML, CSS et Javascript
HTML, CSS et JavascriptHTML, CSS et Javascript
HTML, CSS et Javascript
 
Cours php & Mysql - 1ére partie
Cours php & Mysql - 1ére partieCours php & Mysql - 1ére partie
Cours php & Mysql - 1ére partie
 
Cours php
Cours php Cours php
Cours php
 
Prise en main de WordPress
Prise en main de WordPressPrise en main de WordPress
Prise en main de WordPress
 
Applications Android - cours 3 : Android Studio (Outil de développement)
Applications Android - cours 3 : Android Studio (Outil de développement)Applications Android - cours 3 : Android Studio (Outil de développement)
Applications Android - cours 3 : Android Studio (Outil de développement)
 

Similaire à Intégration Web HTML 5 & CSS 3

Cours Html.pdf
Cours Html.pdfCours Html.pdf
Cours Html.pdf4gnzggpfdw
 
Normes de base du Web GTI780 & MTI780 ETS A09
Normes de base du Web  GTI780 & MTI780  ETS   A09Normes de base du Web  GTI780 & MTI780  ETS   A09
Normes de base du Web GTI780 & MTI780 ETS A09Claude Coulombe
 
seance3-1 CSS.ppt
seance3-1 CSS.pptseance3-1 CSS.ppt
seance3-1 CSS.pptAmineReal
 
Cours_1 - HTML5 et JS.ppt
Cours_1 - HTML5 et JS.pptCours_1 - HTML5 et JS.ppt
Cours_1 - HTML5 et JS.pptRihabBENLAMINE
 
Rmll2010 Html5 Css3
Rmll2010 Html5 Css3Rmll2010 Html5 Css3
Rmll2010 Html5 Css3Fnot
 
Formation - P2 - Standards du Web
Formation - P2 - Standards du WebFormation - P2 - Standards du Web
Formation - P2 - Standards du WebPatrick Vincent
 
Langage HTML - Fondamentaux et ateliers
Langage HTML - Fondamentaux et ateliersLangage HTML - Fondamentaux et ateliers
Langage HTML - Fondamentaux et ateliersFrédéric Simonet
 
Chapitre 1 - Introduction générale.pdf
Chapitre 1 - Introduction générale.pdfChapitre 1 - Introduction générale.pdf
Chapitre 1 - Introduction générale.pdfAnouAr42
 
Chapitre 1_HTML_complet_version1.pdf
Chapitre 1_HTML_complet_version1.pdfChapitre 1_HTML_complet_version1.pdf
Chapitre 1_HTML_complet_version1.pdfYassineZARIOUH
 

Similaire à Intégration Web HTML 5 & CSS 3 (20)

Html
HtmlHtml
Html
 
Cours Html.pdf
Cours Html.pdfCours Html.pdf
Cours Html.pdf
 
Normes de base du Web GTI780 & MTI780 ETS A09
Normes de base du Web  GTI780 & MTI780  ETS   A09Normes de base du Web  GTI780 & MTI780  ETS   A09
Normes de base du Web GTI780 & MTI780 ETS A09
 
hassclic284.ppt
hassclic284.ppthassclic284.ppt
hassclic284.ppt
 
Les base du Html5
Les base du Html5Les base du Html5
Les base du Html5
 
seance3-1 CSS.ppt
seance3-1 CSS.pptseance3-1 CSS.ppt
seance3-1 CSS.ppt
 
Cours_1 - HTML5 et JS.ppt
Cours_1 - HTML5 et JS.pptCours_1 - HTML5 et JS.ppt
Cours_1 - HTML5 et JS.ppt
 
Introduction à XML
Introduction à XMLIntroduction à XML
Introduction à XML
 
Rmll2010 Html5 Css3
Rmll2010 Html5 Css3Rmll2010 Html5 Css3
Rmll2010 Html5 Css3
 
HTML & CSS
HTML & CSSHTML & CSS
HTML & CSS
 
Atelier template
Atelier templateAtelier template
Atelier template
 
Cours html5
Cours html5Cours html5
Cours html5
 
Formation - P2 - Standards du Web
Formation - P2 - Standards du WebFormation - P2 - Standards du Web
Formation - P2 - Standards du Web
 
Chapitre2 HTML5
Chapitre2 HTML5Chapitre2 HTML5
Chapitre2 HTML5
 
Css
CssCss
Css
 
CSS
CSSCSS
CSS
 
Langage HTML - Fondamentaux et ateliers
Langage HTML - Fondamentaux et ateliersLangage HTML - Fondamentaux et ateliers
Langage HTML - Fondamentaux et ateliers
 
Chapitre 1 - Introduction générale.pdf
Chapitre 1 - Introduction générale.pdfChapitre 1 - Introduction générale.pdf
Chapitre 1 - Introduction générale.pdf
 
Chapitre1
Chapitre1 Chapitre1
Chapitre1
 
Chapitre 1_HTML_complet_version1.pdf
Chapitre 1_HTML_complet_version1.pdfChapitre 1_HTML_complet_version1.pdf
Chapitre 1_HTML_complet_version1.pdf
 

Intégration Web HTML 5 & CSS 3

  • 1. Concept & Outils pour Internet Intégration Web Stéphane PERES – stephane.peres@npcmedia.fr Twitter : @webchronique 2013 Pour DL les cours : http://webchronique.com/cours/
  • 3. Pour commencer Pour commencer  Objectifs du module  Principes fondamentaux Documents Hypermédias (xHTML) Les feuilles de style CSS XHTML/CSS Page 3
  • 4. Pour commencer Objectifs du module ?  Vous rendre plus critiques par rapport au Web en général  Comprendre ce qui se passe quand vous cliquez sur une page Web  Être capable de dialoguer avec des concepteurs  Être capable de réaliser votre propre site Web  Initiation aux nouvelles balises HTML5 et CSS3 XHTML/CSS Page 4
  • 5. Pour commencer Les cours … 4 h de CM + 20 h de TD (groupe) Pour voir  Balises standards, tableaux, listes, divisions,  Formulaires, images, boutons …  Feuilles de style CSS, DTD.. Pour ne pas voir  PHP  JavaScript (ex de bibliothèque : jQuery)  Flash (AS3)1 XHTML/CSS Page 5
  • 6. Pour commencer Évaluation :  Un examen final de 2h pratique (50%).  Un site Web à réaliser en binôme (50%). XHTML/CSS Page 6
  • 7. Pour commencer Pour commencer  Objectifs du module  Principes fondamentaux Documents Hypermédias (xHTML) Les feuilles de style CSS XHTML/CSS Page 7
  • 8. Pour commencer L’informatique Science du traitement rationnel, notamment par machines automatiques, de l'information L’ENIAC  Electronic Numerical Integrator And Calculator, 1943-1945  ~18 000 tubes  Calcul d’une trajectoire en deux jours http://www.computerhistory.org/ XHTML/CSS Page 8
  • 9. Pour commencer L’informatique  IBM Blue Gen : 46 000 milliards d'opérations/s soit ~15 000 PC  Exemple de Google :  25 sites, 450 000 serveurs (estimation)  8 000 serveurs en 2001  200 000 serveurs pour Microsoft en 2006  Apparition de divers médias  Internet : affichage d’éléments texte, image, son, liens, animation, interaction XHTML/CSS Page 9
  • 10. Pour commencer L’accès au média Nécessité de l’hypertexte  Pauvreté des Interfaces Homme / Machine (IHM)  Ecran : espace réduit, à 2 dimensions  Clavier : peu pratique, lent, dépendant des langues  Souris : rapide mais actions réduites  Hypertexte     XHTML/CSS Regroupe les principaux média : texte, image, son, vidéo Une mise en forme de type « traitement de texte » Des liens vers d’autres documents hypertextes Interactivité Page 10
  • 11. Pour commencer SGML Standard Generalized Markup Language  HTML, créé par Tim Berners-Lee pour le World Wide Web, est une application de SGML.  Structure les documents textes pour l’édition  Inclusion de média  Pas de style de présentation (pas de CSS)  Mise en page simplifiée  Standard dès 1983 XHTML/CSS Page 11
  • 12. Pour commencer SGML : principe  Définir des balises  <ouvrante>…</fermante>  Utiliser ces balises pour structurer le contenu d’un document  Structure logique du document (et non la mise en forme complexe) • Titre, • Sous-titre, • Corps de texte, • Graphique XHTML/CSS Page 12
  • 13. Pour commencer SGML : principe  Plusieurs éléments  DTD (Document Type Definition) • Définition de la structure type du document • Jeu de balises disponibles pour le document SGML  Instance du document • Texte réel du document, fait référence à une DTD  Synthèse du document  Option du document  Jeu de caractères XHTML/CSS Page 13
  • 14. Pour commencer HTML : norme pour internet  HyperText Mark-up Langage, dérivé de SGML  Langage de balisage très simple  Plusieurs média regroupés dans la même page • texte, image, son, vidéo, autre...  Mise en forme • textes avec mise en forme, tableaux, cadres  Liens • accéder à des pages distantes, à une partie d’un document  Balises prédéfinies (pas de définition possible)  Caractérisent un bloc de données • <B> … caractères gras … </B> • <A HREF="http://www.univ-mlv.fr"> un lien </A>  Ou une action (une seul balise !) • </P> fin de paragraphe </BR> saut de ligne XHTML/CSS Page 14
  • 15. Pour commencer HTML : évolution 1995 : HTML 2  Mise en forme très succincte  Structuration hiérarchique du document • titres 1-7, paragraphes, listes ...  Formatage des caractères • gras, italique, couleurs ...  Formatage des paragraphes • alignement, décalage…  Images GIF et JPEG  Lien sur le texte et les images  Passage à une autre page 1997 : HTML 3.2  Aide à la mise en forme  Tableaux  Décomposition de l’écran en cadres (frame) XHTML/CSS Page 15
  • 16. Pour commencer HTML : évolution 2000-2006 : XHTML (Extensible Markup Language => XML)  XHTML se fonde sur la syntaxe définie par XML, plus récente, mais plus simple que celle définie par SGML sur laquelle repose HTML 2007 à nos jours : HTML5 et abandon du XHTML 2  Compromis entre la richesse sémantique du langage et l’utilité pratique des solutions disponibles pour remplir l’objectif majeur d’indépendance envers le média de restitution. XHTML/CSS Page 16
  • 17. Pour commencer HTML : contenu d’une page  Données des médias + informations de mise en forme du document  Entête : informations générales sur le document (classification)  Titre (obligatoire)  Format  Informations sur l’auteur, la date de création …  Corps du document  Couleur ou texture du fond de la page  Fond sonore  Contenu proprement dit XHTML/CSS Page 17
  • 18. Pour commencer HTML : Structure d’une page <HTML> <HEAD> <TITLE>titre du document</TITLE> </HEAD> <BODY> <!-- Commentaire --> <H1>titre 1</H1> <P align=LEFT> paragraphe <A HREF="adresse.html"> nom du lien </A> </P> <IMG SRC="image.jpg" width=100 > <UL> <LI> item 1 </LI> <LI> item 2 </LI> <OL> <LI> sous item 1 </LI> <LI> sous item 2 </LI> </OL> </UL> </BODY> </HTML> XHTML/CSS Page 18
  • 19. Pour commencer HTML : Principe du client/serveur XHTML/CSS Page 19
  • 20. Pour commencer Un Web plus beau Quelques exemples : http://www.iutopi.com/ http://www.billysdiner.com/ http://www.ro.me/film XHTML/CSS Page 20
  • 21. Pour commencer Interdiction de faire cela XHTML/CSS Page 21
  • 23. xHTML Éléments & balises  Les éléments = associer à différents blocs (texte, images...) des informations structurelles, sémantiques et de présentation désirées :  Liens hypertextes, des titres, des paragraphes des listes, des tableaux, des images  Les éléments sont délimités par des balises qui encadrent l’élément : <xx> éléments </xx>  Les balises sont prédéfinies en html XHTML/CSS Page 23
  • 24. xHTML Les attributs  Permettent d’apporter des précisions sur une balise  Syntaxe : nom_attribut="valeur attribut";  Convention pour les balises et attributs indifféremment en minuscule ou en majuscule :  Rajouter feuille de style "standard" XHTML/CSS Page 24
  • 25. xHTML HTML : Structure d’une page Un document HTML comporte 2 parties, encadrées par des balises <HTML> et </HTML> :  Une en-tête de déclaration délimitée par les balises <HEAD> et </HEAD>  Le corps du document, dans lequel on placera le contenu de celui-ci délimité par les balises <BODY> et </BODY> XHTML/CSS Page 25
  • 26. xHTML Les jeux de caractères  Code ASCII standard sur 7 bits  Caractères accentués utilisent un codage particulier : & + la lettre + l'accent  Exemple : &eacute; => é http://www.snv.jussieu.fr/archambault/cours/html/ressources/caracteres.html XHTML/CSS Page 26
  • 27. xHTML Les entêtes et paragraphe  Les éléments H1, H2... H6 permettent de définir des titres de différents niveaux  Il y a 6 niveaux d'entête, H1, H2, H3, H4, H5 et H6. H1 correspond au titre principal, etc.  Taille de fenêtre dépend du navigateur  Définir les paragraphes via la balise <P> </P>  Forcer un saut de ligne <BR> XHTML/CSS Page 27
  • 28. xHTML Les listes  Il existe 3 types de listes :  Les listes non numérotées (élément UL) • pour indiquer chaque nouvel item de la liste, on utilise l'élément <LI>.  Les listes numérotées (élément OL) • pour indiquer chaque nouvel item de la liste, on utilise l'élément <LI>.  Les listes descriptives (élément DL) • Chaque item est composé d'un terme (élément DT) et d'une description (élément DD). XHTML/CSS Page 28
  • 29. xHTML Les images  On utilise l'élément <IMG> (sans </IMG>) pour placer les images. Deux attributs sont obligatoires :  L'attribut src spécifie le nom du fichier image à charger. Les fichiers images doivent impérativement être aux formats GIF, JPG ou PNG (présence d’une couche alpha).  L'attribut alt indique un contenu alternatif, c'est à dire un texte à afficher à la place de l'image lorsque, pour différentes raisons, elle n'apparaît pas.  Attributs optionnels : • align • border • width, height • hspace, vspace XHTML/CSS Page 29
  • 30. xHTML Les liens hypertextes  Les liens hypertextes sont définis à l'aide des balises <A> </A>.  Le texte de cet élément constitue la zone cliquable  L’attribut HREF permet de spécifier l’adresse URL que l’on désire afficher  Exemple : <A HREF="adresse de destination"> Nom du lien </A> XHTML/CSS Page 30
  • 31. xHTML Les liens hypertextes : typologie de liens  Les liens hypertextes : types de liens         Un document Un fichier HTML Un texte Une image GIF, JPEG, PNG ou PostScript Un son Un film Un autre service Internet Un FTP (Transfert de fichiers) <a href="ftp://ftp.ibp.fr/pub"> Le serveur de l'IBP</a>  Un SMTP (Échange de courrier électronique) <a href="mailto:archambault@iut.univlehavre.fr"> envoyer un message à D. Archambault</a>  … XHTML/CSS Page 31
  • 32. xHTML Les images cliquables  Il suffit de placer un élément IMG dans un lien hypertexte <A>.  Exemple : <A HREF="adresse de destination"> <IMG src="..."> </A> XHTML/CSS Page 32
  • 33. xHTML Les cartes cliquables  Une image dans laquelle sont définies des zones associées à des liens  A la balise <IMG>, on associe l’attribut map qui permet d'indiquer le nom de la carte qui doit être utilisée, puis on décrit le contenu de la balise <MAP> via des balises <AREA> qui définissent une zone.  La balise <AREA> doit comporter différents attributs :  l'attribut href pour indiquer l'adresse du lien de cette zone  l'attribut shape pour indiquer la forme de la zone (rect, circle, poly)  l’attribut coords pour indiquer les coordonnées des différentes formes XHTML/CSS Page 33
  • 34. xHTML Les cartes cliquables : exemple <IMG src=imagemap.gif alt="Carte cliquable" usemap=#map> <MAP name=map> <AREA href="index.html" shape="rect" coords="10,10,280,40" alt="Cours HTML"> <AREA href="intro.html" shape="rect" coords="10,50,70,110" alt="Introduction"> <AREA href="bases.html" shape="circle" coords="110,80,30" alt="Bases"> <AREA href="textes/liens.html" shape="poly«coords="150,70,180,70,180,50,210,80,180,110,180,90,150, 90" alt="Liens"> <AREA nohref shape="rect" coords="220,50,280,110" alt="Rien"> <AREA href="textes/refs.html" shape="default" alt="Références"> </MAP> http://www.snv.jussieu.fr/archambault/cours/html/textes/images.html#imgclic XHTML/CSS Page 34
  • 35. xHTML Les tableaux Un tableau est décrit par différents éléments :  L'élément TABLE correspond au tableau lui-même.  L'élément TR est utilisé pour définir chacune des lignes du tableau.  L'élément TD est utilisé pour définir chaque colonne du tableau. <TABLE> <TR> <TD> A </TD> <TD> B </TD> </TR> <TR> <TD> C </TD> <TD> D </TD> </TR> </TABLE> XHTML/CSS Page 35
  • 36. xHTML Les tableaux L'élément TD peut être utilisé avec les attributs suivants :  colspan : la cellule courante s'étend sur plusieurs colonnes.  rowspan : la cellule courante s'étend sur plusieurs lignes.  nowrap : évite les sauts de lignes à l'intérieur de la cellule courante.  align : alignement horizontal.  valign : alignement vertical. L'élément TH (à la place de TR permet de définir des cellules d'entête => un titre). XHTML/CSS Page 36
  • 37. xHTML Les tableaux Principaux attributs applicables à l'élément TAB :  border : pour spécifier l'épaisseur de la bordure extérieure.  cellpading : pour spécifier l'espace entre les bordures et le contenu des cellules.  cellspacing : pour spécifier l'épaisseur des bordures et entre les cellules.  width : permet de déterminer quelle proportion de la largeur de la fenêtre doit être occupée. XHTML/CSS Page 37
  • 38. xHTML Les formulaires La balise <FORM> contient deux attributs :  L'attribut ACTION : indique l'action à exécuter lors de l'envoi des données.  L'attribut METHOD : définit la méthode de transfert des données. Les deux valeurs possibles sont GET ou POST. <FORM METHOD="POST" ACTION="http://www...."> ... </FORM> <FORM NAME="nom_du_formulaire" ACTION="mailto:votre_e-mail" METHOD="post" ENCTYPE="text/plain"> ... </FORM> XHTML/CSS Page 38
  • 39. xHTML Les formulaires : les bases  Tous les champs de saisie se font dans des balises <INPUT> sans le </INPUT>  L’attribut type de la balise <INPUT> permet de choisir le type de saisie (prédéfinie) que vous pouvez utiliser. XHTML/CSS Page 39
  • 40. xHTML Les formulaires : les bases Les deux types incontournables :  Le type text permet de saisir un texte : <INPUT TYPE="text" NAME="nom_du_champ" SIZE="taille" MAXLENGTH="taille_maximum" VALUE="texte_par_défaut">  Type submit permet de générer le bouton avec lequel le formulaire sera envoyé à l’action de celui-ci : <INPUT TYPE="submit" VALUE="texte_à_afficher"> XHTML/CSS Page 40
  • 41. xHTML Les formulaires Les formulaires : les autres types de saisie (input)  Le type passwd permet de saisir un texte caché (mot de passe) <INPUT TYPE="password" NAME="nom_du_champ" SIZE="taille" MAXLENGTH="taille_maximum">  Le type radio permet de faire un choix entre plusieurs propositions (une seule valeur à cochée) <INPUT TYPE="radio" NAME="nom" VALUE="valeur"> XHTML/CSS Page 41
  • 42. xHTML Les formulaires Les formulaires : les autres types de saisie (input)  Le type checkbox permet de faire un choix multiple entre plusieurs propositions (il est possible de cocher plusieurs cases) <INPUT TYPE="checkbox" NAME="nom" VALUE="valeur">  Le type file permet de saisir le nom d’un fichier <INPUT TYPE="file" NAME="nom" SIZE="taille">  Le type reset permet d’effacer tous les champs du formulaire <INPUT TYPE="file" NAME="nom" SIZE="taille"> XHTML/CSS Page 42
  • 43. xHTML Les formulaires : les autres éléments Les listes : permettent de faire le choix entre un grand nombre de valeurs prédéfinies via l’utilisation des balises <SELECT> et </SELECT>. Chaque choix est matérialisé par la balise <OPTION> qui ajoute une option dans la liste. <SELECT NAME="nom_de_la_liste"> <OPTION VALUE="valeur_1">Choix_1 <OPTION VALUE="valeur_2">Choix_2 <OPTION VALUE="valeur_X">Choix_X </SELECT> XHTML/CSS Page 43
  • 44. xHTML Les formulaires : le champ de saisie multi-lignes Permet d'écrire un commentaire assez long, via les balises <TEXTAREA> et </TEXTAREA> <TEXTAREA NAME="nom_du_champ" ROWS="nombre_de_lignes" COLS="nombre_de_colonnes"> </TEXTAREA> XHTML/CSS Page 44
  • 45. xHTML Les formulaires : pour aller (un peu) plus loin La balise <INPUT> peut accepter un type caché pour transférer des informations cachées qui seront envoyées à l’action associé à la validation du formulaire. <INPUT TYPE="hidden" [CHECKED]> NAME="nom" VALUE="valeur" La balise <INPUT> peut aussi accepter un type image pour personnaliser un bouton <INPUT TYPE="image" SRC="adresse_de_l'image" WIDTH= "largeur" HEIGHT="hauteur" BORDER= "bordure"> XHTML/CSS Page 45
  • 46. xHTML Les formulaires : pour aller (un peu) plus loin La récupération des variables d’un formulaire se fait systématiquement en "dynamique" : PHP … <form method="POST" action="titi.php"> <input type="text" name="xx"> <input type="submit" value="OK"> </form> titi.php <html> <head> <title>Recepteur</title> </head> <body> <?php echo $_POST['xx'] ; ?> </body> </html> XHTML/CSS Page 46
  • 47. xHTML Les divisions : balise <DIV> Permet de découper la page en bloc et d’associer des paramètres différents à chaque bloc. XHTML/CSS Page 47
  • 48. xHTML Les divisions : pour mieux comprendre  Il existe deux types généraux d'éléments HTML : les balises de type "en-ligne" et les balises de type "bloc".  Le flux d'un document pourrait se définir comme étant le comportement naturel d'affichage des éléments d'une page web. Autrement dit, les éléments se succèdent dans l'ordre où ils sont déclarés dans le code HTML. XHTML/CSS Page 48
  • 49. xHTML Les divisions : pour mieux comprendre  Il existe plusieurs schémas de positionnement : un schéma de positionnement dans le flux (positionnement par défaut), et quatre schémas de positionnement qui sortent l'élément du flux (positionnement absolu, positionnement fixe et positionnement relatif, positionnement flottant).  L'imbrication des éléments les uns aux autres est possible et prédéfinie : cela permet de "styler" facilement les éléments similaires aux calques XHTML/CSS Page 49
  • 50. xHTML Balise <DIV> : les attributs importants  Le positionnement relatif permet de décaler un élément par rapport à une position de référence: celle qu'il avait dans le flux. Les éléments qui le suivent et le précèdent ne sont pas influencés par ce décalage puisqu'ils considèrent que l'élément est toujours dans le flux à sa position initiale.  Permet de servir de référent à un élément enfant positionné en absolu (rappelons qu'un élément positionné absolument grâce aux propriétés top, left, … le fera par rapport à la fenêtre du navigateur à défaut d'avoir un parent lui-même positionné).  Bénéficie de la possibilité d'utiliser la propriété z-index pour gérer des superpositions d'éléments (propriété inopérante pour des éléments du flux). XHTML/CSS Page 50
  • 51. xHTML Balise <DIV> : les attributs importants  La position absolue : l'élément étant totalement extrait du flux, il ne dépend plus du tout des éléments qui le côtoient. "un élément positionné en absolu se réfère non pas à son parent direct, mais au premier ancêtre positionné qu'il rencontre" Propriétés associée : top, bottom, left ou right Les coordonnées d'un point s'expriment alors de haut en bas (top) et de gauche à droite (left). XHTML/CSS Page 51
  • 52. xHTML Balise <DIV> : les attributs importants  Le positionnement fixe (position: fixed) positionne l'élément par rapport à la fenêtre du navigateur (top, right, …), l'élément est fixé à un endroit et ne pourra se mouvoir, même par exemple lors de la présence d'une barre de défilement.  La position statique (position: static) correspond simplement à la valeur par défaut d'un élément du flux. XHTML/CSS Page 52
  • 53. xHTML Balise <DIV> : les attributs importants <DIV style="position: absolute; top: 99 px; left: 99 px; visibility : visible; z-index : 2;"> XHTML/CSS Page 53
  • 54. xHTML Balise <DIV> : les attributs importants  La propriété flottant (float) adopte par défaut la largeur qu'occupe son contenu. Le principe de base est simple: un élément flottant est ôté partiellement du flux et placé à l'extrême gauche (float: left) ou droite (float: right) de son conteneur, forçant par la même occasion tout contenu du flux qui suit à l'envelopper.  La propriété clear s'utilise conjointement au float et permet à un élément (qui peut être d'ailleurs lui-même flottant) de ne plus subir le comportement d'habillage dicté par un objet flottant qui le précède directement et, par conséquent, de se caler en dessous de ce dernier. XHTML/CSS Page 54
  • 55. Les feuilles de style CSS XHTML/CSS Page 55
  • 56. CSS Les feuilles de style (CSS) Cascading Style Sheets (feuilles de style en cascade), notée CSS. Fichier (.css) contenant des caractéristiques de mise en forme. Idée : séparer la mise en page du contenu  Définir un type de présentation une seule fois, que l'on réutilise dans toutes les pages.  Propagation naturelle des modifications. XHTML/CSS Page 56
  • 57. CSS Les feuilles de style (css) : utilisation Dans l’entête du fichier HTML <html> <head> <title>Titre du fichier html</title> <link rel="stylesheet" type="text/css" href="formats.css"> </head> <body> </body> </html> XHTML/CSS Page 57
  • 58. CSS Les feuilles de style (css) : utilisation Structure de base du fichier CSS: sélecteur { propriété: valeur; … }  Le sélecteur est de trois types : 1. Balise 2. Identifiant (id) 3. Classe (class)  La propriété, c'est l'attribut qu'on veut appliquer (font, background, margin, etc).  Enfin la valeur précise les caractéristiques de la propriété. XHTML/CSS Page 58
  • 59. CSS Les feuilles de style (css) : utilisation Le plus simple : associer un style à une balise HTML div {background-color: red ; … } Résultat: toutes les divisions de tous les fichiers utilisant cette feuille de style auront une couleur de fond rouge. XHTML/CSS Page 59
  • 60. CSS Les feuilles de style (css) : utilisation Format associé à plusieurs balises HTML div, table { background-color: red ; … } Résultat : toutes les divisions et toutes les tables de tous les fichiers utilisant cette feuille de style auront une couleur de fond rouge. XHTML/CSS Page 60
  • 61. CSS Les feuilles de style (css) : utilisation On aimerait bien quand même être plus « sélectif » :  Multiplier les fichiers .css (pas cool !).  Pouvoir appliquer un style à une seule division bien précise ou à un sous-ensemble de divisions correctement choisies. XHTML/CSS Page 61
  • 62. CSS Les feuilles de style (css) : utilisation Le plus simple : l’identificateur unique Définition (dans le .css) #toto { background:red; } Utilisation (dans le .html) <div id= "toto"> XHTML/CSS Page 62
  • 63. CSS Les feuilles de style (css) : utilisation Identificateur : problème d’unicité Il n'est pas correct d'avoir deux mêmes id dans une page ex : <div id="toto"></div> <div id="toto"></div> Bien pratique avec du java pour avoir accès à un élément précis XHTML/CSS Page 63
  • 64. CSS Les feuilles de style (css) : utilisation Identificateur : exemple parfait pour ces 4 divisions #toto1 { background:white; } #toto2 { background:jauneclair; } … <div <div <div <div XHTML/CSS id="toto1"></div> id="toto2"></div> id="toto3"></div> id="toto4"></div> Page 64
  • 65. CSS Les feuilles de style (css) : utilisation Identificateur : pas possible avec ces 2 tableaux pour lesquels on aimerait avoir les mêmes propriétés (de mise en page). Les classes : lorsqu'il y aura plusieurs objets de ce type. XHTML/CSS Page 65
  • 66. CSS Les feuilles de style (css) On ajoute un attribut class à une balise : Soit la classe Rouge appliquée à la balise div : Définition (dans le .css) div.rouge { font: Verdana 12px; color: #FF0000; } Utilisation (dans le .html) <div class="Rouge"> Texte à mettre en rouge et en gras </div> XHTML/CSS Page 66
  • 67. CSS Les feuilles de style (css) La notion de classe au sens large Exemple de classification : Hiérarchie de propriétés et mécanisme d’héritage XHTML/CSS Page 67
  • 68. CSS Les feuilles de style (css) Les classes universelles (s’applique à n’importe quelle balise) Définition (dans le .css) .toto { background:red; } Utilisation (dans le .html) <div class="toto"> ou <P class="toto"> XHTML/CSS Page 68
  • 69. CSS Les feuilles de style (css) Les classes : règle de cascade .headline { color:red; font-size: 3; } #specials { color:blue; font-style: italic; } sont appliquées à un même élément XHTML: <h1 id="specials" class="headline"> Today's Specials </h1> la couleur bleue prévaudra sur la couleur rouge. XHTML/CSS Page 69
  • 70. CSS Les feuilles de style (css) : utilisation Les classes : principe d’héritage Définition (dans le .css) a.titi { color:red; } Cela ne concerne que les balises <a> de classe titi. Utilisation (dans le .html) XHTML/CSS <DIV> <A class="titi" href=…> </A> </DIV> Page 70
  • 71. CSS Les feuilles de style (css) : utilisation Exemple : Définition (dans le .css) div.menu a:hover{ propriétés } Cela va affecter uniquement les liens <a> survolés ("a:hover") contenus dans les <div> de classe ".menu" Utilisation (dans le .html) XHTML/CSS <DIV class="menu"> <A href=…></A> </DIV> Page 71
  • 72. CSS Les feuilles de style (css) : utilisation les pseudo-class de la balise <A> L'héritage s'applique aussi à la balise de liens <a>. Ses enfants sont les pseudo-classes suivantes : : link (lien par défaut) : visited (lien déjà visité) : hover (lien au survol) : active (lien actif) Définition (dans le .css) a:hover { color:red; } Utilisation (dans le .html) <A href=…> </A> XHTML/CSS Page 72
  • 73. CSS Les feuilles de style (css) : utilisation Les classes : ne pas confondre ! Définition (dans le .css) div.menu , a:hover{ propriétés } Cela va affecter à la fois les liens <a> survolés ("a:hover") et les <div> de classe ".menu" survolées XHTML/CSS Page 73
  • 75. HTML5 Les possibilités avec HTML 5 Canvas : permet de dessiner au sein de la page web, à l'intérieur de la balise HTML <canvas>. On peut dessiner des formes (triangles, cercles…) mais aussi ajouter des images, les manipuler, appliquer des filtres graphiques SVG : permet de créer des dessins vectoriels au sein des pages web. À la différence de Canvas, ces dessins peuvent être agrandis à l'infini (c'est le principe du vectoriel). Drag & Drop : permet de faire « glisser-déposer » des objets dans la page web, de la même façon qu'on peut faire glisserdéposer des fichiers sur son bureau. XHTML/CSS Page 75
  • 76. HTML5 Les possibilités avec HTML 5 File API : permet d'accéder aux fichiers stockés sur la machine du visiteur (avec son autorisation). Géolocalisation : pour localiser le visiteur et lui proposer des services liés au lieu où il se trouve (ex. : les horaires des salles de cinéma proches). Web Storage : permet de stocker un grand nombre d'informations sur la machine du visiteur. Appcache : permet de demander au navigateur de mettre en cache certains fichiers, qu'il ne cherchera alors plus à télécharger systématiquement. WebGL : permet d'introduire de la 3D dans les pages web XHTML/CSS Page 76
  • 77. HTML5 Les formats audio et vidéo La balise <audio> que nous allons découvrir est reconnue par tous les navigateurs récents, y compris Internet Explorer à partir de la version 9 (IE9). Ex 1 : <audio src="hype_home.mp3" controls>Veuillez mettre à jour votre navigateur !</audio> Ex 2 : <audio controls> <source src="hype_home.mp3"></source> <source src="hype_home.ogg"></source> </audio> XHTML/CSS Page 77
  • 78. HTML5 Les formats audio et vidéo La balise <video> que nous allons découvrir est reconnue par tous les navigateurs récents, y compris Internet Explorer à partir de la version 9 (IE9). Ex 1 : <video src="sintel.webm" controls poster="sintel.jpg" width="600"> Il est temps de mettre à jour votre navigateur !</video> Ex 2 : <video controls poster="sintel.jpg" width="600"> <source src="sintel.mp4" /> <source src="sintel.webm" /> <source src="sintel.ogv" /> </video> XHTML/CSS Page 78
  • 79. Aide mémoire HTML & CSS XHTML/CSS Page 79
  • 81. xHTML Styles Reset @charset "utf-8"; /* Theme Name: Webchronique Theme URI: http://www.npcmedia.fr Version: 1.6 Description: Design by <a href="http://www.npcmedia.fr">NPC MEDIA Création</a>. Ce theme est protege par les droits d'auteurs. Author: NPC MEDIA Création Author URI: http://www.npcmedia.fr */ /*-------------------------------------*/ /*------------[STYLES RESET]-----------*/ /*-------------------------------------*/ html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center, dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after,q:before, q:after { content: ''; content: none; } :focus { outline: 0; } ins { text-decoration: none; } del { text-decoration: line-through; } table { border-collapse: collapse; border-spacing: 0; } XHTML/CSS Page 81
  • 82. xHTML Fond Face & CSS3 /* Polices */ @font-face { font-family:"Century Gothic"; src:url('../fonts/Century_Gothic.ttf'); } /* Fondu */ a:link, a:visited { color:#cd9251; text-decoration:none; -webkit-transitionproperty:color;-webkit-transition-duration:1s;-moz-transition-property:color;-moz-transitionduration:1s;transition-property:color;transition-duration:1s; } /* Opacité */ .single #sidebar img moz-opacity:0.5; */ } { margin-bottom:15px; filter:alpha(opacity=50); opacity: 0.5; /* - /* Coin arrondie */ input[type=text],input.text, input.title, textarea, select { background-color:#1F1F1F; padding: 2px; color: #cd9251; -mozborder-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; transitionduration:1s;transition-property:background-color;-moz-transition-duration:1s;-moz-transitionproperty:background-color;-webkit-transition-duration:1s;-webkit-transition-property:backgroundcolor; } XHTML/CSS Page 82