|
|
MÉTHODE RAISONNÉE POUR ÉCRIRE AVEC UN ORDINATEUR |
| Site de l'auteur | Plan | Précédent | Suivant |
|
Il n'est pas question dans un seul chapitre d'apprendre à utiliser le HTML et les css. On se contentera de voir comment ça fonctionne, et comment les css permettent de remplacer les attributs et les variables des balises du HTML en simplifiant leurs modifications. Pour cela, nous allons voir comment on peut changer une mise en page présentée selon les conventions du web (voir I Comment mettre en page) pour la rendre conforme à celles de la typographie. Supprimer l'espace entre les paragraphes Le plus simple est de remplacer les sauts de paragraphe par des sauts de ligne. (On peut le faire automatiquement en modifiant les préférences d'exportation HTML dans certains traitements de texte.) Avant : <p>Texte.</p><p>Suite du texte. </p> Après : <p> Texte. <br>Suite du texte. </p>
Cette solution n'est toutefois pas très commode car elle ne nous permettra plus de placer un alinéa en début de ligne.
Les CSS permettent de définir cet espacement p {margin-top: 0px; margin-bottom: 0px}Il n'y aura plus d'espacement entre les paragraphes. Placer des alinéas Le seul moyen efficace de faire des alinéas en html est de placer trois ou cinq espaces insécables en début de ligne ( ). Ce n'est toutefois pas très indiqué, car ils demeureront si l'on entreprend d'éditer la page dans un traitement de texte. Les CSS le permettent aisément : p {text-indent: xx}
Les valeurs peuvent être données en points (pt), en pixels (px), en pouces (in), en pica (pc), en centimètres (cm), millimètres (mm), etc. (Voir Unités de mesure.) La justification Les traitements de texte ne tiennent généralement pas compte de la justification en exportant en html. Ils placent le texte entre une paire de balises <p></p> qui aligne à gauche par défaut. La plupart des éditeurs, eux, ignorent cet attribut. On doit donc l'entrer au clavier <p align="justify"></p>
Sur une CSS: p {text-align: justify}Quelques navigateurs n'en tiendront cependant pas compte. Les marges Il est pénible de lire un texte sans marge. Si on l'imprime il devient alors difficile de relier les pages d'une manière quelconque. Il est alors possible d'utiliser un tableau pour placer le texte dans la page. On créera donc un tableau d'une seule colonne et d'une seule rangée, dans lequel on collera le texte. <table width="500" border="0" align="center"> <tr> <td> <p>Ici un texte dans le cadre invisible<p> </td> </tr> </table>
width="500" donnera la largeur des lignes qu'il contient. Ici 500 pixels. On donnera aux bordure la valeur zéro : border="0". align="center" placera le texte au milieu de la page.
Les CSS sont plus simples. On placera d'abord tout le texte entre les balises <div></div>. On définira ensuite les marges de DIV dans la feuille de style : div {margin-left: 80 px; margin-right: 80px, text-align: center}
Le texte sera aligné au milieu de la page avec des marges de 80 pixels.
En se documentant, on apprendra que les css permettent des réglages plus fins. La meilleure façon de progresser consiste à ne pas chercher à tout faire d'un coup, mais à améliorer sa présentation à chaque occasion d'une mise à jour, par exemple. Il est préférable alors d'utiliser un code le plus spartiate possible, qui ne contienne que le strict nécessaire, et dont on contrôlera plus facilement les attributs et les variables par la feuille de style, en la faisant évoluer en étapes successives. Il suffira de modifier un seul élément dans la feuille de style pour que l'effet soit immédiatement appliqué à tous les identifiants de toutes les pages qui s'y rapportent. Les fonds Par défaut, le fond de page est parfois gris, parfois blanc. Le blanc fatigue les yeux, et le gris par défaut est un peu sombre. On pourra préférer une teinte ivoire ("#FFFFF0") ou un gris plus pale ("silver"). On peut encore mettre une image en fond de page. Il est recommandé alors de choisir un fond clair et uni qui ne gène pas la lisibilité. On doit alors retenir que le chargement de l’image ralentira l’affichage dans le navigateur.
Pratiquement, il suffit de chercher dans le menu ou de cliquer sur le bouton « propriétés de la page ».
On peut attribuer aussi des fonds à presque
tous les objets, aux tableaux et aux cellules de tableaux notamment. Le
code est : bgcolor="#??????".
Beaucoup d’objets utilisés sur son traitement
de texte sont convertis en images, par exemple une équation. Il
est avisé de convertir soi-même en image ce qu’il est
souhaitable de conserver intact : un titre dans une police peu courante,
du texte dans des polices non-européennes — du moins dans
un jeu de caractères qui ne correspond pas au « doctype »
de la page. Certains logiciels ont un menu et un bouton spécifique
pour faire cela, comme Nisus. Sinon on utilisera un logiciel d’image,
un module d’image de son traitement de texte, ou, à la rigueur,
on fera une copie d’écran. Il existe trois formats d’image pour le web. Chacun a ses avantages et ses inconvénients que l’on doit adapter à ses besoins. • Le jpg : Ce format conserve très bien les couleurs, mais risque de coûter beaucoup de mémoire (éviter de dépasser le 10k sur le web) si l’on veut qu’elle conserve sa netteté. • Le gif : Il détériore les couleurs mais est bien adapté pour des traits, des graphiques ou des lettres qui ont peut de couleurs, si ce n’est une seule. Il offre en plus l’apprécialble avantage de permettre de rendre les blancs transparents, et donc de leur permettre d’adopter la couleur de la page où l’image est déposée. Il est toutefois déconseillé d'utiliser ce format qui est propriétaire* et risque de ne pas être pris en compte par les meilleurs outils. • Le png : Il concilie assez bien les avantages des deux précédents et deviendra peut-être le format universel du net.
* Certes, l'ADSL permet aujourd'hui des débits rapides, mais le web est mondial, et la vitesse du réseau est très variable d'un endroit à l'autre. Laissons donc les pages lourdes à ceux qui ont intérêt à accélérer l'obsolescence de hardwares et de softwares.
** Format propriétaire, c’est-à-dire
que pour implanter des modules qui le gèrent dans un logiciel,
les développeurs doivent payer des redevances, aussi beaucoup de
logiciels ne proposent plus ce format de conversion. Signalons qu’il
existe un logiciel gratuit qui convertit automatiquement en png les images
gif ; on est donc toujours à temps. Documentation |
| Site de l'auteur | Plan | Précédent | Suivant |