ഒരു ഇമേജ് ചുറ്റും ടെക്സ്റ്റ് റാപ്പിംഗ് എങ്ങനെ

ഏത് വെബ് പേജും നോക്കുക, നിങ്ങൾ വാചക ഉള്ളടക്കവും ഇമേജറിയും ചേർത്ത് കാണും. ഒരു വെബ്സൈറ്റിന്റെ വിജയത്തിലെ അവശ്യ ഘടകങ്ങൾ ഇവ രണ്ടും കൂടിയാണ്. ടെക്സ്റ്റ് ഉള്ളടക്കം സൈറ്റ് സന്ദർശകരുടെ വായിക്കുന്നതും അവരുടെ റാങ്കിംഗ് അൽഗോരിതംസിന്റെ ഭാഗമായി എന്തു തിരയൽ എഞ്ചിനും ഉപയോഗപ്പെടുത്തുമെന്നതാണ് . ചിത്രങ്ങൾ സൈറ്റിലെ ദൃശ്യാനുഭവങ്ങൾ ചേർക്കുകയും ടെക്സ്റ്റ് ഉള്ളടക്കം ആയാസത്തിന് സഹായിക്കുകയും ചെയ്യും.

വെബ്സൈറ്റുകളിലേക്ക് ടെക്സ്റ്റുകളും ഇമേജുകളും ചേർക്കുന്നത് എളുപ്പമാണ്. ഖണ്ഡികകളും തലക്കെട്ടും ലിസ്റ്റുകളും പോലുള്ള സ്റ്റാൻഡേർഡ് HTML ടാഗുകൾക്കൊപ്പം പാഠം ഇമേജിൽ ഘടകം ഉപയോഗിച്ച് ഒരു പേജിൽ സ്ഥാപിക്കുന്നു. എന്നിരുന്നാലും, നിങ്ങളുടെ വെബ് പേജിൽ നിങ്ങൾ ഒരു ചിത്രം ചേർത്തുകഴിഞ്ഞാൽ, ചിത്രത്തിന് അടുത്തുള്ള ടെക്സ്റ്റ് ഫ്ലോ ആഗ്രഹിക്കുന്നതായിരിക്കും, അത് ചുവടെ അലൈൻ ചെയ്യുന്നതിന് പകരം (ഇത് HTML കോഡിലേക്ക് ചേർത്ത ഒരു ഇമേജ് ബ്രൗസറിൽ റെൻഡർ ചെയ്യും). സാങ്കേതികമായി, നിങ്ങൾ CSS (ശുപാർശ ചെയ്തത്) അല്ലെങ്കിൽ HTML- ൽ നേരിട്ട് ദൃശ്യ നിർദ്ദേശങ്ങൾ ചേർത്ത് (ശുപാർശചെയ്യാത്തത്, നിങ്ങളുടെ വെബ്സൈറ്റിനായുള്ള സ്റ്റൈലും ഘടനയും വേർതിരിച്ചെടുക്കാൻ ആഗ്രഹിക്കുന്നതിനാൽ) ഉപയോഗിച്ച് ഈ രൂപത്തെ നിങ്ങൾക്ക് നേടാനാകുന്ന രണ്ട് മാർഗങ്ങളുണ്ട്.

CSS ഉപയോഗിക്കുന്നു

പേജിന്റെ ടെക്സ്റ്റും ഇമേജുകളും ലേഔട്ട്, ബ്രൌസറിൽ ദൃശ്യമാകുന്ന അവരുടെ ദൃശ്യ ശൈലി എന്നിവ CSS- ലൂടെ മാറുന്നതിനുള്ള ശരിയായ മാർഗ്ഗം. ഓർക്കുക, നമ്മൾ ഒരു വിഷ്വൽ മാറ്റം പേജിൽ സംസാരിക്കുന്നതിനാൽ (ഒരു ചിത്രത്തിനു ചുറ്റും ടെക്സ്റ്റ് ഫ്ലോ), ഇത് സൂചിപ്പിക്കുന്ന സ്റ്റൈൽ ഷീറ്റുകളുടെ ഡൊമെയ്ൻ എന്നാണ്.

1. ആദ്യം, നിങ്ങളുടെ ചിത്രം നിങ്ങളുടെ വെബ് പേജിൽ ചേർക്കുക. ആ HTML ൽ നിന്ന് ഏതെങ്കിലും ദൃശ്യഘടകങ്ങൾ (വീതിയും ഉയരവും മൂല്യങ്ങൾ പോലെ) ഒഴിവാക്കാൻ ഓർക്കുക. ഇത് പ്രധാനപ്പെട്ടതാണ്, പ്രത്യേകിച്ച് പ്രതികരിക്കുന്ന വെബ്സൈറ്റിൽ , ഇമേജ് വലുപ്പം ബ്രൗസറിനെ അടിസ്ഥാനമാക്കി വ്യത്യസ്തമായിരിക്കും. അഡോബ് ഡ്രീംവൈവറേ പോലെയുള്ള ചില സോഫ്റ്റ്വെയർ, ആ ടൂളിലേക്ക് ചേർക്കപ്പെട്ട ചിത്രങ്ങളിലേക്ക് വീതിയും ഉയരവും വിവരങ്ങളുമായി ചേർക്കും, അതിനാൽ ഈ വിവരങ്ങൾ HTML കോഡിൽ നിന്ന് നീക്കംചെയ്യുന്നത് ഉറപ്പാക്കുക! എന്നിരുന്നാലും, അനുയോജ്യമായ ഇതര വാചകം ഉൾപ്പെടുത്തുന്നതിന് ഉറപ്പാക്കുക. നിങ്ങളുടെ HTML കോഡ് എങ്ങനെ കാണപ്പെടുമെന്നതിന്റെ ഒരു ഉദാഹരണം ഇതാ:
2. സ്റൈൽ ആവശ്യകതകൾക്ക്, നിങ്ങൾക്ക് ഒരു ഇമേജിലേക്ക് ഒരു ക്ലാസ് ചേർക്കാനും കഴിയും. ഈ ക്ലാസ് മൂല്യം നമ്മുടെ സി.എസ്.എസ്. ഫയലിൽ ഉപയോഗിക്കും. ഞങ്ങൾ ഇവിടെ ഉപയോഗപ്പെടുത്തുന്ന മൂല്യം ഏകപക്ഷീയമാണ്, എന്നിരുന്നാലും, ഈ പ്രത്യേക രീതിയിൽ നമുക്ക് "ഇടത്" അല്ലെങ്കിൽ "വലതുവശം" എന്ന മൂല്യങ്ങൾ ഉപയോഗിക്കാം. ലളിതമായ സിന്റാക്സ് നന്നായി പ്രവർത്തിക്കുകയും ഭാവിയിൽ ഒരു സൈറ്റ് മാനേജ് ചെയ്യേണ്ട മറ്റ് കാര്യങ്ങൾക്ക് എളുപ്പമാക്കുകയും ചെയ്യുന്നതായി ഞങ്ങൾ കാണുന്നു, എന്നാൽ നിങ്ങൾക്ക് ആവശ്യമുള്ള ഏതെങ്കിലും ക്ലാസ് മൂല്യം നിങ്ങൾക്ക് നൽകാം.
   2. സ്വയം ഈ ക്ലാസ് മൂല്യം ഒന്നും തന്നെ ചെയ്യില്ല. ചിത്രം വാചകത്തിന്റെ ഇടതുഭാഗത്തായി സ്വയമായി ക്രമീകരിക്കപ്പെടില്ല. ഇതിനായി ഇപ്പോൾ നമ്മൾ നമ്മുടെ CSS ഫയലിൽ തിരിയണം.

1. നിങ്ങളുടെ ശൈലിയിൽ, നിങ്ങൾക്ക് ഇപ്പോൾ ഇനിപ്പറയുന്ന ശൈലി ചേർക്കാം:
   1. .ഇടത്തെ {
   2. ഫ്ലോട്ട്: ഇടത്;
   3. പാഡിംഗ്: 0 20px 20px 0;
   4. }
   5. നിങ്ങൾ ഇവിടെ ചെയ്ത കാര്യമാണ് CSS "float" പ്രോപ്പർട്ടി ഉപയോഗിക്കുന്നത് , സാധാരണ ഡോക്യു പ്രവാഹത്തിൽ നിന്ന് (ഇമേജ് സാധാരണയായി പ്രദർശിപ്പിക്കുന്ന രീതി, അതിന്റെ താഴെ ചേർത്തിരിക്കുന്ന വാചകം) ചിത്രം വലിച്ചിടും, അത് അതിന്റെ കണ്ടെയ്നറിന്റെ ഇടതുവശത്തേക്ക് അതിനെ അലൈക്കും ചെയ്യും . അതിനുശേഷം HTML മാപ്പപ്പിൽ ഇപ്പോൾ വരുന്ന വാചകം അതിനനുസൃതമായി എഴുതുക. ഈ ടെക്സ്റ്റ് നേരിട്ട് ചിത്രത്തിനെതിരെ നേരിട്ട് വരില്ല എന്നതിനാൽ ഞങ്ങൾ ചില പാഡിംഗ് മൂല്യങ്ങളും ചേർത്തു. പകരം, പേജിന്റെ രൂപകൽപ്പനയിൽ വിഷ്വലൈസായി ദൃശ്യമാകുന്ന ചില നല്ല സ്പെയ്സിംഗ് ഉണ്ടാകും. പാഡിംഗിനുള്ള CSS ഷോർട്ട് ഹാൻഡിൽ, ഇമേജിന്റെ മുകളിലത്തെ ഇടത്തേക്കും, ഇടതുവശത്തേക്കും 20 പിക്സൽസിലേക്കും ഞങ്ങൾ 0 മൂല്യങ്ങൾ ചേർത്തു. ഓർമ്മിക്കുക, നിങ്ങൾ ഇടത് ക്രമീകരിച്ച ഇമേജിന്റെ വലതുഭാഗത്തേക്ക് ചില പാഡിംഗ് ചേർക്കണം. വലത് വിന്യസിച്ചിരിക്കുന്ന ഇമേജ് (ഒരു നിമിഷ നേരം നോക്കാം) പാഡിംഗ് ഇടത് വശത്ത് പ്രയോഗിക്കും.
2. ഒരു ബ്രൗസറിൽ നിങ്ങളുടെ വെബ്പേജ് നിങ്ങൾ കാണുകയാണെങ്കിൽ, നിങ്ങളുടെ ഇമേജ് പേജിന്റെ ഇടതുവശത്തായി വിന്യസിച്ചിരിക്കുന്നതായി കാണാം, കൂടാതെ വാചകം അതിനെ പുരോഗതിയിലാണ്. ഇത് പറയാൻ മറ്റൊരു മാർഗം ആ ചിത്രം "ഇടതുവശത്തേക്ക് ഉയർത്തിയിരിക്കുന്നു" എന്നതാണ്.

1. ഈ ഇമേജ് വലതുവശത്ത് വിന്യസിക്കാൻ നിങ്ങൾ ആഗ്രഹിക്കുന്നുവെങ്കിൽ (ഈ ലേഖനത്തിൽ ഒരുമിച്ച് ഫോട്ടോ ഉദാഹരണം പോലെ), അത് ലളിതമായിരിക്കും. ഒന്നാമത്, നിങ്ങൾ "CSS" ന്റെ ക്ലാസ് മൂല്യത്തിനായുള്ള ഞങ്ങളുടെ CSS- ലേക്ക് ചേർത്തിരുന്ന സ്റ്റൈലിനു പുറമേ, വലതു-വിന്യാസത്തിനായി ഒന്നിനേയും ഞങ്ങൾ ഉൾക്കൊള്ളുന്നു. ഇത് ഇതുപോലെ കാണപ്പെടും:
   1. സത്യം.
   2. ഫ്ലോട്ട്: വലത്;
   3. പാഡിംഗ്: 0 0 20px 20px;
   4. }
   5. ഞങ്ങൾ എഴുതിയ ആദ്യത്തെ CSS ന് ഇത് ഏതാണ്ട് സമാനമാണെന്നത് നിങ്ങൾക്ക് കാണാം. ഒരേയൊരു വ്യത്യാസം മാത്രമാണ് "float" property ഉം padding മൂല്യങ്ങൾക്കുമുള്ള ഉപയോഗവും (വലതുഭാഗത്തിനു പകരം ഞങ്ങളുടെ ചിത്രത്തിന്റെ ഇടതുഭാഗത്തേക്ക് ചേർക്കുന്നു).
2. അവസാനമായി, ഇമേജിന്റെ ക്ലാസിന്റെ മൂല്യം "HTML" ൽ നിന്ന് "ഇടത്" നിന്നും "വലത്"
3. ഇപ്പോൾ നിങ്ങളുടെ ബ്രൗസറിൽ പേജ് നോക്കുക, നിങ്ങളുടെ ഇമേജ് വലതുഭാഗത്തായി വൃത്തിയാക്കുക. ഞങ്ങൾ വെബ് താളുകൾ സൃഷ്ടിക്കുമ്പോൾ ആവശ്യമുള്ളത്രയും ഈ വിഷ്വൽ ശൈലികൾ ഉപയോഗിക്കാം, അങ്ങനെ ഈ സ്റ്റൈലുകൾ, "ഇടത്", "വലത്" എന്നീ ഞങ്ങളുടെ ശൈലികൾ ചേർക്കാറുണ്ട്. ഈ രണ്ട് ശൈലികളും മനോഹരവും, വീണ്ടും ഉപയോഗിക്കാവുന്നതുമായ സവിശേഷതകളായി മാറിയിരിക്കുകയാണ്. നമുക്ക് ചുറ്റുമുള്ള വാചകങ്ങളുപയോഗിച്ച് നമുക്ക് ചിത്രശൈലികൾ ആവശ്യമായി വരുമ്പോൾ.

എന്തിനുവേണ്ടിയാണ് CSS- ന്റെ പകരം HTML ഉപയോഗിക്കുന്നത് (എന്തുകൊണ്ട് നിങ്ങൾ ഇത് ചെയ്യാൻ പാടില്ല)

HTML ഉപയോഗിച്ച് ഒരു ഇമേജ് ചുറ്റുമെടുക്കുന്ന ഒരു വാചകം ചെയ്യാൻ കഴിയുമെങ്കിലും വെബ് സ്റ്റാൻഡേർഡുകൾ CSS (കൂടാതെ മുകളിൽ പറഞ്ഞിരിക്കുന്ന പടികൾ) നിർവ്വഹിക്കുവാനുള്ള മാർഗ്ഗമാണ്. അതിനാൽ നമുക്ക് ഘടന (HTML), സ്റ്റൈൽ (CSS) എന്നിവ വേർതിരിച്ചെടുക്കാൻ കഴിയും. ചില ഉപകരണങ്ങൾക്കും ലേഔട്ടുകൾക്കുമായി, ഈ ചിത്രത്തിന് ചിത്രത്തിനുചുറ്റും ഒഴിയേണ്ട ആവശ്യമില്ലെന്ന് നിങ്ങൾ കരുതുമ്പോൾ ഇത് വളരെ പ്രധാനമാണ്. ചെറിയ സ്ക്രീനുകൾക്കായി, പ്രതികരിക്കുന്ന വെബ്സൈറ്റിന്റെ ലേഔട്ട്, ടെക്സ്റ്റിന് തീർച്ചയായും ഇമേജിനകത്ത് വിന്യസിക്കുന്നുവെന്നും ചിത്രം മുഴുവൻ സ്ക്രീനിന്റെ വീതി നീട്ടണമെന്നും ആവശ്യമുണ്ട്. നിങ്ങളുടെ ശൈലികൾ നിങ്ങളുടെ HTML മാർക്കപ്പിൽ നിന്ന് വ്യത്യസ്തമാണെങ്കിൽ ഇത് മീഡിയ ചോദ്യങ്ങൾ ഉപയോഗിച്ച് എളുപ്പത്തിൽ ചെയ്യാം. ഇന്നത്തെ മൾട്ടി-ഡിവൈസ് ലോകം, ചിത്രങ്ങളും ടെക്സ്റ്റും വ്യത്യസ്ത സന്ദർശകർക്കും വ്യത്യസ്ത സ്ക്രീനുകളിലും വ്യത്യസ്തമായി ദൃശ്യമാവുന്നതാണ്, ഈ വേർപാട് ഒരു വെബ് പേജിന്റെ ദീർഘകാല വിജയത്തിനും മാനേജ്മെന്റിനും അത്യന്താപേക്ഷിതമാണ്.