Conception de Site Webs Interactifs Cours 4 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)

XHTML en bref 1. Chaque balise nécessite une fermeture balise double : <p></p> balises simples : <br /> ou <img /> 2. Imbriquer correctement les éléments <p>Texte <b>gras</b></p> 3. Utiliser des minuscules dans les balises et leurs attributs 4. Chaque valeur d'attribut doit être entre guillemets <textarea id="monTexte"></textarea> 5. Conformité et type de document : <!DOCTYPE …> et plus encore En savoir plus : http://openweb.eu.org/articles/html_au_xhtml/

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)

Zengarden exemple

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; } ;

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 id="mix2">Paragraphe 3</p> <p id="mix3">Paragraphe 3</p>

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 id="mix2">Paragraphe 3</p> <p id="mix3">Paragraphe 3</p> Pour tous les paragraphes

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 id="mix2">Paragraphe 3</p> <p id="mix3">Paragraphe 3</p> Pour tous les paragraphes de la classe "vert"

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 id="mix2">Paragraphe 3</p> <p id="mix3">Paragraphe 3</p> Pour tous les identifiant "mix2"

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 id="mix2">Paragraphe 3</p> <p id="mix3">Paragraphe 3</p> Pour tous les identifiant "mix3"