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

Module HTML / CSS / PHP / MySQL Comprendre l’architecture client / serveur avec les langages phares du développement Web 1 Rudy Leclercq.

Présentations similaires


Présentation au sujet: "Module HTML / CSS / PHP / MySQL Comprendre l’architecture client / serveur avec les langages phares du développement Web 1 Rudy Leclercq."— Transcription de la présentation:

1 Module HTML / CSS / PHP / MySQL Comprendre l’architecture client / serveur avec les langages phares du développement Web 1 Rudy Leclercq

2 Plan du module XHTML / CSS (3 séances) PHP (4 séances) PHP / MySQL (3 séances) Frameworks, ORM, Debug, … (2 séances) 2

3 Plan du cours Introduction XHTML / CSS : Les bases ◦ XHTML ◦ CSS Utilisation avancée 3

4 INTRODUCTION 4

5 Introduction Modèle Client / Serveur Protocole HTTP / Architecture REST XHTML ? CSS ? Navigateurs Editeurs 5

6 Modèle Client / Serveur Client 1 Serveur Client 2 Requête Réponse Requête Réponse Requête Réponse DB 6

7 Protocole HTTP / Architecture REST HTTP : HyperText Transfer Protocol Méthodes principales ◦ Get ◦ Post ◦ Put ◦ Delete Codes de statut ◦ 200 (2xx : Succès) ◦ 404 (4xx : Erreur du client) ◦ 500 (5xx : Erreur du serveur) ◦ 301 (3xx : Redirection) Ressource Post Get Put Delete Traitement Etat 7

8 XHTML ? CSS ? XHTML : eXtensible HyperText Markup Language  Contenu, Informations logiques Exemple : Le titre de ma page est « Page d’accueil » CSS : Cascading Style Sheets  Présentation du contenu Exemple : Le texte de ma page est rouge 8

9 Navigateurs Internet Explorer Firefox Chrome Safari … 9

10 Editeurs Le plus simple : Bloc notes ! Pour débuter : ◦ Sous Windows : Notepad++ ◦ Sous Mac OS : TextMate EDI : ◦ Eclipse PDT, Aptana ◦ Netbeans ◦ PHP Storm 10

11 XHTML / CSS : LES BASES 11

12 XHTML Ce n’est pas un langage de programmation : c’est un langage de présentation Langage proche de XML Structure sémantique de l’information, du contenu HTML 4 ? XHTML 1,1? HTML 5 ? 12

13 XHTML : Balises Paire de balise ◦ Balise ouvrante + Balise fermante ◦ ◦ Exemple : Titre de ma page Balise unique ◦ ◦ Exemple : 13

14 XHTML : Balises Imbrication des balises ◦ 14

15 XHTML : Attributs (1/2) Exemples : ◦ ◦ C'est un petit pas pour l´homme` un bond de géant pour l´humanité. 15

16 XHTML : Attributs (2/2) Attributs universels ◦ Title  Bulle d’aide ◦ Id  Identifiant unique de l’élément ◦ Class  Classe de l’élément 16

17 XHTML : Exercice Modéliser une voiture ◦ Parties de la voiture  Sièges  Volant  Roues  … ◦ Utiliser les balises avec des identifiants et des classes 17

18 XHTML : Commentaires 18

19 XHTML : Structure d’une page 19

20 XHTML : Titres 6 niveaux ◦  Titre de la page ◦ 20

21 XHTML : Paragraphes / Sauts de ligne Un saut de ligne dans l’éditeur n’est pas un saut de ligne visible Balise pour sauter une ligne : Paragraphes : Texte Ligne 1 Ligne 2 21

22 XHTML : Espacer le texte Texte avec espaces Affichera : Texte avec espaces Solutions ◦ Entité HTML : ◦ CSS 22

23 XHTML : Mise en valeur de texte Important  Rendu par défaut en gras Peu important  Rendu par défaut en italique PS : Ne plus utiliser les balises et 23

24 XHTML : Autres balises  Exposant  Indice  Citation courte  Citation longue LAN  Accronyme 24

25 XHTML : Liens (1/3) Relatif ou absolu ? ◦ Image.jpg  relatif ◦ dossier/icone.ico  relatif ◦../../footer.html  relatif ◦ C:\Site\index.html  absolu ◦ /var/www/site/index.html  absolu ◦ /  ??? Relatif : dépend du contexte Absolu : précise le chemin complet 25

26 XHTML : Liens (2/3) Lien vers une autre page du même site ◦ Un lien Lien vers une page d’un autre site ◦ Google Ouvrir dans une nouvelle fenêtre ? non ! Lancer un client mail ? ◦ Ecrivez moi ! 26

27 XHTML : Liens (3/3) Ancres ◦ Lien vers un endroit précis dans une page :  Lien vers titre 1  Lien vers titre 2  Titre 1  bla bla bla ◦ Lien vers un endroit précis dans une autre page  Lien vers titre 1  Lien vers titre 2 27

28 XHTML : Images Formats : JPEG, PNG, GIF, BMP Attention : ◦ Aux chemins d’accès ◦ Aux accents ◦ Aux espaces Image cliquable ◦ 28

29 XHTML : Balises génériques  inline  block  Utiliser les attributs « id » et « class » 29

30 Plan du cours Introduction XHTML / CSS : Les bases ◦ XHTML ◦ CSS Utilisation avancée 30

31 CSS : Introduction Cascading Style Sheets  Feuilles de style Langage de mise en forme de l’HTML 31

32 CSS : Placement 3 méthodes de placement ◦ Fichier CSS externe (head)  ◦ Balise de style (head)  … ◦ Attribut de style  ◦ JavaScript : méthodes identiques de placement 32

33 CSS : Syntaxe (1/2) balise { propriété: valeur; } Exemple : ◦ body { color: #ff0000; background-color: yellow; font-size: 12px; } La partie précédent l’accolade s’appelle le sélecteur 33

34 CSS : Syntaxe (2/2) Cibler plusieurs éléments : ◦ em, strong { text-decoration: underline; } ◦  Souligne tous les mots importants Cibler des éléments par imbrication ◦ p a{ color: green; } ◦  Colore en vert uniquement les liens contenus dans les paragraphes 34

35 CSS : IDs et Classes Cibler un élément en particulier ◦ #navigation { color: blue; } Cibler des éléments par classe ◦.alert { color: red; }.warning { color: orange; }.huge{ font-size: 2em; } ◦ Attention ◦ Texte 35

36 CSS : Formatage de texte (1/3) Tailles ◦ Pixels  font-size: 16px; ◦ Valeur relative  font-size: small;  font-size: 1.3em; Polices ◦ font-family: "Arial Black", Arial, Verdana, serif; Alignements ◦ text-align: right; 36

37 CSS : Formatage de texte (2/3) Indentation ◦ text-indent: 30px; Effets ◦ font-style: italic; Couleurs ◦ color: #f00; ◦ color: red; ◦ color: rgb(255,0,0); Variantes ◦ font-variant: uppercase; Décoration ◦ font-decoration: line-throught; 37

38 CSS : Formatage de texte (3/3) Fonds ◦ background-color: black; ◦ background-image: url("../images/neige.png"); ◦ background-attachment: fixed; ◦ background-repeat: no-repeat; ◦ background-position: top right; background: url(…) no-repeat top right fixed; 38

39 Exercice ◦ Styliser notre voiture ! 39

40 CSS : Pseudo-formats (1/2) a{ /* Style du lien normal */ } a:hover{ /* Style du lien survolé */ } a:active{ /* Style du lien cliqué */ } a:focus{ /* Style du lien sélectionné */ } a:visited{ /* Style du lien visité*/ } 40

41 CSS : Pseudo-formats (2/2) p:first-letter{ /* Style de la première lettre du paragraphe */ } p:first-line{ /* Style de la première ligne du paragraphe */ }.question:before { content: "Question : "; font-weight: bold; }.question:after { content: " ?"; }.question:after { content: url("../../images/interrogation.gif"); } 41

42 XHTML / CSS : UTILISATION AVANCÉE 42

43 XHTML / CSS : Utilisation avancée Listes Block / Inline Tableaux Formulaires CSS avancé Structure d’une page TP 43

44 Les listes Listes non ordonnées Listes ordonnées Listes de définitions 44

45 Listes non ordonnées (1/2) Listes non ordonnées ◦ Pierre Feuille Ciseaux ◦ Affiche :  Pierre  Feuille  Ciseaux 45

46 Listes non ordonnées (2/2) Listes non ordonnées imbriquées ◦ Menu 1 Sous menu 1.1 Sous menu 1.2 Menu 2 Sous menu 2.1 Sous menu 2.2 ◦ Affiche  Menu 1  Sous menu 1.1  Sous menu 1.2  Menu 2  Sous menu 2.1  Sous menu

47 Listes ordonnées ◦ Conception Développement Test ◦ Affiche: 1.Conception 2.Développement 3.Test 47

48 Listes de définitions LAN Local Area Network WAN Wireless Area Network 48

49 Listes et CSS List-style-position ◦ outside ◦ inside List-style-type ◦ Listes non ordonnées  disc (défaut)  circle  square  none ◦ Liste ordonnées  decimal (défaut)  decimal-leading-zero  upper-roman  lower-roman  upper-alpha  lower-alpha  lower-greek List-style-image ◦ url("/images/folder.png"); 49

50 Menu de navigation et listes Accueil Artistes Vidéos 50

51 Block / Inline Block : h1, p, ul, div Inline : strong, a, img, span Une balise block ne peux être contenu dans une balise inline display: block / display: inline 51

52 Block : Taille p{ width: 90%; height: 100px; overflow: hidden; } 52

53 Block / Inline : bordures (1/2).none { border: none; }.solid { border: 2px solid black; }.dotted { border: 2px dotted green; }.dashed { border: 2px dashed red; }.double { border: 4px double maroon; }.groove { border: 4px groove teal; }.ridge { border: 4px ridge fuchsia; }.inset { border: 3px inset black; }.outset { border: 3px outset black; } 53

54 Block / Inline : bordures (2/2) border-top border-bottom border-left border-right a img { border: none; } 54

55 Block : marges Marges intérieures à la bordure : padding Marges extérieures à la bordure : margin Centrer horizontalement : « margin: auto; » Texte 55

56 Block : Flottants float: left; float: right; clear: left;  stopper un flottant gauche Exercice : Créer une lettrine flottante Texte Float 56

57 Block : Positionnement Relatif position: relative; Absolu position: absolute; left: 10px; top: 20px; Fixe position: fixed; 57

58 Tableaux (1/3) Titre # Nom Prénom … 1 Leclercq Rudy 2 Grancher Nicolas #NomPrénom 1LeclercqRudy 2GrancherNicolas 3DurandBenoît 58

59 Tableaux (2/3) table{ border-collapse: collapse; } 59

60 Tableaux (3/3) Fusions Colonnes : attribut colspan Lignes : attribut rowspan a b a+b ab a+b

61 CSS avancé Sélecteurs avancés ◦ + ◦ > ◦ [attr] ◦ [attr=val] ◦ [attr~=val] ◦ … 61

62 Formulaires (1/6) Les formulaires constituent le premier pas vers les sites dynamiques (Client / Serveur) Les données d’un formulaire sont envoyées pour être traitées coté serveur 62

63 Formulaires (2/6) Votre pseudo : Votre mot de passe : 63

64 Formulaires (3/6) Pseudo : Mot de passe : Un champ vide est quand même transmis pseudo  Rudy motdepasse  Rudy Pseudo : ● ● ● ● ● ●● ● ● ● ● ● Mot de passe :

65 Formulaires (4/6) Rouge Vert La valeur sélectionné est transmise : couleur  green 65 Rouge Vert

66 Formulaires (5/6) Rouge Vert 66

67 Formulaires (6/6) Bouton 67

68 Structure d’une page 68 header navigation sidebar content footer

69 TP : Chat / Twitter Réaliser l’interface graphique Utiliser les différentes balises Tableaux Listes Formulaires … Fonctionnalités Page d’accueil Lister les messages existants Ajouter un nouveau message Page d’identification Page membre 69

70 70

71 Introduction (2h) ◦ Evaluation ◦ Navigateurs ◦ Protocole HTTP ◦ Editeurs Bases ◦ XHTML (2h)  Introduction  Partie 1  Balises  Attributs  Structure d’une page  Commentaires  Partie 2  Paragraphes  Sauts de ligne  Titres  Mise en valeur de texte  Autres balises  Partie 3 : Liens  Relatif et absolu  Liens vers une autre page  Ancres  Mails  Partie 4 : images  Formats  Balise  Partie 5 : Balises génériques ◦ CSS (2h)  Introduction  Partie 1 : Premiers pas  Méthodes de placement  Appliquer du style aux balises  IDs et Classes  Texte  Tailles  Polices  Alignement  Effets  Couleurs  Fond  Pseudo – Formats  Liens  Première lettre et première ligne  Avant / Après Avancé 6h ◦ Listes ◦ Block / Inline ◦ Tailles ◦ Bordures ◦ Marges ◦ Flottants ◦ Positionnement ◦ Structure d’une page ◦ Tableaux ◦ Formulaires  … JavaScript PHP 71


Télécharger ppt "Module HTML / CSS / PHP / MySQL Comprendre l’architecture client / serveur avec les langages phares du développement Web 1 Rudy Leclercq."

Présentations similaires


Annonces Google