Débuter en programmation web

Portée de ce tuto

Ce tutoriel est une initiation à la programmation Web et porte surtout sur le couple HTML & CSS.
N'attendez pas à trouver dans ce tuto toutes les nouveautés apportées par la version 5 de HTML et 3 de CSS.
Ce tuto ne traite que des balises HTML et le propriétés CSS les plus courantes.

Les nouvelles balises et attributs HTML, les propriétés CSS les plus récentes sont présentées respectivement dans deux autres tutos de mon site :
• HTML version 5
• CSS version 3

Quant au langage de programmation du web côté client, je veux parler de JavaScript, il existe aussi dans mon site, un didacticiel : JavaScript & jQuery

Vous trouverez aussi dans le présent tuto quelques pages sur PHP & MYSQL.
Même dans le cadre de la programmation web "front end" il peut être intéressant d'avoir des notions de PHP.

Accéder directement aux pages dédiées à PHP & MySQL

Pourquoi apprendre les langages du Web ???

Vous vous demandez sans doute pourquoi apprendre des langages tels HTML, CSS et des notions de PHP et de JavaScript alors qu'il y a des plateformes d'hébergement (donc des sites) et des logiciels de type SGC (ou CMS).

Les plateformes d'hébergement

La plateforme la plus connue est wix.com.
Wix est une plateforme en ligne qui permet de créer des sites web en HTML5 et leur version mobile.
Wix permet à ses utilisateurs de créer leur site uniquement à partir d'une interface visuelle et sans produire de code source.
Ce type d'éditeur visuel intuitif est connu sous l'acronyme WYSIWYG (What You See Is What You Get).

D'abord ces plateformes ne sont gratuites que pour une période d'essai OU pour des fonctionnalités de base. Si vous voulez disposer de plus d'outils il vous faudra payer ... Votre site hébergé sur certaines de ces plateformes dites gratuites risque d'être envahi de publicité.

Autre inconvénient des ces éditeurs en ligne vous dépendez d'une entreprise qui peut être rachetée voire disparaître ou qui peut changer brutalement sa politique tarifaire bref vous êtes "prisonnier".

Les possibilités de personnalisation sont limitées. Parfois il est impossible de changer de modèle de présentation au risque de tout perdre ... Pour des raisons de sécurité certains types de fichiers ne peuvent pas être téléversés sur votre site. Pour prendre un exemple, il vous est interdit d'insérer une image vectorielle au format SVG sur la plateforme wordpress.com qui gère votre blog.

C'est vrai que grâce à une plateforme il y a un gain de temps au démarrage puisqu'on évite l'étape d'apprentissage du HTML & CSS mais un "builder" ne vous fais pas économiser du temps ensuite ... : pour la maintenance quasi quotidienne du site.

Créer son site en utilisant un CMS (ou SGC)

Pour ceux qui préfèrent éviter de coder mais qui souhaitent parfois voir le code généré, il existe la solution SGC.
Un SGC (système de gestion de contenu) ou CMS en anglais (Content Management System) est un logiciel qui permet la création et mise à jour des pages via une éditeur de type WYSIWYG (donc sans que vous ayez à coder en HTML & CSS).
En fait les contenus des pages sont stockés dans une base de données.

L'utilisation d'un CMS suppose quand même de bonnes connaissances en informatique.
Vous devez acheter un nom de domaine et un hébergement.

Le CMS le plus connu est WordPress. Ce SGC écrit en PHP repose sur une base de données MySQL et est distribué par la fondation WordPress.org.
Le temps d'apprentissage pour maitriser l'utilisation d'un SGC n'est pas négligeable ...

Attention ne confondez pas la plateforme d'hébergement WordPress.com (comparable à Wix.com) avec le CMS proposé par WordPress.org.
Pour en savoir plus

Installer le CMS WordPress sur son ordinateur

Si vous voulez découvrir le CMS WordPress il faut l'installer "en local".

Au préalable il faut que vous ayez installé un logiciel tel WampServer.
WampServer est une plateforme de développement qui permet de faire fonctionner des scripts PHP sur votre PC.

Wampserver est en fait un environnement comprenant :
• Apache : serveur HTTP
• MySQL (Système de Gestion de Bases de données)
• PhpMyAdmin : application web pour administrer une base de donnée

Mettre "les mains dans le cambouis"

Je veux dire par cette expression populaire : saisir directement le code HTML & CSS donc ne pas utiliser des éditeurs WYSIWIG
Sachez que la production "artisanale" de site est considérablement simplifiée en particulier grâce aux progrès du CSS.
Un seul exemple, grâce à CSS plus besoin de développer plusieurs versions d'un même site selon le type de terminal du visiteur. Les "media queries" (de la spécification CSS version 3) rendent la page "responsive" (qui s'adapte à tous types d'écrans).
Un développeur Web averti crée ses propres outils pour la maintenance de sites : modèles de page, fichiers d'inclusion, feuille de style externe, etc.