Devenez metteur en toile ! Ou comment imaginer, construire et faire vivre un site internet...

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


<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


<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"></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


$touche=‘F5’;

?>

Bases de la syntaxe

Les commentaires commencent par les signes « // »

<?php

// script de démonstration


$touche=‘F5’;

?>

Bases de la syntaxe

Variables et contenus statiques s’enchaînent avec les points « . »

<?php



$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



$touche=$_GET["touche"];


?>

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



$touche=$_GET[« touche »];

if(empty($touche)) $touche=‘F5’;


?>

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


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>



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 !

Devenez metteur en toile ! Ou comment imaginer, construire et faire vivre un site internet...

Documents

Transcript of Devenez metteur en toile ! Ou comment imaginer, construire et faire vivre un site internet...