Module HTML / CSS / PHP / MySQL

Name: Module HTML / CSS / PHP / MySQL
Uploaded: 2017-11-02T09:24:55+00:00
Duration: PTM24S51
Channel: Stéphanie Perron
Description: Module HTML / CSS / PHP / MySQL

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=" Ouvrir dans une nouvelle fenêtre ? non ! Lancer un client mail ? <a 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;

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;

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  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

Module HTML / CSS / PHP / MySQL

Présentations similaires

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

Présentations similaires

Notre projet

Feed-back

Entrer

S'autoriser via un réseau social:

Module HTML / CSS / PHP / MySQL

Présentations similaires

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

Présentations similaires

Notre projet

Feed-back