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 3 HTML 5  - section  - article  - aside  - nav  - dialog  - dt et dd  - details / summary 



Cours 3 HTML 5 avec LigneWeb
les balises dans body.



 © LigneWeb  ... /HTML 5 : article-aside-nav-dialog-details.
© 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.Net

D'autres balises en HTML 5 :


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 




D'autres balises principales.

... nous avons d'autres balises sections ... qui sont plus spécifiques ... donnant une plus grande visibilité ...
... à nous même, ... mais également aux robots ... ce qui apporte un meilleur référencement ...

La balise article :

... la balise ...  article  ... est une balise encadrant une partie différente de l'environnement dans lequel elle se place, ...
... comme la présence d'un article, ... et elle s'écrit : ...
... <article> ... la balise entrante ... et ... </article> ... la balise sortante ...
... cette balise permet d'inclure dans une page un élément qui sera ... distingué ... du reste ...
... cette distinction apparaît également dans le code HTML 5, ce qui facilitera son changement s'il y a lieu ...
... nous voyons tout de suite qu'il y a une forme de ... transparence ... ce qui favorise ... l'autonomie ...

La balise aside :

... la balise ...  aside  ... est une balise encadrant une partie totalement différente du reste ...
... comme la présence d'une publicité .... et elle s'écrit : ...
... <aside> ... la balise entrante ... et ... </aside> ... la balise sortante ...
... comme la publicité se met en général à côté dans la page, ... l'expression ... a side ... se comprend aisément ...
... on voit tout de suite l'avantage de cette balise ... étant facilement repérable dans le code HTML 5 ...
... pour le contrôle ou le changement de la publicité ...

... la balise ...  nav  ... est une balise destiné à la navigation à l'intérieur d'une page ...
... comme un menu permettant la navigation interne, ... et elle s'écrit : ...
... <nav> ... la balise entrante ... et </nav> ... la balise sortante ...
... nous pouvons en voir un exemple possible avec le menu horizontal sur cette page ...
... qui permet de se déplacer dans cette page ... situé sous le ... bloc en-tête ...
... ici le code pour ce petit menu est écrit en XHTML et est moins lisible ...




D'autres balises section :

... il existe d'autres balises plus spécifiques pour les dialogues, la date et l'heure, etc. ...

La balise dialog :

... la balise ...  dialog  ... est une balise servant à écrire un dialogue entre deux personnages ...
... cette balise exige d'autres balises que nous verrons après, ... elle s'écrit : ...
... <dialog> ... la balise entrante ... et ... </dialog> ... la balise sortante ...
... cette balise dialog sert à encadrer un dialogue ... ce qui implique deux balises internes ...
... une pour désigner le personnage avec la balise ...dt ...
... une pour donner le contenu de ce qu'il dit avec la balise ... dd ...

... les balises dt et dd :

... il y a ... <dt> ... la balise entrante et ... </dt> ... la balise sortante ... le personnage ...
... il y a ... <dd> ... la balise entrante et ... </dd> ... la balise sortante ... avec ce qu'il dit ...

... un exemple :

... nous pouvons avoir autant de personnages que nous voulons ...


... il peut y avoir un titre qui s'écrit avec une balise ... h ... à l'intérieur de cette section ...
... il y a automatiquement un décalage entre le nom de la personne (dt) ... et ce qu'il dit (dd) ...
... la personne (dt) s'écrit en premier, suivi de ce qu'il dit (dd) en deuxième ...
... pour définir le style, on peux placer dans la balise ... dialog ... un ... id ... qui lui donnera un nom ... et cela nous donne :

La balise dialog

Mr Dupont :
Pourquoi faire une balise spécifique ?
Mathalan :
Le repérage de ce dialogue est plus aisé.
Mme Divine :
Oui, mais pour qui ?
Mathalan :
Pour les moteurs de recherche, par exemple.

... ne fonctionne pas encore avec tous les navigateurs ...


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




La balise details :

... pour donner un complément d'information, ... on va utiliser la balise ... details ... et cette balise s'écrit : ...
... <details> ... pour la balise entrante et ...
... </details> ... pour la balise sortante ...

... la balise summary :

... à l'intérieur de notre balise ... details ... nous avons une nouvelle balise ... summary ... qui s'écrit comme suit : ...
... <summary> ... comme balise entrante ... et ... </summary> ... comme balise sortante ...
... c'est en cliquant sur l'expression se trouvant dans cette balise, ... qu'une explication apparaîtra en dessous de celle-ci ...

... sous la balise ... summary ... va se placer dans le code , le paragraphe explicatif ...
... placé dans une balise ... p ... conventionnelle ...

... un exemple :


... il faut cliquer sur ... “La balise details.“ ... pour faire apparaître ou disparaître l'explication ...

La balise details.

C'est une balise permettant d'ajouter une explication qui n'apparaîtra que lorsqu'on clique sur l'expression interne à la balise summary.

... ne fonctionne pas avec certains navigateurs ... (c'est le résultat final qui apparait) ...


... un exemple autre concret est utilisé sur cette page ...
...  utilisation de la balise details et summary en CSS 3  ... dans le menu ...

Son code HTML :

... dans le menu, les logiciels à télécharger ... qui peuvent se montrer en cliquant ...
... sur : "Des logiciels en téléchargement" ...

... ne fonctionne pas encore avec tous les navigateurs ...



... design 3 D ...

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





 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