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 2 XHTML  - balise div  / entete  / menu  / corps  / pied_de_page  / structure et dessin  / menu hor.  / div 
 ... un menu horizontal ... le menu du cours et de cette page ... entre l'en-tête et le menu vertical ... à voir ... ⇧ 



Cours 2 XHTML : les balises div



 © LigneWeb  ... /div-entete-menu-corps-pied de page.
© design : LigneWeb
© : alain jean deligne - LigneWeb
Le logo de LigneWeb

Les balises des zones
en XHTML


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 




... entrons dans le vif du sujet :


... nous continuons donc ... avec les balises des quatres zones ... entete, ... menu, ... corps ... et ... pied de page ...
... voir le  menu spécial  dans l'en-tête ...

... voir également le ...  cours précédant  ... pour une introduction des blocs ...

La balise div :

... les balises encadrent les éléments ... ce qui revient a dire ... :
... il y en a une balise entrante ... (devant) ...
... et une balise sortante ... (derrière) ...

... et quelques balises qui n'encadrent pas ... elles sont uniques
... ( aller à la ligne, par exemple ).

... les quatres zones (en-tête, menu, corps de la page et pied de page) ...
... sont des blocs qui vont par leur définition pouvoir être stylisés ...

... pour définir un bloc de texte nous avons la balise ... p ... que nous voyons au    cours3   

...nous avons une balise ... div ... englobant plusieurs éléments différents ...
... <div> ... la balise entrante ...
... </div> ... la balise sortante ...

... cette balise div est aussi utilisée pour les en-têtes, menus, etc. ...

... la grosse différence entre une balise ... p ... et la balise ... div ...
... est que la balise p n'accepte qu'un seul paragraphe ... texte ...
... tandis que la balise … div … peut contenir des paragraphes de textes, des images, des sons, des vidéos, …
et ... d'autres blocs div ...

... notre bloc ... div ... va pouvoir être défini par un ... id ... qui portera le nom ...
... entete, menu, corps, ou pied_de_page ...
... en le nommant entouré de ... ="......" ...

... pour d'autres blocs, la balise ... div ... portera d'autres noms, fonction de ce qu'ils sont ... et de notre choix ...




Logique de construction : rappel ...


... la ...  construction d'une page web  ... se réalise de ...  haut en bas  ... pour définir les blocs ...
... et de ...  gauche à droite  ...

... c'est avec le ...  style en CSS 2.0 dans un fichier externe  ...
... que nous pourrons définir la place de chacun d'eux ...
... ( voir le cours sur  la création d'un site web  et les pages suivantes ) ...

... pour toute aide complémentaire, n'ayez pas peur de contacter le ...
...  webmaster 
...

... de ...  gauche à droite sauf  ... pour ... l'élément flottant ...
... qui sera toujours placé en premier, ... qu'il soit à gauche ou à droite ...

... toujours suivre la  logique  de lecture / placement / construction ...

... un exemple qui est ...  l'image flottante à droite  ... placée en premier …
… avec le titre … “Les balises des zones en XHTML.“
... sur la même ligne ...

... sauf  ... pour ... l'élément  flottant  ... :

... on utilise le mot flottant ( float ) ... parce qu'il est placé sur la même ligne ...
... avec un autre élément, ... une image et un titre, par exemple ...

...  l'image flottante à droite  ... placée en premier ...

... autre exemple : le menu vertical que j'écris en premier par rapport au corps ...
... et qui ici est flottant à gauche ... comme il pourrait l'être à droite ...
... l'ordre d'écriture est : ...
... l'en-tête, le menu, le corps, le pied de page ...

... on écrit aussi de gauche à droite ...
... sauf pour l'Arabe par exemple où nous pouvons indiquer le sens inverse ...
... pour l'écriture uniquement ...

... suivre la logique permet une lecture plus rapide ...
... cela facilite le travail d'un robot pour le référencement ...
... un ensemble de contraintes de départ qui permet la relecture du code ...
... cela facilite aussi l'autonomie ... évidemment ...

... toute mesure de base dans ... body ... a comme référence de départ ...
...  le coin supérieur gauche  ...
... et toute mesure dans un bloc particulier ... son coin supérieur gauche ...

... c'est avec le fichier style ... .css ... que l'on va pouvoir préciser la place des différents div ...
... voir le cours ...  alignement de blocs  ...
... voir aussi les cours ...  la place des blocs  ... dans une page web ...




La balise entete :

... la première d'entre elles est la balise ... de l'en-tête ...
...  <div id="entete"> ... balise entrante ... et ...
... </div> ... 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 ...

... Il ne faut pas la confondre avec la balise ... <head> ...
... on ne répéte pas l'id dans la balise sortante ... </div> ...

... dans la balise d'entrée, ... id ... permet de lié ce menu à son style ...
... qui se trouve dans le fichier .css ...

... nous avons une explication complète de la ...  création d'un en-tête  ...
... nous pouvons voir ...  la structure  ... ci-dessous ... ainsi que le dessin ...




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

... nous savons que le menu peut être à gauche, ... à droite, ... voire être horizontal ...
... nous verrons comment s'y prendre pour le réaliser ... grâce aux  CSS 2.0  ...
... et expliqué ... dans le chapitre sur la ...  création d'un site web  ...

... dans la balise d'entrée, ... id ... permet de lié ce menu à son style ...
... qui se trouve dans le fichier .css ...

... nous avons une explication complète de la ...  création d'un menu  ...
... nous pouvons voir ...  la structure  ... ci-dessous ... ainsi que le dessin ...




La balise corps :

... la troisième balise ... toujours dans l'ordre ... est celle du corps ...
... <div id="corps"> ... la balise entrante ... et ...
...</div> ... la balise sortante ...

... c'est la zone qui prend le plus d'espace ...

... dans la balise d'entrée, ... id ... permet de lié ce menu à son style ...
... qui se trouve dans le fichier .css ...

... nous avons une explication complète de la ...  création d'un corps  ...
... nous pouvons voir ...  la structure  ... ci-dessous ... ainsi que le dessin ...




La balise pied_de_page :

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

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

... dans la balise d'entrée, ... id ... permet de lié ce menu à son style ...
... qui se trouve dans le fichier .css ...

... nous avons une explication complète de la ...  création d'un pied de page  ...
... nous pouvons voir ...  la structure  ... ci-dessous ... ainsi que le dessin ...





Deuxième structure ... div :


... les petits points entre les balises simulent la place des textes ... d'images ... etc. ...
... nous donnerons des exemples lorsque nous auront les balises suivantes ...
... qui sont indispensables pour présenter du travail propre ...

... le style pour chacune de ces balises se définit dans ... la feuille de style ... externe ...  en CSS 2.0  ...



Un dessin :

... revenons à notre premier schéma (dessin) pour revoir le cadre général ...

 Figure 2. 

 DOCTYPE     ( : XHTML 1.0 transitional. )

 <html>  : la page complète

 <head>  : partie invisible

 </head>  : sortie de la partie invisible

 <body>  : partie visible
 <En-tête> 

... logo ...

 </En-tête> 

---- menu horizontal supplémentaire ---

 <Menu> 

















 </Menu> 

 <Corps> 

Titre















 </Corps> 

---- menu horizontal supplémentaire ---

 <Pied de page>             ...Copyright ...
 </Pied de page> 
 </body>  : sortie de la partie visible
 </html>  : sortie de la page complète

... nous avons la page entière ... avec les quatre zones ...
... partie visible du fichier html ...
... dans le fichier complet de cette page ...
... avec la partie invisible dans head et le doctype ...



Menu horizontal :


... dans le dessin ci-dessus, ... on voit les deux menus horizontaux ...

... les deux menus horizontaux supplémentaires se placent dans body ...
... le premier ... entre l'en-tête et le menu vertical ...
... le second ... entre le corps et le pied de page ...

... ils ont leur propre style ... totalement indépendant ...
... voir ...  la construction d'un menu horizontal  ...

... voir également la ...  place du menu horizontal  ...





Remarques sur div :


... cette balise ...div ... est une balise générique ou généraliste, elle n'a pas d'utilisation précise ...
... elle a nécessairement besoin d'un attribut ... id ... ou bien ... class ... ou ... style ... cette dernière étant peu utilisée car traitée dans la feuille de style (CSS 2.0) ...
... cette balise est utilisée essentiellement pour entourer un bloc, dans lequel vont se placer les éléments p, h, img, etc. ...
... lorsqu'on utilise ... class ... et ... id ... ensembles ...
... le ... class ... sera le nom pour la feuille de style css ...
... et le ... id ... sera le nom pour un lien hypertexte ... par exemple ...
(... nous étudions le style dans le ... cours CSS 2.0 ...)

... la balise ...div ... est toujours utilisée pour définir un bloc dans lequel il y aura plusieurs paragraphes ou une insertion d'une vidéo, d'une musique, etc ... le tout en combinaison ...
... prenons l'exemple de notre ...   page d'acceuil   ... en cliquant sur son on/off ... (les boutons à droite) ...
... nous arrivons dans une imbrication de ce genre de blocs ...

... ces balises seront simplifiées dans le futur ... avec le ...HTML 5 ...
... elles redeviendraient ... <menu> ... la balise entrante ... et </menu> ... la balise sortante ... comme exemple ...
... car elles existaient comme telles dans l'ancien html 2 ...
... ceci n'est pas encore totalement définitif ... nous en parlerons bientôt ...


... 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 
  un autre menu horizontal ... celui des pages du cours et du site ... entre le corps et le pied de page  

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