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

Présentations similaires


Présentation au sujet: "Module HTML / CSS / PHP / MySQL"— Transcription de la présentation:

1 Module HTML / CSS / PHP / MySQL
Comprendre l’architecture client / serveur avec les langages phares du développement Web 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)

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

4 Introduction

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

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

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

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

9 Navigateurs Internet Explorer Firefox Chrome Safari

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

11 XHTML / CSS : Les bases

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 ?

13 XHTML : Balises Paire de balise Balise unique
Balise ouvrante + Balise fermante <balise></balise> Exemple :<title> Titre de ma page </title> Balise unique <balise /> Exemple : <image /> <br /> <hr />

14 XHTML : Balises Imbrication des balises
<head></head><body></body> <head><body></head></body>

15 XHTML : Attributs (1/2) <balise attribut="valeur" ></balise> <balise attribut="valeur" /> Exemples : <img src="image.jpg" /> <citation auteur="Neil Armstrong" date="21/07/1969"> C'est un petit pas pour l´homme` un bond de géant pour l´humanité. </citation>

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

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

18 XHTML : Commentaires

19 XHTML : Structure d’une page

20 XHTML : Titres 6 niveaux <h1> </h1>  Titre de la page

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 : <br /> Paragraphes : <p>Texte </p> <p>Ligne 1<br /> Ligne 2</p>

22 XHTML : Espacer le texte
<p>Texte avec espaces</p> Affichera : Texte avec espaces Solutions Entité HTML :   CSS

23 XHTML : Mise en valeur de texte
<strong>Important</strong>  Rendu par défaut en gras <em>Peu important</em>  Rendu par défaut en italique PS : Ne plus utiliser les balises <i> et <b>

24 XHTML : Autres balises <sup></sup>  Exposant
<sub></sub>  Indice <q></q>  Citation courte <blockquote></blockquote>  Citation longue <acronym title="Local Area Network"> LAN </acronym>  Accronyme

25 XHTML : Liens (1/3) Relatif ou absolu ? Relatif : dépend du contexte
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

26 XHTML : Liens (2/3) Lien vers une autre page du même site
<a href="autrepage.html">Un lien</a> Lien vers une page d’un autre site <a href="http://www.google.fr/">Google</a> Ouvrir dans une nouvelle fenêtre ? non ! Lancer un client mail ? <a moi !</a>

27 XHTML : Liens (3/3) Ancres Lien vers un endroit précis dans une page :
<a href="#titre1">Lien vers titre 1</a> <a href="#contenu">Lien vers titre 2</a> <h1 id="titre1">Titre 1</h1> <p id="contenu">bla bla bla</p> Lien vers un endroit précis dans une autre page <a href="autrepage.html#titre1">Lien vers titre 1</a> <a href="autrepage.html#contenu">Lien vers titre 2</a>

28 XHTML : Images Formats : JPEG, PNG, GIF, BMP
<img src="images/logo.jpg" alt="Logo" /> Attention : Aux chemins d’accès Aux accents Aux espaces Image cliquable <a href="/"> <img src="images/logo.jpg" alt="Logo" /> </a>

29 XHTML : Balises génériques
<span></span>  inline <div></div>  block  Utiliser les attributs « id » et « class »

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

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

32 CSS : Placement 3 méthodes de placement Fichier CSS externe (head)
<link rel="stylesheet" href="monStyle.css" media="screen,projection" type="text/css" /> Balise de style (head) <style type="text/css"> … </style> Attribut de style <div style="…"></div> JavaScript : méthodes identiques de placement

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

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

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; } <a href="…"  class="alert">Attention</a> <p class="alert huge">Texte</p>

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;

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;

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;

39 Exercice Styliser notre voiture !

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é*/ }

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

42 XHTML / CSS : Utilisation avancée

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

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

45 Listes non ordonnées (1/2)
<ul> <li>Pierre</li> <li>Feuille</li> <li>Ciseaux</li> </ul> Affiche : Pierre Feuille Ciseaux

46 Listes non ordonnées (2/2)
Listes non ordonnées imbriquées <ul> <li> Menu 1 <ul> <li>Sous menu 1.1</li> <li>Sous menu 1.2</li> </ul> </li> <li> Menu 2 <ul> <li>Sous menu 2.1</li> <li>Sous menu 2.2</li> </ul> </li> </ul> Affiche Menu 1 Sous menu 1.1 Sous menu 1.2 Menu 2 Sous menu 2.1 Sous menu 2.2

47 Listes ordonnées Listes ordonnées
<ol> <li>Conception</li> <li>Développement</li> <li>Test</li> </ol> Affiche: Conception Développement Test

48 Listes de définitions <dl> <dt>LAN</dt> <dd>Local Area Network</dd> <dt>WAN</dt> <dd>Wireless Area Network</dd> </ol>

49 Listes et CSS List-style-position List-style-type List-style-image
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");

50 Menu de navigation et listes
<ul> <li><a href="">Accueil</a></li> <li><a href="">Artistes</a></li> <li><a href="">Vidéos</a></li> </ul>

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

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

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

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

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

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

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

58 Tableaux (1/3) # Nom Prénom 1 Leclercq Rudy 2 Grancher Nicolas 3
<table> <caption>Titre</caption> <thead> <tr> <th>#</th> <th>Nom</th> <th>Prénom</th> </tr> </thead> <tfoot>…</tfoot> <tbody> <tr> <td>1</td> <td>Leclercq</td> <td>Rudy</td> </tr> <tr> <td>2</td> <td>Grancher</td> <td>Nicolas</td> </tr> </tbody> </table> # Nom Prénom 1 Leclercq Rudy 2 Grancher Nicolas 3 Durand Benoît

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

60 Tableaux (3/3) Fusions a b a+b 1 1+2 2 Colonnes : attribut colspan
Lignes : attribut rowspan <table> <tr> <td>a</td> <td>b</td> </tr> <tr> <td colspan="2">a+b</td> </tr> </table> <table> <tr> <td>1</td> <td rowspan="2">1+2</td> </tr> <tr> <td>2</td> </tr> </table> a b a+b 1 1+2 2

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

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

63 Formulaires (2/6) <form method="post" action="action.php"> <p> <label for="pseudo">Votre pseudo :</label> <input type="text" name="pseudo" id="pseudo" value="Rudy" size="30" maxlength="10" /> </p> <p> <label for="pass">Votre mot de passe :</label> <input type="password" name="pass" id="pass" /> </p> </form>

64 Formulaires (3/6) <label for="lePseudo">Pseudo : </label> <input id="lePseudo" name="pseudo" type="text" value="Rudy" /> <label for="leMotdepasse">Mot de passe : </label> <input id="leMotdepasse" name="motdepasse" type="password" /> Un champ vide est quand même transmis pseudo  Rudy motdepasse  Pseudo : Rudy Mot de passe : ● ● ● ● ● ●

65 Formulaires (4/6) <input id="rouge" name="couleur" type="radio" value="red" selected="selected" /> <label for="rouge">Rouge</label> <input id="vert" name="couleur" type="radio" value="green" /> <label for="vert">Vert</label> La valeur sélectionné est transmise : couleur  green Rouge Vert

66 Formulaires (5/6) <input name="souvenir" type="checkbox" value="oui" /> <input name="couleurs[]" type="checkbox" value="red" /> <input name="couleurs[]" type="checkbox" value="green" /> <select name="couleur"> <option value="red">Rouge</option> <option value="green">Vert</option> </select> <select name="couleurs[]" multiple="multiple"> <option value="red">Rouge</option> <option value="green">Vert</option> </select>

67 Formulaires (6/6) <textarea name="message"></textarea>
<input name="envoyer" type="submit" value="Envoyer" /> <input type="button" value="OK" /> <button name="bouton">Bouton</button>

68 Structure d’une page 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

70

71 Introduction (2h) Bases Avancé 6h JavaScript PHP 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) 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 Bordures Marges Flottants Positionnement Tableaux Formulaires JavaScript PHP


Télécharger ppt "Module HTML / CSS / PHP / MySQL"

Présentations similaires


Annonces Google