C.4 Composition Web

Qu'est-ce qu'une page web ?

Pour plus d'informations sur ce point, voir ressource d'approfondissement 1 et 2.

• C'est une page qu'on peut lire sur le réseau Internet à l'aide d'un navigateur comme Internet Explorer, Firefox, Opera.
• On peut concevoir une page pour diffuser des informations personnelles, des travaux intéressants pour la collectivité, des informations à visée commerciale... Une fois que la page est conçue, encore faut-il trouver un endroit où la déposer pour qu'elle soit diffusée sur le réseau Internet. Ainsi, à l'UniGE
  • Chaque étudiant(e) possède un espace réservé sur un serveur pour publier sa page personnelle (répertoire H\publicwww ; adresse de la page : http://home.etu.unige.ch/~login).
  • Par ailleurs, dans le cadre de l'iTIC, le travail réalisé par les étudiant(e)s sera déposé sur un serveur de TECFA auquel ils accèderont par SFTP (voir Fiche Hygiène du site).
• Le format le plus courant de cette page est le HTML. Il s'agit d'un langage standard pas très compliqué à apprendre. Avoir une idée d'à quoi ça ressemble pourra vous être bien utile. Cliquez ICI pour en savoir plus.

Avec quel outil réaliser une page web ?

Pour plus d'informations sur ce point, voir ressource d'approfondissement 3 .

• On peut concevoir des pages html sans rien connaître du langage lui-même. Il existe en effet des outils, des éditeurs d'html, qui le permettent. C'est par exemple le cas de KompoZer de Netscape (accessible sur toutes les machines de la FAPSE).  D'autres comme Dreamweaver ou Golive -plus complexes - sont beaucpoup plus difficiles à maîtriser.
• Dans le cadre des activités TECFA nous n'autorisons pas Frontpage qui produit un code non compatible.
• Voici dans la colonne de gauche les fonctions de base avec tout éditeur et dans celle de droite comment elles sont prises en charge dans KompoZer (voir ressource d'approfondissement 3 pour plus de détails sur KompoZer) :
  
  

  Mettre le titre de la page (qui apparaît dans la barre titre du navigateur)	Via la barre de menu :Format -> Titres et proprietés de la page
  Entrer du texte (mise en page, liste,...) : vous retrouvez plus ou moins les mêmes fonctions que dans un traitement de texte : choix de la police, de la taille, souligné, italique, listes à puce, etc.	Fonctions accessibles dans la barre de'édition ou via barre de menu Format
  Insérer un tableau. Le tableau sur une page web peut servir pour présenter des données comme dans le cas des tableaux réalisés avec un traitement de texte. C'est par exemple le cas du tableau dans lequel vous êtes en train de lire ces informations. Il peut aussi servir à structurer des informations sur la page. Ainsi, par exemple, les icones qui se trouvent en haut de cette page et qui vous permettent de naviguer dans le site de l'iTIC sont en fait disposées dans un tableau comportant 1 ligne et 5 colonnes. La bordure n'est simplement pas apparente car on a précisé qu'elle était égale à 0 en créant le tableau.	Via la barre de menu : Tableau ou via l'icone tableau  Possibilité de définir notamment le nombre de colonnes, de lignes, la taille de la bordure, la taille des cellules.
  Insérer un fond particulier, une couleur ou une image Faire attention à la lourdeur de l'image de fond car au moment de la consultation de votre page sur internet, cela peut ralentir de manière conséquente le chargement pour les gens qui ont une connexion faible.	Via la barre de menu : Format -> Couleurs et fond de page
  Définir les couleurs de texte, des liens,... Une sélection vous est donnée par défaut par l'éditeur, ce sont les couleurs standards pour le texte sur Internet : - noir pour le texte - bleu pour les liens Il vous donne aussi une couleur pour le lien visité (quand l'utilisateur a déjà cliqué sur un lien, sa couleur change pour le lui rappeler) et pour le lien activé (quand vous êtes sur le lien en question). Vous pouvez changer ces couleurs mais attention aux choix que vous faites : éviter le bleu pour ce qui n'est pas un lien et assurez-vous que le texte est lisible avec la couleur choisie.	Via la barre de menu : Format -> Couleurs du texte ou via l'icone
  Insérer une image fixe ou animée (au bon format)	Via la barre de menu : Insértion ->Image ou via l'icone Image
  Insérer un lien : créer un lien quel qu'il soit, c'est toujours plus ou moins la même procédure avec un outil commun proposé par l'éditeur...à quelques détails près...Il s'agit de sélectionner l'endroit à partir duquel vous souhaitez faire un lien et d'ouvrir l'éditeur de lien pour spécifier le chemin du lien : - vers une adresse électronique : pour spécifier qu'on souhaite faire un tel lien, il s'agit d'indiquer avant l'adresse "mailto:" - externe à la page et au site en construction (lien absolu) : il s'agit d'indiquer l'adresse exacte de la page vers laquelle vous souhaitez faire le lien (exemple : les liens dans les ressources d'approfondissement sont tous externes au site de l'iTIC et sont donc dits "absolus") - interne au site (lien relatif) : il s'agit de faire un lien vers un autre fichier qui fait partie de votre site en construction. Là, le lien est dit relatif car il ne spécifie que le chemin interne au site que vous construisez. - lien vers une ancre dans la page : il s'agit d'un lien à l'intérieur de la page qui renvoit vers un autre endroit de la page où on a créé une ancre : cela permet de naviguer plus facilement d'autant quand la page est un peu longue à faire défiler. Ainsi par exemple, vous pouvez cliquer ici pour retourner en haut de cette page. Pour pouvoir faire ça, il a fallu que nous placions une ancre en haut de cette page : le lien qui mène vers cette ancre se rédige sous la forme "#nom_de_l'ancre"	L'éditeur de lien est accessible via la barre de menu : Insertion -> Lien  ou via icone

Enregistrer et nommer un fichier pour le web

IMPORTANT : une fois que vous créez un fichier, vous devez lui donner un nom. Pour qu'il puisse être ensuite lu sur le Web, il doit respecter une certaine syntaxe :

• PAS de caractères spéciaux : é,&,",',(,-,è,à,ç, etc.
• PAS d'espace (remplacer l'espace par le trait souligné _ )
• PAS de majuscule
• PAS de point (autre que celui qui sépare le nom de l'extension du fichier)

De plus, il est très conseillé d'écrire un nom simple, pas trop long et explicite.

Gérer l'architecture d'un site

Voir fiche sur l'hygiène d'un site et plus particulièrement celui à réaliser dans le cadre de l'iTIC

M.V-LGRetour à la page d'accueil de l'EO771

Retour aux ressources