Conception de Site Webs Interactifs Cours 3 Patrick Reuter preuter@labri.fr
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 L'Hypertext Markup Language, généralement abrégé HTML, est le langage informatique créé et utilisé pour écrire les pages Web. HTML permet en particulier d'insérer des hyperliens dans du texte, donc de créer de l'hypertexte, d'où le nom du langage. HTML est un langage de description de documents. C'est une application du langage de balisage SGML (Standard Generalized Markup Language). Pour expliquer les balises HTML, voici un exemple : <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> Tel qu'il a été pensé à ses origines par Tim Berners-Lee, le HTML ne sert pas à décrire le rendu visuel des pages Web (contrairement à la PAO), mais plutôt le sens des différentes parties du texte : titre, liste, mise en évidence... Ces valeurs ont été de moins en moins respectées au cours du développement du langage.
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>
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
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" />
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>
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>
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>
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" />
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; } ;
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
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)
PHP
PHP et MySQL
PHP
http://www.phpdebutant.org/article118.php http://fr2.php.net/manual/fr/
<?php echo ‘Hello World’; ?>
Variables <?php $a = 0; $nom = 'Horst'; echo $a; print($a); ?> <?php $nom = 'Horst'; ?> <?php echo $a; ?> <?php print($a); ?>
Variables <?php $a = 0; $nom = 'Horst'; echo $a; print($a); ?>
echo ' j'utilise php '; // FAUX echo " j\'utilise php " ; // CORRECT echo ‘ j'utilise php " ; // CORRECT
echo "<input name='foo' value='hello'>";
echo 'Micro$oft'; // résulte en: Micro$oft echo "Micro$oft"; // résulte en: Micro + Contenu der Variable $oft echo "Micro\$oft"; // résulte en: Micro$oft echo 'c:\temp'; // résulte en: c:\temp echo "c:\temp"; // résulte en: c: + Tab + emp echo "c:\\temp"; // résulte en: c:\temp echo 'c:\\temp'; // résulte en: c:\temp echo 'Pas de apostrophe : \x27'; // résulte en: Pas de apostrophe : \x27 echo "Un apostrophe : \x27"; // résulte en: Un apostrophe ' echo 'Un apostrophe : \''; // résulte en: Un apostrophe ' echo "<input name='foo' value='$bar'>"; // HTML valide Apostrophes ‘ plus fidèle sur le texte
Concatenation <? $nom = "Martin"; echo " Mon nom est $now "; ?>
Boucle TANT QUE <?php $i = 1; while ($i<6) { echo ‘Affichage<br>’; $i++; } ?>
Boucle TANT QUE <?php $i = 1; while ($i<6) { ?> <br> }
Boucle POUR <?php $nombre = 6; for($i=0; $i < $nombre ; $i++) { echo ‘i est égal à '.$i.'<br>'; } echo ‘i est égal à '.$i; ?>
Condition SI..SINON <?php $chiffre = 512; if ($chiffre<500) { echo $chiffre.' est compris entre 0 et 499'; } else if($chiffre>=500 && $chiffre<1000) { echo $chiffre.' est compris entre 500 et 999'; } else { echo $chiffre.' est plus grand que 999'; } ?>
Passer des paramètres dynamiques Par l’URL : méthode $_GET Par des formulaires HTML méthode $_POST
Méthode _GET <?php $a = $_GET[‘param’]; echo $a; ?> URL : http://.../index.php?param=5
Méthode _GET <?php $a = $_GET[‘param1’]; echo $a; $b = $_GET[‘param2’]; echo $b; ?> URL : http://.../index.php?param1=5¶m2=3
Fonction isset() <?php if isset($_GET[‘param1’]); echo $_GET[‘param1’]; else { echo ‘Paramètre non donné’; } ?>
Formulaires HTML <form action="resultat.php" method="post"> <input type="checkbox" name="box" value="1"> <input type="checkbox" name="box" value="2" checked> <input type="submit" name="submitButtonName" value="-- Envoyer --"> </form>
Méthode _POST <?php $a = $_POST[‘box’]; echo $a; ?>