NOMBRES - Curiosités, théorie et usages

 

Accueil                           DicoNombre            Rubriques           Nouveautés      Édition du: 26/07/2016

Orientation générale        DicoMot Math          Atlas                   Références                     M'écrire

Barre de recherche          DicoCulture              Index alphabétique                               

     

Informatique

 

Débutants

Général

Programmation

 

Glossaire

Algorithme

 

 

Index des pages

Programmation

 

>>> INDEX

 

Débutant

HTML

En commun

Ligne de code

 

Sommaire de cette page

>>> Approche

>>> Style – Définition

>>> Principe – Feuille de style

>>> Spécification d'un style local

>>> Spécification d'un style général

>>> Spécification d'un style commun

 

 

 

 

Langage HTML et CSS

 

Une histoire en informatique, comme en maths, de mise en dénominateur commun

Même si je ne programme pas, cette page permet de comprendre ce qui se passe, sans prise de tête.

 

 

 

APPROCHE

 

*    En programmation, y compris pour mettre en forme des documents, on cherche à simplifier, à éviter les répétitions autant que possible.

*    C'est pourquoi la nature du texte principal sera définie une fois pour toute dans l'entête du document, entre les balises HEAD, ou encore mieux une fois pour tous les documents dans un fichier particulier (avec extension.css). On pourra définir plusieurs types de texte selon qu'il s'agit:

*      du texte normal,

*      des titres

*      des sous-titres,

*      de citations,

*      etc.

*    Cependant, liberté sera laissée à chacun de choisir localement une autre forme de texte à l'aide notamment des balises DIV et SPAN.
 

 

 

STYLE

 

*    Il nous faut préciser comment le texte va apparaître sur l'écran, quelle sera son allure générale, son style.

*    Plusieurs paramètres sont disponibles:

*      fonte (police de caractères): font-family,

*      taille des caractères: font-size,

*      couleur des caractères: color,

*      épaisseur des caractères (normal, gras): font-weight,

*      alignement du text: text-align

*      etc.

*    La liste est longue. Voici un classement en six rubriques:

 

*    On comprend qu'il serait fastidieux de définir tous ces paramètres à chaque paragraphe.

 

 

 

Principe de définition du style

 

*    J'enregistre le document que je souhaite réaliser sous mondocument.htm (ou tout autre nom à ma convenance, avec l'extension .htm)

*    Dans le même dossier (classeur), j'enregistre un document qui définit les styles. Je lui donne un nom à ma guise suivi de l'extension .css.
 (css: cascading style sheets)

 

 

*    Les styles communs sont définis dans la partie HEAD de mon document. Je peux soit (1) faire appel à un document de style externe (.css) commun à tous mes documents ou (2) définir le style propre à ce document.

*    À tout moment, dans le corps du texte (BODY), je peux placer (3) un style local à ma convenance.

 

 

 

Spécification d'un style local

 

 

*    Utilisation de la balise SPAN

<BODY>
<P>Bonjour
     <SPAN font-family: Algerian>
                 IMPORTANT

     </SPAN>
    
Au-revoir

</P>
</BODY>

 

*    Utilisation de la balise DIV.

<BODY>
<P>Bonjour </P>
     <DIV font-family: Algerian>
                <P> IMPORTANT</P>
                <P> NE PAS OUBLIER </P>

     </DIV>
 
</BODY>

 

 

 

*    Une balise doit être ouverte (<…>) puis fermée (</…>).

*    <P> indique le début d'un paragraphe.

*    SPAN permet de modifier le style d'un texte à l'intérieur d'un même paragraphe.

 

*    DIV permet de modifier le style de tous les paraphes encadrés par la balise DIV. Chaque nouvelle balise P fait passer à la ligne.

 

 

Spécification d'un style général

 

*    Texte classique

<HEAD>
<STYLE type="text/css">

P{

font-family: Arial;
font-size: 20pt;

color: black;

font-weight: bold

text-align: left;

}

</STYLE>

</HEAD>

 

<BODY>

         <p> Ce texte sera visible en Arial </p>

</BODY>

 

*    Texte particulier (une citation par exemple)

<HEAD>
<STYLE type="text/css">

.citation {

font-family: Arial;

font-size: 10pt;

color: red;

font-weight: bold

text-align: left;

}

</STYLE>

</HEAD>

 

<BODY>

         <p class="citation"> Il n'y a pas de vent favorable à qui ne sait où il veut aller.</p>

</BODY>

 

 

 

*    Le style général est défini dans la partie d'entête du document HTML.

*    Sa définition est encadrée par la balise STYLE.

*    type="text/css" informe que ce qui suit est du texte dont on définit les paramètres communs.

 

 

*    Il est possible de baptiser une forme de style pour l'appeler plus tard. On dit qu'il s'agit d'une classe.

*    Le nom de baptême dans cet exemple est citation.

*    Son appel se fera tout simplement en appelant le paragraphe (p), suivi de l'indication class = "citation".

*     

Voir Citations

 

Spécification d'un style commun

 

 

.montexte {

font-family: Arial;

font-size: 20pt;

color: black;

font-weight: normal

text-align: justify;

}

.mestitres {

font-family: Verdana;

font-size: 20pt;

color: black;

font-weight: bolder

text-align: left;

}

 

<HEAD>


<LINK REL=STYLESHEET HREF=" monstylegeneral.css" TYPE="text/css">

</HEAD>

 

 

*    Je définis tous les styles que je souhaite appliquer à tous mes documents (toutes mes pages personnelles sur Internet, par exemple.)

*    Ce texte, tel que présenté ici, est enregistré sous un nom (monstylegeneral.css, par exemple).

*    Son appel se fait dans l'entête du document par son nom. Si le fichier .css est dans un autre dossier que le document, mettre le chemin complet.

*    Le code "bizarre" (link rel …) est à utiliser tel quel. Il permet d'autres combinaisons pour les programmeurs très avancés.

 

 

 

 

Suite

*    Menu en en-tête

*    ProgrammationIndex

Voir

*    Programmation – En savoir un peu plus

Livre

*      La création de mon site Web – Karine Warbesson – Micro application – 2005

Sites

*      Apprentissage HTML par Van Lancker

Cette page

http://villemin.gerard.free.fr/aInforma/Langage/Span.htm