Module HTML / CSS / PHP / MySQL Comprendre l’architecture client / serveur avec les langages phares du développement Web Rudy Leclercq
Plan du module XHTML / CSS (3 séances) PHP (4 séances) PHP / MySQL (3 séances) Frameworks, ORM, Debug, … (2 séances)
Plan du cours Introduction XHTML / CSS : Les bases Utilisation avancée
Introduction
Introduction Modèle Client / Serveur Protocole HTTP / Architecture REST XHTML ? CSS ? Navigateurs Editeurs
Modèle Client / Serveur Requête Réponse Serveur Client 2 Requête Réponse DB Requête Réponse Client 2
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
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
Navigateurs Internet Explorer Firefox Chrome Safari …
Editeurs Le plus simple : Bloc notes ! Pour débuter : EDI : Sous Windows : Notepad++ Sous Mac OS : TextMate EDI : Eclipse PDT, Aptana Netbeans PHP Storm
XHTML / CSS : Les bases
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 ?
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 />
XHTML : Balises Imbrication des balises <head></head><body></body> <head><body></head></body>
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>
XHTML : Attributs (2/2) Attributs universels Title Bulle d’aide Id Identifiant unique de l’élément Class Classe de l’élément
XHTML : Exercice Modéliser une voiture Parties de la voiture Sièges Volant Roues … Utiliser les balises avec des identifiants et des classes
XHTML : Commentaires
XHTML : Structure d’une page
XHTML : Titres 6 niveaux <h1> </h1> Titre de la page
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>
XHTML : Espacer le texte <p>Texte avec espaces</p> Affichera : Texte avec espaces Solutions Entité HTML : CSS
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>
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
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
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 href="mailto:r.leclercq@epixelic.com">Ecrivez moi !</a>
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>
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>
XHTML : Balises génériques <span></span> inline <div></div> block Utiliser les attributs « id » et « class »
Plan du cours Introduction XHTML / CSS : Les bases Utilisation avancée
CSS : Introduction Cascading Style Sheets Feuilles de style Langage de mise en forme de l’HTML
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
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
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
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>
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;
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;
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;
Exercice Styliser notre voiture !
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é*/ }
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"); }
XHTML / CSS : Utilisation avancée
XHTML / CSS : Utilisation avancée Listes Block / Inline Tableaux Formulaires CSS avancé Structure d’une page TP
Les listes Listes non ordonnées Listes ordonnées Listes de définitions
Listes non ordonnées (1/2) <ul> <li>Pierre</li> <li>Feuille</li> <li>Ciseaux</li> </ul> Affiche : Pierre Feuille Ciseaux
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
Listes ordonnées Listes ordonnées <ol> <li>Conception</li> <li>Développement</li> <li>Test</li> </ol> Affiche: Conception Développement Test
Listes de définitions <dl> <dt>LAN</dt> <dd>Local Area Network</dd> <dt>WAN</dt> <dd>Wireless Area Network</dd> </ol>
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");
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>
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
Block : Taille p{ width: 90%; height: 100px; overflow: hidden; }
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; }
Block / Inline : bordures (2/2) border-top border-bottom border-left border-right a img { border: none; }
Block : marges Marges intérieures à la bordure : padding Marges extérieures à la bordure : margin Centrer horizontalement : « margin: auto; » Texte Texte
Block : Flottants float: left; float: right; clear: left; stopper un flottant gauche Exercice : Créer une lettrine flottante Float Texte
Block : Positionnement Relatif position: relative; Absolu position: absolute; left: 10px; top: 20px; Fixe position: fixed;
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
Tableaux (2/3) table{ border-collapse: collapse; }
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
CSS avancé Sélecteurs avancés + > [attr] [attr=val] [attr~=val] …
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
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>
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 123456 Pseudo : Rudy Mot de passe : ● ● ● ● ● ●
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
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>
Formulaires (6/6) <textarea name="message"></textarea> <input name="envoyer" type="submit" value="Envoyer" /> <input type="button" value="OK" /> <button name="bouton">Bouton</button>
Structure d’une page header navigation sidebar content footer
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
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