V iatique
pour la création de site
avec Kompozer
à l’usage des débutants
Avant de commencer 3
Création d’une page simple 3
Informations sur la page 3
Apparence 3
Sauvegarde 3
Saisie du contenu 4
Affichage 5
De la page 5
Des balises HTML 5
Un peu de mise en forme 5
Images 6
Création page et sauvegarde 6
Image en fond 6
Et du texte 6
Image ordinaire 7
Transparence 9
Image avec lien 9
Les liens 10
Création des liens 10
Lien vers une page du site 10
Lien vers un site internet 10
Lien vers une Boite à lettre 12
Résultat 12
Titre sous le curseur 12
Les tableaux 13
Création d’un tableau 13
Les Formulaires 15
Créer le formulaire 15
Créer les intitulés 16
Insérer les zones de saisie 16
Saisie de texte simple 16
Saisie de Bouton radio 16
Saisie de Case à cocher 17
Validation 17
Résultat 18
Autres zones 18
Liste de Sélection 18
Zone de texte 18
Les Styles 19
Quelques balises 19
Création de styles 20
Feuille de style 23
Récupération des styles 24
Insertion d’une nouvelle règle dans la feuille 24
Les classes 26
Création des classes 26
Utiliser les classes 27
Les Identifiants 28
Possibilités 28
Dans la page 28
Objet flottant 29
Conteneur générique 30
Langage Javascript 31
Affichage d’un message 31
Création de la fonction 31
Utilisation 31
Résultat 31
Remplacement d’une image par une autre 31
Création de la fonction 31
Utilisation 32
A vant de commencer
Il faut organiser la structure de votre site : un dossier pour les pages html et css, un sous-dossier pour les documents à télécharger, un sous-dossier pour les images, un sous-dossier pour les photos... avec des sous-sous-dossiers par année, si besoin.
Création d’une page simple I nformations sur la page
Ouvrir Kompozer
Format – Titre et propriétés de la page
Le titre apparait, dans le navigateur, sur la barre de titre ou sur l’onglet.
Apparence
Format – Couleurs et fond de page
Vous pouvez choisir un fond de page uni (Fond) ou un fond représentant une image ou une texture.
Sauvegarde
Enregistrer immédiatement la page afin que Kompozer puisse gérer les liens vers les images de façon simple.
 
Saisie du contenu
Comme avec un Traitement de texte : vous tapez le texte au kilomètre sans vous préoccupez de la structure.
Ensuite, vous définissez quels sont les gros titres, les moyens titres, les paragraphes :
Sélectionner la zone à définir ( ou, dans ce cas, il suffit d’être à l’intérieur)
Format – Paragraphe – choix ( Titre1, Titre2, Paragraphe…)
Affichage De la page
Sauvegardez et regardez avec le navigateur ce que cela donne.
Des balises HTML
Il peut être intéressant d’afficher les balises si vous voulez progresser dans la connaissance du HTML ce qui vous sera indispensable si vous souhaitez continuer et réaliser des pages de plus en plus complexes.
Vous devinez alors que la page est gérée par BODY, paragraphe par P et un gros titre par H1 (Header 1).
Un peu de mise en forme
On peu améliorer la présentation en mettant le texte important en gras, en utilisant des liste à puces, en insérant des lignes horizontales … La façon de procéder est la même qu’avec un Traitement de texte.
Gras = B --- Italique = I --- Ligne horizontale = HR --- Liste à puce = UL et LI
Images
On va créer une nouvelle page avec une image de fond, une image centrée en haut et en bas, un texte au centre.
Création page et sauvegarde
Créer une nouvelle page : Fichier – Nouveau – Document vide
Il faut aussitôt enregistrer cette page qui servira de page d’accueil donc : index.htm ou index.html afin d’aider Kompozer dans l’affichage du chemin vers les images.
Image en fond
Créer une image de fond : Format – Couleurs et fond de page – Image de fond
Et du texte
Au centre (Format – Aligner), en bleu (Format – Couleur du texte), en grand (Format – Taille – extra large), Arial (Format – Police)
Image ordinaire
M enu : Insertion – Image
Adresse de l’image : accès au fichier qui contient l’image
Texte alternatif : texte qui apparait à la place de l’image si celle-ci ne peut pas être chargée (image absente ou déplacée) et qui apparait sous le curseur quand celui-ci est sur l’image.
 
À noter qu’il est possible de demander au navigateur de réduire la taille de l’image lors de l’affichage ; pourquoi ne pas le faire vous ? Vous ne le ferez qu’une fois alors que lui devra le faire à chaque fois donc du temps et de la puissance perdus.
Il est possible de définir un Espacement autour de l’image plus une Bordure et la façon dont du texte situé sur la même ligne sera placé par rapport à l’image (en vertical)
Pixel = 1 point sur l’écran
Transparence
Le fond blanc sale n’est pas du meilleur effet mais c’est une image gif, donc on peut demander au navigateur de supprimer l’affichage de cette couleur de fond. Cela se fait très facilement grâce à des logiciels de traitement d’image (Photofiltre – gratuit).
Image avec lien
On va insérer une image qui, lorsqu’on cliquera dessus, affichera notre 1ère page !
Menu : Insertion – Image
 
Les liens
N ous allons créer une page de menu avec des liens vers une page du site, vers un site internet et vers une boite à lettre.
Dans tous les cas, il faut sélectionner le texte qui servira de support au lien (sur le quel il faudra cliquer) et
Menu : Insertion - Lien
Création des liens Lien vers une page du site
Pour insérer un lien vers une page, il suffit de cliquer sur l’icône de dossier à droite de la zone de saisie et de choisir la page.
L ien vers un site internet
Il faut saisir l’adresse du site (ou la copier) et choisir si le site doit s’afficher dans la même instance du navigateur (même fenêtre) ou dans une autre (Cible).
Pour une page du site, même fenêtre, pour un site extérieur, nouvelle fenêtre.
Remarque
Vous pouvez voir dans le chemin du lien une différence importante : quand le fichier est local (page du site), on ne met pas http:// (chemin relatif) mais quand il est extérieur, il faut le mettre (chemin absolu) ! Rassurez vous, Kompozer se débrouille… mais surveillez quand même. Le chemin apparait sur la ligne d’état (en bas du navigateur) quand vous êtes sur le lien et dans Kompozer quand vous êtes sur le lien .
Lien vers une Boite à lettre
E ntrez l’adresse électronique ; en général, c’est la votre car cela permet aux visiteurs du site de vous écrire.
Cochez la première case à chocher : la valeur est une adresse électronique
Résultat
 
Vous pouvez voir que les liens se traduisent par la balise A (Anchor).
Titre sous le curseur
Dans le navigateur, si vous mettez le curseur sur le lien, rien de s’affiche. Il peut être utile de porposer au visiteur un commentaire concernant ce lien.
Donc placez vous sur le texte du lien, Insertion – lien et Edition avancée
Dans Attribut, choisissez Title et dans Valeur, saisissez le texte souhaité.
Pour la mise en forme, voir les styles…
(signet : style_balise_a)
Les tableaux
Les tableaux sont très faciles à gérer avec Kompozer (ou autre) mais une galère en HTML.
Ils sont nécessaires pour représenter des données en tableau (données tabulaires) mais servent souvent à faire de la mise en forme, ce qui fait hurler les puristes car alors on mélange le contenu et la mise en forme. Mais pour les remplacer, il existe peu de possibilités pas toujours simples, réservées donc à des aficionados du HTML.
C réation d’un tableau
Il faut déterminer le nombre de lignes et de colonnes et la largeur d’affichage soit fixe (en pixels), soit variable (%).
Il n’est pas terrible, alors il faut l’améliorer !
Mettre une ligne d’entête, une couleur de fond, des alignements… Il suffit de faire clic droit et de choisir l’action à effectuer.
La ligne créée sera une ligne d’entête donc une ligne de Titre donc du texte centré et en gras.
Il y a 3 membres donc dans la colonne de gauche, l’intitulé doit concerner ces 3 personnes ; il faut fusionner les 3 cellules.
 
Il faut ensuite écarter le texte du bord : sélectionner le tableau et icône Tableau.
Balises du tableau : tableau = TABLE, ligne = TR, cellule = TD, cellule d’entête = TH
Les Formulaires
U n formulaire rassemble des zones de saisie d’informations et grâce à un bouton de validation (submit) d’effectuer sur celles-ci qui aura été préalablement définie.
Créer le formulaire
Menu : Insertion – Formulaire – Définir le formulaire
L’action se résume pour les débutants à l’envoi dans une boite à lettre (mailto:). Par la suite, avec l’apprentissage d’un langage de programmation, il sera possible de récupérer ces informations et les traitées.
La Méthode définit la façon dont les informations sont passées et l’Encodage, la façon dont elles seront affichées.
Créer les intitulés
 
Insérer les zones de saisie Saisie de texte simple
Menu : Insertion – Formulaire – Champ de formulaire
D ’abord pour le nom et le prénom, on va insérer un champ de formulaire de type texte de taille 20 caractères à l’affichage.
La valeur initiale est utile pour tester le formulaire et devra ensuite être supprimée (sauf cas rares).
Saisie de Bouton radio
Les cases à cocher sont utilisées pour choisir une valeur parmi plusieurs.
M enu : Insertion – Formulaire – Champ de formulaire – Bouton radio
Attention : toutes les cases formant le choix doivent avoir le même nom de champ !
Saisie de Case à cocher
Les cases à cocher sont utilisées pour valider des options ou pas.
Menu : Insertion – Formulaire – Champ de formulaire – Case à cocher
A ttention : toutes les cases formant le choix doivent avoir le même nom de champ !
V ous pouvez remarquer que les cases à cocher sont carrées alors que les boutons radio sont ronds !
Validation
Il faut ajouter un bouton pour valider les informations saisies et lancer l’action.
Menu : Insertion – Formulaire – Champ de formulaire – Bouton de validation
Valeur du champ : texte affiché dans le bouton.
Résultat
 
A utres zones Liste de Sélection
Menu : Insertion – Formulaire – Liste de sélection
Texte : le texte qui apparait
Valeur : la valeur renvoyée
Sélectionné : facultatif ; valeur sélectionnée par défaut
Zone de texte
P ermet de donner au visiteur la possibilité de s’exprimer via du texte libre.
Les Styles
Comme dans les traitements de texte, il est possible de définir un ensemble de caractéristiques pour un élément, ensemble qu’on désignera comme le style de cet élément ; par exemple, si un paragraphe a comme caractéristiques d’avoir un alignement justifié avec un retrait gauche égal à 10% de la feuille, des caractères en Arial 12pt, de couleur noir, une bordure à gauche – tout cela pourra être défini dans un style.
Avantage : si un autre paragraphe doit avoir les mêmes caractéristiques, il suffira de lui appliquer le style ; fini les disparités entre deux paragraphes semblables au long des pages.
Avantage en HTML : les styles peuvent être rangés dans une feuille de style et donc on peut séparer le contenu informatif de sa mise en forme.
Quelques balises
Reprenons la 1ère page débarrassée de ses mises en forme :
Et regardons les balises
On veut un fond de page (BODY) beige, un gros titre (H1) en Arial bleu 24 pt centré, un moyen titre (H2) en Times rouge 14pt italic souligné en bas, les paragraphes (P) justifiés avec une marge à gauche de 15 pixels et à droite de 10%.
Création de styles
Menu : Outils – Editeur CSS
O n va créer une règle de style mais avant il faut choisir à quelle balise on va l’appliquer.
Modification de la couleur de fond de page : BODY
Général : récapitule les règles
Texte : gestion des caractères
Fond : gestion du fond de page, de paragraphe, de zone…
Bordures : gestion de bordures
Listes : gestion des listes à puces ou numérotées
M aintenant le tour du gros titre : H1
Cliquer sur l’icône qui représente une palette de couleur pour définir une autre règle.
Au tour du 2ème titre : H2
Au tour des paragraphes : P
Et les puces pour finir : LI
Résultat
Si vous avez la curiosité d’aller dans le code Source, vous verrez que dans la partie contenu (commence à , il n’y a aucun attribut de mise en forme ! Tout est séparé du contenu et mis dans la partie entête ().
Feuille de style
Le fin du fin est de ranger cette mise en forme dans un fichier (Feuille de style) afin de pouvoir la réutiliser pour une autre page du site.
Il suffit d’exporter les styles dans un fichier styles.css par exemple, l’extension étant en général : .CSS
Dans la page HTML, il ne reste plus aucun style, juste un lien vers la feuille de style : styles.css
Récupération des styles
Quand vous allez créer une nouvelle page, vous allez évidemment avoir envie de récupérer ces styles
 et on a tout récupérer !
Maintenant dans la nouvelle page, le fond est beige, vous taper du texte et vous lui donner l’identité Titre1, il passe automatiquement en bleu arial 24pt…
Insertion d’une nouvelle règle dans la feuille
Récupérons la page sur les liens et appliquons lui la feuille de styles.
Il faut créer un style pour les liens ( balise A) Entrez A et Créer la règle
T exte non souligné
Décoration normale
Couleur de fond grise
Bordure autour du texte
Un espacement entre la bordure et le texte
Et le résultat
 
Les classes
Dans une page, il peut y avoir plusieurs paragraphes ayant des mises en formes différentes. Or il n’y a qu’une balise paragraphe ; il faut donc ranger les paragraphes dans des classes différentes.
Ex : classe para_normal : justifié, marge gauche = 5%, marge droite = 10px
classe extrait_livre : italique times justifié rouge, marge gauche = 15%, marge droite = 15%
Création des classes
Le nom du style (de la classe) est précédé du symbole point ( . ).
Utiliser les classes
Il suffit d’être dans le bon paragraphe et de sélectionner la classe désirée.
Les Identifiants
Les classes peuvent être utilisées pour plusieurs paragraphes.
Un style, relié à un identifiant, ne doit être attribué qu’une fois à l’objet ayant cet identifiant qui, théoriquement, est unique.
Possibilités D ans la page
Couleur de fond + image de décoration
Problème : l’image est dupliquée partout !
Grâce aux styles, l’image peut être répétée verticalement, horizontalement ou pas du tout.
O bjet flottant
L’apparence de l’ensemble serait plus agréable si l’image était fondue dans le paragraphe, le texte entourant les bords de l’image.
Il suffit de la rendre flottante à droite par exemple :
Avec en supplément, une lettrine flottant à gauche et une bordure autour de l’image.
Conteneur générique
I l est possible de rassembler plusieurs paragraphes (Bloc) et d’attribuer une mise en forme collective. Cela peut servir aussi à d’autres manipulation (déplacement, masquage, affichage…) ; on entre alors dans le monde du DHTML, Dynamique HTML.
Positionner le curseur là où commence le bloc ;
Appliquer Conteneur générique ; le bloc est symbolisé par des pointillés
Transférer les autres paragraphes dans le bloc.
P our appliquer un style, sélectionner le bloc entier ou cliquer sur dans la barre d’état et appliquer la classe. Langage Javascript C’est un langage qui permet de manipuler les objets gérés par le navigateur (fenêtre, document, image, formulaire…) grâce à une syntaxe comprenant des variables, des structures de base, des fonctions… et une gestion d’événement tels que le clic sur un objet, le survol, la validation… 2 exemples pour vous montrer les possibilités car son utilisation est réservée à un pulic averti. A ffichage d’un message Création de la fonction Dans la partie , on créé la fonction aff() qui affichera Coucou ! grâce à la fonction d’affichage alert(). Utilisation On va surveiller le clic ( événement onClick ) sur une image et dès que celui-ci se produira, on lancera l’affichage ( aff()).   Résultat Remplacement d’une image par une autre Création de la fonction Dans la partie , on créé 2 fonctions, une qui remplace l’image par une autre lorsque la curseur la survole ( onMouseOver)et une qui remet l’image quand le curseur s’éloigne ( onMouseOut).  Utilisation On va surveiller ces 2 événements sur l’image et dès qu’un des deux se produira, on lancera la fonction correspondante.   |
