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 Sites Web dynamiques Cours 3 Patrick Reuter.

Présentations similaires


Présentation au sujet: "Conception de Sites Web dynamiques Cours 3 Patrick Reuter."— Transcription de la présentation:

1 Conception de Sites Web dynamiques 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 Langage de structuration de documents (« Hyper-Text Markup Language ») HTML permet de –Publier des documents en lignes contentant du texte, des tableaux, des listes, … –Lier des pages par des liens hypertextes –Concevoir des formulaires permettant deffectuer des traitements dinformations –Insérer des documents dans dautres formats : video, images, … HTML définit le contenu et la structuration des informations au sein du document HTML ne définit pas lapparence du document

4 HTML Exemple ma premiere page Page Web Ma première page. Fichier html interprété brut

5 XHTML : du "HTML propre" XHTML 1.0 (Second Edition) a reformulation of HTML 4 in XML 1.0 Premières différences de XHTML : -mettre un doctype en haut du fichier -fermer toutes les balises : … -pour les balises simples, les fermer "de l'intérieur" (comme ou ), -toutes les balises en minuscules, -les arguments entre guillemets, -on définit ses propres balises (!) Vision un peu réductrice

6 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 :

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

8 Format dun document HTML Tout document HTML commence par la balise et finit par la balise Tout document HTML contient 1.Un en-tête, délimité par les balises et 2.Un corps, délimité par les balises et ma premiere page Ma Page ma première page web

9 Commentaires Tout texte commençant par « » est considéré comme étant un commentaire –Non interprété par le navigateur –Non affiché ma premiere page Ma Page ma première page web

10 1. En-tête Délimité par les balises et Contient des informations générales sur le document, toujours chargées avant le corps –Titre du document –Informations sur le contenu du document –Variables et fonctions des scripts JavaScript –Les références aux feuilles de style –… Les balises utilisées sont spécifiques à lentête Pas daffichage dans le navigateur (en théorie)

11 Balise Contenue dans len-tête du document Définit le titre du document, terminé par la balise Le titre doit être court et explicite car il apparaît : –Comme titre de la fenêtre du navigateur –Dans la liste des signets (« bookmarks ») –Utilisé par les moteurs de recherche ma premiere page...

12 2. Corps Délimité par les balises et Contient les informations affichables du document –Texte du document –Instructions

13 Titrage Les balises h1, h2, … h6 permettent de baliser un paragraphe comme étant un titre dun certain niveau ma premiere page Ma Page Titre1 Titre2 Du texte normal

14 Balise Débute un paragraphe, terminé par Un début de paragraphe provoque : –Un passage à la ligne –Un décalage dune hauteur denviron une ligne

15 Balise Les sanglots longs Des violons De lautomne Blessent mon cœur... Provoque un retour à la ligne dans la fenêtre daffichage En labsence des balises, le texte nest mis à la ligne que lorsque le bord de la fenêtre courante est atteint

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

17 Autres éléments de mise en forme Italique : ou Gras : ou Indice et exposant : et texte en gras encore en gras texte en italique Exposant M r

18 Hyperliens Tout l'intérêt du HTML Balise Attribut principal : href lien vers une autre page : ici

19 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

20 Tableaux cel1 cel2 cel3 cel4 ligne colonnes

21 Images La balise permet de placer une image sur le document Attributs : –src : url de l'image –width : largeur –height : hauteur une image

22 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

23 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

24 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

25 Images Pour le référencement

26 Images Lien relative Lien absolu

27 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

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

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

30 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.

31 Exemple ma premiere page Ma Page ma première page web

32 Exemple : style.css body { bg: #0099cc; text: #ffffff; } ;

33 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

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

35 Priorités de CSS p { color: #D00E80; text-align: center; } p.vert { color: #008000; } p#mix2 { color: #0080FF; } p#mix3 { color: #0080FF; } Paragraphe 1 numero 2 numero 3 Paragraphe 4 Paragraphe 5 feuille.css index.php

36 Les couleurs : exemple avec PAINT

37 CSS validator/

38 Votre site Mon site

39 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

40 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. 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. Dans le cas d'un site Internet, la présentation est uniformisée : Les documents (pages « html ») font référence à la (aux) même(s) feuille(s) de styles. Cette caractéristique permet de plus un relookage rapide. 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. Le code HTML est considérablement réduit en taille et en complexité, puisqu'il ne contient plus de balises de présentation.

41 CSS : Exemple p { font-size: 110%; font-family: Helvetica, sans-serif; } h1 { color: white; background: red; }

42


Télécharger ppt "Conception de Sites Web dynamiques Cours 3 Patrick Reuter."

Présentations similaires


Annonces Google