Accueil

Traduction

Débuter en programmation web - sommaire

Débuter en programmation web - recherche

L'auteur : Patrick Darcheville

Vous pouvez me contacter via Facebook pour questions & suggestions : Page Facebook relative à mon site

Débuter en programmation web : initiation au HTML & CSS

Pour s'initier à la programmation web il faut apprendre deux langages : HTML & CSS.

Ce tutoriel pourrait aussi s'intituler "débuter en HTML & CSS". En effet ces deux langages sont incontournables en matière de programmation web.
Même si vous développez avec des langages "côté serveur" comme PHP ou Python, les templates de votre site seront encodés en HTML et il y aura une ou plusieurs feuilles de style CSS.
Pour des sites web statiques vous pouvez vous contentez des langages HTML & CSS (voire un peu de JavaScript pour des effets visuels).
Par contre pour des applications web, l'utilisation d'une base de données exige l'emploi d'un langage "côté serveur" (PHP ou Python).

Ci-dessous une animation réalisée uniquement avec HTML & CSS.
Survolez puis cliquez sur l'image ci-dessous et observez les changements opérés.
Sur survol : changement d'image et ajout d'un bordurage.
Sur clic : changement d'image et ajout d'un ombrage et de coins arrondis.

Le code correspondant :

Si vous n'y comprenez rien ; vous devez donc lire attentivment ce tuto !

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.

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

Dans ce tuto quelques chapitres sont consacrés à la programmation web "côté serveur" avec une initiation au couple PHP & MISQL.
Même un développeur web "front-end" doit 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 JavaScript alors qu'il y a des plateformes d'hébergement (donc des sites) et des logiciels de type SGC (ou CMS) et des langages côté serveur tels PHP, JAVA & Python.

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.

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.

Installer WordPress en local

Les langages côté serveur

Développer des sites et applications web avec PHP ou Java ou Python ne vous dispense pas de connaitre les langages de base de la programmation web (HTML & CSS). En effet les "templates" PHP ou Java ou Python intègrent du HTML.