Mise en forme du texte

Le premier forum francophone sur l'éditeur de pages Web multiplateforme (Linux, Mac OS X, Windows) qui monte… KompoZer, héritier de Nvu, permet de créer vos pages Web graphiquement (wysiwyg) sans aucune connaissance du langage HTML.

Modérateur : chinon37

Québec
Salamandre
Messages : 30
Inscription : 07 sept. 2007, 15:03

Mise en forme du texte

Message par Québec »

Bonjour!

je commence à avoir Kompozer à ma main (Mac). Les feuilles css aussi... 100 fois sur le clavier...

J'ai une question concernant la mise en forme d'un texte. Est-il préférable (du point de vue de la «programmation») de mettre le texte en forme en lui attribuant un «id» (ex.: #texte dans la feuille css) ou bien dans le «body» de la page de mettre une balise <q> ou encore <blockquote>?

J'ai fais quelques essais avec blockquote en utilisant la <p> pour les paragraphes et <h3> pour mettre en forme des titres de paragraphes. Mais le rendu n'est pas terrible... J'ai de la difficulté à contrôler la hauteur paragraphes.

Merci.

Message envoyé avec : Mozilla/5.0 (Macintosh; U; PPC Mac OS X Mach-O; fr; rv:1.8.1.6) Gecko/20070725 Firefox/2.0.0.6
Ymai
Tyrannosaurus Rex
Messages : 4220
Inscription : 12 mars 2005, 11:36

Message par Ymai »

Bonjour
Les balises HTML ne servent pas à définir une mise en forme mais doivent indiquer le statut des éléments qu'ils définissent.
Exemple: un titre se trouve entre les balises <hx> (où x est un nombre)
Une citation se trouve dans les balises <cite></cite>

Ensuite, on définira la mise en forme dans la feuille de style. Et là, on décide en maître souverain du rendu pour chaque élément de la page.

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8.1.6) Gecko/20061201 Firefox/2.0.0.6 (Ubuntu-feisty)
ymai
« Un enfant de cinq ans comprendrait cela ! Allez me chercher un enfant de cinq ans ! »
Groucho Marx.
Québec
Salamandre
Messages : 30
Inscription : 07 sept. 2007, 15:03

Message par Québec »

Ok, je comprends mieux la valeur d'une balise.

J'en avais vraisemblablement l'intuition puisque dans ma feuille css j'ai fait une règle nommée blocquote à la quelle j'ai donné certains critères (taille de texte, police, marges...).

Mais aurait-il été préférable d'utiliser un conteneur générique (div) pour créer une zone de texte à laquelle donner via css une mise en forme?

Ou alors, existe-t-il une technique particulière pour placer du texte et lui donner via la feuille de styles sa mise en forme?

Merci.

Message envoyé avec : Mozilla/5.0 (Macintosh; U; PPC Mac OS X Mach-O; fr; rv:1.8.1.6) Gecko/20070725 Firefox/2.0.0.6
Ymai
Tyrannosaurus Rex
Messages : 4220
Inscription : 12 mars 2005, 11:36

Message par Ymai »

Re-

Les conteneurs génériques <div> doivent être utilisées avec parcimonie. Seulement quand on ne peut pas faire autrement.
L'idée est toujours que les balises HTML précisent la sémantique.
Une balise <div> n'a aucun sens; au contraire d'un <blockquote>, d'un <cite> ou d'un <hx>.

Pour placer un paragraphe précis en exergue, par exemple, on ne doit toujours pas utiliser de balises <div>. On attribue simplement une "class" à la balise en question.
<p class="exergue">bla bla bla</p>
Puis, dans la feuille CSS, on indique la mise en forme.

Exemple (discutable):

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title>test</title>
  <style type="text/css">
p.exergue {
padding: 10px;
background-color: red;
float: right;
width: 25%;
}
  </style>
</head>
<body>
<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut
odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum
quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam
eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat
voluptatem. </p>
<p class="exergue"> Sed ut perspiciatis unde omnis iste
natus error sit voluptatem accusantium doloremque laudantium, totam rem
aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
architecto beatae vitae dicta sunt explicabo. </p>
<p> Ut enim ad minima veniam, quis nostrum exercitationem ullam
corporis suscipit laboriosam, nisi ut aliquid ex ea commodi
consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate
velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum
fugiat quo voluptas nulla pariatur?</p>
</body>
</html>
Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8.1.6) Gecko/20061201 Firefox/2.0.0.6 (Ubuntu-feisty)
ymai
« Un enfant de cinq ans comprendrait cela ! Allez me chercher un enfant de cinq ans ! »
Groucho Marx.
Mongo Bob
Varan
Messages : 1903
Inscription : 10 sept. 2005, 01:51

Message par Mongo Bob »

http://www.laurent-bernat.com/html-balises.php3?quoi=cite a écrit :Usage
Citation [MB : erreur sur le site, en fait :"cite"] est un faux amis : il ne s'agit pas d'indiquer une citation mais bien la source d'une citation. Pour encadrer une citation ("quotation" en anglais), utilisez q ou blockquote.
http://www.la-grange.net/w3c/html4.01/struct/text.html#edef-CITE a écrit :CITE :
Contient un extrait ou une référence vers une autre source.
Et bien, on en apprend tous les jours, j'aime bien le site de Laurent Bernat, il en arrive à être plus précis que W3C :
http://www.laurent-bernat.com/dotclear/index.php
Win:Kpz version 0.7.10 (20070831)
Ubuntu:Kpz v 20090206
2 tutos :
http://josar.free.fr/index.html
http://info.sio2.be/kpz/
1 nécessité :
http://www.geckozone.org/forum/viewtopic.php?t=51228
Québec
Salamandre
Messages : 30
Inscription : 07 sept. 2007, 15:03

Message par Québec »

Cool!

Je vais, en soirée, revoir ma feuille css à la lumière de tes commentaires et intégrer mon texte en utilisant une classe pour la balise <p> de façon ensuite à formater mon texte.

Merci!

Message envoyé avec : Mozilla/5.0 (Macintosh; U; PPC Mac OS X Mach-O; fr; rv:1.8.1.6) Gecko/20070725 Firefox/2.0.0.6
Ymai
Tyrannosaurus Rex
Messages : 4220
Inscription : 12 mars 2005, 11:36

Message par Ymai »

Mongo Bob a écrit :
http://www.laurent-bernat.com/html-balises.php3?quoi=cite a écrit :Usage
Citation [MB : erreur sur le site, en fait :"cite"] est un faux amis
faites donc confiance aux amis...

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8.1.6) Gecko/20061201 Firefox/2.0.0.6 (Ubuntu-feisty)
ymai
« Un enfant de cinq ans comprendrait cela ! Allez me chercher un enfant de cinq ans ! »
Groucho Marx.
Québec
Salamandre
Messages : 30
Inscription : 07 sept. 2007, 15:03

Message par Québec »

Heureux comme un dernier de classe qui a eu une bonne note!!! La page apparaît bien sous Safari, Firefox, ie 5.2 (miracle!), Netscape 7 et même icab 3.0 qui est tout content!

Merci!

Message envoyé avec : Mozilla/5.0 (Macintosh; U; PPC Mac OS X Mach-O; fr; rv:1.8.1.6) Gecko/20070725 Firefox/2.0.0.6
Répondre

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 4 invités