Accueil

Traduction

Débuter en HTML & CSS - sommaire

Pour des pages dynamiques : PHP & SQL

Quelques bonnes raisons d'utiliser PHP Les tableaux en PHP Les fonctions en PHP Les structures de contrôle en PHP Traiter les données de formulaire avec PHP Sessions et cookies en PHP Site avec une base de données : notions de SQL SQL : les requêtes SELECT SQL : les requêtes INSERT, UPDATE, DELETE

Débuter en HTML & CSS - recherche

L'auteur : Patrick Darcheville

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

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 dans l'aspect de la page.

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.

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):

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.

Installer WordPress en local

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 donc commune à plusieurs pages, etc.