Association Francophone des Utilisateurs de Logiciels Libres

http://aful.org/





Travaux pratiques introduction au web
et à la programmation
Cours donnés au MBC - Paris-Dauphine




Contributeurs :
M.-A. DARCHE (Auteur original)
Laurent GODARD (Aide LibreOffice)


Dernière mise à jour :2011-10-09

Table des matières
Table des matières
Résumé 3
1 Format XML 4
1.1 Décompactage de fichier contenant des fichiers XML 4
1.2 Écriture d'un fichier XHTML 4
1.3 Validation HTML 4
1.4 Habillage de XHTML à l'aide de CSS 5
1.5 Validation CSS 5
1.6 Habillage de XML 5
2 Programmation JavaScript 6
2.1 Affichage de texte pour l'utilisateur 6
2.2 Implantation fonctionnalité inversement de mot 6
2.2.1 Code à insérer dans le fichier JavaScript 7
2.3 Implantation fonctionnalité changement d'habillage 8

Résumé

Ceci est un guide présentant un ensemble de manipulations et exercices pour se familiariser avec les techniques utilisées pour créer les sites web et les systèmes de gestion de contenus, ainsi qu'à la programmation et aux développements informatiques en général.
Ce guide indique la liste des points que l'étudiant devra suivre et qui serviront de base à la notation du TP par l'enseignant.

Format XML

Décompactage de fichier contenant des fichiers XML

Ouvrir des fichiers exemple_DOCX.docx et exemple_ODF.odt à l'aide d'un programme « décompacteur ». Sur Linux en ligne de commande on utilisera unzip et sur Windows on utilisera 7-Zip qui dispose d'une interface graphique.

Écriture d'un fichier XHTML

Écrire un fichier XHTML (nom.html) avec un titre général, plusieurs niveaux de titre dans la page et 3 paragraphe.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
lang="fr" xml:lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Fichier HTML de test</title>
</head>
<body>

REMPLIR ICI

</body>
</html>

Validation HTML

Valider le fichier XHTML à l'aide du validateur HTML du W3C :http://validator.w3.org/

Habillage de XHTML à l'aide de CSS

Styler du XHTML avec des CSS. Pour cela on va créer un fichier (par exemple mes_styles.css) que l'on va référencer dans le fichier XHTML précédemment créé.
Voici comment placer dans l'entête le link vers la feuille de style :
<head>

<link rel="Stylesheet" type="text/css" href="mes_styles.css" />

</head>
Pour créer le contenu du fichier mes_styles.css on consultera la référence du standard ouvert des CSS : http://www.w3.org/TR/CSS2/
Les premiers styles appliqués avec succès, on pourra appliquer des styles plus complexes en suivant les bonnes pratiques expliquées dans http://openweb.eu.org/css

Validation CSS

Valider le fichier CSS (mes_styles.css) à l'aide du validateur CSS du W3C :http://jigsaw.w3.org/css-validator/ (onglet « par Chargement de Fichier »)

Habillage de XML

Styler du XHTML avec des CSS. Le rendu est à tester dans le navigateur Firefox.
Voici comment placer l'entête xml-stylesheet :
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="ma_feuille_de_styles.css"?>

Programmation JavaScript

Pour programmer il suffit de disposer d'un navigateur web qui embarque un interpréteur JavaScript. Ce qui est le cas du navigateur Firefox.
Firefox est très adapté pour la programmation JavaScript, notamment avec :
Pour les réalisations à programmer on consultera la référence du standard ouvert : https://developer.mozilla.org/en/JavaScript/Reference

Affichage de texte pour l'utilisateur

Afficher des notifications dans des boites de dialogues :
alert("Texte");

Implantation fonctionnalité inversement de mot

Dans cette partie on s'attachera à implanter (ou peut aussi dire implémenter) la fonctionnalité d'inversement de mot. Pour cela on rajoutera au document HTML déjà écrit une zone de saisie dans un formulaire dans lequel on entrera le texte à inverser.
<form method="post">
<p>
Entrez votre texte : <input type="text"/>
</p>
<p>
<button type="submit" onclick="inverser()">Inverser</button>
</p>
</form>

Voici comment placer dans l'entête la définition d'une référence vers un script qui contiendra les fonctions ou méthodes qui réaliseront les traitements :
<head>

<script type="text/javascript" src="mes_programmes.js"></script>
</head>

Code à insérer dans le fichier JavaScript

Pour faire des boucles :
for (var i = 0; i < 10; i++) {
// Faire quelque chose ici
}
Pour faire des traitements conditionnels :
if (condition) {
// Faire quelque chose ici
}
Pour déclarer un tableau et accéder à la valeur d'un tableau à l'indice n :
var tableau = [];
alert(tableau[n]);
tableau[n] = "Quelque chose n'importe quelle valeur";

Implantation fonctionnalité changement d'habillage

Toujours à l'aide de JavaScript on ajoutera un attribut class à chaque paragraphe HTML (<p>).
On peut trouver des éléments par leur balise :
var elements = document.getElementsByTagName('p');
On peut ensuite modifier l'attribut class :
element.setAttribute('class', 'une-definition-de-style');