Historique des RSS

Création de sites web, formations et scripts js,
en coopération.

Safari 5.0 
... près pour :
  HTML 5  
pour PC et Mac.

QuickTime Player

Chrome 16

Explorer 9

Un © spécial :

Notre Serveur :

… nouveau compteur :

La Création d'un site web, introduction.

© LigneWeb ... Optimisé pour Safari, Chrome. ...  © : alain jean deligne     ... /création site web.

... cette partie demande la connaissance des ... cours XHTML  ... et des ...  cours CSS 2.0  ... merci ...

... une page d'un site web est ( nous l'avons vu au ... cours XHTML ) entouré de la balise ... body ... qui représente le bloc visible de la page ...

... le ... bloc body ... se situe lui-même à l'intérieur d'un bloc plus grand qui se nomme ... bloc html ... Ce dernier a également le ... bloc head ... à l'intérieur en première partie ... représentant la partie invisible ...
... c'est dans cette partie que l'on donne les renseignements indispensables ... pour permettre à la page web d'être sur l'écran de l'ordinateur ...

... à l'intérieur du bloc body, nous avons en général ... quatre zones ... l'en-tête, le menu, le corps, et le pied de page ...
... ces quatre zones sont quatre blocs ... se succédant dans l'ordre cité ici ... (cours XHTML)

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

… pour  l'écriture , on peut écrire de gauche à droite … mais aussi de droite à gauche … comme pour …  l'Arabe  … et autres …

… bloc … de gauche à droite sauf pour ... l'élément flottant ...
... qui sera toujours placé en premier, ... qu'il soit à gauche ou à droite ...
... un exemple qui est ...  l'image flottante à droite  ... placée en premier ...

... en regardant à gauche nous avons le ...bloc menu ... et à l'intérieur de celui-ci, nous avons des titres et de petits blocs biens distincts qui sont placés les uns sous les autres ...
... il y a ... imbrication de blocs ...

... dans chacun de ces petits blocs, il y a du texte, ... mais aussi des images ...
... parfois le bloc est lui-même une image, ou une petite banière ... ou bien, il y a un texte défilant dans l'un d'eux grâce à un petit script ... en JavaScript ...

... que je regardes chacun des blocs décrits ici, petits ou grands, ils ont une place ...
... cette place est ... logique ... dans la page code (X)HTML ...
... ➀ - le grand bloc ... body ... qui va englober tous les autres blocs ...
... ➁ - le bloc ... en-tête ... qui englobera le logo, le titre, une image, ...
... ➂ - le bloc ... menu ... qui englobera le menu, des publicités, et autres renseignements, ...
... ➃ - le bloc ... corps ... le plus grand qui englobera tous les éléments pour cette page ...
... ➄ - le bloc ... pied de page ... qui englobera le copyright, les éléments de contacts et autres renseignements légaux, ...

... tout le contenu concrêt de cette page sera placé sur ma page code (X)HTML en me servant des balises correctes ... et en tenant compte de l'ordre défini ci-dessus ... impérativement ...
... le navigateur lit de haut en bas, ... et si les premiers éléments sont le pied de page, il ne saura pas construire cela puisqu'il lui faut d'abord l'élément body ...
... où pourait-il placé le pied sans les informations de base ? ...

... il faut donner un nom à chacun des différents blocs pour pouvoir les repérer ...
... cela permettra de donner à chacun d'eux le style ... qui sera défini dans un fichier externe en CSS 2.0 (.css) ...
... voir les cours ... XHTML ... et ... CSS 2.0 ...

... le nom d'un bloc autre que body, en-tête, menu, corps et pied de page, se définira par son ... id="______" ...

... comment peut-on réaliser l'alignement de deux ou plus de blocs se trouvant l'un en dessous de l'autre ...

... c'est soit par leur marge à gauche ...
... soit par leur position dans un bloc plus important ...
... soit par ces deux réalités ensembles, ... car chaque bloc a ces marges ...

... la plus évidente est la position par rapport à un bloc plus important ...
... tel que le corps ou le menu ...
... il sera à gauche ... (left) ... avec sa marge gauche ...
... il sera centré ... (center) ... avec sa largeur identique ...
... il sera à droite ... (right) ... avec sa marge droite ...

... un dessin est à réaliser au préalable pour voir la disposition des différents éléments ...

... un premier schéma (dessin) d'abord pour fixer le cadre général ...

... on voit bien l'imbrication des différents blocs ...

... quand à la balise ... html ... elle englobe la partie invisible entourée de la balise ... head ... et du contenu de la balise ... body ... partie visible ... que nous venons de voir ...

... ne pas oublier que la balise ...html ... s'écrit dans le code avec une balise entrante et une balise sortante ...