ACTIVITE
INITIATION A LA CONCEPTION D'UN SITE WEB
(Avec front page 2000)

Objectif :  - Comprendre les bases de la création d'un site web et réaliser sa première page web.

I- Introduction

 1 - Qu'est ce que le langage html ?

Le langage html  est un ensemble de codes ou "tag" qui est chargé et exécuté par le navigateur pour réaliser diverses tâches :
Affichage d'une image, création d'un lien hypertexte, modification des couleurs d'écran ou du texte, réalisation de tableaux... Une page web peut-être entièrement réalisé à partir d'un simple éditeur de texte (wordpad par exemple) à condition de connaître toutes les commandes html mais bonjour le travail (et les prises de tête !) . Un fichier avec du code html doit se terminer par .htm ou .html (extensions standard reconnues par tous les navigateurs)

2- Front Page et autres éditeurs web

Front page est un outil qui vous permettra de réaliser des sites web rapidement sans connaissance préalable de la programmation html :>). Cependant, si vous souhaitez réaliser certaines opérations pointues, il vous faudra avoir un minimum de connaissance en html.

FrontPage contient l'explorateur FrontPage, dans lequel vous pouvez visualiser et administrer votre site Web, et l'éditeur FrontPage, qui vous permet de créer et de modifier des pages Web sans connaître le code HTML. 
Il existe naturellement d'autres éditeurs de page web mais nous allons vous faire découvrir FrontPage qui est un outil très répandu, simple d'utilisation et assez complet.

II - Comment réaliser un site internet ?

Les grandes étapes de la réalisation sont les suivantes :

1- Créer un répertoire sur son disque dur où l'on va stocker ses fichiers .
2- Créer ses pages webs avec un éditeur de pages web et les sauvegarder sur son disque dur (en local , dans le répertoire précédemment créé)
3- Se connecter à internet et transférer ses pages web sur son site (perso ou professionnel ) en utilisant un petit logiciel de ftp.  Pour cela il est nécessaire d'avoir au préalable fait une demande d'ouverture de compte chez un fournisseur internet pour avoir une adresse URL  internet et un espace disque (il en existe  de nombreux gratuits , par exemple www.chez.com ou encore www.multimania.com ) . Votre site web (vos fichiers) seront alors visible en permanence  l'adresse internet que vous avez créé ( par exemple  " payet.multimania.com " ) (note : ne confondez pas adresse URL (pour avoir un site web) et adresse email (pour recevoir des messages dans sa boite aux lettre électronique) cela n'a strictement rien à voir !) 

III Ma pemière page web

Afin de vous aider, un répertoire "monpremiersite" a déjà été créé . Dans ce répertoire il y 3 ou 4 fichiers avec l'extension ".htm".
- Cliquez avec le bouton DROIT de la souris sur le fichier "index.htm" puis sélectionnez dans le menu " modifier ". L'éditeur frontpage va être lancé et va charger la page "index.htm" .
- Complétez la page avec les informations demandées (votre nom ...) , et personnalisez la au niveau des couleurs, taille des caractères, police (testez  "arial" et "comic sans ms" )

. Note : quand vous passez à la ligne, pour ne pas sauter de ligne, appuyer en même sur touche  "shift " puis "entrée"  (la touche shift, c'est la petite flèche vers le haut, juste au dessus de la touche CTRL )

- Changez la couleur de fond d'écran : cliquez avec le bouton DROIT sur votre page --> propriété page --> onglet arrière plan --> choisissez la couleur arrière plan :

Vous pouvez alors choisir la couleur de votre page ou insérer une image en fond d'écran. Si vous choisissez une image, celle-ci va être dupliquée afin de couvrir toute la page. Généralement, on choisit une petite image représentant un motif de base afin de créer le fond d'écran (principe de la mosaïque).Pour choisir une image, sélectionner la case "image d'arrière plan" et ensuite cliquez sur "parcourir" pour rechercher l'image sur votre disque dur.

- Enregistrez votre travail (répondre "oui" (ok) aux questions éventuelles sur la sauvegarde des images) et fermez l'éditeur ( ) .  testez le résultat en double cliquant (bouton gauche) sur le fichier "index.htm"  . L'explorateur Microsoft Explorer doit se lancer automatiquement et vous pouvez visualiser en local le résultat final. Pour l'instant , seul vous,  pouvez voir votre page web . Plus tard vous apprendrez à transférer votre page vers un site perso pour qu'il soit visible sur internet par tous.

- Placez vous à nouveau sous l'éditeur (en le réactivant en bas de l'écran).
- A titre d'information, pour voir le code source de votre page, cliquez sur l'onglet "HTML" en bas de l'éditeur : vous constatez que le code html généré semble plutôt rebutant ... et il y a encore quelques années (96 , 97 ) on devait tout écrire à la main . Il peut être utile de savoir se repérer dans le code html pour modifier certaines fonctions manuellement (en cas de bug de votre éditeur par exemple , ben oui cela arrive !)
Exo : Ajouter un titre à votre page web. Pour cela , repérez les balises  :   <TITLE> Placez ici votre titre  </TITLE>  (c'est tout en haut de votre page ) . Donnez un titre à votre page. Le titre est très important : c'est ce que va afficher et indexer en priorité les moteurs de recherche sur internet. Il est fortement recommandé de placer des mots clefs judicieusement choisis dans le titre pour être bien positionné sur les moteurs de recherche (mais c'est pas le seul critère ...) et vous garantir des visiteurs succeptibles d'être intéressés par ce que vous racontez dans votre site...Si vous parlez de votre passion de la course automobile, intégrez dans votre titre "automobile, voiture ... " (évitez les titres du genre : "ma page perso " ou "mon site web" ). Cliquez sur l'onglet "normal" pour revenir au mode d'édition normal.
L'autre façon plus sûre pour modifier le titre est :  cliquer bouton DROIT sur votre page ---->propriété de page" et modifier le titre de votre page (évite d'avoir à bidouiller le code html)

Testez votre page web à nouveau en cliquant sur "index.htm" . Vérifiez que le titre apparait bien dans la barre tout en haut de l'explorateur.
-Testez l'alignement à gauche, centré  et à droite. (sélectionnez la zone de texte où vous voulez appliquez les modifs)
IMPORTANT : Vous devez à chaque fois réactualiser votre page web dans l'explorateur microsoft explorer pour prendre en compte les dernières modifications : faire affichage--->actualiser  (ou touche de raccourci : F5 )

Insertion d'une image

Vous pouvez naturellement insérer dans votre page une image : cliquez sur "insertion---->image" et choisir votre image dans votre site web courant ou dans un autre répertoire. Quand vous sauvegarderez votre page actuelle (icône , Front-Page vous proposera éventuellement de sauvegarder les images dans le site front-page actuel : ACCEPTEZ TOUJOURS !)

Attention : les formats d'images utilisés sur internet sont le GIF et le JPG. N'utilisez pas d'autres formats, ils risquent fort de ne pas être reconnus par les divers navigateurs.
Le GIF est un format d'image compressé sans pertes de qualité, contrairement au JPG. En fonction du type d'image, de sa taille, il sera plus avantageux d'utiliser l'un ou l'autre des formats.
Le JPG est particulièrement intéressant pour compresser des images photographiques . Une image de 800k non compressée peut facilement faire moins de 50k sans pertes trop visible de qualité.
Pour les petites bannières, avec du texte, le GIF est en général plus adapté. D'autre part, il est possible de réaliser des animations graphiques en utilisant le format "GIF" (encore appelé "GIF animé")

Il est important de toujours avoir en tête la notion de "temps de chargement" . Le temps de chargement d'une page peut rapidement décourager l'internaute qui préférera cliquer ailleurs.... C'est pour cela qu'il faut éviter à tout prix les grosses images sur votre page principale et ne pas abuser des gifs animés. La qualité première d'une page principale doit être sa rapidité de chargement et sa visibilité. (L'idéal est de tout faire tenir dans du 800*600 mais ce n'est bien sûr pas une obligation !)

Insertion de liens hypertexte :

Le lien hypertexte est à la base de la navigation sur internet : il fait la liaison entre votre page (ou la page que vous visitez) et une autre page qui se situe soit sur votre site, soit sur un site du world wide web. Vous pouvez créer un lien à partir de n'importe quel mot de votre texte :
Sélectionner le mot ou la phrase ou vous souhaitez placer le lien. Allez ensuite dans le menu "insertion ----> lien" et choisissez votre page de destination : Cela peut être une nouvelle page que vous souhaitez créer, une page existante dans votre site web actuel ou encore l'adresse d'une page sur internet. Dans ce dernier cas, vous devez entrer l'adresse URL de la page (http://www.magic.fr/ par exemple ).

Si vous souhaitez lancer la messagerie de l'internaute qui cliquera sur le lien, alors choisir comme type de lien "mailto:" et entrer derrière votre adresse email (pour recevoir le message !) Ne pas mettre d'espace.
Note : Une façon plus simple pour lancer la messagerie consiste à taper directement votre adresse email sur votre page. Elle sera automatiquement transformé en lien (couleur bleue)
Lien du type "FTP" . Si vous souhaitez que la personne qui clique sur votre lien charge un fichier (téléchargement d'un logiciel ou d'un document non visualisable par l'explorateur par exemple) , utilisez le protocole FTP://www.adresse-du-logiciel-ou-fichier  (à taper dans la zone "URL"), qui est plus rapide

Lien hypertexte associée à une image :

Pour associer un lien à une image, cliquer sur votre image avec le bouton "DROIT" de la souris. Dans la zone "emplacement" (en bas) cliquer sur "parcourir" et choisir la page vers laquelle vous voulez lier l'image. Comme précédemment, il est possible de placer une adresse internet , un fichier local, une adresse email ... Vous pouvez bien sûr choisir une autre image qui serait par exemple votre image clicable en format plus important :

Cadre de destination :

Si vous souhaitez que l'explorateur ouvre une nouvelle fenêtre lorsque qu'on clique sur un lien, donner un nom quelconque à cette fenêtre (remplir la zone "cadre de destination" avec par exemple "newcadre")

Les tableaux

Il est souvent utile d'utiliser les tableaux pour positionner les textes et images sur la page. Vous devez prévoir l'organisation générale de votre page pour décider ensuite du nombre de lignes et de colonnes que comportera votre tableau. Dans un premier temps, essayer de faire simple afin de vous familiariser avec les tableaux dont le comportement est un peu déroutant pour le débutant. Voici quelques conseils :

- Vous pouvez insérer rapidement un tableau en cliquant sur l'icône   .
- Autre fàçon :  cliquer dans le menu "Tableau ----> insérer tableau".
Choisir ensuite le nombre de lignes et de colonnes désiré. Indiquer l'alignement du tableau (gauche, droite ou au centre de la page). Donner aussi une dimension (en pixel ou pourcentage de la page) pour la largeur du tableau. Même si l'option "hauteur" existe il n'est pas possible de définir la hauteur ici. La hauteur du tableau dépendra de son contenu .
Il est généralement préférable de fixer en pixel la dimension du tableau, afin qu'il ne dépende pas de la largeur de la fenêtre du navigateur.
- Réglage des paramètres du tableau :

Vous pouvez régler ces paramètres en cliquant sur le tableau avec le bouton DROIT de la souris et en sélectionnant "propriété du tableau"
Il est possible de changer les couleurs du tableau (fond, bordure ...) en sélectionnant la couleur voulue dans la boite de dialogue.
Noter une caractéristique (un peu déroutante ?) : La taille de votre cellule varie lorsque vous y ajoutez du texte ou image. Une option "fixer la taille de la cellule en pixel" existe bien mais elle ne fonctionne pas de façon simple. En effet, si vous essayer de fixer la taille d'une cellule sans vous occuper des autres, cela ne fonctionnera pas (résultat aléatoire) . De plus il faut aussi tenir compte de la taille du tableau (taille de la somme des cellules = largeur du tableau).
Enfin, la cellule s'adaptera toujours à son contenu, ce qui fait que si vous y placer un image supérieure à la largeur définie de la cellule, celle-ci s'agrandira automatiquement.
Pour corser le tout, il faut savoir que Netscape et Explorer (les deux principaux navigateurs internet) n'interprètent pas exactement de la même manière les tableaux (en autres) et il vaut mieux vérifier que tout est ok pour les 2 navigateurs avant de se lancer dans des tableaux complexes !
N'utiliser pas d'image de fond à l'intérieur d'un tableau : Netscape ne la lira pas (en tout cas jusqu'à la version 3 largement répandue)
Autres exemples de tableau :

Taille bordure : 1
Remplissage : 1
Espacement entre les cellules : 0
Couleurs :
Fond : Blanc
Toutes les bordures : Noires

Pour réaliser le tableau ci-dessous :

Faire un tableau avec 4 cases puis fusionner les deux cellules de la première ligne.
Pour cela, sélectionner les cellules (comme pour sélectionner un bloc texte) puis cliquer dans le menu "tableau---->fusionner cellules"
Pour rajouter des lignes ou des colonnes à un tableau, placer vous sur la dernière ligne ou colonne du tableau et cliquer dans le menu "tableau---->insérer ligne ou colonne" . Choisissez alors l'opération voulue.
Vous pouvez scinder une cellule dans le sens de la longueur : Placer le curseur dans la cellule à scinder puis cliquer dans le menu "tableau ----> scinder " et choisir "ligne" et le nombre de lignes.
En cas de fausse manoeuvre vous pouvez toujours annuler la dernière opération en cliquant dans menu "edition--->annuler..."
Note : Il n'est pas toujours possible de scinder une cellule en un nombre quelconque de cellules. Tout dépend en effet des cellules voisines qui imposent le nombre de colonne ou de ligne en cas de scission :

Conception d'un formulaire

Qu'est-ce qu'un formulaire ?

Un formulaire est une zone de texte qui peut être rempli par l'internaute qui souhaite par exemple passer une commande pour un produit de votre société, participer à un sondage ou tout simplement vous laisser un message.
Lorsque l'internaute appuie sur le bouton "ENVOIE", toutes les données entrées dans les divers champs du formulaire seront envoyées soit à votre boite aux lettres, soit à une base de données ou un programme CGI pour un traitement automatique. Dans le cas le plus simple, c'est donc à votre boite aux lettres que les données seront envoyées.

Exemple : Taper, en passant successivement à la ligne, "nom", "prénom" "email" "message".
Placer ensuite le curseur juste en dessous de "Nom" et cliquer dans le menu "insertion---> champ de formulaire " Choisissez "zone de texte simple".
(faire de même pour prénom et email)
En dessous de "votre message", cliquer "sur insertion---> champ de formulaire" et insérer une "zone de texte déroulante"
Rajouter de même un "bouton de commande"
Vous pouvez ajuster avec la souris la taille des différentes zones de texte. Votre formulaire devrait ressembler à ceci :

Vous devez maintenant donner un nom à chaque zone de texte de votre formulaire :
Cliquer sur le champ "nom de famille" avec le bouton droit de la souris. Sélectionner "propriété du champ du formulaire" et entrer dans la zone "nom" le mot "nom_famille" Ne pas mettre d'espace, d'accent et autres caractères spéciaux, cela risque de dysfonctionner (en tout cas, j'ai eu des problèmes avec front page 97).
Faire la même chose pour le champ prénom (placer dans la zone "nom" le mot : "prenom") et email ("email" à inscrire dans le champ nom) ainsi que la zone "votre_message".

Vous devrez ensuite indiquer le type d'action à appliquer lorsqu'on appuiera sur le bouton : ici, il faut que le formulaire vous soit envoyé par mail à votre adresse email  (par exemple payet@wanadoo.fr )
Avec Front page 98 et ultérieur, il suffit simplement d'entrer l'adresse email (effacer ce qui est inutile, vous devez obtenir quelque chose comme ci-dessous ) :


Il est possible de placer dans les zones de texte, un message par défaut . Pour cela, cliquer avec le bouton droit de la souris sur la zone de texte et placer dans "valeur initiale" un message quelconque de votre choix (par exemple "cliquez ici !")

Vous pouvez rajouter un second bouton en bas de votre formulaire, en lui attribuant le paramètre "rétablir" . Lorsque l'internaute cliquera sur le bouton, cela effacera tout le formulaire et rétablira les messages par défaut s'ils existent.

Formulaire : les boutons "case à cocher et case d'option" :
Il est possible de placer des boutons "case à cocher" ou "case d'option" .
Pour "case à cocher" , l'internaute pourra tout cocher
Pour "case d'option" l'internaute devra impérativement choisir entre les différentes options que vous proposerez dans le formulaire.
Comme précédemment, vous devrez donner un nom interne à vos bouton (vous pouvez laisser les noms par défaut mais c'est moins parlant !)
Note importante : pour le nom de la case d'option, il s'agit en faite d'un nom de groupe ! Toutes les cases d'option appartenant au même groupe doivent avoir le même nom ! Vous pouvez ainsi définir plusieurs groupes dans lesquelles les options s'excluent mutuellement.
Vous pouvez définir, à l'intérieur d'un groupe, quelle option sera sélectionné par défaut . Noter qu'une seule option peut-être sélectionné par défaut à l'intérieur d'un même groupe !
Exemple : deux groupes (Sexe et Age) :

Les contraintes applicables aux champs de formulaire :

Vous pouvez imposer différentes contrainte afin de limiter les erreurs dans le remplissage du formulaire.
Par exemple, en cliquant avec le bouton droite sur le champ "prenom" du formulaire, et en sélectionnant "validation du champ du formulaire" vous pouvez choisir le type de contrainte :
"pas de contrainte" ou "texte", ou "entier" ou "numérique".
"pas de contrainte" : par défaut, tout est accepté.
"texte" : seul du texte peut être entré.
"entier" : impose un nombre entier
"numérique" : un nombre (mais pas de texte)

En fonction du type de contrainte que vous choisissez, vous pouvez encore affiner (voir les options proposées)
Pour les boutons "case option" et "case à cocher", vous indiquez en cliquant sur "validation du champ du formulaire" si la donnée est requise ou non. Vous pouvez ainsi obliger l'internaute à choisir au moins une option à l'intérieur d'un groupe.

Insertion de balises html

Une "balise html" est du code html que vous ajoutez directement dans votre page et qui ne sera pas interprété par votre éditeur. Cela peut-être par exemple du code pour activer un compteur de visite sur votre page, ou bien afficher une bannière si vous participez à un programme d'échange de bannières, ou encore mettre une musique de fond sur votre page qui se chargera automatiquement.
Pour insérer la balise (qui n'est ni plus ni moins que du texte), cliquer dans le menu "insertion---->balise HTML" et taper (ou coller, c'est plus sûr !) le texte de la balise qui vous sera fourni .

Les images à zones réactives

Il est possible réaliser des liens à partir de diverses zones d'une même image. Pour cela cliquer sur l'image et sélectionner dans la barre d'outil qui apparaît (en bas normalement) sur l'une des options (cadre, cercle ou forme quelconque). Délimiter alors la zone à lier puis entrer le lien hypertexte dans la boite de dialogue qui apparaît.Répéter l'opération en définissant d'autre zones.

Les Frames

Il est possible d'afficher plusieurs pages (généralement 2 ou 3) en même temps sur l'écran, chacune occupant une partie précise de l'écran et ayant des fonctions différentes. Par exemple la frame de gauche affiche un menu ou sommaire et la frame de droite affiche le contenu de la page sélectionnée dans le menu. Cela permet d'avoir en permanence le sommaire sous les yeux et facilite la navigation dans votre site ...

Remarque diverses :

Lorsque vous stockez une image, un fichier ... directement dans le répertoire de votre site  vous devez ensuite cliquer dans l'arborescence à gauche de l'éditeur puis dans le menu "affichage--->actualiser"  afin que cela soit pris en compte (sans quoi vous verrez rien apparaître si vous essayer de charger l'image en question avec votre éditeur )

Si vous utilisez "Insertion---->fond sonore" de l'éditeur FrontPage, vous pouvez insérer une musique de fond dans votre page mais seuls les internautes qui utilisent "Microsoft explorer" l'entendront ! (cela ne marche pas avec Netscape) . Il existe des heureusement des balises compatibles Netscape et Explorer.

Exercices à faire pour s'entrainer :
- Faire une page web avec votre CV et votre photo (que vous pouvez digitalisez avec la webcam. Voir prof )
- Faire une page web pour expliquer le fonctionnement d'un capteur photo électrique du palettiseur.
- Faire une page web avec la liste des liens que vous avez trouvé sur internet sur vos sujets favoris.
- ...