Guide HTML du débutant (8)

Images incorporées dans des lignes
La plupart des navigateurs Web peuvent afficher des images au format X-bitmap (XBM), GIF ou JPEG (c'est-à-dire des images adjacentes au texte) intégrées dans des lignes. [par exemple, format Portable Network Graphic (PNG)]. Chaque image prend du temps de traitement et ralentit l'affichage du document. Choisissez soigneusement les images de votre document et le contexte des images

contient une image intégrée. une ligne, saisissez :


ALT="FORWARD" HEIGHT=32 WIDTH=32> est l'URL du fichier image.

Le format de syntaxe des URL est le même que le format utilisé par la chaîne d'ancrage HREF Si le fichier image est un fichier GIF, le fichier. une partie du nom de l'image doit se terminer par .gif. Les fichiers au format bitmap X doivent se terminer par .xbm ; les fichiers image JPEG doivent se terminer par .jpg ou .jpeg ; les fichiers Portable Network Graphic doivent se terminer par .png. Attribut de taille de l'image
Dans la balise , vous devez inclure deux autres attributs pour informer le navigateur de la taille de l'image en cours de téléchargement avec le texte. Les attributs HEIGHT et WIDTH permettent au navigateur de laisser un espace approprié (pixels). ) pour l'image lors du téléchargement du reste du fichier. (Vous pouvez obtenir la taille en pixels à partir de votre logiciel de traitement d'image tel qu'Adobe Photoshop.)

Par exemple, pour inclure un portrait de vous-même dans le fichier, saisissez :


ALT="AVANT" HEIGHT=32 WIDTH=32> : Lorsque la taille de l'image n'est pas cohérente avec la taille de la description de l'attribut, certains navigateurs utilisent les attributs HEIGHT et WIDTH pour agrandir ou réduire une image afin de la rendre adaptée à l'espace alloué. Tous les développeurs de navigateurs ne sont pas d'accord avec l'agrandissement/la réduction des images. supposez que vos lecteurs pourront utiliser cette fonctionnalité lors de la planification. Il est préférable de vérifier la taille de l'image et d'utiliser la bonne taille

Positionnement de l'image
Vous disposez d'une certaine flexibilité dans la façon dont les images sont affichées. Vous pouvez séparer les images du texte, placer les images à gauche, à droite ou au milieu. Vous pouvez également séparer les images et le texte. Le texte est sur la même ligne. Vous pouvez essayer différentes formes pour voir laquelle fonctionne le mieux

Faire l'image et le texte sur la même ligne
Par défaut le bas de l'image et le texte suivant sont affichés sur la même ligne, tout comme Le paragraphe actuel. Vous pouvez également placer l'image en haut ou au milieu d'un paragraphe en définissant la valeur de l'attribut ALIGN= sur TOP ou CENTER.

Ce texte est sur la même ligne que le haut de l'image ( Notez qu'une seule ligne de texte est comme ça, les autres lignes). sauter au bas de l'image.

Cette ligne de texte est affichée au milieu de l'image (). est affiché au milieu et les autres lignes sont en dessous de l'image

Image sans texte
Si vous souhaitez afficher une image sans texte (par exemple, le logo de votre organisation), affichez-la simplement sous forme de texte. paragraphe séparé. Utilisez l'attribut ALIGN= de la balise paragraphe Ajustez l'image au milieu ou sur le côté droit de la fenêtre, comme indiqué ci-dessous :

Le résultat est :

L'image est affichée au milieu ; le paragraphe commence en dessous à gauche. >
Texte alternatif pour l'image
Certains navigateurs du World Wide Web - principalement ceux fonctionnant sur les terminaux VT100 - ne peuvent pas afficher les images. Certains utilisateurs désactivent le téléchargement d'images même si leur logiciel peut afficher des images (surtout s'ils sont sur un ordinateur). utilisateur de modem ou de ligne à bas débit). HTML fournit un mécanisme permettant aux lecteurs de savoir ce qui manque dans la page qu'ils consultent. L'attribut

ALT vous permet de spécifier un texte qui peut être affiché sur place. d'une image. Par exemple :


ALT="" HEIGHT=48 WIDTH=50>

où UpArrow.gif est une flèche vers le haut. Dans les navigateurs avec des capacités d'affichage d'images et de téléchargement d'images activées, vous verrez une flèche vers le haut. Dans le navigateur VT100 ou lorsque le téléchargement d'images est désactivé, le mot Up apparaîtra dans votre fenêtre

Vous devez utiliser un texte de remplacement pour chaque image qui apparaît dans votre document. 🎜>
Image d'arrière-plan
Les versions plus récentes des navigateurs Web peuvent télécharger une image à utiliser comme arrière-plan lors de l'affichage d'une page d'accueil. Certaines personnes aiment utiliser des arrière-plans. Généralement, si vous souhaitez inclure un arrière-plan, vous n'aimez pas. vous voulez vous assurer que votre texte peut toujours être lu clairement sur l'arrière-plan.

L'image d'arrière-plan peut être un objet en tissu (comme du papier de lin) ou une image (peut-être un logo). comme n'importe quelle autre image.

Mais il vous suffit de créer une très petite image. Le navigateur utilisera une fonctionnalité appelée mosaïque pour afficher l'image à plusieurs reprises, remplissant ainsi toute la fenêtre du navigateur. En termes simples, vous générez simplement une image et le navigateur le fera automatiquement plusieurs fois jusqu'à ce qu'il remplisse votre fenêtre. Cette action est effectuée automatiquement lorsque vous utilisez la balise décrite ci-dessous.

La balise contenant l'image de fond est incluse en tant qu'attribut dans la description de la balise  :



Couleur d'arrière-plan
Par défaut, les navigateurs affichent le texte en noir sur fond gris. Cependant, vous pouvez les modifier. Certains auteurs HTML choisissent une couleur d'arrière-plan associée au changement correspondant. couleur du texte.

Assurez-vous de vérifier à l'avance si ce changement est toujours facile à lire (Par exemple, de nombreuses personnes utilisent du texte rouge sur fond noir, ce qui est très difficile à lire !)

Grâce aux différents attributs de la balise , vous pouvez modifier la couleur du texte, des liens, des liens consultés et des liens actifs. Par exemple, saisissez :



créera une fenêtre avec un fond noir (BGCOLOR), du texte blanc (TEXT) et des hyperliens argentés (LINK). > Une combinaison à six chiffres de chiffres et de lettres représente la couleur, qui donne la valeur RVB (rouge, vert, bleu) d'une certaine couleur. Ce nombre à six chiffres est en fait trois nombres à deux chiffres disposés en séquence, représentant le point de départ. . Valeurs hexadécimales des proportions de rouge, vert et bleu de 00 à FF. Par exemple, 000000 signifie noir (aucune couleur), FF0000 est rouge vif et FFFFFF est blanc (les trois couleurs sont saturées). La signification de ces combinaisons de chiffres et de lettres est ambiguë. Heureusement, il existe une ressource en ligne qui peut vous aider. Comprendre la relation entre les différentes combinaisons et couleurs :

Serveur Web ColorPro
Images, sons et animations externes
Vous souhaiterez peut-être savoir quand l'utilisateur active un mot ou une petite image dans votre document Lors de la création un lien, ouvrez une image en tant que document séparé. C'est ce qu'on appelle une image externe et est utile lorsque vous ne souhaitez pas ralentir la vitesse de téléchargement du document principal en raison d'une image volumineuse. un lien vers une image externe, saisissez :

ancre de lien

Vous pouvez également utiliser Une petite image qui fait office de lien vers une image plus grande. Entrez :

HEIGHT=48 WIDTH=50>

Les lecteurs voient l'image SmallImage.gif et cliquent dessus pour ouvrir le fichier LargerImage.gif

Utilisez la même syntaxe pour les liens Animations et sons externes. la seule différence est l'extension du fichier lié. Par exemple,

link Anchor 🎜> Ce qui précède est le contenu du Guide du débutant HTML (8). Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !