Devenez metteur en toile !
Ou comment imaginer, construire et faire vivre un site internet associatif
Plan de la journéePartie 1 : bases techniques
Mise en route L’internet en général Les catégories de sites Les langages S’y retrouver dans les offres d’hébergement Des services en ligne Des ressources en ligne
Les langages
Introduction
à l’HTML, aux CSS, au PHP et au JavaScript
Principes de base
Dès la naissance de l’internet, le souci a été d’utiliser des langages standards afin que l’usage de cette architecture ouverte ne soit pas restreinte par l’usage de multiples codages incompatibles
L’HTML est le langage de base de l’internet. Il a évolué (enrichissement) et il est défendu par un consortium mondial, le W3C, basé à Genève (http://www.w3.org)
Il est en quelque sorte le « gardien de la norme » Il existe d’autres langages de programmation, mais quel
que soit le langage choisi, la connaissance de l’HTML est indispensable.
Côté client :Votre navigateur interprète l’HTML reçu et affiche la page. Selon son contenu, il active aussi des petits programmes auxiliaires, pour interpréter certaines parties de code (animation flash p.ex.) ou d’autres programmes résidents pour lire certains formats (synthétiseur midi pour une musique de fond p.ex.)
Le rôle des langages
Côté serveur :Les langages de programmation
servent à transmettre et/ou générer des pages en HTML, questionner des
bases de données, authentifier les utisateurs, etc. Mais la base du code
qui sera envoyé au client est presque toujours de l’html.
L’HTML
Pour hypertext markup language Langage de description contenant un texte brut
ainsi que des « balises » (ou tags) contenant des instructions pour gérer l’affichage de ce texte
Certaines balises permettent aussi d’assortir le texte d’images, de sons, d’animations, etc
Enfin la plus géniale est le lien hypertexte, qui a révolutionné le rapport des informations entre elles et bouleversé les logiques de lecture
Vous avez oublié ce que vous cherchiez ? Google s'en souvient !Pour lutter contre la pornographie, et en particulier contre la pédophilie, le gouvernement américain a demandé à Google et à trois autres moteurs de lui fournir des données sur les recherches effectuées par leurs utilisateurs. Le refus d'obtempérer de Google est anecdotique car ce qui est important, c'est que les moteurs de recherche possèdent sur nous des informations qui peuvent ensuite être interprétées diversement : adresses des sites visités, courrier reçu et envoyé, mots-clés utilisés pour des recherches, forums de discussion auxquels nous participons, etc. A force de nous "faciliter la vie", des moteurs comme Google finissent par centraliser des tas d'informations. Prudence !
Ceci n’est évidemment pas encore de l’html !
On commence ?
Déclarer le langage utilisé
<html>
</html>
Tout ce qui se trouve entre ces deux balises sera identifié comme étant de l’HTML
Principe 1 : les balises sont toujours entourées des signes < et >
Structurer le document
<html> <head>
</head> <body>
</body></html>
Une page HTML est découpée en deux parties : un « head » technique et invisible et un « body » contenant les éléments à afficher
Principe 2 : la portée de chaque balise se termine lors de sa fermeture par la même commençant par un slash. Exemple </body>
Les en-tête
<html> <head> <meta name="keywords" content="formation, internet, etopia"> <title>Devenez metteur en toile</title> </head> <body>
</body></html>
Le HEAD contient une série de tags techniques (codage, mots-clé, copyrights, CSS, etc) ainsi que le titre du document.
Voyons ce que ça donne :http://chantier.vivao.be/etopia/1.htm
Les en-tête : exemple d’Ecolo.be
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"><META HTTP-EQUIV="Content-Language" CONTENT="French"><link rel="alternate" type="application/rss+xml" title="Les news du site ECOLO" href="rss2.php"><META NAME="description" CONTENT="Secrétariat fédéral, Jean-Michel Javaux, Isabelle Durant , parlementaires, Europe démocratique, politique étrangère, mondialisation, démocratie, verts belges, mobilité Bruxelles, économie verte, écologie industrielle, emplois durables"><META NAME="keywords" CONTENT="Ecolo, parti politique francophone Belgique, écologie, greens, verts, environnement, développement durable, pollution, changements climatiques, élections, Europe, Ministre écolo Evelyne Huytebroeck, Secrétariat fédéral, Jean-Michel Javaux, Isabelle Durant, Claude Brouir, parlementaires, Europe démocratique, parlement européen, parlement fédéral, sénat, parlement wallon, ministre environnement et énergie, politique étrangère, mondialisation, démocratie, verts belges, rénovation urbaine, mobilité Bruxelles, lutte contre la pauvreté bruxelles, création d'emplois bruxelles, développement économique wallonie, programmes politiques, candidats politiques, lutte contre le bruit, refinancement Communauté française, lutte contre l'échec scolaire, lutte contre la pollution, survol aérien de bruxelles, pensions alimentaires, écologie industrielle, parti écologiste belgique, programme écologique, lutte contre l'extrême-droite, ecology, politic, belgium, accueil des réfugiés, partis démocratiques francophones"><META NAME="owner" CONTENT="Ecolo, B-5000 Namur"><META NAME="copyright" CONTENT="Ecolo"><META NAME="author" CONTENT="Ecolo"><META NAME="revisit-after" CONTENT="2 Weeks"><META NAME="Robot" CONTENT="all"><META NAME="rating" CONTENT="General">
Le corps du texte
<html> <head> … </head> <body>Vous avez oublié ce que vous cherchiez ? Google s'en souvient !Pour lutter contre la pornographie, et en particulier contre la pédophilie, le gouvernement américain a demandé à Google et à trois autres moteurs de lui fournir des données sur les recherches effectuées par leurs utilisateurs. Le refus d'obtempérer de Google est anecdotique car ce qui est important, c'est que les moteurs de recherche possèdent sur nous des informations qui peuvent ensuite être interprétées diversement : adresses des sites visités, courrier reçu et envoyé, mots-clés utilisés pour des recherches, forums de discussion auxquels nous participons, etc. A force de nous "faciliter la vie", des moteurs comme Google finissent par centraliser des tas d'informations. Prudence ! </body></html>
Voyons ce que ça donne maintenant :http://chantier.vivao.be/etopia/2.htm
Structurer le corps du texte
<html> <head> … </head> <body> <h1>Vous avez oublié ce que vous cherchiez ? Google s'en souvient !</h1> <p>Pour lutter contre la pornographie, et en particulier contre la pédophilie, le gouvernement américain a demandé à Google et à trois autres moteurs de lui fournir des données sur les recherches effectuées par leurs utilisateurs. Le refus d'obtempérer de Google est anecdotique car ce qui est important, c'est que les moteurs de recherche possèdent sur nous des informations qui peuvent ensuite être interprétées diversement : adresses des sites visités, courrier reçu et envoyé, mots-clés utilisés pour des recherches, forums de discussion auxquels nous participons, etc. A force de nous "faciliter la vie", des moteurs comme Google finissent par centraliser des tas d'informations. Prudence !</p> </body></html>
Les tags <p> et <h1> permettent de structurer le texte : un titre et un paragraphe.
http://chantier.vivao.be/etopia/3.htm
Le tag <a>
<html> <head> … </head> <body> <h1>Vous avez oublié ce que vous cherchiez ? Google s'en souvient !</h1> <p>Pour lutter contre la pornographie, et en particulier contre la pédophilie, le gouvernement américain a demandé à Google et à trois autres moteurs de lui fournir des données sur les recherches effectuées par leurs utilisateurs. Le refus d'obtempérer de Google est anecdotique car ce qui est important, c'est que les moteurs de recherche possèdent sur nous des informations qui peuvent ensuite être interprétées diversement : adresses des sites visités, courrier reçu et envoyé, mots-clés utilisés pour des recherches, forums de discussion auxquels nous participons, etc. A force de nous "faciliter la vie", des moteurs comme Google finissent par centraliser des tas d'informations. Prudence !</p><p><a href=“5.htm">Lire la suite</a></p> </body></html>
Le tag <a> est primordial : il permet de faire des liens hypertexte
http://chantier.vivao.be/etopia/4.htm
Les usages du tag <a>
<html> <head> … </head> <body><p><a href=“5.htm">Lien vers une page du même site</a></p><p><a href=“http://www.html.com/5.htm">Lien vers une page d’un autre site</a></p><p><a href=“5.htm“ target=“_blank”>Lien s’ouvrant dans une nouvelle fenêtre</a></p><p><a href=“#fin">Lien vers un endroit sur la même page</a></p>
…
<p><a name="fin"></a></p> </body></html>
Ce sont les principales façons d’utiliser le tag <a>.
On peut aussi combiner les attributs :<a href=“http://www.html.com/5.htm#sommaire“ target=“_blank”>Cliquer ici</a>
Structurer le corps du texte : plus de tags
Voir ce que ça donne : http://chantier.vivao.be/etopia/5.htm
<h1>Titre principal</h1><h2>Sous-titre</h2><h3>Titre de chapitre</h3><h4>Intertitre</h4><p>Corps du texte (paragraphe)</p><h5>Note de bas de page</h5><h6>Note marginale</h6>
Les attributs du texte
Voir ce que ça donne : http://chantier.vivao.be/etopia/6.htm
<p><strong>Texte en gras</strong></p>
<p><em>Texte en italique</em></p>
<p><strong><em>Texte en italique gras</em></strong></p>
<p><u>Texte en souligné (déconseillé !) </u></p>
On réservera le soulignement aux seuls liens, pour une meilleure ergonomie.
Principe 3 : les tags doivent s’imbriquer mais pas se chevaucher (voir page suivante)
Piège classique : les tags se chevauchant
Voir ce que ça donne : http://chantier.vivao.be/etopia/6.htm#suite
<p><strong><em>Texte en italique gras</em></strong></p>
<p><em><strong>Texte en italique gras</strong></em></p>
<p><em><strong>Texte en italique gras</em></strong></p>
Les deux premiers fonctionnent, mais pas le troisième !
C’est une source d’erreur importante.
Les attributs d’alignement horizontal
Voir ce que ça donne : http://chantier.vivao.be/etopia/10.htm
<p align="right"> … texte … </p>
<p><div align="right">… texte … </div></p>
<div align="right"><p>… texte … </p></div>
Une série de tags permettent de régler les alignements.Soit on ajoutera un attribut « align » à un tag (p, h1, hr, etc), soit on utilisera le tag <div>. Les arguments d’alignements sont « right », « left » ou « center ».
Attaquons les tableaux !
<table>
</table>
Logiquement, le tag déclarant un tableau se présente comme ceci.
D’abord des lignes
<table> <tr></tr> <tr></tr> <tr></tr></table>
Le principe est le suivant :1. On déclare les lignes une par une (trois dans cet exemple).
« tr » = table row = ligne de tableau
Ensuite les colonnes
<table> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td></tr> …</table>
2. On déclare ensuite les colonnes, c’est-à-dire les cellules à l’intérieur de la ligne, autrement dit les morceaux de colonnes contenus dans la ligne.Seules les cellules peuvent contenir du texte, image, etc. Les lignes ne peuvent contenir que les cellules.
« td » = table data = données du tableau
Et enfin le contenu !
<table> <tr> <td>Nom</td> <td>Prénom</td> </tr> <tr> <td>Thiémard</td> <td>Cyril</td></tr> …</table>
Les cellules peuvent contenir du texte enrichi (titres, paragraphes, images, etc)
Voir ce que donne ce tableau : http://chantier.vivao.be/etopia/7.htm
Donnons un peu d’allure à ce tableau
<table width="200" border="1" cellpadding="3" cellspacing="0"> <tr> <td>Nom</td> <td>Prénom</td> </tr> <tr> <td>Thiémard</td> <td>Cyril</td></tr> …</table>
La table peut être déclarée avec des attributs : largeur, bordure, marges intérieures, distance entre les cellules.
Voir quelque exemples : http://chantier.vivao.be/etopia/8.htm
Les cellules fusionnées
… <tr> <td>DVD</td> <td colspan="2">Non disponible</td> <td>+R</td> <td>+/- R</td> <td>+/- RW</td> </tr>…
Une ligne peut contenir des cellules fusionnées. On utilisera le tag <colspan>.
Voir le résultat de ce code : http://chantier.vivao.be/etopia/9.htm
Les tableaux imbriqués
… <tr> <td><table> <tr> <td>…</td> <td>…</td> </tr> </table></td> <td>…</td> <td>…</td> </tr>…On peut sans limite insérer des tableaux dans les cellules, par exemple pour structurer une page. Attention, ça devient vite sportif !
Voir le résultat de ce code : http://chantier.vivao.be/etopia/11.htm
Ecrire ses premiers codes HTML
Cette présentation ne peut que vous donner quelques bases élémentaires et vous inciter à vous lancer. Même si vous utilisez un programme qui écrit les codes HTML pour vous (NVU, DreamWeaver, GoLive, FrontPage, etc), il est nécessaire d’être capable de descendre dans le code lors de problèmes ou de résultat insatisfaisant.
Pour avancer, je vous suggère quatre pistes :- Ouvrir et étudier le code des pages que vous trouvez intéressantes- Acheter un livre de référence- Utiliser des sites d’apprentissage- S’inscrire dans un ou des forums
Quelques adresses :Un forum http://www.webmaster-hub.com Un site http://www.allhtml.com/html/index.php LE validateur officiel http://validator.w3.org/ Traduction http://www.yoyodesign.org/doc/w3c/w3c.html
Les CSS
Ou « feuilles de style en cascade »
Sensations garanties !
Principes
Les CSS sont un complément de l’HTML Ils permettent un réglage fin de tous les
tags HTML, en offrant une foule d’attributs Ces attributs peuvent être centralisés sur
une page de code externe, utilisée par plusieurs pages
La compatibilité est très bonne
La logique : texte et style sont dissociés
Le texte(html)
La mise en forme(CSS)
La page affichéeLa page affichée
+
Démonstration sur http://chantier.vivao.be/etopia/exemple_css0.htm
Installation dans l’HTML
Les déclarations CSS sont insérées à 3 endroits : Dans le <HEAD> de la page HTML Dans une feuille de style séparée Directement dans la balise (pas traité ici)
…<style type="text/css"><!--.sommaire {
background-color: #FFFF00;padding: 3px;border: 1px dotted #FF0000;
}--></style>…
Syntaxe
Déclaration dans le <HEAD> : exemple
…<table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td class="sommaire">Texte</td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr></table>…
SyntaxeUtilisation dans la page : exemple http://chantier.vivao.be/etopia/12.htm
….page {
background-color: #FFFFB9;padding: 3px;border-right-width: 1px;border-bottom-width: 1px;border-left-width: 1px;border-top-style: Aucune;border-right-style: dotted;border-bottom-style: dotted;border-left-style: dotted;border-right-color: #FF0000;border-bottom-color: #FF0000;border-left-color: #FF0000;
}…
On continue l’exempleSuite de la déclaration dans le <HEAD>
…<table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td class="sommaire">Texte</td> </tr> <tr> <td class="page">> </td> </tr> <tr> <td class="page">> </td> </tr></table>…
Le tableau est modifiéUtilisation dans la page : exemple http://chantier.vivao.be/etopia/13.htm
Les feuilles de style
Le principe est simple : au lieu de déclarer les styles en en-tête de chaque page, on les regroupe sur une page unique.
On peut ainsi appliquer ces styles en deux clics lorsqu’on crée une nouvelle page
Et surtout, lorsqu’on veut modifier l’aspect du site, on ne modifie qu’une seule feuille de style et tout le site s’adapte !
.chapeau {line-height: 19px;margin-top: 1em;font-size: 90%;font-style: italic;font-family: Arial, Helvetica, sans-serif;
}.texte {
font-size: small;line-height: 18px;font-family: Arial, Helvetica, sans-serif;
SyntaxeLa feuille de style (extrait)
…<head>… <link rel="stylesheet" href="exemple.css" type="text/css">…</head>…
SyntaxeL’appel à la feuille de style dans la page HTML
Récapitulons… Trois familles de styles peuvent cohabiter :
Les redéfinitions de balises HTML (p.ex. p <p>) Les classes (par exemple .intro <p class="intro">) Les ID (par exemple #menu <div id="menu">)
Ils peuvent être placés à trois endroits : Dans le tag HTML (<p style="border:1px solid #CCCCCC">) Dans le HEAD de la page (<style type="text/css">… </style>) Dans une page CSS distincte (mon_style.css)
Certains tags peuvent recevoir des styles variables en fonction du passage de la souris (a:hover par exemple)
Les CSS fonctionnent en cascade, ce qui veut dire qu’ils peuvent se compléter ou se neutraliser à l’infini. C’est la richesse et la difficulté des CSS
Les CSS utilisés avec les <div> peuvent permettre de séparer complètement le contenu du site de sa présentation_
Ressources CSS
Là aussi, l’aperçu est trop rapide.
Pour avancer, je vous suggère quatre pistes :- Ouvrir et étudier le code des pages que vous trouvez intéressantes (plus difficile qu’avec l’HTML. Chercher dans le code le nom du CSS, puis dans le cache du navigateur)- Acheter un livre de référence- Utiliser des sites d’apprentissage- S’inscrire dans un ou des forums
Quelques adresses :Des sites http://pompage.net/pompe/ (excellents articles et un bon tutoriel), http://openweb.eu.org/css/
Site officiel (traduit) : http://www.yoyodesign.org/doc/w3c/css2/cover.html Validateur : http://jigsaw.w3.org/css-validator/validator-uri.html
Le PHP
LE langage de programmation idéal pour créer des sites dynamiques
Port du casque obligatoire…
Généralités
Hypertext preprocessor Le PHP est un langage de programmation
de la communauté du libre C’est le langage de script côté serveur le
plus répandu Les scripts PHP génèrent de l’HTML qui
est ensuite envoyé au client_
Intérêt du PHP
Permet d’intégrer des informations dynamiques Permet d’inclure des parties de code (bannières, menus, etc) Gère avec brio les formulaires (y compris envoi de mails,
inscription dans une BD…) Conçu pour une interaction profonde avec les bases de
données standard (MySQL, PostgreSQL, Oracle, MS-SQL, etc)
Code naturel, fonctions puissantes, rapidité… Ressources et documentation libres Haut niveau de sécurité intrinsèque (les scripts ne sont pas
envoyés au client)_
Méthodes d’utilisation
Le code PHP peut être inséré à l’intérieur d’une page HTML classique, à n’importe quel endroit
Le document peut être entièrement composé de code PHP
Côté client, le résultat est le même : c’est de l’HTML
Bases de la syntaxe
Le code PHP doit toujours être déclaré et fermé
<?php
?>
Bases de la syntaxe
Chaque ligne de code doit se terminer par un point-virgule « ; »
<?php
echo ‘<h1>Bienvenue</h1>’;
?>
Bases de la syntaxe
Les variables commencent par le signe « $ »
<?php
echo ‘<h1>Bienvenue</h1>’;
$touche=‘F5’;
?>
Bases de la syntaxe
Les commentaires commencent par les signes « // »
<?php
// script de démonstration
echo ‘<h1>Bienvenue</h1>’;
$touche=‘F5’;
?>
Bases de la syntaxe
Variables et contenus statiques s’enchaînent avec les points « . »
<?php
// script de démonstration
echo ‘<h1>Bienvenue</h1>’;
$touche=‘F5’;
echo ‘<p>Pour rafraichir la page, appuyez sur ‘.$touche.’</p>’;
?>
Un peu de dynamique…
Exemple d’une variable reçue dans l’URLhttp://www.monsite.com/mapage.php?touche=F5
<?php
// script de démonstration
echo ‘<h1>Bienvenue</h1>’;
$touche=$_GET["touche"];
echo ‘<p>Pour rafraichir la page, appuyez sur ‘.$touche.’</p>’;
?>
Un contrôle de la variable
Je veux maintenant éviter l’absence de la valeur dans l’URL http://www.monsite.com/mapage.php
<?php
// script de démonstration
echo ‘<h1>Bienvenue</h1>’;
$touche=$_GET[« touche »];
if(empty($touche)) $touche=‘F5’;
echo ‘<p>Pour rafraichir la page, appuyez sur ‘.$touche.’</p>’;
?>
Deux contrôlesLa phrase va varier selon la variable $touche reçue
<?php…
$touche=$_GET[« touche »];if(empty($touche)) exit(‘<p><b>Erreur, recommencez !</b></p>’);switch($touche){
case ‘F5’:$message=‘rafraichir la page’;break;
case ‘F1’:$message=‘obtenir de l’aide’;break;
default:$message=‘une fonction inconnue’;
}
echo ‘<p>Pour ‘.$message.’, appuyez sur ‘.$touche.’</p>’;
?>
Les fonctionsPHP contient énormément de « fonctions », qui sont des bouts de codes qui renvoient des valeurs en fonctions de celles reçues ou d’autres paramètres
<?php…
echo ‘<p>Il est exactement ‘.time("H:M:S").’ le ‘.date("d.m.Y").’</p>’;
…
?>
Résultat :
Il est exactement 10:48:12 le 28/05/2005
Exemple d’usage dans de l’HTML
Un bout de code PHP peut être ajouté facilement au cœur du code HTML. Il ne fonctionnera QUE SI l’extension du fichier est « .php »
<html>…
<p>Il est <?php echo time("H") ?> heures <?php echo time("M") ?> minutes</p>’;
…
</html>
Résultat :
Il est 10 heures 48 minutes
L’includeL’include est une des premières fonctions à utiliser, tant elle est facile à utiliser et permet de gagner beaucoup de temps.
Exemple : je veux modifier chaque semaine le slogan en en-tête du site mais sans passer dans toutes les pages pour le changer…
<html>…<h3><?php include("accueil.php") ?></h3>…
</html>
Cette semaine sera chaude à Kegeljan !
index.phpindex.php
accueil.phpaccueil.php
L’include : résultat de l’exemple
Le code envoyé au client sera le suivant
<html>…
<h3>Cette semaine sera chaude à Kegeljan !</h3>
…
</html>
A utiliser sans modération pour des en-tête, en-pied, menus, paramètres, éléments graphiques, etc
Ressources PHP
Eh oui, encore une fois on ne fait que survoler…
Pour avancer, je vous suggère cette fois… plus que 3 pistes :- Acheter un livre de référence ou télécharger des docs- Utiliser des sites d’apprentissage- S’inscrire dans un ou des forums
Quelques adresses de sites :http://www.lephpfacile.com/http://www.phpdebutant.org/ De bonnes docs en français : http://www.nexen.net/docs/php/ Site officiel (en anglais) : http://www.php.net/
Il y en a encore des dizaines !
Le JavaScript
Un langage client pour doper le dynamisme de votre site
Généralités
Le JavaScript complète les fonctions du navigateur et permet d’en modifier les comportements (taille de la fenêtre, menus, pointeur, enchaînement, effets spéciaux, etc)
Il est généralement bien interprété par le client mais il faut l’utiliser pour des contenus accessoires ou prévoir des alternatives textuelles : éviter qu’un problème de lecture côté client défigure le site…
Exemple simple et courant
Un clic doit renvoyer à la page précédente, quelle qu’elle soit.
<html>…
<a href="javascript:history.go(-1)">Cliquer ici pour revenir en arrière</a>
…
</html>
Résultat :
Retour à la page précédente stockée dans le navigateur.
Exemple plus avancé
On veut faire varier le style CSS appliqué à une cellule d’un tableau. Le survol par la souris doit la faire devenir rouge.
<html>…
<td class="fond_vert" onmouseover="this.className=‘fond_rouge’" onmouseout="this.className=‘fond_vert’">
…
</td>
…
</html>
Résultat :
Le cellule survolée change de couleur, puis revient comme avant.
Attention aux guillemets et apostrophes
Attention aux guillemets et apostrophes
Autre exemple plus balaise
L’ouverture d’une popup se gère avec ce petit script. Mais attention, les popups sont de moins en moins appréciées.
<html><head>…
<A HREF="#" onClick="window.open('page_popup.php','nom_du_frame-page','toolbar=0, location=0, directories=0, status=0, scrollbars=0, resizable=0, copyhistory=0, menuBar=0, width=400, height=500, left=50, top=50');return(false)">Le lien</A>…
…
</head></html>
Attention aux guillemets et apostrophes
Attention aux guillemets et apostrophes
Ressources JavaScript
Plus que tous les autres langages, le JavaScript se télécharge à la carte, en fonction des besoins que vous avez. Il s’agit généralement de codes prêts à l’emploi.
Mes premiers choix :http://www.editeurjavascript.com/ http://www.swisstools.net/fr
Il y en a encore des dizaines !