Tout ce que le visiteur voit sur les pages du site est affiché par le navigateur sur la base d'instructions détaillées qui lui sont envoyées par le serveur. Ces instructions sont appelées le code html de la page et sont constituées de "balises" distinctes qui décrivent le type, l'apparence et l'emplacement de chaque élément individuellement. Pour placer un nouvel élément (par exemple, une image) dans une page, vous devez ajouter une instruction correspondante - une balise - à son code source. Considérez la façon la plus simple de le faire.
Instructions
Étape 1
Si vous utilisez n'importe quel type de système de gestion de contenu, il est très probable qu'il inclue un éditeur de page. Tout d'abord, vous devez ouvrir la page souhaitée dans cet éditeur. De plus - des options sont possibles. Dans le meilleur des cas, l'éditeur de pages disposera d'un "mode visuel", autrement dit - "mode WYSIWYG" (What You See Is What You Get - "ce que vous voyez est ce que vous obtenez"). Dans ce mode, vous n'aurez pas du tout besoin de vous occuper du code html d'origine ! La page dans l'éditeur aura la même apparence que sur le site, il suffira de passer la souris à l'endroit souhaité et d'appuyer sur le bouton "insérer une image" sur le panneau de l'éditeur.
Étape 2
En conséquence, une boîte de dialogue s'ouvrira dans laquelle vous devrez sélectionner l'image souhaitée. Si vous ne l'avez pas encore téléchargé, il existe également un bouton pour sélectionner une image sur votre ordinateur et la télécharger sur le serveur. De plus, dans cette boîte de dialogue, vous pouvez définir la couleur et la largeur du cadre autour de l'image, la distance et la couleur du remplissage entre le cadre et l'image, le texte de l'info-bulle. Il n'est pas nécessaire de spécifier les dimensions ici, mais pour des raisons d'accélération du chargement des pages et pour éviter une distorsion du design, il est toujours préférable de le faire. Lorsque tous les champs obligatoires de la boîte de dialogue sont remplis, cliquez sur "OK", puis enregistrez la page modifiée.
Étape 3
En raison du fait qu'il n'y a pas de norme unique pour les systèmes de contrôle, la procédure d'insertion d'une image dans le mode visuel de votre système peut différer légèrement, mais le principe sera le même. Pour la même raison, le mode WYSIWYG peut ne pas apparaître dans le système de gestion de votre site. Ensuite, il vous reste à éditer le code source de la page en HTML (HyperText Markup Language - "hypertext markup language"). Vous devrez insérer une balise au bon endroit dans le code qui indique au navigateur d'afficher l'image ici. Dans sa forme la plus simple, cela devrait ressembler à ceci: Voici "l'adresse relative" de l'image - à cette adresse, le navigateur doit contacter le serveur pour en récupérer le fichier image. Si l'adresse est relative, le navigateur supposera que le fichier se trouve dans le même dossier du serveur que la page elle-même (ou dans un sous-dossier). Mais, pour ne pas se tromper, il est préférable de spécifier "l'adresse absolue" - par exemple, comme ceci: Naturellement, pour que le serveur trouve et envoie l'image au navigateur, elle doit être téléchargée vers le lieu. Le moyen le plus simple de le faire est d'utiliser le gestionnaire de fichiers, qui se trouve dans chaque système de gestion de contenu, ainsi que dans le panneau de contrôle de votre société d'hébergement. Vous pouvez également le faire en utilisant le protocole FTP (File Transfer Protocol - "file transfer protocol"), en utilisant un programme spécial - FTP-client. Il y en a beaucoup, à la fois payants et gratuits - par exemple, Cute FTP, FlashFXP, WS FTP, etc. Mais, bien sûr, l'installation, la maîtrise et la configuration du programme prendront du temps, donc un gestionnaire de fichiers pour télécharger tout ce dont vous avez besoin via un navigateur est une option plus simple.
Étape 4
En plus de l'adresse dans la balise html de l'image, vous pouvez spécifier des informations supplémentaires - "attributs" de la balise. Par exemple, l'attribut alt="Image" contient le texte de l'info-bulle qui apparaît lorsque vous passez le curseur de la souris sur l'image: Il peut être remplacé par l'attribut - title: - La taille du rectangle dans lequel le navigateur doit l'affichage de l'image est défini par les attributs width et height: - L'attribut border spécifie la largeur de la bordure autour de l'image (en pixels): Si l'image est constituée d'un lien, le navigateur dessinera une bordure bleue autour d'elle. Pour s'en débarrasser, définissez la valeur de la bordure sur zéro: - Les deux autres attributs contiennent des informations sur la quantité d'indentation de l'image à partir des éléments adjacents (des lignes de texte, d'autres images, etc.) - hspace définit la taille de la indentation horizontale (gauche et droite), vspace - verticalement (bas et haut):
