La Création d'un site web, la partie visible.
© LigneWeb ... Optimisé pour Safari, Chrome. ... © : alain jean deligne ... /création site: contenu et style.
Partie visible d'une page web
... recherche sur ligneweb.net ...
Le contenu du site.
... un site web a un but qu'il est important de préciser, ... car de ce but va dépendre la manière de le présenter ...
... cette réflexion débouchera aussi sur le nombre de pages qu'il nous faut, ... sur la structure ou plan du site que nous allons construire, ...
... enfin, cela définirat les images, photos, vidéos éventuels qu'il faudra intégrer ...
... il nous faut au préalable une page d'acceuil ... indispensable ... dont le nom sera toujours ... index.html ...
... ce nom correspond au langage utilisé ici : le HTML ou le XHTML ...
... la srtucturation débouchera sur un menu ... avec peut-être un sous-menu ...
... la place du menu dépendra du contenu de notre première page ... mais pas seulement...
... il faut déjà penser aux autres pages, aux différents chapitres qui seront développés ...
... ce qui demande une préparation importante ... indispensable ... pour réaliser un beau site web ayant des qualités de compréhension, d'intelligence ... d'ergonomie ...
... il est donc intérressant de faire des projets sur papier avant de commencer l'encodage proprement dit ...
Côté pratique :
... maintenant nous allons voir … le placement des différents blocs ... dans le corps de la page ...
Plaçons un texte :
... nous pouvons placer dans un bloc un texte qui peut être aligné à gauche, au centre , à droite ou justifié ...
... nous savons que c'est le fichier extérieur qui s'occupe du style ...
... nous prenons un texte générique ... avec ...text-align: left; ...
... constitué de trois paragraphes ... entourés par les balises ... <p> ... et ... </p> ...
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce sit amet diam et wisi malesuada varius. Morbi erat velit, egestas ut, blandit sed, venenatis adipiscing, ipsum. Maecenas risus. Donec ac magna. Cras sed justo. Etiam et sem. Praesent euismod sem sit amet enim auctor pulvinar. Quisque nunc.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce sit amet diam et wisi malesuada varius. Morbi erat velit, egestas ut, blandit sed, venenatis adipiscing, ipsum. Maecenas risus. Donec ac magna. Cras sed justo. Etiam et sem. Praesent euismod sem sit amet enim auctor pulvinar. Quisque nunc.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce sit amet diam et wisi malesuada varius. Morbi erat velit, egestas ut, blandit sed, venenatis adipiscing, ipsum. Maecenas risus. Donec ac magna. Cras sed justo. Etiam et sem. Praesent euismod sem sit amet enim auctor pulvinar. Quisque nunc.
... nous avons donc trois paragraphes a inscrire dans le fichier ... .html ...
... c'est un bloc de textes qui va se noter ... <div class="texte5"> ...
... suivi des paragraphes : ... <p> ... du texte : ...
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce sit amet diam et wisi malesuada varius. Morbi erat velit, egestas ut, blandit sed, venenatis adipiscing, ipsum. Maecenas risus. Donec ac magna. Cras sed justo. Etiam et sem. Praesent euismod sem sit amet enim auctor pulvinar. Quisque nunc.
... suivi de la fermeture : ... </p> ...
... et ceci trois fois l'un à la suite de l'autre ...
... pour se terminer par la fermeture du bloc : ... </div> ...
... le style quand à lui va s'écrire dans la feuille de style séparée comme suit : ...
... le nom du bloc : ... .texte5 ... suivi de l'accollade ... { ... en ouverture ...
... la largeur ... width ... comme suit : ... width: auto; ... pour la souplesse ...
... la marge (extérieure) ... margin ... comme suit : ... margin: 5px; ...
... la marge (intérieure) ... padding ... comme suit : ... padding: 5px; ...
... la couleur du texte ... color ... comme suit : ... color: #000022; ...
... l'épaisseur de la bordure ... comme suit : ... border-width: 1px; ...
... le style de la bordure ... ... comme suit : ... border-style: inset; ...
... la couleur de la bordure ... ... comme suit : ... border-color: #33ffff; ...
... la couleur de fond du bloc ... comme suit : ... background-color: #3399bb; ...
... la taille de la police ... comme suit : ... font-size: 15px; ...
... et enfin, la fermeture de l'accollade ... comme suit : ... } ...
... structure :
... dans le fichier .html …
... dans le fichier .css …
Plaçons une image :
... nous allons prendre l'exemple de l'image ci-dessus à droite ...
... cette image va être placée à cette place avec un bloc ... div ...
... nous allons lui donner un nom grâce à ... class ... qui sera ... image1 ... par exemple ...
... cela deviens donc : ... <div class="image1"> ... suivi de l'image proprement dite ...
... <img src="ligne9.jpg" alt="ligne" title="Un logo de LignWeb.Net" /> ...
... suivi de la fermeture du bloc ... </div> ... très important ...
... comment faire pour que cette image se place à droite ? ...
... je vais le dire dans le fichier ...
style.css ... que j'ai appelé au préalable dans le ...
head ... avec la balise ...
link ...
... allez revoir le ...
cours d'introduction ... déjà donné ...
... nous y avons déjà placé d'autres éléments auxquels vont s'ajouter d'autres, dont celui-ci ...
... d'abord ... le nom : ... .image1 ... suivi de l'accollade ... { ...
... ensuite on va donné à ce bloc une marge (extérieure) ... margin: 5px; ...
... ensuite on la met à droite : ... float: right; ...
... on met une bordure : ... border: 1px; ...
... avec un style : ... border-style: inset; ... et une couleur : ... border-color: #00ccee; ...
... et enfin, on ferme l'accollade ... } ... qui cloture la partie ... css ...
... il ne faut pas oublier le point devant le nom image1 dans le css ...
... c'est grâce à l'attribut ... float ... que l'on peut placer le bloc et donc l'image ...
... le bloc ... div ... s'adapte exactement à l'image ... dans notre cas ...
... si notre image était trop grande pour la placée, ... on imposerait un ... width: 170px; ... par exemple ...
... cela réajusterait celle-ci dans les proportions désirées ... ...
... la marge, quand à elle permet de ne pas avoir l'image juste en bordure droite du corps ...
... structure :
... dans le fichier .html …
... dans le fichier .css …
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce sit amet diam et wisi malesuada varius. Morbi erat velit, egestas ut, blandit sed, venenatis adipiscing, ipsum. Maecenas risus. Donec ac magna. Cras sed justo. Etiam et sem. Praesent euismod sem sit amet enim auctor pulvinar. Quisque nunc.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce sit amet diam et wisi malesuada varius. Morbi erat velit, egestas ut, blandit sed, venenatis adipiscing, ipsum. Maecenas risus. Donec ac magna. Cras sed justo. Etiam et sem. Praesent euismod sem sit amet enim auctor pulvinar. Quisque nunc.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce sit amet diam et wisi malesuada varius. Morbi erat velit, egestas ut, blandit sed, venenatis adipiscing, ipsum. Maecenas risus. Donec ac magna. Cras sed justo. Etiam et sem. Praesent euismod sem sit amet enim auctor pulvinar. Quisque nunc.
... c'est un exemple ...
... nous voyons qu'après avoir placé l'image ... flotante à droite ... nous avons le titre (h3) ...
... il est aligné au centre de l'espace qui reste, à gauche de l'image ...
... il est suivit de 5 sauts de ligne ...
... une image se trouve sur ... une ligne d'écriture ... même si elle est plus haute que cela ...
... 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 ...
Plaçons une image dans le texte :
... mettons maintenant ... cette image dans le bloc texte ... et voyons ce que cela donne ...
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce sit amet diam et wisi malesuada varius. Morbi erat velit, egestas ut, blandit sed, venenatis adipiscing, ipsum. Maecenas risus. Donec ac magna. Cras sed justo. Etiam et sem. Praesent euismod sem sit amet enim auctor pulvinar. Quisque nunc.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce sit amet diam et wisi malesuada varius. Morbi erat velit, egestas ut, blandit sed, venenatis adipiscing, ipsum. Maecenas risus. Donec ac magna. Cras sed justo. Etiam et sem. Praesent euismod sem sit amet enim auctor pulvinar. Quisque nunc.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce sit amet diam et wisi malesuada varius. Morbi erat velit, egestas ut, blandit sed, venenatis adipiscing, ipsum. Maecenas risus. Donec ac magna. Cras sed justo. Etiam et sem. Praesent euismod sem sit amet enim auctor pulvinar. Quisque nunc.
... l'image est toujours à droite ... et le texte l'entoure ...
... structure :
... dans le fichier .html ... nous avons donc …
... dans le fichier .css …
... l'image est placée en premier ... c'est l'élément flotant ... elle est suivie du texte ...
... la lecture par le navigateur est plus rapide ... question de logique ...
... autre disposition de l'image :
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce sit amet diam et wisi malesuada varius. Morbi erat velit, egestas ut, blandit sed, venenatis adipiscing, ipsum. Maecenas risus. Donec ac magna. Cras sed justo. Etiam et sem. Praesent euismod sem sit amet enim auctor pulvinar. Quisque nunc.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce sit amet diam et wisi malesuada varius. Morbi erat velit, egestas ut, blandit sed, venenatis adipiscing, ipsum. Maecenas risus. Donec ac magna. Cras sed justo. Etiam et sem. Praesent euismod sem sit amet enim auctor pulvinar. Quisque nunc.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce sit amet diam et wisi malesuada varius. Morbi erat velit, egestas ut, blandit sed, venenatis adipiscing, ipsum. Maecenas risus. Donec ac magna. Cras sed justo. Etiam et sem. Praesent euismod sem sit amet enim auctor pulvinar. Quisque nunc.
... l'image est a gauche ... et le texte l'entoure ... avec ... float: left; ...
Plaçons un tableau et du texte :
... nous allons placer un tableau à ... gauche ... dans le corps et un bloc texte à ... droite ... de celui-ci ...
... nous avons donc deux blocs mis l'un à côté de l'autre ...
... le premier qui aura pour nom ... class="tableau1" ... et le second ...class="texte1" ... ...
... nous prenons un des tableaux du ...
cours 7 ... il était centré ...
... avec une partie de son style intégrée dans la balise ...
table ... comme suit ...
...
<table border="0" cellspacing="1" width="30%"> ... pour rappel ...
... et cela nous donne dans le concret …
| Aqua |
Blue |
Fuschia |
| Grey |
Green |
Lime |
| Maroon |
Navy |
Olive |
| Purple |
Red |
Silver |
| Teal |
White |
Yellow |
| AliceBlue |
Lavender |
Black |
... si nous voulons le placer à gauche, ... nous utiliserons l'attibut ... float: left; ... dans le fichier ... style.css ...
... ce qui nous donne ...
... d'abord son nom : ... .tableau1 ... suivi de l'accollade : ... { ...
... ensuite, la marge (extérieure) : ... margin: 5px; ...
... une marge (intérieure) : ... padding: 5px; ...
... ensuite sa situation : float: left; ...
... je lui impose une largeur : ... width: 250px; ...
... une couleur de fond (pas nécessaire : ... backgroung-color: #3399bb; ...
... et pour finir, la fermeture de l'accollade : ... } ...
... les mesures sont à ... l'intérieur du bloc corps ... cela nous donne donc ...
... et cela nous donne dans le concret …
| Aqua |
Blue |
Fuschia |
| Grey |
Green |
Lime |
| Maroon |
Navy |
Olive |
| Purple |
Red |
Silver |
| Teal |
White |
Yellow |
| AliceBlue |
Lavender |
Black |
... Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce sit amet diam et wisi malesuada varius. Morbi erat velit, egestas ut, blandit sed, venenatis adipiscing, ipsum. Maecenas risus. Donec ac magna. Cras sed justo. Etiam et sem. Praesent euismod sem sit amet enim auctor pulvinar. Quisque nunc.
... Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce sit amet diam et wisi malesuada varius. Morbi erat velit, egestas ut, blandit sed, venenatis adipiscing, ipsum. Maecenas risus. Donec ac magna. Cras sed justo. Etiam et sem. Praesent euismod sem sit amet enim auctor pulvinar.
... pour le placer à côté du bloc tableau ... nous allons utiliser : ...
... margin: 5px; ... suivi de ... margin-left: 300px; ...
... la marge (extérieure) du bloc par rapport au bord gauche du ... corps ... (ici) ...
... le bloc tableau lui aussi a sa marge (extérieure) gauche par rapport au bord gauche du ...corps ...
... nous avons le nom : ... .texte5 ... suivi de l'ouverture de l'accollade ... { ...
... la marge (extérieure) : ... margin: 5px; ...
... avec l'écartement extérieur gauche : ... margin-left: 300px; ...(à l'intérieur de body) ...
... la marge intéreiure pour le texte : ... padding: 5px; ...
... la largeur du bloc : ... width: auto; ... pour pouvoir s'adapter ...
... la couleur de fond : ... background-color: #3399bb; ...
... la couleur du texte : ... color: #000033; ...
... et l'alignement du texte : ... text-align:left; ...
... et pour finir, la fermeture de l'accollade : ... } ...
... nous avons donc pour le fichier ... .html ... ces deux blocs successifs ...
... le premier bloc ... <div class="tableau1"> ... suivi du tableau ...
... et qui se termine par ... </div> ...
... ensuite le deuxième bloc ... <div class="texte1"> ... suivi du texte ...
... et qui se termine par ... </div> ... auquel on ajoute un espace ... <br /> ...
... il ne faut pas d'espace entre les deux blocs contigus pour qu'ils soient sur le même niveau ...
... structure :
... dans le fichier .html …
... dans le fichier .css …
... on voit que l'on peut faire beaucoup de mises en pages différentes en travaillant sur le style uniquement ...
![[Valid RSS]](valid-rss-rogers.png "Validate my RSS feed")
