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 4 XHTML  - balise a  - structure des liens  / balise img  - Image de fond  / Formats jpeg, gif et png 



Cours 4 XHTML : liens et images



 © LigneWeb  ... /liens hypertextes-image.
© design : LigneWeb
© : alain jean deligne - LigneWeb
Le logo de LigneWeb

Des liens et des images


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 




Des liens hypertextes.

... dans une page web, vous voyez régulièrement des mots surlignés ... qui permettent d'aller sur un site, ...
... ou d'aller sur une autre page au travers du menu, ... ou bien d'avoir accès à d'autres objets : ...
... une vidéo, une image, ... etc. ... ce sont des ... liens hypertextes ...

... il y a donc deux principaux types de liens hypertextes : ... ceux internes au site ...
... avec l'adresse interne ... qui est le chemin pour y arriver ...
... et ceux externes aux site ... on met le lien avec l'autre site en se servant de son nom internet ...
... ce que l'on appelle l'adresse internet qui commence par ... http:// ... etc ...

La balise a :

... la balise permettant un lien avec un autre site est ..
... <a> ... la balise entrante ...
...</a> ... la balise sortante ...
... entre ces deux balises , on placera le nom du site concerné ... qui apparaîtra en surligné ...

... mais à y regarder de plus près , comment indiquer l'adresse ... ?
... c'est dans la balise entrante a que l'on va écrire cette adresse ... en faisant comme ceci : ...
...  <a href="http://www.ligneweb.net"> ... qui permet de réaliser la connexion ...
... il y a donc ... href ... suivi de ... = ... suivi de ..."..." ...les guillemets encadrant ...
... l'adresse du site web qui est proposée à être consulté ... et le ... > ...
... suivi bien évidemment de ...  </a> ... avec le nom du site entre les deux ...

... ligneweb.net ... est un exemple qui me servira dans toutes les explications par après ...

... pour faire le lien avec une autre page du site, ... on utilise les mêmes balises ...
... avec ... href="....." ... l'adresse étant le nom de la page que l'on veut atteindre ...

... nous pouvons faire un lien à l'intérieur de la page ...
... dans ce cas, ... on utilise une ... ancre ... ajouté au nom de la page grâce à son nom ...
... précédé du signe ...   #   ...



La structure des liens hypertextes :

Lien avec un autre site :
Lien avec une autre page :
Lien dans la même page avec une ancre que je nomme ... menu :
... ici on recharge la page ... et n'est pas utilisé ...
... sauf pour une remise à jour ... de la page ...
... ou plus simplement, dans la même page pour : menu :
... ici on ne recharge pas la page ...

... pour l'ancre, il faut préciser l'endroit de retour sur la page ...
... prenons l'exemple du retour au menu pour montrer l'ancrage ...
... il se fera dans la balise entrante du menu ... <div id="menu"> ...
... l'exemple que vous pouvez voir se trouve sur cette page ... et le résultat est instructif ...

  ➽  ➽  ➽    Retour au menu 



... nous voyons immédiatement qu'il faut utiliser ... id="....." ...
... pour que le nom de l'ancre soit lue par le navigateur ... le chemin lui est montré par le nom ...

... le code pour le : menu :
... c'est dans title que l'on écrit le texte ... ...

... dans ce cas présent on place un changement de style ... pour la souris ...
... pour la transformation de la flèche lors du passage de celle-ci sur le lien ...
... avec style="cursor:nw-resize" ... une flèche orientée ...nord-ouest ... (vers le haut gauche) ...
... avec style="cursor:w-resize" ... une flèche orientée ... ouest (à gauche) ...
... avec style="cursor:e-resize" ... une flèche orientée ... est (à droite) ...
... avec style="cursor:s-resize" ... une flèche orientée ... sud (vers le bas) ...
... toutes les combinaisons sont possibles ...
... on peut le voir en ...  bas de page  ... pour ... page précédante ...

... à l'intérieur de la balise a ... on va placer un attribut ... title ...
... qui va permettre de préciser la nature du lien ... et qui s'écrira comme suit ...
... title="le site ligneweb.net" ... par exemple ...

Nouvelle structure :


... cet attribut ... title ... est indispensable pour respecter le ... xhtml ....
... il permet d'inscrire dans la petite fenêtre ... l'objet du lien ... lorsque l'on place la souris sur le lien ...
... vous pouvez l'expérimenter sur le lien pour le retour au menu ci-dessous ...

  ➽  ➽  ➽    Retour au menu 




Le placement d'une image.

La balise img :

... pour illustrer un texte, on fait appel à une image ...image qui se trouve au même niveau que la page html...
... ou qui se trouve dans un dossier consacré aux images ...
... il faudra donc la faire venir grâce à un lien hypertexte ...
... la balise est ... <img....... /> ...

... il nous faut une image se situant dans un dossier nommé ... Image ... (par exemple) ...
... la balise utilisée est une balise unique ... et se déclare :
... <img src="Image/image2.jpg" /> ... (voir remarque) ...
... le lien s'établis par ... src ... suivi du chemin ...
... ce chemin est soit direct ... image2.jpg, ... soit indirect comme ici ... Image/image2.jpg ...

... une image peut avoir ou être un lien hypertexte elle-même, comme un mot ou une adresse peut l'être ...
... pour avoir l'image, nous faisons ... <img src="Image/image2.jpg" /> ...
... pour le lien avec cette image (image2.jpg) allant vers le copyright, par exemple : ...
… il faut encadrer cette image avec la balise de lien hypertexte … ( voir l'exemple ci-dessous ) ...

... la place de l'image ... est abordée à la ...  création d'un site web  ...





... en cliquant sur l'image, vous êtes dirigé sur la page expliquant le © ...
... il existe un attribut ... alt ... servant à décrire l'image ...
... cet attribut est considéré comme essentiel pour les mal voyants ...
... ils ont une lecture orale avec leur ordinateur …
… la phrase de description claire sera mise avec ...
... alt="Une image représentant la forêt" … ( exemple ) ...

... si on veut faire apparaître l'information dans une info-bulle ... on ajoute l'attribut ... title ...
... comme utilisé pour le lien hypertexte ...
... il n'y a que cette information ci qui apparaît ...
... l'attribut ... alt ... ne permet pas l'apparition visuelle du texte ...



Une image de fond.

... l'image de fond peut se placer dans ... body ...
... elle peut aussi se placer dans un bloc ... div ...
... pour pouvoir réaliser cette action, on ne peut le faire ...
... que dans la feuille de style externe CSS ...
... voir les explications au ...  cours css  ...


Construction d'une image de fond :

... une image de fond peut prendre la totalité de la page du navigateur ...
... si nous ouvrons le navigateur en plein écran, ... l'image de fond devra être de la taille de celle-ci ...
... sur grand écran cela est à étudié ... car le poids de l'image joue un rôle sur le temps d'ouverture ...

... il faudra donc définir la place dans l'espace, et compléter le vide par un fond différent ...

... prenons l'exemple du site ...  de Furnis  ... comme exemple ...
... il y a une image de fond entourée par un fond spécial qui complète celle-ci pour le plein écran ...
... l'image de fond est chargée une première fois et reste sur le cache du navigateur ...
... cela facilite l'accès aux autres pages ...

Réalisation d'un fond uniforme :

... le fond ... toile de jute ... de cette page est réalisé à partie d'un petit carré de base ...
... qui sera reproduit dans les deux directions : en x et en y ...

... cela se réalise dans le fichier .css ... au niveau de body ... donc au niveau du style ...

Structure CSS :


... nous avons ici les images de fond de notre site web : ...

- les fleurs en haut à gauche ... sans répétition ...
- le logo de LigneWeb à gauche et 70% en hauteur en partant du haut...
- les fleurs en haut à droite ... sans répétition ...
- les fleurs en bas à droite ... sans répétition ...
- le carré fond en toile ... que l'on répète en x et en y ... pour le fond uniforme ...

... elles sont toutes fixées ...






Fortmats jpeg, gif et png.

... pour le web, les images doivent être les plus légères possibles ...
... il faut donc les compresser, ... et pour cela on les enregistre en ... JPEG, ... en ... GIF, ...
... ou en ... PNG ... qui est le dernier format ...

Le format GIF

... le format GIF est limité à 256 couleurs et est réservé aux icônes, ...
... aux images animées et aux dessins simples ...

Le format JPEG

... le format JPEG accepte plus de 16 millions de couleurs ... et les niveaux de gris ...
.. il est réservé pour les photos et les graphismes aux nombreuses couleurs ...

Le format PNG

... le format PNG est encore plus complet que les deux autres ...
... il prend les vraie couleurs d'une photo ou d'un graphisme, ainsi que les niveaux de gris ...

... en XHTML, la manière d'écrire le nom des images se fait en minuscules ...
... par exemple : ... image1.jpg ... image2.gif ... image3.png ...

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

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