ഞങ്ങൾ വെബ് പേജിലേക്ക് ചിത്രങ്ങളും വീഡിയോയും ഓഡിയോയും ചേർക്കുന്നു! ഒരു വെബ് പേജിലേക്ക് ഒരു ഗ്രാഫിക് ഫയൽ ചേർക്കുന്നു
ഈ ലേഖനം നിങ്ങൾക്ക് ഉപയോഗപ്രദമാകുമെന്ന് ഞങ്ങൾ പ്രതീക്ഷിക്കുന്നു. സന്തോഷകരമായ വായന!
തന്നിരിക്കുന്ന സൈറ്റോ ലേഖനമോ നമുക്ക് എത്രത്തോളം രസകരമാണെന്ന് ചിത്രങ്ങൾ തൽക്ഷണം മനസ്സിലാക്കാൻ അനുവദിക്കുന്നു, അവ ഒരു മാനസികാവസ്ഥ സൃഷ്ടിക്കുന്നു, കൂടാതെ അവർക്ക് ഒരു വിഷയം പുതിയ രീതിയിൽ വെളിപ്പെടുത്താനും കഴിയും. ചിലപ്പോൾ ഒരു ഫോട്ടോയ്ക്ക് ആയിരം വാക്കുകൾ മതിയാകും.
എന്നാൽ നിങ്ങൾക്ക് ഇൻസ്റ്റാഗ്രാമോ ഓൺലൈൻ സ്റ്റോറോ ഇല്ലെങ്കിൽ നിങ്ങൾ അവയിൽ പങ്കെടുക്കരുത്. ചിത്രങ്ങൾ എടുക്കുന്നത് ഉചിതമാണ്:
വിജ്ഞാനപ്രദമായിരുന്നു
നിങ്ങളുടെ സൈറ്റിൻ്റെ വർണ്ണ സ്കീമുമായി പൊരുത്തപ്പെടുത്തുക
ഉചിതമായിരുന്നു
നിങ്ങൾക്ക് അനുയോജ്യമായ ഒരു ഫോട്ടോ ഇല്ലെങ്കിൽ, നിങ്ങൾക്ക് വിളിക്കപ്പെടുന്നവ ഉപയോഗിക്കാം ഫോട്ടോസ്റ്റോക്ക്
(ഫോട്ടോബാങ്ക്) - നിരവധി ഫോട്ടോഗ്രാഫുകൾ, ചിത്രീകരണങ്ങൾ, വെക്റ്റർ ഗ്രാഫിക്സ് എന്നിവ സംഭരിച്ചിരിക്കുന്ന സ്ഥലം. അത്തരം ധാരാളം ഉറവിടങ്ങളുണ്ട്, നിങ്ങൾ ഏറ്റവും വലിയ ഷട്ടർസ്റ്റോക്കിനെക്കുറിച്ച് പോലും കേട്ടിരിക്കാം, പക്ഷേ അവിടെയുള്ള ഡൗൺലോഡുകൾ പണമടച്ചുള്ളതാണ്.
അമിതമായി പണമടയ്ക്കാൻ ഇഷ്ടപ്പെടാത്തവർക്കായി, ലേഖനത്തിൻ്റെ അവസാനം ഞങ്ങൾ തയ്യാറാക്കിയിട്ടുണ്ട് ബോണസ്- നിങ്ങൾക്ക് ഉയർന്ന നിലവാരമുള്ള മനോഹരമായ മെറ്റീരിയലുകൾ തികച്ചും സൗജന്യമായി ഡൗൺലോഡ് ചെയ്യാൻ കഴിയുന്ന നിരവധി ഫോട്ടോ ബാങ്കുകളുടെ ഒരു ലിസ്റ്റ് :)
ഇമേജ് ഫോർമാറ്റുകൾ
വേൾഡ് വൈഡ് വെബിൽ പ്രധാനമായും 3 തരം ചിത്രങ്ങളാണ് ഉപയോഗിക്കുന്നത്:
gif(ഗ്രാഫിക്സ് ഇൻ്റർചേഞ്ച് ഫോർമാറ്റ് - ഇമേജ് എക്സ്ചേഞ്ച് ഫോർമാറ്റ്)
ഇൻ്റർനെറ്റിൽ ഉപയോഗിക്കാൻ തുടങ്ങിയ ആദ്യത്തെ ഫോർമാറ്റാണിത്. ഈ ഫോർമാറ്റിൻ്റെ പ്രയോജനങ്ങൾ ലഭ്യതയാണ് ആനിമേഷനുകൾചെറിയ വലിപ്പവും, പേജ് വേഗത്തിൽ ലോഡ് ചെയ്യുന്നു. കൂടാതെ, ഇത് സുതാര്യതയെ പിന്തുണയ്ക്കുന്നു. പോരായ്മ - മാത്രം ഉപയോഗിച്ചു 256 നിറങ്ങൾ(അതുകൊണ്ടാണ് യഥാർത്ഥത്തിൽ വലിപ്പം ചെറുത്), അതായത്. പൂർണ്ണ വർണ്ണ ചിത്രങ്ങൾക്കായി ഇത് ഉപയോഗിക്കാൻ കഴിയില്ല.
jpeg, അല്ലെങ്കിൽ jpg(ജോയിൻ്റ് ഫോട്ടോഗ്രാഫിക് വിദഗ്ധ സംഘം - സംയുക്ത ഫോട്ടോഗ്രാഫിക് വിദഗ്ധ സംഘം -ഇതാണ് വികസന സംഘടനയുടെ പേര്)
പൂർണ്ണ വർണ്ണവും ഉയർന്ന നിലവാരമുള്ളതുമായ ചിത്രങ്ങൾ സൃഷ്ടിക്കാൻ അനുയോജ്യം, ഫോട്ടോകൾ. അത്തരം ചിത്രങ്ങളുടെ വലുപ്പം വലുതാണ്, അതിനാൽ അവ സാധാരണയായി സെർവറിൽ ഒരു വലിയ ലോഡ് സ്ഥാപിക്കുന്നു. നിങ്ങൾക്ക് ഒരു jpeg കംപ്രസ് ചെയ്യണമെങ്കിൽ (ഒരു ചെറിയ ഇമേജ് ഭാരത്തിന്), അന്തിമ ചിത്രത്തിൻ്റെ വലുപ്പം എടുക്കാൻ ഞങ്ങൾ ശുപാർശ ചെയ്യുന്നു എട്ടിൻ്റെ ഗുണിതം, അതിനാൽ ഗുണനിലവാര നഷ്ടം വളരെ കുറവായിരിക്കും.
png(പോർട്ടബിൾ നെറ്റ്‌വർക്ക് ഗ്രാഫിക്സ് - പോർട്ടബിൾ നെറ്റ്‌വർക്ക് ഗ്രാഫിക്സ്. പിംഗ് പോലെ തന്നെ ഉച്ചരിക്കുന്നു, അതായത്. )
ഈ ഫോർമാറ്റ് ആദ്യം വെബിനായി വികസിപ്പിച്ചതാണ്, അതായത്. ചിത്രത്തിന് സാധാരണയായി ഭാരം കുറവാണ്, ലോഡ് ചെയ്യുമ്പോൾ പേജ് മന്ദഗതിയിലാക്കില്ല. കാലഹരണപ്പെട്ട gif മാറ്റിസ്ഥാപിക്കുന്നതിനാണ് ഈ ഫോർമാറ്റ് സൃഷ്ടിച്ചത്, എന്നാൽ അതിൽ നിന്ന് വ്യത്യസ്തമായി, ഇത് ആനിമേഷനെ പിന്തുണയ്ക്കുന്നില്ല. Png-8, gif പോലെ, 256 നിറങ്ങൾ മാത്രമേ ഉപയോഗിക്കുന്നുള്ളൂ. ഫോർമാറ്റ് png-24 16 ദശലക്ഷം നിറങ്ങൾ പിന്തുണയ്ക്കുന്നു, ഇത് ഇതിനകം തന്നെ ഭാരമേറിയതാണെങ്കിലും. Png-32 png-24-ൻ്റെ അതേ എണ്ണം നിറങ്ങൾ അടങ്ങിയിരിക്കുന്നു, കൂടാതെ ഒരു ചിത്രം ലഭിക്കാൻ ഇത് നിങ്ങളെ അനുവദിക്കുന്നു സുതാര്യമായ പശ്ചാത്തലത്തിൽ, കൂടാതെ നിങ്ങൾക്ക് സുതാര്യതയുടെ അളവ് ക്രമീകരിക്കാൻ കഴിയും. പിഎൻജിയുടെ വലിപ്പം കുറയ്ക്കുമ്പോൾ വർണ്ണ നിലവാരത്തിൽ നഷ്ടം സംഭവിക്കുന്നില്ല.
പേജിലേക്ക് ഒരു ചിത്രം ചേർക്കാൻ, ഉപയോഗിക്കുക ടാഗ് (ഇംഗ്ലീഷ് ഇമേജിൽ നിന്ന് - ചിത്രം, ചിത്രം).ഇതൊരു ഒറ്റ ടാഗാണ്, ഇതിന് ക്ലോസിംഗ് ടാഗ് ആവശ്യമില്ല. ഈ ടാഗിൽ ഉള്ളിൽ ആട്രിബ്യൂട്ടുകൾ അടങ്ങിയിരിക്കുന്നു.
ആട്രിബ്യൂട്ട്src(ഇംഗ്ലീഷ് ഉറവിടത്തിൽ നിന്ന് - ഉറവിടം) ഫയലിലേക്കുള്ള പാത സൂചിപ്പിക്കുന്നു (ചിത്രം സ്ഥിതിചെയ്യുന്ന സ്ഥലം). ചിത്രം നിങ്ങളുടെ കമ്പ്യൂട്ടറിലോ (സൈറ്റ് ഇപ്പോഴും വികസനത്തിലാണ്) അല്ലെങ്കിൽ നിങ്ങളുടെ സെർവറിലോ ആണെങ്കിൽ, ഒരു ആപേക്ഷിക ലിങ്ക് ഉപയോഗിക്കുക. ചിത്രം നെറ്റ്‌വർക്കിൽ നിന്നുള്ളതാണെങ്കിൽ, ഒരു സമ്പൂർണ്ണ ലിങ്ക് ആവശ്യമാണ്. "ലിങ്കുകൾ" എന്ന ലേഖനത്തിൽ ഇത് എങ്ങനെ ചെയ്യാമെന്ന് വായിക്കുക.
അതിനാൽ, നിങ്ങളുടെ വെബ് പേജിലേക്ക് ഒരു ചിത്രം ബന്ധിപ്പിക്കുന്നതിന്, നിങ്ങൾ ഇതുപോലെ കോഡ് എഴുതേണ്ടതുണ്ട്:
alt ആട്രിബ്യൂട്ട്(ഇംഗ്ലീഷ് ബദലിൽ നിന്ന് - ഇതര) ചിത്രം ലോഡുചെയ്യുന്നില്ലെങ്കിൽ ഉപയോക്താവ് കാണുന്ന വാചകം സൂചിപ്പിക്കുന്നു. പാത തെറ്റായി സൂചിപ്പിച്ചിരിക്കുന്നു, ചിത്രം ഇല്ലാതാക്കി, മോശം ഇൻ്റർനെറ്റ് - നിരവധി കാരണങ്ങളുണ്ടാകാം, ഈ വെറുക്കപ്പെട്ട ഐക്കണിന് പിന്നിൽ എന്താണെന്ന് വ്യക്തി മനസ്സിലാക്കുന്നത് അഭികാമ്യമാണ്.
ഈ ആട്രിബ്യൂട്ട് പൂരിപ്പിച്ചിട്ടുണ്ടെന്ന് ഉറപ്പാക്കാൻ സെർച്ച് എഞ്ചിനുകൾ വളരെ ശ്രദ്ധ ചെലുത്തുന്നു. കൂടാതെ html വാലിഡേറ്റർ (കോഡ് ശരിയാണെന്ന് പരിശോധിക്കുന്നതിനുള്ള ഒരു ഉറവിടം) alt ആട്രിബ്യൂട്ടിൻ്റെ അഭാവം ഒരു പിശകായി കാണും. എല്ലാ ആട്രിബ്യൂട്ടുകളും ആണെങ്കിൽ പൂരിപ്പിക്കും, സാധ്യമെങ്കിൽ കീവേഡുകളും അടങ്ങിയിരിക്കും - നിങ്ങളുടെ സൈറ്റിൻ്റെ ദൃശ്യപരത ഗണ്യമായി വർദ്ധിക്കും, അതായത്. തിരയലുകളിൽ അത് കൂടുതൽ തവണ കാണിക്കും. ഇത് SEO ഫീൽഡിൽ നിന്നുള്ളതാണ്, ഈ ഘട്ടത്തിൽ അത്തരമൊരു ആട്രിബ്യൂട്ട് ഉണ്ടെന്ന് ഞങ്ങൾക്ക് അറിയാൻ മതിയാകും, കൂടാതെ ഒരു "തത്സമയ" സൈറ്റിൽ അത് പൂരിപ്പിച്ചിരിക്കണം. സൈറ്റ് ഞങ്ങളുടെ ഡിസ്കിൽ ആയിരിക്കുമ്പോൾ, അത് ശൂന്യമായി വിടാം.
ചുവടെയുള്ള ഉദാഹരണത്തിൽ, ചിത്രത്തിന് നിലവിലില്ലാത്ത ഒരു പാത ഞങ്ങൾ ബോധപൂർവ്വം വ്യക്തമാക്കിയിട്ടുണ്ട്, അതിലൂടെ ആൾട്ട് ആട്രിബ്യൂട്ട് എങ്ങനെ പ്രവർത്തിക്കുന്നുവെന്ന് നിങ്ങൾക്ക് കാണാൻ കഴിയും
ചിത്രങ്ങളുടെ ഉയരവും വീതിയും
ഒറിജിനൽ ഇമേജ് ആണെങ്കിൽ നിങ്ങൾക്ക് ചിത്രത്തിൻ്റെ ഉയരവും വീതിയും സജ്ജീകരിക്കാം ഉദാ. നിങ്ങൾക്ക് ആവശ്യമുള്ളതിനേക്കാൾ കൂടുതൽ.
HTML5-ൽ ഇത് CSS ഉപയോഗിച്ച് ചെയ്യാൻ ശുപാർശ ചെയ്യുന്നു അല്ലെങ്കിൽ ശൈലി ആട്രിബ്യൂട്ട്, ഇതുപോലെ:
ഈ ഉദാഹരണത്തിൽ, ഞങ്ങൾ വീതിയുടെ 30% എടുത്തു, യഥാർത്ഥ ചിത്രത്തിൻ്റെ അല്ല, ബ്രൗസർ വിൻഡോ വലുപ്പം. വീതി = 100% ആകുമ്പോൾ, ബ്രൗസറിൻ്റെ പൂർണ്ണ വീതിയിലേക്ക് ചിത്രം തുറക്കുന്നു. ഈ സവിശേഷത ഓർക്കുക ശതമാനം, അളവെടുപ്പിൻ്റെ യൂണിറ്റുകളായി.
വഴിയിൽ, ഞങ്ങൾ വീതി മാത്രം എഴുതിയിരുന്നെങ്കിൽ, ഫലം സമാനമാകുമായിരുന്നു, ശ്രമിക്കുക:
നിങ്ങൾക്ക് വീതിയും ഉയരവും സജ്ജമാക്കാനും കഴിയും പിക്സലുകൾ.ഞങ്ങളുടെ പാണ്ടയുടെ കാര്യത്തിൽ, അതിൻ്റെ യഥാർത്ഥ അളവുകൾ 1196 x 796 പിക്സലുകളാണ്, അതിനാൽ കംപ്രസ് ചെയ്യുമ്പോൾ മൃഗം കഷ്ടപ്പെടാതിരിക്കാൻ, ഞങ്ങൾ അനുപാതങ്ങൾ നിലനിർത്തേണ്ടതുണ്ട്, ഇവിടെ നിങ്ങൾക്ക് ഒരു കാൽക്കുലേറ്റർ ഇല്ലാതെ ചെയ്യാൻ കഴിയില്ല. ചിത്രത്തിൻ്റെ വലുപ്പം 3 മടങ്ങ് കുറയ്ക്കാൻ ഞങ്ങൾ ആഗ്രഹിക്കുന്നു, തുടർന്ന് അളവുകൾ 399 x 265 പിക്സലുകളായി സജ്ജീകരിക്കേണ്ടതുണ്ട്.
ഞങ്ങൾ ചിത്രം ആനുപാതികമായി വലുതാക്കിയാൽ, ഉദാഹരണത്തിന്, ഒരു പരാമീറ്റർ മാത്രം വ്യക്തമാക്കിയാൽ മതിയെന്ന കാര്യം ശ്രദ്ധിക്കുക. വീതി. സ്മാർട്ട് ബ്രൗസർ തന്നെ ചിത്രത്തിൻ്റെ പൂർണ്ണ വലുപ്പം കണക്കാക്കും.
ഈ കോഡ് പ്രവർത്തിപ്പിക്കാൻ ശ്രമിക്കുക, ഫലം നോക്കുക:
എല്ലായ്പ്പോഴും ചിത്രത്തിൻ്റെ അളവുകൾ സജ്ജമാക്കുക. സാധാരണഗതിയിൽ, ചിത്രങ്ങൾ ലോഡുചെയ്യാൻ ബാക്കിയുള്ള html കോഡിനേക്കാൾ കൂടുതൽ സമയമെടുക്കും. ഇമേജുകൾക്കായി എത്ര സ്ഥലം റിസർവ് ചെയ്യണമെന്ന് ബ്രൗസറിന് അറിയാമെങ്കിൽ, ഇമേജുകൾ ലോഡുചെയ്യുന്നത് വരെ കാത്തിരിക്കാതെ തന്നെ സൈറ്റ് ലോഡ് ചെയ്യുന്നത് തുടരാം.
ഒരു ചെറിയ മോത്ത്ബോൾ
HTML-4-ലോ അതിനുമുമ്പോ സൃഷ്‌ടിച്ച ഒരു സൈറ്റിൻ്റെ കോഡ് ഉപയോഗിച്ച് നിങ്ങൾ ടിങ്കർ ചെയ്താൽ, ചിത്ര വലുപ്പങ്ങൾ പ്രത്യേകം ഉപയോഗിച്ച് സജ്ജീകരിച്ചിരിക്കുന്നത് നിങ്ങൾ ശ്രദ്ധിക്കും. വീതി ആട്രിബ്യൂട്ടുകൾഒപ്പം ഉയരം. HTML5-ൽ ഇപ്പോഴും സാധുതയുള്ളതാണെങ്കിലും ഇതൊരു ഒഴിവാക്കപ്പെട്ട രീതിയാണ്. എന്നിരുന്നാലും, ശൈലി ഉപയോഗിക്കാൻ ഞങ്ങൾ ശുപാർശ ചെയ്യുന്നു, കാരണം ബ്രൗസറിലോ നിങ്ങളുടെ CSS ഫയലിലോ ഉള്ള ആന്തരികമോ ബാഹ്യമോ ആയ ശൈലികൾ വീതിയും ഉയരവും ആട്രിബ്യൂട്ടുകളെ ബാധിക്കും. ഞങ്ങൾ CSS-ൽ നോക്കുമ്പോൾ ഇതിനെക്കുറിച്ച് കൂടുതൽ വിശദമായി പരിശോധിക്കാം, എന്നാൽ ഇപ്പോൾ സ്റ്റൈലുകൾ ഉയരവും വീതിയും ആട്രിബ്യൂട്ടുകളെ എങ്ങനെ ബാധിക്കുന്നു എന്നതിൻ്റെ ഒരു ഉദാഹരണം നോക്കുക.
ഈ വിൻഡോയിൽ 3 ടാബുകൾ ഉണ്ട്: ആദ്യം നിങ്ങൾ html കോഡ് കാണുന്നു, രണ്ടാമത്തെ CSS കോഡിൽ, അവസാനത്തേതിൽ - എല്ലായ്പ്പോഴും എന്നപോലെ, ഫലം. ആദ്യ ടാബ് ഒരു index.html ഫയലും രണ്ടാമത്തേത് style.css ഫയലും മൂന്നാമത്തേത് ബ്രൗസറും പോലെയാണ് ഇത് പ്രവർത്തിക്കുന്നത്. അതിനാൽ, ഇപ്പോൾ ഞങ്ങളുടെ CSS പറയുന്നത് img ടാഗുള്ള എല്ലാ ഘടകങ്ങളും 100% വീതിയുണ്ടെന്ന്. വീതിയുടെയും ഉയരത്തിൻ്റെയും ആട്രിബ്യൂട്ടുകളുടെ ഡിഫോൾട്ട് വലുപ്പങ്ങൾ പിക്സലുകളിലായതിനാൽ ഇവിടെ യൂണിറ്റുകളൊന്നും ചേർക്കേണ്ട ആവശ്യമില്ല.
ഫലങ്ങളിലെ വ്യത്യാസം വ്യക്തമാണ് :)
html-ൻ്റെ പഴയ പതിപ്പുകളിലും ഇനിപ്പറയുന്ന ആട്രിബ്യൂട്ടുകൾ ഉപയോഗിച്ചു:
വിന്യസിക്കുക, ചിത്രം തിരശ്ചീനമായോ ലംബമായോ വിന്യസിക്കാൻ ഉപയോഗിച്ചു.
hspace- ചുറ്റുമുള്ള ഉള്ളടക്കത്തിലേക്ക് ചിത്രത്തിൻ്റെ ഇടതും വലതും ഇൻഡൻ്റേഷൻ (ഉദാഹരണത്തിന്, ടെക്സ്റ്റ് അല്ലെങ്കിൽ അടുത്തുള്ള ചിത്രം)
vspace- ചിത്രത്തിൽ നിന്നും ചുറ്റുമുള്ള ഉള്ളടക്കത്തിലേക്ക് മുകളിലും താഴെയുമായി ഇൻഡൻ്റേഷൻ.
അതിർത്തി- ചിത്രത്തിന് ചുറ്റുമുള്ള ഫ്രെയിമിൻ്റെ കനം സജ്ജമാക്കുക (സ്ഥിരസ്ഥിതിയായി ഇത് പൂജ്യമാണ്)
ഇക്കാലത്ത്, ഈ കൃത്രിമത്വങ്ങളെല്ലാം (കൂടുതൽ കൂടുതൽ) CSS ഉപയോഗിച്ചാണ് ചെയ്യുന്നത്, അതിനാൽ നിങ്ങളെ ഇവിടെ ബുദ്ധിമുട്ടിക്കേണ്ടതില്ലെന്ന് ഞങ്ങൾ തീരുമാനിച്ചു. ഈ ആട്രിബ്യൂട്ടുകൾ ഉപയോഗിച്ച് എങ്ങനെ പ്രവർത്തിക്കണമെന്ന് നിങ്ങൾക്ക് ഇപ്പോഴും താൽപ്പര്യമുണ്ടെങ്കിൽ, അഭിപ്രായങ്ങളിൽ എഴുതുക, ഞങ്ങൾ ഈ ഇനം ചേർക്കും :)
കോഡിൽ ഒരു ചിത്രം സ്ഥാപിക്കുന്നു
ഞങ്ങൾ ടാഗ് സ്ഥാപിക്കുന്നിടത്ത് നിന്ന് അത് ബ്രൗസറിൽ എങ്ങനെ പ്രദർശിപ്പിക്കും എന്നതിനെ ആശ്രയിച്ചിരിക്കുന്നു.
ഉദാഹരണം നമ്പർ 1 - ഖണ്ഡികയ്ക്ക് മുമ്പ്:
തുടങ്ങിയ ഘടകങ്ങൾ
ഒപ്പം
പരാമർശിക്കുക ബ്ലോക്ക് ഘടകങ്ങൾ. അവ എല്ലായ്പ്പോഴും ഒരു പുതിയ വരിയിൽ ആരംഭിക്കുകയും ബ്രൗസർ വിൻഡോയുടെ ലഭ്യമായ മുഴുവൻ വീതിയും ഉൾക്കൊള്ളുകയും ചെയ്യുന്നു. നിങ്ങൾ ഒന്നാം സ്ഥാനത്താണെങ്കിൽ , അതിനു ശേഷം ഒരു ബ്ലോക്ക് ഘടകം, ഉദാഹരണത്തിന് ഒരു ഖണ്ഡിക, അത് അടുത്ത വരിയിലേക്ക് നീക്കും.
ഉദാഹരണം നമ്പർ 2 - ഖണ്ഡികയുടെ തുടക്കത്തിൽ
ഇതൊരു ഇൻലൈൻ ഘടകമാണ്, ഇത് ഒരു ബ്ലോക്ക് എലമെൻ്റിനുള്ളിൽ യോജിക്കുന്നു, ഒരു പുതിയ ലൈൻ ആരംഭിക്കുന്നില്ല. മുകളിലെ ഉദാഹരണത്തിൽ, കോഡ് കാരണം ടെക്സ്റ്റ് ചിത്രത്തിന് ചുറ്റും പൊതിയുന്നു ഉള്ളിൽ രജിസ്റ്റർ ചെയ്തു
ചിത്രീകരണങ്ങൾക്കുള്ള അടിക്കുറിപ്പുകൾ
ഒരു പേജിൽ ഫോട്ടോ അടയാളപ്പെടുത്താനോ ഒപ്പിടാനോ, ഉപയോഗിക്കുക ടാഗ് (ഇംഗ്ലീഷിൽ നിന്ന് ചിത്രം - ഡ്രോയിംഗ്). ചിത്രീകരണങ്ങൾ, ഫോട്ടോഗ്രാഫുകൾ, ഡയഗ്രമുകൾ തുടങ്ങിയ ഉള്ളടക്കങ്ങൾ അതിനുള്ളിൽ സ്ഥാപിക്കുമെന്ന് ഈ ടാഗ് സൂചിപ്പിക്കുന്നു.
ടാഗ് ചെയ്യുക (ചിത്രത്തിൻ്റെ ശീർഷകം) ചിത്രത്തിന് ഒരു അടിക്കുറിപ്പ് ചേർക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു. ഇത് എങ്ങനെ പ്രവർത്തിക്കുന്നു എന്നത് ഇതാ:
സ്ഥിരസ്ഥിതിയായി ബ്രൗസറിന് ടാഗിനായി ചില സ്റ്റൈൽ ക്രമീകരണങ്ങളുണ്ടെന്ന കാര്യം ശ്രദ്ധിക്കുക , പ്രത്യേകിച്ച്, ഇടതും വലതും 40 px ഇൻഡൻ്റുകൾ ഉണ്ട്.
അതിനാൽ, നിങ്ങളും ഞാനും പഠിച്ചു
പേജിലേക്ക് ഒരു ചിത്രം ചേർക്കുക: ഉപയോഗിച്ച് ടാഗ്
ഈ ടാഗിന് ആവശ്യമായ ആട്രിബ്യൂട്ടുകൾ പഠിച്ചു: srcപാത സൂചിപ്പിക്കാൻ ഒപ്പം altചിത്രം വിവരിക്കാൻ
ഏത് ഫോർമാറ്റാണ് മികച്ചതെന്നും എന്താണ് ഉപയോഗിക്കേണ്ടതെന്നും മനസിലാക്കുക: jpegഫോട്ടോകൾക്കായി, pngലോഗോകൾക്കും സ്ക്രീൻഷോട്ടുകൾക്കുമായി, gifആനിമേഷനായി
ചിത്രത്തിൻ്റെ അളവുകൾ എങ്ങനെ ക്രമീകരിക്കാം: ഉപയോഗിച്ച് ശൈലി ആട്രിബ്യൂട്ട്പരാമീറ്ററുകൾക്കൊപ്പം വീതിഒപ്പം ഉയരം
കോഡിലെ സ്ഥലത്തെ ആശ്രയിച്ച് ചിത്രം എങ്ങനെ പ്രദർശിപ്പിക്കുമെന്ന് ഞങ്ങൾ കണ്ടെത്തി: ഒരു ബ്ലോക്ക് ഘടകത്തിന് മുന്നിലാണെങ്കിൽ വെവ്വേറെയും ഒരു ബ്ലോക്ക് ഘടകത്തിനുള്ളിലാണെങ്കിൽ ഒരു റാപ്പും ഉപയോഗിച്ച് (ഉദാഹരണത്തിന്
)
ഞങ്ങൾക്ക് പ്രവർത്തിക്കാൻ എന്തെങ്കിലും ലഭിക്കണമെങ്കിൽ, ആരുടെയും പകർപ്പവകാശം ലംഘിക്കാതെ ഈ ചിത്രങ്ങൾ എവിടെ നിന്നെങ്കിലും എടുക്കേണ്ടതുണ്ട്.
അതിനാൽ ബോണസിനുള്ള സമയമാണിത് :)
സൗജന്യ ഫോട്ടോ ബാങ്കുകളുടെ ലിസ്റ്റ്
ഞങ്ങൾ ആരംഭിക്കുന്നതിന് മുമ്പ്, ഇവിടെയുള്ള ഓരോ സ്ക്രീൻഷോട്ടും സൈറ്റിലേക്കുള്ള ഒരു ലിങ്കാണെന്ന് ദയവായി ശ്രദ്ധിക്കുക. ചിത്രങ്ങൾ ലിങ്കുകളായി എങ്ങനെ നിർമ്മിക്കാം, "ലിങ്കുകൾ" എന്ന ലേഖനം വായിക്കുക.
ക്രിയേറ്റീവ് കോമൺസ് CCO (CC Zero) ലൈസൻസിന് കീഴിൽ വിതരണം ചെയ്യുന്ന ഏത് വിഷയത്തിലും 680 ആയിരം സൗജന്യ ചിത്രങ്ങൾ pixabay-ൽ നിങ്ങൾ കണ്ടെത്തും, അതായത്. അവ ഏത് ആവശ്യത്തിനും വാണിജ്യാവശ്യത്തിനും ഉപയോഗിക്കാനും വിതരണം ചെയ്യാനും പരിഷ്‌ക്കരിക്കാനും കഴിയും.
ഫോട്ടോ ബാങ്കിൽ 390 ആയിരം സൗജന്യ ഫോട്ടോകളും ചിത്രങ്ങളും അടങ്ങിയിരിക്കുന്നു. ഇവിടെ ഒരു രസകരമായ ചിത്രം കണ്ടെത്തുന്നത് ബുദ്ധിമുട്ടാണ്, പക്ഷേ നല്ല ഉദാഹരണങ്ങളും ഉണ്ട്. പണമടച്ചുള്ള ഫോട്ടോ ബാങ്കുകളുടെ പരസ്യം തികച്ചും ശ്രദ്ധ തിരിക്കുന്നു. ചിത്രങ്ങളുടെ എണ്ണം കാരണം ഞങ്ങൾ ഈ റിസോഴ്‌സ് രണ്ടാം സ്ഥാനത്ത് ഇടുന്നു, എന്നാൽ സൗഹൃദത്തിൻ്റെ കാര്യത്തിൽ ഇത് ഞങ്ങളുടെ റാങ്കിംഗിൽ അവസാനമായിരിക്കും.
ഫോട്ടോസ്റ്റോക്കിന് 250,000-ലധികം സൗജന്യ ഫോട്ടോകളുണ്ട്, കൂടുതലും ഉയർന്ന നിലവാരമുള്ളതാണ്. രജിസ്ട്രേഷൻ ഇല്ലാതെ പോലും നിങ്ങൾക്ക് ഡൗൺലോഡ് ചെയ്യാം. ഇംഗ്ലീഷിൽ മാത്രം ലഭ്യമാണ്.
സിസി സീറോയ്ക്ക് കീഴിൽ ലൈസൻസുള്ള ധാരാളം സ്റ്റൈലിഷ് ഫോട്ടോകൾ. രജിസ്ട്രേഷൻ ഇല്ലാതെ തന്നെ ഡൗൺലോഡ് ചെയ്യാം. ഈ ഫോട്ടോ ബാങ്കും നിങ്ങളെ ഇംഗ്ലീഷിൽ മാത്രമേ മനസ്സിലാക്കൂ.
ഉയർന്ന നിലവാരമുള്ള ഫോട്ടോകൾ കണ്ടെത്തുന്നത് എത്ര ബുദ്ധിമുട്ടാണെന്ന് മനസ്സിലാക്കുന്ന ഒരു ഇന്ത്യൻ വെബ് ഡിസൈനറാണ് സൈറ്റ് സൃഷ്ടിച്ചത്. എല്ലാ ഫോട്ടോഗ്രാഫുകളും അദ്ദേഹം വ്യക്തിപരമായി എടുത്തതാണ്, അവ ഉപയോഗിച്ച് നിങ്ങൾക്ക് ആവശ്യമുള്ളതെന്തും ചെയ്യാം. ഭക്ഷണം, ഡെസ്ക്ടോപ്പ്, കമ്പ്യൂട്ടറുകൾ, എല്ലാത്തരം വസ്തുക്കളും ഫോട്ടോ എടുക്കാൻ ഇഷ്ടപ്പെടുന്നു. തിരയുക - ഇംഗ്ലീഷിൽ മാത്രം.
ഒരു HTML ഡോക്യുമെൻ്റിലേക്ക് ചിത്രങ്ങൾ ചേർക്കുന്നതിന് ടാഗ് ഉത്തരവാദിയാണ്. അതിൻ്റെ ആട്രിബ്യൂട്ടുകളും, അതിൽ പ്രധാനം പരിഗണിക്കാം src, അത് ചിത്രത്തിൻ്റെ വിലാസം വ്യക്തമാക്കുന്നു. ചിത്രം എവിടെ നിന്ന് ലഭിക്കുമെന്ന് നിങ്ങൾ വ്യക്തമാക്കിയിട്ടില്ലെങ്കിൽ, പേജിലേക്ക് എന്താണ് ചേർക്കേണ്ടതെന്ന് ബ്രൗസറിന് അറിയാൻ കഴിയില്ല എന്നതിനാൽ ഇത് ആവശ്യമാണ്.
ഒരു ചിത്രം ചേർക്കുന്നതിനുള്ള ഏറ്റവും ലളിതമായ കേസ് ഇതുപോലെ കാണപ്പെടും (ചിത്രത്തെ image.png എന്ന് വിളിക്കുന്നു, HTML പ്രമാണത്തിൻ്റെ അതേ ഫോൾഡറിലാണ് ഇത് സ്ഥിതിചെയ്യുന്നത്):
മുമ്പ് ടാഗിൽ ആവശ്യമായ ഒരു ആട്രിബ്യൂട്ട് കൂടി ഉണ്ടായിരുന്നു - alt, എന്നാൽ HTML 5 ൻ്റെ വരവോടെ അത് അഭിലഷണീയമായവയുടെ വിഭാഗത്തിലേക്ക് തരംതാഴ്ത്തി. altപെട്ടെന്ന് ലോഡായില്ലെങ്കിൽ ചിത്രത്തിന് പകരം ഉപയോക്താവ് കാണുന്ന വാചകം സജ്ജമാക്കുന്നു. ചില ഒപ്റ്റിമൈസറുകൾ ഈ ആട്രിബ്യൂട്ട് ചേർക്കാൻ ശുപാർശ ചെയ്യുന്നു, കാരണം ഇത് സെർച്ച് എഞ്ചിനുകളിലെ പ്രമോഷനിൽ നല്ല സ്വാധീനം ചെലുത്തുമെന്ന് വിശ്വസിക്കപ്പെടുന്നു.
ചിത്രത്തിന് അധിക ആട്രിബ്യൂട്ടുകളൊന്നും നിങ്ങൾ വ്യക്തമാക്കിയിട്ടില്ലെങ്കിൽ, അത് പൂർണ്ണ വലുപ്പത്തിൽ പ്രദർശിപ്പിക്കും, എന്നാൽ ഇത് എല്ലായ്പ്പോഴും ആവശ്യമില്ല. ഭാഗ്യവശാൽ, ആട്രിബ്യൂട്ടുകൾ ഉപയോഗിച്ച് ചിത്രത്തിൻ്റെ ആവശ്യമുള്ള വലുപ്പം സജ്ജമാക്കാൻ കഴിയും വീതി(വീതിയെ സൂചിപ്പിക്കുന്നു) കൂടാതെ ഉയരം(ഉയരം നിർണ്ണയിക്കുന്നു). അളവുകൾ പിക്സലുകളിലോ ശതമാനത്തിലോ രേഖപ്പെടുത്താം. രണ്ടാമത്തെ സാഹചര്യത്തിൽ, ബ്രൗസർ പാരൻ്റ് എലമെൻ്റിൽ നിന്നുള്ള ശതമാനം കണക്കാക്കും (ഉദാഹരണത്തിന്, ചിത്രം ചേർത്തിരിക്കുന്ന ഖണ്ഡിക).
നമുക്ക് പേജിലേക്ക് ഒരു ചിത്രം ചേർക്കേണ്ടതുണ്ടെന്ന് പറയാം image.png"ഒരു ചിത്രം മാത്രം" എന്ന ഇതര വാചകത്തിനൊപ്പം, 420 പിക്സൽ വീതിയും 280 പിക്സൽ നീളവും. ഈ കേസിലെ കോഡ് ഇപ്രകാരമായിരിക്കും:
നാവിഗേഷൻ മാപ്പ്
മുമ്പത്തെ ലേഖനത്തിൽ ഒരു ചിത്രം എങ്ങനെ ലിങ്ക് ആക്കാം എന്നതിനെക്കുറിച്ച് ഞങ്ങൾ സംസാരിച്ചു. എന്നിരുന്നാലും, ഒരു ഇമേജിൽ ഒരു ലിങ്ക് മാത്രമല്ല, ഒരേസമയം നിരവധി ലിങ്കുകൾ സജ്ജമാക്കാൻ HTML നിങ്ങളെ അനുവദിക്കുന്നു. തൽഫലമായി, ഉപയോക്താവ്, ഒരേ ചിത്രത്തിലെ വ്യത്യസ്ത സ്ഥലങ്ങളിൽ ക്ലിക്കുചെയ്യുന്നത്, വ്യത്യസ്ത ഇൻ്റർനെറ്റ് വിലാസങ്ങളിലേക്ക് പോകും. ഈ സവിശേഷത ഉപയോഗിക്കാം, ഉദാഹരണത്തിന്, ആകർഷകമായ മെനുകൾ, സംവേദനാത്മക പരിശോധനകൾ അല്ലെങ്കിൽ വിഷ്വൽ ഗ്രാഫിക് മോഡലുകൾ എന്നിവ സൃഷ്ടിക്കാൻ.
ഒരു ഇമേജ് മാപ്പ് സൃഷ്ടിക്കാൻ (ഇത് വിവരിച്ച സവിശേഷതയുടെ പേരാണ്), നിങ്ങൾക്ക് ഇനിപ്പറയുന്ന ടാഗുകളും ആട്രിബ്യൂട്ടുകളും ആവശ്യമാണ്:
- ഇമേജ് മാപ്പ് വിവരിച്ചിരിക്കുന്ന ഒരു കണ്ടെയ്നർ.
- അകത്ത് ടാഗ് , ചിത്രത്തിൻ്റെ ഒരു മേഖല വിവരിക്കുന്നു. എത്ര സജീവ മേഖലകളാണ് നിങ്ങൾ ഇമേജിനെ വിഭജിക്കാൻ പദ്ധതിയിടുന്നത്, നിരവധി ഘടകങ്ങൾ നൽകേണ്ടി വരും. ബണ്ടിൽ -ബണ്ടിലുകൾ പോലെ തന്നെ പ്രവർത്തിക്കുന്നു -
ഒപ്പം
-
, ലിസ്റ്റുകൾ സൃഷ്ടിക്കുന്നു.
ആകൃതി- ടാഗ് ആട്രിബ്യൂട്ട് , ഇത് ലിങ്കിൻ്റെ രൂപം വ്യക്തമാക്കുന്നു. സജീവമായ പ്രദേശം ദീർഘചതുരം, ബഹുഭുജം അല്ലെങ്കിൽ വൃത്തത്തിൻ്റെ ആകൃതിയിലായിരിക്കാം.
കയറുകൾ- ഒരു പ്രദേശത്തിൻ്റെ കോർഡിനേറ്റുകൾ നിർവചിക്കുന്ന ഒരു ആട്രിബ്യൂട്ട്. ടാഗിൽ പെട്ടതും . ഒരു ദീർഘചതുരത്തിന്, മുകളിൽ ഇടത്, താഴെ വലത് കോണുകളുടെ കോർഡിനേറ്റുകൾ സൂചിപ്പിച്ചിരിക്കുന്നു, ഒരു ബഹുഭുജത്തിന് - ലംബങ്ങളുടെ കോർഡിനേറ്റുകൾ; ഒരു സർക്കിൾ നിർവചിക്കുമ്പോൾ, അതിൻ്റെ കേന്ദ്രത്തിൻ്റെയും ദൂരത്തിൻ്റെയും കോർഡിനേറ്റുകൾ നിങ്ങൾ വ്യക്തമാക്കേണ്ടതുണ്ട്.
ഉപയോഗരേഖ- ടാഗ് ആട്രിബ്യൂട്ട് img, ഇത് ചിത്രത്തെ മാപ്പിലേക്ക് ലിങ്ക് ചെയ്യുന്നു. അതിന് നന്ദി, കണ്ടെയ്നറിൽ എന്താണെന്ന് ബ്രൗസർ മനസ്സിലാക്കുന്നു ഈ പ്രത്യേക ഡ്രോയിംഗിൻ്റെ മാപ്പ് വിവരിച്ചിരിക്കുന്നു.
ഉദാഹരണ ഇമേജ് മാപ്പ്
മുകളിൽ പറഞ്ഞവയെല്ലാം എങ്ങനെ ഉപയോഗിക്കണമെന്ന് വ്യക്തമാക്കുന്നതിന്, ഞാൻ ഒരു അടിസ്ഥാന ഉദാഹരണം നൽകും. ഒരു ഡ്രോയിംഗ് ഉണ്ട് map.jpg. ഇത് രണ്ട് സജീവ മേഖലകളായി വിഭജിക്കേണ്ടതുണ്ട്. മുകളിലെ ഭാഗത്ത് (പച്ച) ക്ലിക്ക് ചെയ്യുന്നത് Odnoklassniki വെബ്സൈറ്റ് തുറക്കും, താഴത്തെ ഭാഗം (നീല) VKontakte ലേക്ക് നയിക്കും. ലിങ്കുകൾ ഒരു പുതിയ ടാബിൽ തുറക്കണം. ഒരു മാപ്പ് സൃഷ്ടിക്കാൻ, ഇനിപ്പറയുന്ന ഘട്ടങ്ങൾ പാലിക്കുക.
1. പേജിലേക്ക് ചിത്രം തിരുകുക, അത് ഭാവി കാർഡിലേക്ക് ലിങ്ക് ചെയ്യുക (അതിനെ സോഷ്യൽ എന്ന് വിളിക്കും), അതിനായി ഞങ്ങൾ ഇനിപ്പറയുന്ന കോഡ് എഴുതുന്നു:
2. ചിത്രത്തിലെ ഭാവിയിലെ സജീവ മേഖലകളും അവയുടെ അനുബന്ധ കോർഡിനേറ്റുകളും ഞങ്ങൾ നിർണ്ണയിക്കുന്നു. ഇത് പെയിൻ്റ്, ഫോട്ടോഷോപ്പ് അല്ലെങ്കിൽ മറ്റേതെങ്കിലും ഗ്രാഫിക്സ് എഡിറ്ററിൽ ചെയ്യാം. ഞങ്ങളുടെ കാര്യത്തിൽ, എല്ലാം പ്രാഥമികമാണ്: ദീർഘചതുരങ്ങൾ ഉയരത്തിലും (114 പിക്സലുകൾ) വീതിയിലും (384 പിക്സലുകൾ) തുല്യമാണ്.
3. നമുക്ക് ഒരു മാപ്പ് സൃഷ്ടിക്കാൻ തുടങ്ങാം: ടാഗ് തുറന്ന് അതിൻ്റെ പേര് നെയിം ആട്രിബ്യൂട്ടിൽ എഴുതുക, അത് ചിത്രത്തിൻ്റെ യൂസ്‌മാപ്പ് പ്രോപ്പർട്ടിയുടെ മൂല്യവുമായി പൊരുത്തപ്പെടണം:
4. ഏരിയ ടാഗുകൾ ഉപയോഗിച്ച്, ഞങ്ങൾ സജീവ മേഖലകൾ നിർവ്വചിക്കുന്നു:
5. കാർഡ് അടയ്ക്കുക:
സൃഷ്ടിയുടെ ഫലം ഒരു ചിത്രമായിരുന്നു, അതിൻ്റെ വിവിധ ഭാഗങ്ങളിൽ ക്ലിക്കുചെയ്യുന്നത് വ്യത്യസ്ത സോഷ്യൽ നെറ്റ്‌വർക്കുകൾ തുറക്കുന്നതിലേക്ക് നയിക്കുന്നു, ഇതാണ് HTML കോഡ്:
ഒരു കമ്പ്യൂട്ടറിൽ നിന്നോ ഫോണിൽ നിന്നോ Mail.ru മെയിലിലേക്ക് ലോഗിൻ ചെയ്യുന്നത് നിങ്ങളുടെ സ്വകാര്യ മെയിൽബോക്സിലേക്കും മറ്റ് Mail.ru ഗ്രൂപ്പ് സേവനങ്ങളിലേക്കും പ്രവേശനം നൽകുന്നു. നിലവിൽ ഇൻ്റർനെറ്റ് മെയിൽ ഉപയോഗിക്കുന്നു...
gif(ഗ്രാഫിക്സ് ഇൻ്റർചേഞ്ച് ഫോർമാറ്റ് - ഇമേജ് എക്സ്ചേഞ്ച് ഫോർമാറ്റ്)
