found 10 matching posts pour 'quoi paragraphe'


Mise en page ..

La mise en page d’un billet doit répondre à plusieurs critères :

  • Être agréable à l’oeil,
  • Facile à charger,
  • Donner envie de lire,
  • Etc …

En dehors d’avoir une orthographe relativement correcte, sinon on rebute certains lecteurs et les moteurs de recherche, il faut structurer le billet en paragraphes, polices, couleurs, images et photos, etc..

Sans faire une mise en page très élaborée, on peut mettre une image à gauche d’un paragraphe, et aussi à droite, de même en décalé dans le paragraphe, encore faut-il pouvoir le faire simplement.

Le premier obstacle vient de celui qui écrit le billet, tout simplement pask’il écrit avec une taille d’écran, un navigateur, une connexion internet bien définis.. les siens alors que le visiteur en aura de différents et le résultat peut être catastrophique pour le visiteur et se traduire par une lenteur excessive, mal positionnement des images, des paragraphes, etc .. sans parler de la longueur du texte qui peut en rebuter plus d’un (y compris le lecteur de ce billet ..)  

La taille des images doit être raisonnable pour être visible entièrement dans n’importe quel navigateur et être chargée en un temps raisonnable 800 x 600 convient fort bien surtout que le deuxième critère qui est souvent oublié est la largeur utile du blog qui varie de 400 à presque la largeur du navigateur selon le thème utilisé et la taille de l’écran

Dans notre paragraphe on va donc mettre une image de 100/200 de large selon que l’on met une ou deux images dans le même paragraphe

Mettre une image où l’on désire …

Pourquoi ce diable d’éditeur ne met-il pas les images où l’on désire ???

Une chose que l’on oublit un peu trop souvent c’est que l’éditeur c’est un script .. compliqué certes mais ce n’est qu’un script .. quand on écrit on reste dans la continuité du script mais quand on met une image chargée dans le blog .. le fait de cliquer sur l’image pour faire apparaître le menu gris fait que l’on quitte le script .. aussi quand l’image va s’installer, le script reprends .. au début et mets le curseur au tout début de la fenêtre d’édition ce qui fait que l’image n’est pas où l’on veut.

Par contre quand on clique sur le menu gris on ne quitte pas le script

Pour mettre correctement une image dans l’éditeur

  • Click sur l’image pour faire apparaître le menu gris

  • Click dans la fenêtre de l’éditeur pour mettre le curseur ou on veut mettre l’image

  • Si besoin .. mettre en forme le paragraphe (en particulier centrer)

  • Click sur un insérer du menu gris …

 

Barre visuelle de l’éditeur

barre d'outil de l'éditeur
click sur l’image pour agrandir

La barre d’outil de l’éditeur ci-dessus est divisée en blocs

Ligne du haut

Mise en forme de texte :

Gras Bold=Gras
Italique Italique
Barré Barré
Souligné Souligné

Mise en forme des paragraphes :

Liste à puce Liste à puce
Liste numérotée Liste numérotée
Désintentation Désindentation
Indentation Indentation

Liens hypertextes :

Insérer un lien Hyperlien actif
Enlever le lien Enlever le lien

Insertions multimédias :

Image chez un hébergeur Image
Album photo Album photo
Vidéo chez Google vidéo Vidéo Google
Vidéo You tube Vidéo You Tube
Vidéo Daily motion Vidéo Daily Motion

Frappe :

Annuler l’action précédente Annuler
Refaire Refaire

Divers :

Découper l’article ( lire la suite) Lire la suite
Insérer le formulaire de contact Formulaire de contact
Insérer un sondage insérer un sondage

Autres :

Ouvrir la fenêtre html pour mettre du code Code html
aide Aide

Ligne du bas

Mise en forme d’un paragraphe :

Aligné à Gauche Ferré à gauche
Centré Centré
Aligné à Droite Ferré à droite
Justifié Justifié

Mise en forme de la police :

Famille de police Famille
Taille Taille
Couleur Couleur de police

Divers :

Emoticonnes de TinyMCE Emoticones TinyMCE
Coller Coller à partir de Word
Caractères spéciaux Caractères spéciaux
Orthographe Vérificateur d'orthographe

barre visuelle de la dernière version
barre complète de la version 3.2.1

 

Images dans du texte

basket ballceci est une image mise à l’alignement à droite et comme son nom l’indique elle se trouve à droite du texte que l’on peut justifier sans aucun problème comme l’on peut voir sur cet exemple, le texte étant accolé à l’image voire si il est suffisamment important en longueur continuer sous l’image en question. Le truc étant juste de mettre pour l’image l’alignement à droite (pas toucher au paragraphe puisque l’image se trouve dans le paragraphe ) la ferrure du paragraphe est indépendante de l’image . pour un aspect pas trop mal, avoir une image qui permette cet aspect des choses

basket ballceci est une image mise à l’alignement à gauche et comme son nom l’indique elle se trouve à gauche du texte que l’on peut justifier sans aucun problème comme l’on peut voir sur cet exemple, le texte étant accolé à l’image voire si il est suffisament important en longueur continuer sous l’image en question. Le truc étant juste de mettre pour l’image l’alignement à gauche (pas toucher au paragraphe puisque l’image se trouve dans le paragraphe ) la ferrure du paragraphe est indépendante de l’image . pour un aspect pas trop mal, avoir une image qui permette cet aspect des choses

basket ballceci est une image mise à l’alignement à gauche et comme son nom l’indique elle se trouve à gauche du texte que l’on peut ferrer à gauche sans aucun problème comme l’on peut voir sur cet exemple, le texte étant accolé à l’image voire si il est suffisamment important en longueur continuer sous l’image en question. Le truc étant juste de mettre pour l’image l’alignement à gauche (pas toucher au paragraphe puisque l’image se trouve dans le paragraphe ) la ferrure du paragraphe est indépendante de l’image . pour un aspect pas trop mal, avoir une image qui permette cet aspect des choses

basket balldans ce texte les images sont réduites à une largeur de 150 pour qu’elles soient visibles dans le même paragraphe. Il y a une image mise à l’alignement à gauche et comme son nom l’indique elle se trouve à gauche du texte que l’on peut justifier sans aucun problème comme l’on peut voir sur cet exemple, le texte étant accolé à l’image olympics08pingpong.gifvoire si il est suffisamment important en longueur continuer sous l’image en question. Le truc étant juste de mettre pour l’image l’alignement à gauche (pas toucher au paragraphe puisque l’image se trouve dans le paragraphe ) et dans le texte voilà en plus une image à droite la ferrure du paragraphe est indépendante de l’image . pour un aspect pas trop mal, avoir des images qui permettent cet aspect des choses, l’aspect de ce paragraphe dépendant de la largeur des images et de la largeur utile du blog

Pour mettre l’alignement de l’image (à gauche ou à droite) …
voir sur l’image ci dessous l’emplacement de l’alignement

Attributs pour la Lettrine

les images du logo Google® sont © Google

Lettrine …

Une lettrine c’est une image représentant une capitale enjolivée en début de paragraphe, ou de chapitre, et qui est en général de hauteur supérieure à celle d’une ligne

Une lettrine peut augmenter considérablement la vision et donc la lecture

Comment faire une lettrine sur unblog ?

Mettre une image et, après l’avoir sélectionnée, en cliquant sur l’icône arbre, lui donner l’attribut « Gauche » et mettre un petit chiffre dans  »espacement vertical » et « espacement horizontal »  (les cases indiquées par des flèches rouges)

 Attributs pour la Lettrine

Attention à l’image qui peut avoir .. du « blanc » et donc ne pas être tout à fait parfaite .. et ne pas la rendre cliquable sinon certains navigateurs mettront un cadre de couleur .. qui n’est pas très esthétique. On peut réduire l’image en remplissant les cases indiquées en bleu

Une fois l’image mise dans l’article, il suffit de mettre le texte juste après, on peut à tout moment justifier le paragraphe en mettant le curseur dans le paragraphe

 Exemple de lettrine :

//jpdubs.hautetfort.com/archive/2006/10/16/la-lettrine-a-travers-l-histoire1.html

orem ipsum dolor sit amet, consectetuer adipiscing elit. Donec porta egestas velit. Aenean aliquet. Pellentesque dolor lorem, interdum at, pharetra eget, ullamcorper non, lectus. Integer semper erat ac orci. Praesent libero. Nulla ac diam ut metus condimentum vestibulum. Aenean mattis magna ac mauris ultricies consectetuer. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras sapien. Sed venenatis purus nec tortor pulvinar pharetra. Vivamus dignissim semper risus. Donec eu ligula. Phasellus bibendum, diam id ultricies viverra, justo risus semper est, sit amet rhoncus nunc justo et massa. Suspendisse elementum massa vel purus. Ut id libero. Aliquam pulvinar, turpis eget porttitor iaculis, quam nisl dignissim mauris, in ultrices lacus sem in erat. Pellentesque tempus quam eu felis. Integer tempor facilisis erat.

Nunc auctor nunc et est. Morbi vel augue. Proin sed orci ut velit bibendum mollis. Cras vitae libero. Sed cursus porttitor dolor. Nullam eros nulla, luctus nec, ullamcorper id, sollicitudin ac, ligula. Nam laoreet vestibulum velit. Mauris quam nunc, eleifend a, ullamcorper non, gravida vel, turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce consectetuer dictum nibh. Aliquam erat volutpat. Cras faucibus. Nullam massa. Suspendisse nisl orci, pharetra ut, ultricies id, mollis non, tellus. Fusce id tortor vitae diam dignissim dapibus. Donec dignissim odio et metus. Fusce ullamcorper.

Aenean quis tellus vitae augue aliquam fermentum. Ut eget enim non ante aliquam vestibulum. Praesent laoreet, dui vitae varius sodales, lectus nibh egestas neque, eu ultrices tortor libero eget risus. Maecenas mi pede, faucibus in, lobortis eget, viverra ut, orci. Fusce dignissim tincidunt lacus. Sed consectetuer tristique tortor. Duis rutrum nibh at ipsum. Mauris congue. Mauris fringilla felis at sapien ultricies suscipit. Suspendisse dui. Etiam consequat risus venenatis urna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse porta euismod leo. Integer elementum. Phasellus ut elit. Donec rhoncus, dui non viverra ultrices, neque eros rutrum enim, vitae interdum magna neque nec nisl. Mauris sem eros, condimentum in, sagittis ac, vulputate vel, odio. Quisque nec eros.

Generated 3 paragraphs, 332 words, 2293 bytes of Lorem Ipsum

La Lettrine provient du blog jpdubs.hautetfort.com

Site proposant des lettrines diverses http://lettrines.free.fr/

Mise à jour le 08/06/2008

Interligne ..

il ne faut pas confondre .. l’interligne qui est l’espace entre deux lignes du même paragraphe et l’espace entre deux paragraphes
un paragraphe c’est quoi .. ?
concrètement c’est ce qu’il y a entre deux frappes sur la touche entrée
le paragraphe se voit dans l’éditeur html par les balises (signes) suivants
le début de paragraphe

… et la fin de paragraphe


bien souvent l’utilisateur confond le retour à la ligne dans un paragraphe et la fin de paragraphe par l’appui de la touche entrée paske son traitement de texte lui fait apparaitre les choses comme identiques alors qu’elles sont fondamentalement différentes
un retour à la ligne dans un paragraphe se fait par l’appui simultanée des touches majuscule et entrée il se distingue dans le code html par la balise

or dans l’éditeur l’espace entre deux paragraphes est important  alors qu’avec un « retour à la ligne » il est .. normal
de plus toujours avec la mauvaise habitude du traitement de texte (et le non formatage des paragraphes) l’utilisateur fait .. deux entrées successives … ce qui introduit .. 2 espaces de paragraphe et on le voit fort bien dans le code html car c’est traduit le plus souvent comme suit :


 


moralité ne pas appuyer deux fois sur la touche entrée .. et faire correctement les retours à la ligne
pour s’en convaincre il suffit d’écrire dans word et de formater les paragraphes en mettant .. 12 lignes avant et autant après ..

Paragraphe

c’est du formatage de paragraphe  

Le paragraphe ( aussi appelé alinéa ) est l’élément de base d’un texte ( et aussi d’un traitement de texte ) .. c’est le paragraphe qui structure le texte

Le paragraphe est généralement caractérisé par :

  • la ferrure (aussi appelé alignement , à gauche, à droite, centré ou justifié)
  • la fin de paragraphe
  • le retrait de première ligne (positif d’environ un cadratin, négatif ou sans retrait)
  • l’interligne entre deux lignes
  • l’espace à gauche et à droite par rapport à la marge du document
  • l’espace par rapport au paragraphe précédent et celui par rapport au suivant
  • des tabulations

Le paragraphe peut contenir plusieurs phrases, et même des « retours à la ligne » forcés

en HTML seuls sont présents la ferrure et la fin de paragraphe, et les paragraphes sont séparés les uns des autres par une ligne vide

balises de paragraphe : « p », « h# », « ul »
balises de listes ordonnées ou non :  « ol », « li »

balise p c’est la balise paragraphe proprement dite
syntaxe :

attribut> ..

attribut align, valeurs : left, center, rigth, justify

balise h# ce sont les paragraphes de titre
syntaxe : attribut> .. , # étant un chiffre de 1 à 6

attribut align, valeurs : left, center, rigth, justify

balise br c’est la balise retour à la ligne
syntaxe :


balise ul c’est le paragraphe de liste
syntaxe

    … balise de liste …

balise ol c’est la balise de liste ordonnée,
syntaxe <(balise ou paragraphe) de liste>

balise li c’est la balise de liste non ordonnée,
syntaxe <(balise ou paragraphe) de liste>

  • on peut imbriquer ces balises de liste exemple :

    • .abc.
    • .def.
        .ghi.
        .klm.
    • .nop.
    • .qrs.
        .tuv.
        .wxy.

    ce qui donne attention la feuille de style css acrochée au thème peut modifier l’aspect :

    • .abc.
    • .def.
        .ghi.
        .klm.
    • .nop.
    • .qrs.
        .tuv.
        .wxy.

     

    Mise à jour le 20/05/2007

    Retrait

    c’est du formatage de paragraphe

     

    Le retrait de paragraphe s’obtient en sélectionnant un ou plusieurs paragraphe(s) puis en cliquant sur l’icone de la barre de l’éditeur comme indiqué

    Icones pour le retrait de paragraphe et la suppression du retrait

    et il s’annule en se mettant dans le paragraphe et en cliquant sur l’icone à côté

     

    Le retrait de paragraphe a pour effet de faire un block décalé de la marge gauche d’un espace conséquent appelé « indentation », ce block peut contenir un ou plusieurs paragraphes formatés ou non (les paragraphes peuvent être alignés à gauche, centrés, alignés à droite ou justifiés)

     

    utilisation : généralement on utilise le retrait pour faire une longue citation

     

    nota : avec certains thèmes ce retrait est visible par un ajout visuel. Par exemple avec Andreas un rectangle entoure le block, avec Tonus c’est une barre verticale qui marque le block et le texte est en gris …

    exemples :

    block de deux paragraphes ..

    ceci est un exemple de paragraphe avec un retrait

    comme on le voit les paragraphes peuvent être formatés

    deux blocks d’un paragraphe chacun..

    ceci est un exemple de paragraphe avec un retrait

    comme on le voit les paragraphes peuvent être formatés

    concrétement cela veut dire :
    dans le 1° cas que les deux paragraphes font parti de la même citation
    dans le 2° cas que chaque paragraphe est une citation différente

    en HTM c’est la balise « Blockquote »

    syntaxe :

    attribut(s)> …

    attribut cite, la valeur est l’URL où se trouve le texte cité

    attribut lang (xml:lang), les valeurs sont : fr, en, …
    définis par la norme ISO 369, indique la langue utilisée

    attribut title, la valeur est un texte qui apparaît lors du survol par la souris

    attribut dir, valeurs : ltr, rtl
    indique le sens de lecture et d’écriture du texte

    attribut class, la valeur est un texte (les espaces indiquant des class différentes)
    définit les class CSS affectées à la balise

    attribut ID, la valeur est un identifiant quelconque, il permet d’IDentifier la balise par les feuilles de style (css) ou par le script …

    attribut xmlns, définit l’espace XHTLM qui a été reprit dans la balise META

     

     

    Mise à jour le 19/05/2007

    Index

    Index

     

     

    Balise : catégorie balise

    Contenu d’un article ou d’une page : contenu,

    Editeur : editeur, erreurs  

    Erreurs dans le blog : erreurs 

    Flux : article, problèmes,

    Font : articleincidents,

    Formatage des paragraphes : catégorie ,

    Formatage du texte : catégorie ,

    Images : article, hébergeurs,

    Lecteur MP3 : article,  sites de musique « libre », erreurs

    Livre d’Or : article

    Marquee : article,

    Table : article,

    Thèmes : liste, articles, header, headers d’origine,

    Vidéo : article,

     

    Page créé le 12/05/2007 

    Mise à jour le 01/10/2007

    Problèmes

    Problèmes rencontrés :

    • le 05/05/2007 : Le module avatar du thème anarchy ne ferme pas le paragraphe

      après avoir fait deux retours à la ligne
      cela conduit à un mauvais positionnement du module text situé immédiatement après (visible dans firefox mais pas dans ie)
      remède : c’est plutôt un palliatif, insérer juste après le module avatar, un module text dans lequel on met

       

      , l’éditeur enlèvera le

      mais gardera le

      et la balise sera fermée 

    • le 09/05/2007 : le module Recherche dans les thèmes « Blueberry Boat », « Roundflow » a une erreur
    • le 09/05/2007 : le formulaire de contact ne marche pas
      remède : remettre l’adresse e-mail correcte dans le formulaire

     

     

     

    Mise à jour le 12/05/2007

    zolder |
    TIC & Top |
    La magie de l'informatique |
    Unblog.fr | Créer un blog | Annuaire | Signaler un abus | Téléphonie (Natel / IP)
    | WEB DV COMPUTER
    | A VOTRE SERVICE