La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

Conception de Site Webs Interactifs Cours 3 Patrick Reuter

Présentations similaires


Présentation au sujet: "Conception de Site Webs Interactifs Cours 3 Patrick Reuter"— Transcription de la présentation:

1 Conception de Site Webs Interactifs Cours 3 Patrick Reuter

2 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)

3 HTML L'Hypertext Markup Language, généralement abrégé HTML, est le langage informatique créé et utilisé pour écrire les pages Web.abrégé langage informatiquepages 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.hyperlienshypertexte HTML est un langage de description de documents. C'est une application du langage de balisage SGML (Standard Generalized Markup Language).langage de description de documentslangage de balisageSGML Pour expliquer les balises HTML, voici un exemple : – Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 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.Tim Berners-Leepages WebPAOsens

4 XHTML XHTML est le successeur de HTMLHTML XHTML se base sur la syntaxe définie par XMLXML 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 :

5 HTML/XHTML : Hello World Votre titre Bonjour tout le monde!

6 Quelques balises Balise : Effet : Résultat : Balises avec fermeture : texte en gars Texte en gras texte en italique Texte en italique texte souligné Texte souligné Titre important Titre 1 Titre moins important Titre 2 texte Lien hypertexte Balises sans fermeture : Saut de ligne Insère une image

7 Images 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

8 Images 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

9 Images 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

10 Images Pour le référencement

11 Images Lien relative Lien absolu

12 Encore plus de balises Paragraphes Paragraphe. Listes 1er élément 2ème élément 3ème élément

13 Tables ligne 1, colonne 1 (en-tête) ligne 1, colonne 2 (en-tête) ligne 1, colonne 3 (en-tête) ligne 2, colonne 1 ligne 2, colonne 2 ligne 2, colonne 3 ligne 3, colonne 1 ligne 3, colonne 2 ligne 3, colonne 3

14 Tables ligne 1, colonne 1 (en-tête) ligne 1, colonne 2 (en-tête) ligne 1, colonne 3 (en-tête) ligne 2, colonne 1 ligne 2, colonne 2 ligne 2, colonne 3 ligne 3, colonne 1 ligne 3, colonne 2 ligne 3, colonne 3

15 Plus déléments xhtml_une_heure/http://openweb.eu.org/articles/ xhtml_une_heure/ efault.asp Chercher sur le web Pages sources …

16 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)

17 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 HTMLHTML Pour séparer la mise en forme et le contenu Permet de gagner en temps, en simplicité de création, et en maintenance.

18 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 p.ex. pour impression

19 Exemple : p { color: #0000ff; text-align: center; } ;

20 Les couleurs : exemple avec PAINT

21 CSS validator/

22 Votre site Mon site

23 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)

24 PHP

25 PHP et MySQL

26 PHP

27

28

29 Variables

30 Variables

31 echo ' j'utilise php '; // FAUX echo " j\'utilise php " ; // CORRECT echo j'utilise php " ; // CORRECT

32 echo " ";

33 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 " "; // HTML valide Apostrophes plus fidèle sur le texte

34 Concatenation

35 Boucle TANT QUE

36 Boucle TANT QUE

37 Boucle POUR '; } echo i est égal à '.$i; ?>

38 Condition SI..SINON

39 Passer des paramètres dynamiques Par lURL : méthode $_GET Par des formulaires HTML méthode $_POST

40 Méthode _GET URL :

41 Méthode _GET URL :

42 Fonction isset()

43 Formulaires HTML

44 Méthode _POST

45


Télécharger ppt "Conception de Site Webs Interactifs Cours 3 Patrick Reuter"

Présentations similaires


Annonces Google