Cookies acceptés.
bouton pour découvrir notre choix
bouton de redirection: haut
bouton de redirection: home
bouton de redirection: bas
bouton de redirection: explication des cookies
Création de sites web 3 D.   Webmaster, webdesign - Conseil.

Votre site web 3D, ... pour une autonomie.

Un espace francophone artisanal et pédagogique.
Logo de LigneWeb

la communication web
... JavaScript indispensable ... code utf-8 ... -  © design : LigneWeb

- Site expérimental en XHTML 1.0 et CSS 2.0 avec CSS 3.0 -


 •   Plan du site 
Avec des cours et des conseils.
  Notre Blog :  La ligne papyrus 
 MENU XHTML   info xhtml  - cours 1  - cours 2  - cours 3  - cours 4  - cours 5  - cours 6  - cours 7  - cours 8  - cours 9 
 Menu cours 3 XHTML  - balise h  - balise p  - balise br  - balise i  - balise b et strong  - balise em 



Cours 3 XHTML : les balises de texte



 © LigneWeb  ... /texte-titres-proposition.
© design : LigneWeb
© : alain jean deligne - LigneWeb
Le logo de LigneWeb

Les balises de texte


Suivez-nous.








Remarque : ... en CSS2 et CSS3 ... :

pour cette page et non visible ... :
le fichier ...  ligne21.css  ... qui mélange du CSS 2 avec du CSS 3 ...
... et ceci grâce aux sélecteurs spécifiques ... expliqués au ...  Cours CSS 3 




Titres et propositions

La balise h :

... Le texte dans un document est constitué de titres, sous-titres ... et de paragraphes ...
... il y a aussi souvent des chapitres ... et il y a des balises permettant de le préciser ...

... les balises de titre sont au nombre de six ... ells indiquent la grosseur du titre ...
... <h1> ... la balise entrante et ... </h1> ... la balise sortrante ...
... <h2> ... la balise entrante et ... </h2> ... la balise sortrante ...
... <h3> ... la balise entrante et ... </h3> ... la balise sortrante ...
... <h4> ... la balise entrante et ... </h4> ... la balise sortrante ...
... <h5> ... la balise entrante et ... </h5> ... la balise sortrante ...
... <h6> ... la balise entrante et ... </h6> ... la balise sortrante ...
... la balise h1 étant la plus grande, elles vont en décroissant de 1 à 6 ...




... donnons tout de suite un exemple concret, ... en haut, le code et en dessous, le résultat ...


Exemple h1 ...

Exemple h2 ...

Exemple h3 ...

Exemple h4 ...

Exemple h5 ...
Exemple h6 ...

... On remarque tout de suite, les différentes grandeurs ...
... qui sont aussi fonction du style adopté pour ma page html ...
... on voit aussi le titre en 1 et un sous-titre en 2 ...
... et qui lui se trouvera en générale à gauche ( ici fonction de mon style ) ...
... et voyons comment réaliser un paragraphe ...

...l'écart entre le titre et le texte est plus grand avec la balise ...<h1> ... et la suite du texte ...

... et avec une taille de police plus grande, définie dans le style ... (feuille de style extérieur) ...

Exemple h1 ...

Exemple h2 ...

Exemple h3 ...

Exemple h4 ...

… c'est ce que l'on obtient avec une taille plus grande ...




Les exercices pratiques d'expérimentation :

... en ouvrant le fichier dans son navigateur, on voit le résultat ...
ceci est un exemple de fichier réalisé avec Notepad ++ ou TextWrangler ... etc. :

... nous enregistrons ce fichier dans un dossier avec le nom ... "test3.html" ... par exemple ...
... plus tard, nous verrons le fichier ... index.html ...
... ouvrons se fichier dans notre navigateur ... pour voir le résultat sans style ...



... le navigateur doit être en code ... utf-8 ...
... sans le style, nous avons un résultat très convainquant ...

... c'est ainsi qu'il faut apprendre si on est débutant ...
... c'est un apprentissage très rapide, mais important dans la suite logique d'apprentissage ...
... les exemples dans toutes les pages sont pour ceux qui sont déjà habitués à ces écritures ...







La balise p

... tout texte est structuré en  paragraphes , ... et les balises qui les définissent sont ...
... <p> ... pour la balise entrante ...
... </p> ... pour la balise sortante ...

... c'est la balise principale qui ne sert qu'a entourer un paragraphe en texte ...
... la balise ... div ... est plus générale ... comme vu précédemment ...
... la balise ... p ... décale la première phrase vers la droite comme dans tout paragraphe écrit ...
... ce que ne fait pas la balise ... div ...

... il existe aussi un espace automatique entre deux paragraphes ...


Troisième structure ... p - h1, ... h6 :


...nous pouvons concrétiser ...  notre exemple  ... ci-dessus ...
... n'oublions pas qu'il nous faut l'autre fichier du style (.css) ... pour que cela fonctionne ...

... cette structure un peu plus complète nous montre le texte avec les balises ...
... qui permettent de le montrer sur un navigateur ... et donc aussi sur internet ...
... pour qu'il puisse être utilisable.

... ce fichier doit être recopié dans ...
... Smultron (par exemple pour Mac) ... ou dans Notepad + (par exemple pour PC) ...
... puis enregistrer avec un nom comme : exemple.html ... le nom suivi de .html ...
... ici, le nom est exemple ...
... Attention ... toujours en minuscules ... pour le XHTML ...




Les exercices pratiques d'expérimentation :

... en ouvrant le fichier dans son navigateur, on voit le résultat ...
ceci est un exemple de fichier réalisé avec Notepad ++ ou TextWrangler ... etc. :

... nous enregistrons ce fichier dans un dossier avec le nom ... "test4.html" ... par exemple ...
... plus tard, nous verrons le fichier ... index.html ...
... ouvrons se fichier dans notre navigateur ... pour voir le résultat sans style ...



... le navigateur doit être en code ... utf-8 ...
... sans le style, nous avons un résultat très convainquant ...







Les balise internes à p et à div :

La balise br :

... notre balise unique pour aller à la ligne est la suivante ...
... <br /> ... seule balise sortante ...
... elle se trouve donc à l'endroit ou l'on fait un saut de ligne avec le clavier ...
... remarquez qu'il y a un espace entre br et / dans le xhtml ...
... et toujours en minuscules ...

La balise i :

... comme on est dans les balises de texte, ... nous avons des balises pour ...
... l'italique : ... <i> ... pour la balise entrante ... et ... </i> ... pour la balise sortante ...


La balise b et strong :

... le gras : ... <b> ... pour balise entrante ... et ... </b> ... pour la balise sortante ...
... avec également ... <strong> ... balise entrante ... et ... </strong> ... balise sortante ...
... cette balise ... strong ... doit être privilégiée en XHTML au détriment de la balise b ...
… car elle donne une épaisseur … mais … b ... revient en HTML5 …

... on entoure donc le mot ou les expressions que l'on désire mettre en italique ou en gras ...
... par les balises appropriées ...
... il est possible également d'utiliser les deux balises en même temps ...
... à condition de respecter l'ordre d'entrée et de sortie :
... un <em><strong> exemple </strong></em> nous le montre ...
... qui devient : un exemple ...
... ce qui veut dire que les balises ... <strong> et </strong> ... sont à l'intérieur des balises ... <em> et </em> ...


La balise em :

... une autre balise qui met du texte en évidence (faiblement) et en italique est la balise em : ...
... <em> ... est la balise entrante ... et ... </em> ... est la balise sortante ...
... cette balise ...em ... aussi est à préférer à la balise ... i ...

Imbrication de balises :
... analyse d'une portion de code ...
… on voit les balises strong à l'intérieur des balises em
… les balises entrantes et sortantes, bien entendu …
ce qui nous donne :
… utilisation de …
l'italique et du gras en même temps ...

La balise u :

... une autre balise qui met du texte en évidence (faiblement) en le soulignant est la balise ... u : ...
... <u> ... est la balise entrante ... et ... </u> ... est la balise sortante …
… mais elle n'est plus utilisée dans HTML5 … et même … elle n'est déjà plus acceptée dans certains navigateurs récents ...



Remarque :

... si l'on oublie de fermer une balise, ... tout ce qui suit sera transformé par son objet ...
... et donc, par prudence, ... dès qu'on place une balise entrante, ...
... il faut placer directement sa balise sortante ... et travailler entre les deux ...
...nous pouvons concrétiser ...  notre exemple  ... ci-dessus ... déjà montré ...

... design 3 D ...

...  fenêtre sur l'univers  ...             © design : LigneWeb - © Apple





 MENU XHTML   info xhtml  - cours 1  - cours 2  - cours 3  - cours 4  - cours 5  - cours 6  - cours 7  - cours 8  - cours 9 
  Essentiel :   - Accueil  - Offres  - Site photo  - Projet  - Historique  - Historique RSS  - Réalisations  - Création 
- Cours  XHTML  - Cours CSS 2  - Création site  - Cours HTML 5  - Cours CSS 3  - Cours jQuery 
- Programmes JS  - Liens - © - cookies  - Contact  - Plan du site 

Chaque enfant compte. Plan Belgique     Valid XHTML 1.0 Transitional     [Valid RSS]     CSS Valide !     Le logo de LigneWeb

... tout ne respecte pas le W3C ... site d'expérimentation ...

le titre du site web
©  Copyright :  "LigneWeb" (2008-2017) Tous droits réservés.  Légal  Design, Artisan web: mathalan 
 LigneWeb :   BE 0843 356 602. (2012-2017)   Conditions d'utilisation  Création: masterligne  • Qui sommes nous? 

Réinstaller le Bien en soi ... pour réinstaller le Bien sur terre ... et changer le monde.
© LigneWeb  Utilisation de cookies