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 HTML 5  - Cours 1  - Cours 2  - Cours 3  - Cours 4  - Cours 5  - Cours 6  - Cours 7  - Cours 8  - cours 9 
 Menu cours 8 HTML 5  - balise h  / balise p  - balises uniques : hr - br  - balise blockquote  - balise q 
- balise cite  - balises strong-em-b  /- listes à puce  - listes numérotée  - liste de définition 



Cours 8 HTML 5 avec LigneWeb
les balises textes et listes.



 © LigneWeb  ... /HTML 5 : balises textes
© design : LigneWeb
© : alain jean deligne - LigneWeb



Cette page est réalisée en XHTML 1.0 transitionnel avec du CSS 2 et du CSS 3 ...
Cette page va être réalisée en parallèlle en HTML 5 et CSS 3 prochainement ...



Le logo de LigneWeb

Les balises pour le 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 en HTML 5.

La balise h : (comme en XHTML)

... 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 ...
... la balise sortante est absolument obligatoire ...




... 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 ...

... le fichier css par défaut ...
Ce qui change en HTML 5 :
... les balises h1, h2, h3, etc. permettent une hiérarchisation des titres ...
... pour chacune des sections de la page ...

... il peut donc y avoir plusieurs h1 sur une même page web ...
... mais, il ne faut qu'un seul h1 par section ...
... les différentes sections sont pour rappel ... section, article, aside, header, footer ....
... c'est dans le css que seront définis les différents styles pour chaque h1 de la page ...



La balise p : (comme en XHTML)

... 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 ...
... la balise sortante est absolument obligatoire ...

... le fichier css par défaut ...




Balises uniques.

Balise hr : (≠ de l'XHTML)

... balise permettant de créer un espace entre deux lignes ...
... cette balise se montre par une ligne ...

... en html5, cette balise s'écrit : ... <hr> ... simplement ...
... l'espace et le slash ont disparu ... une simplification heureuse ...
... anciennement, en xhtml ... cette balise s'écrivait ... <hr /> ...

... exemple ...

Balise br : (≠ de l'XHTML)

... balise permettant d'aller à la ligne ...

... en html5, cette balise s'écrit : ... <br> ... simplement ...
... l'espace et le slash ont disparu ... une simplification heureuse ...
... anciennement, en xhtml ... cette balise s'écrivait ... <br /> ...

... exemple ...




Balises encadrantes.

Balise blockquote :

... balise entourant une citation pouvant contenir une image, un titre ...
... on peut aussi concevoir d'y mettre un footer pour préciser la source ...
... la balise entrante est ... <blockquote> ...
... la balise sortante est ... </blockquote> ...

Attribut de blockquote :

... pour préciser l'url de l'adresse pour la citation, on utilise l'attribut ... cite
... à ne pas confondre avec la balise ... <cite> ... vue plus loin ...

... exemple ...

... le fichier css par défaut ...


Balise q :

... balise entourant une petite citation ... contrairement à la balise dockquote ...
... la citation est encadrée de guillemets ... ( sauf Explorer 7 et versions inférieures ) ...
... la balise entrante est ... <q> ...
... la balise sortante est ... </q> ...

Attribut de q :

... pour préciser l'url de l'adresse pour la citation, on utilise l'attribut cite
... à ne pas confondre avec la balise ... <cite> ... vue plus loin ...

... exemple ...

... le fichier css par défaut ...


Balise cite :

... balise entourant le titre d'une œuvre ... mentionné dans la phrase ...
... on lui adjoint un style particulier valable partout ...
... la balise entrante est ... <cite> ...
... la balise sortante est ... </cite> ...

... exemple ...

... le fichier css par défaut ...

... mais nous pourrions imaginer un autre style spécifique ...
... ce qui le distinguerais plus fortement ...




Balise strong :

... balise donnant une grande importance en encadrant un mot ou un ensemble de mots ...
... il se présente par le corps plus gras ...
... la balise entrante est ... <strong> ...
... la balise sortante est ... </strong> ...

... exemple ...

ce qui nous donne :
... balise donnant une grande importance en encadrant un mot ou un ensemble de mots ...

... balise différente de la balise b qui ne donne qu'un corps plus gras ...
... et que nous allons voir maintenant ...

Balise b :

... balise donnant une mise en valeur en encadrant un mot ou un ensemble de mots ...
... il se présente par le corps plus gras ...
... la balise entrante est ... <b> ...
... la balise sortante est ... </b> ...

... exemple ...

ce qui nous donne :
... balise donnant une mise en valeur en encadrant un mot ou un ensemble de mots ...

Balise em :

... balise donnant une mise en valeur en encadrant un mot ou un ensemble de mots ...
... il se présente par une écriture en italique ...
... la balise entrante est ... <em> ...
... la balise sortante est ... </em> ...

... exemple ...

ce qui nous donne :
... balise donnant une mise en valeur en encadrant un mot ou un ensemble de mots ...

... balise différente de la balise i qui donne un corps en italique ...
... avec un impact différent et que nous allons voir plus tard ...





Les listes en HTML 5


... comme en XHTML ... nous avons trois grandes catégories de listes : ...
... la liste à puce, la liste numérotée et la liste de définition ...

La liste à puces

... elle est constituée de deux balises distinctes, ... la balise ul et la balise li ...
... la balise qui défini le type de liste ... est ... <ul> ... la balise entrante ...
... et ... </ul> ... la balise sortante ...
... à l'intérieur de la balise … ul ... viennent les balises encadrant les différents termes de la liste proprement dites ...
... chacun des termes est encadré par ... <li> ... la balise entrante ...
... et ... </li> ... la balise sortante ...

... la balise ...  li  ... est valable pour les deux sortes de balises ...


Un exemple de liste à puce :

  • la balise html
  • la balise head
  • la balise body
  • la balise title
  • la balise meta
  • la balise link





La liste numérotée

... elle est constituée de deux balises distinctes, ... la balise ol et la balise li ...
... la balise qui défini le type de liste ... est ... <ol> ... la balise entrante ...
... et ... </ol> ... la balise sortante ..
... à l'intérieur de la balise ol viennent les balises encadrant les différents termes de la liste proprement dites ...
... chacun des termes est encadré par ... <li> ... la balise entrante ...
... et ... </li> ... la balise sortante ...

... la balise ... ol ... permet une numérotation automatique ...
... elle peut avoir l'attribut ... start ... précisant le premier nombre de la liste ...
... élément se placant dans la balise entrante ...<ol start="4"> ...
... le premier sera donc 4, le suivant 5, etc. .... la liste commence au numéro 4 ... et est ordonné ...

... les balises ... ol et li ... peuvent avoir un attribut ... type ... précisant quel sorte d'élément ...
... représentera la numérotation ... :
... par des chiffres arabes ( valeur par défaut ) : ... 1 ...
... par des lettres minuscules : ... a ...
... par des lettres majuscules : ... A ...
... par des chiffres romains : ... XV ...
... ce type appliqué à la balise ... ol ... agira sur toute la liste ...
...mais appliqué à la balise ... li ... n'agira que sur celle-ci uniquement ...

... ces attributs start, type, et d'autres seront plutôt ... précisées dans la feuille de style (CSS 2.0) ...


Un exemple de liste numérotée :

  1. la balise html
  2. la balise head
  3. la balise body
  4. la balise title
  5. la balise meta
  6. la balise link





La liste de définition

... nous avons la même balise ol pour les listes de définition ... comme pour la liste numérotée ...
... la balise qui défini ce type de liste ... est ... <ol> ... la balise entrante ...
... et ... </ol> ... la balise sortante ..

... et cette dernière liste est spéciale ... la liste de définition ...
... avec deux sortes d'éléments ... les premiers : ... les termes à définir, ...
... et les deuxièmes, ... les définitions elles-mêmes ...

... la première balise est celle qui défini la liste de définition ... qui est ...dl ...
... <dl> ... est la balise entrante ...
... </dl> ... est la balise sortante ...
... et c'est entre ses balises que vont se trouver les balises ...dd ... et ... dt ...

... la balise ... dd ... est le terme de définition ... et ...dt ... la description de la définition ...
... <dd> ... est la balise entrante ...
... </dd> ... la balise sortante ... des termes ...

... <dt> ... la balise entrante ...
... </dt> ... la balise sortante ... des descriptions ...

... nous pouvons combiner ces différentes listes ... mais, nous pouvons aussi les ... imbriquer ...
... il faut pour ce faire que la deuxième liste soit à l'intérieur des balises entrante et sortante de la première ...
... il en sera toujours ainsi pour toute inclusion ...
... ne ... jamais oublier de fermer une balise ... par celle sortante ...


Un exemple de liste de définition :


… incluse dans une liste numérotée … <ol> et <li> ...
  1. la balise html
    la balise encadrante de la page complète
  2. la balise head
    la balise des informations invisibles
  3. la balise body
    la balise de la page visible
  4. la balise title
    la balise du nom de la page
  5. la balise meta
    la balise des informations internes à head
  6. la balise link
    la balise des liens


... design 3 D ...

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






 Menu HTML 5  - 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