conception de sites web dynamiques cours 3 patrick reuter
TRANSCRIPT
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
<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>
Fichier htmlinterprété
brut
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 contient1. Un en-tête, délimité par les balises <head> et
</head>
2. Un corps, délimité par les balises <body> et </body>
<html><head><title>ma premiere page</title></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
TitrageLes 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/>
Les sanglots longs<br/>Des violons<br/>De l’automne<br/><br/>Blessent mon cœur...<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
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
<body><table width="75%" border="1"> <tr> <td>cel1</td> <td>cel2</td> </tr> <tr> <td>cel3</td> <td>cel4</td> </tr></table></body>
ligne
colonnes
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" />
ImagesLien 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;
} ;
CSSLes 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 CSSp {
color: #D00E80; text-align: center;
}
p.vert {
color: #008000; }
p#mix2 { color: #0080FF;
} p#mix3 {
color: #0080FF; }
<p>Paragraphe 1</p>
<p class="vert">numero 2</p>
<p class="vert">numero 3</p>
<p id="mix2">Paragraphe 4</p>
<p id="mix3">Paragraphe 5</p>
feuille.cssindex.php
• 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
CSSLes 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">
