Ce cours n'a pas la prétention d'apprendre les langages cités pour un usage professionnel, mais il propose une approche simple et décomplexée de ces langages.
Pour suivre ce cours, le mieux est de cheminer dans l'ordre html, css, php et sql.
Lisez-le comme un journal, puis picorez des articles.
A l'intérieur de chaque chapitre, lire la présentation théorique puis effectuer les exercices qui ont pour but d'apprendre (ce qui est pas mal..)et de comprendre (ce qui est mieux !).
Note : le javascript ne sera pas vu ici pour l'instant.
Pour commencer, vous aurez besoin de :
- Internet ;)
- Un éditeur de texte (/ex. : notepad++)
- Un package serveur web (/ex. : wampServer, UwAmp, etc. ...)
Faut-il des outils professionnels (visualStudio, éclipse, ...) ?
Non, beaucoup d'outils en ligne, libres de droits d'utilisation suffisent amplement à notre travail.
Bonne lecture et bon apprentissage
Définitions des langages utilisés.
HTML (HyperText Markup Language) et CSS (Cascade Style Sheet)
HTML est LE langage de base utilisé par tous les sites web.
Son principe est simple :
Une page web contient du texte brut (une suite de caractères) encadré par des balises qui servent de directives de présentation et de mise en forme pour les navigateurs.
Les balises servent à définir l'aspect du texte et le regroupement des paragraphes, l'inclusion des objets (images, sons, vidéos, ...) dans la page.
On Commence par écrire un fichier texte (renommé en xxxxx.html) et on ajoute la structure et le contenu de la page.
Ensuite, on le met en ligne sur le site web (ou pas) et on l'ouvre avec le navigateur.
Site démo
Aller au cours HTML.
CSS (Cascade Style Sheet), feuilles de style
Le langage html est toujours associé aux feuilles de style pour la mise en forme (couleurs, mouvements, etc. ...).
Les feuilles de styles sont des pages contenant des propriétés de mise en forme.
Les propriétés :
- Définissent l'aspect et la position des éléments de texte dans la page.
- Ont une syntaxe simple : on indique le sélecteur puis les propriétés et leurs valeurs.
- S'appliquent à sélécteur : balises, identifiants (id) ou noms de style (classes) associés aux balises.
L'avantage est dans l'utilisation d'un seul ensemble de feuilles pour toutes les pages du site. Ainsi toute modification du CSS est automatiquement appliquée à toutes les pages du site.
Afficher la feuille CSS de cette page.
Aller au cours CSS
PHP (PHP : Hypertext Preprocessor)
Le PHP est très différent des précédents.
Tout d'abord, ce langage sert à produire du HTML, css, etc. ...
Ensuite, ce langage s'exécute sur le serveur et donc, n'est pas visible par le client.
Enfin, il permet de communiquer avec les bases de données via le langage SQL.
C'est un langage de programmation qui permet de manipuler de l'information, créer des applications, qui permet une programmation structurée et/ou objet, etc. ...
Bref ! c'est un vrai langage de programmation !
Javascript (non étudié ici)
Le Javascript est un langage de programmation exécuté par le navigateur.
Ce langage permet, par exemple, de vérifier les informations avant validation des formulaires.
Cependant, il est surtout utilisé pour manipuler ou ajouter des balises, des styles, créer des effets, et compléter le CSS.
Ce langage est exécuté exclusivement chez le client (quoi que ..).
Architecture logicielle et outils
Voir le chapitre dédié. Mais ...
Pour la majorité des cours, le travail en ligne est suffisant (/ex : JsFiddle).
Cependant, il est préférable d'utiliser un outil local de développement.
Vous pouvez commencer par créer un espace disque réservé au développement, directement à la racine de C. Éviter de placer le dossier de travail dans "Mes Documents".
Pour le cours PHP, il nous faudra un serveur internet local (a minima), par exemple (hé hé) :
| Outil | Windows | Linux | Mac OS |
|---|
| Serveur (AMP) |
Wampserver (préféré) ou
EasyPHP |
LAMP
apt install apache2 mariadb php |
Mamp = ?? |
| Éditeur de texte |
Notepad++ (préféré) ou
HTMLkit, ... |
nano (ligne de commande) ou
gedit (graphique) |
|
| Gestionnaire de BDD |
phpmyadmin ou équivalent |
|
AMP = Apache, MariaDB/MySQL, PHP
Voir quelques exemples de propriétés dans le cours CSS.
Accéder directement à la référence des propriétés CSS de base