
Ce tutoriel vous montre comment utiliser l'éditeur de texte HTML enrichi qui se trouve sur la majorité de nos formulaires.
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 :
Pour saisir du texte, positionnez votre curseur dans la zone d'édition.
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.
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.
Pour personnaliser encore plus votre texte, vous pouvez lui appliquer une couleur de texte, ou une couleur de fond.
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.
Pour la mise en forme des paragraphes vous disposez :
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é).
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, ...)
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 :
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.
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 :
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.
Pour le modifier, cliquez droit sur le tableau. Un menu contextuel s’affiche :
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.
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 :
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.
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.
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.
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.
Pour ajouter une image dans votre document,
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 :
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).
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)
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.
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
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 :
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.
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
Aucun commentaire n'a encore été ajouté soyez le premier a ajouté un commentaire
Vous n'êtes pas connecter veuillez vous connecter ou créer gratuitement un compte pour poster des commentaires