Accueil

Débuter en HTML & CSS

Ci-dessous une animation réalisée uniquement avec HTML & CSS.
Survolez puis cliquez sur la boite contenant l'image et observez les changements radicaux.

Le code consiste surtout en du CSS.

Portée du tuto "débuter en HTML & CSS"

Ce didacticiel est une initiation à la programmation Web et porte surtout sur le couple HTML & CSS.
Mais vous y trouverez aussi avec quelques notions de PHP et de SQL.
En effet on ne peut pas tout faire avec HTML & CSS. Pour un site style "joli catalogue numérique" le couple HTML & CSS est suffisant. Mais si vous voulez une mise à jour automatique des pages il faut que le site comprenne une base de données et alors il faut recourir à un autre couple de langages : PHP & MYSQL.
Aussi vous trouverez dans ce tuto quelques pages d'initiation à PHP et à MYSQL ainsi qu'une présentation de JavaScript.

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 éditeurs de site Web gratuits que l'on appelle aussi des "buiders" de sites.
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 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 à un "buider" 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 pour la maintenance quasi quotidienne du site.

Sachez aussi que la production "artisanale" de site a été considérablement simplifiée en particulier grâce à 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" rendent la page "responsive" (qui s'adapte à tous types d'écrans).
Un développeur Web averti crée ses propres outils pour la maintenance rapide des sites dont il est responsable (modèle de page, fichiers d'inclusion, feuille de style externe,etc.)

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. Les nouvelles balises et propriétés CSS 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 - JavaScript - il est simplement évoqué dans le présent tuto mais il y a dans mon site tout un cours sur JavaScript & jQuery

Sommair de ce tuto