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 Un en-tête, délimité par les balises <head> et </head> 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
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>
Autres éléments de mise en forme Italique : <i></i> ou <em></em> Gras : <strong></strong> ou <b></b> Indice et exposant : <sub></sub> et <sup></sup> <body> <p>texte en <b>gras</b></p> <p>encore en <strong>gras</strong></p> <p>texte en <i>italique</i></p> <p>Exposant M<sup>r</sup></p> </body>
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> <td>ligne 2, colonne 1</td> <td>ligne 2, colonne 2</td> <td>ligne 2, colonne 3</td> <td>ligne 3, colonne 1</td> <td>ligne 3, colonne 2</td> <td>ligne 3, colonne 3</td> </table>
Tableaux ligne colonnes <body> <table width="75%" border="1"> <tr> <td>cel1</td> <td>cel2</td> </tr> <td>cel3</td> <td>cel4</td> </table> </body> 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" />
Images Lien relative Lien absolu <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" />
Balises sans fermeture : 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 <html> <head> <title>ma premiere page</title> </head> <body bgcolor="#0099CC" text="#FFFFFF"> <h1>Ma Page</h1> <p>ma première page web</p> </body> </html>
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 <p>Paragraphe 1</p> index.php feuille.css p { color: #D00E80; text-align: center; } p.vert { color: #008000; p#mix2 { color: #0080FF; p#mix3 { <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>
Les couleurs : exemple avec PAINT
CSS http://jigsaw.w3.org/css-validator/ 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">