{"partition": "head_middle", "source_domain": "www.ullm.org", "digest": "sha1:ZBCIZF4533TYER7HL2ENZGG43W7BWURJ", "path": "/lustre/fsn1/projects/rech/qgz/uzq54wg/processed_redpajama/base_processing/output/fr/2016-26/000_00033.parquet"}
« BlueGriffon : les caractères
BlueGriffon : installation »
Vous lisez une page qui vous permet de naviguer d'article en article de la catégorie bluegriffon, Didacticiels, en cliquant sur les liens afficher ci-dessus. Vous pouvez quitter cette page : Retour à la page d'accueil
BlueGriffon : premiers pas
Dans ce tutoriel consacré à la première découverte de BlueGriffon, nous supposons que le logiciel est installé et que vous savez lancer son exécution. Sinon consultez le tutoriel détaillé consacré à son installation.Lorque vous lancez l’exécution de BlueGriffon, cliquez sur le menu Fichier. Comme vous le montre la copie d’écran ci-dessous, pour commencer à utiliser BlueGriffon, vous pouvez soit, créer un nouveau fichier en sélectionnant l’item Nouveau, soit ouvrir un fichier qui existe déjà sur votre disque dur, en cliquant sur Ouvrir, soit enfin, créer un nouveau document en cliquant sur Création assistée d’un nouveau document.
Copie d’écran
1 Le premier document édité avec BlueGriffon
Examinons les trois options offertes pour découvrir pour la permière fois BlueGriffon. Nous excluons évidemment le choix proposé par l’item Fichiers récents. Si nous utilisons pour la première fois BlueGriffon, il ne peut pas y avoir sur votre disque dur de fichier qui aurait été enregistré avec ce logiciel.
a- Ouvrir un fichier
En revanche il est tout à fait possible que vous ayez sur votre disque un fichier html que vous auriez pu créer avec un éditeur de textes ou que vous auriez téléchargé sur internet. Vous auriez pu, par exemple, suivre les conseils que vous trouvez sur le site du zéro et écrire dan un éditeur,gedit ou kwrite, selon la distribution linux.
Ma première page
Ici j’écris le contenu de ma page.
FaitesVous pourriez ouvrir ce fichier web correspondant au code ci-dessus dans BlueGriffon, mais l’intérêt resterait limité. Vous ne verriez qu’un simple affichage de la phrase Ici j’écris le contenu de ma page.Nous ne sous attarderons pas sur cette possibilité de découvrir l’outil BlueGriffon.
b- Création assistée d’un nouveau document
Nous ne nous attarderons pas non plus avec cette possibilité de prendre en mains BlueGriffon. Cette découverte du logiciel ne semble pas idéale pour des premiers pas.
c- Nouveau
Cliquez donc sur l’item Nouveau du menu..
2 Un minimum de repères après la création du premier document
Observez La fenêtre de BlueGriffon repérée par 6 chiffres.
La liste déroulante 1 : elle permet de choisir différents types de style. Nous verrons cela plus en détails dans le paragraphe suivant.
La liste déroulante 2 : elle est vide pour le moment, elle contient des références à ce que l’on appelle des id de style. Nous reviendrons sur cela dans un prochain article lorsque nous commencerons à aborder l’utilisation des styles CSS.
La liste déroulante 2 : même remarque que pour la liste 2, sauf qu’elle contient quand elles existent des classes CSS.
L’espace de travail 4 : l’espace de travail, en cliquant en face de la marque, sur la gauche qui indique la hauteur du paragraphe en pixels, vous pouvez commencer à écrire rédiger votre document.
Les boutons 5 : si vous cliquez sur le bouton Code source BlueGriffon affichera le code HTML correspondant à ce que vous venez de rédiger. Un appui sur le bouton Page web affichera le code tel qu’il sera affiché par un navigateur web. Nous reviendrons sur tout cela dans le prochain paragraphe.
La ligne d’information 6 : elle vous indique le type de bloc html dans lequel vous travaillez. Nous reviendrons sur cela dans un prochain paragraphe.
3 Code source : première approche
Vous n’avez encore rien écrit dans la zone 4 de rédaction de BlueGriffon, et pourtant, BlueGriffon a produit automatiquement du code source qui constitue l’ossature du fichier HTML que vous allez créer. Cliquez sur le bouton Code source en 5. Vous devriez voir quelque chose qui ressemble à l’image ci-dessous.
Observez L’image ci-dessus tout d’abord au niveau du code.Les deux premières lignes sont des références aux spécificités de la version html et à l’encodage des caractères. Nous ne nous attarderons pas plus longtemps sur cet aspect du code.
Le code HTML commence avec la ligne 3 : <html bla...bla...>. Il s’agit d’une balise html. Le nom de cette balise est html, il est contenu entre le signe < ainsi que des informations supplémentaires faisant références à l'organisme qui gère la norme HTML et le signe >. La fin du fichier est marquée par la balise </html>. La balise <html> est une balise ouvrante, la balise </html> est la balise fermante correspondante. À chaque balise ouvrante doit être obligatoirement associée une balise fermante qui contient la même étiquette, tag en anglais. Une erreur d’écriture, telle qu’une absence de balise fermante, peut conduire le navigateur à une erreur d’affichage, ou pire, à un défaut d’affichage.
ObservezLe schéma ci-dessus présente, en couleur, l’emboîtement des différents tag. Le tag html, sur un fond de cette couleur est le conteneur général. Il contient lui-même deux blocs :
Le bloc head (en-tête) sur un fond de cette couleur. Ce bloc head, contient, dans le schéma ci-dessus, un bloc title (titre )sur un fond de cette couleur
Le bloc body (corps) sur un fond de cette couleur.Enfin le bloc body contient dans l’exemple schématique ci-dessus, un bloc marqué par le tag p (paragraphe ), sur un fond de cette couleur.
Il est à noter que le bloc body est le conteneur à l’intérieur duquel seront placés toutes sortes de conteneurs qui offriront la possibilité d’une mise en page diversifiée. Nous le verrons dans un prochain article.
4 Un peu de contenu
Dans l’état actuel nous n’avons encore écrit aucun contenu. Nous n’avons que la structure automatiquement produite par l’application BlueGriffon. Pour franchir quelques petits pas, nous allons apporter deux modifications au fichier et l’enregistrer :
Faites
Dans le code source, entre le tag <title>et le tag fermant </title>, écrivez Mon premier document. Cette ligne de code devrait ressembler à ceci :
<title>Mon premier document</title>
Cliquez sur le bouton Page web en 5. Vous voici revenu sur l’aire de rédaction 4. Placez vous en face de la marque verticale qui indique la hauteur du paragraphe que vous avez découvert dans le code source. Vous pouvez aussi cliquer sur le tag <p>, que vous voyez dans le chemin 6 à droite du tag <body>. Écivez cette phrase : La première ligne de mon site.
5 Constat des modifications
Nous pouvons constater quelques modifications visuelles en examinant l’apparence de la page web telle qu’elle est affichée par BlueGriffon et reproduite dans la copie d’écran ci-dessous.
Observez Deux observations s’imposent : :
La copie d’écran montre que le titre Mon premier document est bien pris en compte. Il apparaît au-dessus de l’aire de rédaction 4, là où auparavant était écrit Sans titre et dans la barre des titres de la fenêtre de BlueGriffon.
La première ligne que nous venons de rédiger et elle intégrée au code entre les balises <p> et </p>, dans le bloc body, comme le montre le code source reproduit ci-dessous.
Observez Remarquez le tag br, dans la balise du même nom <br />. Cette balise fait partie des balises pour lesquelles, le navigateur n’attend pas de balise fermante. En effet cette balise ne sert pas à marquer un bloc, limité par une balise ouvrante et une fermante, elle indique simplement un saut de ligne, là où elle est placée. Pour que la syntaxe de ce type de balise soit interprétée sans ambiguïté par un navigateur, le tag doit être suivi d’une espace et d’un slash. Par curiositévous pourriez ajouter dans le code source quelques mots après cette balise et observer la manière dont l’éditeur, affiche cet ajout.
6 Visualisation et enregistrement
Observez et faites Comme le montre la copie d’écran ci-dessus, à droite de la barre des outils de BlueGriffon, on trouve le bouton qui permet d’ouvrir, dans un navigateur, le fichier html qui est en cours d’édition dans l’éditeur BlueGriffon. En effet il peut être important de vérifier si les divers navigateurs affichent correctement le fichier sur lequel vous travaillez. Tous les navigateurs n’interprètent pas de la même façon le code html. L’éditeur BlueGriffon, lui-même, dans sa fenêtre visualisation, ne permet pas de tout tester. Les liens internet, par exemple ne semblent pas actifs.
Mais pour que ce bouton soit actif, il faut auparavant avoir enregistré le fichier sur votre disque dur. Pour cela, rien de plus facile. Il suffit d’utiliser le menu Fichier->Enregistrer..
L’enregistrement terminé, un clic sur le bouton Prévisualiser dans un navigateur, ouvre une boîte de dialogue qui vous invite à choisir une application, c’est à dire un navigateur. Choisissez le navigateur installé sur votre ordinateur. Le fichier que vous venez d’enregistrer sera affiché dans le navigateur que vous venez d’associer au bouton…
Cet article a été publié le Jeudi 19 avril 2012 à 21 h 55 min	et est classé dans bluegriffon, Didacticiels.
Vous pouvez en suivre les commentaires par le biais du flux RSS 2.0. Vous pouvez laisser un commentaire, ou faire un trackback depuis votre propre site.
Adresse e-mail (ne sera pas publiée) (obligatoire)
Articles récents	XubEcol, la réponse à XP sur les bancs de l’école
Atelier shell : des commandes au script en passant par le terminal
Ubuntu 16.04 : les premières bêtas sont disponibles
Rencontrez l’April avec le CercLL
Les ateliers du jeudi du premier trimestre 2016 et des samedis du libre
Les Ateliers du Jeudi et les Samedis Libre
Pages	Accueil
Ateliers du jeudi
2ème trimestre 2015
1er trimestre 2014
Calendrier 2012/2013
Les ateliers du jeudi
Les Samedis du Libre
Samedis du libre
Samedi Libre 4ème trimestre 2014
Agenda du Libre Provence-Alpes-côte d’AzurMarseille: Libday : Conférences professionnelles Logiciel Libre, On Friday 14 October 2016 from 09h00 to 18h00.Marseille: Install Party GNU/Linux, On Saturday 30 July 2016 from 14h30 to 19h30.Aix-en-Provence: Samedi Libre, On Saturday 2 July 2016 from 10h00 to 18h00.Brignoles: Réunion mensuelle de Gullivar, On Tuesday 28 June 2016 from 18h30 to 21h30.Marseille: Install Party GNU/Linux, On Saturday 25 June 2016 from 14h30 to 19h30.Liens
Annuaire des GUL
Axul
Distributions GNU/Linux
Le Site du Manchot
LéaLinux
micr-os.com
bluegriffon
cms wordpress
sauvegarde/restauration
Traitement images
Archives	Choisir un mois juin 2016 mars 2016 février 2016 décembre 2015 septembre 2015 mars 2015 janvier 2015 octobre 2014 septembre 2014 mai 2014 février 2014 avril 2013 février 2013 septembre 2012 avril 2012 septembre 2011 juillet 2011 juin 2011 avril 2011 mars 2011 novembre 2010 juillet 2010 avril 2010 janvier 2010 décembre 2009 mai 2009 avril 2009 Le site/blog de l'ULLM (Utilisateurs de Logiciels Libres du pays Martégal) utilise le CMS WordPress