XP-Infos n° 6 – décembre 2009

HTML, CSS, JavaScript, PHP, MySQL : petites explications des technologies Web

Article

Il est difficile de comprendre les technologies Web lorsqu’on ne met pas soi-même les mains dans le cambouis. Voici quelques explications de différentes technologies utilisées dans la mise en œuvre d’un site Internet.

(X)HTML : langage de structuration des pages Web

Le HTML et sa variante plus stricte XHTML sont des langages de balisage des pages Web. Il n’y a pas si longtemps, le HTML servait à définir aussi bien la structure des pages que leur présentation visuelle. Aujourd'hui, ces deux aspects doivent être bien distincts et le X/HTML est destiné uniquement à représenter la structure d’une page : titres, sous-titres, paragraphes, images, formulaires de saisie, liens hypertextes, etc.
C’est la base d’une page Web, parfois la seule considérée et utilisée par le logiciel qui visite cette page, comme les moteurs de recherche ou les navigateurs textuels.

On qualifie de « statiques » les pages dont le code X/HTML n’est modifié ni par JavaScript, ni par PHP avant ou après l’affichage dans le navigateur.

CSS : langage de présentation des pages Web

Le code CSS (Cascading Style Sheets, ou feuilles de styles en cascade) permet de modifier la présentation des éléments X/HTML : couleur, taille, police de caractères, mais aussi position sur la page, largeur, hauteur, empilement, bref tout ce qui touche à la mise en page d’un document X/HTML.
Ainsi, un même document X/HTML pourra changer d’apparence sans changer de structure, grâce uniquement à la modification des règles CSS qui lui sont appliquées.
La séparation de la structure et de la présentation facilite ainsi la construction, mais aussi la maintenance et l’évolution des pages Web.

JavaScript : langage de programmation côté client

Le JavaScript est un langage qui est lu et exécuté par votre navigateur – le client – (donc directement sur votre ordinateur) et qui permet de créer des réactions en réponse à des événements sur la page ou à des actions de l’utilisateur. Par exemple :

Auparavant, le code JavaScript était souvent intégré au code HTML, mais là encore, on préconise aujourd’hui la séparation des deux langages pour des raisons d’organisation du code, mais aussi d’accessibilité du site.
Le JavaScript est capable lui-même d’écrire du code X/HTML ou CSS, et donc de modifier totalement la base d’une page Web.

PHP : langage de programmation côté serveur

Le PHP est un langage qui est lu et exécuté sur le serveur où se trouve la page X/HTML, avant que celle-ci ne soit envoyée au navigateur (le client) qui en demande l’affichage. Par exemple, vous avez rempli un formulaire et cliqué sur le bouton, le serveur reçoit les données envoyées par le navigateur, le code PHP traite ces données et écrit le X/HTML de la nouvelle page Web que le serveur Web renvoie ensuite au navigateur.
Le code XHTML d’une page peut ainsi être entièrement écrit à l’aide de code PHP, ou bien le code PHP peut être inséré à un endroit précis d’une page, pour compléter le code X/HTML, CSS, voire JavaScript.

Il existe de nombreux autres langages côté serveur, comme ASP.NET ou Coldfusion.

On qualifie de « dynamiques » les pages dont toutes ou certaines parties sont écrites par PHP (par exemple, un panier de commande au sein d’une page d’un site de commerce), car un langage de programmation modifie ou complète le code X/HTML « statique » de la page.

MySQL : système de base de données

MySQL est un système de base de données, souvent couplé au langage PHP. Ce système utilise le langage SQL (Structured Query Language, langage structuré de requêtes) pour interroger, alimenter ou mettre à jour les bases de données. Ainsi, dans le cas d’un site Web, le langage PHP va établir la connexion à la base de données, puis envoyer le code SQL nécessaire aux opérations sur la base de données. En retour, MySQL va renvoyer des données ou des informations, qui seront traitées par le code PHP.

Il existe de nombreux autres systèmes de base de données, comme Oracle ou Microsoft SQL Server.

Dans les numéros de XP-Infos à venir, nous verrons un peu plus en détail chacune de ces technologies Web, afin que vous puissiez mieux les identifier, mieux les comprendre et mieux juger de la pertinence de leur utilisation sur votre site Internet .

Trucs et astuces

Voici quelques éditeurs de code gratuits :

Dernières réalisations en date

Qualidis : interface graphique

Phister Traductions : http://www.phister.fr

Teresa Intrieri : http://www.ti-traductions.com

Le mois prochain

Le X/HTML : initiation et indices de qualité du code.

XP-Internet vous conseille et vous aide à utiliser au mieux votre site Web, pour qu’il devienne un véritable outil destiné à augmenter vos ventes, à améliorer la perception de vos produits ou de vos services auprès de vos clients, et à mieux vous faire connaître.

Créez un site pas cher avec XP-Internet.com

Témoignages clients

“Nous voulions être présents et très rapidement référencés sur le Net. Ce résultat (2e sur 14 100 sur Google un mois après la mise en ligne) a été possible grâce aux compétences de programmation utilisées par XP-INTERNET.
Nous sommes donc très satisfaits de la réalisation de notre site Internet par M. PITEL qui s'est montré très perspicace et réactif envers nos nombreuses demandes. Nous avons aussi apprécié sa minutie et son perfectionnisme qui ont permis d'atteindre nos objectifs. Nous avons enfin trouvé notre partenaire pour nos solutions WEB !”

Baticom SCI

“Une fois de plus, je vous remercie de votre travail et professionnalisme.”

UNETICA

“Les compétences de XP-Internet.com sont venues parfaitement compléter celles de notre équipe informatique interne, et nous ont permis de réaliser la refonte de notre ancien site Internet avec rapidité et efficacité.”

G2C Informatique

Plus de témoignages...

Projets à l’affiche

http://www.qualidis.fr

Client : Qualidis

Intervention : Création graphique originale. Codage XHTML + CSS.

http://www.phister.fr

Client : Phister Traductions

Intervention : Création graphique originale. Rédaction des contenus. Construction et codage de l'ensemble du site.

http://www.ti-traductions.com

Client : Intrieri Teresa

Intervention : Création graphique originale. Rédaction des contenus. Construction et codage de l'ensemble du site.

http://www.baticom-sci.fr/blog/

Client : Baticom SCI

Intervention : Améliorations et ajouts sur une interface graphique tierce achetée par le client. Codage XHTML + CSS d'un modèle WordPress. Conseil en SEO.

Portfolio...

Partenaires

  • Consultant SEO
  • 88x31wout_anim
  • Le Centre d'affaires du Pays d'Aix

Contact

Votre nom est obligatoire.Ne pas dépasser 45 caractères.Caractère non accepté dans le nom.

Votre e-mail est obligatoire.E-mail non valide.Ne pas dépasser 150 caractères.

Votre message est obligatoire.Ne pas dépasser 500 caractères.URL et scripts interdits (anti-spam).

XP-Infos

Recevez gratuitement notre newsletter d'informations sur les sites Internet chaque mois.

Votre e-mail est obligatoire.E-mail non valide.Ne pas dépasser 150 caractères.