PUBLICATION INTERNET
avec
FRONT PAGE 97 - 98

I- INTRODUCTION

1 - Qu'est ce que le langage html ?

Le langage html est un ensemble de code 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

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.

Note : extensions front-page sur serveur distant et serveur web personnel

II- Mise en route

Après avoir installé complètement frontpage, rebooter votre ordinateur. Vérifier que votre serveur web personnel est bien lancé et apparaît dans la barre des tâches en bas à droite. Vous pouvez maintenant lancer frontpage. (il n'est pas nécessaire d'être connecté à internet pour lancer front-page, vous faîtes tout en local et transférerez tout via FTP chez votre hébergeur internet)
Vous devez créer un nouveau site web avec l'explorateur front-page puis double-cliquer sur la page qui apparaît par défaut. L'éditeur front page est alors lancé et vous êtes prêt à éditer votre première page web

III- L'éditeur FrontPage

Les fonctions de base :

- Attributs du texte : Taille, gras, souligné, couleur ... pas de difficulté particulière.

- Fontes : attention aux fontes exotiques : utiliser de préférence les fontes classiques de window (Arial, Times ...) car si l'internaute qui visite votre page n'a pas votre fonte, cela risque de gâcher l'effet que vous avez voulu donné à votre page ou pis encore, la rendre illisible (problème avec le fond d'écran)

- Ne cherchez pas la justification à droite et à gauche (comme sous Word ) : le langage html ne prévoit pas de justifier le texte et il est donc impossible de réaliser ce type d'opération avec l'éditeur frontpage (ou tout autre éditeur).
Attention : si un éditeur (pour ne pas citer par exemple Microsoft Publisher) vous permet soit-disant de réaliser des pages web justifiées, c'est une arnaque : votre texte (justifié) est transformé purement et simplement en une image très lourde à charger (c'est beau mais totalement inefficace car l'internaute n'attendra pas 10 minutes pour charger une page de texte, et il ira voir ailleurs !)

- Passage à la ligne : Si vous appuyez sur "entrée" vous sautez une ligne. Il faut appuyer en même temps sur "shift" et "entrée" pour juste passer à la ligne. Plus long, vous pouvez sélectionner à la souris "Insertion---> saut ---> saut de ligne normal"

- Espace et tabulation : L'espace entre les mots est d'un caractère, vous ne pouvez pas augmenter l'espace même vous acharnant sur la barre d'espace ou de tabulation. Cela est dû aux limitations du langage html, pas à votre éditeur ! On verra plus tard que l'utilisation de tableaux permettra de résoudre beaucoup de problèmes.

- Indentation en début de ligne : utiliser les outils pour augmenter ou diminuer le décalage de votre texte par rapport au début de la ligne.

- Vous pouvez utiliser la fonction "liste numéroté" pour numéroter automatiquement vos paragraphes.

- Caractères spéciaux : Vous pouvez insérer des caractères complémentaires en cliquant dans menu "insertion--->symbole"

- Insertion d'une ligne horizontale : Cliquer sur dans menu "insertion--->ligne horizontale". La ligne est alors insérée à l'endroit ou se trouve le curseur. En cliquant ensuite sur la ligne avec le bouton droit, vous pouvez modifier les paramètres de la ligne (longueur, largeur, couleur...)
Note : la longueur de la ligne peut être exprimée en pixel ou en pourcentage de la page. Si vous choisissez "pixel" vous devrez entrer par exemple 800 ou 400 . Cette taille sera fixe quelque soit la taille de la fenêtre du navigateur. En choisissant "pourcentage" (1 à 100) , vous aurez une ligne qui restera proportionnel à la taille de la fenêtre.
Cette fonction "pourcentage", que l'on retrouvera aussi lorsqu'on fera des tableaux, n'a pas toujours l'effet escompté et il est généralement préférable de fixer définitivement la largeur de votre ligne ou tableau.

Propriétés de la page

Changer le titre de la page : cliquer dans menu "Fichier---->propriété de page" et modifier le titre de votre page. Le titre de la page est ce qui apparaîtra dans la barre bleu en haut du navigateur internet. Il est important de bien choisir son titre qui doit résumer au mieux le contenu de votre page. Nous verrons, dans le cours "techniques de référencement" le rôle fondamental du titre (tag <title> ... </title>).

Changer la couleur de fond de la page : cliquer dans menu "Fichier---->propriété de page---> 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).

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 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 !)

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 ), 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 "adresse" (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.

Les signets :

Un signet permet de vous déplacer à l'intérieur d'une page. En cliquant sur un mot ou une phrase utilisé comme signet, l'explorateur vous renverra vers un paragraphe précis (que vous aurez défini en tant que marqueur).
Supposons que l'on veuille accéder au paragraphe "Voiture et véhicules d'occasion" en cliquant dans le sommaire "Occasion".

Sélectionner "Voiture et véhicules d'occasion" puis aller cliquer dans le menu "edition---->signet" et cliquer sur "Ok". Votre signet est placé dans la liste des signets. (vous pouvez ainsi définir autant de signet que vous voulez)

Sélectionner "Occasion" dans votre sommaire en début de page et cliquer sur "insertion ----> lien----> page ouverte" . Choisir la page sur laquelle se trouve votre signet (normalement la page en cours) , et sélectionner votre signet avec le menu déroulant à coté de "signet"

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" dans le menu "insertion---->lien" 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 .
- Si vous voulez plus de lignes et/ou de colonne, 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. 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 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.
Pour front page 97, cliquer sur le bouton "envoyer" avec le bouton droit de la souris et sélectionner "propriété du formulaire". Donner (optionnel) un nom à votre formulaire puis cliquer sur configurer :
ACTION : mailto:votre_adresse@guetali.fr
METHOD : POST
TYPE DE CODAGE : text/plain

Avec Front page 98, il suffit simplement d'entrer l'adresse email (le reste est configuré automatiquement)

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 haut à droite 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 c:\webshare\wwwroot\votre-site\ vous devez ensuite cliquer dans le menu "affichage--->actualiser" de l'explorateur FrontPage, 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.

http://louispayen.apinc.org/