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 2 HTML 5  - section  - entete  - header  - menu  - corps  - pied  - footer  - dessin section 



Cours 2 HTML 5 avec LigneWeb
les balises dans body.



 © LigneWeb  ... /HTML 5 :section-header-menu-footer
© 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 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 




Les balises principales.

... habituellement en XHTML , les différents blocs sont définits par ... la balise p ... et ... la balise div ...
... de ... nouvelles balises ... vont apparaître en ... HTML 5 ... qui permettront de mieux les reconnaître ...
... ce qui va ... clarifier ... le code ...

... nous avons deux types de blocs en ... HTML 5 ... :
... les grands blocs permettant de délimiter certaines blocs de textes ... les sections ...
... et les plus petits blocs de type div ... se trouvant à l'intérieur des premiers ... les sous-sections ...



Les sections :

... nous avons quatre grandes sections en HTML 5 ... et leur nom sont :
... la première : ... la balise ... section, ... ensuite, la balise ... article, ...
... ensuite, la balise ... aside, ... et enfin, la balise ... nav ...

La balise section :

... la balise ...  section  ... c'est le bloc de base qui délimite différents espaces ...
... essentiellement dans une page ou dans un autre bloc ... et s'écrit : ...
... <section> ... la balise entrante et ... </section> ... la balise sortante ...
... même si elle ressemble à la balise ... div, ... elle permet de mettre une ... hiérarchie ...
... entre les balises ... section ... et ... div ...



La balise d'entete : ...

... la première d'entre elles est la balise ... de l'entete ...
...  <section id="entete">  ... balise entrante ... et ...
...  </section>  ... la balise sortante ...
... elle est la première balise à l'intérieur de la balise <body> ... et ... </body> ...
... ou l'ordre est à respecter, ... ce qui est logique ...

... nous avons donc une balise section qui possède un attribut ... id="......" ... et c'est cet attribut qui le défini ...
... mais il pourrait tout aussi bien être défini par une nouvelle balise ... header ...


... La balise ... header ... définit une introduction à un document ...
... la balise ...  <header>  ... est la balise entrante ...
... la balise ...  </header>  ... est la balise sortante ...
... cette balise d'introduction peut être utilisée à différents niveaux ...


... cette balise peut être utilisée dans d'autres endroits que dans l'en-tête d'une page ...
... c'est la balise d'une en-tête ...



La balise du menu : ...

... la deuxième balise ... dans l'ordre logique ... est celle du menu ...
...  <section id="menu">  ... la balise entrante ... et ...
...  </section>  ... la balise sortante ...

... nous avons donc une balise section qui possède un attribut ... id="......" ... et c'est cet attribut qui le défini ...
... mais il pourrait tout aussi bien être défini par une nouvelle balise ... menu ...

Nouvelle balise " menu " : ...

... La balise ... menu ... définit une liste d'éléments ... comme un menu habituel ...
... la balise ...  <menu>  ... est la balise entrante ...
... la balise ...  </menu>  ... est la balise sortante ...
... La balise ... menu ... définit aussi une liste de boutons dans un formulaire pour en faire un contrôle ...


... cette balise peut être utilisée dans d'autres endroits que dans le menu d'une page ...
... c'est la balise d'un menu ...



la balise du corps : ...

... la troisième balise ... toujours dans l'ordre ... est celle du corps ...
...  <section id="corps">  ... la balise entrante ... et ...
...  </section>  ... la balise sortante ...
... à l'intérieur de cette balise vont se placer un ensemble de blocs comme vu au ...  cours XHTML  ...
... mais elle n'est plus une balise automatique ...
... cela dépend comment on ... construit ... ou ... structure ... la page



La balise de pied de page : ...

... et enfin, la dernière balise pour ... le pied de page ... qui termine le bas de la page ...
...  <section id="pied_de_page">  ... la balise entrante ... et ...
...  </section>  ... la balise sortante ...

... on pourrait également l'appeler ...pied ... tout simplement ...
... ce qui donnerais : ...  <section id="pied">  ... pour la balise entrante ...

... nous avons donc une balise section qui possède un attribut ... id="......" ... et c'est cet attribut qui le défini ...
... mais il pourrait tout aussi bien être défini par une nouvelle balise ... footer ...

... La balise ... footer ... définit en fin d'un document un ... auteur, ... un ... © ...
... la balise ...  <footer>  ... est la balise entrante ...
... la balise ...  </footer>  ... est la balise sortante ...
... La balise ... footer ... définit le pied de page d'un article ou d'un document ...
... il contient généralement le nom de l'auteur, la date du document et / ou les coordonnées ...


... cette balise peut être utilisée dans d'autres endroits que dans le pied d'une page ...
... c'est la balise d'un pied ...




Une autre manière de concevoir Section.

… nous pouvons imaginer que la section représente uniquement le corps de la page …

… dans ce cas nous définissont … l'en-tête … comme étant … <header></header>
… avec … le menu horizontal … comme étant … <menu></menu>
… avec … le corps … comme étant … <section></section>
… avec … le pieds de page … comme étant … <footer></footer>
… la place de l'ancien menu à gauche … sera remplacé par … <aside></aside>
... que nous voyons à …  info 2 HTML 5 
… une clarification … que nous allons illustrer par un dessin ci-dessous ...


 Figure 3. 

 DOCTYPE     ( : HTML 5 )

 html  : partie invisible avec  head  ...  et  ... body

 body  : partie visible

 Header 

... logo ...

 Menu  ou  Nav 


 Aside 

Titre

 Header  : en-tête de l'Article.


 Article 




 Footer  ... un pied de page pour l'article ...

div

 Section 


 Footer             ...Copyright ...

... nous avons la page entière ... avec les cinq zones ...
... partie visible du fichier html ... en HTML 5 ...


… nous reconnaissons facilement la structure de beaucoup de sites web …
… la clarté apparaît … et se montrera dans le code …
… on peut aussi utiliser … <nav></nav> … à la place de … menu ...

… nous voyons les blocs … article … et … nav … dans …  info 2 HTML 5 



Remarque :


… il y a un problème avec le naviguateur … Explorer 8 … actuellement qui a du mal à lire ces balises …
… il ne faut pas allez trop vite dans la réalisation sans voir les effets sur tous les naviguateurs importants …
… attendre les améliorations … avec patience ... est sagesse …
… il existe des solutions complexes pour résoudre se problème …
… voir le livre de … Rodolphe Rimerlé - HTML 5 - aux éditions Eyrolles ...


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