KompoZer Un éditeur de pages Web M r Castanet - Année scolaire 2007/2008 - page 1
I. Introduction : Au cours de cette formation, nous allons utiliser le logiciel KompoZer, qui gratuit et libre de droit, permet de créer des pages Web aussi facilement que Word permet de créer un document texte. Son design et son utilisation sont assez proches de DreamWeaver le plus célébre des composeurs de pages Web : ce dernier est largement plus abouti mais en contre partie, il est payant. A la base, les pages Webs ne présentent que des informations et des liens pour naviguer de page en page. La description des différents éléments d une page Web et de leurs formatages ce fait à l aide du langage HTML. Celui-ci est relatibement facile apprendre : une syntaxe simple et une pauvreté de vocabulaire. Les éditeurs de pages Web tel que KompoZer ou Dreamweaver permettent de contstruire des pages Web uniquement en manipulant des boutons, en actionnant des commandes dans les menus, en déplaçant des objets. Ils transforment alors vos actions en langage HTML. Par contre, pour créer des pages Web dynamique (en utilisant le langage JavaScript ) ou des sites de grandes tailles (en utilisant le langage PHP ou une base de données), il sera alors indispensable de connaître le langage HTML. WYSIWYG est l acronyme de What you see is what you get, c est à dire que vous vous contenterez de cliquer, de déplacer des objets, d utiliser des commandes dans la barre de menu et le logiciel se chargera de créer le code correspondant à vos manipulations. Le langage HTML à ses débuts n était pas standardisé; les deux compagnies Netscape et Microsoft se sont livrés une guerre au travers de leurs navigateurs pour imposer leur norme. Ainsi, une page Web pouvait s afficher sur Netscape Navigator et Internet Explorer avec des différences gênantes. Un organisme de standardisation, le W3C (Word Wide Web Consortium), a vu le jour pour imposer des normes dans les langages Web. Actuellement, le langage HTML ne présente plus de différences sur les différents navigateurs les plus célèbre Internet Explorer, Opera et Firefox. Mais quelques différences persistent sur l utilisation des feuilles de styles CSS et le langage JavaScript. Nous allons au cours de cette formation essentiellement travailler sur la mise en page des pages Web. Nous fairons une petite introduction au feuille de style afin d améliorer le design et l homogénéité d un site. Nous terminerons cette première phase de la formation en mettant notre site en ligne sur Internet. KompoZer - page 2
Tout au long de cette formation, on notera l accès à une commande de la manière suivante : Insertion Formulaire Zone de texte... Ici, on indique la commande Zone de texte se trouvant dans le menu Insertion et dans la sous-commande Formulaire. Voici quelques remarques pour pouvoir lire plus facilement la suite de ce fascicule : On appelle navigateur les logiciels tels que Internet Explorer, Firefox affichant les pages Webs. Ce sont eux qui transforment les indications du langage HTML en objet affichable à l écran. On appelle client, la personne et son ordinateur recevant une page Web. La mise en forme d une page Web passe par les éléments HTML. Chacun d eux possède une fonction : mise en gras, augmentation de la taille de la fonte... Un élément est généralement défini par deux balises, une ouvrante et une fermante, encadrant le texte pris en argument. Une balise ouvrante est de la forme <...> et une balise fermante de la forme </...>. Par exemple pour mettre du texte en fonte grasse, on utilise la balise suivante : <b>... </b> Où les pointillés remplacent le texte a mettre en gras. Certains éléments HTML ne sont définis que par une balise ouvrante comme nous le verrons dans la suite de la formation. Voici la présentation du code HTML d une page HTML ne contenant que le mot Bonjour. Vous pouvez repérer la présence de nombreux éléments HTML. Aucune étude ne sera faite dans cette partie de la formation sur le langage HTML : II. Présentation de KompoZer : Voici un aperçu de la fenêtre principale de KompoZer : KompoZer - page 3
Voici les différentes parties de la fenêtre de KompoZer : 1. barre des titres : elle affiche le nom du fichier courant, ou le titre de la page dans le cas où celui-ci a été défini. 2. barre des menus : elle contient l ensemble des commandes de KompoZer. Il est parfois préférable d utiliser les commandes à partir de la barre des menus que leurs équivalents dans la barre d outils car davantage d options peuvent être proposées. 3. barre d outils : ces boutons permettent un accès rapide vers les commandes les plus utilisées. 4. espace de travail : dans cet espace sera représenté la page Web en cours d édition. 5. barre d état : indique des informations suivant les éléments sélectionnés. KompoZer propose trois manières de présenter une page en cours d édition : le mode Normal affiche la page comme elle est affichée dans un navigateur. le mode Balises HTML (balises se disant tags en anglais). KompoZer affiche la page comme dans un navigateur mais rajoute des indications sur la présence des éléments HTML. le mode Source affiche le code HTML source de votre page. On utilisera essentiellement le mode normal pour construire nos pages Web ; le mode Balise HTML sera utilisée pour affiner la construction d une page, notamment lors de l application de styles CSS sur les éléments HTML de la page. Le mode Source lui ne sera utilisé que pour les utilisateurs avancés pour débugger certain comportement de KompoZer ou pour y intégrer du code JavaScript. KompoZer - page 4
A. Formatage du texte : III. Première page : Sur une page contenant du texte, après avoir sélectionné une partie, vous accéderez aux commandes de formatage du texte (de mise en forme du texte) à l aide des commandes suivantes : Format Police ou Taille ou Style de texte En soit, le changement de police ne pose aucune difficulté, celui-ci se passe comme dans les logiciels de bureautique. En HTML, la taille de la police se mesure de 1 à 7. Le menu ci-contre accessible via : Format Taille permet d augmenter ou réduire la taille du texte relativement à la taille du texte. Remarquer que dans chaque navigateur vous devez possèder une commande Taille du texte permettant de modifier la taille d affichage du texte dans une page Web. Les deux premiers choix permettent d augmenter ou de baisser d une unité la taille du texte sélectionné, à l aide des éléments big et small ). Les cinq autres choix modifieront la taille de la sélection relativement à la taille courante de la page, à l aide de l élément font. Actuellement, ces éléments et cette conception de la taille des caractères d une page Web tombe en désuétude avec l utisation des feuilles de styles CSS qui lui sera préféré (l utilisation des points comme mesure sera alors utilisé) Voici pour les styles ; La première partie est l ensemble des styles communément utilisés avec en plus largeur fixe permettant d obtenir un changement de police où chaque caractère possède une même largeur. La seconde partie des commandes est un vieil ensemble de commandes HTML permettant d harmoniser la présentation d un document (même formatage par exemple pour les abréviations d un document). B. Couleurs du texte : Après avoir sélectionné la partie du texte à colorier, utilisons la commande : Format Couleur du texte... KompoZer - page 5
La boîte suivante permet de sélectionner la couleur à utiliser : Vous choisirez rapidement une couleur dans le cadre des couleurs prédéfinies 4.. Voici une explication quant à la partie 3. et 5. de cette boîte à dialogue : En informatique, tout n est que nombre, une couleur peut être définie par : le modèle RGB représentant une couleur par l addition de 3 couleurs (Rouge, Vert, Bleu) le modèle TSL (teinte, saturation, luminosité - HSB en anglais) permet également de représenter une couleur (il ne sera pas étudié ici) On remarque en 3. les différents nombres représentant une couleur dans ces deux modes. Le nombre défini en 5. représente le code hexadécimal représentant la couleur en mode RGB. En informatique, les données sont représentées en mode binaire (que des 0 et des 1 appelés bits). Une succession de 4 bits représente un nombre ayant une valeur de 0 à 15 : on représentera un tel nombre par un chiffre hexadécimal représenté par les chiffres : 0 ; 1 ; 2 ; 3 ; ; 9 ; A ; B ; C ; D ; E ; F Un octet est une succession de 8 bits, il sera représenté par 2 chiffres hexadécimal ayant une valeur de 0 à 255. Dans le modèle RGB de couleurs utilisés dans le standart Web, chaque composnte sera codé sur 1 octet : ce modèle est le RGB-24bits (3 composantes 8 bits) C. Couleurs et fond de page : On accédera à la gestion des couleurs et du fond de page à l aide de la commande Format Couleurs et fond de page... KompoZer - page 6
La boite à dialogue suivante apparaîtra : Voici les différentes options proposées : 1. Cette case représente la couleur du texte par défaut pour l ensemble de la page. 2. Les liens occupent un status spécial parmi l ensemble du texte de votre page. Trois couleurs lui sont affectées : le lien normal, le lien déjà visité et le lien lorsque le client clique sur le lien. 3. Représente la couleur de fond de votre page 4. Une image peut être insérée au fond de page. Les premières options proposent un bouton représentant la couleur actuellement sélectionnée. Un clic sur ce bouton fait apparaître la boîte précédemment présentée pour le choix de la couleur. On pourra modifier la manière dont sera placée une image au fond de votre page. Pour utiliser correctement les images dans un site Web, il faut avoir des connaissances sur les URL relatives et absolues qui seront introduites dans un prochain chapitre. D. Les paragraphes : KompoZer - page 7
Nous allons étudier maintenant les commandes de structures de paragraphes se trouvant en l emplacement : Format Paragraphe dont le contenu est présenté ci-contre KompoZer insère le texte de deux sortes : en corps de texte ou en paragraphe. L appui de la touche Entrée réagira de deux manières différentes suivant le mode courant : En mode corps de texte, cette touche entraînera un simple retour à la ligne. Alors qu en mode paragraphe, le texte sera inséré dans l élément HTML p. Cet élément définit un paragraphe : un espace vertical sera placé après l élément le séparant ainsi des autres élément. On peut modifier le mode d écriture sur une ligne en y plaçant le curseur et en activant une des deux commandes corps de texte ou paragraphe. Les commandes de Titre 1 à Préformaté ne sont plus trop utilisées. Ils permettent d obtenir un formatage prédéfini et permettent ainsi une homogénéité de présentation d un site : les feuilles de styles offrent actuellement cet avantage. Le conteneur générique div définit un des éléments les plus importants du langage HTML : cet élément n apporte rien en terme de formatage, il permet de considérer son contenu comme un bloc : On applique le même formatage de texte à l ensemble du contenu à l aide des feuilles de styles. Cet élément sera gérable via JavaScript. En pratique, on préfére utiliser l élément div à p pour définir un bloc. E. Les listes : Les listes permettent de présenter une énumération d éléments. KompoZer - page 8
La commande Format Liste permet d accéder au menu cicontre définissant deux types de listes : Les listes ordinales (défini par l élément ol ) : où chaque élément de la listes sera précédé d un numéro arabe ou romain, ou alors d une lettre de l alphabet. Les listes non-ordinales (défini par l élément ul ) : où un symbole (carrés, rond) précédera le début de chaque élément de la liste. On modifiera dans un premier temps le format de la numérotation et les puces servant à marquer un élément de la liste en choisissant la commande : Format Liste Propriété de la liste... on verra un formatage plus efficace des listes à l aide des feuilles de styles dans un prochain paragraphe. Les commandes Terme et Définition sont devenus obsolètes et n était utilisés que pour faciliter le formatage de définitions et autres. Il est bon de rappeler que le réseau Internet ainsi que les pages Web ont été développés dans le milieu scientifique pour la diffusion de documentation informatique. F. Retrait et alignement : Pour effectuer le décalage du texte vers la droite (appelé retrait positif) et ainsi le mettre en évidence un paragraphe, on utilise la commande : Format Augmenter le retrait Voici son équivalent pour réduire le retrait : Format Diminuer le retrait La commande Format Aligner permet d aligner à droite, à gauche, centrer ou justifier une ligne de texte. Lors de l utilisation de l une des commandes précédentes, KompoZer place la ligne courante dans des pointillés rouges : KompoZer a placé votre texte dans un élément div créant ainsi un bloc et a utilisé les feuilles de styles pour obtenir l alignement ou le retrait. G. Propriétés de la page : La commande Format Titre et propriété de la page... permet : de donner un titre à votre page ; celui-ci sera affiché dans la barre des titres du navigateur. Auteur, Description, Langue : ces informations serviront essentiellement aux moteurs de recherche pour le référencement de votre page. KompoZer - page 9
de spécifier l encodage des caractères choisi par le navigateur pour afficher votre texte. Un caractère est représenté à l intérieur de l ordinateur par un nombre. Il existe donc pour chaque alphabet une table de correspondance entre un caractère et un nombre. Cette table de correspondance n est pas la même pour une langue européenne et une langue asiatique. Ce choix s appelle le type d encodage de caractères. IV. Structure d un site Internet : A. Introduction : Ce qui distingue une page Web d un document Word, sont les liens hypertextes indiquant au client, par le changement d apparence du curseur, la présence d un lien et ainsi de pouvoir se diriger vers une autre page. Les pages Web sont simplement des fichiers contenant du texte : le code en HTML. Ces fichiers portent généralement les extensions.html et.htm Pour créer une page Web, il suffit de créer un nouveau fichier texte avec le blocnote, d y rentrer quelques phrases et de l enregistrer avec l extension.html afin qu il s ouvre un navigateur. Ainsi, un site Internet est composé de fichiers.html représentant les pages Web et de tous les fichiers l accompagnant (images, sons, vidéo, animation flash... ). Dans la construction d un site Web, il est préférable d organiser nos fichiers en dossiers et sous-dossiers : ceci améliorera grandement la maintenance et la mise à jour du site. B. Du local au distant : Lorsqu on navigue sur Internet, on demande à des ordinateurs distants de nous envoyer des pages Web. Ces ordinateurs s appellent des serveurs et peuvent être de simples ordinateurs domestiques ou des super-ordinateurs. Un ordinateur s appellera serveur dès qu on y installera des logiciels spécialisés permettant à l ordinateur de répondre aux demandes d autres ordinateurs, alors appelés les clients. Lors de la mise en ligne de votre site sur Internet, vous devrez avoir l accès à un de ses serveurs, généralement votre fournisseur d accès internet (Free, Wanadoo... ) vous offre un espace sur son serveur pour y déposer votre site. Ces ordinateurs ont au minimum 2 fonctions : KompoZer - page 10
Serveur FTP permettant de transférer l ensemble de nos fichiers sur le serveur et de gérer ses fichiers. Serveur HTTP qui communiquera avec la navigateur du client en lui envoyant les pages demandées. On se servira de : SmartFTP poru communiquer le serveur FTP distant et transférer l ensemble de notre site chez l hébergeur. Firefox comme navigateur (qu on préférera à Internet Explorer pour la construction d un site) pour communiquer en HTTP avec le serveur et ainsi recevoir les pages Internet. C. Racine du site : Ainsi, on construit d abord un site sur une machine locale avant de l envoyer sur le serveur distant. Sur votre ordinateur, vous commencerez à construire votre site à partir d un dossier. De ce dossier, on placera les fichiers et les sous-dossiers constituant le site. L hébergeur de votre site vous laissera un espace sur le disque dur de son serveur pour que vous puissiez y déplacer les fichiers et dossiers constituant votre site. En fait, il vous donnera l accès à un dossier, vide au départ, dans lequel vous déposerez vos fichiers (avec une limitation de stockage). Dans les deux cas, ces dossiers s appelent les dossiers racines de votre site : un est local et l autre distant. Lorsque votre site est placé sur le serveur, vos pages Web ne pourrant accéder qu aux fichiers présents à la racine du site et à ses sous-dossiers. D. URL relative et absolue : On appelle URL (Uniform Resource Locator), le chemin permettant d accéder à un fichier : Sur un ordinateur Windows, un fichier est localisé par une adresse de la forme : C:\Program Files\EasyPHP1-8\www\dessin.png Voici un exemple de localisation d un fichier avec le système d exploitation Linux : /utilisateurs/home/eleve/publichtml/dessin.png Pour accéder à un fichier au travers d un navigateur, l adresse sera de la forme : http://www.monsite.fr/dossier/dessin.png KompoZer - page 11
Ces adresses s apellent des URL absolues car elles indiquent l adresse complète du fichier : Voici l exemple d une URL absolue d un serveur Web : http :// www.yahoo.com / france/actualite/aujourdhui.html }{{} } {{ } } {{ } Protocole Hôte + Nom de domaine Chemin d accès du fichier Une page Web est toujours transmise avec le protocole HTTP. Le nom de domaine et le nom d hôte indique le serveur à qui se connecter. Le chemin d accès indique le chemin à parcourir à partir de la racine du site pour accéder au fichier demandé (ici aujourdhui.html). Un problème se pose alors. Imaginons que notre page utilise une image. Il faudra indiquer la localisation de cette image ; hors localement, elle s écrira de la forme : C:\site\dessin.png alors que sur le serveur, elle serra de la forme : /utilisateur/georges/siteperso/dessin.png Qu inscrire alors pour que notre page Web puisse localiser cet image aussi bien en l ordinateur local que le serveur distant. On utilisera alors les URL relatives qui indique uniquement le chemin de déplacement du fichier.html jusqu au fichier cible (l image par exemple). La structure du site êtant la même localement sur le disque dur local que sur celui du serveur, les URL relatives seront donc équivalentes. Pour manipuler les URL relatives, nous avons besoin des deux symboles suivants : Le point. représente le dossier courant. Le double point.. représente le dossier parent du dossier courant (le dossier juste au dessus ). Voici un exemple d arborescence de fichiers : KompoZer - page 12
Voici l URL absolu de certains fichiers sur le serveur Web de yahoo.com : Le fichier Word discours.doc : http://www.yahoo.com/discours.doc La page HTML actualite.html : http://www.yahoo.com/france/actualite/actualit Le fichier PDF lundi.pdf : http://wwww.yahoo.com/archive/lundi.pdf Voici quelques exemples d URL relatives pour cette étude de cas. Pour définir une URL relative, il faut spécifier le fichier appelant et le fichier cible : l URL relative sera la description du chemin de l un vers l autre. De discours.doc vers actualite.html : Il faut descendre dans le dossier france puis de nouveau dans le dossier actualité../france/actualite/actualite.html de discours.doc vers actualite.html : Il faut remonter de deux dossiers pour obtenir le fichier Word :../../discours.doc De actualite.html relativement à lundi.pdf :../france/actualite/actualite.html La compréhension des URL absolues et relatives est essentielle dans la construction d un site Web, mais KompoZer va s occuper efficacement de cela pour nous. Généralement, les URL absolues ne seront utilisés que pour les fichiers ou les sites se trouvant à l extérieur du site en construction. V. Première approche des éléments HTML : A. Introduction : Une page Web est constituée d éléments HTML : ce sont eux qui donnent les informations de formatage au navigateur. Ils peuvent être composés : d une balise ouvrante et d une balise fermante tel que l élément p défini par la séquence <p>... </p> où les pointillés représentent le contenu de l élément. Le contenu d un élément HTML peut contenir du texte et ainsi que d autres éléments HTML. d une seule balise : tel que les éléments img et br ayant pour fonction respective d insérer une image et de créer un retour à la ligne (la balise <img> aura un attribut précisant la localisation de l image) Tout l affichage d une page Web est contenue dans l élément body. Même si cet élément est l un des éléments principaux d une page Web, on ne l invoquera que très KompoZer - page 13
rarement sauf pour définir une propriété globale sur l ensemble de la page : couleur par défaut du texte, couleur du fond de page... En plaçant le curseur à différents endroits d une page Web, on peut observer le niveau d imbrication des éléments HTML dans la barre d état. Voici queqlues exemples d affichages de la barre d état commentés : 1. 2. 1. Le curseur est placé actuellement dans un conteneur div placé directement dans l élément body. 2. Ici, le curseur est placé dans une cellule d un tableau ce qui explique la succession des imbrications : table défini un tableau. tbody tr td défini le corps du tableau. défini une ligne du tableau. défini une cellule de la ligne courante. En cliquant sur un des éléments de la barre d état, KompoZer va automatiquement sélectionner le contenu de cet élément. B. L onglet Balises HTML : Cet onglet en bas de la page de KompoZer met en evidence les balises HTML présentes dans votre page. On peut également y accéder via la commande : Affichage Balises HTML L exemple ci-dessous : montre la présence de deux éléments span. Mais seul le positionnement du curseur et la barre d état permet de comprendre l imbrication de ces deux éléments. Le codage de cet page est en fait : <body>aujourd hui, la <span>chaleur a <span>repris</span></span></body> Alors qu on aurait pû au premier regard penser que le codage s effectuait ainsi : <body>aujourd hui, la <span>chaleur a</span> <span>repris</span></body> Pour repérer facilement l imbrication des éléments HTML : En cliquant, dans la barre d état, sur la balise ouvrante correspondant à l élément, l ensemble de son contenu sera sélectionné. KompoZer - page 14
En cliquant sur la plupart des éléments (avec l affichage Balises HTML ) leur contenu sera automatiquement sélectionné. VI. Liste des éléments HTML : Ce paragraphe n introduira que les éléments HTML que vous rencontrerez couramment dans KompoZer : leurs fonctions et leurs utilisations. A. <body>... </body> : L élément body contient l ensemble des caractères et des éléments HTML qui compose l affichage d une page Web. Elle permet de définir les caractéristiques par défaut de la page tel que la couleur du texte ou la couleur du fond de la page. Ces réglages s effectuent sous KompoZer via la commande : Format Couleurs et fond de la page B. <span>... </span> : Cet élément est un conteneur en ligne : sa fonction est d inclure une petite partie de texte et ne contenant aucun saut de lignes. Le fait d être inclus dans un élément permettra au contenu d être manipulable comme un bloc par les feuilles de styles ou par le langage JavaScript. KompoZer crée un tel élément notamment lorsqu après avoir sélectionné une partie d un texte, on applique un changement de police de caractère, de style (gras, italique... ) ou de taille. Voici quelques astuces : Pour supprimer le formatage d une partie du texte, sélectionnez-la, puis avec un clic droit sur cette partie, le menu contextuel proposera la commande suivante : Format Supprimer tous les styles de texte Qui peut avoir pour incidence de supprimer l élément span qui définissait ces styles. Pour supprimer un élément span (ou en fait n importe quel élément HTML), mais non-nécessairement son contenu, effectuez un clic droit sur la balise représentant l élément considéré puis actionnez la menucheminsupprimer la balise. C. <div>... </div> : KompoZer - page 15
Cet balise apparaît, par exemple, lors de l ajout d un retrait ou du choix de l alignement d un paragraphe. Pour forcer l apparition de cet élément, on utilise la commande : Format Paragraphe Conteneur générique (div) Comme le nom de la commande l indique, l élément div est un conteneur : sa fonction est de contenir sans apporter aucun formatage ni modification à son contenu. Cet élément permettra une manipulation plus facile de son contenu : à l aide des feuilles des styles ou de Javascript. A la différence de l élément span, le conteneur div insère un saut de ligne et crée un paragraphe de la largeur de la page et s étalant sur plusieurs lignes. L élément div peut contenir des éléments span et div. L élément <span>... </span>, quant à lui, ne peut contenir de saut de ligne : ainsi il ne peut contenir d élément div. D. <a>... </a> : Nous arrivons à un élément très caractéristique des pages Web : les liens. L élément les définissant est a. A partir de maintenant, il est préférable de travailler dans un dossier dédié à la construction de votre site Web (qui représentera la racine du site) et dans ses sous-dossiers. Un lien est un emplacement actionnable par le client permettant la redirection du navigateur vers une autre page : il se présente sous la forme d un texte ou d une image. Les liens images seront présentés dans la section suivante mais utilisent toujours l élément <a>... </a>. Pour créer un lien texte, commencez à sélectionner la partie du texte le représentant. Puis, utilisez la commande : Insertion Lien Vous verrez alors apparaître la boîte à dialogue suivante : KompoZer - page 16
1. représente le texte sélectionné comme lien 2. On inscrira ici l adresse du fichier de destination : soit sous forme d une URL absolue si la direction est externe au site. soit sous forme d une URL relative lorsque la page cible est sur le site en construction. Dans ce dernier cas, le bouton en forme de dossier à droite de ce champ permet de sélectionner facilement le fichier et d y inscrire son URL relative. 3. cochez cette case si vous avez rentré en 2. une adresse mail. Le client, en cliquant sur le lien, ouvrira un nouveau mail à l aide du logiciel de messagerie installé sur l ordinateur client. 4. Cette option indique que l URL rentrée est relative. En pratique, lorsqu on utilisera le bouton du 2., KompoZer cochera automatiquement cette case pour nous. 5. par défaut, en cliquant sur un lien, la cible remplacera la page courante. On modifie ce comportement en cochant cette case et en choisissant la seconde option Dans une nouvelle fenêtre ; les autres options concernent les pages formées de cadre (type de construction actuellement désué). On peut partager la fenêtre d affichage du navigateur en plusieurs pages Web : chacune s appelant des cadres (frames en anglais). Cette technique, introduite dans la fin des années 90, permet de ne recharger une partie de la page, ainsi le logo du site, sa barre de navigation restent fixe et le chargement d une nouvelle page en est accéléré. Cette technique a été très décriée et à tendance actuellement à disparaître. On lui préférera une construction avec des conteneurs div positionnés à l aide des feuilles de styles. E. <img> : KompoZer - page 17
On insérera une image avec KompoZer dans la page courante à l aide de la commande : Insertion Image... La boîte à dialogue suivante s ouvrira : 1. Ce champ indiquera l URL de localisation de l image (absolue ou relative). Le bouton à droite du champ permet de sélectionner l image dans l arborescence du site (sur le disque dur local) et d y inscrire facilement l URL relative correspondante. 2. Comme pour les liens, cette option précise si l adresse de l image (son URL) est relative ou absolue. KompoZer insère autant qu il peut des adresses relatives. 3. La vignette est le petit bandeau jaune contenant un texte apparaîssant lorsque le curseur du client reste immobile sur l image : rentrez, si vous le souhaitez, un descriptif de l image. 4. Certains navigateurs, pour les mal-voyants notamment, affichent un texte à la place de l image : remplissez ici un court descriptif de l image. Nous venons de passer en revue l onglet Emplacement. Voici un descriptif rapide des autres onglets de cette boîte à dialogue : Dimensions : Vous pouvez modifier la taille de l image. Attention en augmentant la taille de l image à un effet de pixellisation ; de ne pas déformer l image en décochant l option Conserver les proportions. Apparence : cet onglet permet d affiner l affichage de l image en : Plaçant un espace horizontal (à droite et à gauche) autour de l image ainsi que vertical. Plaçant une bordure autour de l image pour l encadrer Rendant l image flottante : le texte viendra alors entourer l image. On peut découper une image en différentes parties cliquables : ce sont les Image Map. KompoZer permet uniquement de supprimer une telle infor- KompoZer - page 18
mation dans le cas d une importation de pages Webs. Les Images Maps ne seront pas développées ici. Lien : cette partie s apparente à celle rencontrée pour les liens (reportez vous au paragraphe précédent). Une image numérisée de points de couleurs, appelés les pixels ; la dimension d une image est le nombre de ces points, horizontalement (par ligne) et verticalement (par colonne), constituant l image. La taille de l image, elle, dépendra de la résolution avec laquelle, on affiche ou on imprime l image : le DPI (en anglais dot per inch) est l unité pour mesurer cette résolution ; il correspond au nombre de pixel placé sur une ligne horizontale d un pouce. On peut dire que la résolution est le concentration de pixel pour une unité de longueur. F. Les tableaux : La construction des tableaux sera développée dans un prochain paragraphe, seul les éléments principaux associés à un tableau sont présentés ici : table : définit la zone de déclaration d un tableau tr td : définit une ligne du tableau. : définit une cellule du tableau. G. Les formulaires : De même, les formulaires seront étudiés plus loin. Seul les différents élément HTML d un formulaire seront présentés ici. Ces commandes seront accessibles via le chemin : Insertion Formulaire Une fois que le formulaire a été rempli, il faut l envoyer au serveur pour le traitement des données : cet action se nomme la soumission du formulaire au serveur. form : cet élément définit un formulaire. L esemble du formulaire doit être contenu dans l élément form, définit par les deux balises <form>... </form>. L élément input définit par l unique balise <input> permet de définir plusieurs types de champ d un formulaire (bouton, champs de texte, case à cocher,... ) à l aide de l attribut type qu on insère dans la balise <input> (on n étudiera pas les attributs dans cette formation). Voici les différentes valeurs que peut prendre cet attribut <input> : cette balise définit la plupart des champs d un formulaire. Un attribut KompoZer - page 19
HTML (non étudié ici) lui permet de prendre plusieurs aspects : type=text : définit un champ texte. type=password : définit également un champ texte mais lorsque le client tape un texte, les caractères sont remplacés par des ronds noirs. Mais attention, l envoi de ce champ lors de la soumission du formulaire ne sera pas codé et pourra donc être lû par des espions. type=file : ce champ de texte doit contenir l adresse d un fichier situé sur le disque dur. Ce fichier sera envoyé au serveur lors de la soumission du formulaire. Un bouton à droite du champ de texte permet au client de parcourir son disque dur à la recherche du fichier à inclure lors de la soumission du formulaire. type=hidden : Ce contrôle permet de définir une variable non-visible dans le formulaire et que le client ne pourra pas modifier. Ce type de contrôle est utilisé pour le traitement d un formulaire via un langage de script tel que JavaScript ou PHP. type=checkbox: ce contrôle est représenté par une case à cocher validant une option. type=radio : ce bouton fonctionne en groupe : vous ne pourrez valider qu une seule option pour un certain groupe de ces boutons. type=button : un bouton sera affiché mais son exécution n entraînera pas l envoi du formulaire. Il est utilisé notamment pour lancer l exécution d un script Javascript. type=image : introduit une image dans le formulaire ; le formulaire sera soumis lorsque le client cliquera sur cette image. Toutes ces options sont accessibles via la commande : Insertion Formulaire Champ de formulaire textarea : définit un champ texte sur plusieurs lignes que le client remplira. Cet élément défini par les balises <textarea>... </textarea> est accessible par : Insertion Formulaire Zone de texte select : cet élément défini par les balises <select>... </select>, permet de définir un menu déroulant à l aide de la commande : Insertion Formulaire Liste de sélection... legend permet d englober des champs du formulaire dans un cadre qui aura pour titre le contenu de l élément fieldset. KompoZer - page 20
isindex offre un champ texte précédé d un texte permettant la recherche d un mot dans un fichier. Cette balise est devenue obsolète et tent à disparaître. VII. Positionnement des éléments HTML : A. Introduction : Normalement, un élément HTML est positionné dans le flux courant du texte : cela signifie que les éléments (caractères, images... ) sont envoyés les uns à la suite des autres et forment ainsi des lignes ; la composition de chacune des lignes changeant suivant la taille de la fenêtre du client. Avec les feuilles de styles, de nombreux effets de formatage ont amélioré l apparence des pages internet et ce comportement naturel des navigateurs peut être contourné ; il est désormais possible à l aide des feuilles de styles CSS de placer un (ou des) éléments précisemment sur une page Web et d en définir par avance la taille. Ainsi, on peut sortir les élément du flux normal d insertion des éléments dans l affichage du navigateur. Voici quelques unes des indications proposées par KompoZer pour contrôler le positionnement des éléments dans une page et leurs dimensions. B. Le positionnement et les dimensions : Voici la procédure pour positionner un élément dans la page : Après avoir sélectionné un élément à l aide de la barre d état ( 4. comme ici l élément div ), cliquer sur le bouton 1., l élément va se décrocher et apparaître dans un rectangle. KompoZer - page 21
Les points cardinaux 8. du rectangle permettent de redimensionner l élément. Ses dimensions peuvent être observées en 6.. Le point d ancrage 7. permet de déplacer l élément dans la page. Ce déplacement se mesure à partir du point supérieur gauche de la page. On observera l espace 5. créé pour le déplacement de l élément. On dira alors que l élément est en positionnement absolu car sa position ne dépendra plus de son placement lors de sa reception par le navigateur. Pour faire revenir l élément sélectionné dans le flux normal de la page, il suffit d appuyer sur le bouton 1.. Il est toujours préférable lorsqu on souhaite utiliser un élément en positionnement absolue d utiliser l élément div et que celui-ci soit placé directement dans l élément div. Pour ce faire : sélectionner l élément body à l aide de la barre d état. en utilisant les flèches directionnelles de votre clavier, placez-vous à la fin de votre document à l aide de la flèche directionnelle droite de votre clavier (ceci aura pour effet de déselectionner le texte). Utiliser la commande Format Paragraphe Contenu générique pour insérer un conteneur, rentrez-y un peu de texte puis placez-le en positionnement absolue. KompoZer gère actuellement mal le positionnement absolue des images, il est préférable d enregistrer votre travail avant toute utilisation et manipulation d images. C. La superposition : Lors de la présence de plusieurs éléments en positionnement absolu, ceux-ci peuvent se superposer. Ceci est visible lorsque les deux éléments possèdent un fond nontransparent (il suffit définir une couleur de fond à chaque élément). KompoZer - page 22
Pour faire passer un élément au dessus d un autre, on utilisera conjointement les deux boutons signalés en 2.. VIII. Les tableaux : Le menu Tableau est dédié à la gestion des tableaux. A. Création : La boîte à dialogue de création des tableaux est accessible à l aide des deux commandes suivantes : Insertion Tableau... Tableau Insérer Tableau... Voici la boîte à dialogue proposée et la description de ses différents onglets : 1. 2. 3. L onglet 1. permet la création rapide d un tableau mais peu d option sont présentes pour affiner la présentation d un tableau. L onglet 2. permet de spécifier le nombre de lignes, de colonnes composant le tableau. On peut fixer la largeur totale du tableau (exprimée en pixel ou en pourcentage relativement à la largeur totale du tableau). Dans l onglet 3., les différents paramètres suivants sont proposés : L alignement horizontal ou vertical par défaut des cellules peut être spécifié. La valeur non spécifié laissera l alignement non défini par l attribut HTML : les paramètres par défaut du navigateur ou la valeur des propriétés de styles seront utilisée. Lorsque le contenu de la cellule excède la largeur de la cellule, faut-il aug- KompoZer - page 23
menter la largeur de la cellule (donc celle du tableau) ou effectuer un retour à la ligne (augmenter la hauteur du tableau). On peut contrôler également, sur l ensemble du tableau, l espacement entre les cellules (marge externe). Et également la marge interne de toutes les celulles. Pour comprendre les deux dernières propriétés, il faut comprendre la manière de concevoir un tableau en HTML : le tableau et chacune de ses cellules ont leur propre bordure deux cellules adjacentes ont leurs bordures distinctes Ainsi la marge externe est l espace inséré entre deux bordures et la marge internet est l espace insérée entre la bordure d une cellule et son contenu. B. Modification du tableau : les autres commandes présentent dans les sous-menu suivant se passent de commentaire : Tableau Insérer Tableau Sélectionner Tableau Supprimer Plusieurs cellules peuvent être fusionner en une seule cellule à l aide de la commande : Tableau Fusionner avec la cellule suivante Pour annuler la fusion de cellules, il faut selectionner la cellule fusionnée et utilisée la commande : Tableau Scinder la cellule La couleur de fond d un tableau ou d une celulle est déclarée ou modifiée à l aide de la commande : Tableau Couleur de fond de tableau ou de cellule... La boîte à dialogue classique vous permet de sélectionner la couleur. Remarquez l option se rajoutant : permettant de modifier la couleur de fond du tableau lui-même ou de la cellule courante (ou des cellules sélectionnées). Après création d un tableau, vous pouvez toujours modifier les caractéristiques du tableau en ouvrant la boîte à dialogue : Tableau Propriétés du tableau... KompoZer - page 24
A. Introduction : IX. Les formulaires : Nous ne developperons pas trop, ici, l usage des formulaires, car il faut mettre en place le système qui recevra et traitera les données du formulaire. La solution la plus simple (pas tant que ça) est d envoyer les informations vers une page PHP ou ASP, langage de programmation qui ne sera pas développé ici, afin que ceci traite et sauvegarde les données du formulaire. Les éléments HTML relatifs aux formulaires ont été présentés dans le paragraphe Liste des éléments HTML. Voici présenté la mise en place et le fonctionnement d un formulaire dans une page Web. B. Principe de base : Le client rempli des champs de texte, coche des cases ou effectue une sélection dans un menu déroulant. Puis, il soumet ce formulaire en cliquant sur un bouton : les informations sont alors envoyés vers une page d action recevant, traitant les données puis renvoyant une autre page Web au client. Chaque contrôle du formulaire possède un nom et une valeur : celle par défaut ou celle modifiée par le client. Lors de la soumission du formulaire, les couples nom/valeur des différents contrôles seront envoyés à la page d action (celle recevant les informations du formulaires). Voici les deux façons dont ces informations seront soumises au serveur : La méthode GET transmet les informations du formulaire en l incluant dans l URL de la page d action. Voici un exemple d URL transmettant les couples de données au serveur : http://yahoo.com/news?fr=fp-tab-news-t & ei=iso-8859-1 & p=france Dans l exemple ci-dessus, on transmet les trois variables fr, ei et p sont transmises à la page d action news. La méthode POST, la transmittion des données du formulaire sera transmis dans le corps de la requête HTTP. Le fond technique de cette requête ne sera pas développé ici. Mais les couples nom/valeur de l ensemble des contrôles seront également transmits à la page d action directement dans l appel d une nouvelle page (la page d action) enclenchée par la soumission du formulaire. La méthode POST est souvent la plus appréciée pour les deux raisons suivante : Elle n impose pas de limite quand à la taille des informations transmises, alors que la méthode GET pose des limitatiions quant à la taille acceptée des URL. Les données étant envoyées dans le corps de la requête ne seront pas visible KompoZer - page 25
directement par l utilisateur ; mais attention un utilisateur expérimenté peut récupérer ces informations. C. L élément <form>... </form> : L élément form déclare le début et la fin d un formulaire. Seul les champs contenus dans cet élément seront pris en compte au moment de la soumission du formulaire. On insérera un tel élément en utilisant l action : Insertion Formulaire Définir un formulaire... Voici la boîte à dialogue proposée : 1. Le nom du formulaire est un identifiant donné au formulaire afin, notamment, de le désigner au travers d un langage de programmation tel que Javascript. 2. L URL d action est l URL désignant la page recevant les données lors de la soumission du formulaire. 3. Le choix vous est proposée entre les deux méthodes d envoi de données POST et GET. A. Introduction : X. Les feuilles de styles : Les feuilles de styles en cascades (CSS) est le langage de description permettant d obtenir des améliorations de formatage de nos pages Web. Bien que facile d apprentissage, KompoZer va une nouvelle fois nous faciliter l utilisation des feuilles de styles au travers de certaines commandes et des boîtes de dialogues associées. Pour utiliser les feuilles de styles, il est préférable d introduire le contenu sur lequel s appliquera les styles dans un des conteneurs span et ou div (de sorte à n apporter aucun formatage) et ensuite d effectuer les modifications de styles. KompoZer - page 26
et l action de la commande Styles internes fera apparaître la boîte à dialogue gérant les feuilles de styles. B. Général : 1. Vous trouverez dans cette partie de la fenêtre le code en langage CSS de tous les styles apportés sur l élément sélectionné par les autres onglets de la boîte à dialogue. 2. Ce bouton permet d extraire le style courante afin de l utiliser sur plusieurs autres éléments ou de l inscrire dans une feuille de style externe (ceci sera développé plus tard). Après confirmation, par appui du bouton OK, le style sera inclus directement dans la balise ouvrante de l élément via l attribut style. Par utilisation du bouton Extraire et créer un style générique les définitions de style apportées pourront être inscrite dans l entête de la page Web ou dans un fichier externe. C. Texte : KompoZer - page 27
Rien de particulier à dire ces options de formatage sont présentes dans tous les logiciels de bureautique. Un cadre offrant un aperçu vous facilitera le choix des styles. Si aucune police n est spécifiée, le navigateur utilisera par défaut la police utilisée dans ses paramètres. En spécifiant une police, il est possible que celle-ci n existe pas dans l ordinateur du client (ce fût fréquemment le cas et ça le sera si la police utilisée n est pas fréquente) ; ainsi, dans le cas d utilisation d une police particulière, il est préférable de spécifier plusieurs noms séparés par des virgules. Le navigateur du client utilisera la première des polices spécifiées qu il reconnaît. 1. KompoZer propose quelques choix prédéfinis de listes de polices. Sinon, rentrer par vous-même la liste des polices à utiliser. 2. L option casse du texte permet de passer l ensemble des caractères de l élément en majuscules, minuscules ou de conserver la casse initiale. D. Fond : KompoZer - page 28
Cet onglet permet d insérerune couleur ou une image de fond à l élément courant. Dans le cas de l insertion d une image en fond, voici les options accessibles : Dans le cas d une image : L image de fond peut-être insérée une seule fois ou répétée plusieurs fois permettant le remplissage complet de l affichage du client. Lors d une page trop grande, apparaîssent les barres de défilement : lors de l utilisation de celles-ci par le client, l image peut soit rester fixe, soit défiler. E. Bordures : Pas grande chose à dire, cet onglet permet de munir l élément considéré d une bordure. Par défaut, les quatres côtés de la bordure auront un style identique, si vous souhaitez paramatrer différemment chaque côté de la bordure, décochez l option Utiliser le même style pour rous Si a bordure trop rapprochée de votre élément, il faut rajouter de l espacement interne à l élément (padding en anglais) à votre élément : voir marge et espacement de l onglet suivant. F. Boîte : KompoZer - page 29
Cet onglet propose la définition de style les plus compliquées, seul sont présentées celles présentant un intérêt pour cette formation, les autres sont généralement utilisées conjointement avec JavaScript. 1. Flottante : cette option permet, utilisé par exemple pour une image, de placer l élément sur le bord droit ou gauche de la page ; le texte viendra se placer à côté de l image. 2. Position : seul deux options nous intéressent ici : statique : l élément est placé dans le flux normal du texte. absolue : l élément est sortie du flux normal et le créateur de la page Internet peut déplacer l élément à sa guise dans la page. Cette valeur est équivalent à l utilisation du bouton : 3. Index-z : deux éléments en positionnement absolue peuvent se superposer. Celui qui possède le Z-index le plus élevé se placera au dessus de l autre. 4. Dégagement : cette option marche conjointement avec les éléments flottant. Elle permet de faire passer l élément ayant cette propriété définie à la suite d un élément flottant. Elle est généralement utilisé sur l élément <br>. 5. débordement : lorsque l élément sélectionné a une dimension imposée (notamment en positionnement absolu), son contenu peut dépasser les dimension de celui-ci. Voila comment sera géré le surplus du contenu : visible : le contenu débordant de l élément est quand même affiché. masquer : le contenu débordant est caché. KompoZer - page 30
défiler : l élément se verra doter de barres de défilement afin que le client puisse visionner l ensemble du contenu. Un élément est constitué d une bordure (même si elle est par défaut invisble) et d un contenu : La marge 6. est l espace inséré entre la bordure de l éément et l extérieur afin de séparer celui-ci des autres éléments de la page (marge extérieure) L espacement 8. est l espace séparant la bordure d un élément de son contenu (marge interne) Lorsque l élément est en positionnement absolu, son emplacement est défini à l aide des options Décalages 7.. G. Listes : Le style des listes est agrémenter de quelques types supplémentaires de puces. Une image peut être également utilisée comme nouvelle puce. La place de la puce dans un élément de la liste peut être précisée. H. Audio : KompoZer - page 31
Pour les personnes mal-voyantes, le texte inscrit dans un élément peut être lû par le navigateur. A ma connaissance, seul Opera prend en compte des fonctionnalités pour l instant. I. ID et classe : Jusqu à maintenant nous avons vu comment affecter des définitions de styles à un élément : ces définitions ont alors été inscrites à l intérieur de la balise ouvrante. On peut extraire ces définitions de styles pour les inscrires dans l entête du document ou dans une feuille de style externe. Ainsi : Plusieurs éléments HTML d une page recevront facilement le même formatage (facilitant ainsi la lecture d une page) En inscrivant ces définitions dans une feuille externe, elles pourront être utilisées coinjointement par plusieurs pages (facilitant la lecture d un site entier) On utilisera le bouton Extraire et créer un style générique se trouvant dans l onglet Général. Mais avant de préciser l utilisation de ce bouton, il est préférable d expliquer les quatres manières dont un élément peut recevoir une définition de style CSS : Soit on inscrit directement les définitions de styles dans la balise ouvrante de l élément, c est ce qui a été jusqu ici par l utilisation des différents onglets puis en validant sur le bouton Ok de la fenêtre. Soit on crée une règle contenant toutes les définitions de styles et celle-ci pourra être utilisée : Pour tous les éléments d un même type (tous les éléments div ou tous les éléments élementp... ) Pour tous les éléments appartenant à une même classe : c est à dire tous les éléments ayant la même valeur pour l attribut class. KompoZer - page 32
Pour l unique élément de la page possédant l attribut id spécifié. Les deux derniers possibilités font intervenir les attributs class et id. Les attributs HTML sont des propriétés d un élément qu on spécifie dans sa balise ouvrante. Le même attribut class peut être partagé par plusieurs éléments pour signifier leur appartenance à un groupe commun ; l attribut id doit être unique dans une même page. Dans KompoZer, on commence par définir une règle pour un id ou une class, puis on affecte les éléments de cet attribut au travers du menu contextuel accessible via la barre d état. Voici la boîte à dialogue ouverte par l action du bouton Extraire et créer un style générique A ce moment toutes les définitions de styles définies dans la boîte à dialogue précédente sont édictés dans une règle. Voici la manière dont un élément peut faire appel à cette règle : 1. L élément est affublé de l attribut id avec la valeur saisie, et la règle est associée uniquement à l élément possédant cette valeur de l attribut id. Seul cet élément bénéficiera de cette règle. 2. L élément est affublé de l attribut class avec la valeur saisie dans le champ texte. La règle est associée à tous les éléments possédant cette valeur pour l attribut class : donc notamment l élément courant. 3. La règle est effective pour tous les élḿents de même type que l élément courant. 4. Ce choix (plutôt marginal) indiquera que la règle de style ne sera appliqué en plus que lorsque la souris passera au dessus des éléments recevant ce style. KompoZer - page 33
Après avoir défini des règles pour des id et des class, il est possible de choisir les éléments qui recevront ces règles en leur affectant l attribut id ou class correspondant à la règle choisie. Pour cela, après avoir placé son curseur dans l élément choisi, effectuez un clic-droit sur sa représentation dans la barre d état ; dans le menu contextuel utilisé la commande ID... ou class... correspondant à votre choix. J. Gestion des feuilles de styles : Nous allons voir dans ce paragraphe comment gérer, modifier, effacer les styles déjà présent dans une page Web ; et comment les exporter dans une feuille de style externe. Pour cela, en actionnant la commande : Outils Editeur CSS La boîte à dialogue suivante s ouvrira : On remarque dans le cas présenté ci-dessus que la page Web courante possède : Une feuille de style interne 2. : ce sont les règles de styles qui sont définies dans l entête de la page courante. Une feuille de style externe 3. nommée messtyles.css. On remarque que les noms de règles sont précédés : par un point : la règle est alors affectée à tous les éléments ayant pour valeur de l attribut class le nom de cette règle. par un diès : la règle est alors affecté à l unique élément de la page ayant la valeur de l attribut id le nom de cette règle. En sélectionnant la feuille de style interne, on voit apparaître dans le panneau de droite le bouton Exporter la feuille de style et utiliser la version exportée. Ce KompoZer - page 34
bouton permet d exporter toutes les règles présentes dans le feuille interne de style vers une feuille externe et de l utiliser. Pour cela : Cliquez sur le bouton ; Dans la boîte à dialogue, dirigez-vous vers l endroit où sera enregistré ce fichier ; Rentrez-le nom choisi pour ce fichier (préféré l extension.html ) et enregistrez. Les boutons présents en 1. permettent de gérer les feuilles de styles présentes (remarquer le bouton de droite en forme de croix permettant de supprimer l utilisation d une feuille de style dans la page courante). Nous allons nous intéresser plus précisemment au premier bouton : Voici les différentes options proposées par ce bouton : la règle @import permet d inclure l importation d une feuille de style externe directement dans une déclaration de règles (elle-même externe ou interne) : en pratique cette option n est pas utilisée. feuille liée : cette option permet de lier la page courante avec une feuille de style externe : ou celle-ci existe déjà ou elle sera créée. il faudra indiquer l URL de localisation de cette feuille (penser à utiliser les URL relatives). feuille incorporée : cet option permet de créer une nouvelle feuilles de styles interne à votre document. Pour un bon codage, il est préférable de n en utiliser qu une seule. A utiliser si celle présente par défaut dans une page de KompoZer a été effacée. règle est l action par défaut de ce bouton : dans le panneau droite, vous verrez apparaître l intitulé Nouvelle règle de style. Voici les quatres propositions pour la création d une nouvelle règle de style dans la feuille courante (interne ou externe): toutes les balises d un même type tous les éléments ayant le même nom de classe (remarquer le point précédant le nom de la classe). l élément, si y en a un, portant cet ID (remarquer le dièse séparant le nom de l ID). ou manuellement pour l utilisateur expérimenté. KompoZer - page 35