Un Site Web, C'est Quoi ?

 Accueil (/page-apprendre-a-faire-un-site-web)  Contact  Menu
Un site web, c'est quoi ?

Un site web c'est un ensemble de chiers - codé en HTML (/page-apprendre-html) - accessible
depuis une adresse web.
Il peut être :
 statique, c'est-à-dire qu'il possède un contenu xe - exemple un roman, un article -
 ou dynamique, exemple d'un progiciel de gestion ou une eboutique.
La di érence étant une interactivité avec l'utilisateur.
 Technologie à connaître
Site Statique
 HTML
Site Dynamique
 HTML + PHP (/page-apprendre-php)
 Vocabulaire
Internet
 Ensemble de serveurs interconnectés. Chaque serveur peut être relié à d'autres serveurs,
on parle de réseaux connectés à d'autres réseaux. Schématiquement cela peut ressembler
à une toile d'araignée, d'où le terme de web.
Adresse IP
 L'adresse IP est un numéro d'identi cation attribué à un appareil connecté à internet.
Serveur
 Le serveur est un ordinateur connecté à internet qui a plusieurs intérêts dont celui de
retourner des pages web.
Il est important de comprendre la notion de client et de serveur. Votre ordinateur est un
client et l'ordinateur distant qui répond à votre demande est un serveur. C'est comme dans
un bar, le client demande une bière et le serveur la lui rapporte.
Bien sûr le terme "ordinateur distant" n'est qu'une image pour comprendre la logique. Un
serveur peut ne pas être distant. Un développeur - sérieux - utilisera un serveur local ( sur son
propre ordinateur ) pour faire ses tests avant de mettre son travail sur un serveur distant /
public.
Intranet
Un site web n'est pas forcément accessible sur internet. Il peut l'être uniquement en local (sur
sa propre machine) ou sur un réseau privé, on parle d'intranet. Cette solution existe surtout
pour les entreprises, cela permet une plus grande sécurité et ainsi bloquer toute agression
extérieure au réseau, ou pour des raisons de performance ou de maintenance.
UNE QUESTION SUR L'ARTICLE? (/page-question)
Que dois-je maîtriser ?

Si votre objectif est de faire un site web simple de présentation avec un design simple, par
exemple un site qui vous présente / un CV, il vous sera nécessaire de faire un tour dans la
rubrique OVH (/page-initiation-ovh-heberger-votre-site-web), HTML et CSS (/page-apprendre-
css).
Si vous désirez faire un site moderne avec un design propre, il vous faudra maîtriser en plus
les technologies BOOTSTRAP (/page-apprendre-bootstrap-twitter) et JQUERY (/page-
apprendre-jquery).
Si vous avez l'ambition de faire un site dynamique avec interaction de l'utilisateur, il vous
faudra en plus maîtriser PHP et MySQL (/page-apprendre-mysql).
Le design et l'ergonomie web

L'ergonomie
Il est important de comprendre ce qu'est l'ergonomie d'un site web. Il faut toujours se mettre
à la place de l'utilisateur. Celui-ci a besoin de se sentir à l'aise, de trouver les informations
qu'il cherche rapidement et de prendre plaisir à lire ce qu'il voit sur le fond comme sur la
forme. On ne doit pas chercher l'information, elle doit apparaître naturellement. Il faut
également ajouter à son site les conventions qu'on peut retrouver sur les sites les plus
populaires. Par exemple, depuis toujours les sites ont leur logo en haut à gauche de leur page
et lorsque l'on clique dessus on tombe sur la page d'accueil du site, c'est une habitude
utilisateur, tout le monde fait ça. Si vous mettez le lien vers votre page d'accueil en bas à
droite avec un GIF animé de la décennie dernière, cela pourrait agacer l'utilisateur et ferait
passer votre site pour un site amateur.
Le design
La notion de mode existe aussi sur internet, le design devient de plus en plus simple et léger.
C'est d'ailleurs le cas de iOs7 et Windows 8 également pour ne citer qu'eux en exemple. On
cherche à créer des logiciels e caces avant tout. Un site/logiciel simple et épuré c'est un
projet réussi. Il n'est pas évident de partir de rien et faire un site agréable à lire. Soit on a un
sens artistique et donc il n'y a rien à apprendre, soit on n'en a pas et là c'est plus di cile. Le
design ne s'apprend pas vraiment, il faut s'inspirer de la mode du moment. Mon conseil pour
créer un site design, surfez sur internet, mettez en favoris vos sites préférés et CSSW vous
apprendra à comprendre comment les développeurs ont réalisé leur site, vous pourrez vous
inspirer de vos sites préférés. Un article sur Bootsrap vous apprendra à faire de beaux sites
modernes sans que vous ayez le talent artistique d'un designer web.
Le web de demain
Votre site doit être parfaitement adapté à tous les supports. Aujourd'hui un site web peut
être vu depuis un écran de 30 pouces avec des résolutions dépassant les 4000 pixels, sur une
tablette ou un smartphone. Il faut que votre site soit adapté à tous les supports. La réponse à
ce besoin s'appelle le responsive design.
Le responsive design
Aujourd'hui on peut faire un seul site web pour tous les supports. Il su t de dire au
navigateur d'a cher ou de cacher tel élément en fonction de la taille de l'écran, on parle alors
de responsive design. Vous devez garder cette information dans votre tête dès le début de
projet. Pour chaque page réalisée testez-la sur votre smartphone, tablette ou simplement
réduisez la taille de votre navigateur pour voir le résultat de votre travail.
Le navigateur Google Chrome
 Le navigateur de Google
Google est très bon dans beaucoup de domaines. Il ne fera pas exception dans la conception
d'un navigateur. Je vous conseille d'utiliser ce navigateur que ce soit pour surfer ou pour
travailler. Il est compatible tout OS et est très léger et rapide.
 Où le télécharger?
Vous pouvez télécharger Google Chrome à cette adresse:
Télécharger Google Chrome  (http://www.google.fr/intl/fr/chrome/browser/)
 L'analyse du code
Chrome a une fonctionnalité native très intéressante qui permet de voir/modi er le code
HTML d'une page en temps réel, ainsi que le CSS hérité par les éléments qui sont en plus
sélectionnables graphiquement. Pour cela il vous su t d'avoir le focus sur le navigateur et
d'appuyer sur la touche F12 de votre clavier. Une fenêtre apparaît en bas de page.
Le code que vous voyez à gauche et le code HTML du site visité. Le rôle d'un navigateur est
d'interpréter ce code pour le transformer en élément visuel.
 L'édition du code
La magie de cette fonctionnalité c'est de pouvoir sélectionner un élément et de le modi er en
temps réel sur votre navigateur.
Dans cet exemple j'ai modi é la couleur du corps du site de noir à blanc.
 La console
Dans cette même fonctionnalité vous pourrez exécuter du code Javascript (/page-jquery-
javascript) à la volée depuis le module "Console".
 Le debug
C'est dans cette partie qu'apparaîtront les erreurs javascript ou css. Très utile quand vous
êtes bloqué.
Lire les entêtes HTTP

Dans l'onglet Network choisissez le premier item, il vous renseignera sur les entêtes
receptionnés par le navigateur.
Pour plus d'informations concernant le fonctionnement des entêtes HTTP et la gestion du
cache cliquez ici: entêtes HTTP  (/page-cache-en-tetes-http-modi er)
Les éditeurs de texte

Sublime text 3
Sublime text est devenu un incontournable éditeur de texte. C'est mon éditeur préféré! On
l'aime pour sa rapidité, son e cacité et cette étrange fenêtre en barre à droite qui vous
donne un aperçu général de votre chier! Il possède de nombreux plugins qui vous
permettront de vous adapter facilement à la technologie que vous voulez utiliser. (PHP, CSS,
jQuyer, Co eeScript, Compass, etc.) Sa colorations syntaxique est juste parfaite. Sublime text
est gratuit mais il existe un version payante qui n'a chera plus aléatoirement une fois toutes
les 2 heures une demande d'achat de licence. Si vous êtes un professionnel vous pouvez
payer la licence qui tourne autour de 50 euros.
Sur le lien suivant: packagecontrol  (https://packagecontrol.io/installation), vous pourrez
télécharger des nouveaux plugins très simplement
Les raccourcis le plus utiles de Sublime Text 2
Ctrl + X Supprimer une ligne
Ctrl + P Permet de naviguer dans n'importe quel chier
Ctrl + R Déplacer le curseur à une fonction du chier en cours
Ctrl + L Sélectionner la ligne en cours
Ctrl + D Sélectionner le mot entier en cours
Ctrl + Shift + D Dupliquer la ligne en cours
Ctrl + M Diriger le curseur vers l'autre extrémité d'une fonction
Ctrl + G Déplacer le curseur à la ligne X du chier
Ctrl + Shift + T Réouvrir le dernier chier fermé
CTRL + SHIFT + F Faire une recherche sur les chiers d'un dossier
CTRL + ALT + P Switcher de projet
Pensez à installer le plugin SublimeCodeIntel qui vous aidera à compléter / sauter vers vos
fonctions.
Vous pouvez aussi installer le plugin SublimeLinter qui vous aidera à trouver les erreurs de
syntaxe de code.
Notepad++
Pour les utilisateurs Windows, ce petit logiciel gratuit est un incontournable de la

programmation pour débutant. Très léger et e cace. Notepad permet de gérer plusieurs
chiers en même temps grâce à son système d'onglets, il possède également une coloration
syntaxique très utile qui vous permet de comprendre le contenu d'un chier rapidement. Sa
con guration se fait graphiquement et intuitivement.
Eclipse
Pour les plus gros projets je vous conseille d'utiliser Eclipse. Il permet de gérer plusieurs
projets et possède quelques outils très utiles. Personnellement j'ai souvent travaillé avec
Eclipse en entreprise, quelque soit le type de projet.

Installer un serveur web
Wampserver, serveur web pour Windows

Nous verrons dans cette rubrique comment installer un serveur web en local - c'est à dire sur
votre ordinateur - pour cela vous avez besoin d'un logiciel : WampServer (/page-initiation-
installer-serveur-web)
Cliquez ici  (http://www.wampserver.com/) pour télécharger le logiciel WampServer
Choisissez sur le site la version qui correspond à votre système d'exploitation.
Suivez les instructions lors de l'installation et assurez-vous que l'icone wampserveur soit
a chée dans votre barre des tâches et soit de couleur verte.
Attribuer une url local à votre site web

Pour rendre votre site accessible en local depuis votre navigateur, il faut indiquer à serveur
web ( Apache ) où se trouve le dossier de votre projet et associer votre adresse ip local au
serveur local.
Pour cela veuillez cliquer sur l'icone verte wampserver puis sélectionnez Apache et en n
cliquez sur le chier httpd.conf
Par défaut le bloc note devrait ouvrir ce chier.
Ajoutez ce code en bas de page:
NameVirtualHost boot.local
<VirtualHost xxx.local:80>
ServerName xxx.local
DocumentRoot "C:\wamp\www\xxx"
DirectoryIndex index.php
<Directory "C:\wamp\www\xxx">
AllowOverride All
Allow from All
</Directory>
<//VirtualHost>
Remplacez xxx par le nom de votre site sans espace et sans accent. Dans l'exemple, le chemin
du site est C:\wamp\www\xxx . Adaptez également cette partie du code en entrant le chemin
que vous avez choisi. Peu importe l'endroit du moment que vous le spéci ez au serveur web.
Créez dans ce dossier un chier à l'extension .txt qui servira de test à la n de ce tutoriel - par
exemple test.txt - et écrivez du texte dans ce chier.
Il faut maintenant indiquer à votre système d'exploitation que xxx.local pointe vers votre
propre ordinateur. Pour cela, vous devez éditer le chier hosts qui se trouve dans le dossier
système: C:\Windows\System32\drivers\etc. Ce chier n'a pas d'extension, ouvrez le avec un
éditeur de texte et ajoutez la ligne suivante à la n du chier:
127.0.0.1 xxx.local
Redémarez votre serveur web en cliquant sur "Restart All Services" :
Ouvrez ensuite votre navigateur et entrez l'adresse http://xxx.local/test.txt
Si vous voyez le texte que vous avez entré dans le chier .txt c'est que votre serveur local est
opérationnel.
Installer un serveur SMTP sur Windows

La manière la plus simple d'installer un serveur SMTP sur Windows est d'executer le
programme smtp4dev que vous pouvez télécharger ici : Télécharger smtp4dev 
(http://smtp4dev.codeplex.com/)
Le logiciel écoute le port 25 et intercepte les envois mail ce qui vous permet de travailler dans
un environnement de développement sans risque d'envoi mail non souhaité.
Installer un serveur web sous linux
Si vous êtes sur linux, je vous invite à consulter la page suivante: Installer serveur web sous
linux (http://creer.local/page-linux-installer-serveur-web-php-mysql-apache)
Retouche d'images avec Photofiltre

Photofiltre
Photo ltre existe depuis des années, il permet de retoucher toutes vos images. Vous pourrez
ainsi redimensionner vos images, corriger la luminosité, ajouté des e ects artistiques comme
le ou, le puzzle, etc. Mais surtout vous pourrez créer de belles images pour votre site grâce à
son système de calques. Il n'est pas aussi complet qu'un photoshop, mais il est gratuit et il
répondra à 99% de vos besoins.
Il est disponible en téléchargement à cette adresse: Télécharger Photo ltre 

(http://static.infomaniak.ch/photo ltre/utils/pf7/PhotoFiltre7-fr.zip) Il s'agit d'une version
"portable", c'est à dire qu'il n'est pas nécessaire de l'installer, vous pouvez le copier coller sur
une clé usb et il fonctionnera.
Importer une image

Pour editer une photo, cliquez sur "Ficher" puis ouvrir et sélectionner votre photo. Si la photo
s'a che dans le logiciel c'est que vous avez réussi à ouvrir votre chier.
Redimensionner une image

Une fois l'image importée, cliquez sur la èche blanche dans le menu de droite :
Sélectionnez ensuite la partie de votre image que vous souhaitez:

Nous avons choisi de sélectionner le visage de Scarlett Johansson. Pour recadrer
Supprimer le fond d'une image
Sélectionnez une couleur en cliquant avec le clic droit de votre souris sur la palette de
couleurs:
Puis utilisez le sélectionneur polygone.
ou appuyez sur la touche J de votre clavier.
Contourner la partie de votre photo que vous voulez isoler :
Ensuite e acez la zone avec la touche "Suppr" ou cliquez sur le "E acer" dans le menu
"Edition":
Vous pouvez obtenir ce résultat :
Fond transparent
Pour transformer le fond en fond transparent il su t maintenant de remplacer le vert uo
par du transparent.
Puis valider la tolérence à la couleur verte:

Enregistrez ensuite le format sous un fomat PNG, et non JPG qui ne gère pas les
transparences.
Résultat :
OVH, hébergement web
OVH
OVH est l'acronyme de "On vous héberge". Bien qu'il ne soit pas le seul à faire cela, c'est sur
ce site que vous pourrez réserver un nom de domaine et un hébergement.
Rendez vous sur le site dÓVH  (http://www.ovh.com)
Vous pourrez choisir le nom de domaine de votre site web, exemple:
Cliquez sur "Commander" et suivez les instructions. Vous pouvez choisir l'o re que vous
désirez mais la version "Perso" qui est la moins cher est tout à fait acceptable pour un
premier projet. Une fois le paiement e ectué vous receverez par mail toutes les information
de votre site.
OVH FTP
Pour gérer votre site, vous n'aurez besoin que d'un accès FTP ( voir rubrique suivante ).
Normalement ces informations sont sur votre mail de con rmation de paiement, mais si vous
ne les avez plus loggez vous dans l'espace membre cliquez sur l'onglet "Hébergement" puis
"Mot de passe FTP"
Vous tomberez sur cette page:
Indiquez le mot de passe que vous désirez.

FTP et Filezilla
FTP c'est quoi?

FTP est l'acronyme de File Transfert Protocol ( protocole de transfert de chier ). FTP est donc
un protocole de communication destiné à l'échange de chier sur un réseau TCP/IP. Il permet
de copier des chiers d'un ordinateur à l'autre, de les modi er ou de les supprimer.
L'échange suit la logique Client/Serveur, il existe donc un ordinateur possédant un client FTP
et l'autre un serveur FTP.
Par convention on attribut aux connections FTP le port 21 pour les commandes et le 20 pour
les données.
Filezilla, client FTP

Filezilla est certainement le client FTP le plus connu. Il est très facile à utiliser et est
entièrement graphique. Vous pouvez télécharger la version portable de lezilla à cette
adresse télécharger Filezilla portable  (http://framakey.org/Portables/FileZillaPortable?
from=Portables.PortableFilezilla)
Gestionnaire de sites web
Après avoir téléchargé Filezilla, executez le et cliquez sur le bouton suivant de gestionnaire de
site:
Une nouvelle fenêtre apparait. Cliquez sur le bouton "Nouveau" :
Et remplissez les champs avec les valeurs que vous avez reçu de votre hébergeur ( exemple
OVH ).
Ensuite renseignez les données de localisation de sourcel et de destination pour synchroniser
la consultatation des données:
Cliquez sur le bouton valider.

Vous voyez désormais l'interface avec les informations locales et distante. Pour envoyer les
chier au serveur distant, vous pouvez faire un clic droit sur le dossier que vous désirez
envoyer et choisissez "Envoyer" comme dans l'exemple ci-dessous.
Vous pouvez également gérer vos dossier distant en faisant un clic droit sur les dossiers
concernés:
Dictionnaire informatique
Adresse IP (/dico-adresse-ip)
L'adresse IP ( Internet Protocol ) est un numéro d'identi cation qui est attribué à une machine
connectée à Internet.
Base de données (/dico-base-de-donnees)
Une base de données ( ou database en anglais ) est un conteneur qui permet de stocker des
informations structurées et qui sont exploitables facilement.
CRUD (/dico-crud)
CRUD ( Create, Read, Update, Delete ) désigne les 4 opérations de base d'un logiciel. Le terme
est un clin d'oeil au mot anglais crude qui signi e "rudimentaire".
DOM (/dico-dom)
Le Document Object Model ( ou DOM ) est un standard du W3C qui permet de créer une
arborescence de la strcuture d'un document et de ses éléments.
FTP (/dico-ftp)
FTP est l'acronyme de File Transport Protocol, il est un protocole de communication qui
permet d'échanger des chiers entre deux machines distantes.
JSON (/dico-json)
JSON JavaScript Object Notation est un format de données qui permet de représenter une
information structurée.
Multi-thread (/dico-multi-thread)
Un logiciel multi-thread est capable d'exécuter plusieurs processus en même temps.
Serveur web (/dico-serveur-web)
Le serveur web est une machine connectée à internet et qui heberge des ressources ( page
web, images, vidéo, chiers divers... )
Thread (/dico-thread)
Thread ( ou l d'execution / tâche / processus ) est une execution d'une suite d'instructions.
URL (/dico-url)
L'URL ( Uniform Resource Locator ) est une adresse web. Elle peut être composée de lettres et
de chi res.
Virtual Host (/dico-virtual-host)
Virtual Host ( ou hébergement virtuel ) permet d'héberger plusieurs noms de domaine sur un
seul et même serveur.
HTML, les balises

Cours sur les balises HTML
Le code HTML est composé de balises imbriquées les unes dans les autres ; cela permet de
regrouper les informations.
<!DOCTYPE html>
<head>
<title>Titre de ma page</title>
<style> ... </style>
</head>
<body>Bienvenue sur mon site</body>
</html>
Pour donner une valeur à une balise on encadre la valeur de sa balise comme ci-dessous:
<b>Texte GRAS</b>
<i>Texte ITALIQUE</i>
<u>Texte SOULIGNE</u>
Dans certains cas, par exemple pour <img>, <br>, <input> il ne faut pas fermer la balise.
Exemple:
<input type="checkbox" value="1" />

<br />
<img src="/xxx.png" target="_blank" />
Ces balises n'ont pas pas besoin de valeur ( c'est cas de la balise <br> ) ou alors nécessite
plusieurs valeurs donc la syntaxe est di érent. Le rôle des attributs est expliqué dans le
chapitre suivant.
Les balises les plus utilisées sont les suivantes:
Balise Fonction
 Commentaire
<a> Lien hypertext
<b> Texte en gras
<body> Corps de la page
<br /> Permet de sauter une ligne
<caption> Titre d'un tableau
<cite> Citation
<div> Division
<em> Emphase ( italique )
< eldset> Permet de regrouper des éléments

d'un formulaire
<form> Formulaire
<frame> Frame
<h1> Titre d'importance 1
<head> Entête d'un chier
<hr> Séparateur horizontal
<html> Balise obligatoire pour déclarer le

debut du code html
<i> Italique
<img /> Image
<input /> Elément du formulaire
<label> Description d'un champ
<li> Composant d'une liste ( ul ou ol )
<legend> Légende d'un tableau
<meta> Information sur la page
<noscript> Le texte indiqué sera a ché dans le cas

où le navigateur n'accepte pas les
scripts
<object> Element multimédia
<ol> Liste numéroté, associé à la balise li
<option> Entrée de la base select
<pre> Respecte le contenu HTML pour les

espaces.
<script> Insertion de script
<span> Division comme la balise div l'a chage

est di érent
<strong> Texte en gras
<style> Insertion de style ( CSS )
<sub> Texte en indice
<sup> Texte en exposant
<table> Tableau
<td> Cellule de tableau
<textarea> Champ composé de plusieurs lignes
<th> Cellule d'entête d'un tableau
<title> Titre de la page
<tr> Nouvelle ligne d'un tableau
<ul> Liste non numéroté

HTML, les attributs

Cours sur les attributs HTML
Les balises peuvent avoir des propriétés, on les appelle des attributs.
<!DOCTYPE html>
<head>
<title>Titre de ma page</title>
<meta name="description" content="Site web" />
<style type="txt/css"> ... </style>
</head>
<body>Bienvenue sur mon site</body>
</html>
Dans l'exemple ci-dessus, l'attribut "name" de la base "meta" a pour valeur "description". Cela
permet de dire au navigateur que la balise meta - qui est une balise d'information - nous
informe de la description du site. Pour cette balise la valeur se met dans l'attribut "content".
Liste attributs HTML
Attribut Elément Description
accept <form>, <input> Les type de chier accepté par le serveur
accept-charset <form> Type d'encodage supporté
accesskey TOUS Dé nit un raccoucrci clavier pour activer ou

sélectionner un élément
action <form> L'URL du script qui traitera les valeurs du
formulaire
align <caption>, <hr>, <iframe>, <img>, Dé nit l'alignement horizontal de l'élément.

<table>, <td>, <th> Exemple: left, right, center et justify.
alt <area>, <img>, <input> Texte alternatif lorsque l'élément ne peut

être a ché.
async <script> Exécute le script en asynchrone
autocomplete <input>, <select>, <textarea> Propriété qui permet d'a cher ou non des
propositions de complétion de texte à
l'utilisateur
autofocus <input>, <select>, <textarea> L'élement est sélectionné au chargement

de la page
autoplay <audio>, <video> Chargement automatique de l'élement

multimédia.
charset <meta>, <script> Dé nit le type de codage de l'élement
checked <input> Indique si l'élément est coché
class TOUS Permet d'associer une classe à un élément
cols <textarea> Indique le nombre de colonne de l'élément
colspan <td>, <th> Permet de fusionner x cellule d'un tableau

horizontalement
data-* TOUS Permet de créer ses propres attributs.

Exemple data-user="1"
dir TOUS Indique le sens de lecture. Exemple ltr pour

(left to right) et rtl ( right to left )
disabled TOUS Permet de bloquer l'édition de l'élément et

rend l'élement illisible pour la validation du
formulaire.
download <a>, <area> Indique que l'hyperlien doit être utilisé

pour télécharger la ressource
draggalbe TOUS Indique si l'élement peut être déplacé par

l'utilisateur
dropable TOUS Indique si l'élement peut receptionner un

élément draggable.
dropzone TOUS Indique si l'élement peut receptionner un
élément draggable.
enctype <form> Dé nit le type d'encodage des données du

formulaire quand la method est POST
for <label>, <output> Décris l'élement qui lui est associé
form <button>, < eldset>, <input>, Indique le formulaire qui est propriétaire
<label>, <object>, <output>, de l'élément
<progress>, <select>, <textarea>
href <a>, <area>, <base>, <link> L'url de la ressource associée
id TOUS Permet d'associer un identi ant à un

élément
maxlength <input>, <textarea> Dé nit le nombre de caractère maximum

pour l'élément
method <form> Indique quel méthode HTTP doit être utilisé

quand le formulaire est envoyé. Peux être
GET (défaut) ou POST.
name TOUS Lors de la soumission d'un formulaire, on

récupère les valeurs et les noms des
champs.
placeholder <input>, <textarea> Ajoute un texte informatif pour l'utilisateur
readonly <input>, <textarea> Indique si l'élément peut être édité par

l'utilisateur
selected <option> Permet de sélectionner une valeur dans un

<select>
size <input>, <select> Dé nit la taille d'un élément par un nombre

de caractères
src <audio>, <embed>, <iframe>, Indique la source de l'élément. Pour l'image

<img>, <input>, <script>, <source>, par exemple on indique où elle se trouve
<track>, <video> sur le serveur.
style TOUS Dé nit les styles CSS qui primeront sur les
styles précédemment dé nis.
target <a>,<form> Indique où charger le script: nouvelle page,

page nommé ou la même page.
title TOUS Permet d'indiquer à l'utilisateur une
information, visible lors du survol de la
souris sur celui-ci.
type <button>, <input>, <embed>, Indique le type de l'élément.

<object>, <script>, <style>
type <button>, <option>, <input>, <li> Indique la valeur de l'élément.
HTML, les tableaux

Aujourd'hui les tableaux HTML ne sont utilisés que pour des tableaux de données. Il est
plutôt conseillé de faire la mise en page en CSS. Plus souple, plus précis, plus facile et surtout
plus évolutif, misez tout ce qui est visuel sur le CSS. Un tableau HTML ne doit servir que de
base d'un tableau.
Créer un tableau avec la balise <table>
<table>
<tr>
<td>Cellule 1 de la ligne 1</td>
</tr>
<tr>
</tr>
</table>
Résultat:
Cellule 1 de la ligne 1 Cellule 2 de la ligne 1
Les entêtes
<table>
<tr>
<th>Entete 1</th>
<th>Entete 2</th>
</tr>
<tr>
</tr>
</table>
En tête 1 Entête 2
Colspan, fusionner des cellules horizontalement

Vous pouvez fusionner des cellules horizontalement avec l'attribut colspan.
<table>
<tr>
</tr>
<tr>
<td colspan="2">
FUSION de celulle
</td>
</tr>
<tr>
</tr>
</table>

FUSION de celulle
Rowspan, fusionner des cellules verticalement
<table>
<tr>
</tr>
<tr>
<td rowspan="2">
FUSION cellule
</td>
</tr>
<tr>
</tr>
</table>
FUSION cellule Cellule 2 de la ligne 2

Cellule 2 de la ligne 3
Légende en haut des tableaux HTML
<table>
<caption>Legende en haut</caption>
<tr>
</tr>
<tr>
</tr>
</table>
Légende en haut
Légende en bas des tableaux HTML
<table>
<caption align="bottom">Legende en bas</caption>
<tr>
</tr>
<tr>
</tr>
</table>

Légende en bas
Mise en forme du tableau HTML

Il est possible de faire de la mise en forme en HTML pour les tableaux, mais je vous conseille
plutot de le faire en CSS. Vous pouvez donc dé nir la taille d'une cellule ou la taille de la
bordure. Cette information est purement informative, ne l'utilisez pas.
<table border="10">
<tr>
<td width="10">10px</td>
</tr>
<tr>
<td height="200">200px</td>
</tr>
</table>
10px Cellule 2 de la ligne 1

200px Cellule 2 de la ligne 2
Les balises <thead>, <tbody> et <tfoot>

Si on voulait faire les choses proprement un tableau devrait se contruire comme ceci:
<table>
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
</tr>
</thead>
<tbody>
<tr>
<td>c1</td>
<td>c2</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>c3</th>
<th>c4</th>
</tr>
</tfoot>
</table>
Ce qui ne changerait pas grand chose visuellement mais le code est plus précis, on sait
maintenant quelle partie du tableau est l'entête, le corps et le bas de tableau. Alors
concrètement à quoi sert tout cela ? Essentiellement à styliser un tableau de données. On va
créer un tableau avec un entête de couleur rouge en haut en vert en bas. Il sera plus aisé de
dé nir ce genre de style par la suite en CSS.
Col1 Col2
c1 c2
c3 c4
Liste UL OL LI
Liste non ordonnée
Comme nous avons vu dans le chapitre balise, il est possible de créer des listes d'item en
HTML.
Exemple
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
Résultat:
Item 1
Item 2
Item 3
Item 4
Liste ordonnée
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ol>
Résultat:
1. Item 1
2. Item 2
3. Item 3
4. Item 4
Les images en HTML

Les formats d'images: JPG et PNG
Il existe plusieurs formats sur le web, nous étudirons les plus connus : PNG et JPG. Pour faire
simple PNG est optimisé pour des petits formats comme des logos alors que JPG sera plus
intéressant pour les grosses images comme les photos.
Pour une même qualité d'image un JPG peut être trois fois plus léger qu'un PNG, alors que
pour d'autres types d'images, comme un simple dégradé le PNG sera plus léger ; de plus le
PNG a tendance à mieux respecter la qualité de l'image, les JPG sont souvent pixélisé
lorsqu'ils sont trop compressé.
A noter aussi que le PNG gère les transparences.
Insérer l'image du même projet

<img src="/images/html.png" />
Résultat:
Insérer l'image d'un site externe

<img src="http://www.egypte-antique.com/egypte.jpg" />
Résultat:
Ajouter un titre à l'image
Pour a cher un texte au survol de l'image, il su t d'indiquer le texte souhaiter dans l'attribut
title. Il est également intéressant de remplir l'attribut alt qui permet d'a cher un texte si le
navigateur n'arrive pas à charger l'image.
<img
alt="Photo egypte ancienne"
title="Photo Egypte Ancienne"
src="http://www.egypte-antique.com/egypte.jpg" />
Résultat:
(http://www.egypte-antique.com)
Les liens en HTML

Les liens hypertexte
La gestion des liens hypertexte se fait avec la balise <a> et l'attribut href. Cette balise est peut
être la plus importante du web, sans elle impossible de passer de site en site.
Le lien de base aura cette forme:
<a href="http://www.egypte-antique.com">EGYPTE ANCIENNE</a>
L'exemple ci-dessus a chera :
EGYPTE ANCIENNE
(http://www.egypte-
antique.com)
On remarquera que lorsqu'on clique dessus, on quitte le site pour aller sur un autre. Pour
éviter de perdre la page en cours on peut donner à la balise <a> l'attribut target qui indiquera
la cible de destination.
<a href="xxx" target="_blank">YYY</a>
_blank ouvrira une nouvelle fenêtre du navigateur.
<a href="xxx" target="_top">YYY</a>
_top ouvrira le contenu dans sa totalité sur la page.

<a href="xxx" target="_parent">YYY</a>
_parent a chera le contenu dans le cadre qui enveloppe la structure courante.
<a href="xxx" target="_self">YYY</a>
_self a chera le contenu dans le cadre courant, c'est la valeur par défaut.
Les ancrages
La gestion des encrages se fait avec l'attribut name. Le fait de nommer cette balise la
transforme en ancre. Il s'agit d'un point de repère qu'on peut atteindre via l'URL.
L'ancre se présente ainsi:
<a name="nom-de-votre-ancre"></a>
Le pointeur qui permet d'atteindre l'ancre se créer ainsi:
<a href="#nom-de-votre-ancre"></a>
Exemple:
ANCRE
POINTEUR
J'ai rempli la balise <a> par la valeur "ANCRE", j'aurai pu la laisser vide pour rendre l'ancre
invisible. Lorsque l'on clique sur le pointeur, le navigateur scroll jusqu'à l'ancre.
Créer un lien sur une image

Pour créer un lien sur une image, il faut encadré l'image des balises <a>
Exemple:
<a
href="http://www.egypte-antique.com"
target="_blank">
<img
alt="Photo egypte ancienne"
title="Photo Egypte Ancienne"
src="http://www.egypte-antique.com/egypte.jpg" />
</a>
Résultat:
(http://www.egypte-antique.com)
Les champs de formulaire en HTML

HTML possède des éléments de fomulaire qui permettent aux utilisateurs d'interagir avec le
site. L'exemple le plus connu d'élément input sur le web est le champs de texte de la page
google. L'espace où vous faîtes votre recherche est un input.
Le champ texte
Exemple de champ texte:
<input />
Résultat:
Cliquez sur l'élément et vous pourrez entrer du texte.

Par défaut l'input est un champ texte. Mais on peut lui donner d'autre forme comme des
boutons radio ou des checkbox que vous rencontrez souvent dans des formulaire
d'inscription.
Checkbox
Exemple de checkbox:
<input type="checkbox" /> OUI

<input type="checkbox" /> NON
Résultat:
OUI
NON
Ce qui nous frappe lors de ce test de checkbox c'est qu'on peut cocher les deux valeurs. C'est
assez idiot de répondre à une question par oui et par non en même temps.
Il existe donc un input qui permet de choisir qu'une seule réponse possible.
Radio
<input name="question1" type="radio" /> OUI

<input name="question1" type="radio" /> NON
Résultat:
OUI
NON
Case cochée
Par défaut aucun des boutons radio ou checkbox n'est coché. Pour cocher la réponse "oui"
par défaut, il faut l'indiquer avec l'attribut checked.
<input checked name="question1" type="radio" /> OUI

<input name="question1" type="radio" /> NON
Résultat:
OUI
NON
Textarea
Il existe un type d'input qui permet d'écrire du texte sur plusieurs lignes
<textarea>Exemple</textarea>
Résultat:
Exemple
Bien qu'il soit conseillé de changer sa taille en CSS, on peut modi er sa taille en lui précisant
son nom de colonnes et de lignes.
<textarea cols="30" rows="4">Exemple</textarea>
Résultat:
Exemple
La liste déroulante
Lorsque l'on propose à l'utilisateur de sélectionner une valueur stricte, on lui propose une
liste déroulante
<select>
<option>OPTION 1</option>
<option>OPTION 2</option>
</select>
Résultat:
OPTION 1
 Input à connaître
<input type="text" />
<input type="checkbox" />
<input type="radio" />
<textarea></textarea>
<select></select>
Les formulaires HTML

L'utilité d'un formulaire HTML
Le formulaire HTML est un ensemble d'éléments que l'utilisateur soumet au serveur. Ces
éléments sont essentiellement les inputs (voir le chapitre précédent). Cela permet une
communication entre l'utilisateur et le site web.
La balise <form>
Les formulaires sont encadrés par les balises <form> et possèdent les attributs suivants:
 METHOD, indique le type d'envoi des données. Soit en POST ( données envoyées via le corps
de la requête ) ou en GET qui envoie les données via l'URL.
 ACTION indique la localisation du script. Cela peut être un script CGI ou directement une
adresse mail, exemple : mailto:exemple@exemple.com
Exemple:
<form method="POST" action="/page-html-formulaire">

Nom <input type="text" name="nom" />
Prénom <input type="text" name="prenom" />
<input type="submit" value="Valider" />
</form>
Résultat:
Nom Prénom Valider
Si vous avez intégré Bootstrap vous pouvez a cher le formulaire ainsi:

<input type="text" name="nom" placeholder="Nom" />
<input type="text" name="prenom" placeholder="Prenom" />
<input type="submit" class="btn" value="Valider" />
</form>
Nom Prenom Valider

Vous pouvez styliser le formulaire HTML:

<fieldset>
<legend>Inscription</legend>
<input type="text" name="nom" placeholder="Nom" />
<br />
<input type="text" name="prenom" placeholder="Prenom" />
<br />
<input type="submit" class="btn btn-primary" value="Valider" />
</fieldset>
</form>
Inscription
Nom
Prénom
Valider
HTML les caractères spéciaux

Rendu Code HTML Description
" " Guillemet double
« « Guillemet français ouvrant

» » Guillement français fermant
‹ &lsaquo; Guillement simple français ouvrant
› &rsaquo; Guillement simple français fermant
“ “ Guillement double anglais ouvrant
” ” Guillement double anglais fermant
„ &bdquo; Guillement bas double fermant anglais
' ' Guillement simple droit
‘ ‘ Guillement simple anglais ouvrant
’ ’ Guillement simple anglais fermant
‚ &sbquo; Guillement bas simple anglais
… … Point de suspensions
¡ ¡ Point d'exclamation inversé
¿ ¿ Point d'interrogation inversé
¨ ¨ Tréma
´ ´ Accent aigu
ˆ &circ; Accent Circon exe
˜ &tilde; Tilde
¸ ¸ Cédille
· · Pint médian
• • Gros point
¯ ¯ Macron
‾ &oline; Tiret en chef
– – Tiret demi-cadratin
— — Tiret cadratin
¦ ¦ Barre verticale scindée en deux
† &dagger; Obèle / Croix mort
‡ &Dagger; Double obèle

§ § Section
¶ ¶ Paragraphe
© © Copyright
® ® Marque déposée
™ ™ Marque comerciale
& & Esperluette
◊ &loz; Losange
♠ &spades; Pique
♣ &clubs; Trè e
♥ &hearts; Coeur
♦ &diams; Carreau
← ← Flèche vers la gauche
→ → Flèche vers la droite
↑ ↑ Flèche vers le haut
↓ ↓ Flèche vers le bas
↔ ↔ Double èche
æ æ Le e dans l'a
Æ Æ Le e dans l'a capitale
ç ç le c cédille
Ç Ç le c cédille capitale
œ &oelig; le e dans l'o
Œ &OElig; le e dans l'o capitale
€ € Sybole de la monnaie euro
α α alpha
Α Α Alpha
β β beta
Β Β Beta
γ γ gamma
Γ Γ Gamma
δ δ delta
Δ Δ Delta
ε ε epsilon
Ε Ε Epsilon
ζ ζ zeta
Ζ Ζ Zeta
η η eta
Η Η Eta
θ θ theta
Θ Θ Theta
ι ι iota
Ι Ι Iota
κ κ kappa
Κ Κ Kappa
λ λ lambda
Λ Λ Lambda
μ μ mu
Μ Μ Mu
ν ν nu
Ν Ν Nu
ξ ξ xi
Ξ Ξ Xi
ο ο omicron
Ο Ο Omicron
π π pi
Π Π Pi
ρ ρ rho
Ρ Ρ Rho
σ σ sigma
ς &sigmaf; sigma nal
Σ Σ Sigma
τ τ tau
Τ Τ Tau
υ υ upsilon
Υ Υ Upsilon
φ φ phi
Φ Φ Phi
χ χ chi
Χ Χ Chi
ψ ψ psi
Ψ Ψ Psi
ω ω omega
Ω Ω Omega
° ° Degré
µ µ Mu
< < Inférieur
> > Supérieur
≤ ≤ Inférieur ou égal
≥ ≥ Supérieur ou égal
≈ ≈ environ égal
≠ ≠ Di érent
≡ &equiv; Equivalent
± ± Plus ou moins
− − moins
× × multiplication
÷ ÷ division
⁄ &frasl; fraction
‰ &permil; pour mille
¼ ¼ 1 quart
½ ½ 1 demi
¾ ¾ 3 quarts
¹ ¹ Exposant 1
² ² Exposant 2
³ ³ Exposant 3
ƒ &fnof; Fonction
′ ′ Prime, minutes, dérivée
″ ″ Double prime, secondes, dérivée

seconde
∂ ∂ Dérivée partielle
∏ ∏ Produit n-aire
∑ ∑ Somme
√ √ racone carrée
∞ &in n; In ni
¬ ¬ Crochet de négation
∩ ∩ Intersection
∫ ∫ Intégrale
Les sélecteurs CSS

L'association HTML / CSS se fait grâce aux sélecteurs.
L'association par balise

Je peux donner un style à toutes les balises HTML. La syntaxe est la suivante:
<style>
span
{
color:red;
}
</style>
Désormais toutes les balises <span> de la page auront un texte rouge.
<span>Yes!</span>
Résultat:
Yes!
L'association par id
Pour donner un identi ant unique à un élément, je lui donne comme attribut un "id".
<div id="xxx">BONJOUR</div>
Je peux maintenant contrôler l'élément "à distance". Exemple:

<style>
#xxx
{
color:red;
background-color:blue;
font-weight:bold;
width:100px;
}
</style>
Résultat:
BONJOUR
On remarque que pour une association unique, CSS utilise le caractère #. La syntaxe CSS est
di érente de HTML, les données associées à l'identi ant sont encadrées par des accolades {}.
Dans ces accolades on peut y implémenter des propriétés. Dans cet exemple on peut voir
"color", "background-color", "font-weight" et "width". Et pour chaque propriété j'ai donné une
valeur. Ainsi pour la propriété "color", j'ai dé ni que la couleur est "red" donc rouge. La
propriété "color" change la couleur du texte.
Les associations par class

La logique des class est la même que l'id, la di érence étant que l'id est unique, ce qui n'est
pas le cas de la class.
Exemple:
<span class="menu">XXX</span>
<div class="menu">YYY</div>
<style>
.menu
{
background-color:violet;
}
</style>
XXX
YYY
Il est possible d'associer plusieurs class sur un même élément en les séparant d'un espace:
<span class="menu menu2"></span>
Combinaison d'association
Il est possible de combiner les associations entre elles. Ainsi si je veux transformer le texte
des balises <a> du <footer> en leur donnant une couleur bleu, je peux le faire en une ligne
comme ceci:
Eléments imbriqués
<style>
footer a
{
color:blue;
}
</style>
On remarque un espace entre la balise footer et a. Les liens de votre <footer> seront
désormais bleu.
Groupe d'éléments
<style>
a,b,span,footer
{
font-weight:bold;
}
</style>
Les balises <a>, <b>,<span> et <footer> auront désormais le texte en gras.
Sélecteur père-fils direct de premier dégré
<style>
body > a
{
font-weight:bold;
}
</style>
Ce code permet de donner un texte gras aux liens qui sont directement dans le <body> ; les
liens imbriqués dans d'autres éléments ne seront pas concernés.
Sélecteur consécutif
<style>
td + td
{
background-color:orange;
}
</style>
Résultat:
0 1 2 3
0 1 2 3
Selecteur avec attribut

On peut chercher les éléments qui ont un attribut renseigné :
<style>
input[disabled]
{
color:orange;
}
</style>
<input disabled type="text" value="0" />

<input type="text" value="1" />
Résultat:
0 1
Dans cet exemple on peut voir que l'input qui a été mis en "disabled" a pris la couleur orange.
Selecteur avec valeur d'attribut

On peut chercher les éléments qui ont une valeur d'attribut renseignée :
<style>
input[value="123"]
{
background-color:orange;
}
</style>

Résultat:
123
456
789
Sélecteur avec une recherche avancée

On peut faire un sélection d'éléments via la recherche "éléments dont la valeur de tel attribut
contient telle valeur".
Exemple:
<style>
input[value~="olivier"]
{
color:green;
font-style:italic;
border-color:red;
}
</style>
<input type="text" value="olivier engel" />

<input type="text" value="engel olivier" />
<input type="text" value="olivierengel" />
<input type="text" value="batman" />
olivier engel
engel olivier
olivierengel
batman
Eléments dont l'attribut commence par "XXX"
<style>
input[value^="olivier"]
{
color:green;
}
</style>
olivier engel
engel olivier
olivierengel
batman
Eléments dont l'attribut fini par "XXX"
<style>
input[value$="olivier"]
{
color:green;
}
</style>
olivier engel
engel olivier
olivierengel
batman
Elément qui contient la sous chaine "XXX"
<style>
input[value*="olivier"]
{
color:green;
}
</style>
olivier engel est batman

engel est batman
olivierengel
batman
L'héritage en CSS?
CSS a été conçu pour que les enfants d'un élément héritent des propriétés de leurs parents.
Ainsi si je dé nis une couleur de texte dans le <body>, les éléments enfants auront la même
couleur.
Exemple:
<style>
body
{
color:red;
}
</style>
<h1>Titre</h1>
Résultat:
Titre
Ecrasement des propriétés
CSS permet de redé nir les propriétés d'un élément plusieurs fois, le dernier enregistrement
étant celui qui sera utilisé.
<style>
body
{
color:red;
}
h1
{
color:blue;
}
#main h1
{
color:green;
}
#main h1
{
color:orange;
}
</style>
Dans cet exemple la balise <h1> qui se trouve dans l'élement #main aura comme couleur
d'abord rouge puis bleu puis vert et en n orange. A la n de la lecture du chier le navigateur
retiendra la dernière valeur, donc la couleur orange sera utilisée.
L'intéret de cette information est de savoir qu'il faut dabord importer les CSS génériques, puis
des modules exterieurs et en n des CSS personnalisés à votre site. L'ordre jouant un rôle
important, vous devez y penser dès la création de votre site.
Les propriétés CSS

Propriété Valeurs + exemple Description
background - Arrière plan

background:#ddd url(/image/bg.png);
background- xed Mode de dé lement de l'image de

attachment background-attachment: xed; l'arrière plan
background- couleur Couleur d'arrière plan de l'élément

couleur background-color:red;
background- url URl de l'image de l'arrière plan

image background-image:url(image/bg.png);
background- left, center, right, %, px, em Dé nit la position de l'image de fond

position-x background-position-x:60%; horizontalement
background- left, center, right, %, px, em Dé nit la position de l'image de fond

position-y background-position-y:15px; verticalement
background- [ top, center, bottom, %, px, em ] Dé nit la position de l'image de fond

position [ left, center, right, %, px, em ] verticalement
background-position:60% 15px;
background- no-repeat, repeat, repeat-x, repeat-y Mode de répétition de l'image du

repeat background-repeat:repeat-x; fond
border, [Epaisseur] A chage de la bordure: épaisseur,
border-bottom, [solid, dashed, dotted, double, groove, type de bordure et couleur
border-left, ridge, inset, outset]
border-right, [couleur]
border-top border:1px solid black;
border-collapse collapse, separate Indique si les bordures de cellules

border-collapse: separate; adjacentes d'un tableau sont
fusionnés
border-color couleur Détermine la couleur de la bordure

border-color: red; d'un élément
border-spacing largeur Détermine l'espacement entre les

border-spacing: 2px; cellules d'un tableau.
Pour cela il faut que la propriété
border-collapse soit dé nie comme
"separate"
border-style solid, dashed, dotted, double, groove, Dé nit le forme de bordure d'un
ridge, inset, outset élément
border-spacing: 2px;
caption-side top, bottom, left, right Détermine le placement du titre d'un

caption-side: right; tableau.
Remplace la propriété align de
l'élément caption
clear both, left, none ,right Détermine si l'élément bloc peut être
clear:both; a ché dans la même bande
horizontale qu'un élément ottant (
voir oat ) voisin.
color couleur Détermine la couleur du texte

color:blue;
content chaîne de caractère, uri, attr, open- Dé nit le contenu ou la source du

quote, close-quote, no-open-quote, contenu à a cher avant ou après
no-close-quote, inherit l'élément.
.title:before {content:"-"} Il faut obligatoirement indiquer la
label:after {content:" : ";} pseudo-class before ou after
label:after {content:" : "; color:blue; }
direction ltr, rtl Détermine le sens d'a chage des

direction:rtl; éléments
display block, inline, inline-block, inline-table, Determine le type d'a chage d'un
list-item, marker, run-in, compact, élément
table, table-cell
direction:rtl;
empty-cells show, hide Determine si une cellule vide a che

empt-cells:hide; des bordures et un espace vide ou
non.
oat left, right, none Permet d'accoler un élément à droite

oat:left; ou à gauche de son parent.
font-family - Détermine la police d'écriture d'un

font-family:verdana; élément
font-size Taille absolue, taille relative, longueur, Détermine la police d'écriture d'un
pourcentage élément
font-size:14px;
font-size:x-small;
font-size:120%;
font-style normal, italic, oblique Détermine si la police doit être

font-style:italic; a chée en normal, italique ou
oblique
font-variant normal, small-caps A che les caractères d'écriture en

font-variant:small-caps capitales.
font-weight bold, bolder, lighter, normal, 100, 200, Dé nit l'épaisseur de la police
300, 400, 500, 600, 700, 800, 900 d'écriture.
font-weight:bolder; 100 est la valeur la plus ne et la plus
large est 900.
height auto, %, longeur Détermine la hauteur d'un élément.

height:250px; La valeur par défaut auto adapte la
hateur à son contenu.
letter-spacing normal, longeur Détermine l'espace entre deux lettres.

letter-spacing:1.5em; On peut indiquer une valeur négative.
line-height normal, longeur, % Détermine la hauteur de la ligne de

line-height:1.3em; texte.
list-style-type Pour la balise ul : Détermine le type de puce à a cher
circle, disc, square pour une liste.
Pour la balise ol :
decimal, decimal-leading-zero, lower-
roman, upper-roman, lower-greek,
lower-alpha, lower-latin, upper-alpha,
upper-latin, hebrew, armenian,
georgian, cjk-ideographic, hiragana,
katakana, hiragana-iroha, katakana-
iroha.
ol { list-style-type: lower-roman; }
ul { list-style-type: square; }
li { list-style-type: lower-greek; }
line-style-position inside, outside Détermine si la puce d'une liste doit

list-style-position: outside; être à l'intérieur ou l'extérieur de la
liste.
line-style-image none, url Détermine l'image qui remplacera la

list-style-image: url(images/puce.png); puce d'un élément d'une liste.
margin auto, longueur Détermine les marges d'un élément.

margin:10px; On peut lui donner jusqu'à 4
margin:10px 20px; arguments. Dans le cas d'un
margin:10px 20px 10px 20px; argument unique la marge se fera sur
les 4 cotés. Dans le cas de deux
arguments, le premier concerne le
haut et le bas et le deuxieme la droite
et la gauche. Dans le cas de 4
haut, le deuxième la droite, le
troisième le bas et le dernier la
gauche.
margin-top, auto, longueur, % Détermine la marge d'une partie d'un

margin-right, margin-top:13px; élément
margin-bottom, margin-top:40%;
margin-left
max-height longueur, %, none Détermine la hauteur maximale d'un

max-height:400px; élément
max-width longueur, %, none Détermine la largeur maximale d'un

max-width:2300px; élément
min-height longueur, %, none Détermine la hauteur minimale d'un

min-height:100px; élément
min-width longueur, %, none Détermine la largeur minimale d'un
min-width:50%; élément
opacity valeur de 0 à 1 La transparence d'un élément est

opacity:0.5; nulle quand l'opacité est à 1. Plus
cette dernière est faible plus l'élément
est transparent
outline [ couleur ] Cette propriété permet de dé nir en

[ style ] une seule fois plusieurs paramètres
[ épaisseur] de la notion de outline. Le premier
outline: red dashed 3px; argument indique la couleur de
l'outine, le deuxième le style et le
troisème l'épaisseur.
outline-color couleur Détermine la couleur de l'outline d'un

outline-color: red; élément
outline-style solid, dashed, dotted, double, groove, Determine le style de l'outline d'un
ridge, inset, outset élément
outline-style: dashed;
outline-width Epaisseur Détermine l'épaisseur de l'outline

outline-width: 3px; d'un élement
over ow auto, hidden, scroll, visible Détermine la gestion du

over ow:scroll; débordement d'un contenu. Doit-il
être caché, scrollable ou visible.
over ow-x auto, hidden, scroll, visible Détermine la gestion du

over ow-x:scroll; débordement d'un contenu
horizontalement. Doit-il être caché,
scrollable ou visible.
over ow-y auto, hidden, scroll, visible Détermine la gestion du

over ow-y:hidden; débordement d'un contenu
verticalement. Doit-il être caché,
scrollable ou visible.
padding auto, longueur Détermine les marges intérieures
padding:10px; d'un élément. On peut lui donner
padding:10px 20px; jusqu'à 4 arguments. Dans le cas d'un
padding:10px 20px 10px 20px; argument unique la marge se fera sur
les 4 cotés. Dans le cas de deux
haut et le bas et le deuxieme la droite
et la gauche. Dans le cas de 4
haut, le deuxième la droite, le
troisième le bas et le dernier la
gauche.
padding-top, auto, longueur, % Détermine la marge intérieure d'une

padding-right, padding-top:13px; partie d'un élément
padding-bottom, padding-top:40%;
padding-left
position static, absolute, xed, relative Détermine le type de position d'un

position: xed; élément.
text-align left, center, justify, right Détermine le type d'alignement du

text-align:justify; texte à l'intérieure d'un élément
text-decoration line-through, overline, underline Permet de souligner, barré ou

text-decoration:underline; surligné du texte.
text-indent longueur, % Permet d'ajouter une identation à un

text-indent:10px; texte
white-space normal, nowrap, pre Détermine la façon dont le navigateur

white-space:nowrap; doit a cher l'espace blanc et retour
chariot présent dans le code HTML.
Par défaut le navigateur ignore les
espaces. Si la valeur pre est dé ni,
celui-ci sera interpréter comme une
balise <pre>. La valeur nowrap ignore
les sauts de ligne mais lit les saut de
ligne volontaire : <br />
word-spacing normal, longueur, % Dé nit l'espace entre les mots d'un

word-spacing:10px; élément
word-wrap normal, break-word Dé nit la césure d'un mot lorsque

word-wrap:break-word; celui ci depasse son cadre
z-index auto, nombre entier Lorsque des éléments se
z-index:999; surperposent, z-index permet de
dé nir un ordre d'a chage , celui qui
a le z-index le plus élevé surpassera
les autres.
Les couleurs en CSS?

Il existe trois façon de générer une couleur en CSS.
background-color:red;
background-color:#ff0000;
background-color:RGB( 255, 0, 0 );
Comme l'exemple l'indique, on peut choisir un nom de couleur en anglais. Exemple: red,
green, blue, etc. On peut également donner à la propriété un code hexadécimale qui est
composé de 3 valeurs:
Rouge - Vert - Bleu.
En hexadécimal, FF représente la valeur la plus haute et 00 la plus faible. Ecrire FF 00 00

signi e que la valeur souhaité est au rouge maximum et au minimum pour vert et bleu. On
obtient donc un rouge pur.
On retrouve la même logique pour le code décimal RGB, où le maximum est 255.
Générateur couleur hexadécimale CSS

Color:
#123456
La police d'écriture en CSS

Il y a deux manières d'implémenter une police d'écriture ( ou font ) sur votre site web:
soit vous l'hébergez sur votre site,
soit vous l'importez d'ailleurs.
 Importer une police depuis Google Fonts

Google Fonts propose une longue liste de polices d'écriture : Lien 
(http://www.google.com/fonts)
Exemple d'utilisation:
Insérer le code ci-dessous dans votre balise <head>
<link href="http://fonts.googleapis.com/css?family=Fenix" rel="stylesheet" type="text/css">
puis intégrez le code suivant dans votre css.
<style>
body
{
font-family: "Fenix", serif;
}
</style>
Et voila, sans autre intervention, votre police d'écriture a changé comme par magie.
 Enregistrer une police d'écriture sur votre site

Pour importer la police, vous devez récupérer le chier de la police - généralement un chier
qui a une extension .ttf ou .otf - et l'enregistrer dans le dossier de votre choix.
Il faut ensuite indiquer la source au CSS:
<style>
@font-face
{
font-family: "ma_police";
src: url("folder/ma_police.ttf");
}
</div>
Puis dé nir quel élément est concernée par cette police d'écriture
<style>
body
{
font-family: "ma_police", serif;
}
</style>
Les marges CSS

Il est essentiel de comprendre comment fonctionne les marges d'un élément CSS. Le margin
représente les marges extérieures et le padding les marges intérieure.
margin
border
padding
ELEMENT

Position CSS
En CSS les éléments qui ont la propriété display:inline; sont a chés les uns à la suite des
autres alors que les éléments ayant la propriété display:block; amène un retour à la line après
leur a chage. Par défaut les éléments <a>, <b>, <i>, <span>, etc. sont des éléments inline
contrairement à <div> ou <p>, <form> etc.
Relative Block
Les éléments de type Block occupe tout l'espace de la ligne et impose un retour à la ligne
pour l'élément qui suit.
<style>
.div1
{
background-color:yellow;
}
.div2
{
background-color:gray;
}
</style>
<div class="div1">DIV 1</div>

<div class="div2">DIV 2</div>
Résultat:
DIV 1
DIV 2
Relative Inline
Les éléments de type Inline quand à eux se suivent les uns les autres. L'élément span est
d'ailleurs complètement invisible par défaut.
<style>
.span1
{
}
.span2
{
background-color:gray;
}
</style>
<div class="span1">SPAN 1</div>

<div class="span2">SPAN 2</div>
Résultat:
SPAN 1 SPAN 2
Absolute
Un élément qui a la propriété position:absolute; sera placé dans son conteneur ( qui a une
position:relative; ) aux coordonnées qu'on lui dé nit.
Exemple:
<style>
#container
{
position:relative;
border:1px dashed #ccc;
}
#absolute_div
{
position:absolute;
top:60px;
left:30px;
height:30px;
width:100px;
}
</style>
<div class="container">
<div class="absolute_div"></div>
</div>
Résultat:
absolute
Fixed
Un élément qui a la propriété position: xed; sera toujours visible sur l'écran à condition que
les coordonnées qu'on lui donne soit sur l'écran. Le menu en haut de page de ce site a cette
propriété. Lorsque l'on scroll celui-ci reste au top de la fenêtre.
Les éléments flottants, Float CSS

Css permet une gestion d'éléments ottants. Un élément ottant est un élément qui sort du
ux normal et est placé soit le plus à gauche soit le plus à droite possible.
Exemple:
<style>
#orange{ float:right; }
</style>
Texte Texte Texte TexteElement

Texte Texte Texte Texte ottant
Texte Texte Texte Texte
Texte Texte Texte Texte Texte Texte
<style>
#orange{ float:left; }
</style>
Element Texte Texte Texte Texte

ottant Texte Texte Texte Texte
Texte Texte Texte Texte
Il est possible de faire suivre des éléments ottants:
<style>
#orange{ float:left; }
#green{ float:left; }
#violet{ float:left; }
</style>
Element Element Element Texte

ottant ottant ottant Texte
1 2 3 Texte
Texte Texte Texte
Les pseudo class CSS

Une pseudo-class en CSS est une notion qu'on ajoute à un sélecteur qui indique quelle
propriété est changé lors d'un évènement sur l'élement.
Syntaxe:
<style>
selecteur:pseudo-class
{
propriete:valeur;
}
</style>
Exemple:
<style>
#div1:hover
{
}
</style>
<div id="div1">DIV 1</div>
Résultat:
DIV 1
Au survol de la souris, on remarque que le fond de l'élément change de couleur.
Liste des pseudo class CSS

:active
:checked
:disabled
:empty
:enabled
: rst
: rst-child
: rst-of-type
:focus
:hover
:last-child
:last-of-type
:visited
Le responsive design
En CSS le resposive design est le fait de créer un design adapté au support. Il ne s'agit pas
seulement d'esthétisme mais aussi o rir une meilleur expérience utilisateur à l'internaute en
augmentant l'ergonomie de votre site web.
La methode la plus basique de responsive design est d'a cher ou de cacher un élément en
fonction de la largeur et de la hauteur du support. Il est donc possible de créer deux menus
et a cher le petit menu sur les écrans de faible résolution. Le problème de cette pratique
c'est qu'on créer deux fois la même ressource. Il est donc plus judicieux de changer les
propriétés d'un élément en fonction de la taille de l'écran.
Exemple:
<style>
#menu{ width:350px; }
@media (min-width: 500px) {
}
@media (min-width: 1000px) {
}
</style>
Dans cet exemple, notre élément #menu aura par défaut une taille de 350 pixels. Si le
support est supérieur à 500 pixels en largeur alors cet élément passera à 500px de largeur et
si le support est supérieur à 1000 pixels de largeur le menu fera 800 pixels de largeur. Il est
possible de tester son responsive design en changeant la taille de son navigateur mais un
support tablette ou smartphone peut parfois être plus parlant.
Résolution iphone

Astuces CSS
Une grille uniforme de 1 pixel de large
<style>
.ul li
{
width:33%;
height:50px;
float:left;
border:1px solid #ddd;
}
</style>
1 2 3
4 5 6
7 8 9
On remarque que pour la grille ci-dessus, les bords au centre de la grille font 2px de largeur ;
en e et comme une case fait 1px de largeur, 2 cases qui se touchent donneront l'impression
d'une bordure de 2px. Pour éviter cette bordure de 2px, vous devez ajouter une ligne de code
: margin: 0 -1px -1px 0;
Exemple:
<style>
.ul li
{
width:33%;
height:50px;
float:left;
border:1px solid #ddd;
margin: 0 -1px -1px 0;
}
</style>
1 2 3
4 5 6
7 8 9
Centrer un élément de type block

Pour centrer un élément block vous pouvez utiliser l'attribut "margin".
Exemple:
<style>
#main{
margin:10px auto;
}
</style>
Cet exemple ajoute une marge de 10px en haut et en bas de l'élément et centre
horizontalement l'élément.
Centrer un élément verticalement

S'il est facile de centrer un élément verticalement dans un tableau, il n'en est pas de même
ailleurs. Pour centrer un élément verticalement vous pouvez utiliserla propriété line-height
qui aura la même hauteur que son conteneur.
Exemple:
<style>
ul li{
line-height:20px;
height:20px;
}
</style>
<ul>
<li>Lien 1</li>
...
</ul>
Sticky Footer
Le footer est toujours compliqué à a cher. Soit on aimerait le mettre en xed, mais il
occuperait tout le temps un espace trop important, soit en absolute, mais si la page comporte
un scrolling c'est imposible, et si on le met en relative, on aura un espace blanc en bas de
page pour les écrans les plus grand à moins d'imposer une hauteur minimum pour la page,
mais ce n'est pas esthétique non plus.
Il existe cependant une astuce CSS qui permet d'avoir un footer un bas de page proprement:
<div id="wrap">
Mon contenu
</div>
<footer>
Mon footer
</footer>
html, body
{
height: 100%;
}
#wrap
{
min-height: 100%;
/* égal à la hauteur du footer */
margin-bottom: -200px;
}
#wrap:after
{
display: block;
content: "";
}
footer, #wrap:after
{
height: 200px;
}
Créer un script PHP

Tout d'abord, installez PHP ( ou WampServer ). Vous pouvez vous assurer que votre serveur
est capable de lire en créant un chier à l'extension .php
Pour indiquer au chier qu'il s'agit d'un script PHP, il faut encadrer le code PHP avec les
balises
<?php
// Votre code
?>
Exemple:
<?php
echo "Votre texte";
?>
Résultat:
Votre texte
A quoi sert un script?

Ecrire un script - programmer - permet de réaliser un rendu complexe en quelques lignes de
code alors qu'il faudrait des heures de travail en statique.
Exemple d'utilité d'écrire un script:

Je veux a cher sur ma page 15 inputs:

La méthode statique serait de copier coller la ligne de code HTML autant de fois qu'on a
besoin d'input. La méthode dynamique serait de créer un script qui indique le nombre d'input
que l'on désire a cher.
<?php
for( $i = 1 ; $i <= 15 ; $i++ ){
echo '<input type="text" value="'. $i .'" />';
}
?>
On remarque que même si le code semble plus complexe, on utilise moins de lignes de code.
Imaginez maintenant qu'on devait a cher 1000 lignes, le script ne changerait que la valeur 15
en 1000 alors que la méthode statique obligerait à modi er 1000 lignes de code HTML.
PHP les commentaires

Il est très important de commenter son travail, que ce soit en HTML, en CSS ou en PHP. Les
commentaires sont des indications qui résument des fonctionnalités, cela permet de
comprendre un code plus rapidement.
Il exite 3 manières de commenter un texte en PHP.
// Commentaire ici
# Commentaire ici
/*
Commentaire ici
*/
Parfois un commentaire semble inutile sur une fonction qui s'appelle "build_menu", mais il
n'y a jamais trop de commentaires, vous devez comprendre ce que fait un script exactement
juste en lisant les commentaires.
PHP les variables

En programmation une variable est une sorte de boîte dans laquelle on met à peu près ce
que l'on veut. Une variable est composée du symbole dollar ( $ ) suivi d'un nom. Le nom de la
variable doit commencer par une lettre puis peut être suivi par d'autres lettres ou chi res ou
des caractères spéciaux comme l'underscore (tiret-bas) et le tiret. Les espaces sont interdits.
Pour écrire le nom d'une variable ayant besoin d'un espace pour sa compréhension, préféré
donc la syntaxe $customer_name; Il est préférable de ne pas mettre d'accents pour le nom
d'une variable, il est d'ailleurs plus intéressant de nommer toutes les variables en anglais.
Cette langue a l'avantage d'être la langue de l'informatique, mais permet d'exprimer une idée
en un mot et un mot sans accent et rendra votre code international.
Attribuer une valeur à une variable
La valeur d'une variable se dé nit comme ceci:
<?php
$name = 'olivier';
?>
Ma variable $name a pour valeur "olivier".
Ecrasement de valeur
Je peux écraser la valeur quand je veux.
Exemple:
<?php
$name = 'olivier';
$name = 'jean';
?>
Ma variable $name a pour valeur "jean".
Concaténation
Je peux ajouter du texte à une valeur déjà existante, on parle de concaténation. Pour cela
j'ajoute un point entre les deux items.
Exemple:
<?php
$name = 'olivier';
$name = $name . ' engel ';
?>
Ma variable $name a désormais la valeur "olivier engel"
On peut écrire le code également sous cette forme pour concaténer des données:
<?php
$name = 'olivier';
$name.= ' engel ';
?>
En PHP, les variables ne sont pas typées. C'est-à-dire qu'une variable peut accepter n'importe
quel type de valeur à sa déclaration. On peut donc en théorie additionner des chaînes de
caractères avec des chi res numériques, ce qui n'a pas vraiment de sens.
Opérateurs mathématique
On peut additionner, soustraire, multiplier ou diviser deux valeurs:
<?php
$value1 = 500;
$value2 = 100;
$value3 = $value1 + $value2;
$value4 = $value1 - $value2;
$value5 = $value1 * $value2;
$value6 = $value1 / $value2;
?>
PHP les fonctions

Une fonction est un processus qui transforme un item.
Dans cet exemple, qui est une image pour comprendre le fonctionnement d'une fonction,
l'orange est une variable, le mixeur une fonction et le jus d'orange le résultat de la fonction.
On remarque que dans notre exemple on a choisi une orange, mais on aurait pu prendre un
autre fruit. Le mixeur quant à lui ne change pas, il mixe sans se poser de question. Son rôle
est de mixer et on aura toujours du jus, à condition de lui donner un item adapté ( un fruit ou
un légume ). Donner un mauvais item à une fonction provoquera les mêmes dégâts que
mettre un objet non adapté dans ce mixeur.
On n'est pas obligé de comprendre comment fonctionne un mixeur pour s'en servir. Savoir
appuyer sur le bouton "On" est le seul besoin. En programmation c'est à peu près la meme
logique, on peut appeler une fonction pour transformer notre variable, on ne comprend pas
le mécanisme de la fonction, mais on sait qu'elle nous la transformera en ce que nous
désirons.
Pour récupérer la valeur de transformation d'une valeur la syntaxe est la suivante:
<?php
$resultat = ma_fonction( $value1 );
?>
Et si je veux écrire une fonction :
<?php
function ma_fonction( $value ){
return $value + 1;
}
?>
PHP permet d'appeler une fonction qui n'est pas encore déclarée. Dans mon exemple
j'appelle la fonction "ma_fonction" alors que je la déclare après. J'aurais pu appeler ma
fonction avant ou après sa création.
La fonction que j'ai crée ajoute "+1" à la valeur qu'on lui envoie.
La fonction indépendante
Une fonction peut être aussi appelée sans paramètre.
<?php
destroy_the_world();
?>
Si la fonction est bien codée, je suis censé détruire le monde comme indiqué, sans savoir de
quoi est composé cette fonction.
Si la fonction le permet je peux rendre le passage d'argument optionnel. Ainsi si je veux

détruire qu'une région du monde je lui précise laquelle en lui passant un paramètre.
Exemple:
<?php
destroy_the_world( "Atlantide" );
?>
Dans le cas d'un paramètre non obligatoire la syntaxe est la suivante:
<?php
function destroy_the_world( $lieu = "Tout" ){
// Code confidentiel
...
}
?>
Si le lieu n'est pas reseigné, c'est comme si on lui avait passer la variable "Tout".
Plusieurs syntaxes
Pour les fonctions natives comme echo ou include, la syntaxe est di érente:
<?php
echo "test";
include "/folder/fichier.txt";
?>
PHP les tableaux

En PHP un tableau permet de réunir plusieurs valeurs dans une seule variable. Prenons
l'exemple d'une liste, je voudrais la liste de tous les employés d'une entreprise. Pour cela je
l'indique comme ceci:
$employes = array( "olivier engel", "Batman", "Harry Potter", "Hulk" );
Cette ligne de code garde en mémoire le tableau suivant:
0 Olivier ENGEL
1 Batman
2 Harry Potter
3 Hulk
PHP associe donc une valeur à un index. L'index 1 du tableau à pour valeur Batman ; et le
premier index d'un tableau est 0.
Les index
Les index sont les clés des tableaux. Si je veux le troisième employé de la liste, je dois ecrire
$employes[2], qui est Harry Potter. Je peux voir toutes les valeurs d'un tableau grâce à la
fonction var_dump
var_dump( $employes );
Je peux dé nir moi même les index, au lieu de prendre une suite numérique, je peux lui
donner la valeur que je veux si j'utilise des valeurs alphanumériques.
Exemple:
$employes = array(
"the_best" => "olivier engel",
"the_dark" => "Batman",
"the_child" => "Harry Potter",
"the_big" => "Hulk"
);
Pour trouver la valeur Batman, je devrai donc appeler la variable.
$employes["the_dark"];
Manipuler un tableau
Si je veux manipuler un tableau dont je ne connais pas les index je peux l'explorer grâce à la
fonction foreach
foreach( $employes as $key => $value ){

echo "Clé: " . $key . " Sa valeur " . $value . "<br />";
}
Pour information la fonction echo permet d'écrire les valeurs qu'on lui indique. Dans
l'exemple ci-dessus il s'agit de HTML.
Supprimer un index d'un tableau

Pour supprimer un index il faut appeler la fonction unset :
unset( $employes["the_best"] );
Ajouter un index à un tableau
$employes[] = "Spiderman";
// ou avec un index personnalisé
$employes["the_spider"] = "Spiderman";
Les fonction PHP pour manipuler les array
Lorsque vous travaillez sur des scripts un peu complexe, vous utilisez forcément des
tableaux. PHP vous simpli e la vie en vous proposant des fonctions qui vous permettent de
trier, d'inverser les données, etc. :
$a = array( 0 => "blue", 5 => "abricot", 2 => "orange", 3 => "green" );
Compter le nombre d'entrées d'un array

echo count($a);
int 4
Trier les valeurs d'un array

La fonction sort permet de trier les tableaux PHP mais on perd l'association des clés / valeurs
sort( $a );
array (size=3)
0 => string 'abricot' (length=4)
1 => string 'blue' (length=4)
2 => string 'green' (length=5)
3 => string 'orange' (length=6)
Trier les valeurs d'un array sans perdre l'association des clés
La fonction asort permet de trier les tableaux PHP sans perdre l'association des clés / valeurs
asort( $a );
array (size=4)
Trier les clés d'un array
La fonction ksort permet de trier les clés tout en gardant l'association avec les valeurs
ksort( $a );
array (size=4)
Tri descendant
Tous les tris que nous avons étudié plus haut sont des tris ascendants. Pour avoir des tris
descendants, utilisez simplement la fonction "array_reverse" qui inverse les données.
sort( $a );
$a = array_reverse($a);
array (size=4)
PHP les conditions

Une condition peut se traduire à exécuter une instruction SI telle chose remplit telle
condition.
<?php
$name = "olivier";
if( $name == "olivier" ){
echo "YES !";
}
?>
Dans l'exemple si dessus, $name est égal à olivier donc la condition est remplie le script
exécutera l'instruction echo
TRUE / FALSE
Pour que la condition soit rempli, la fonction IF execute les instructions à condition qu'on lui
donne une valeur qui vaut TRUE ( ou 1 ).
Exemple de cas true / false:
<?php
$name = "olivier";
$name2 = "batman";
if( 1 == 1 ) // Retourne true
if( 1 == 2 ) // Retourne false
if( $name == "olivier" ) // Retourne true
if( "olivier" == $name ) // Retourne true
if( $name == $name2 ) // Retourne false
?>
OU
Il existe une synatxe pour savoir si une variable est égal à une valeur OU à une autre.
Exemple:
<?php
if( $a == 1 || $a == 2 ){
// votre instruction
}
?>
Si $a est égéal à 1 OU 2, alors la condition est véri ée.
ET
Il existe une synatxe pour savoir si une variable est égal à une valeur ET à une autre.
Exemple:
<?php
if( $a < 10 && $a > 1 ){
}
?>
Si $a est inférieure à 10 ET supérieure à 1, alors la condition est véri ée.
IF ,ELSE IF, ELSE

Il est possible de combiner plusieurs véri cations de conditions:
<?php
if( $a == 1 ){
}
else if( $a > 2 && $a < 500 )
}
else{
}
?>
Si $a est égal à 1 alors les autres lignes seront ignorées. Sinon tant que les conditions ne sont
pas respectée le script cherchera une porte de sortie.
Autre syntaxe
Vous pouvez utiliser la syntaxe suivante pour ne pas à avoir à gérer les accolades:
<?php
if( $a > 1 ):
endif;
?>
Ou celle-ci:
<?php
if( $a > 1 ):
elseif( $a ==2 ):
else:
endif;
?>
A noter que le else est obligatoire dans ce genre de syntaxe, sinon une erreur d'interprétation
sera a chée.
PHP lire et écrire dans un fichier

Lecture d'un fichier avec fopen et fgets
Il existe plusieurs manières en PHP pour lire un chier. Je vous parlerai de la fonction fopen()
qui nécessite deux arguments pour fonctionner:
fopen( "url fichier", "Mode ouverture" );

Les di érents modes d'ouverture:
r Ouvre le chier en lecture seule et place le pointeur au début du chier
r+ Ouvre le chier en lecture et écriture et place le pointeur au début du chier
w Ouvre le chier en écriture seule. Si le chier existe il est écrasé (e acé), si il n'existe
pas, PHP le crée.
w+ Ouvre le chier en lecture et écriture. Si le chier existe il est écrasé (e acé), si il n'existe
pas, PHP le crée.
a Ouvre le chier en écriture seule et place le pointeur à la n du chier
a+ Ouvre le chier en lecture et écriture et place le pointeur à la n du chier
Pour lire la première ligne de texte de votre chier:
<?php
$file = fopen( "fichier.txt", "r" );
$content = fgets($file, 4096);
fclose($file);
?>
La fonction fgets() récupère les 4096 premiers caractères de la première ligne de votre chier.
Pour lire tout le chier, il est nécessaire de parcourir toutes les lignes ainsi:
<?php
$content = "";
while(!feof($fp)) {
$content .= fgets($file, 4096);
}
fclose($file);
?>
On remarque la présence de la fonction feof qui permet de véri er si on est à la n du chier.
Pour lire un nombre précis de lignes d'un chier vous pouvez faire une boucle manuelle :
<?php
$content = "";
for( $i = 0 ; $i < 10 ; $i++ )
$content .= fgets($file, 4096);
}
fclose($file);
?>
Lire un fichier avec la fonction file

Il existe une autre méthode pour lire un chier que je trouve plus simple:
<?php
$lines = file("fichier.txt");
foreach($lines as $n => $line){
echo $line . "<br />";
}
?>
Ecrire dans un fichier

Ecrire dans un chier suit la même logique que la lecture:
<?php
$file = fopen("fichier.txt", "a");
fwrite($file,"Mon texte");
fclose($file);
?>
Dans cet exemple, l'ouverture se fait avec l'argument "a", on ouvre donc le chier en écriture
et on place le curseur à la n. Si le chier n'existe, il est crée.
Lire le contenu d'un dossier
<?php
$folder = __DIR__ ;
if( is_dir( $folder ) && is_readable( $folder )) {
if( $folder_content = opendir( $folder )) {
while( $file = readdir( $folder_content )) {
if( ($file != ".") && ($file != "..") )

echo $file."<br />";
}
}
}
?>
PHP GET et POST

Un site web ne serait pas dynamique si l'utilisateur et le serveur ne pouvaient communiquer.
Pour passer des informations au serveur on passe par un formulaire. Dans ce formulaire on y
implémente des inputs. Pour apprendre à construire un formulaire, visitez la page HTML / Les
formulaires.
Un formulaire permet de donner des valeurs à des cases nommées pour que le serveur
puisse associer une valeur à un nom. Exemple d'un input avec un nom "USER_NAME", il saura
que la valeur de cet input sera le nom de l'utilisateur.
Formulaire POST
Exemple de formulaire:

</form>
Résultat:
Nom
Prénom
Valider
Dans cet exemple lorsque l'on clique sur le bouton "valider", les données du formulaire sont
envoyées au serveur. Nous avons indiqué dans les propriétés du formulaire que la méthode
d'envoi était "POST". C'est donc dans la variable superglobale $_POST que nous pourrons
récupérer les informations du formulaire coté serveur.
Pour voir le contenu du formulaire qui a été envoyé vous pouvez explorer la variable $_POST
comme ceci:
<?php
var_dump( $_POST );
?>
Vous pouvez récupérer directement la valeur d'un input attendu :
<?php
echo $_POST["prenom"];
?>
Formulaire GET
Exemple de formulaire:
<form method="GET" action="/page-html-formulaire">

</form>
Résultat:
Nom
Prénom
Valider
Pour voir le contenu du formulaire qui a été envoyé vous pouvez explorer la variable $_GET
comme ceci:
<?php
var_dump( $_GET );
?>
Vous pouvez récupérer directement la valeur d'un input attendu :
<?php
echo $_GET["prenom"];
?>
GET, envoyer des informations via l'url

Il est possible en PHP d'envoyer des informations via l'url.
Exemple:
http://www.creersonsiteweb.net?nom=olivier
Pour récupérer la valeur de la variable "nom" :
<?php
echo $_GET["nom"];
?>
Il est possible de passer plusieurs variables:
http://www.creersonsiteweb.net?nom=olivier&lieu=Strasbourg
<?php
echo $_GET["nom"];
echo $_GET["lieu"];
?>
PHP les cookies

Un cookie est un chier texte d'une taille limitée ( 65ko ) qu'on enregistre sur le disque dur du
visiteur. Les cookies permettent de garder en mémoire des informations sur l'utilisateur pour
les récupérer lors d'une prochaine visite ( ou d'un changement de page ).
Les cookies font souvent peur aux utilisateurs, alors que ce ne sont que de simples chiers
texte qui retiennent des informations sans danger, comme votre nom ou les pages que vous
avez visités.
Ecrire un cookie
Syntaxe:
<?php
setcookie( nom du cookie, valeur, expire );
?>
Le premier paramètre est donc le nom du cookie. Vous pouvez lui donner le nom que vous
voulez. Puis une valeur en deuxième paramètre et sa date d'expiration en format timestamp
en troisième paramètre.
si vous voulez que votre cookie soit valable 1 semaine:
<?php
$expire = time() + 60 * 60 * 24 * 7;
setcookie( "nom", "olivier", $expire );
?>
La valeur expire correspond à (60 sec * 60 min * 24 heures * 7 jours ).

Lire un cookie
Pour lire le cookie que vous avez enregistré:
<?php
echo $_COOKIE["nom"];
?>
Voir les cookies d'un site

Si vous véri ez la présence de cookies dans votre navigateur, prenons l'exemple de Google
Chrome. Appuyez sur la touche F12 de votre clavier. Une petite fenêtre s'ouvrira en bas de
page. Choisissez l'onglet "Resources" puis cliquez sur Cookies. Vous devriez voir les cookies
du site actif.
Exemple:

Les sessions PHP
Les sessions, tout comme les cookies, permettent de garder des informations sur le visiteur. A
la di érence que les informations ne sont pas stockées sur la machine de l'utilisateur mais
sur le serveur. Les sessions sont souvent utilisées pour stocker des informations après que
l'utilisateur se soit identi é. Cela permet notamment de ne plus chercher l'information.
Par exemple si on a besoin de calculer une information, on pourra la stocker dans une
varaible session pour éviter de la reclaculer à chaque chargement de page. La force de la
session est de ne pas perdre une information alors que l'utilisateur a changé de page.
Enregistrement d'une session
<?php
$_SESSION["user_id"] = "15";
?>
Lire une session

<?php
echo $_SESSION["user_id"];
?>
PHP syntaxe alternative

Il existe des syntaxes alternatives en PHP qui permettent au programmeur d'être plus
e cace.
IF
L'instruction if, qui est l'une des plus utilisées en programmation possède plusieurs syntaxes.
Lorsque l'on souhaite exécuter une seule instruction, on peut ne pas mettre d'accolade:
<?php
$a = 10;
if( $a > 5 )
echo $a . " est plus grand que 5 ";
?>
Au lieu de :
<?php
$a = 10;
if( $a > 5 ){
}
?>
Remplacer les accolades

Il est possible de remplacer les accolades pour les instructions if, while, for, foreach et switch
par un double point.
Exemple if:
<?php
$a = 10;
if( $a > 5 ):
endif;
?>
Exemple while:
<?php
$i = 1;
while($i <= 10):
echo $i;
$i++;
endwhile;
?>
Exemple foreach:
<?php
foreach($array as $element):
echo 1;
endforeach;
?>
Condition
<?php
$a = 10;
echo ( $a > 5 ) "$a est plus grand que 5" : "$a est plus petit que 5";
?>
Equivaut à :
<?php
$a = 10;
if( $a > 5 ){
echo "$a est plus grand que 5";
}
else{
echo "$a est plus petit que 5";
}
?>
PHP les expression régulières

Les expression régulières ( ou regex ) sont des modèles permettant de manipuler des chaines
de caractères. Elles permettent de trouver un mot, des portions de la chaîne, une phrase ou
un type de donnée dans une chaine.
preg_match
Exemple: Je veux savoir si dans la phrase "Mon nom est olivier", mon prénom apparaît.
<?php
if(preg_match("/olivier/", "Mon nom est olivier")){
echo "OUI";
}
else{
echo "NON";
}
?>
OUI
Commence par
Je peux faire des recherches plus avancées, par exemple je veux savoir si la phrase
commence par mon nom:
<?php
if(preg_match("/ôlivier/", "Mon nom est olivier")){
echo "OUI";
}
else{
echo "NON";
}
?>
NON
Termine par
Ou alors est ce que la phrase termine par mon nom?
<?php
if(preg_match("/olivier$/", "Mon nom est olivier")){
echo "OUI";
}
else{
echo "NON";
}
?>
OUI
Les caractères spéciaux

On peut chercher en fait à peu près ce que l'on veux du moment qu'on sait traduire notre
pensée en modèle. Il exisite des caractères réservée pour exprimer une idée de recherche
évoluée.
Les alphanumeriques
Est-ce que ma chaine commence par une lettre de l'alphabet?
<?php
if(preg_match("/^[a-zA-Z]/", "abc")){
echo "OUI";
}
else{
echo "NON";
}
?>
OUI
<?php
if(preg_match("/^[a-zA-Z]/", "éabc")){
echo "OUI";
}
else{
echo "NON";
}
?>
NON
Est-ce que ma chaine commence par un chi re?
<?php
if(preg_match("/^[0-9]/", "6abc")){
echo "OUI";
}
else{
echo "NON";
}
?>
OUI
<?php
if(preg_match("/^[0-9]/", "éabc")){
echo "OUI";
}
else{
echo "NON";
}
?>
NON
Les symboles ^ $ * + ? | - [] . et {}
Symbole Description
^ Commence par
$ Termine par
* Zéro ou plusieurs
+ Un ou plusieurs
? Un ou aucun
. Représente un caractère unique
- Représente un intervalle
() Dé nit un élément composé de l'expression régulière

qu'elle contient
[] Dé nit une liste de caractères autorisés
(x|y) Chaine qui contient x ou y
x{2} Chaine qui contient 2 x
x{2,5} Chaine qui contient 2,3,4 ou 5 x
On comprend souvent beaucoup plus facilement avec des exemples:
Modèle String Réponse
/^[a-z]$/ abcdef NON
/^[a-z]*$/ abcdef OUI
/^[a-z]?$/ abcdef NON
/^[a-z]+$/ abcdef OUI
/[a-z]/ abcdef1 OUI
/[a-z]*/ abcdef1 OUI
/^[a-z]*$/ aBcdef NON
/^[a-z]*$/i aBcdef OUI
/^[a-zA-Z]*$/ aBcdef OUI
/^[a-zA-Z]*$/ aBcdef1 NON

/^[a-zA-Z0-9]*$/ aBcdef OUI
/.com/ abc.com OUI
/[.com]/ abc.com OUI
/[.moc]/ abc.com OUI
/.moc/ abc.com NON
/cool/ cool OUI
/cool/ coool NON
/c(o)l/ cool NON
/c(o)*l/ cool OUI
/c(o)?l/ cool NON
/c(o){1}l/ cool NON
/c(o){2}l/ cool OUI
/c(o){3}l/ cool NON
/c(o){0,2}l/ cool OUI
/(w){3}\.([a-z]+)\.(fr|com)/ www.google.fr OUI
/(w){3}\.([a-z]+)\.(fr|com)/ www.google.com OUI
/(w){3}\.([a-z]+)\.(fr|com)/ www.g1oogle.fr NON
/(w){3}\.([a-z]+)\.(fr|com)/ www..fr NON
/(w){3}\.([a-z]+)\.(fr|com)/ google.fr NON
/(w){3}\.([a-z]+)\.(fr|com)/ ww.google.fr NON
Exercice Expressions régulières

Exercice: Vous pouvez jouer à deviner si la condition est TRUE dans le tableau ci-dessous:
Modèle String Réponse
/^[a-z]$/ abcdef Oui Non
/^[a-z]*$/ abcdef Oui Non
/^[a-z]?$/ abcdef Oui Non

/^[a-z]+$/ abcdef Oui Non
/[a-z]/ abcdef1 Oui Non
/[a-z]*/ abcdef1 Oui Non
/^[a-z]*$/i aBcdef Oui Non
/^[a-z]*$/ aBcdef Oui Non
/^[a-zA-Z]*$/ aBcdef Oui Non
/^[a-zA-Z]*$/ aBcdef1 Oui Non
/^[a-zA-Z0-9]*$/ aBcdef Oui Non
/.com/ abc.com Oui Non
/[.com]/ abc.com Oui Non
/[.moc]/ abc.com Oui Non
/.moc/ abc.com Oui Non
/cool/ cool Oui Non
/cool/ coool Oui Non
/c(o)l/ cool Oui Non
/c(o)*l/ cool Oui Non
/c(o)?l/ cool Oui Non
/c(o){1}l/ cool Oui Non
/c(o){0,2}l/ cool Oui Non
/(w){3}\.([a-z]+)\.(fr|com)/ www.google.fr Oui Non
/(w){3}\.([a-z]+)\.(fr|com)/ www.google.com Oui Non

/(w){3}\.([a-z]+)\.(fr|com)/ www.g1oogle.fr Oui Non
/(w){3}\.([a-z]+)\.(fr|com)/ www..fr Oui Non
/(w){3}\.([a-z]+)\.(fr|com)/ google.fr Oui Non
/(w){3}\.([a-z]+)\.(fr|com)/ ww.google.fr Oui Non
Récupérer données du modèle

On peut par ailleurs récupérer les données qui corresponde au modèle:
<?php
preg_match("/%(olivier)%/", "Mon nom est %olivier% bla bla bla .", $resultat);
var_dump( $resultat );
?>
array (size=2)
0 => string '%olivier%' (length=9)
1 => string 'olivier' (length=7)
preg_match_all
Si plusieurs résultats sont attendus, vous devez utiliser la fonction preg_match_all.
Exemple:
<?php
$data = '
<a href="/page1.php">PAGE 1</a>
<a href="/page2.php">PAGE 2</a>
<a href="/page3.php">PAGE 3</a>';
preg_match_all('/<a [^>]+>(.*)<\/a>/', $data, $names);
preg_match_all('/ href="(.*)"/', $data, $href);
var_dump( $names );
var_dump( $href );
?>
Résultat:
array (size=2)
0 =>array (size=3)
0 => string '<a href="/page1.php">PAGE 1</a>' (length=31)
1 => array (size=3)
0 => string 'PAGE 1' (length=6)
array (size=2)
0 => array (size=3)
0 => string ' href="/page1.php"' (length=18)
1 => array (size=3)
0 => string '/page1.php' (length=10)
PREG_REPLACE
On peut véri er qu'une chaine de caractère respecte un modèle mais on peut aussi
remplacer les données correspondantes par la valeur que l'on désire.
<?php
$text = preg_replace("/olivier/", "James Bond", "Mon nom est olivier");
echo $text;
?>
Résultat:
Mon nom est James Bond

La logique de modèle est la même que pour preg_match.
Supprimer une balise et son contenu

<?php
$content = "..."; // contenu HTML
$content =
preg_replace(
'`<script[^>]*>.+?</script>ìs',
"",
$content
);
?>
PHP Programmation orientée objet

Introduction à la programmation orientée object ( ou POO )
La programmation orientée objet est la dé nition de briques logicielle - objets - qui
interagissent entre eux. Un object représente un concept, une idée ou toute entité du monde
physique, comme une personne, un type de personne, une voiture, un article, etc. Il possède
sa propre structure et son propre comportement et sait agir avec ses pairs.
Cette méthode de programmation se di érencie de la programmation procédurale. Elle

permet une meilleure compréhension du code, un code plus indépendant, une meilleure
possibilité d'évolution du code et de maintenance.
Les classes
La classe est la structure d'un objet. Il s'agit du plan de tout ce qui compose l'objet. La classe
est composée de deux parties:
 les attributs ( ou propriétés )

 les méthodes
Les attributs sont les données associées à l'objet et les méthodes sont des fonctions qui sont
associées à la classe.
Les objets
Les objects sont des instanciations de classe. On parle d'ailleurs d'instances de classe. Il faut
imaginer une classe comme une sorte d'usine qui peut sortir autant de produits que l'on
désire. Ces produits sont les objets. Une classe "voiture" peut ainsi créer des voitures, qui
auront toutes des mêmes informations. Par exemple elles auront toutes un volant et 4 roues.
Mais lors de sa création, de son instanciation, on pourra par exemple changer la couleur d'un
élément. On pourra également changer le nombre de roues si besoin, mais la force de POO
c'est que par défaut, on ne se soucie pas du nombre de roues puisqu'elles sont présentes par
défaut.
Exemple PHP
En PHP on crée une classe comme ceci:
<?php
class voiture{
}
?>
et si je veux instancier une voiture:
<?php
$voiture = new voiture();
?>
Les attributs
Je peux donner à la classe des attributs qu'hériteront chaque instance
<?php
class voiture{
public $nb_roues = 4;
public $volant = 1;
public $prix = 5000;

var_dump( $voiture );
?>
Résultat:
object(voiture)[1]
public 'nb_roues' => int 4
public 'volant' => int 1
public 'prix' => int 5000
Je peux voir la valeur d'un attibut avec la syntaxe suivante:
<?php
var_dump( $voiture->nb_roues ); // Retournera la valeur 4
?>
Les méthodes
Les méthodes sont des fonctions propre à la classe.
Exemple:
<?php
class voiture{
public $volant = 1;
// retourne le prix de la voiture
public function prix_voiture(){
return $this->prix;
}

print_r( $voiture->prix_voiture() ); // retourne 5000
?>
Les méthodes permettent entre autre de manipuler les attributs. Il est d'ailleurs d'usage de
ne pas appeler un attribut directement mais de passer par une méthode.
Le constructeur
Le constructeur est une méthode qui est exécutée lors de l'instantiation de la classe.
<?php
class voiture{
public $volant = 1;
// methode constructeur
public function __construct(){
$this->prix+=150;
}
return $this->prix;
}
}
print_r( $voiture->prix_voiture() ); // retourne 5150
?>
Dans l'exemple ci-dessus on remarque que le prix à été augmenté de 150 euros. Cette action
s'est déroulée dans le constructeur, qui a pour nom: __construct()
Méthodes statiques
La méthode statique est une méthode qui n'a pas besoin d'être appellée depuis un objet. Sa
syntaxe est celle ci: CLASSE::METHODE()
<?php
class voiture{
public $volant = 1;
// methode constructeur
public function __construct(){
$this->prix+=150;
}
return $this->prix;
}
public static function nom_de_la_voiture(){

return "BATMOBILE";
}
print_r( voiture::nom_de_la_voiture() ); // retourne BATMOBILE
?>
On remarque dans l'exemple ci-dessus que pour appeler une méthode statique, on appelle
directement la méthode sans instancier la classe.
getter et setter
Pour modi er une propriété on peut utiliser la syntaxe suivante:
<?php
class voiture{
public $volant = 1;

$voiture->prix = 5400;
print_r( $voiture->prix ); // retourne 5400
?>
Il n'est cependant pas conseillé d'utiliser cette syntaxe pour changer la valeur d'un attribut, il
est préférable de passer par des methodes qui feront la modi cation. On appelle ce genre de
méthode un setter ; et on récupère la valeur avec un getter.
<?php
class voiture{
public $volant = 1;
// Change le prix
public function setPrix( $prix ){
$this->$prix = $prix;
}
// retourne le prix
public function getPrix( $prix ){
return $this->$prix;
}
}
// setter
$voiture->setPrix( 5400 );
// getter
print_r( $voiture->getPrix() ); // retourne 5400
?>
L'héritage
L'héritage en POO permet d'abstraire certaines fonctionnalités communes à plusieurs
classes, tout en permettant aux classes lles d'avoir leurs propres méthodes.
<?php
class voiture{
public $roue = 4;
}
class Renault extends voiture{
}
class Peugeot extends voiture{
public $roue = 5;
}
$peugeot = new Peugeot();
$renault = new Renault();
print_r( $peugeot->roue ); // retourne 4
print_r( $renault->roue ); // retourne 5
?>
Visibilité
La visibilité d'un attribut ou d'une méthode peut être dé nie en pre xant sa déclaration avec
un mots clé: public, protected ou private. Les éléments "public" peuvent être appelés à
n'importe quelle partie du programme. Les "protected" ne peuvent être appelés que par la
classe elle même ou les classes parents/enfants. Les "private" sont disponibles que pour la
classe en elle même.
Exemple:
<?php
class voiture{
public $roue = 4;
protected $prix = 5000;
private $nom = "Batmobile";
}
print_r( $voiture->roue ); // retourne 4

print_r( $voiture->prix ); // retourne erreur
print_r( $voiture->nom ); // retourne erreur
?>
Mettre ce genre de protection permet d'indiquer au développeur qu'il doit récupérer les
valeurs des attributs en passant par des getter pour des raisons de stratégies.
Exemple:
<?php
class voiture{
public $roue = 4;
public function getPrix(){
return ( $this->prix + 100 );
}
public function getNom(){

return $this->nom;
}

print_r( $voiture->roue ); // retourne 4
print_r( $voiture->getNom() ); // retourne Batmobile
?>
Pour les méthodes, c'est la même logique:
<?php
class voiture{
public $roue = 4;
public function getPrix(){
return ( $this->calcPrix() + 100 );
}
// methode de calcule non public
protected function calcPrix(){
return ( $this->prix + 10 );
}
}

print_r( $voiture->calcPrix() ); // retourne erreur
?>
Bootstrap Twitter
Bootstrap Twitter est une collection d'outils qui facilite la création d'un site web. Ce
framework est composé entre autre de code HTML, javascript et CSS et permet donc de créer
des formulaires designés très facilement ainsi que l'implémentation d'éléments dynamiques
comme un carousel ou une modal.
 Télécharger Bootstrap Twitter

Vous pouvez télécharger le framework ici: Télécharger bootstrap twitter 
(https://github.com/twbs/bootstrap/releases/download/v3.0.1/bootstrap-3.0.1-dist.zip)
Ou sur le site o ciel: Bootstrap twitter  (http://getbootstrap.com/getting-

started/#download)
Si vous une archive (extension .zip ou .tar.gz) vous a été délivrée, dézippez la dans dans votre
dossier racine de votre projet. Les dossiers css, fonts et js doivent être visibles.
Il su t ensuite de pointer les chiers css et js (minifés) sur vos pages:
<link rel="stylesheet" href="css/bootstrap.min.css">

<script src="js/bootstrap.min.js"></script>
Vous verrez votre site changer graphiquement sans avoir ajouté quoi que ce soit.

Bootstrap twitter: la grille
(/page-apprendre-bootstrap-twitter) Le système de grille est le coeur de bootstrap twitter.

Bootstrap Twitter considère qu'une ligne .row fait 12 colonnes.
L'idée d'un responsive design c'est de dire que pour telle taille d'écran un élément occupe X
colonne(s).
Boostrap Devices
Bootstrap twitter prend en charge 4 types de format:
› Très petit format < 768 pixels ( Smartphone )

› Petit format ≥ 786 px & < 992 px ( Tablette )
› Moyen format ≥ 992 px & < 1200 px ( Petit écran )
› Large format ≥ 1200 px ( Ecran standard )
Il existe un pré xe pour ces formats:
› Très petit format .col-xs-

› Petit format .col-sm-
› Moyen format .col-md-
› Large format .col-lg-
On va prendre l'exemple d'a chage de deux éléments. Le premier de couleur orange
pourrait être un élément de texte et un élément vert qui serait un menu:
Sur un écran de poste de travail
Tablette
Smartphone
Maintenant que nous avons établi la stratégie d'a chage des éléments, on peut passer au
code:
Code HTML
<div class="container">
<div class="row" style="border:1px solid #ddd;">
<div class="col-xs-12 col-sm-9 col-md-9 col-lg-7 col-lg-offset-1"
style="background-color:orange;height:200px;">Texte
</div>
<div class="col-xs-12 col-sm-3 col-md-3 col-lg-2 col-lg-offset-1"
style="background-color:green;height:200px;">Menu
</div>
</div>
</div>
Rendu
Texte
Menu
Si vous changez la taille de votre navigateur, vous verrez que le rendu ci-dessus s'adaptera à
la taille comme nous le voulions plus haut.
Explication du code
Nous avons construit deux blocs un orange et un vert. Ensuite nous avons indiqué pour
chaque taille d'écran le nombre de colonnes à occuper avec la syntaxe col-xs-*, col-sm-*, col-
md-* et col-lg-* où * est le nombre de colonnes.
Pour le bloc orange:
col-xs- 12
col-sm- 9
col-md- 9
col-lg- 7
col-xs- 12
col-sm- 3
col-md- 3
col-lg- 2
Offset
Maintenant voyons comment nous avons géré l'espace entre les éléments pour la version LG
( Large device ). Pour consacrer un espace à une colonne il faut utiliser la propriété o set. La
logique est la même que pour indiquer la largeur d'un bloc: col-xs-o set-*, col-sm-o set-*,
col-md-o set-* et col-lg-o set-* où * est le nombre de colonnes.
col-xs-o set- 0
col-sm-o set- 0
col-md-o set- 0
col-lg-o set- 1
Pour le bloc vert:

col-xs-o set- 0
col-sm-o set- 0
col-md-o set- 0
col-lg-o set- 1
Il n'est cependant pas nécessaire d'indiquer les valeurs pour tous les formats d'a chage
puisque 0 est la valeur par defaut. Indiquer la valeur pour l'a chage LG est donc su sant.
Bootstrap Twitter: les boutons

Bootstrap Twitter propose une série de boutons déjà designés. Pour créer un bouton, il faut
ajouter la class "btn" à l'élément. Un bouton peut être créé à partir de l'élément a, div, button,
span, etc.
Boutons Bootstrap twitter

Défaut Primary Success Info Warning Danger
<button class="btn btn-default">Défaut</button>

<button class="btn btn-primary">Primary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-danger">Danger</button>
Largeur boutons
Il existe di érentes tailles de bouton: xs, sm et lg.
Défaut bouton xs bouton sm bouton lg
<button class="btn btn-primary">Défaut</button>

<button class="btn btn-primary btn-xs">bouton xs</button>
<button class="btn btn-primary btn-sm">bouton sm</button>
<button class="btn btn-primary btn-lg">bouton lg</button>
Bouton Block
Pour créer un bouton qui s'a che en block:
Bouton Block
Bouton Block
Bouton actif
Défaut Actif

<button class="btn btn-primary active">Actif</button>
Bouton désactivé
Défaut Désactivé

<button class="btn btn-primary disabled">Désactivé</button>
Regrouper des boutons

Gauche Milieu Droite
<div class="btn-group">
<button type="button" class="btn btn-default">Gauche</button>
<button type="button" class="btn btn-default">Milieu</button>
<button type="button" class="btn btn-default">Droite</button>
</div>
Il est possible de changer la taille des boutons de ce groupement à l'aide des class btn-group-
xs, btn-group-sm et btn-group-lg :
<div class="btn-group btn-group-xs">

</div>
<div class="btn-group btn-group-sm">
</div>
<div class="btn-group btn-group-lg">
</div>
Regrouper des boutons verticalement

Haut
Milieu
Bas
<div class="btn-group-vertical">
<button type="button" class="btn btn-default">Haut</button>
<button type="button" class="btn btn-default">Bas</button>
</div>
Boutons multi choix

Action
<button type="button"
class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Nouveau</a></li>
<li><a href="#">Editer</a></li>
<li class="divider"></li>
<li><a href="#">Supprimer</a></li>
</ul>
</div>
Il est également possible de changer la taille de ce select grâce aux classes btn-xs, btn-sm et
btn-lg:
Action Action
<button type="button"
class="btn btn-primary btn-xs dropdown-toggle" data-toggle="dropdown">
Action <span class="caret"></span>
</button>
</ul>
</div>
Boutons multi choix 2

Action
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
</ul>
</div>
Bootstrap Twitter: badges et labels

Les badges
Messages 451
<a href="#">
Messages
<span class="badge">451</span>
</a>
Les labels
Default Primary Success Info Warning Danger
<span class="label label-default">Default</span>

<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>
Bootstrap Twitter: les images

Glyphicon
Les glyphicons sont des images que propose la librairie Bootstrap Twitter. Son
fonctionnement est le suivant: ajoutez à un élément la classe glyphicon et la classe glyphicon-
* où * est le nom de l'image ( voir liste ci-dessous )
Exemple:
<i class="glyphicon glyphicon-adjust"></i>
Résultat:

Taille des images
Vous pouvez gérer la taille de cette image comme s'il s'agissait d'une police d'écriture ( font ).
Exemple:
<i class="glyphicon glyphicon-adjust" style="font-size:80px;"></i>
Résultat:

Liste des glyphicons de Bootstrap Twitter
         *
.glyphicon- .glyphicon- .glyphicon- .glyphicon- .glyphicon- .glyphicon- .glyphicon- .glyphicon- .glyphicon- .glyphicon-
adjust align-center align-justify align-left align-right arrow-down arrow-left arrow-right arrow-up asterisk
(/icon- (/icon- (/icon- (/icon- (/icon- (/icon- (/icon- (/icon- (/icon- (/icon-
   🔔   🔖 💼  📅
glyphicon- glyphicon- glyphicon- glyphicon- glyphicon-glyphicon- glyphicon- glyphicon- glyphicon-
glyphicon-
adjust) align- align- align- align- arrow- arrow- arrow- arrow- asterisk)
center) justify)
.glyphicon- .glyphicon-ban- left) .glyphicon-bold
.glyphicon- .glyphicon-bell right) down)
.glyphicon- left)
.glyphicon- right) .glyphicon-
.glyphicon- up) .glyphicon-
backward circle barcode book bookmark briefcase bullhorn calendar
(/icon- (/icon-
(/icon- (/icon- (/icon- (/icon- (/icon- (/icon- (/icon- (/icon-
glyphicon- glyphicon-
📷         
glyphicon- glyphicon- glyphicon- glyphicon- glyphicon- glyphicon- glyphicon- glyphicon-
bell) bold)
backward) ban- barcode) book) bookmark) briefcase)bullhorn)calendar)
.glyphicon- circle)
.glyphicon- .glyphicon- .glyphicon- .glyphicon- .glyphicon- .glyphicon- .glyphicon- .glyphicon- .glyphicon-
camera certificate check chevron-down chevron-left chevron-right chevron-up circle-arrow- circle-arrow-left circle-arrow-
down right

(/icon- (/icon-
 ☁        
glyphicon- glyphicon- glyphicon- glyphicon- glyphicon-
glyphicon- glyphicon- glyphicon-
camera) certi cate)check) chevron-chevron-chevron-chevron- circle-
circle- circle-
.glyphicon- .glyphicon- .glyphicon- dow) .glyphicon-cog
.glyphicon- left) right) .glyphicon-
.glyphicon- up) .glyphicon- arrow-
.glyphicon- .glyphicon-
circle-arrow-up cloud cloud- cloud-upload collapse-down collapse-up arrow-
comment arrow-
compressed copyright-mark
download left)
(/icon- down) right)
(/icon- glyphicon-
        ✉ €
glyphicon- cog)
circle- cloud) comment) compressed)
.glyphicon- .glyphicon- .glyphicon- .glyphicon- .glyphicon- .glyphicon- .glyphicon-edit .glyphicon-eject .glyphicon- .glyphicon-euro
arrow-
credit-card cutlery cloud-
dashboard cloud-
download download-alt collapse-
earphone collapse- envelope copyright-
up) download) upload) down) (/icon- up) (/icon- mark)
(/icon-
(/icon- (/icon-.glyphicon-
(/icon- (/icon- (/icon- (/icon- (/icon-
         
glyphicon-cutlery) glyphicon- glyphicon- glyphicon- glyphicon- glyphicon-
edit) eject) euro)
credit- dashboard) download) download- earphone) envelope)
card)
.glyphicon- .glyphicon- alt)
.glyphicon- .glyphicon-eye- .glyphicon-eye- .glyphicon- .glyphicon-fast- .glyphicon-fast- .glyphicon-file .glyphicon-film
exclamation- expand export close open facetime-video backward forward
sign
(/icon- (/icon-
(/icon- (/icon- (/icon- (/icon- (/icon- (/icon- (/icon-
(/icon- glyphicon- glyphicon-
 🔥        
glyphicon- glyphicon- glyphicon- glyphicon- glyphicon- glyphicon- glyphicon-
glyphicon- le) lm)
expand) export) eye- eye- facetime- fast- fast-
exclamation-
close) .glyphicon-
.glyphicon-filter .glyphicon-fire .glyphicon-flag .glyphicon-flash open) video) .glyphicon- backward)
.glyphicon- forward)
.glyphicon- .glyphicon- .glyphicon-
sign) floppy-disk floppy-open floppy-remove floppy-save floppy-saved folder-close
(/icon- (/icon- (/icon- (/icon-

(/icon- (/icon- (/icon- (/icon- (/icon- (/icon-
glyphicon- glyphicon- glyphicon- glyphicon-
         
glyphicon- glyphicon- glyphicon- glyphicon- glyphicon- glyphicon-
lter) re) ag) ash)
oppy- oppy- oppy- oppy- oppy- folder-
.glyphicon- .glyphicon-font .glyphicon- disk) .glyphicon-gift
.glyphicon- .glyphicon-gbp open) remove).glyphicon- save) saved)
.glyphicon- .glyphicon- close)
.glyphicon-
folder-open forward fullscreen glass globe hand-down hand-left
(/icon- (/icon- (/icon-

         
font) gbp) gift)
folder- forward) fullscreen) glass) globe) hand- hand-
open) .glyphicon- .glyphicon-hd- .glyphicon-hdd .glyphicon- .glyphicon- .glyphicon- .glyphicon- down)
.glyphicon- .glyphicon- left)
.glyphicon-
hand-right hand-up video header headphones heart heart-empty home import
(/icon-
(/icon- (/icon- (/icon- (/icon- (/icon- (/icon- (/icon- (/icon- (/icon-
glyphicon-
         🔒
glyphicon-
hdd)
hand- hand- hd- header) headphones) heart) heart- home) import)
right) .glyphicon-
.glyphicon- up) video) empty) .glyphicon-list- .glyphicon-lock
.glyphicon- .glyphicon-info-.glyphicon-italic .glyphicon-leaf .glyphicon-link .glyphicon-list
inbox indent-left indent-right sign alt

glyphicon- glyphicon- xxxxxxxxxxx) glyphicon- glyphicon-
    −     
glyphicon- glyphicon- glyphicon- glyphicon- glyphicon-
italic) leaf) list) lock)
inbox) indent- indent- info- list-alt)
left)
.glyphicon-log- .glyphicon-log- right) .glyphicon-
.glyphicon- sign) .glyphicon- .glyphicon- .glyphicon- .glyphicon- .glyphicon-new- .glyphicon-off
in out magnet map-marker minus minus-sign move music window
(/icon-
glyphicon-
    📎  ✏   
glyphicon- glyphicon- glyphicon- glyphicon- glyphicon- glyphicon- glyphicon- glyphicon- glyphicon-
o )
log-in) log-out) magnet) map- minus) minus- move) music) new-
.glyphicon-ok .glyphicon-ok- .glyphicon-ok- marker)
.glyphicon- .glyphicon- sign)
.glyphicon- .glyphicon- .glyphicon- window)
circle sign open paperclip pause pencil phone phone-alt picture
(/icon-
glyphicon-
   +   📌   
glyphicon-
glyphicon-
glyphicon-
ok)
ok- ok-sign) open) paperclip)pause) pencil) phone) phone- picture)
circle)
.glyphicon-play .glyphicon-plus .glyphicon-print alt)
.glyphicon- .glyphicon-play- .glyphicon-plus- .glyphicon- .glyphicon- .glyphicon- .glyphicon-
plane
(/icon- circle
(/icon- sign
(/icon- pushpin qrcode question-sign random
         
(/icon- play) (/icon- plus) (/icon- print) (/icon- (/icon- (/icon- (/icon-
plane)
.glyphicon- .glyphicon- play-
.glyphicon- .glyphicon- plus-
.glyphicon- .glyphicon- pushpin)
.glyphicon- qrcode)
.glyphicon- question-
.glyphicon- random)
.glyphicon-
record refresh registration- remove remove-circle remove-sign repeat resize-full resize- resize-small
circle)
mark sign) sign)
horizontal

(/icon- (/icon-
         
record) refresh) remove) remove- remove- repeat) resize- resize-
registration-
.glyphicon- .glyphicon-road .glyphicon-save circle)
resize-
.glyphicon- .glyphicon- sign) .glyphicon-sd- .glyphicon-
.glyphicon- full) .glyphicon-send small).glyphicon-
resize-vertical retweet mark) saved screenshot video search horizontal) share
(/icon- (/icon- (/icon-
         
road) save) send)
resize- retweet) saved) screenshot)sd- search) share)
vertical)
.glyphicon- .glyphicon- video) .glyphicon-sort-.glyphicon-sort-.glyphicon-sort-
.glyphicon- .glyphicon-sort .glyphicon-sort-.glyphicon-sort-.glyphicon-sort-
share-alt shopping-cart signal by-alphabet by-alphabet-alt by-attributes by-attributes-alt by-order by-order-alt
(/icon-
glyphicon-
         
sort)
share- shopping-signal) sort-by- sort-by- sort-by- sort-by- sort-by- sort-by-
alt)
.glyphicon- cart)
.glyphicon- .glyphicon- .glyphicon- alphabet)
.glyphicon- alphabet-
.glyphicon-star attributes)
.glyphicon-star-attributes-
.glyphicon- order)
.glyphicon- order-
.glyphicon-
sound-5-1 sound-6-1 sound-7-1 sound-dolby sound-stereo empty stats step-backward step-forward
alt<) alt) alt)
(/icon-
glyphicon-
         
star)
sound- sound- sound- sound- sound- star- stats) step- step-
5-1)
.glyphicon-stop 6-1) .glyphicon-tag
.glyphicon- 7-1) .glyphicon-tags
dolby) stereo) empty) .glyphicon-th backward)
.glyphicon- .glyphicon-text- .glyphicon-text- .glyphicon-th- forward)
.glyphicon-th-
subtitles tasks height width large list
(/icon- (/icon- (/icon- (/icon-

(/icon- (/icon- (/icon- (/icon- (/icon- (/icon-
glyphicon- glyphicon- glyphicon- glyphicon-
         
stop) tag) tags) th)
subtitles) tasks) text- text- th-large) th-list)
.glyphicon- .glyphicon- .glyphicon-time .glyphicon-tint .glyphicon- height)
.glyphicon- width)
.glyphicon- .glyphicon-tree- .glyphicon-tree- .glyphicon-
thumbs-down thumbs-up tower transfer trash conifer deciduous unchecked
(/icon- (/icon-
glyphicon-
glyphicon-
       🔧  
time) tint)
thumbs- thumbs- tower) transfer) trash) tree- tree- unchecked)
down) up) .glyphicon-user .glyphicon- .glyphicon- .glyphicon- .glyphicon- conifer)
.glyphicon- .glyphicon-usd .glyphicon- deciduous)
upload volume-down volume-off volume-up warning-sign wrench zoom-in zoom-out
(/icon- (/icon-
glyphicon-
glyphicon-
glyphicon-
glyphicon-
glyphicon-
glyphicon-
glyphicon-
glyphicon-
usd) user)
upload) volume- volume- volume- warning- wrench) zoom- zoom-
down) o ) up) sign) in) out)
Bootstrap Twitter: les alertes

Vous pouvez créer des alertes avec Bootstrap Twitter grâce à la classe alert.
Exemple:
Félicitation! Votre compte a bien été enregistré
Pour info: Votre nom est Olivier ENGEL
Attention! Votre compte existe déjà
Erreur! Votre compte a été refusé
<div class="alert alert-success">

<b>Félicitation!</b> Votre compte a bien été enregistré
</div>
<div class="alert alert-info">
<b>Pour info:</b> Votre nom est Olivier ENGEL
</div>
<div class="alert alert-warning">
<b>Attention!</b> Votre compte existe déjà
</div>
<div class="alert alert-danger">
<b>Erreur!</b> Votre compte a été refusé
</div>
Bouton "fermer"
Félicitation! Votre compte a bien été enregistré ×
<div class="alert alert-success">

<b>Félicitation!</b> Votre compte a bien été enregistré
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
</div>
Bootstrap Twitter: tooltip

Vous pouvez créer des infos bulles assez rapidement avec bootstrap twitter.
Exemple:
Ceci est un texte bla bla bla bla et ce qui suit est une tooltip ( petite bulle info qui s'a che
au-dessus du lien ) : Tooltip
<a href="#"
class="link tooltip-link"
data-toggle="tooltip"
data-original-title="Une URL est une adresse web">
Tooltip
</a>
Comme vous pouvez le constater vous devez renseigner l'attribut data-toggle et data-original-
title pour ajouter cette information dynamique. Il vous faudra également ajouter ce code
javascript:
<script>
$(function()
{
$(".tooltip-link").tooltip();
});
</script>
Bootstrap Twitter: Carousel

Le carousel de Bootstrap twitter
 
Page 1 de présentation
Code HTML
<div id="my_carousel" class="carousel slide" data-ride="carousel">


<ol class="carousel-indicators">
<li data-target="#my_carousel" data-slide-to="0" class="active"></li>
<li data-target="#my_carousel" data-slide-to="1"></li>
<li data-target="#my_carousel" data-slide-to="2"></li>
</ol>

<div class="carousel-inner">

<div class="item active">
<div class="carousel-page">
<img src="/images/bootstrap.png" class="img-responsive" style="margin:0px auto;" />
</div>
<div class="carousel-caption">Page 1 de présentation</div>
</div>

<div class="item">
<div class="carousel-page"><img src="/images/twitter-bootstrap.jpg" class="img-responsive img-rou
style="margin:0px auto;" /></div>
</div>

<div class="item">
<div class="carousel-page">
<img src="/images/tablette.png" class="img-responsive img-rounded"
style="margin:0px auto;max-height:100%;" />
</div>
</div>
</div>

<a class="left carousel-control" href="#my_carousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#my_carousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
Code CSS
<style>
.carousel-page
{
width:100%;
height:400px;
background-color:#5f666d;
color:white;
}
</style>
Bootstrap Twitter Modal / Fenêtre dynamique

Modal Bootstrap twitter
Exemple:
Lancer la modal
Code

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Lancer la modal
</button>


<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
Exemple de modal
</div>
</div>
</div>
</div>
Bootstrap Wrap et Bootswatch

Bootstrap Twitter est un framework CSS, une technologie récente et très utilisée il existe donc
une multitudes de projets qui gravitent autour. Je vais vous en présenter quelques uns qui
vous seront très utiles!
Wrap Bootstrap
Les possibilités de design avec bootstrap twitter sont in ni. Si
vous avez besoin de supports pour vos inspirations ou si vous
voulez acheter un thème pour votre site pour quelques euros, je
vous conseille ce site : Bootstrap Wrap  (http://wrapbootstrap.com)
Bootswatch
Un autre site dans le même genre propose des thèmes gratuit :
Bootswatch  (http://bootswatch.com)
Bootsnipp
Bootsnipp est un site qui vous propose des éléments de code
designé. Exemple: menu, espace login, che présentation
utilisateur, demande de carte de crédit, etc. Très e cace
comme site: Bootsnipp  (http://bootsnipp.com/)
Bootstrap Font Awesome

Il existe une extension à Bootstrap Twitter qui permet d'ajouter d'autres glyphicons.
Font Awesome
Font awseome propose d'intégrer à votre blibliothèque plus de 369 icones.
Pour télécharger cette extension: Cliquez ici  (http://fontawesome.io/)
Icones dynamiques
Avec Font awesome vous pouvez rendre vos icones dynamiques:
Exemple:

Code:
<i class="fa fa-spinner fa-spin"></i>

<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-cog fa-spin"></i>
Rotation et inversion des icones

Pour inverser une icone ou executer une rotation utilisez la classe fa-rotate-* et fa- ip-* :
 normal
fa-rotate-90

fa-rotate-180

fa-rotate-270

 fa- ip-horizontal

icon- ip-vertical
Code:
<i class="fa fa-thumbs-o-up"></i> normal<br>

<i class="fa fa-thumbs-o-up fa-rotate-90"></i> fa-rotate-90<br>
<i class="fa fa-thumbs-o-up fa-flip-horizontal"></i> fa-flip-horizontal<br>
<i class="fa fa-thumbs-o-up fa-flip-vertical"></i> icon-flip-vertical
Encadrement icones
Il est possible d'ajouter divers encadrements aux icones:
Exemple:








Code:
<span class="fa-stack fa-lg">

<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span>
<br>
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-thumbs-o-up fa-stack-1x fa-inverse"></i>
</span>
<br>
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-terminal fa-stack-1x fa-inverse"></i>
</span>
<br>
<i class="fa fa-camera fa-stack-1x"></i>
<i class="fa fa-ban fa-stack-2x text-danger"></i>
</span>
javascript
Crée en 1995, javascript est un language de programmation qui est utilisé le plus souvent
pour des pages web. La plupart du temps javascript sert à contrôler les données saisies dans
les formulaires HTML et à interagir avec le document via l'interface DOM fourni par la
navigateur.
Contrairement à des languages serveur comme PHP, le code javascript est lisible par
l'utilisateur. Il est donc déconseillé de coder avec des notions / mots clé con dentiels.
La balise <script>
La balise <script> permet d'insérer du javascript qui s'execute coté client. Pour intégrer du
code javascript à vos page web, vous pouvez soit le mettre dans un chier externe avec une
extension .js soit l'écrire directement dans la page web.
Exemple script externe:
<script src="/script.js" type="text/javascript" ></script>
Exemple script interne:

<script type="text/javascript">
//<![CDATA[
// code javascript
//]]>
</script>
Exemple code inline dans une balise HTML:
<a href="#" onclick="code javascript"></a>
Les commentaires
Pour écrire un commentaire dans votre code, c'est à dire du texte qui ne sera pas interprété
mais juste lisible pour le programmeur:
/* Ceci est un commentaire */
</script>
Déclarer une variable

La syntaxe pour déclarer une variable en javascript est la suivante
var nom = 'olivier';
</script>
Les alertes
Vous pouvez utiliser des commandes qui controleront votre navigateur.
Le plus connu est l'alerte navigateur :
alert("Bonjour");
</script>
Vous pouvez lui transmettre une variable:

var nom = "olivier";
alert( nom );
</script>
Les consoles des navigateurs

Sur la plupart des navigateurs vous pouvez a cher la console via la touche F12 de votre
clavier.
Exemple sur chrome:
console.log( "variable: ", "val 1" );
console.log( "tableau: ", new Array("val 1", "val 2") );
console.log( "objet:", { nom : "engel", "prenom" : "olivier" } );
function test(){ alert( "ok" ); }
console.log( "fonction:", test );
</script>
Les prompt
Vous pouvez récupérer une entrée utilisateur à l'aide de la commande prompt:
var nom = window.prompt( "Quel est votre nom?" );
alert( nom );
</script>
Exemple prompt
Les operateurs
Les opérateurs de calcul en javascript:
var r = 1 + 1; /* 2 */
var r = 1 * 1; /* 1 */
var r = 1 - 1; /* 0 */
var r = 1 / 1; /* 1 */
</script>
Les opérateurs d'a ection:
var r = 2;
var r+= 1; /* 2+1 = 3 */
var r-= 1; /* 2-1 = 1 */
var r*= 1; /* 2*1 = 2 */
var r/= 1; /* 2/1 = 2 */
</script>
Les opérateurs d'incémentation:
var r = 100;
r++; /* 101 */
r--: /* 100 */
</script>
Les opérateurs de comparaison:
var x = 500;
x == 500; /* egal a = retourne TRUE */
x != 501; /* different de = retourne TRUE */
x > 501; /* supperieur a = retourne FALSE */
x < 501; /* inferieur a = retourne TRUE */
x >= 501; /* superieur ou egal a = retourne FALSE */
x <= 501; /* inferieur ou egal a = retourne TRUE */
</script>
Les opérateurs logiques: L'opérateur "OU":
var x = TRUE;
var y = FALSE;
( x || z ) /* TRUE */
</script>
Le code ci-dessus véri e si l'une des deux valeurs remplit la condition TRUE. L'opérateur "ET":
var x = TRUE;
var y = FALSE;
( x && z ) /* FALSE */
</script>
Le code ci-dessus véri e si les deux valeurs remplissent la condition TRUE.
La concaténation
En javascript pour concaténer deux valeurs, il faut s'assurer que les variables ne sont pas
toutes les deux de type numérique. Si c'est le cas, on ajoute une valeur de type string.
var a = 15;
var b = 30;
var c = a + b; /* 45 */
var d = a + "" + b; /* 1530 */
</script>
Les tableaux
var a = new Array();
a[0] = "Valeur 1";
a[1] = "Valeur 2";
/* Autre syntaxe */
var b = [];
b[0] = 1;
/* Autre syntaxe */
var b = [];
b.push( 1 );
</script>
Pour parcourir un tableau en javascript vous pouvez utiliser la commande FOR:
var a = new Array();
a[0] = "Valeur 1";
a[1] = "Valeur 2";
for( i in a ){
alert( a [i] );
}
</script>
Le tableau en javascript est un objet, vous pouvez donc appeler des méthodes qui
permettront de le manipuler:
t.join Retourne un chaine de caractère contenant tous les éléments d'un tableau
t.pop Supprimer le dernier élément du tableau et retourne sa valeur
t.push Ajoute un ou plusieurs éléments au tableau
t.reverse Inverse l'ordre des éléments d'un tableau
t.shift Supprime le premier élément d'un tableau
t.slice Permet de scinder un tableau
t.splice Ajoute ou supprime des éléments
t.sort Trie un tableau
t.unshift Ajoute un ou plusieurs élément au début du tableau

var a = new Array( "olivier", "engel", "est", "batman" );
alert( a ); /* ["olivier", "engel", "est", "batman"] */
alert( a.join() ); /* olivier,engel,est,batman */
alert( a.reverse() ); /* ["batman", "est", "engel", "olivier"] */
alert( a.sort() ); /* ["batman", "engel", "est", "olivier"] */
alert( a.pop() );
</script>
Les objets
Les attributs :
function Voiture(){
this.roues = 4;
}
var ma_voiture = new Voiture();
alert( ma_voiture.roues ); /* Retournera 4 */
ma_voiture.roues = 6;
alert( ma_voiture.roues ); /* Retournera 6 */
</script>
Les méthodes :
function Voiture(){
this.roues = 4;
this.getRoues = function(){
alert( this.roues );
}
}
ma_voiture.getRoues(); /* Rtournera 5 */
</script>
JSON
Il est possible de stocker des informations structurées dans un format nommé JSON.
Exemple:
var data = {};
data.prenom = "olivier";
data.nom = "engel";
console.log( data );
/* Object {prenom: "olivier", nom: "engel"} */
</script>
JQuery sélecteurs
Le selecteur jQuery (/page-apprendre-jquery) a pour syntaxe: $().
Il est possible de sélectionner quasiment tous les éléments:
$('*') Tous les éléments
$('a') Tous les éléments <a>
$('#main') L'élément ayant id="main"
$('.menu') Les éléments ayant class="menu"
$('#main, .menu') Les élément ayant id="main" ou class="menu"
$('.menu: rst') Le premier élément ayant class="menu"
$('.menu:last') Le dernier élément ayant class="menu"
$('.menu'). rst() Le premier élément ayant class="menu"

$('.menu').last() Le dernier élément ayant class="menu"
$('.menu:eq(0)') Le premier élément ayant class="menu"
$('.menu:eq(1)') Le deuxième élément ayant class="menu"
$('.menu:gt(1)') Les éléments ayant class="menu" à partir du deuxième
$('.menu:lt(3)') Les éléments ayant class="menu" entre 0 et 2
$('.menu:even') Les éléments paires ayant class="menu"
$('.menu:odd') Les éléments impaires ayant class="menu"
$('.menu > div') Les éléments div directement enfant de .menu
$('.menu div') Les éléments div enfant de .menu
$('.menu + div') Les éléments div qui suivent .menu
$('.menu div') Les éléments div frères de .menu
$('.menu'). nd('div') Les éléments div frères de .menu
$('div').parent() Selectionne le parent direct de div
$('div').parents("ul") Selectionne le parent <ul> de div
$('footer').prev() Selectionne l'élément juste avant l'élément footer
$('footer').prevAll() Selectionne tous les éléments juste avant l'élément footer
$('footer').next() Selectionne l'élément juste après l'élément footer
$('footer').nextAll() Selectionne tous les éléments juste après l'élément footer
$('.menu:visible') Les éléments visibles ayant class="menu"
$('.menu:hidden') Les éléments cachés ayant class="menu"
$('a[href]') Les éléments <a> ayant l'attribut href
$('a[href="#"]') Les éléments <a> ayant l'attribut href et la valeur #
$('a[href!="#"]') Les éléments <a> n'ayant pas valeur # dans l'attribut href
$('a[href^="#"]') Les éléments <a> ayant une valeur qui commence par #
$('a[href$="#"]') Les éléments <a> ayant une valeur qui se termine par #
$('a[href*="#"]') Les éléments <a> ayant une valeur qui contient #

jQuery DOM manipulation

Récupérer le contenu d'un élément
On peut récupérer le contenu d'un élément à l'aide des méthodes jQuery .html() et .text()
Exemple:
<div id="main">Bonjour je suis <b>batman</b></div>
alert( $("#main").html() );
/* Retourne Bonjour je suis <b>batman</b> */
alert( $("#main").text() );
/* Retourne Bonjour je suis batman */
</script>
Remplacer le contenu
Pour remplir un élément, il faut utiliser la méthode .html()
<div id="main">Bonjour je suis <b>batman</b></div>
$("#main").html("Il était une fois ");
</script>
Résultat:
<div id="main">Il était une fois</div>
Ajouter du contenu
Il est possible d'ajouter du contenu à un élément grâce à la méthode .append()
$("#main").append(" un enfant qui aimait le chocolat");
</script>
Résultat:
<div id="main">Il était une fois un enfant qui aimait le chocolat</div>
Il existe une autre syntaxe pour ajouter du contenu: .appendTo()
$( " un enfant qui aimait le chocolat" ).appendTo( "#main" );
</script>
Résultat:
<div id="main">Il était une fois un enfant qui aimait le chocolat</div>
Ajouter du contenu au début de l'élément

Il est possible d'ajouter du contenu au début d'un élément grâce à la méthode .prepend()
$("#main").prepend("un enfant qui aimait le chocolat ");
</script>
Résultat:
<div id="main">un enfant qui aimait le chocolat Il était une fois</div>
Il existe une autre syntaxe pour cette action:
$("un enfant qui aimait le chocolat ").prependTo("#main");
</script>
Résultat:
<div id="main">un enfant qui aimait le chocolat Il était une fois</div>
Supprimer un élément
/* Supprime toutes les balises <li> du document */
$("li").remove();
</script>
Vider un élément
/* Vide toutes les balises <li> du document */
$("li").empty();
</script>
Remplacer un élément
/* Remplace les balises <li> par <a>Lien</a> */
$("li").replaceWith( $("<a>Lien</a>") );
</script>
Envelopper un élément
/* Envelopper les balises <a> par des balises <li> */
$("menu a").replaceWith( $("<li />") );
</script>
Ecrire après un élément

/* Ajoute la balise <span> juste après le footer */
$("footer").after("<span>Lien 1</span>");
</script>
Ecrire avant un élément

/* Ajoute la balise <span> juste avant le footer */
$("footer").before("<span>Lien 2</span>");
</script>
Modifier les attributs

/* Récupère la valeur de la balise href */
var href = $("a").attr("href");
/* Modifie la valeur de la balise href */
$("a").attr("href", "http://creersonsiteweb.net");
</script>

jQuery évènements
Il est possible d'associer une action à un évènement. Par exemple on pourra executer une
action lorsque l'utilise clique à un endroit du site, ou survol un élément, ou lorsqu'il scroll, etc.
Syntaxe évènement
$(<element>).<event>(<function>);
Exemple :
$("body").click(function(){ alert(0) });
Liste des évènements les plus utiles:
blur Lorsque l'on perd le focus
change Changement de valeur
click Click de la souris
dblclick Double click
focus Lorsque l'on focalise un élément
hover Survol de la souris
keydown Pression sur une touche
keyup Lorsqu'on relache la pression d'une touche
mousedown Lorsque l'on presse sur un bouton de la souris
mouseup Lorsque l'on relache la pression du click
ready Lorsque la page est chargée entièrement
resize Lorsque l'on modi e la taille du navigateur
scroll Scroll de l'élement
submit Envoi du formulaire
Exécuter la même fonction sur plusieurs évènements

Nous souhaitons exécuter la fonction suivante sur un évènement "click" et "change" :
<script>
funtion alert_me(){
alert( $(this).val() );
}
</script>
Sur les éléments suivants:
<select id="users">
<option value="1">Olivier</option>
<option value="2">Batman</option>
</select>
<input id="user_perso" type="text" value="Spiderman" />
Association évènement / élément :
<script>
$("#user").change(alert_me);
$("#user_perso").keyup(alert_me);
</script>
Résultat :
Olivier Spiderman
jQuery Ajax
Ajax c'est quoi
L'Ajax ('Asynchronous JavaScript and XML) est une combinaison de plusieurs technologies qui
permet de récupérer des données sans à avoir à recharger la page.
L'exemple le plus parlant est Google Map. Vous pouvez scroller le monde entier sans
recharger la page. En fait à chaque action de scrolling, la page demande aux serveurs de
Google de lui retourner les informations de cartographie sur les coordonnées vu par
l'utilisateur, ainsi on utilise que les ressources nécessaires. Sans l'ajax, il aurait fallu recharger
la page à chaque changement de coordonnées, ou alors précharger toutes les données de la
Terre entière, mais évidemment ca ne serait pas possible.
Utiliser Ajax
JQuery simpli e l'utilisation d'Ajax.
Syntaxe ajax jquery:
<script>
$.ajax(<param>);
</script>
async Par defaut toutes les requetes sont asynchrones ( true par defaut )
beforeSend execute une fonction avant l'envoi de la requete Ajax
cache Par défaut: true, false pour le dataType 'script' and 'jsonp'
complete Execute une fonction lorsque la requete est terminée
contentType Par defaut: application/x-www-form-urlencoded; charset=UTF-8
data Les données que vous souhaitez envoyer
dataType Par defaut: Intelligent Guess sinon (xml, json, script, or html)
error Execute une fonction en cas d'erreur
password Si besoin d'un mot de passe pour l'authenti cation HTTP access
success Execute une fonction en cas de reussite de la requete ajax
type Par defaut: GET. Sinon POST
url Par defaut: la page en cours.

password Si besoin d'un mot de passe
username Si besoin d'un utilisateur pour l'authenti cation HTTP access
Exemple:
<script>
$.ajax({
url : "script.php",
data : { "action" : "delete_page" },
complete: function(){
alert("Félicitation page supprimée!");
},
error: function(){
alert("Erreur!");
}
});
</script>
Récupérer le retour Ajax

Envoyer des données au server en ajax c'est une chose mais on peut récupérer son retour et
le traiter en local via le navigateur.
Développer son propre plug-in jquery

Un plugin jquery c'est quoi
L'avantage de jQuery c'est qu'il est très simple d'utilisaton, créer un plugin permet de
simpli er encore plus son utilisation. Ainsi pour un module de datepicker, la syntaxe pourrait
ressembler à ceci:
$(input).datepicker();
Créer son propre plugin jquery permettrait de donner une spéci cité aux éléments avec la
syntaxe suivante :
$(element).monplugin();
Déclarer un plugin jquery

(function($) {
$.fn.monplugin = function(params) { ... };
})(jQuery);
Exemple d'un plugin jQuery

Construisons un plugin jQuery qui permet de changer la couleur et le contenu d'un champ
texte :
(function($) {
$.fn.cssw_datepicker = function(params) {
$(this).css({ 'background-color': params.color }).val( params.input_value );
};
})(jQuery);
$("#input_datepicker").cssw_datepicker({ color : 'yellow', input_value : "Plugin correct" });
Résultat :
Plugin Correct

MySql: SQL c'est quoi?
SQL ( Structured Query Language ) est un langage informatique qui sert à exploiter les bases
de données. Il est utilisé pour exploiter MySQL.
Les instructions SQL sont très simples à apprendre puisqu'elles ressemblent énormément
aux phrases ordinaires de l'anglais. Si vous comprenez l'anglais, vous avez déjà compris SQL.
Il existe des logiciels graphiques, comme Phpmyadmin, qui permettent de réaliser des actions
SQL sans écrire la moindre ligne SQL.
Une base de données c'est quoi?

Une base de données ( ou database en anglais ) est un conteneur qui permet de stocker des
informations structurées et qui sont exploitables facilement. Une base de données est
composée de tables qui sont elles-mêmes composées de colonnes et de lignes/entrées.
CRUD MySQL
En informatique on appelle CRUD ( Create, Read, Update, Delete ) désigne les 4 opérations de
base d'un logiciel. Le terme est un clin d'oeil au mot "crude" qui signi que justement
"rudimentaire".
Nous allons donc maintenant étudier le CRUD de MySQL.
Create: Créer une base de données

Pour créer une nouvelle base de données
CREATE DATABASE monsiteweb;
Entrez cette requete dans la console MySQL et validez en apppuyant sur la touche "entrée" :
Create: Créer une table de données
La table est une composante de la base de données. Nous allons mainteant créer la table
"visiteurs" qui stockera des informations sur les visiteurs.
Pour cela vous devez avant toute chose dire au module que vous allez travailler sur le base de
données "monsiteweb" :
USE monsiteweb;
Puis :
CREATE TABLE visiteurs

( adresse_ip varchar(255), date datetime );
Lorsque l'on créer une table ( qui peut se représenter comme un tableau avec une double
entrée ) on doit indiquer un nom pour chaque colonne et typer les données. Ainsi on doit
indiquer si dans la colonne en question on y stock des chi res, des lettres, les deux, des
formats de date, etc.
Dans notre cas, nous avons choisi de créer une tableau avec deux colonnes, la première
enregistrant des données qui auront le format d'une adresse IP, c'est à dire : XXX.XXX.XXX.XXX
où X est un chi re. Dans ce cas la, il y aura des chi res et des points, il s'agit donc d'un format
alphanumérique ; nous l'indiquons grâce au type VARCHAR(255) 255 étant le nombre de
caractères que l'on peut enregistrer au maximum pour une entrée.
La deuxième colonne est un format DATETIME, c'est à dire qu'il stockera une date dans un
format dé ni par MySQL.
Read: Lire une base de données

Il est possible de voir la liste des tables d'une base de données à l'aide de la commande:
SHOW TABLES;
et voir le contenu d'une table à l'aide de la commande DESCRIBE :
DESCRIBE visiteur;
On remarque que MySQL nous retourne un tableau à double entrée avec le nom des
colonnes qui compose la table et leur type de données.
Insérer une entrée

Nous allons maintenant entrer une données dans ce tableau visiteurs :
INSERT INTO
visiteurs
SET
date = NOW(),
adresse_ip = "10.2.12.15";
On remarque que pour indiquer la date et l'heure à mysql il su t d'appeler une fonction:
NOW().
Lire les entrées

Pour lire toutes les entrées d'une table on utilise la commande suivante:
SELECT * FROM visiteurs;

On remarque que MySQL nous retourne un tableau avec les valeurs que nous avons
renseignées plus haut.
Modifier une entrée

Pour modi er une entrée on utilise la commande UPDATE
UPDATE visiteurs SET adresse_ip = "10.0.0.1";
Ensuite exécutons la requete SELECT pour voir si notre demande de modi cation a réussi:
Supprimer une entrée
On utilise la commande "DELETE" pour supprimer une entrée:
DELETE FROM visiteurs WHERE adresse_ip = "10.0.0.1";
SQL CREATE
CREATE Database
Une base de données est un conteneur composé de tables de données. Pour créer une base
de données sur MySQL, vous pouvez utiliser la commande suivante:
CREATE DATABASE monsiteweb;
Pour voir les tables d'une base de données vous pouvez utiliser la commande :
SHOW TABLES;
Pour travailler dans l'environnement de la base de données :
USE monsiteweb;
CREATE Table
Une table est une composante d'une base de données. Si une base de données était une
armoire, une table de données serait un tiroire. Bien construire une table de données est
primordial pour la rapidité de votre logiciel / site web ainsi que pour la cohérence des
données.
Il est nécessaire d'indiquer un type pour chaque colonne qui compose le tableau.
Voici les types existants:
TINYINT[(nbr de caractères)]
SMALLINT[(nbr de caractères)]
MEDIUMINT[(nbr de caractères)]
INT[(length)]
INTEGER[(nbr de caractères)]
BIGINT[(nbr de caractères)]
REAL[(nbr de caractères,décimales)]
DOUBLE[(nbr de caractères,décimales)]
FLOAT[(nbr de caractères,décimales)]
DECIMAL(nbr de caractères,décimales)
NUMERIC(nbr de caractères,décimales)
DATE
TIME
TIMESTAMP
DATETIME
VARCHAR(nbr de caractères)
TINYBLOB
BLOB
MEDIUMBLOB
LONGBLOB
TINYTEXT
TEXT
MEDIUMTEXT
LONGTEXT
ENUM(valeur1,valeur2,valeur3,...)
SET(valeur1,valeur2,valeur3,...)
Syntaxe
CREATE TABLE IF NOT EXISTS visiteurs (

id int(5) NOT NULL AUTO_INCREMENT,
nom varchar(50) DEFAULT NULL,
date DATE DEFAULT NULL,
adresse_ip varchar(50) DEFAULT NULL,
nouveau_visiteur bool DEFAULT NULL,
lieu varchar(250) DEFAULT NULL,
PRIMARY KEY(id)
);
La clé primaire est un index unique qui permet d'identi er une ligne. Cette valeur, souvent un
identi ant numérique que l'on nomme "id" n'est pas voué à changer et permet de lier les
tables entres elles.
SQL INSERT
La commande INSERT INTO permet d'insérer une donnée dans une table.
Insérer une ligne de données
Il existe plusieurs syntaxes pour e ectuer cette action:
La plus utilisée étant:
INSERT INTO
visiteurs (date, adresse_ip)
VALUES
( NOW(), "10.2.2.2" );
L'ordre des colonnes n'a pas d'importance du moment que les données qui suivent
respectent l'association COLONNE/DONNEES.
La syntaxe suivante exécutera la même action:
INSERT INTO
visiteurs
SET
date = NOW(),
adresse_ip = "10.2.2.2";
Insérer des données depuis une requete SELECT

Il est possible d'insérer des données en SQL à travers la commande SELECT.
Exemple:
INSERT INTO
visiteurs ( date, adresse_ip )
SELECT
date, adresse_ip
FROM
visiteurs_temp;
Il est nécessaire de faire correspondre les colonnes de la sous requete et de l'insert.
REPLACE INTO
REPLACE INTO fonctionne exactement comme INSERT INTO, à l'exception que si on insère
une donnée où la clé primaire existe déjà, l'ancienne donnée est supprimée puis remplacée
par la nouvelle. Exemple:
REPLACE INTO
visiteurs ( date, adresse_ip )
SELECT
date, adresse_ip
FROM
visiteurs_temp;
SQL SELECT
Les requetes SELECT en MySQL
La commande SELECT est la plus importante à comprendre en MySQL. Maitriser cette
commande vous permettra d'établir des statistiques, sortir la valeur précise d'un chi re
d'a aire, trouver un item précis et pertinant, bref c'est la pierre angulaire de tout votre
logiciel /site web.
Table d'exemple
Nous utiliserons les données suivantes pour les exemples:
CREATE DATABASE IF NOT EXISTS monsiteweb;

USE monsiteweb;
DROP TABLE IF EXISTS visiteurs;
( id int, adresse_ip varchar(255), date datetime );
DROP TABLE IF EXISTS users;
CREATE TABLE users
( id int, name varchar(255), adresse_ip varchar(255) );
INSERT INTO visiteurs (id, date, adresse_ip)
VALUES
( "1", "2013-11-20 15:05:13", "5.20.4.96" ),
( "2", "2012-05-15 23:55:10", "105.12.3.6" ),
( "3", "2013-10-08 12:14:06", "52.24.23.3" ),
( "4", "2013-06-07 04:15:00", "36.45.25.204" ),
( "5", "2014-11-20 23:03:45", "49.102.45.101" );
INSERT INTO users (id, name, adresse_ip)
VALUES
( "1", "Olivier ENGEL", "5.20.4.96" ),
( "2", "Batman", "105.12.3.6" ),
( "3", "Zorro", "52.24.23.3" ),
( "4", "Superman", "36.45.25.204" );
Les opérations
SELECT 1 + 2;
-> 3
SELECT 1 * 2;
-> 2
SELECT 1 / 2;
-> 0.5
SELECT 1 - 2;
-> -1
Manipulation des caractères

SELECT LENGTH("test");
-> 4
SELECT LOWER("Test");
-> "test"
SELECT UPPER("test");
-> "TEST"
SELECT TRIM(" test ");

-> "test"
SELECT QUOTE(" L'orange");

-> "L\òrange"
SELECT REPLACE("olivier engel", "engel", "angel");

-> "olivier angel"
SELECT REVERSE("olivier");
-> "reivilo"
SELECT CONCAT("olivier", " ", engel");

-> "olivier engel"
Les expressions régulières avec MySQL

SELECT "olivier" REGEXP "ôl";
-> 1
SELECT "olivier" REGEXP "ol|ul";

-> 1
SELECT "olivier" REGEXP "oli(.)?ier";

-> 1
Les dates en MySQL
SELECT NOW();
-> 2014-01-05 23:45:01
Ajouter 31 jours à une date:

SELECT DATE_ADD('2014-01-02', INTERVAL 31 DAY);
-> 2014-01-05 23:45:01
Autre syntaxe pour ajouter 1 jour à une date
SELECT SELECT '2014-01-02' + INTERVAL 31 DAY;

-> 2014-01-05 23:45:01
Ajouter 1 Heure
SELECT SELECT '2014-01-02' + INTERVAL 1 HOUR;

-> 2014-01-02 01:00:00
Supprimer 1 Heure
SELECT SELECT '2014-01-02 00:01:00' - INTERVAL 1 HOUR;

-> 2014-01-02 00:00:00
Extrait la partie DATE
SELECT DATE('2014-03-01 01:02:03');

-> 2014-03-01
Indique le nombre de jours entre deux dates
SELECT DATEDIFF('2014-01-31 03:00:59','2013-04-10');

-> 296
Le SELECT simple
La requete suivante a chera le tableau dans sa globalité:

Sélectionner des colonnes
SELECT date, id FROM visiteurs;
Donner un alias à une colonne

SELECT date as date_1, id as iden FROM visiteurs;
Filtrer avec WHERE

SELECT * FROM visiteurs WHERE id = 4;
SELECT * FROM visiteurs WHERE id != 3;

SELECT * FROM visiteurs WHERE id < 4;
SELECT * FROM visiteurs WHERE id >= 2;
SELECT * FROM visiteurs WHERE id > 1 AND id < 4;
COUNT
Il est possible de compter le nombre d'items d'une sélection.
SELECT COUNT(*) FROM visiteurs;

SELECT COUNT(*) FROM visiteurs WHERE id > 2;
MAX
La fonction MAX retourne la plus grande valeur de la sélection.
SELECT MAX(id) FROM visiteurs;
MIN
La fonction MIN retourne la plus petite valeur de la sélection.
SELECT MIN(id) FROM visiteurs;

SUM
Il est possible d'additionner la valeur des items d'une sélection.
SELECT SUM(id) FROM visiteurs WHERE id > 2;
La somme de (3+4+5) = 12
AVG
AVG ( pour average ) permet de calculer une moyenne sur une selection
SELECT AVG(id) FROM visiteurs;
La moyenne de (1+2+3+4+5) / 5 = 3

SQL UPDATE
UPDATE
La commande update permet de modi er les entrées d'une table.
Table d'exemple

USE monsiteweb;
VALUES
( "1", "2013-11-20 15:05:13", "5.20.4.96" ),
( "2", "2012-05-15 23:55:10", "105.12.3.6" ),
( "3", "2013-10-08 12:14:06", "52.24.23.3" ),
( "4", "2013-06-07 04:15:00", "36.45.25.204" ),
( "5", "2014-11-20 23:03:45", "49.102.45.101" );
Modifier des données

UPDATE visiteurs SET adresse_ip = "0.0.0.0";
Modifier des données avec filtre

UPDATE visiteurs SET adresse_ip = "6.6.6.6" WHERE id = 3;
Modifier des données avec une jointure

UPDATE
visiteurs as a,
users as b
SET
a.adresse_ip = b.adresse_ip
WHERE
a.id = b.id;
SQL DELETE / DROP / TRUNCATE

DELETE
On utilise la commande "DELETE" pour supprimer une entrée:
DELETE FROM visiteurs WHERE adresse_ip = "10.0.0.1";
Truncate
On utilise la commande "TRUNCATE" pour vider une table:
Truncate TABLE visiteurs;
DROP
On utilise la commande "DROP" pour supprimer une table:
DROP TABLE visiteurs;

PHPMYADMIN SQL
Lancer PHPMYADMIN
Pour lancer PHPMYADMIN, cliquez sur l'icone WampServer puis sélectionnez phpMyAdmin
Le navigateur s'ouvre :
Créer une nouvelle table
Pour créer une nouvelle table indiquer un nom dans le champs "Nouvelle table" puis le
nombre de colonnes désirés en en n cliquez sur "exécuter".
Vous pouvez entrer les types des colonnes puis validez en cliquant sur "Sauvegarder".
Consulter une table

Pour consulter une table cliquez sur le nom de la table dans la page d'accueil.
On peut consulter sur cette vue les colonnes et leur type.
Insérer une donnée

Pour insérer une données, cliquez sur l'onglet "Insérer" et remplissez les champs. sur le
bouton "Exécuter".
Puis validez en cliquant sur le bouton "Exécuter" :

Une message de con rmation vous informe de la bonne execution de la requete que vous
pouvez consulter d'ailleurs.
Cliquez sur l'onglet "A cher pour consulter la table" :

On remarque la présence des nos deux entrées.
Supprimer une donnée

Pour supprimer une donnée, il su t de la sélectionner dans la vue "table" et de cliquer sur
l'icone e acer
Editer une donnée

Pour éditer une données, cliquez sur l'icône modidier dans la vue "Table"

SQL JOINTURES
Les jointures SQL
Les jointures SQL permettent de lier des tables entre elles. Ces tables peuvent être de la
même base de données ou non.
Table d'exemple pour les jointures


USE monsiteweb;
CREATE TABLE users
( id int, nom varchar(255), adresse_ip varchar(255) );
VALUES
( "1", "2013-11-20 15:05:13", "5.20.4.96" ),
( "2", "2012-05-15 23:55:10", "105.12.3.6" ),
( "3", "2013-10-08 12:14:06", "52.24.23.3" ),
( "4", "2013-06-07 04:15:00", "36.45.25.204" ),
( "5", "2014-11-20 23:03:45", "111.111.111.111" ),
( "6", "2010-07-10 03:45:12", "111.111.111.111" ),
( "7", "2011-06-15 23:03:45", "111.111.111.111" ),
( "8", "2012-05-23 00:00:01", "111.111.111.111" ),
( "9", "2010-15-30 23:23:42", "0.0.0.0" );
INSERT INTO users (id, nom, adresse_ip)
VALUES
( "1", "Olivier ENGEL", "5.20.4.96" ),
( "2", "Batman", "105.12.3.6" ),
( "3", "Zorro", "52.24.23.3" ),
( "4", "Superman", "36.45.25.204" ),
( "5", "Spiderman", "222.222.222.222" ),
( "6", "Hulk", "222.222.222.222" );
La table visiteurs
La table users
Jointure interne
Nous allons regrouper toutes les informations de ces deux tables en une seule table. Le but
recherché de cet exemple et de pouvoir dire quel nom est associé à l'adresse IP. Requete SQL
qui fait la jointure:
SELECT * FROM visiteurs a, users b WHERE a.adresse_ip = b.adresse_ip;
Résultat :
La première chose que l'on remarque c'est qu'il n'y a que 4 lignes alors que la table "visiteurs"
en a 9. SQL n'a pas trouvé une jointure possible avec les lignes 5,6,7,8 et 9 de la table
visiteurs, puisque l'adresse IP n'est pas présente dans la table users.
Cette jointure est donc la plus simple qui existe en SQL, et elle ignore les ligne qui ne peuvent
avoir de jointures.
Il existe une autre syntaxe pour ce type de jointure:
SELECT
*
FROM
visiteurs a
INNER JOIN
users b ON a.adresse_ip = b.adresse_ip;
Le résultat de cette jointure est évidemment le même que l'exemple plus haut.
A noter aussi que le mot INNER est facultatif.
SELECT
*
FROM
visiteurs a
JOIN
WHERE, ORDER BY et LIMIT

La recherche, le tri et la limitation d'a chage de données se place après les jointures :
SELECT
*
FROM
visiteurs a
JOIN
users b ON a.adresse_ip = b.adresse_ip
WHERE
a.date > "2013-01-01 00:00:00";
Résultat:
Les jointures externes
Sur MySQL , il existe 2 jointures externes possibles : LEFT JOIN et RIGHT JOIN.
Dans l'exemple de jointure interne exmpliqué plus haut, nous avons remarqué qu'il y avait 4
lignes alors que la table "visiteurs" possédait 5 entrées.
La jointure externe permet de récupérer cette ligne, même si elle n'est associée à rien.
LEFT JOIN
Requete SQL de jointure LEFT JOIN:
SELECT
*
FROM
visiteurs a
LEFT JOIN
Résultat de la jointure SQL:
On remarque que la jointure se fait à partir de la table de gauche ( d'où le terme LEFT JOIN )
et on ajoute, sans perdre d'informatio de la table initiales les jointures de la table suivante.
RIGHT JOIN
A l'opposé RIGHT JOIN établit une jointure en partant de la table de droite.
Requete SQL de jointure RIGHT JOIN:
SELECT
*
FROM
visiteurs a
RIGHT JOIN
Résultat de la jointure SQL:
Jointure multi critères

Vous pouvez a ner la jointure en ajoutant plusieurs critères :
SELECT
*
FROM
visiteurs a
LEFT JOIN
users b ON a.adresse_ip = b.adresse_ip AND a.xxx = b.yyy;
où xxx serait le nom de la colonne de la première table et yyy de la deuxième table
Lier plusieurs tables

Il est possbile de lier plus que deux tables :
SELECT
*
FROM
<table> a
LEFT JOIN
<table> b ON a.<colonne> = b.<colonne>
LEFT JOIN
<table> c ON b.<colonne> = b.<colonne>;
PHP PDO MySQL

PDO c'est quoi?
PDO ( pour PHP Data Object ) est une interface qui peut accéder à une base de données (
mysql par exemple ) depuis PHP.
La classe PDO est orientée objet et existe depuis PHP 5.1.0
Activer PDO
Pour activer PDO assurez-vous que la ligne suivante est décommentée dans le chier php.ini
extension=php_pdo_mysql.dll
Table d'exemple pour PDO


USE monsiteweb;
CREATE TABLE users
( id int, nom varchar(255), adresse_ip varchar(255) );
VALUES
( "1", "2013-11-20 15:05:13", "5.20.4.96" ),
( "2", "2012-05-15 23:55:10", "105.12.3.6" ),
( "3", "2013-10-08 12:14:06", "52.24.23.3" ),
( "4", "2013-06-07 04:15:00", "36.45.25.204" );
Connection à une base de données via PDO
<?php
define("PDO_HOST", "localhost");
define("PDO_DBBASE", "monsiteweb");
define("PDO_USER", "root");
define("PDO_PW", "");
try{
$connection = new PDO(
"mysql:host=" . PDO_HOST . ";".
"dbname=" . PDO_DBBASE, PDO_USER, PDO_PW,
array(PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES utf8") );
}
catch (PDOException $e){
print "Erreur !: " . $e->getMessage() . "<br/>";
die();
}
?>
Exécuter une requête SQL

La syntaxe pour exécuter une requête SQL est la suivante;
<?php
$query = " UPDATE visiteurs SET date = "";
$r = $connection->query( $query );
?>
QUOTE / sécurité
La méthode Quote permet de sécuriser vos requêtes. En e et, il ne faut jamais faire con ance
aux données qu'envoit l'utilisateur, utiliser la méthode "quote" permet de sécuriser les
données e cacement.
Exemple:
<?php
$query = " UPDATE visiteurs SET date = " . $connection->quote( $data ) . ";
$r = $connection->query( $query );
?>
Préparer une requète SQL

Vous pouvez également préparer vos requetes pour éviter toute injection SQL :
<?php
$query = " INSERT INTO visiteurs SET date = NOW(), nom = ?, adresse_ip = ? ;
$data = array( "OLIVIER", "145.50.10.2" );
$sth = $connection->prepare( $query );
$sth->execute( $data );
?>
SELECT
Exemple de code pour exécuter une requète et recevoir le résultat dans un tableau.
<?php
$query = "SELECT * FROM visiteurs;";
$r = $connection->query( $query )->fetchAll(PDO::FETCH_ASSOC);
var_dump( $r );
?>
Référencer son site web

Le référencement c'est quoi
Référencer un site internet ( SEO en anglais pour Search Engine Result Page ), c'est augmenter
sa visibilité sur les moteurs de recherche. Pour qu'un site soit visité, il doit être trouvé
facilement et les sites les plus visités sont les sites qui ont les premières places sur les pages
de résultats des moteurs de recherche ( SERP en anglais pour Search Engine Result Page ).
L'objectif d'un bon référencement est donc de tout faire pour apparaitre dans les premières
positions des résultats de recherche pour les mots clés les plus pertinents.
Google
En 2013 en France Google représente 90% des recherches sur internet. Optimiser son site
pour le référencement revient à dire aujourd'hui optimiser son site pour Google.
Le problème du référencement c'est que personne ne sait quoi faire. Les professionnels du
référencement connaissent peut être les pièges à éviter ou les astuces pour gagner des
places au classement des recherches, mais ils ne connaissent pas les algorithmes de Google
donc ils ne font que des suppositions avec leurs expériences. J'ai déjà lu à un endroit des
conseils d'experts et vu le conseil opposé ailleurs.
Google communique souvent sur les bonnes pratiques, leur stratégie est de dire que si votre
site est intéressant et bien construit il sera bien référencé. Cool, cela simpli e énormément
les connaissances en référencement !
Les bonnes pratiques de Google
› Il faut hiérarchiser le contenu de vos pages.

› Chaque page doit être accessible depuis au moins un lien statique.
› Créez un sitemap.xml avec toutes les pages de votre site.
› Limiter le nombre de liens dans votre page.
› Votre site doit être utile et clair. Il doit apporter quelque chose de neuf.
› Analysez les mots clés les plus pertinents de votre site et utilisez-les dans vos descriptions,
titres, etc.
› Ajoutez les mots clés pertinents d'une image dans sa balise alt
› Pour présenter les éléments les plus importants dans votre page, utilisez du texte plutôt que
des images.
› Assurez-vous que tous les liens de votre site pointent vers une page existante.
› Limiter la taille des url et assurez-vous qu'elles contiennent majoritairement des mots clés
pertinents.
› Evitez les "astuces" destinées à tricher sur le référencement
Les pratiques à éviter

› Evitez tout système de liens, comme les rings, etc.
› Evitez de copier coller le texte d'un site concurrent sans y apporter une plus value.
› Accumulation de mots clés non pertinents sur vos pages. Utilisez que le nécessaire!
› Evitez les pages satellites, optimisées pour une seul mot clé mais qui n'apporte aucune
information intéressante au lecteur.
› Corrigez vos textes, Google déteste les fautes d'orthographe.
Le référencement payant
Si vous avez un budget vous pouvez acheter du tra c. Cette solution se trouve toujours du
côté de chez Google - son service Adwords - qui permet de faire des enchères sur des mots
clés concernant votre activité. Vous payez la somme que vous voulez au clic. Plus votre
enchère est élévée, plus votre annonce sera visible.
Encodage
Encodage c'est quoi?
L'encodage est un jeu de caractères. Si deux documents s'échangent des données dans un
encodage di érent, il se peut que des caractères incorrectes s'a chent. Les plus utilisés en
France sont l'encodage ISO-8859-1, ISO-8859-15 et UTF8.
ISO-8859-1 Encodage Latin-1 / Europe occidentale
ISO-8859-15 Encodage Latin-1 / Europe occidentale contient plus de

caractère dont le symbole (€)
UTF8 Pour faire simple cet encodage est le plus complet
UTF8
En 2013, plus de 75% des sites internet utilisent l'encodage utf8, par expérience, je peux vous
conseiller de ne travailler qu'avec cet encodage.
Le problème de l'encodage c'est qu'il faut le spéci er à beaucoup d'endroits:
Au niveau d'apache dans .htaccess :
AddDefaultCharset UTF-8
Dans un chier PHP:
<?php header('Content-Type:text/html;charset=utf-8'); ?>
Dans un chier HTML:
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
Pour changer l'encodage MySQL vous devez éditer le chier /etc/my.cnf :
[mysqld]
#Set the default character set
default-character-set=utf8
#Set the default collation
default-collation=utf8_general_ci
Ajax
Il faut savoir que tous les retours ajax sont envoyés en UTF-8, si votre page est encodée dans
un autre jeu de caractères vous devez soit changer l'encodage du script, soit indiquer un
autre encodage en PHP, soit utiliser une fonction de traduction comme
› utf8_decode() qui convertit une chaine encodé en UTF8 en ISO-8859-1 ou

› utf8_encode() qui convertit une chaine encodé en ISO-8859-1 en UTF8.
Le problème de cette technique, c'est par exemple le caractère € qui n'est pas reconnu.
Sécuriser son site web

Sécurité, quels sont les risques?
Tout ce qui est public est vulnérable et fragile. Pour ce qui est de la sécurité il faut savoir que
si un jour un groupe d'informaticiens surdoués désireront faire tomber votre site
temporairement, ils auront de bonnes chances de réussir, même si toutes les mesures de
sécurité ont été prises. Le but de ce chapitre est de défendre votre site contre les attaques
des "skiddy", ces hackers débutants qui utilisent des outils tout fait pour pirater des sites web
sans protections sérieuses. Ce sont ces attaques qui representent une vrai menace.
Le cas des blogs, CMS, FORM, eboutique, etc.

Du moment que vous utilisez du code public que ce soit pour un logiciel ou un addon, vous
vous exposez au risque que si un jour une faille est découverte et qu'un utilisateur connait
quel type de logiciel vous utilisez, il saurait exploter cette faille et votre site sera vulnérable. Il
vous faudra donc vous assurer que votre logiciel est tout le temps mis à jour, puisque les
mises à jour ont pour objectif des corriger ces failles.
Droits des dossiers et fichiers
Comprendre la gestion des droits sur linux
Vous avez surement déjà entendu parler de la gestion des droits sur linux avec des nombre
comme 777 ou 505, etc.
Que représente ces chi res?
Propriétaire Groupe Autres
Lecture Ecriture Exécution Lecture Ecriture Exécution Lecture Ecriture Exécution
4 2 1 4 2 1 4 2 1
Les droits sont dé nit sur un nombre à 3 chi res. Le premier indique les droits du
propriétaire du chier, donc celui qui l'a crée, le deuxieme chi re indique les droits du groupe
associé au chier et le dernier indique le droits de tous les autres utilisateurs.
Le concept est de pouvoir additionner les droits. Le droit le plus élévé étant 7 puisque 4 + 2 +
1.
Un exemple pour illustrer la théorie

Je veux que mon dossier "images" ne peut être que lu et que par le propriétaire du chier :
chmod "images" 400
Je veux que mon dossier "images" peut être lu et possibilité d'écriture par le propriétaire du
chier:
chmod "images" 600
Il est évidemment déconseillé de changer les droits propriétaire au risque de nos plus pouvoir les
modi er par la suite!
Changer les droits avec FileZilla

Pour changer les droits de vos dossiers et chiers via FileZilla, faites un clic droit dans le
dossier distant puis cliquez sur "Droits d'accès aux chiers".
Puis indiquez les valeurs que vous désirez attribuer aux chiers et aux dossiers :
htaccess
Le chier .htaccess est un chier de con guration du serveur Apache qui permet de dé nir les
règles dans un dossier ou sous-dossier. Il permet notamment de dé nir une interdiction
d'accès à un dossier ou le protéger par un mot de passe, mais permet aussi de dé nir des
règles de redirections, etc.
Changer le fichier index par défaut

Vous pouvez dé nir quel chier sera appelé lors d'un accès à la racine de votre site:
DirectoryIndex index.php home.html
Personnaliser les messages d'erreurs

Il est possible de rediriger les utilisateurs sur la page que l'on souhaite en cas d'erreur
serveur, exemple un chier inacesssible, etc.
ErrorDocument 403 /403.php

ErrorDocument 404 /404.php
Protéger un répertoire par un mot de passe

Pour protéger un dossier par un mot de passe, il est nécessaire de créer deux chiers :
› .htaccess qui dé nit quel dossier il faut protéger

› .htpasswd qui contient les login et password
Syntaxe pour le chier .htaccess

AuthName "Dossier Protégé"
AuthUserFile "/chemin_absolue_du_dossier/.htpasswd"
AuthType Basic
Require valid-user
Syntaxe pour le chier .htpasswd
login:mot_de_passe_crypté
Pour crypter un mot de passe vous pouvez utiliser la fonction crypte de PHP :
Crypter mot de passe : Crypter
Protéger ses images

Il est possbile d'empêcher l'accès à certains chiers par un domaine. Exemple si un site vous
vole vos images, vous pouvez lui interdire l'accès avec la syntaxe suivante:
<Files *.png>
Order Deny, Allow
Deny from .nomdomaine.com
</Files>
Toutes les personnes (requêtes) provenant du domaine .nomdomaine.com ne pourront avoir

accès aux images, dont l'extension est .png, comprises dans le répertoire et ses sous-
répertoires.
Supprimer le PHPSESSID des URL

Google référence parfois les adresses de votre site avec en paramètre un PHPSESSID :
Exemple:
http://creersonsiteweb.net?PHPSESSID=hh40154z6e5f4ze6a0a0a0
ce qui ajoute un lien di érent en plus dans son index, et donc divise la popularité d'une page (
la duplication de données n'est jamais bonne pour le référencement de votre site web ) .
Pour éviter ce problème vous pouvez ajouter cette ligne dans votre .htaccess
php_flag session.use_trans_sid off
php_flag session.use_only_cookies on
Pour rediriger les adresses déjà impactées:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{QUERY_STRING} PHPSESSID=.*$
RewriteRule .* %{REQUEST_URI}? [R=301,L]
</IfModule>
Supprimer le PHPSESSID des URL chez OVH

Pour supprimer ce problème vous pouvez ajouter la ligne suivante dans votre .htaccess
SetEnv SESSION_USE_TRANS_SID 0
URL REWRITING
L'URL rewriting ( ou rééciture d'URL à la volée ) est une technologie très intéressante qui
permet d'améliorer son référencement, simpli e la navigation des utilisateurs, permet une
plus grande évolutivité de votre site web et assure des rediections complexes, grâce aux
expressions régulières.
A quoi sert l'URL rewriting

Concrètement, vous possédez par exemple un site web dynamique traitant de milliers de
sujets, l'adresse des pages pourrait ressemble à qqch comme cela:
creersonsiteweb.net?page=1&message=12
L'URL REWTRING vous permet d'écrire votre URL de cette manière :
creersonsiteweb.net/lesujetdevotrepage-1/message-explicatif-12
On remarque donc que les caractères super us ont été supprimés, on peut mettre également
un descriptif directement dans l'URL et ceci améliore la compréhension du contenu de la
page pour les moteurs de recerche mais également pour l'oeil humain qui sait de quoi traite
la page sans la visiter.
Activer l'URL rewriting

Sur wamp, cela peut se faire graphiquement:
Créer ensuite le chier .htaccess à la racine de votre site et indiquer le code suivant:
Options +FollowSymlinks
RewriteEngine On
Exemple de redirection
Nous souhaitons que l'adresse "test-bla-bla-bla" soit redirigé vers exemple.html :
Options +FollowSymlinks
RewriteEngine On
RewriteRule ^test-bla-bla-bla$ exemple.html [L]
Compresser ses fichiers

Vous pouvez compresser vos chiers .js à cette adresse: Lien  (http://closure-
compiler.appspot.com/home)
Initiation HTML

Un site web c'est quoi? (/page-initiation-un-site-web-c- HTML c'est quoi? (/page-apprendre-html)
est-quoi)
Créer une page web (/page-html-creer-une-page-web)
Dév. back-end / front-end (/page-initiation-developpeur-
Les balises (/page-html-balises)
front-end-back-end-di erences-formation-apprendre-c-
est-quoi) Les attributs (/page-html-attributs)
Que dois-je maîtriser ? (/page-initiation-que-dois-je- Les tableaux (/page-html-tableaux)
maitriser)
Les listes (/page-html-liste-ul-ol-li)
Design /ergonomie web (/page-initiation-design-
ergonomie-web) Les images (/page-html-images)
Navigateur Chrome (/page-initiation-navigateur-google- Les liens (/page-html-liens)
chrome) Les inputs (/page-html-input)
L'éditeur de texte (/page-initiation-editeur-texte)
Les formulaires (/page-html-formulaire)
Installer serveur web (/page-initiation-installer-serveur-
Caractères spéciaux (/page-html-caracteres-speciaux)
web)
Photo ltre (/page-initiation-photo ltre-retouche-image)
OVH Hébergement (/page-initiation-ovh-heberger-votre-

site-web)
FTP et lezilla (/page-initiation-ftp- lezilla)
Dictionnaire informatique (/page-initiation-dictionnaire-

informatique)
CSS PHP
CSS c'est quoi? (/page-apprendre-css) PHP c'est quoi? (/page-apprendre-php)
Les sélecteurs (/page-css-selecteur) Mon premier script (/page-php-creer-un-script)
L'héritage (/page-css-heritage) Les commentaires (/page-php-commentaires)
Les propriétés (/page-css-proprietes) Variable (/page-php-variable)
Les couleurs (/page-css-couleurs) Fonction (/page-php-fonction)
La police (/page-css-font) Array / Tableau (/page-php-array)
Les marges (/page-css-marges) Loop / boucle (/page-php-loop-boucle)
Position (/page-css-position) Conditions (/page-php-condition)
Flottant (/page-css- oat) GET et POST (/page-php-get-post)
Les pseudo class (/page-css-pseudo-class) Cookies (/page-php-cookies)
Les unités de mesure (/page-css-unite-mesure-px-pt-em- Sessions (/page-php-sessions)

cm-mm-in-pc)
Variables serveur (/page-php-variable-server-
Responsive design (/page-css-responsive-design) superglobale)
Astuces CSS (/page-css-astuces) Dates (/page-php-date-time-timestamp-mktime)
Animations CSS (/page-css-animations)
PHP Avancé Bootstrap

Bootstrap c'est quoi? (/page-apprendre-bootstrap-
twitter)
La grille (/page-bootstrap-grille)
Syntaxe alternative (/page-php-syntaxe-alternative)
Les boutons (/page-bootstrap-boutons)
Ecrire/Lire un chier (/page-php-lire-et-ecrire-un- chier)
Badges et Labels (/page-bootstrap-badges-labels)
Expressions régulières (/page-php-expressions-
Images / Glyphicon (/page-bootstrap-images)
regulieres-regex)
Les alertes (/page-bootstrap-alert)
POO (/page-php-programmation-orientee-objet)
Responsive tables (/page-bootstrap-tableau-table-
PDO (/page-mysql-php-pdo)
responsive-design)
JSON (/page-php-json-encode-decode)
Tooltip (/page-bootstrap-tooltip-info-bulles)
XML (/page-apprendre-xml)
Carousel (/page-bootstrap-carousel)
Import / Export CSV (/page-php-import-export-csv)
Fenêtre dynamique (/page-bootstrap-modal-fenetre-
Envoyer un mail (/page-php-send-envoyer-mail-email) dynamique)
Fonction récursive (/page-php-recursivite-fonction- Bootstrap wrap / Bootswatch (/page-bootstrap-wrap-

recursive) bootswatch)
Convertir page web en PDF (/page-php-convertir-page- Font Awesome (/page-bootstrap-font-awesome)

web-html-en-pdf)
javascript / jQuery MySQL
jQuery c'est quoi? (/page-apprendre-jquery) Mysql c'est quoi? (/page-apprendre-mysql)
Javascript (/page-jquery-javascript) SQL (/page-mysql-sql)
Les selecteurs (/page-jquery-selecteurs) SQL CREATE (/page-mysql-sql-create)
Manipulation DOM (/page-jquery-dom-manipulation) SQL INSERT (/page-mysql-sql-insert)
Evènements (/page-jquery-event-evenements) SQL SELECT (/page-mysql-sql-select)
Ajax (/page-jquery-javascript-ajax) SQL UPDATE (/page-mysql-sql-update)
Plugins jQuery (/page-jquery-extensions-plugins-addons) SQL DELETE (/page-mysql-sql-delete)
Créer extension (/page-jquery-creer-extension) PHPMyAdmin (/page-mysql-phpmyadmin)
AngularJS (/page-angular-js-angularjs-apprendre- Les jointures (/page-mysql-sql-jointures)

javascript-cours-tuto-exemple-example)
Stocker mot de passe (/page-mysql-bien-stocker-mot-
de-passe-password-utilisateur-md5-salt)
Symfony 2 Prestashop
Introduction symfony (/page-symfony-introduction- Installer eboutique Prestashop (/page-eboutique-

framework-apprendre) prestashop-apprendre-installer)
Installer symfony (/page-symfony-installation- Gestion Prestashop (/page-eboutique-apprendre-

framework-apprendre) gestion-eboutique-back-o ce)
Bundles (modules) (/page-symfony-bundles-modules- Personnaliser Prestashop (/page-eboutique-

creer-apprendre-installer-framework-php) personnaliser-prestashop-theme-design)
Route (/page-symfony-route-framework-php-apprendre) Modules Prestashop (/page-eboutique-modules-

prestashop)
Controller (/page-symfony-controller-controllers-
controlleur-framework-php-apprendre)
TWIG (/page-symfony-twig-framework-template-html-
apprendre-framework)
Assetic (/page-symfony-assetic-framework-php)
Bootstrap / Font Awesome (/page-symfony-bootstrap-

twitter-font-awesome-js-css-framework-php)
AngularJS (/page-symfony-angular-angularjs-js-
framework-apprendre)
Doctrine / Entités (/page-symfony-entity-entites-

doctrine-orm-framework)
Formulaires (/page-symfony-form-formulaire-creer-
Optimiser
apprendre-html-php-framework)
Mise en prod (/page-symfony-mise-en-prod-production-

Linux
framework-php)
Bundles FOS (/page-symfony-fos-bundles-modules-

creer-apprendre-installer-framework-php)
SécuritéHTTP
En-tête (/page-symfony-security-securite-securiser-role-
/ Cache (/page-cache-en-tetes-http- Linux c'est quoi? (/page-apprendre-linux)
admin-user-annotations-yml-framework-php)
modi er)
Emuler Linux (/page-linux-emulation-virtualbox-
Services
SEO (/page-symfony-services-service-framework-
Référencement (/page-seo-referencer-son-site- machine-virtuelle-ubuntu)
php)
internet)
Installer Linux Ubuntu (/page-linux-installer-ubuntu)
API REST (/page-symfony-api-rest-framework-php)
Encodage (/page-encodage)
Les commandes linux (/page-linux-commandes-ubuntu)
Sécuriser son site (/page-securiser-son-site) Les droits utilisateurs (/page-linux-gestion-des-droits-
ubuntu-chmod)
.htaccess (/page-htaccess)
Con gurer Ubuntu (/page-linux-con gurer-votre-
URL Rewriting (/page-url-rewriting)
ubuntu)
Sass Compass (/page-sass-compass-css-installer-
Installer Apache MySQL PHP (/page-linux-installer-
comprendre-apprendre)
serveur-web-php-mysql-apache)
Co eeScript (/page-co eescript-co ee-script-javascript-
Installer Nginx + PHP5 FPM (/page-linux-nginx-php5-
compiler-pretty-printed-ruby)
fpm-debian-ubuntu)
Grunt (/page-grunt-minimi er-optimiser-compiler-
Con gurer VHost (/page-linux-con gurer-virtual-host-
compresser-images-tests-unitaires-synatxe-veri er-css-
vhost-apache)
js-concatener)
Installer serveur SMTP (/page-linux-installer-smtp-
Sitemap.xml (/page-sitemap-xml)
ssmtp-serveur-server)
Convertir images (/page-jpg-to-png-convertir-image-
Capture écran / gif (/page-linux-capture-ecran-video-gif-
format-changer-ligne-commande-ubuntu-linux)
ash ubuntu)
Liens
Apprendre HTML (/page-apprendre-html)
Apprendre CSS (/page-apprendre-css)
Apprendre PHP (/page-apprendre-php)
Apprendre JQUERY (/page-apprendre-jquery)
Apprendre MySQL (/page-apprendre-mysql)
Apprendre XML (/page-apprendre-xml)
Partenaires
Devenir partenaire
Apprendre python (https://python-django.dev)
CSSW
Contact
Poser une question (/page-question)

Un Site Web, C'est Quoi ?

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Un Site Web, C'est Quoi ?

Transféré par

Droits d'auteur :

Formats disponibles

 Accueil (/page-apprendre-a-faire-un-site-web)  Contact  Menu

Un site web, c'est quoi ?

La di érence étant une interactivité avec l'utilisateur.

UNE QUESTION SUR L'ARTICLE? (/page-question)

Que dois-je maîtriser ?

Le design et l'ergonomie web

Le navigateur Google Chrome

Lire les entêtes HTTP

Les éditeurs de texte

Les raccourcis le plus utiles de Sublime Text 2

Ctrl + X Supprimer une ligne

Ctrl + P Permet de naviguer dans n'importe quel chier

Ctrl + R Déplacer le curseur à une fonction du chier en cours

Ctrl + L Sélectionner la ligne en cours

Ctrl + D Sélectionner le mot entier en cours

Ctrl + Shift + D Dupliquer la ligne en cours

Ctrl + M Diriger le curseur vers l'autre extrémité d'une fonction

Ctrl + G Déplacer le curseur à la ligne X du chier

Ctrl + Shift + T Réouvrir le dernier chier fermé

CTRL + ALT + P Switcher de projet

Pour les utilisateurs Windows, ce petit logiciel gratuit est un incontournable de la

UNE QUESTION SUR L'ARTICLE? (/page-question)

Wampserver, serveur web pour Windows

Cliquez ici  (http://www.wampserver.com/) pour télécharger le logiciel WampServer

Choisissez sur le site la version qui correspond à votre système d'exploitation.

Attribuer une url local à votre site web

Ajoutez ce code en bas de page:

Ouvrez ensuite votre navigateur et entrez l'adresse http://xxx.local/test.txt

Installer un serveur SMTP sur Windows

UNE QUESTION SUR L'ARTICLE? (/page-question)

Retouche d'images avec Photofiltre

Il est disponible en téléchargement à cette adresse: Télécharger Photo ltre 

Importer une image

Redimensionner une image

Sélectionnez ensuite la partie de votre image que vous souhaitez:

ou appuyez sur la touche J de votre clavier.

Contourner la partie de votre photo que vous voulez isoler :

Puis valider la tolérence à la couleur verte:

OVH, hébergement web

Rendez vous sur le site d´OVH  (http://www.ovh.com)

Vous pourrez choisir le nom de domaine de votre site web, exemple:

Vous tomberez sur cette page:

Indiquez le mot de passe que vous désirez.

FTP c'est quoi?

Filezilla, client FTP

Une nouvelle fenêtre apparait. Cliquez sur le bouton "Nouveau" :

Cliquez sur le bouton valider.

UNE QUESTION SUR L'ARTICLE? (/page-question)

HTML, les balises

<input type="checkbox" value="1" />

Les balises les plus utilisées sont les suivantes:

Commentaire

<a> Lien hypertext

<b> Texte en gras

<body> Corps de la page

<br /> Permet de sauter une ligne

<caption> Titre d'un tableau

<em> Emphase ( italique )

< eldset> Permet de regrouper des éléments

<h1> Titre d'importance 1

<h2> Titre d'importance 2

<h3> Titre d'importance 3

<h4> Titre d'importance 4