Comment ajouter des images à vos pages Web HTML5 et CSS3 - Les nuls

Chaque fois que vous explorez le Web, vous êtes confronté à des tonnes d'images sur presque toutes les pages HTML5 et CSS3 que vous visitez. Généralement, les images sont utilisées de quatre façons sur les pages Web:

Lien externe: La page contient du texte avec un lien incorporé. Lorsque l'utilisateur clique sur le lien, l'image remplace la page dans le navigateur Web. Pour créer une image liée de l'extérieur, créez simplement un lien ordinaire, mais pointez vers un fichier image plutôt que vers un fichier HTML (HyperText Markup Language).
Images incorporées: L'image est intégrée dans la page. Le texte de la page circule généralement autour de l'image. C'est le type d'image le plus courant sur le web.
Images d'arrière-plan: Une image peut être utilisée comme arrière-plan pour toute la page ou pour une partie spécifique de la page. Les images nécessitent généralement une manipulation spéciale pour les rendre utilisables en arrière-plan.
Puces personnalisées: CSS vous permet d'affecter une petite image à une puce pour une liste ordonnée ou non ordonnée. Cela vous permet de créer n'importe quel type de marqueur de liste personnalisé que vous pouvez dessiner.

Comment créer un lien vers une image

Le moyen le plus simple d'incorporer des images est de les lier. Jetez un oeil à l'image externe. page html.

Le code de la page n'est pas beaucoup plus qu'un simple lien:

image externe. html

Liaison à une image externe

Susan B. Constante

La fonction href pointe vers un fichier image, pas une page HTML. Vous pouvez pointer vers n'importe quel type de fichier que vous voulez dans une balise d'ancrage. Si le navigateur connaît le type de fichier, le navigateur affiche le fichier. Si le navigateur ne connaît pas le format de fichier, l'ordinateur de l'utilisateur essaie d'afficher le fichier en utilisant le programme qu'il utilise normalement pour ouvrir ce type de fichier.

Cela fonctionne très bien pour la plupart des images car l'image est affichée directement dans le navigateur.

Vous pouvez utiliser cette astuce avec n'importe quel type de fichier, mais les résultats peuvent être très imprévisibles. En général, sauvegardez cette astuce pour les formats très courants, comme GIF et JPG.

La plupart des navigateurs redimensionnent automatiquement l'image en fonction de la taille du navigateur. Cela signifie qu'une image volumineuse peut sembler plus petite qu'elle ne l'est réellement, mais l'utilisateur doit toujours attendre que l'image entière soit téléchargée.

Comme il s'agit d'une référence relative, l'image indiquée doit être dans le même répertoire que le fichier HTML. Lorsque l'utilisateur clique sur le lien, la page est remplacée par l'image.

Les liens externes sont faciles à créer, mais ils ont quelques problèmes:

Ils ne prévoient pas l'image. L'utilisateur n'a que la description textuelle pour comprendre ce que l'image pourrait être.
Ils interrompent le flux. Si la page contient une série d'images, l'utilisateur doit continuer à quitter la page pour voir les images.
L'utilisateur doit sauvegarder pour revenir à la page principale. L'image ressemble à une page Web, mais ce n'est pas le cas. Aucun lien ou autre texte explicatif dans l'image n'indique comment revenir à la page Web. La plupart des utilisateurs savent cliquer sur le bouton Précédent du navigateur, mais ne supposent pas que tous les utilisateurs savent quoi faire.

Comment ajouter des images en ligne à l'aide de la balise

L'alternative à la fourniture de liens vers des images consiste à intégrer vos images dans la page.

Le code montre comment cette image a été incluse dans la page:

embeddedImage. html

La Susan B. Constant

La Susan B. Constant était le vaisseau amiral de la flotte de trois petits navires qui ont amené les colons à Jamestown, la première colonie anglaise du nouveau monde. Ceci est une réplique logé près de Jamestown, en Virginie.

Le tag d'image est l'étoile de cette page. Cette balise vous permet de saisir un fichier image et de l'incorporer directement dans la page. La balise d'image est une balise one-shot. Cela ne finit pas avec. Au lieu de cela, utilisez les caractères à la fin de la définition pour indiquer que cette balise n'a pas de contenu.

Vous avez peut-être remarqué que Susan B. La constante s'écrit en italique dans la page utilisée pour obtenir cet effet. signifie emphase, et signifie emphase forte. Par défaut, tout texte d'une paire est en italique et le texte est en gras. Vous pouvez changer ce comportement avec CSS.

src (source)

L'attribut src vous permet d'indiquer l'URL de l'image. Cela peut être une référence absolue ou relative. La liaison à une image dans votre propre structure de répertoires est généralement la meilleure car vous ne pouvez pas être sûr qu'une image externe sera toujours présente lorsque l'utilisateur accède à la page.

height et width

Les attributs height et width sont utilisés pour indiquer la taille de l'image. Le navigateur utilise ces informations pour indiquer la quantité d'espace à réserver sur la page.

Les attributs height et width doivent décrire la taille d'une image. Vous pouvez utiliser ces attributs pour modifier réellement la taille d'une image, mais c'est une mauvaise idée. Changez la taille de l'image avec votre éditeur d'image. Si vous utilisez ces attributs, l'utilisateur doit attendre l'image complète, même si elle voit une version plus petite. Ne laissez pas l'utilisateur attendre des informations qu'elle ne verra pas.

alt (texte alternatif)

L'attribut alt vous donne l'opportunité de spécifier un autre texte décrivant l'image. Des informations textuelles alternatives sont utilisées lorsque l'utilisateur a des images désactivées et par des lecteurs d'écran. Les informations contenues dans les balises alt sont également utilisées dans les logiciels de recherche d'images tels que Google Images.

L'attribut alt est requis sur toutes les images.

De plus, la balise est une balise en ligne, elle doit donc être intégrée dans une balise au niveau du bloc.