Langage WebWeb
Présentation des langages Web les plus utilisés
Constuire son site Internet, c'est avant tout bien identifier les différents langages que l'on va utiliser car chaque langage répond à un besoin particulier. Voici un état des lieux de ces langages.
- Le HTML permet de faire apparaître les textes et images dans vos pages et permet des petites animations (HTML5)
- Le CSS donne du style à vos pages et permet des petites animations (CSS3)
- Le JAVASCRIPT défini l'action des boutons et des liens
- Le PHP donne accès au serveur de base de données et permet de communiquer avec le serveur web
- SGML - Standard Generalized Markup Language
Le langage SGML (Standard Generalized Markup Language) est la référence auquel toutes versions HTML doit se référer. Développé principalement par Charles Goldfarb dans les années 60 pour le compte d'IBM, le SGML est devenu par la suite une norme ISO. Le HTML et le XML sont deux dérivés du SGML. - HTML - Hyper Text Markup Language
Langage Hyper Texte à Balise. Le premier véritable langage à connaître si l'on veux créer un site web digne de ce nom! Cependant, le Html n'est qu'un langage de mise en forme (donc uniquement pour le coté statique). Pour rendre vos pages web dynamique, il vous faudra utiliser dans votre code Html un langage de script comme JavaScript ou PHP. XHTML est la version du HTML le plus utilisé aujourd'hui. Il permet l'utilisation des feuilles de style (CSS) et l'intégration de langages de script.
Exemple de code HTML :
<body><div align="center">
<span style="font-face:Verdana;">Easy-Micro vous dit tout...ou presque!</span>
</div></body>
Voir le tutorial sur le HTML pour plus d'infos...
Note: XHTML est le véritable successeur du HTML 4. - DHTML
Dynamic Hyper Text Markup Language
Le DHTML permet la réalisation de pages web dynamiques comme par exemple le défilement d'un texte.
En fait, html dynamique n'est pas un nouveau langage. Html dynamique est plutôt un concept d'ensemble regroupant différentes solutions qui permettent à l'auteur d'une page web de modifier de façon dynamique des éléments au choix de la page web pendant l'affichage - que ce soit automatiquement ou suite à une action de l'utilisateur.
Par exemple, tous les évènements JavaScript qui commence avec "on" (comme onclick, onmouseover ou onload) sont du Dhtml.
Exemple : <input type="button" value="Appuyez ici" onclick="alert('Bienvenue')" />
Voir l'atelier Le DHTML de l'Espace Membre Easy-Micro pour plus d'infos... - XHTML - eXtensible Hyper Text Markup Language
Le XHTML (X pour eXtensible) est le véritable successeur du HTML 4. Il reprend les caractéristiques du XML, telles que la stucturation et l'extensibilité des données. Le Xhtml fut créé afin de permetre à l'ensemble des webmasters d'utiliser un langage web simple comme le Html mais beaucoup plus strict sur la syntaxe en séparant le fond de la forme. Le Xhtml Transitional (de transition) refuse notamment les majuscules, les balises non fermées et les marqueurs vides. Le Xhtml Strict refuse toutes les balises de forme comme "font", "bgcolor", "center", "size" etc... Celle-ci étant remplacées par le fichier CSS.
Exemple de code Xhtml Transitional (Xhtml de transition) :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head>
<link rel="stylesheet" href="mon_style.css" />
<title>Mon titre de page</title></head>
<body><div class="montexte">Easy-Micro vous dit tout... ou presque !</div>
</body></html>
La démarche du Xhtml est donc de séparer la structure du document de sa présentation (et donc, pourquoi pas, le passage au langage XML) afin de rendre votre site Internet parfaitement compatible avec tous les navigateurs du marché (Internet Explorer, Netscape, Maxthon, Mozilla, Opera, Firefox, Safari...). Voir l'atelier Le Xhtml de l'Espace Membre Easy-Micro pour plus d'infos... - Langages de script - Javascript / VBScript / ActionScript
Les langages de script permettent de rendre vos pages web véritablement dynamiques. Ces langages furent créé de manière à pouvoir s'intégrer dans le code des pages Html.
• Javascript est le langage de script le plus utilisé sur Internet. Exemple :
<script type = "text/javascript"> document.write("Easy-Micro!") </script>
Voir le tutorial sur le Javascript pour plus d'infos...
• VBScript est un langage de script dérivé du langage Visual Basic de Microsoft (qui ne marche donc que pour et avec Microsoft! Dommage!). Utilisé pour écrire du script ASP.
• ActionScript est le langage de script utilisé avec le logiciel Flash afin de rendre les animations Flash dynamique. Voir l'atelier Flash de l'espace Membre pour plus d'infos... - CSS - Cascading Style Sheet
Le langage CSS (Cascading Style Sheet : Langage de feuilles de styles en cascades) permet la création de feuilles de style afin d'enrichir le HTML.
Il s'agit d'un langage pour définir les propriétés du format de votre feuille Html. Le but des feuilles de style consiste à associer différents styles soit aux marqueurs Html, soit en créant son propre style. En utilisation optimale, c'est un document à part entière qui contient tous les styles de votre site Internet ou de votre application.
Les CSS peuvent se créer à plusieurs niveaux:
• Au niveau de l'élément auquel s'applique le style (ici le marqueur P) :
<html><head></head><body>
<p style="font-family:verdana; font-size:8pt; color:#ff0000">
Easy-Micro vous dit tout... ou presque!</p>
</body></html>
• Au niveau de la page html (utilisable par tous les éléments de la page):
<html><head>
<style type="text/css"> p { font-family:verdana; font-size:8pt; color:#ff0000 } </style>
</head>
<body> <p>Easy-Micro vous dit tout... ou presque!</p>
</body> </html>
• Au niveau externe (avec appel du fichier mon_style.css qui contient le style montexte):
<html> <head> <link rel="stylesheet" href="mon_style.css"></head>
<body> <p class="montexte"> Easy-Micro vous dit tout... ou presque!</p>
</body> </html>
Cette dernière méthode est de loin la plus efficace car ce document CSS est utilisable par toutes les pages du site qui possèdent un lien vers cette feuille de styles. Ainsi, un seul document mémorise toute la mise en forme de votre site. Il n'est donc plus nécessaire de répéter la mise en forme dans chaque paragraphe du site.
Note: Le XSL (langage de feuilles de style extensible) est au XML ce que le CSS est au Html! Voir les ateliers sur le CSS de l'Espace Membre pour plus d'infos... ainsi que le tutorial sur le langage CSS. - SSI - Server Side Includes
A l'aide des Server Side Includes (SSI), vous pouvez incorporer directement dans des fichiers HTML des informations dynamiques - par exemple la date et l'heure du serveur ou bien un compteur d'accès. Dans un fichier HTML, les instructions Server Side Includes doivent être notées dans un pseudo commentaire (<!-- et -->) et précédé du signe dièse #. Une condition préalable est que le serveur Web qui héberge votre site soutienne les Server Side Includes. Les commandes SSI étant directement interprétées par le serveur, elles n'apparaitront pas dans le source de la page web, mais seront remplacées par le résultat de la fonction utilisée.
Exemples de code SSI (dans le body) :
• Avec la fonction echo
pour afficher la date d'accès à un fichier:
<!--#echo var="DATE_LOCAL"-->
ou pour afficher le nom du document:
<!--#echo var="DOCUMENT_NAME"-->
ou encore pour afficher le chemin à partir de la racine du site:
<!--#echo var="DOCUMENT_URI"-->
• Exemple pour faire apparaître la date de dernière midifiaction d'une page:
<!--#config timefmt="Dernière mise à jour le %d/%m/%Y à %H:%M"-->
<!--#echo var="LAST_MODIFIED"-->
• Avec la fonction config pour obtenir la taille d'un fichier: <!--#config sizefmt="bytes"-->
• Avec la fonction exec pour executer un compteur d'accès: <!--#exec cgi="/cgi-bin/compteur.pl"-->
• Inclure un fichier dans une page avec la fonction include : <!--#include file="copyright.htm"-->
Si certain éléments doivent être présents sur presque toutes les pages de votre site (en-tête, adresse...), créez un document Html contenant tous les éléments nécessaires (mais sans les balises <head>, <title>, <frameset> et <body>). Pour la mise à jour, il suffit de modiffier le fichier inclus pour que toutes les pages qui y font appel soient forcément mises à jour.
Les pages web contenant du SSI doivent être enregistrées sous l'extention shtml, soit mapage.shtml. Par ailleurs, les approches SSI et JavaScript sont théoriquement incompatibles, il ne faudra donc pas utiliser le Javascript dans une page shtml contenant des appels SSI.
Autre technique d'utilisation du SSI : Utiliser la technique SSI proposée par l'éditeur de site Web FrontPage pour les modèles FrontPage. Cette technique implique d'installer sur le serveur hébergeur les extentions Frontpage. Dans ce cas uniquement, les pages peuvent être enregistrées sous l'extention classique html ou htm, soit mapage.html ou mapage.htm. - PHP - Personal Home Page
Le langage PHP (Personal Home Page) est un langage de script indispensable (comme son concurrent, l'ASP) pour gérer des bases de données (Oracle, MySQL, PostgreSQL, Sysbase...). Il s'exécute du coté du serveur et n'a donc pas les problèmes des langages de script qui s'exécutent coté client (le navigateur). Le PHP est gratuit, multiplateformes (Linux, Unix, Mac, Windows) mais surtout tourne sur des serveurs Web gratuit comme l'incontournable serveur Apache.
Exemple de code PHP :
<?php echo "Easy-Micro vous dit tout... ou presque !" ; ?>
Les pages web contenant du PHP doivent être enregistrées sous l'extention mapage.php.
Voir le tutorial Easy-Micro sur le langage PHP pour plus d'infos... - ASP - Active Serveur Page
Le langage ASP (Active Serveur Page) est aussi un langage de script indispensable (comme le PHP) pour gérer des bases de données (Access, Oracle, MySQL, Sysbase, autre ODBC...).
La seul différence avec le PHP est que ce langage est un langage propiétaire de Microsoft ®. Il est idéal lorsque l'on l'utilise un serveur Web Microsoft comme IIS (Internet Information Services). Il s'exécute du coté du serveur et n'a donc pas les problèmes des langages de script qui s'exécutent coté client (le navigateur). L'ASP est un langage propriété de Microsoft et ne marche donc que sur des serveurs Web Microsoft comme IIS (Internet Information Services).
Exemple de code ASP :
<%@ language="vbscript" %>
<html><head><title>Un exemple></title</head>
<body>
<% reponse.write("Easy-Micro vous dit tout ! ...ou presque !") %>
</body><html>
Les pages web contenant de l'ASP doivent être enregistrées sous l'extention mapage.asp. - XML - eXtensible Markup Language
Le langage Xml (eXtensible Markup Language)
Le Xml est un langage très stict au niveau de la syntaxe afin d'être portable, soit une compatibilité total avec tous les navigateurs, les téléphones, pocket PC, Palm... C'est un langage ouvert, c'est à dire que l'on peut créer ses propres balises. Le principe est largement comparable aux bases de données.
Exemple de code Xml :
<?xml version="1.0" encoding="iso-8859-1"?>
<document><texte>Easy-Micro et le XML</texte></document>
Bien évidemment, cette syntaxe (qui n'a plus rien à voir avec le Html!) doit faire appel à un autre fichier (un DTD) ou seront définies les balises comme ici <document> et <texte>. Les pages web XML doivent être enregistrées sous l'extention mapage.xml. C'est probablement le langage de l'avenir du web! Voir l'atelier Le XML de l'Espace Membre Easy-Micro pour plus d'infos... - AJAX - Asynchronous Javascript And Xml
> Source: le Glossaire de Futura Sciences
L'AJAX (Asynchronous Javascript And Xml) désigne un nouveau type de conception de pages Web permettant l'actualisation de certaines données d'une page sans procéder au rechargement total de cette page. Cette méthode de conception repose sur la combinaison de technologies déjà existantes : HTML/CSS, Javascript/DOM, XML et les requêtes HTTP.
Par exemple, on peut faire des LiveSearch (recherche en direct). C'est-à-dire que, en même temps que l'on tape des mots clés pour une recherche, on voit apparaître la liste des résultats (sans avoir à recharger une page). Les applications de ce type de conception de site web sont innombrables et pour la plupart reste encore à inventer... Parmis les applications utilisant AJAX on peut citer Windows Live... Gmail,
Concrètement, un objet Javascript (l'objet XMLHttpRequest) permet d'envoyer une requête HTTP (POST, GET...) au serveur et de récupérer le résultat. La conséquence directe est que l'on peut s'affranchir du rechargement d'une page pour récupérer une information sur le serveur. Aujourd'hui, seuls les navigateurs récents permettent d'utiliser AJAX (Internet Explorer version 5 et supérieures, Firefox...).
Sites AJAX : RICO (US) ou script.aculo.us (Australie)
Merci de bien vouloir patienter... - JAVA - Applet et Java Server Pages
Le langage JAVA, défini par Sun Microsystems permet de créer des applications (ou appliquettes, Applet en anglais) qui peuvent être insérées dans une page web via la balise Html <applet>. Elles sont alors interprétées par une Machine Virtuelle Java installée dans presque toutes les plates-formes (dont Windows, OS/2 ou Mac). En fait, une applet Java est une petite (ce qualificatif étant tout à fait relatif) application Java. Voir le tutorial sur les panoramiques comme exemple d'intégration d'applet Java dans une page web.
En réponse au besoin de simplification de l'intégration du langage HTML et de Java, Sun Microsystems vous propose une seconde technologie : les JSP (Java Server Pages). Un avantage sérieux à utiliser cette technologie réside dans le fait qu'elle est automatiquement transformée par le serveur d'applications en servlet Java et déployée sur le serveur. Les pages JSP sont donc transformées en servlets. Le langage Java se devant d'être compilé, le traitement des servlets Java est bien plus efficace que certaines technologies ayant la même finalité, mais qui s'appuient sur des langages interprétés : ASP ou PHP notamment. Le Java est de plus en plus présent dans les sites Internet professionnels... sans parler des applications de plus en plus nombreuses que l'on retrouve sur l'ensemble des téléphones portable...
Exemple de code JSP (Java Server Pages) :
<%@ page language="Java" %>
<html> <head> <title> Mon titre</title> </head>
<body> <p align="center"> Easy-Micro vous donne la date du jour : <%= new Date() %></p>
</body></html>
Une page JSP se présente donc un peu comme une page HTML. Souvent, il y a plus de code HTML que de code Java. Mais des constructions nouvelles apparaissent. On peut facilement les reconnaître : elles commencent par les caractères <% et se terminent par %>.
Ainsi, l'exemple ci-dessus commence par une construction indiquant quel est le langage à utiliser pour traiter la page. Cette première ligne est plus précisément une déclarative. Elle commence toujours par les caractères <%@. Une directive permet de spécifier les informations qui vont servir à configurer le code de la servlet générée. L'expression JSP est appelée ensuite par les caractères <%= et %>.
Les pages JSP doivent être enregistrées sous l'extention mapage.jsp. - .NET
Microsoft .NET (prononcez "DotNet") est le nom d'un ensemble de produits et de technologies qui utilisent le framework .NET (traduisez "socle") qui est notamment un équivalent de machine virtuelle pour Windows.
Microsoft .NET constitue ainsi la réponse de Microsoft à la plate-forme J2EE de Sun. L'idée est de faciliter la tâche des développeurs en proposant une approche unifiée à la conception d'applications Windows ou Web.
Framework .NET est composé de deux blocs principaux : le Common Language Runtime (CLR) et la bibliothèque de classes .NET. Plusieurs langages sont disponibles dans le framework .NET tels que le C# (C sharp - mélange de C++ et de Java), le J# (proche du Java, mais non compatible Java) le Visual Basic .NET et l'ASP.NET.
ASP.NET est un ensemble de technologies de programmation web créé par Microsoft. Les programmeurs peuvent utiliser ASP.NET pour créer des sites webs dynamiques, des applications webs ou des web services XML. ASP.NET fait partie de la plateforme Microsoft .NET et est le successeur de la technologie Active Server Pages (ASP). Lorsque vous visitez des sites Internet, vous pouvez remarquer les pages se terminant par .aspx qui sont des pages Web écrites en .NET
Note: la version 3.5 de DotNet intègre notamment le framework Ajax.Net
Info: Retrouvez tous ces langages dans leur tutoriaux correspondant ainsi que dans l'espace Membre Easy-Micro.
Sites utiles |
|
|
• Css Zen Garden (Anglais) • CSS Play (Anglais) • php.net (le site officiel du Php) • MySql (le site officiel de MySql) • W3C (texte officiel CSS1) • W3C (texte officiel CSS2) |
• EasyPhp (package gratuit) • Wamp (package gratuit) • Comment ça marche • Openweb Group • JavaScript (us) |
