Débuter en programmation web - sommaire

Débuter en programmation web - chapitre introductif

Pour des sites web statiques vous pouvez vous contentez des langages HTML & CSS (voire un peu de JavaScript pour des effets visuels sophistiqués).
Par contre pour des sites web dynamiques (les utilisateurs font évoluer le contenu du site) il faut recourir à un langage capable de manipuler la base de données et retourner au navigateur du HTML standard.
Le langage "côté serveur" le plus utilisé est PHP mais ça peut être aussi Java ou Python voire Node.js.
Le SGBDR (Système de Gestion de Bases de Données Relationnelles) le plus utilisé conjointement avec PHP est MySQL.

Ce tuto intitulé "débuter en programmation web" comprend deux parties (voir sommaire) :
• Initiation au HTML & CSS
• découverte de PHP & MYSQL à partir du chapitre 20

Ci-dessous une animation réalisée uniquement en HTML & CSS.

Une cure d'amaigrissement très efficace !

Survolez l'image : changement d'image et ajout d'un bordurage.
Cliquez sur l'image : changement d'image et ajout d'un ombrage et de coins arrondis.

Le code correspondant

Les photos sont coquines mais l'objectif pédagogique est très sérieux : vous montrer les possibilités d'animation du couple HTML & CSS. CSS : #boite {width : 300px ; height : 400px; margin :auto; background-image :url(../images/femme_grosse.jpg); background-size: cover;} #boite:hover {background-image :url(../images/femme_normale.jpg); background-size: cover; border : 10px solid gold; } #boite:active {background-image :url(../images/femme_maigre.jpg); background-size: cover; box-shadow : 10px 10px 10px gray; border : none; border-radius : 50px; } HTML : <div id ="boite"></div> ...

Si vous n'y comprenez rien au code, alors lisez attentivement ce tuto !
Notez que ce code correspond surtout à une feuille de style CSS (un ensemble de règles de style). L'emploi du CSS3 permet ici des effets sur survol, sur clic sans pour autant devoir recourir à la programmation JavaScript.

Portée de ce tuto

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 dans le même 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 : la galaxie JavaScript

Dans ce tuto quelques chapitres sont consacrés à la programmation web "côté serveur" avec une initiation au couple PHP & MYSQL.
En effet même un développeur web "front-end" doit avoir quelques notions de PHP.
Découverte de PHP & MySQL

Pourquoi apprendre les langages du Web ???

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

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. Ainsi il vous est interdit d'insérer une image vectorielle au format SVG sur la plateforme wordpress.com qui gère votre blog.

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

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

Une vidéo utile : installer WordPress en local