conception de site webs interactifs cours 3 patrick reuter [email protected]
TRANSCRIPT
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>
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" />
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" />
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> <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>
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" />
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;
} ;
• Les couleurs : exemple avec PAINT
CSS
• 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 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 $a = 0; ?><?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;
?>
