Obligement - L'Amiga au maximum

Jeudi 19 octobre 2017 - 01:51  

Translate

En De Nl Nl
Es Pt It Nl


Rubriques

 · Accueil
 · A Propos
 · Articles
 · Galeries
 · Glossaire
 · Hit Parade
 · Liens
 · Liste jeux Amiga
 · Quizz
 · Téléchargements
 · Trucs et astuces


Articles

 · Actualité (récente)
 · Actualité (archive)
 · Comparatifs
 · Dossiers
 · Entrevues
 · Matériel (tests)
 · Matériel (bidouilles)
 · Points de vue
 · En pratique
 · Programmation
 · Reportages
 · Tests de jeux
 · Tests de logiciels
 · Tests de compilations
 · Articles divers

 · Articles in english
 · Articles in other languages


Twitter

Suivez-nous sur Twitter




Liens

 · Sites de téléchargements
 · Associations
 · Pages Personnelles
 · Moteurs de recherche
 · Pages de liens
 · Constructeurs matériels
 · Matériel
 · Autres sites de matériel
 · Réparateurs
 · Revendeurs
 · Presse et médias
 · Programmation
 · Développeurs logiciels
 · Logiciels
 · Développeurs de jeux
 · Jeux
 · Autres sites de jeux
 · Scène démo
 · Divers
 · Informatique générale


Jeux Amiga

0, A, B, C, D, E, F,
G, H, I, J, K, L, M,
N, O, P, Q, R, S, T,
U, V, W, X, Y, Z


Trucs et astuces

0, A, B, C, D, E, F,
G, H, I, J, K, L, M,
N, O, P, Q, R, S, T,
U, V, W, X, Y, Z


Glossaire

0, A, B, C, D, E, F,
G, H, I, J, K, L, M,
N, O, P, Q, R, S, T,
U, V, W, X, Y, Z


Partenaires

Annuaire Amiga

Amedia Computer

Relec

Hit Parade


Contact

David Brunet

Courriel

 


En pratique : HTML - mise en forme des documents (les séparateurs)
(Article écrit par Jean-François Richard - août 2009)


Nous allons aborder le sujet de la mise en forme des documents, avec notamment les séparateurs, les paragraphes, en encore la notion de division qui ne sera pleinement exploitable que lors de l'utilisation des CSS.

La mise en forme des documents

Les séparateurs

Nous allons maintenant nous intéresser aux séparateurs de texte, ils sont de plusieurs types :
  • Les retours chariots (à la ligne).
  • Les paragraphes.
  • Les divisions.
  • Les règles.
Le retour chariot

Le retour chariot permet de faire un retour en début de ligne suivante pour le texte suivant cette balise orpheline <br>. Il est à noter l'inexistence d'attributs pour cette balise.

Code source de la page "retour_chariot" :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr" dir="ltr">

<head>
       <title>TD 10 : Retour chariot</title>
</head>

<body>

Voici une ligne tapée de façon tout à fait naturelle.
<br>
Enfin  entre chaque mot    de     cette  ligne  existe des    tabulations.

</body>

</html>

HTML
Image 3 : Exemple de retour chariot

Cet élément de positionnement dans l'affichage de la page s'obtient par la balise <:br>. Elle ne comprend pas de balise de fermeture car elle se suffit à elle-même comme quelques autres balises que nous verrons bientôt.

Les éléments séparateurs sont : BR, CENTER, NOBR, PRE, SPACER, TABLE et WBR.

Élément
Description
Exemple
BR Insère une césure de ligne dans le texte le contenant Voir exemple ci-dessus
CENTER Centre le texte encadré. Non recommandé par le W3C, plutôt utiliser les attributs ou feuilles de styles
NOBR Créer une portion de texte insécable
PRE Affichage d'un texte sans formatage, avec une police à largeur fixe
TABLE Définition d'un tableau
WBR Définit un point de césure de ligne
Tableau 2 : les éléments séparateurs

Exercice : gérer la fin de ligne de façon cohérente dans la page Web où vous aviez tapé n'importe quoi au clavier.

Voyons les attributs de ces nouveaux éléments :

Élément
Attribut
Valeur
Description
BR class nom de classe CSS
BR clear left, right, all Marge gauche, droite, ou les deux à la fois
BR style valeur Style interne
BR id identifiant unique CSS
BR title titre Titre interne
CENTER obsolète
NOBR aucun
PRE align center, left, right
PRE class, id, style, title Voir BR
PRE dir Direction d'affichage
PRE lang Langue utilisée
PRE evenements
PRE width Nombre de caractère par ligne Largeur du texte spécifié
WBR aucun
Tableau 3 : les attributs des éléments séparateurs

Les éléments "BR" et "WBR" sont des éléments orphelins.

Maintenant, apprenons à formater du texte de façon plus fine et précise.

Les paragraphes

Les paragraphes sont un élément clé de la mise en place de pages Web harmonieuses, car si le texte est affiché de façon brute, cela est peu attractif pour l'oeil et donne encore moins envie de poursuivre dans l'étude du contenu de la page en cours de lecture.

Code source de la page "paragraphes" :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr" dir="ltr">

<head>
       <title>Les paragraphes</title>
</head>

<body>

Le texte qui suit est un nouveau paragraphe
<p>Ce texte est inclus dans le nouveau paragraphe</p>
Le texte suivant n'est pas dans le paragraphe 
<p>Encore un nouveau paragraphe
<!-- les paragraphes ont pour attributs leurs alignements -->

</body>

</html>

HTML
Image 4 : Paragraphe in and out

A partir du code source de cette page, on remarque deux choses :

Premièrement, les paragraphes organisent le texte, mais cela n'est pas si évident.
Deuxièmement, cela provoque un saut de ligne avant le début (la balise d'ouverture du paragraphe) en insérant une ligne blanche.

Ainsi, le HTML met en évidence le paragraphe dans le corps du texte et rend le texte plus aéré et attractif pour l'internaute.

Remarque : notez aussi qu'il manque une balise de fermeture pour le dernier paragraphe, ce qui prouve encore la grande tolérance des sources HTML et des navigateurs dans leurs interprétations du langage à balise HTML. Selon les recommandations du W3C et si l'on veut écrire ses pages avec un code source propre, il est indispensable de bien coder la balise de fermeture.

On peut alors jouer avec les attributs du marqueur <p>, ces derniers sont identiques à ceux de l'élément "BR".

Les attributs des paragraphes

Code source de la page "attributs des paragraphes" :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr" dir="ltr">

<head>
       <title>Les attributs des paragraphes
</head>

<body>

Le texte qui suit est un nouveau paragraphe
<p align="center">Ce texte est inclus dans le nouveau paragraphe</p>
<p align="right">Le texte suivant est dans un autre paragraphe</p>
<p align="left">Encore un nouveau paragraphe</p>

</body>

</html>

HTML
Image 5 : Les attributs des paragraphes en action

Astuce : toujours entourer de guillemets les valeurs des attributs, même si vous remarquez que cela n'a pas d'incidence, votre code n'en sera que plus rigoureux.

Exercice : faire une page avec trois paragraphes (introduction, discussion, conclusion) comme dans les résumés/discussions du collège.

Les divisions

Les divisions sont utiles si l'on veut formater un texte sans avoir le problème récurrent des balises de paragraphes effectuant un saut de ligne obligatoirement.

La balise <div> permet de pallier cela. De plus, elle permet de délimiter une zone.

Elle possède comme la balise de paragraphe et de retour chariot, l'attribut alignement (align).

Voici le code source de la page "les_divisions" :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr" dir="ltr">
<head>
       <title>Les divisions</title>
</head>

<body>

Ce texte est au-dessus d'une division alignée au centre de la page.
<div align="center">
Et ce texte est dans la division. 
<br>
Une autre ligne dans la division.
</div>
Ce texte est en dehors de la division

</body>
</html>

HTML
Image 1 : exemple de division dans un texte
(cela ressemble fortement aux paragraphes à première vue)


En résumé : les divisions permettent de structurer le document hypertexte en différentes sections, une par division. Nous verrons ultérieurement leur utilité dans le cadre des feuilles de style.

Remarque : pour Interet Explorer, l'attribut "nowrap" existe, il permet de supprimer les retours à la ligne automatique, attention donc lors de son utilisation.

Les règles

Nous allons maintenant assimiler une notion importante dans la présentation du texte et de sa séparation physique et visible à l'écran par la règle, ligne horizontale de plus ou moins grande taille et possédant plusieurs attributs sur lesquels on peut jouer.

Voici le code source de la page "les_regles" :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr" dir="ltr">
<head>
       <title>Les règles</title>
</head>

<body>

Ce texte est au-dessus d'une règle.
<hr>
Et celui-ci est en dessous d'une règle. 
<br>
Les règles peuvent avoir différentes tailles
<hr width="25%">
<hr width="50%">
<hr width="75%">
<hr width="100%">
<hr width="75%">
<hr width="50%">
<hr width="25%">

Elles peuvent être exprimées en pourcentage de l'écran de navigation
exemple de 80% de l'écran:
<hr width="80%">

ou en pixels
ici pour un écran de 640 pixels
<hr width="640">

<p>
une règle de 2 pixels (taille par défaut sur le navigateur Internet Explorer).
<hr>
Les trois règles suivantes ont une hauteur de 4, 12 et 72 pixels.
<hr size="4">
<hr size="12">
<hr size="72">
</p>

De plus, les règles peuvent être pleines ou vides
<hr size=12>
<br>
<hr size=12 noshade>

</body>

</html>

Il faut préciser que les règles peuvent avoir des attributs spécifiant leur largeur ou leur épaisseur ce qui est très intéressant au niveau de la présentation de document.

L'attribut nous intéressant est "width" (largeur) et "size" (taille).

On peut spécifier ces attributs dont la valeur est exprimée par des nombres :
  • En pixel (ex : width="100") pour une largeur de 100 pixels par rapport à la résolution de l'écran (dans notre exemple, 100 pixels équivaut à 1/12 de l'écran en première approximation, car la largeur de l'écran est de 1280 pixels).
  • En pourcentage (ex : size="10%") équivalent à une taille de 10% de l'écran dans le sens de sa hauteur (dans notre exemple, environ 76 pixels d'épaisseur de la règle, car 10% de la résolution de l'écran de 768 pixels).
HTML
Image 2 : des règles en action !

Allons plus loin dans l'étude des règles avec les règles vides et pleines.

Une règle est vide par défaut, il faut ajouter l'attribut "noshade" pour avoir une règle avec une trame.

HTML
Image 3 : règle vide ou pleine

En résumé : les règles permettent d'apporter des divisions visibles dans le texte et ainsi de donner des repères visuels à l'internaute. Il ne faut pas trop de règles, sauf dans le cas de texte très long nécessitant des coupures marquées, comme dans le cas de chapitre d'un livre.


[Retour en haut] / [Retour aux articles] [Article précédent] / [Article suivant]