Vous êtes sur la page 1sur 66

Module

HTML / CSS / PHP / MySQL


Comprendre l’architecture client / serveur
avec les langages phares du
développement Web

Rudy LECLERCQ
Plan du module
• HTML / CSS
4 séances

• PHP(/MySQL)
7 séances

10/01/2019 HTML / CSS / PHP / MySQL 2


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

10/01/2019 HTML / CSS / PHP / MySQL 3


Introduction

10/01/2019 HTML / CSS / PHP / MySQL 4


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

10/01/2019 HTML / CSS / PHP / MySQL 5


Modèle Client / Serveur

Client 1

Requête
Client 2 Serveur
Réponse
DB

Client 2

10/01/2019 HTML / CSS / PHP / MySQL 6


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

10/01/2019 HTML / CSS / PHP / MySQL 7


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

10/01/2019 HTML / CSS / PHP / MySQL 8


Navigateurs
• Internet Explorer
• Firefox
• Chrome
• Safari
•…

10/01/2019 HTML / CSS / PHP / MySQL 9


Editeurs
• Le plus simple : Bloc notes !

• Pour débuter :
• Sous Windows : Notepad++, Sublime
• Sous Mac OS : TextMate, Sublime

• EDI :
• Eclipse PDT, Aptana
• Netbeans
• PHP Storm

10/01/2019 HTML / CSS / PHP / MySQL 10


XHTML / CSS : Les bases

10/01/2019 HTML / CSS / PHP / MySQL 11


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 ?

10/01/2019 HTML / CSS / PHP / MySQL 12


XHTML : Balises

• Paire de balise
• Balise ouvrante + Balise fermante
• <balise></balise>
• Exemple :<title> Titre de ma page </title>

• Balise unique
• <balise />
• Exemple : <image /> <br /> <hr />

10/01/2019 HTML / CSS / PHP / MySQL 13


XHTML : Balises

• Imbrication des balises


• <head></head><body></body>

• <head><body></head></body>

10/01/2019 HTML / CSS / PHP / MySQL 14


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>

10/01/2019 HTML / CSS / PHP / MySQL 15


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

10/01/2019 HTML / CSS / PHP / MySQL 16


XHTML : Commentaires

10/01/2019 HTML / CSS / PHP / MySQL 17


XHTML : Structure d’une page

10/01/2019 HTML / CSS / PHP / MySQL 18


XHTML : Titres
• 6 niveaux
• <h1> </h1> → Titre de la page
• <h2> </h2>
• <h3> </h3>
• <h4> </h4>
• <h5> </h5>
• <h6> </h6>

10/01/2019 HTML / CSS / PHP / MySQL 19


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>

10/01/2019 HTML / CSS / PHP / MySQL 20


XHTML : Espacer le texte
• <p>Texte avec espaces</p>

Affichera :

Texte avec espaces

• Solutions
• Entité HTML : &nbsp;
• CSS

10/01/2019 HTML / CSS / PHP / MySQL 21


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>

10/01/2019 HTML / CSS / PHP / MySQL 22


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

10/01/2019 HTML / CSS / PHP / MySQL 23


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

10/01/2019 HTML / CSS / PHP / MySQL 24


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>

10/01/2019 HTML / CSS / PHP / MySQL 25


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>

10/01/2019 HTML / CSS / PHP / MySQL 26


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>

10/01/2019 HTML / CSS / PHP / MySQL 27


XHTML : Balises génériques
• <span></span> → inline
• <div></div> → block

• → Utiliser les attributs « id » et « class »

10/01/2019 HTML / CSS / PHP / MySQL 28


CSS : Introduction
• Cascading Style Sheets → Feuilles de style

• Langage de mise en forme de l’HTML

10/01/2019 HTML / CSS / PHP / MySQL 29


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

10/01/2019 HTML / CSS / PHP / MySQL 30


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

10/01/2019 HTML / CSS / PHP / MySQL 31


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

10/01/2019 HTML / CSS / PHP / MySQL 32


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>

10/01/2019 HTML / CSS / PHP / MySQL 33


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;

10/01/2019 HTML / CSS / PHP / MySQL 34


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;

10/01/2019 HTML / CSS / PHP / MySQL 35


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;

10/01/2019 HTML / CSS / PHP / MySQL 36


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é*/
}
10/01/2019 HTML / CSS / PHP / MySQL 37
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");
}

10/01/2019 HTML / CSS / PHP / MySQL 38


XHTML / CSS : Utilisation avancée

10/01/2019 HTML / CSS / PHP / MySQL 39


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

10/01/2019 HTML / CSS / PHP / MySQL 40


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

10/01/2019 HTML / CSS / PHP / MySQL 41


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

10/01/2019 HTML / CSS / PHP / MySQL 42


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

10/01/2019 HTML / CSS / PHP / MySQL 43


Listes ordonnées
• Listes ordonnées
• <ol>
<li>Conception</li>
<li>Développement</li>
<li>Test</li>
</ol>
• Affiche:
1. Conception
2. Développement
3. Test

10/01/2019 HTML / CSS / PHP / MySQL 44


Listes de définitions
• <dl>
<dt>LAN</dt>
<dd>Local Area Network</dd>

<dt>WAN</dt>
<dd>Wireless Area Network</dd>
</ol>

10/01/2019 HTML / CSS / PHP / MySQL 45


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

10/01/2019 HTML / CSS / PHP / MySQL 46


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>

10/01/2019 HTML / CSS / PHP / MySQL 47


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

10/01/2019 HTML / CSS / PHP / MySQL 48


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

10/01/2019 HTML / CSS / PHP / MySQL 49


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

10/01/2019 HTML / CSS / PHP / MySQL 50


Block / Inline : bordures (2/2)
 border-top
 border-bottom
 border-left
 border-right

 a img {
border: none;
}

10/01/2019 HTML / CSS / PHP / MySQL 51


Block : marges
 Marges intérieures à la bordure : padding
 Marges extérieures à la bordure : margin

Texte

Texte

Centrer horizontalement : « margin: auto; »

10/01/2019 HTML / CSS / PHP / MySQL 52


Block : Flottants
 float: left; Float

 float: right;
Texte

 clear: left; → stopper un flottant gauche

 Exercice : Créer une lettrine flottante

10/01/2019 HTML / CSS / PHP / MySQL 53


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

10/01/2019 HTML / CSS / PHP / MySQL 54


Tableaux (1/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

10/01/2019 3 HTML Durand


/ CSS / PHP / MySQL Benoît 55
Tableaux (2/3)
 table{
border-collapse: collapse;
}

10/01/2019 HTML / CSS / PHP / MySQL 56


Tableaux (3/3)
 Fusions
 Colonnes : attribut colspan
 Lignes : attribut rowspan

 <table>
<tr>
<td>a</td>
<td>b</td>
</tr>
<tr> a b
<td colspan="2">a+b</td> a+b
</tr>
</table>
 <table>
<tr>
<td>1</td>
<td rowspan="2">1+2</td>
</tr> 1
<tr> 1+2
<td>2</td> 2
</tr>
</table>
10/01/2019 HTML / CSS / PHP / MySQL 57
CSS avancé
• Sélecteurs avancés
•+
•>
• [attr]
• [attr=val]
• [attr~=val]
•…

10/01/2019 HTML / CSS / PHP / MySQL 58


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

10/01/2019 HTML / CSS / PHP / MySQL 59


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>

10/01/2019 HTML / CSS / PHP / MySQL 60


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" />

Pseudo : Rudy

Mot de passe : ●●●●●●

 Un champ vide est quand même transmis


pseudo → Rudy
motdepasse → 123456

10/01/2019 HTML / CSS / PHP / MySQL 61


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>

Rouge
Vert

 La valeur sélectionné est transmise :


couleur → green

10/01/2019 HTML / CSS / PHP / MySQL 62


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>

10/01/2019 HTML / CSS / PHP / MySQL 63


Formulaires (6/6)
 <textarea name="message"></textarea>

 <input name="envoyer" type="submit"


value="Envoyer" />
 <input type="button" value="OK" />
 <button name="bouton">Bouton</button>

10/01/2019 HTML / CSS / PHP / MySQL 64


Structure d’une page
header

navigation

content

sidebar

footer

10/01/2019 HTML / CSS / PHP / MySQL 65


Et la suite ?
• HTML 5 ?
• Frameworks CSS ?

10/01/2019 HTML / CSS / PHP / MySQL 66

Vous aimerez peut-être aussi