Présentation de l'éditeur

Le site web "Programmation Informatique" permettant de gérer du texte est généralement associé à l’éditeur de texte  HTML spécialisé  du CK Editor (éditeur "WYSIWYG") dont le site web est http://ckeditor.com

La mise en forme des textes se rapproche de celle des logiciels de traitement de texte comme Microsoft Word ou OpenOffice.org.  

Dans votre rédaction du tutoriel, cours , post sur le forum, etc. vous disposez donc de zones d’édition de contenu, munies d’une barre d’outils, qui se présente comme sur l'image suivante  :

Création et mise en forme du texte

1. Saisir ou modifier du texte

Pour saisir du texte, positionnez votre curseur dans la zone d'édition.

2. Choisir la taille du texte

Pour changer la taille de votre texte, allez dans le menu déroulant appeler « Taille ».   La taille des chiffres vous donne un aperçu de la taille que prendront les caractères.

3. Choisir la Police

La police permet de donner un aspect à votre texte. Les polices les plus utilisées sont «Times New Roman» et «Arial». Attention, comme votre texte va se trouver sur internet, il n'y a que très peu de polices qui sont universelles, votre choix est donc limité.
Pour utiliser les polices, allez dans le menu déroulant appelé Police.

4. Mettre le texte en gras, italique et souligné

•   Pour mettre votre texte en gras, cliquez sur  B dans la barre d'outils.  
•   Si vous souhaitez qu'il soit en italique, cliquez sur  I dans la barre d'outils.  
•   Pour le souligner, cliquez sur  U dans la barre d'outils. 

5. Mettre le texte en couleur , arrière-plan

Pour personnaliser encore plus votre texte, vous pouvez lui appliquer une couleur de texte, ou une couleur de fond.  

•   Pour changer la couleur des caractères, cliquez sur  dans la barre d'outils.  Plusieurs couleurs apparaissent dans une palette, vous pouvez en choisir une en cliquant dessus, si vous ne trouvez pas la couleur de votre choix vous pouvez en ajouter en cliquant sur "Plus de couleurs…"

• Vous pouvez également modifier la couleur d'arrière-plan. Pour cela cliquez sur  dans la barre d'outils. Ensuite choisissez la couleur d'arrière-plan comme celle de texte vue précédemment.

6.  Copier - coller  du texte

Pour copier du texte sélectionnez-le dans le document qui vous intéresse puis utilisez le raccourci clavier « CTRL + C ». Si vous copiez-collez du  texte en provenance du net ou d’un logiciel comme Word, il est ensuite recommandé de le  "nettoyer" pour que son code soit « propre ».  

 Copier-coller du texte dans un logiciel de type « bloc note », «Notepad++» ou « Textedit » sur Mac avant de le sélectionner et le copier à nouveau,  vous pouvez alors le coller dans la zone de contenu en utilisant le raccourci clavier « CTRL + V » sans crainte d’insérer un «vilain code».

NB : quelque soit la manière de procéder, la mise en page et le format ne sont que partiellement ou pas conservés du tout. Pour effectuer la mise en page consultez le partie suivante.

Format et mise en forme du texte

Pour la mise en forme des paragraphes vous disposez :

•   de listes  
•   de boutons d’alignement du texte  

1. Les listes

• Liste à puces

La liste à puces fonctionne de la même manière que la liste numérotée, mais au lieu des numéros, vous avez des points, carré, disque, ...

Pour activer/désactiver la liste, cliquez sur dans la barre d'outils
Pour modifier les propriétés de la liste cliquez-droit avec votre souris n'importe où dans votre liste. Un
menu contextuel apparaît :

Choisissez «Propriétés de la liste à puces», une fenêtre s'ouvre alors.

Type : vous propose de sélectionner le type de point de votre liste (Cercle, Disque et Carré).

• Liste numérotée

Pour créer une liste numérotée, cliquez sur  dans la barre d'outils. Le texte qui est à côté prendra automatiquement un numéro de ligne. Si vous souhaitez définir un autre numéro en-dessous, appuyez sur ENTRER et le numéro suivant s’affichera automatiquement.
Pour arrêter une liste numérotée cliquez à nouveau sur 
 
Si vous souhaitez modifier les propriétés de la liste cliquez-droit avec votre souris n'importe où dans votre liste. Un menu contextuel apparaît :

Choisissez « Propriétés de la liste numérotée », une fenêtre s'ouvre :

Début : Signifie le numéro ou la lettre qui va commencer votre liste. Vous pouvez la faire commencer où bon vous semble.  
Type : vous propose de sélectionner plusieurs numérotations possibles dans une liste (chiffres, lettres, chiffres romains, ...) 

2. L’alignement du texte

Les fonctions d’alignement permettent d’aligner votre texte sur la gauche (par défaut), sur la droite, au
centre de votre page, ou encore de le justifier (comme un alignement à gauche et à droite en même
temps).
Placez votre curseur dans un paragraphe ou sélectionnez tout le texte que vous souhaitez aligner, puis :

•  Pour l'aligner à gauche, cliquez sur  dans la barre d'outils.  
•  Si vous souhaitez l'aligner à droite, cliquez sur  dans la barre d'outils. 
• Pour centrer votre texte, cliquez sur  dans la barre d'outils.  
• Et enfin pour le justifier, cliquez sur  dans la barre d'outils. 

3. Les formats de paragraphes

Les formats de paragraphes sont très utiles pour organiser votre texte. Ils permettent de placer très rapidement vos titres, sous-titres, corps de texte, légendes. Ils ont été conçus pour correspondre à votre modèle afin que la page  ait la même présentation.

Pour ajouter, un bloc titre ou texte placez votre curseur devant le paragraphe ou sélectionnez la partie de texte à mettre en forme puis cliquez sur le menu deroulant  « format »  Une liste déroulante s’affiche :

Sélectionnez alors le titre ou la mise en forme de paragraphe qui vous convient. Lorsque vous utilisez les formats prédéfinis, les blocs apparaissent sous forme de cadres en pointillés.

Création et manipulation des tableaux

Pour créer un tableau, positionner le curseur à l’endroit où vous souhaitez l’insérer, puis cliquez sur le bouton Insérer/modifier le tableau  dans la barre d'outils. Après cela une nouvelle fenêtre appelée Propriétés du tableau s’ouvre :

 

•  Lignes : détermine le nombre de lignes de votre tableau.  
•   Colonnes : détermine le nombre de colonnes de votre tableau.  
•   En-tête : permet de faire ressortir la première ligne, la première colonne ou les deux du reste du tableau
•   Taille de la bordure : définit l'épaisseur de la bordure du tableau.  
•   Alignement : définit l'alignement du tableau (à gauche, au centre ou à droite).  
•   Largeur : définit la largeur de votre tableau, en pixels.
•   Hauteur : fixe la hauteur de la cellule.  
•   Espacement des cellules: spécifie l'épaisseur de la bordure entre les cellules.  
•   Marge interne des cellules: fixe une marge à l'intérieur du tableau.  
•   Titre du tableau: précise le titre de votre tableau. Le titre apparaîtra dans le haut du tableau.  
•   Résumé : fixe un commentaire sur le tableau. Le commentaire ne s'affiche pas dans le tableau.  

Toutes les options ne sont pas nécessaires pour construire un tableau. Seuls les champs lignes et colonnes sont obligatoires. Les autres champs sont facultatifs.

• Modifier ou supprimer un tableau

Pour le modifier, cliquez droit sur le tableau. Un menu contextuel s’affiche :

• Afin de modifier les propriétés du tableau, cliquez sur « Propriétés du tableau » et la même fenêtre que celle utilisée lors de la création du tableau apparait. Procédez alors aux modifications.
•  Si vous voulez le supprimer, cliquez simplement sur « Supprimer le tableau ».

Les trois autres options sont « Cellule », « Ligne » et « Colonnes ».
Si vous placez votre souris sur l'un d'eux, un nouveau menu contextuel apparaît.

1.  Colonne

• 
    Insérer une colonne avant : insère une colonne avant la colonne où se trouve votre curseur actuellement.  
• 
    Insérer une colonne après : insère une colonne après la colonne où se trouve votre curseur actuellement.  
• 
    Supprimer des colonnes : supprime la colonne où se trouve votre curseur, ou supprime les colonnes sélectionnées. 

2. Ligne

• Insérer une ligne avant : insère une nouvelle ligne avant la ligne où se trouve votre curseur actuellement.  
• Insérer une ligne après : insère une nouvelle ligne après la ligne où se trouve votre curseur actuellement. 
• Supprimer des lignes : supprime la ligne où se trouve votre curseur, ou supprime les lignes sélectionnées. 

3. Cellule

 

• 
    Insérer une cellule avant : insère une nouvelle cellule avant la cellule où se trouve votre curseur actuellement.  
• 
    Insérer une cellule après : insère une nouvelle cellule, après la cellule où se trouve votre curseur actuellement.  
• 
    Supprimer des cellules : supprime la cellule où se trouve votre curseur. Vous pouvez en supprimer plusieurs en même temps en les sélectionnant.  
• 
    Fusionner les cellules : fusionne les cellules que vous avez sélectionnées en une seule cellule.  
•   Fusionner à droite : fusionne les cellules que vous avez sélectionnées à droite. 
• 
    Fractionner  horizontalement : la cellule se divise en deux. Une cellule est divisée en deux colonnes.  
• 
    Fractionner verticalement : divise une cellule en deux. Une cellule est divisée en deux lignes.  
• 
    Propriétés de cellule : si vous cliquez sur « Propriétés de la cellule » une nouvelle fenêtre appelée Propriétés de la cellule apparaît. 

•   Largeur : définit la largeur de la cellule en pixels ou en pourcentage de la largeur du tableau.  
•   Hauteur : définit la hauteur de la cellule.  
•   Césure : choisissez de l'activer ou non. 
•   Alignement horizontal: détermine l'alignement horizontal du texte dans votre cellule. Il peut être mis à gauche, au centre ou à droite.  
•   Alignement vertical: détermine l'alignement vertical du texte dans votre cellule. Il peut être réglé sur Haut, Milieu, Bas ou Bas de texte.  
•   Type de cellules : permet de définir si la cellule contient des données ou si elledoit être considérée comme une cellule en-tête
•   Fusion de lignes : étend les lignes verticales.  
•   Fusion de colonne : étend les cellules sur une ligne horizontale (à gauche et à droite).  
•   Couleur d’arrière-plan : définit la couleur de fond de votre cellule. Vous pouvez sélectionner une couleur dans la palette proposée en cliquant sur Choisissez, ou la renseigner manuellement.
•   Couleur de bordure: définit la couleur de la bordure de vos cellules. Vous pouvez sélectionner une couleur dans la palette proposée en cliquant sur Choisissez, ou la renseigner manuellement.

Ajouter des liens hypertextes

Vous pouvez intégrer des liens hypertextes dans votre texte. Un lien hypertexte est un texte souligné, en couleur ou graphique sur lequel vous cliquez pour atteindre un fichier, un endroit spécifique dans un fichier, une page Web sur le (World Wide Web) une page Web sur un intranet, un Email, un dossier PDF.
Pour créer un lien hypertexte, sélectionnez le mot ou le groupe de mots que vous voulez mettre en lien.  Puis, cliquez sur Insérer lien
Une fenêtre, « Propriétés du lien » s’affiche. Elle ouvre par défaut l’onglet « Informations du lien ».

Dans cet onglet vous devez spécifier :

•  Le Type de lien : précise le type de lien que vous voulez mettre dans la page.  

  URL : redirige vers une page Internet

  Lien vers l'ancre dans le texte,

  E-mail, ouvre le logiciel de messagerie de l’internaute.
Ensuite, en fonction du type de lien que vous aurez choisi,  différents champs et onglets sont à remplir.

•  Lien de type URL  

Si vous voulez insérer une URL, vous devez alors préciser 

  Protocole : spécifie le type de protocole que vous souhaitez utiliser pour votre lien. Vous pouvez choisir entre http://, https ://, ftp://, news:// ou (en général http).

Puis préciser l’adresse :  Vous pouvez inscrire directement l’adresse si vous la connaissez.

Toujours si vous faites un lien de type URL, vous pouvez affiner votre lien dans 3 autres onglets : 

L’onglet « Cible »vous devez spécifier dans quel genre de fenêtre le lien apparaîtra. Vous pouvez
choisir de , Nouvelle fenêtre (_blank),(recommandé) Fenêtre supérieur (_top), même
fenêtre (_self), fenêtre mère (_parent).

  Lorsque vous choisissez comme cible, il vous faut en plus préciser le Nom du cadre de destination :

Lorsque vous choisissez vous pouvez cocher ou décocher plusieurs options quant à l'apparence de la fenêtre. Certaines des options sont en fonction du navigateur que vous utilisez. 

Vous pouvez choisir certaines options pour votre fenêtre pop-up en cochant une case en face de l'option ou en précisant des valeurs comme c'est le cas pour :
Largeur : précise la largeur de la fenêtre.  
Hauteur : précise la hauteur de la fenêtre.  
Position gauche : définit la position horizontale de la fenêtre à partir de la gauche de votre écran.  
Position haute : définit la position verticale de la fenêtre en commençant par le haut de votre écran. 

• Lien  de Type Ancre dans le texte  

Si vous souhaitez insérer un lien de Type Ancre dans le texte de nouvelles options apparaissent dans l'onglet Infos sur le lien.

Vous pouvez sélectionner le lien de l'ancre de deux façons :

Par le nom de l'ancre : sélectionnez le nom de l'ancre que vous avez déjà spécifié dans les propriétés d'ancrage.  
Par l'Id : sélectionnez l'ancre par Id.  
Cliquez sur le bouton OK et le lien apparaît dans votre page.

•   Lien de Type E-mail

  Adresse E-mail : spécifie l'adresse e-mail à laquelle vous souhaitez que le lien se réfère.  

  Sujet du message : précise l'objet du message qui sera envoyé à l'adresse e-mail.  

  Corps du message : précise le texte du message qui sera envoyé à l'adresse e-mail.  
cliquez sur  le bouton OK et le lien apparaît dans votre page.

Ajouter, modifier, supprimer des images

1. Insérer une image

Pour ajouter une image dans votre document,

•   positionnez le curseur à l'endroit où vous souhaitez l’insérer
•  cliquez sur l'icône image

La fenêtre "Propriétés de l'image" s'ouvre :

  URL: définit l'adresse URL de l'image. Vous pouvez également utiliser Parcourir le serveur afin de parcourir les fichiers déjà importés. Si l’image n’est pas encore sur le serveur vous pouvez la télécharger en cliquant sur l'onglet « Explorateur local » un explorateur de fichier s’ouvre. Sélectionner l’image qui vous intéresse puis cliquez sur « Envoyer l'image »

Texte de remplacement : met la description de l'image si vous voulez qu'il soit différent du nom de l'image.  

Largeur : précise la largeur de l'image.  

Hauteur : précise la hauteur de l'image.  
Vous pouvez verrouiller les proportions de l'image en appuyant sur  l'icone en forme de "clé" ou vous pouvez revenir à la taille de l'image d'origine en appuyant sur l'icone en forme d'actualisation.  

Bordure : spécifie la taille de la bordure que vous voulez placer autour de l'image.  

Espacement horizontal : définit la taille de l'écart horizontal.  

Espacement vertical : définit la taille de l'écart vertical.  

Alignement : précise l'alignement de l'image. Vous pouvez choisir entre: Gauche, Droite  du texte.  
Cliquez sur OK pour insérer l'image avec les propriétés spécifiées.

Vous pouvez ajouter des propriétés à votre image à partir des autres onglets supplémentaires : 

• L’onglet « Liens »

URL : permet de joindre un fichier ou de diriger sur un autre site. Vous pouvez également utiliser "Explorer le serveur" afin de parcourir les images déjà importées.  

Attention vérifier que http:// est bien devant le lien

Cible : définit la cible de l'image (pour les utilisateurs avancés). Vous pouvez choisir : Nouvelle fenêtre (_blank), Fenêtre supérieur (_top), même fenêtre (_self) ou Fenêtre mère (_parent). 

•  L’onglet « Exlporateur local »

 Dans l’encart « Explorateur local » préciser l'emplacement du fichier image sur votre disque dur local. Vous pouvez également utiliser Parcourir si vous ne voulez pas taper l'emplacement du fichier manuellement.  
Cliquez sur Envoyer l'image pour envoyer l'image sur le serveur . attendre la fin d'envoi (Notez que l'envoi prend beaucoup de temps si la connexion est faible ou l'image est trop lourde)

• L’onglet « Avancé »
• Id : précise l'identification de l'image.  
• 
  Sens d'écriture : définit le sens d'écriture de gauche à droite (LTR) ou de droite à gauche (RTL).  
• 
  Code langue : définit le code de la langue par exemple fr, en, pt...  
• 
  URL de description longue : précise la description de la page.  
• 
  Classes de feuilles de style : spécifie le nom de la classe CSS.  
• Titre : précise la description de l'objet cible.  
• 
  Style : définit le style CSS.

2. Modifier une image

Pour modifier une image faites un clic droit sur cette image. Une petite fenêtre s’ouvre : 

En sélectionnant « Propriétés de l’image », vous ouvrez la fenêtre qui vous permettra d’effectuer les modifications que vous souhaitez sur votre image, selon les mêmes règles que lors de sa création. Une fois les modifications effectuées, n’oubliez pas d’enregistrer.

Insérer un code

Pour inserer une partie de code dans votre document par exemple C/C++, PHP , Java cliquez sur l'icone dans la barre d'outils une fenêtre s'ouvre alors :

 

Choisir le language : permet de choisir le language (C, C++, Java, PHP, Perl, ...)

Contenu du code : permet d'insérer le contenu du code

Insérer des smileys

Pour insérer un smiley il suffit de cliquer sur l'icone dans la barre d'outils une boite de dialogue s'ouvre permettant de choisir le smiley voulu :

Agrandir la zone d'édition

Par défaut la taille de l'éditeur est trop petite faute de son conteneur c'est-à-dire nos formulaires pour modifier le document dans la zone à plein écran il suffit de cliquer sur l'icone  dans la barre d'outils une fois la rédaction finie cliquez encore sur ce même icone pour revenir sur le formulaire.

Insérer des caractères spécifiques

Certains caractères ne sont pas situés sur le clavier ou difficile à trouver par exemple les symboles mathématiques tels que : gamma , théta et autres donc pour mettre ces caractères dans vos documents il suffit de cliquer sur l'icone et choisir le caractère voulu dans le boite de dialogue qui s'ouvre.

Voilà le tutoriel est fini si vous avez des incompréhensions ou vous detectez des erreurs les commentaires sont là.

Tony NGUEREZA 28 Sep 2015, 04h27