Télécharger la présentation
La présentation est en train de télécharger. S'il vous plaît, attendez
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=" 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] …
![CSS avancé Sélecteurs avancés + > [attr] [attr=val] [attr~=val] …](http://slideplayer.fr/slide/2723982/10/images/61/CSS+avanc%C3%A9+S%C3%A9lecteurs+avanc%C3%A9s+%2B+%3E+%5Battr%5D+%5Battr%3Dval%5D+%5Battr%7E%3Dval%5D+%E2%80%A6.jpg "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
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
Présentations similaires
