Conception de Sites Web
dynamiques
Cours 3
Patrick Reuter
Conception de Site Webs
Interactifs
Déroulement
• Pages web statiques (HTML/XHTML)
• Mise en forme avec feuilles de styles (CSS)
• Programmation côté serveur
– Pages web dynamiques (PHP)
– avec connexion à une base de données (MySQL)
• Programmation côté client
– JavaScript
• Référencement Internet (moteur de recherche)
HTML
• Langage de structuration de documents (« Hyper-Text Markup
Language »)
• HTML permet de
– Publier des documents en lignes contentant du texte, des tableaux,
des listes, …
– Lier des pages par des liens hypertextes
– Concevoir des formulaires permettant d’effectuer des traitements
d’informations
– Insérer des documents dans d’autres formats : video, images, …
• HTML définit le contenu et la structuration des informations au
sein du document
• HTML ne définit pas l’apparence du document
HTML
Exemple Fichier html
interprété
brut
<html>
<head>
<title>ma premiere page</title>
<meta http-equiv="Content-Type" content="text/html" />
</head>
<body>
<h1>Page Web</h1>
<p>Ma première page.</p>
</body>
</html>
XHTML : du "HTML propre"
• XHTML 1.0 (Second Edition)
a reformulation of HTML 4 in XML 1.0
Premières différences de XHTML :
- mettre un doctype en haut du fichier
- fermer toutes les balises : <b> … </b>
- pour les balises simples, les fermer "de l'intérieur" (comme <br
/> ou <img />),
- toutes les balises en minuscules,
- les arguments entre guillemets,
- on définit ses propres balises
(!) Vision un peu réductrice
XHTML
• XHTML est le successeur de HTML
• XHTML se base sur la syntaxe définie par XML
• Le ‘X’ dans XHTML signifie «extensible »
• Devenu standard pour assurer la compatibilité entre
navigateurs (Firefox, Internet Explorer, Mozilla, …)
• Pour vérifier la validité d'une page, le W3C a mis en
place un validateur qui comptabilise les erreurs et donne
les moyens de les corriger :
http://validator.w3.org/
HTML/XHTML : Hello World
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Votre titre</title>
<meta http-equiv="Content-Type" content="text/HTML; charset=iso-8859-1" />
</head>
<body>
<p>Bonjour tout le monde!</p>
</body>
</html>
Format d’un document HTML
• Tout document HTML commence par la balise
<html> et finit par la balise </html>
• Tout document HTML contient
1. Un en-tête, délimité par les balises <head> et
</head>
<html>
2. Un corps, délimité par les balises <body> et
<head>
<title>ma premiere page</title>
</body>
</head>
<body>
<h1>Ma Page</h1>
<p>ma première page web</p>
</body>
</html>
Commentaires
Tout texte commençant par « <!-- » et se
terminant par « --> » est considéré comme étant
un commentaire
– Non interprété par le navigateur
– Non affiché
<html>
<head>
<title>ma premiere page</title>
</head>
<body>
<h1>Ma Page</h1>
<p>ma première page web</p>
<!-- ne pas afficher cette partie -->
</body>
</html>
1. En-tête <head>
• Délimité par les balises <head> et </head>
• Contient des informations générales sur le
document, toujours chargées avant le corps
– Titre du document <title>
– Informations sur le contenu du document <meta>
– Variables et fonctions des scripts JavaScript <script>
– Les références aux feuilles de style <link>
–…
• Les balises utilisées sont spécifiques à l’entête
• Pas d’affichage dans le navigateur (en théorie)
Balise <title>
• Contenue dans l’en-tête du document
• Définit le titre du document, terminé par la balise
</title>
• Le titre doit être court et explicite car il apparaît :
– Comme titre de la fenêtre du navigateur
– Dans la liste des signets (« bookmarks »)
– Utilisé par les moteurs de recherche
<html>
<head>
<title>ma premiere page</title>
</head>
<body>
...
2. Corps <body>
• Délimité par les balises <body> et </body>
• Contient les informations affichables du document
– Texte du document
– Instructions
Titrage
Les balises h1, h2, … h6 permettent de
baliser un paragraphe comme étant un
titre d’un certain niveau
<html>
<head>
<title>ma premiere page</title>
</head>
<body>
<h1>Ma Page</h1>
<h2>Titre1</h2>
<h3>Titre2</h3>
<p>Du texte normal</p>
</body>
</html>
Balise <p>
• Débute un paragraphe, terminé par </p>
• Un début de paragraphe provoque :
– Un passage à la ligne
– Un décalage d’une hauteur d’environ
une ligne
Balise <br/>
• Provoque un retour à la ligne dans la
fenêtre d’affichage
• En l’absence des balises <br/>, le texte
n’est mis à la ligne que lorsque le bord de
la fenêtre courante est atteint
Les sanglots longs<br/>
Des violons<br/>
De l’automne<br/>
<br/>
Blessent mon cœur...<br/>
Encore plus de balises
• Paragraphes
<p>Paragraphe.</p>
• Listes
<ul>
<li>1er élément</li>
<li>2ème élément</li>
<li>3ème élément</li>
</ul>
Hyperliens
• Tout l'intérêt du HTML
• Balise <a></a>
• Attribut principal :
href
<body>
<p>lien vers une autre page :
<a href="autrepage.htm">ici</a></p>
</body>
</html>
Tables
<table>
<tr>
<th>ligne 1, colonne 1 (en-tête)</th>
<th>ligne 1, colonne 2 (en-tête)</th>
<th>ligne 1, colonne 3 (en-tête)</th>
</tr>
<tr>
<td>ligne 2, colonne 1</td>
<td>ligne 2, colonne 2</td>
<td>ligne 2, colonne 3</td>
</tr>
<tr>
<td>ligne 3, colonne 1</td>
<td>ligne 3, colonne 2</td>
<td>ligne 3, colonne 3</td>
</tr>
</table>
Tableaux
ligne
<body>
<table width="75%" border="1">
<tr>
<td>cel1</td>
<td>cel2</td>
</tr>
<tr>
<td>cel3</td>
<td>cel4</td> colonnes
</tr>
</table>
</body>
Images
• La balise <img/> permet de placer une
image sur le document
• Attributs :
– src : url de l'image
– width : largeur
– height : hauteur
<body>
<p>une image </p>
<p><img src="Shaun.jpg"
width="100" height="113" />
</p>
</body>
Images
• <img src="image.jpg" />
• <img src="image.gif" />
• <img src="image.png" />
JPEG : avec perte, pour les photos
GIF : sans perte, compression LZW, pour les
illustrations
PNG : sans perte, plus de couleurs, mais pas
supporté par tous le navugateurs
Images
<img src="image.png" />
<img src="image.jpg" width="50%" />
<img src="image.gif" width="20" height="40" />
JPEG : avec perte, pour les photos
GIF : sans perte, compression LZW, pour les illustrations
PNG : sans perte, plus de couleurs, mais pas supporté par tous
le navigateurs
Images
<img src="image.png" />
<img src="image.jpg" width="50%" />
<img src="image.gif" width="20" height="40" />
JPEG : avec perte, pour les photos
GIF : sans perte, compression LZW, pour les illustrations
PNG : sans perte, plus de couleurs, mais pas supporté par tous
le navigateurs
Images
Pour le référencement
<img src="image.png" alt= "Photo de Zidane" title = "
zidane" />
Images
Lien relative
<img src="image.png" alt= "Photo de Zidane" />
<img src="images/image.png" alt= "Photo de Zidane" />
<img src="../image.png" alt= "Photo de Zidane" />
Lien absolu
<img src="http://127.0.0.1/image.png" alt= "Photo de Zidane" />
<img src="z:\_App\Php\www\tp1\image.png" alt= "Photo de
Zidane" />
<img src="http://www.google.fr" alt= "Photo de Zidane" />
Quelques balises
Balise : Effet : Résultat :
Balises avec fermeture :
• <b>texte en gars</b> Texte en gras
• <i>texte en italique</i> Texte en italique
• <u>texte souligné</u> Texte souligné
• <h1>Titre important</h1> Titre 1
• <h2>Titre moins important</h2> Titre 2
• <a href="lien.html">texte</a> Lien hypertexte
Balises sans fermeture :
• <br /> Saut de ligne
• <img src="lien.jpg" /> Insère une image
Plus d’éléments
• http://openweb.eu.org/articles/
xhtml_une_heure/
• http://www.w3schools.com/tags/
default.asp
• Chercher sur le web
• Pages sources …
Conception de Site Webs
Interactifs
Déroulement
• Pages web statiques (HTML/XHTML)
• Mise en forme avec feuilles de styles (CSS)
• Programmation côté serveur
– Pages web dynamiques (PHP)
– avec connexion à une base de données (MySQL)
• Programmation côté client
– JavaScript
• Référencement Internet (moteur de recherche)
CSS
• Le langage CSS (Cascading Style Sheets : feuilles de
style en cascade) est utilisé pour décrire la présentation
d'un document structuré écrit en HTML
• Pour séparer la mise en forme et le contenu
• Permet de gagner en temps, en simplicité de création, et
en maintenance.
<link rel="stylesheet" type="text/css"
media="screen" href="style.css"
title="Normal" />
Exemple : style.css
body {
bg: #0099cc;
text: #ffffff;
} ;
CSS
Les avantages des feuilles de style sont multiples :
• La structure du document et la présentation sont gérés dans des fichiers séparés.
• Le code HTML est considérablement réduit en taille et en complexité, puisqu'il ne contient
plus de balises de présentation.
•
• La conception d'un document se fait dans un premier temps sans se soucier de la
présentation, ce qui permet d'être plus efficace.
• Un même document peut donner le choix entre plusieurs feuilles de style (impression ou
lecture à l'écran par exemple). Certains navigateurs web permettent d'accéder facilement à
un choix de feuilles de style.
p.ex. pour l’écran
<link rel="stylesheet" type="text/css" media="screen" href="style.css"
title="Normal" />
p.ex. pour impression
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
Exemple :
p {
color: #0000ff;
text-align: center;
} ;
Priorités de CSS index.php
feuille.css
p { <p>Paragraphe 1</p>
color: #D00E80;
text-align: center;
} <p class="vert">numero 2</p>
<p class="vert">numero 3</p>
p.vert {
color: #008000; <p id="mix2">Paragraphe 4</p>
} <p id="mix3">Paragraphe 5</p>
p#mix2 {
color: #0080FF;
}
p#mix3 {
color: #0080FF;
}
• Les couleurs : exemple avec PAINT
CSS
• http://www.w3.org/MarkUp/Guide/Style
• http://jigsaw.w3.org/css-
validator/
• Votre site
• Mon site
CSS
• Le langage CSS (Cascading Style
Sheets : feuilles de style en cascade)
est utilisé pour décrire la présentation d'un
document structuré écrit en HTML
CSS
Les avantages des feuilles de style sont multiples :
• La structure du document et la présentation sont gérés dans des fichiers séparés.
• La conception d'un document se fait dans un premier temps sans se soucier de la
présentation, ce qui permet d'être plus efficace.
• Dans le cas d'un site Internet, la présentation est uniformisée : Les documents
(pages « html ») font référence à la (aux) même(s) feuille(s) de styles. Cette
caractéristique permet de plus un relookage rapide.
• Un même document peut donner le choix entre plusieurs feuilles de style (impression
ou lecture à l'écran par exemple). Certains navigateurs web permettent d'accéder
facilement à un choix de feuilles de style.
• Le code HTML est considérablement réduit en taille et en complexité, puisqu'il ne
contient plus de balises de présentation.
•
• http://www.w3.org/MarkUp/Guide/Style
CSS : Exemple
p { font-size: 110%; font-family: Helvetica,
sans-serif; }
h1 { color: white; background: red; }
<link href="style.css"
rel="stylesheet"
type="text/css">
