അതിന്റെ ചിത്രത്തോടെയുള്ള ഒരു വെബ് അടിക്കുറിപ്പ് ചേർക്കുക

9 ലളിതമായ ഘട്ടങ്ങളിൽ വെബ് ഇമേജുകളിലേക്ക് HTML അടിക്കുറിപ്പുകൾ ചേർക്കുക

ചിത്രങ്ങൾ നിങ്ങളുടെ വെബ്പേജുകളിലേക്ക് ജീവസുറ്റതാക്കുകയും കാഴ്ചക്കാരെ ശ്രദ്ധിക്കുകയും ചെയ്യുക. നിങ്ങളുടെ വെബ് ഇമേജുകളെ കുറിച്ചുള്ള അധിക വിവരങ്ങൾ അടിക്കുറിപ്പുകൾ നൽകുന്നുണ്ട്, പക്ഷേ വിപുലീകരിച്ച എച്ച്ടിഎംഎൽ, CSS കഴിവുകൾ കൂടാതെ വെബ്പേജുകളിലേയ്ക്ക് ചേർക്കാൻ ബുദ്ധിമുട്ടാണ്. ഒരു വെബ്പേജിൽ നിങ്ങൾ എവിടെയായിരുന്നാലും അത് ചിത്രത്തിൽ നിൽക്കുന്ന ഒരു ഇമേജിലേക്കുള്ള ലളിതമായ, ആകർഷണീയമായ, അടിക്കുറിപ്പ് ചേർക്കുന്നതിനുള്ള ഒരു വിശ്വസനീയ രീതിയാണ്.

ഒരു HTML ചിത്രത്തിന്റെ തലക്കെട്ട് 9 വഴികൾ

ഒരു ചിത്രത്തിലേക്ക് ഒരു അടിക്കുറിപ്പ് ചേർത്ത് നിങ്ങൾക്കാവശ്യമുള്ളയിടത്തേക്ക് അവ നീക്കുക:

1. നിങ്ങളുടെ വെബ്പേജിൽ ഒരു ചിത്രം ചേർക്കുക .
2. നിങ്ങളുടെ വെബ്പേജിലെ HTML ൽ, ഇമേജിനുചുറ്റും ഒരു ഡൈഗ് ടാഗ് സ്ഥാപിക്കുക:
3. ഡിഗ് ടാഗിന് സ്റ്റൈൽ ആട്രിബ്യൂട്ട് ചേർക്കുക:
   style = "" >
4. ഡിവിഡിയുടെ വീതി, ചിത്രത്തിലെ അതേ വീതിയിലേക്ക്, വീതി സ്റ്റൈൽ സ്വഭാവം : width: image width px; ">
5. ചുറ്റുപാടുമുള്ള ടെക്സ്റ്റിനേക്കാൾ ചെറുതായിട്ടുള്ള അടിക്കുറിപ്പുകൾക്കായി, div ശൈലിയിലേക്ക് ഫോണ്ട് സൈസ് പ്രോപ്പർട്ടി ചേർക്കുക:
   ഫോണ്ട്-വലിപ്പം: 80%; ">
6. ചിത്രത്തിന് ചുവടെ കേന്ദ്രഭാഗങ്ങൾ കേന്ദ്രീകരിച്ചിട്ടുണ്ടെങ്കിൽ, ശീർഷകങ്ങൾ മികച്ചതായി കാണപ്പെടുന്നതിനാൽ ശൈലി ആട്രിബ്യൂട്ടിന് ഒരു ടെക്സ്റ്റ് അലൈൻ മൂല്യം ചേർക്കുക:
   ടെക്സ്റ്റ്-ഏജിൻ: സെന്റർ; "> < img src = "URL" alt = "ഇതര ടെക്സ്റ്റ്" width = "width" height = "height" />
7. അവസാനം, പാഡിംഗ്-ബേസ് രീതിയിൽ ഉള്ള ചിത്രവുമായി ഒരു ശൈലി ആട്രിബ്യൂട്ട് ചേർത്തുകൊണ്ട് ഇമേജിനും തലവാചകത്തിനും ഇടയിൽ അൽപ്പം അധിക സ്ഥലം ചേർക്കുക:
   style =" padding-bottom: 0.5em; " />

1. അപ്പോൾ നേരിട്ട് ചിത്രത്തിന് താഴെ കൊടുത്തിരിക്കുന്ന വാചകം അടിക്കുറിപ്പ് ചേർക്കുക:
   ഇത് എന്റെ തലവാചകമാണ്

നിങ്ങളുടെ സെർവറിലേക്ക് വെബ് പേജ് അപ്ലോഡുചെയ്ത് ബ്രൗസറിൽ അത് പരീക്ഷിക്കുക.

അടിക്കുറിപ്പ് നുറുങ്ങുകൾ

• വീതികളും : CSS അളവുകൾ വ്യത്യസ്ത അളവുകളിലൂടെ ആകാം, അതിനാൽ നിങ്ങൾ സാധാരണയായി അളവെടുപ്പ് തരം ഉൾപ്പെടുത്തണം. ഉദാഹരണത്തിന്: വീതി: 100 പിക്സ് ; എന്നിരുന്നാലും, HTML ഇമേജ് അളവുകൾ എല്ലായ്പ്പോഴും പിക്സലുകൾ ആണ്, അതിനാൽ നിങ്ങൾ അളക്കുന്നത് നിർത്തുക. വീതി = "100"
• ഇമേജ് വീതിയേക്കാൾ വിസ്തൃതമായ ഡിവിഡിൻറെ വീതി വരുത്തിയെങ്കിൽ, ഇമേജിന് പുറത്ത് അടിക്കുറിപ്പ് ദൃശ്യമാകാം. ഇതാണ് നിങ്ങൾക്ക് ആവശ്യമെങ്കിൽ, ഒരു അടിക്കുറിപ്പിന്റെ മുമ്പും ഒരു ഇമേജ് ടാഗിന് മുമ്പും നേരിട്ട് ഒരു ടാഗ് ചേർക്കുക.