Images are a great way to add visual appeal to your website, but sometimes you may want to add more context to the image by including a caption. Captions are useful for providing additional information about the image, giving credit to the source, or simply adding a bit of humor. In this article, we will discuss how to post a caption under an image in HTML.
The first step is to add an image to your HTML file. You can do this by using the tag and providing the source URL for the image. For example:
Step 2: Create a Caption
To create a caption, we will use the
Alapértelmezés szerint a képaláírás közvetlenül a kép alatt jelenik meg. A képaláírást azonban stilizálhatja, hogy vizuálisan vonzóbbá tegye. A CSS segítségével beállíthatja a felirat betűméretét, színét és pozicionálását. Here is an example:
figure {
position: relative;
} }
figcaption {
position: absolute;
bottom: 0;
background-color: rgba(0, 0, 0, 0, 0.7);
color: #fff;
padding: 10px;
width: 100%;
font-size: 18px;
}
Ebben a példában a feliratot az ábra aljára pozicionáltuk abszolút pozicionálással. Félig átlátszó fekete hátteret is adtunk a felirathoz, hogy jobban kiemelkedjen.
Miután hozzáadta a képet és a feliratot, fontos, hogy tesztelje a kódot, hogy megbizonyosodjon arról, hogy minden megfelelően működik. Töltse be a HTML-fájlt egy webböngészőbe, és ellenőrizze, hogy a kép és a felirat is helyesen jelenik-e meg.
Összefoglalva, a képek feliratának hozzáadása hozzáadott értéket adhat weboldalának azáltal, hogy kontextust vagy további információkat nyújt a képpel kapcsolatban. Ha követi ezeket az egyszerű lépéseket, könnyedén készíthet képaláírásokat a képekhez HTML-ben, és a weboldal megjelenéséhez és hangulatához igazíthatja őket.
A képek alá képaláírások elhelyezése egyszerű folyamat, amelyet az Ön által használt platformtól vagy szoftvertől függően többféleképpen is elvégezhet. Íme néhány általános lépés, amelyet érdemes követni:
1. Nyissa meg a dokumentumot vagy fájlt, amely a képet tartalmazza, amelyhez feliratot szeretne hozzáadni.
2. Helyezze a kurzort a kép alá, ahol a feliratot szeretné megjeleníteni.
3. Írja be a felirat szövegét.
4. Jelölje ki a feliratszöveget, és formázza azt a kívánt módon, például a betűtípus, a méret, a szín vagy a stílus megváltoztatásával.
5. Ha el akarja különíteni a feliratot a képtől, vonalat vagy keretet adhat köré, vagy beállíthatja a távolságot.
6. Mentse el a módosításokat.
Ha egy adott platformot vagy szoftvert használ, például Microsoft Word, Google Docs vagy Adobe Photoshop, akkor több lehetőség és funkció áll rendelkezésére a képek alatti feliratok hozzáadásához. A Microsoft Wordben például a „Felirat beillesztése” eszközzel automatikusan számozhatja és címkézheti a feliratokat, vagy az „Alt szöveg” opciót használhatja, hogy képeit a látássérült olvasók számára hozzáférhetőbbé tegye. A Google Dokumentumokban szintén használhatja a „Felirat beillesztése” eszközt, vagy hozzáadhat egy szövegdobozt a felirattal. A Photoshopban hozzáadhat egy szövegréteget, vagy a „Type Mask Tool” eszközzel létrehozhat szöveget magában a képen belül.
HTML-ben felirat hozzáadásához használhatja a „caption” címkét. Ez a tag egy táblázat feliratának meghatározására szolgál. Az alábbiakban ismertetjük a HTML-ben történő felirat hozzáadásának lépéseit:
1. Nyissa meg a HTML-fájlt egy szövegszerkesztővel.
2. Keresse meg azt a táblázatot, amelyhez feliratot szeretne hozzáadni.
3. Adja hozzá a „caption” címkét a táblázat címke előtt.
4. A „caption” címkén belül adja hozzá a feliratként használni kívánt szöveget.
5. Zárja be a „caption” címkét.
Íme egy példa arra, hogyan adhatunk feliratot egy táblázathoz HTML-ben:
„`
| Főcím 1 | Főcím 2 |
|---|---|
| 1. sor, 1. oszlop | 1. sor, 2. oszlop |
| 2. sor, Column 1 | Row 2, Column 2 |
„`
A fenti példában a „caption” címkével a „This is the table caption” feliratot adjuk a táblázathoz.
Szöveg HTML alá helyezéséhez a HTML-ben a „paragraph” címkét használhatja. Az alábbiakban ismertetjük, hogyan adhatunk szöveget a HTML alá a paragraph tag használatával:
1. Nyissa meg a HTML-fájlt egy szövegszerkesztővel vagy HTML-szerkesztővel.
2. Határozza meg azt a részt, ahová a szöveget be kívánja illeszteni.
3. Adja hozzá a szakasz elejére a „
” nyitó bekezdéscímkét.
4. Írja be a hozzáadni kívánt szöveget.
5. Adja hozzá a „
” záró bekezdéscímkét a szakasz végére.
Ha például a HTML-fejléc alá az „Üdvözöljük a weboldalunkon” szöveget szeretné hozzáadni, akkor a következő kódot használhatja:
„`
Weboldalunk
Köszöntöm a weboldalunkon
„`
Ezzel a HTML-fejléc alá hozzáadjuk az „Üdvözöljük a weboldalunkon” szöveget. A paragraph taggel hasonló módon bármilyen szöveget hozzáadhat a HTML alá.
A kép alatti szöveget általában „képaláírásnak” nevezik. A képaláírás egy rövid leírás vagy magyarázat, amely egy képet kísér, és további kontextust biztosít a néző számára. A képaláírásokat gyakran használják a média különböző formáiban, többek között a nyomtatott, a digitális és a közösségi médiában. Egy vállalkozás működtetésével összefüggésben a képaláírások hozzáadása a marketinganyagokban, például a hirdetésekben, a közösségi média posztokban és a promóciós anyagokban található képekhez segíthet az elkötelezettség növelésében és abban, hogy több információt nyújtson a potenciális ügyfeleknek. Ezenkívül a képaláírások felhasználhatók a kép forrásának feltüntetésére, illetve a képhez kapcsolódó szerzői jogok vagy védjegyek elismerésére.