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 ...
D'autres balises en HTML 5 :
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 :
... 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 :
... 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) ...
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 ...
![[Valid RSS]](valid-rss-rogers.png "Validate my RSS feed")
⇄ ici 
