Le site de Patrick Darcheville

Débuter en HTML & CSS - notions de PHP & SQL

Survolez puis cliquez sur chaque boite et observez ...

boite 1
boite 2

Ci-dessus une animation réalisée uniquement en HTML & CSS pour vous montrer que l'on peut réaliser une certaine interactivité de la page sans pour autant devoir recourir à la programmation via JavaScript ou PHP.
Vous trouverez le code correspondant en bas de cette page.
Sur survol le carré transparant se transforme en rond opaque et ombré ; sur clic le rond double de taille !

Portée de ce tutoriel

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 JavaScript, de PHP et de SQL.
On ne peut pas tout faire avec HTML & CSS car il ne s'agit pas de langages de programmation : pas de variables, de boucles, de fonctions, etc.
Si vous voulez, par exemple, afficher l'instant présent dans votre site vous devez utiliser PHP (ou JavaScript). Pour inclure un fichier dans une page Web vous avez besoin de PHP. Pour réserver une page à un public autorisé (accès avec un mot de passe) PHP est incontournable.

Grâce à une base de donnée votre site devient dynamique. La maintenance du site est grandement facilitée. Plus besoin de changer chaque jour le code HTML d'un page pour l'actualiser il suffit de modifier la table de données qui est liée à cette page.

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). Il y a également dans mon site tout un tutoriel sur le JavaScript & jQuery : HTML version 5 CSS version 3 JavaScript & jQuery

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és. 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 "medias 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 de son site (modèle de page, fichiers d'inclusion, feuille de style externe,etc.)

Je conseille aux débutants d'utiliser intelligemment un éditeur de page Web WYSIWIG ("What You See Is What You Get") tel BlueGriffon qui est gratuit.
Je veux dire par là qu'il ne faut pas se contenter de demander au logiciel de générer le code HTML & CSS ; il faut aussi étudier ce code source obtenu afin de se familiariser progressivement avec la syntaxe.

Les différents chapitres de ce tutoriel

Le code de l'animation

CSS :

	#conteneur {display : flex; background : pink ;margin : auto; width : 100%; height : 200px;}
	.boite {width :100px  ; height : 100px; margin : 50px 2% auto 2% ; opacity :0.5;}
	.boite:hover {border-radius : 50px ; box-shadow : 5px 5px 5px gray; opacity :1 ; }
	.boite:active {width : 200px ; height : 200px ; border-radius : 100px; box-shadow : 10px 10px 10px gray;  }
	

J'ai utilisé la nouvelle technique de positionnement des boites dans leur conteneur : display flex.
Deux événements gérés par CSS : sur survol (hover) et sur clic (active).

HTML :

<div id ="conteneur"> <p>Survolez puis cliquez sur chaque boite et observez ...</p> <div class ="boite" style ="background :orange;" >boite 1</div> <div class ="boite" style ="background :purple;">boite 2</div> </div>