Download Diapositive 1

Survey
yes no Was this document useful for you?
   Thank you for your participation!

* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project

page
1
page
2
page
3
page
4
page
5
page
6
page
7
page
8
page
9
page
10
page
11
page
12
page
13
page
14
page
15
page
16
page
17
page
18
page
19
page
20
page
21
page
22
page
23
page
24
page
25
page
26
page
27
page
28
page
29
page
30
page
31
page
32
page
33
page
34
page
35
page
36
page
37
page
38
page
39
page
40
page
41
page
42
page
43
page
44
page
45
Document related concepts
no text concepts found
Transcript 
Conception de Site Webs
Interactifs
Cours 3
Patrick Reuter
[email protected]
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>
<i>texte en italique</i>
<u>texte souligné</u>
Texte en gras
Texte en italique
Texte souligné
•
•
<h1>Titre important</h1>
<h2>Titre moins important</h2>
Titre 1
Titre 2
•
<a href="lien.html">texte</a>
Lien hypertexte
Balises sans fermeture :
•
•
<br />
<img src="lien.jpg"
/>
Saut de ligne
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
<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
<th>ligne
<th>ligne
</tr>
<tr>
<td>ligne
<td>ligne
<td>ligne
</tr>
<tr>
<td>ligne
<td>ligne
<td>ligne
</tr>
</table>
1, colonne 1 (en-tête)</th>
1, colonne 2 (en-tête)</th>
1, colonne 3 (en-tête)</th>
2, colonne 1</td>
2, colonne 2</td>
2, colonne 3</td>
3, colonne 1</td>
3, colonne 2</td>
3, colonne 3</td>
Plus d’éléments
• http://openweb.eu.org/articles/
xhtml_une_heure/
• http://www.w3schools.com/tags/d
efault.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://www.w3.org/MarkUp/Guide/Style
• http://jigsaw.w3.org/cssvalidator/
• 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’;
?>
<?php
Variables
$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&param2=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;
?>
Related documents
1 installation/téléchargement 2 créer une base de - Cours-info
1 installation/téléchargement 2 créer une base de - Cours-info
Le langage Java
Le langage Java