Comment mettre une photo dans le titre d'une page Web

Le titre d'une page Web est le souvent la première chose un téléspectateur rencontres. En tant que tel, il sert à introduire le contenu de la page et peut présenter le style de l'ensemble du site Web. Une image peut être un grand atout pour le titre de votre page Web, augmenter le texte. Dans HyperText Markup Language (HTML), il ya deux façons dont vous pouvez intégrer des images dans votre titre.


Sommaire

  • L'image
  • Image comme arrière-plan
  • L'icône
  • Choses que vous devez

    • Image



    • logiciel de retouche d'image (facultatif)




    • programme de traitement de texte



    • Connaissance du HTML et CSS
    • Navigateur Web
    • Icône logiciel de conversion (en option)

    L'Image

    1. Obtenir ou concevoir une image dans un programme de retouche d'image. Si vous utilisez une image qui ne vous appartient pas, assurez-vous que vous avez la permission du droit d'auteur et de donner crédit à l'auteur. Si vous créez une icône, assurez-vous qu'il est de 16 pixels par 16 pixels et possède soit l'Ico d'extension ou .png.

    2. Assurez-vous que votre image ne rend pas le texte de votre page invisible si utilisé comme arrière-plan. Si votre texte est noir et vous avez l'intention de placer une image en dessous, assurez-vous que votre image est projeté de manière appropriée et pas trop sombre.

    3. Enregistrez votre image dans le même dossier que votre page Web.

    Image comme arrière-plan

    1. Ouvrez votre page Web dans un programme de traitement de texte. Assurez-vous d'utiliser le "Ouvrir Avec ..." fonction au lieu d'un double-clic sur le fichier HTML lui-même.

    2. Si vous voulez mettre une image derrière le titre de votre page dans la fenêtre du navigateur, vous aurez besoin pour le style de l'image appropriée. Même si cela peut être accompli au sein de votre code HTML, l'aide de feuilles de style en cascade (CSS) permet une plus grande flexibilité.

    3. En CSS, apporter des modifications à la balise body. Utilisez background-image pour spécifier l'image, background-repeat pour éteindre répétitions, et background-position pour spécifier la position de votre image. Par exemple:

      body {

       background-image: URL ("-yourimage.jpg "-)

      GO

       background-repeat: no-repeat

      GO

       background-position: 50% 0%

      GO

       }

      Les modifications background-position modifient la position de l'image par rapport à sa boîte de rembourrage. Ils sont répertoriés dans x%, y% pour. Dans cet exemple, l'image serait de 50% dans la boîte (en d'autres termes, en son centre) et 0% en bas de la boîte (à son sommet).

    4. Ouvrez votre page Web dans un navigateur Web et assurez-vous que vos affichages d'image comme vous le souhaitez. Apportez toutes les modifications nécessaires à votre HTML et CSS.

    L'icône

    1. Afin de créer une icône qui ira à côté de votre titre dans l'onglet du navigateur Web (souvent appelé "favicon"), Vous devrez modifier le tag de votre HTML. Ouvrez votre page Web dans un programme de traitement de texte.

    2. Si votre icône est pas un fichier .ico, le convertir en un en utilisant l'icône logiciel de conversion.

    3. Dans le tag, insérer les mots suivants tag pour votre icône:

    » » » » Comment mettre une photo dans le titre d'une page Web