ഹലോ പ്രിയ വായനക്കാരേബ്ലോഗ്! ഈ ലേഖനത്തിൽ നിങ്ങൾ എല്ലാം പഠിക്കും ഒരു ചിത്രം എങ്ങനെ ചേർക്കാം html പേജ് . നിങ്ങളുടെ പേജിൽ ഇടാൻ ആഗ്രഹിക്കുന്ന നിരവധി ചിത്രങ്ങൾ നിങ്ങളുടെ പക്കലുണ്ടോ അതോ നിങ്ങളുടെ സൈറ്റിൽ ഒരു ലോഗോ ഇടാൻ ആഗ്രഹിക്കുന്നുണ്ടോ? ഇതെല്ലാം എളുപ്പമാണ്. ഈ ലേഖനം വായിച്ചതിനുശേഷം, നിങ്ങൾക്ക് ബുദ്ധിമുട്ടുകൾ കൂടാതെ നിങ്ങളുടെ html പേജുകളിൽ ചിത്രങ്ങൾ ചേർക്കാൻ കഴിയും. ഇത് ചെയ്യുന്നതിന്, ഞങ്ങൾ വിശദമായി സംസാരിക്കും ടാഗ് കൂടാതെ അതിൻ്റെ ആട്രിബ്യൂട്ടുകളും, gif, jpeg, png പോലുള്ള ഗ്രാഫിക് ഫയൽ ഫോർമാറ്റുകൾ ഞങ്ങൾ വേഗത്തിൽ പരിശോധിക്കും, കൂടാതെ നിങ്ങളുടെ സൈറ്റിലേക്ക് വീഡിയോയും ഓഡിയോയും ചേർക്കുന്നത് എളുപ്പമാക്കുന്ന പുതിയ HTML5 സവിശേഷതകളും നോക്കാം.

ഗ്രാഫിക് ഡാറ്റ എന്ന വസ്തുത കാരണം html ടെക്സ്റ്റ്ഒരു ഫയലിൽ സംയോജിപ്പിക്കാനാവില്ല ഒന്നാമതായി, ഗ്രാഫിക് ചിത്രങ്ങൾ, കൂടാതെ മറ്റ് മൾട്ടിമീഡിയ ഡാറ്റ പ്രത്യേക ഫയലുകളിൽ സംഭരിച്ചിരിക്കുന്നു. ഒരു വെബ് പേജിലേക്ക് അവ നടപ്പിലാക്കാൻ, ഇവയിലേക്കുള്ള ലിങ്കുകൾ അടങ്ങിയ പ്രത്യേക ടാഗുകൾ അവർ ഉപയോഗിക്കുന്നു പ്രത്യേക ഫയലുകൾ. പ്രത്യേകിച്ച്, അത്തരമൊരു ടാഗ് ആണ് ടാഗ് . ഒരു വിലാസത്തോടുകൂടിയ അത്തരമൊരു ടാഗ് നേരിട്ടതിനാൽ, ബ്രൗസർ ആദ്യം വെബ് സെർവറിൽ നിന്ന് ഒരു ഇമേജ്, ഓഡിയോ അല്ലെങ്കിൽ വീഡിയോ ഉള്ള അനുബന്ധ ഫയൽ അഭ്യർത്ഥിക്കുന്നു, തുടർന്ന് അത് വെബ് പേജിൽ പ്രദർശിപ്പിക്കുന്നു.

എല്ലാ ഗ്രാഫിക് ചിത്രങ്ങളും, പൊതുവേ, വെബ് പേജിൽ നിന്ന് വേറിട്ട് ഫയലുകളിൽ സംഭരിച്ചിരിക്കുന്ന ഏത് ഡാറ്റയും വിളിക്കുന്നു നടപ്പിലാക്കിപേജ് ഘടകങ്ങൾ.

ചിത്രങ്ങൾ തിരുകുന്നതിന് മുമ്പ് ടാഗ് വിശദമായി നോക്കുക , ഗ്രാഫിക് ഫോർമാറ്റുകളെക്കുറിച്ച് കുറച്ച് പഠിക്കുന്നത് മൂല്യവത്താണ്.

ഗ്രാഫിക് ഇമേജ് ഫോർമാറ്റുകൾ.

വ്യത്യസ്തമായ നിരവധി ഉണ്ട് ഗ്രാഫിക് ഫോർമാറ്റുകൾ, എന്നാൽ ബ്രൗസറുകൾ ചിലതിനെ മാത്രമേ പിന്തുണയ്ക്കൂ. അവയിൽ മൂന്നെണ്ണം നോക്കാം.

1. JPEG ഫോർമാറ്റ്(സംയുക്ത ഫോട്ടോഗ്രാഫിക് വിദഗ്ധ സംഘം). ചിത്രങ്ങൾ സംഭരിക്കുന്നതിന് ഉപയോഗിക്കുന്ന ഒരു ജനപ്രിയ ഫോർമാറ്റ്. 24-ബിറ്റ് വർണ്ണത്തെ പിന്തുണയ്ക്കുകയും ഫോട്ടോകളിലെ എല്ലാ ഹാഫ്‌ടോണുകളും മാറ്റമില്ലാതെ സൂക്ഷിക്കുകയും ചെയ്യുന്നു. എന്നാൽ jpeg സുതാര്യതയെ പിന്തുണയ്ക്കുന്നില്ല കൂടാതെ ചിത്രങ്ങളിലെ ചെറിയ വിശദാംശങ്ങളും വാചകങ്ങളും വളച്ചൊടിക്കുന്നു. JPEG പ്രധാനമായും ഫോട്ടോഗ്രാഫുകൾ സൂക്ഷിക്കാൻ ഉപയോഗിക്കുന്നു. ഈ ഫോർമാറ്റിൻ്റെ ഫയലുകൾ ഉണ്ട് jpg വിപുലീകരണങ്ങൾ, jpe, jpeg.

2. GIF ഫോർമാറ്റ്(ഗ്രാഫിക്സ് ഇൻ്റർചേഞ്ച് ഫോർമാറ്റ്). ഈ ഫോർമാറ്റിൻ്റെ പ്രധാന നേട്ടം ഒരു ഫയലിൽ ഒരേസമയം നിരവധി ചിത്രങ്ങൾ സംഭരിക്കാനുള്ള കഴിവാണ്. മുഴുവൻ ആനിമേറ്റഡ് വീഡിയോകളും സൃഷ്ടിക്കാൻ ഇത് നിങ്ങളെ അനുവദിക്കുന്നു. രണ്ടാമതായി, ഇത് സുതാര്യതയെ പിന്തുണയ്ക്കുന്നു. ഫോട്ടോകൾ സംഭരിക്കുന്നതിന് അനുയോജ്യമല്ലാത്ത 256 നിറങ്ങൾ മാത്രമേ പിന്തുണയ്ക്കൂ എന്നതാണ് പ്രധാന പോരായ്മ. ലോഗോകൾ, ബാനറുകൾ, സുതാര്യമായ പ്രദേശങ്ങളുള്ള ചിത്രങ്ങൾ, ടെക്‌സ്‌റ്റ് എന്നിവ സംഭരിക്കാനാണ് GIF പ്രധാനമായും ഉപയോഗിക്കുന്നത്. ഈ ഫോർമാറ്റിലുള്ള ഫയലുകൾക്ക് വിപുലീകരണ gif ഉണ്ട്.

3. PNG ഫോർമാറ്റ്(പോർട്ടബിൾ നെറ്റ്‌വർക്ക് ഗ്രാഫിക്സ്). ഈ ഫോർമാറ്റ് ലെഗസി GIF നും ഒരു പരിധിവരെ JPEG നും പകരമായി വികസിപ്പിച്ചെടുത്തിട്ടുണ്ട്. സുതാര്യതയെ പിന്തുണയ്ക്കുന്നു, എന്നാൽ ആനിമേഷൻ അനുവദിക്കുന്നില്ല. ഈ ഫോർമാറ്റ്ഒരു png വിപുലീകരണമുണ്ട്.

വെബ്സൈറ്റുകൾ സൃഷ്ടിക്കുമ്പോൾ, അവർ സാധാരണയായി JPEG അല്ലെങ്കിൽ GIF ഫോർമാറ്റിൽ ചിത്രങ്ങൾ ഉപയോഗിക്കുന്നു, എന്നാൽ ചിലപ്പോൾ അവർ PNG ഉപയോഗിക്കുന്നു. ഏത് ഫോർമാറ്റ് ഉപയോഗിക്കുന്നതാണ് നല്ലത് എന്ന് മനസിലാക്കുക എന്നതാണ് പ്രധാന കാര്യം. ചുരുക്കത്തിൽ:

ടെക്‌സ്‌റ്റ് അടങ്ങിയിട്ടില്ലാത്ത ഫോട്ടോഗ്രാഫുകളോ ഗ്രേസ്‌കെയിൽ ചിത്രങ്ങളോ സംഭരിക്കുന്നതിന് JPEG ഏറ്റവും നന്നായി ഉപയോഗിക്കുന്നു;

• GIF പ്രാഥമികമായി ആനിമേഷനായി ഉപയോഗിക്കുന്നു;
• മറ്റെല്ലാറ്റിനും (ഐക്കണുകൾ, ബട്ടണുകൾ മുതലായവ) ഫോർമാറ്റാണ് PNG.

html പേജുകളിലേക്ക് ചിത്രങ്ങൾ ചേർക്കുന്നു

അപ്പോൾ, എങ്ങനെയാണ് ഒരു വെബ് പേജിലേക്ക് ഒരു ചിത്രം ചേർക്കുന്നത്? ഒറ്റത്തവണ ഉപയോഗിച്ച് നിങ്ങൾക്ക് ഒരു ചിത്രം ചേർക്കാം ടാഗ് . വെബ് പേജിലെ ടാഗ് നേരിടുന്ന സ്ഥലത്ത് ബ്രൗസർ ചിത്രം സ്ഥാപിക്കുന്നു .

html-ലേക്ക് ചിത്രങ്ങൾ ചേർക്കുന്നതിനുള്ള കോഡ്പേജ് ഇതുപോലെ കാണപ്പെടുന്നു:

വെബ് പേജിൻ്റെ അതേ ഫോൾഡറിൽ സ്ഥിതി ചെയ്യുന്ന image.jpg ഫയലിൽ സംഭരിച്ചിരിക്കുന്ന ഒരു ചിത്രം ഈ html കോഡ് വെബ് പേജിൽ സ്ഥാപിക്കും. നിങ്ങൾ ശ്രദ്ധിച്ചിരിക്കാം, ചിത്രത്തിൻ്റെ വിലാസം സൂചിപ്പിച്ചിരിക്കുന്നു src ആട്രിബ്യൂട്ട്. അത് എന്താണെന്ന് ഞാൻ നേരത്തെ പറഞ്ഞിട്ടുണ്ട്. അതിനാൽ, ചിത്രത്തിനൊപ്പം ഫയലിൻ്റെ വിലാസം സൂചിപ്പിക്കാൻ സഹായിക്കുന്ന ഒരു ആവശ്യമായ ആട്രിബ്യൂട്ടാണ് src ആട്രിബ്യൂട്ട്. src ആട്രിബ്യൂട്ട് ഇല്ലാതെ, img ടാഗ് അർത്ഥശൂന്യമാണ്.

ഒരു ചിത്രമുള്ള ഒരു ഫയലിൻ്റെ വിലാസം വ്യക്തമാക്കുന്നതിനുള്ള കുറച്ച് ഉദാഹരണങ്ങൾ ഇതാ:

- ഈ html കോഡ് പേജിലേക്ക് image.jpg എന്ന് വിളിക്കുന്ന ഒരു ചിത്രം ചേർക്കും, അത് വെബ്‌സൈറ്റിൻ്റെ റൂട്ടിൽ സ്ഥിതിചെയ്യുന്ന ഇമേജ് ഫോൾഡറിൽ സംഭരിച്ചിരിക്കുന്നു.

src ആട്രിബ്യൂട്ടിൽ മാത്രമല്ല അടങ്ങിയിരിക്കാം ആപേക്ഷിക ലിങ്കുകൾചിത്രങ്ങളിലേക്ക്. html പേജുകൾക്കൊപ്പം ചിത്രങ്ങൾ ഓൺലൈനിൽ സംഭരിച്ചിരിക്കുന്നതിനാൽ, ഓരോ ഇമേജ് ഫയലിനും അതിൻ്റേതായ url ഉണ്ട്. അതിനാൽ, നിങ്ങൾക്ക് src ആട്രിബ്യൂട്ടിലേക്ക് ഇമേജ് URL ചേർക്കാൻ കഴിയും. ഉദാഹരണത്തിന്:

ഈ കോഡ് mysite.ru എന്ന സൈറ്റിൽ നിന്ന് പേജിലേക്ക് ഒരു ചിത്രം ചേർക്കും. നിങ്ങൾ മറ്റൊരു സൈറ്റിൽ ഒരു ചിത്രത്തിലേക്ക് ചൂണ്ടിക്കാണിക്കുമ്പോൾ സാധാരണയായി ഒരു URL ഉപയോഗിക്കുന്നു. നിങ്ങളുടെ സൈറ്റിൽ സംഭരിച്ചിരിക്കുന്ന ചിത്രങ്ങൾക്കായി, ആപേക്ഷിക ലിങ്കുകൾ ഉപയോഗിക്കുന്നതാണ് നല്ലത്.

ടാഗ് ചെയ്യുക ഒരു ഇൻലൈൻ ഘടകമാണ്, അതിനാൽ ഇത് ഒരു ബ്ലോക്ക് ഘടകത്തിനുള്ളിൽ സ്ഥാപിക്കുന്നതാണ് നല്ലത്, ഉദാഹരണത്തിന് ഒരു ടാഗിനുള്ളിൽ

- ഖണ്ഡിക:

എന്നതിനെക്കുറിച്ചുള്ള മുൻ ലേഖനങ്ങളിൽ നിന്ന് പരിശീലിച്ച് ഞങ്ങളുടെ പേജിൽ ഒട്ടിക്കാം html ചിത്രം. എൻ്റെ പേജിൻ്റെ html ഫയലിന് അടുത്തായി ഞാൻ ഒരു ഫോൾഡർ “ഇമേജുകൾ” സൃഷ്‌ടിക്കുകയും അവിടെ “bmw.jpg” എന്ന ചിത്രമുള്ള ഒരു ഫയൽ സ്ഥാപിക്കുകയും ചെയ്യും, അത് ഇതുപോലെ കാണപ്പെടുന്നു:

അപ്പോൾ ചേർത്ത ചിത്രമുള്ള പേജിൻ്റെ html കോഡ് ഇതുപോലെയായിരിക്കും:

കാറുകളെക്കുറിച്ചുള്ള വെബ്സൈറ്റ്.

ഞങ്ങളുടെ ഓട്ടോമോട്ടീവ് വെബ്‌സൈറ്റിലേക്ക് സ്വാഗതം. ഇവിടെ നിങ്ങൾക്ക് രസകരമായ പലതും കണ്ടെത്താനാകും ഉപയോഗപ്രദമായ ലേഖനങ്ങൾകാറുകളെക്കുറിച്ച്, അവരെ കുറിച്ച് സാങ്കേതിക സവിശേഷതകൾസവിശേഷതകളും.

ശാസ്ത്രീയ ഭാഷ ഓട്ടോമൊബൈൽഇത്:

മെക്കാനിക്കൽ മോട്ടോർ ട്രാക്കില്ലാത്ത റോഡ് വാഹനംകുറഞ്ഞത് 4 ചക്രങ്ങളോടെ.

---

കാർ വർഗ്ഗീകരണം

കാറുകൾ ഇനിപ്പറയുന്ന തരത്തിലാണ്:

• പാസഞ്ചർ കാർ;


• കാർഗോ;


• എസ്‌യുവി;


• ബഗ്ഗി;


• പുരോഗമിക്കുക;


• സ്പോർട്സ്;


• റേസിംഗ്.

എല്ലാ അവകാശങ്ങളും നിക്ഷിപ്തം. 2010
കാറുകളെക്കുറിച്ചുള്ള വെബ്സൈറ്റ്.

ബ്രൗസറിലെ ഡിസ്പ്ലേ ഫലം നോക്കുക:

നമ്മൾ കാണുന്നതുപോലെ, വെബ് പേജുകളിൽ ചിത്രങ്ങൾ സ്ഥാപിക്കുന്നതിൽ സങ്കീർണ്ണമായ ഒന്നും തന്നെയില്ല. അടുത്തതായി, മറ്റ് ചില പ്രധാന ടാഗ് ആട്രിബ്യൂട്ടുകൾ നോക്കാം. .

ആൾട്ട് ആട്രിബ്യൂട്ട് ഒരു ഫാൾബാക്ക് ഓപ്ഷനാണ്

ഇമേജ് ഫയലുകൾ വെബ് പേജുകളിൽ നിന്ന് പ്രത്യേകം സംഭരിച്ചിരിക്കുന്നതിനാൽ, അവ വീണ്ടെടുക്കുന്നതിന് ബ്രൗസറിന് പ്രത്യേക അഭ്യർത്ഥനകൾ നടത്തേണ്ടതുണ്ട്. എന്നാൽ പേജിൽ ധാരാളം ചിത്രങ്ങൾ ഉണ്ടെങ്കിൽ നെറ്റ്‌വർക്ക് കണക്ഷൻ വേഗത കുറവാണെങ്കിൽ ലോഡുചെയ്യുന്നു അധിക ഫയലുകൾഅതിന് ഗണ്യമായ സമയമെടുക്കും. നിങ്ങളുടെ അറിവില്ലാതെ ചിത്രം സെർവറിൽ നിന്ന് ഇല്ലാതാക്കിയാൽ അത് കൂടുതൽ മോശമാണ്.

ഈ സന്ദർഭങ്ങളിൽ, വെബ് പേജ് തന്നെ വിജയകരമായി ലോഡുചെയ്യും, ചിത്രങ്ങൾക്ക് പകരം വെളുത്ത ദീർഘചതുരങ്ങൾ മാത്രമേ ദൃശ്യമാകൂ. അതിനാൽ, ചിത്രം എന്താണെന്ന് ഉപയോക്താവിനോട് പറയാൻ, . ഈ ആട്രിബ്യൂട്ട് ഉപയോഗിച്ച്, നിങ്ങൾ റീപ്ലേസ്‌മെൻ്റ് ടെക്‌സ്‌റ്റ് എന്ന് വിളിക്കുന്നു, അത് ചിത്രം ലോഡ് ചെയ്യുന്നതുവരെ ശൂന്യമായ ദീർഘചതുരത്തിൽ പ്രദർശിപ്പിക്കും:

ഇത് ഏകദേശം ഇങ്ങനെയാണ്:

ചിത്രത്തിൻ്റെ അളവുകൾ സജ്ജമാക്കുക

നിങ്ങൾ അറിഞ്ഞിരിക്കേണ്ട ചില img ടാഗ് ആട്രിബ്യൂട്ടുകൾ ഇപ്പോഴും ഉണ്ട്. ഇത് രണ്ട് ആട്രിബ്യൂട്ടുകളാണ് വീതിഒപ്പം ഉയരം. ചിത്രത്തിൻ്റെ അളവുകൾ വ്യക്തമാക്കാൻ നിങ്ങൾക്ക് ഇവ ഉപയോഗിക്കാം:

വീതി="300" ഉയരം="200">

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

ഇപ്പോൾ പേജുകളിലേക്ക് ചിത്രങ്ങൾ ചേർക്കുന്നതിനെ കുറിച്ചാണ് ഇത്രയധികം, തുടർന്ന് ഒരു വെബ്‌സൈറ്റിലേക്ക് ഓഡിയോ അല്ലെങ്കിൽ വീഡിയോ എങ്ങനെ ചേർക്കാമെന്ന് നോക്കാം...

HTML 5 ഉപയോഗിച്ച് വീഡിയോയും ഓഡിയോയും ചേർക്കുന്നു

IN പുതിയ സ്പെസിഫിക്കേഷൻ html5-ന് മൾട്ടിമീഡിയ ഫയലുകൾ ചേർക്കുന്നത് വളരെ എളുപ്പമാക്കുന്ന നിരവധി പുതിയ ടാഗുകൾ ഉണ്ട്. ഇത് പ്രാഥമികമായി വീഡിയോയ്ക്കും ഓഡിയോയ്ക്കും ബാധകമാണ്.

തിരുകാൻ ഓഡിയോ HTML5 നൽകുന്നു ജോടിയാക്കിയ ടാഗ് ഓഡിയോ ക്ലിപ്പ് സംഭരിച്ചിരിക്കുന്ന ഫയലിൻ്റെ വിലാസം നമുക്ക് ഇതിനകം പരിചിതമായ src ആട്രിബ്യൂട്ട് ഉപയോഗിച്ച് സൂചിപ്പിച്ചിരിക്കുന്നു:

ടാഗ് ചെയ്യുക

സ്ഥിരസ്ഥിതിയായി, ഓഡിയോ ക്ലിപ്പ് വെബ് പേജിൽ പ്രദർശിപ്പിക്കില്ല. എന്നാൽ ടാഗിലാണെങ്കിൽ

ഒരു വെബ് പേജിൽ ഒരു വീഡിയോ ചേർക്കാൻ ജോടിയാക്കിയ ടാഗ് ഉപയോഗിക്കുന്നു . ഈ ടാഗ് ഉപയോഗിച്ച് എല്ലാം ടാഗ് പോലെ തന്നെ

html പേജുകളിലേക്ക് ചിത്രങ്ങളും മൾട്ടിമീഡിയയും ചേർക്കുന്നതിനെക്കുറിച്ച് കൂടുതലൊന്നും പറയാനില്ല. ചോദ്യം ഞാൻ പ്രതീക്ഷിക്കുന്നു "ഒരു html പേജിലേക്ക് ഒരു ചിത്രം എങ്ങനെ ചേർക്കാം?"ഞാൻ നിനക്ക് ഉത്തരം പറഞ്ഞു. അതിനാൽ ഞാൻ ചുരുക്കി പറയാം:

വേണ്ടി html-ൽ ചിത്രങ്ങൾ ചേർക്കുന്നുഒരൊറ്റ ടാഗ് ഉപയോഗിക്കുന്ന പേജ് കൂടാതെ ആട്രിബ്യൂട്ടിലെ ചിത്രത്തിനൊപ്പം ഫയലിൻ്റെ വിലാസം സൂചിപ്പിക്കുക src: ;

• ഉപയോഗിച്ച് alt ആട്രിബ്യൂട്ട്ടാഗ് ഇമേജ് ലോഡുചെയ്യുന്നില്ലെങ്കിൽ നിങ്ങൾക്ക് മാറ്റിസ്ഥാപിക്കാനുള്ള ടെക്സ്റ്റ് സജ്ജമാക്കാൻ കഴിയും;
• ആട്രിബ്യൂട്ടുകൾ ഉപയോഗിച്ച് വീതിഒപ്പം ഉയരംനിങ്ങൾക്ക് ഒരു വെബ് പേജിൽ ചിത്ര വലുപ്പങ്ങൾ സജ്ജമാക്കാൻ കഴിയും;
• html5-ൽ ഓഡിയോയും വീഡിയോയും ചേർക്കുന്നതിന് ജോടിയാക്കിയ ടാഗുകൾ ഉണ്ട്

എന്തെങ്കിലും വ്യക്തമല്ലെങ്കിൽ, അഭിപ്രായങ്ങളിൽ ചോദിക്കുക, എൻ്റെ ബ്ലോഗ് അപ്ഡേറ്റുകൾ സബ്സ്ക്രൈബ് ചെയ്യാൻ മറക്കരുത്. അടുത്ത പോസ്റ്റുകളിൽ കാണാം!

ഉൾപ്പെടുത്തുന്നതിന് HTML-ലെ ചിത്രങ്ങൾ GIF, JPEG എന്നിവയാണ് പ്രധാനമായും ഉപയോഗിക്കുന്ന രണ്ട് ഫോർമാറ്റുകൾ. GIF ഫോർമാറ്റിന് സംഭരിക്കാൻ കഴിയും ലളിതമായ ആനിമേഷൻ(ഡൈനാമിക് ബാനറുകൾ), ഫോട്ടോഗ്രാഫുകൾ പോലുള്ള ധാരാളം നിറങ്ങളുള്ള ചിത്രങ്ങൾക്ക് JPEG മികച്ചതാണ്. വെബ് ഗ്രാഫിക്സിനുള്ള മൂന്നാമത്തെ ഫോർമാറ്റ് PNG ആണ്, എന്നാൽ ഇത് വെബ് ഡിസൈനിൽ വ്യാപകമായി ഉപയോഗിക്കപ്പെടുന്നില്ല. GIF അല്ലെങ്കിൽ JPEG ഫോർമാറ്റിലുള്ള ഏതൊരു ചിത്രവും ടാഗ് ഉപയോഗിച്ച് ഒരു വെബ് പേജിൽ ചേർക്കുന്നു; ക്ലോസിംഗ് ടാഗ് ഇല്ല.

SRC ആട്രിബ്യൂട്ട്

ആട്രിബ്യൂട്ട് വഴി srcഇമേജ് ഫയലിൻ്റെ വിലാസം (URL) വ്യക്തമാക്കിയിട്ടുണ്ട്, അതായത്. ഈ ആട്രിബ്യൂട്ടിൽ വ്യക്തമാക്കിയ പാത്ത് (URL) ഉപയോഗിച്ച് സൈറ്റ് ഡയറക്ടറിയിൽ ബ്രൗസർ ആവശ്യമുള്ള ചിത്രം കണ്ടെത്തുന്നു. സൗകര്യാർത്ഥം, എല്ലാ സൈറ്റ് ചിത്രങ്ങളും ഒരു പ്രത്യേക ഫോൾഡറിൽ സ്ഥിതിചെയ്യുന്നു, സാധാരണയായി പേര് ചിത്രം. ഉദാഹരണത്തിന്, ഏതെങ്കിലും ചിത്രം എടുക്കുക, വെയിലത്ത് ഒരു ചെറിയ ഫോർമാറ്റ്, അത് സൃഷ്ടിച്ച ഫോൾഡർ ഇമേജിൽ, പേരിനൊപ്പം സംരക്ഷിക്കുക primer.jpg. അടുത്തതായി, പരിശീലനത്തിനായി ഞങ്ങൾ അത് റഫർ ചെയ്യും.

ശരി, പേജിൽ ഒരു ചിത്രം ചേർക്കാൻ ശ്രമിക്കാം? ഞങ്ങൾ കോഡ് എഴുതുന്നു (പാത്ത് - URL, ചിത്രങ്ങളുള്ള ഫോൾഡറിൻ്റെ സ്ഥാനം അനുസരിച്ച് എഴുതിയത്):

src="image/primer.jpg" >

ഇതില്ലാതെ നിങ്ങൾക്ക് ഒരു വെബ്‌സൈറ്റ് സൃഷ്‌ടിക്കാനാകില്ല: ∼ ∼

ഈ മനുഷ്യനെക്കുറിച്ച് അറിയാവുന്നതെല്ലാം
അവൻ ജയിലിൽ ആയിരുന്നില്ല, പക്ഷേ എന്തുകൊണ്ടാണ് അവൻ ജയിലിൽ ആയിരുന്നില്ല എന്നത് അജ്ഞാതമാണ്.
മാർക്ക് ട്വെയിൻ.

ഇത് ഒരു പാഠമാണ് HTML-ൽ ഒരു ചിത്രം എങ്ങനെ ചേർക്കാം, അത് എങ്ങനെ ഡിസൈൻ ചെയ്യാം, ഒരു ചിത്രത്തിന് ചുറ്റും വാചകം എങ്ങനെ പൊതിയാം തുടങ്ങിയവ. എല്ലാത്തിനുമുപരി, ചിത്രങ്ങൾ ഒരു സൈറ്റിനെ കൂടുതൽ ആകർഷകവും മറ്റ് ഉറവിടങ്ങളിൽ നിന്ന് വ്യത്യസ്തവുമാക്കുന്നുവെന്ന് അറിയാം, അതിനാൽ ടാഗും അതിൻ്റെ ആട്രിബ്യൂട്ടുകളും ഉപയോഗിക്കാനുള്ള കഴിവ് വളരെ ഉപയോഗപ്രദമാണ്. ആധുനിക ഇൻ്റർനെറ്റ്. എന്നാൽ ഇവിടെ പ്രധാന കാര്യം അനുപാതബോധം ആണ്!

ഗ്രാഫിക്‌സിൻ്റെ ആധിക്യം HTML പേജിനെ ഭാരമുള്ളതാക്കുകയും അതിനനുസരിച്ച് അതിൻ്റെ ലോഡിംഗ് സമയം വർദ്ധിപ്പിക്കുകയും ചെയ്യും. കൂടാതെ, സാന്നിധ്യം വലിയ സംഖ്യസൈറ്റിൻ്റെ പ്രധാന ഉള്ളടക്കത്തിൽ നിന്ന് ചിത്രങ്ങൾ സന്ദർശകരെ വ്യതിചലിപ്പിക്കും (തീർച്ചയായും, ഗ്രാഫിക്സ് സൈറ്റിൻ്റെ പ്രധാന ഉള്ളടക്കമല്ലെങ്കിൽ). അതിനാൽ, ഇത് മിതമായി സൂക്ഷിക്കുക, ആവശ്യമുള്ളിടത്ത് മാത്രം ഉപയോഗിക്കുക. നിങ്ങൾ സന്തുഷ്ടരാകും!

എന്ന പാഠത്തിൽ, ഒരു HTML ഡോക്യുമെൻ്റിൻ്റെ പശ്ചാത്തലമായി നിങ്ങൾക്ക് എങ്ങനെ ചിത്രങ്ങൾ ഉപയോഗിക്കാം എന്നതിനെക്കുറിച്ച് ഞാൻ ഇതിനകം സംസാരിച്ചു. ഒരു html പേജിൻ്റെ മുകളിലെ പാളിയിൽ ഗ്രാഫിക്സ് എങ്ങനെ ഉപയോഗിക്കുന്നു എന്നതിനെക്കുറിച്ച് ഇപ്പോൾ സംസാരിക്കാം.

§ 1. ഒരു ചിത്രം എങ്ങനെ ചേർക്കാം

HTML-ലേക്ക് ചിത്രങ്ങൾ ചേർക്കാൻ, ടാഗ് ഉപയോഗിക്കുക ഐ.എം.ജികൂടെ നിർബന്ധമാണ്ആട്രിബ്യൂട്ട് SRC. ഈ ആട്രിബ്യൂട്ട് ബ്രൗസറിനോട് ഇമേജ് ഫയലിലേക്കുള്ള പാത പറയുന്നു. ആ. ഒരു ചിത്രം ചേർക്കാൻ logo.jpg എന്ന പേരിനൊപ്പംപേജിലെ ഒരു നിശ്ചിത സ്ഥലത്തേക്ക് (പേജും ചിത്രവും സ്ഥിതിചെയ്യുന്നുണ്ടെങ്കിൽ ഒരു ഫോൾഡറിൽ(ഡയറക്‌ടറി)) നിങ്ങൾ ഈ സ്ഥലത്ത് ഇനിപ്പറയുന്ന html കോഡ് ചേർക്കേണ്ടതുണ്ട്:

src="logo.jpg">

ചിത്രവും പേജും സ്ഥിതിചെയ്യുന്നുണ്ടെങ്കിൽ വ്യത്യസ്തമായഡയറക്ടറികൾ (ഫോൾഡറുകൾ), തുടർന്ന് നിങ്ങൾ ചിത്രത്തിലേക്കുള്ള പാത വ്യക്തമാക്കേണ്ടതുണ്ട് താരതമ്യേനപേജുകൾ. ഉദാഹരണത്തിന്, ഒരു html പേജ് ഡയറക്ടറി (ഫോൾഡർ) സൈറ്റിൽ സ്ഥിതിചെയ്യുന്നുണ്ടെങ്കിൽ, അതേ ഡയറക്‌ടറിയിൽ (ഫോൾഡർ) ഒരു ഉപഡയറക്‌ടറി (ഫോൾഡർ) ഇമേജുകൾ ഉണ്ട്, അതിൽ ഞങ്ങളുടെ ഇമേജ് logo.jpg സ്ഥിതിചെയ്യുന്നു, അത് ചേർക്കുന്നതിന് നിങ്ങൾ ചെയ്യേണ്ടത് ആവശ്യമാണ്. ഇതുപോലെ എഴുതുക:

images/logo.jpg">

അല്ലെങ്കിൽ നിങ്ങൾ വിഷമിക്കുകയും ചൂണ്ടിക്കാണിക്കുകയും ചെയ്യേണ്ടതില്ല മുഴുവൻ വിലാസംചിത്രങ്ങൾ. ഉദാഹരണത്തിന്, ഇതുപോലെ:

http://www..png">

പിന്നീടുള്ള സാഹചര്യത്തിൽ, ബ്രൗസർ ഇതുപോലെയുള്ള കോഡ് പ്രദർശിപ്പിക്കും:

കുറിപ്പ്. ചിത്രം സ്ഥിതിചെയ്യുന്നുണ്ടെങ്കിൽ നിങ്ങളുടെ കമ്പ്യൂട്ടറിൽ, എന്നാൽ നിങ്ങൾ അത് തിരുകാൻ ആഗ്രഹിക്കുന്നു ഇൻ്റർനെറ്റ് പേജിലേക്ക്, പിന്നെ ഒന്നും വരില്ല. ഇത് ചെയ്യുന്നതിന്, നിങ്ങൾ ആദ്യം ചിത്രം ഏതെങ്കിലും സ്ഥലത്തേക്ക് മാറ്റണം ഇന്റർനെറ്റിൽ(ഉദാഹരണത്തിന്, ). കൂടാതെ പേജ് കോഡിലെ മുഴുവൻ വിലാസവും സൂചിപ്പിക്കുക ഒരു ചിത്രത്തിനൊപ്പം ഇത് വരെ.

ആവശ്യമായ ആട്രിബ്യൂട്ട് കൂടാതെ SRCടാഗിൽ ഐ.എം.ജികുറച്ച് ഓപ്ഷണൽ ആട്രിബ്യൂട്ടുകൾ കൂടിയുണ്ട്. നമുക്ക് അവരെ സൂക്ഷ്മമായി പരിശോധിക്കാം.

§ 2. ചിത്രത്തിൻ്റെ വലുപ്പം വ്യക്തമാക്കുന്നു

സജ്ജമാക്കാൻ നിങ്ങളെ അനുവദിക്കുന്ന ആട്രിബ്യൂട്ടുകളിൽ നിന്ന് നമുക്ക് ആരംഭിക്കാം ചിത്രത്തിൻ്റെ അളവുകൾ(കൂടുതൽ കൃത്യമായി പറഞ്ഞാൽ, പേജുകളിൽ ഈ അളവുകൾക്കായി സ്ഥലം വിനിയോഗിക്കുക). അവ ഇതാ:

• വീതി- ചിത്രത്തിൻ്റെ വീതി പിക്സലുകളിലോ ശതമാനത്തിലോ;


• ഉയരം- ചിത്രത്തിൻ്റെ ഉയരം പിക്സലുകളിലോ ശതമാനത്തിലോ.

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

ചിത്രങ്ങളുടെ വീതിയും ഉയരവും പിക്സലുകളിലും (സ്ക്രീൻ റെസലൂഷൻ പരിഗണിക്കാതെ തന്നെ ചിത്രത്തിൻ്റെ വലുപ്പം സ്ഥിരമായിരിക്കും) ശതമാനത്തിലും (ചിത്രത്തിൻ്റെ വലുപ്പം ഉപയോക്താവിൻ്റെ സ്ക്രീനിൻ്റെ റെസല്യൂഷനെ ആശ്രയിച്ചിരിക്കും) വ്യക്തമാക്കാം. ഉദാഹരണത്തിന്:

വീതി="50" ഉയരം="20">

വീതി = "10%" ഉയരം = "5%">

§ 3. ഇതര വാചകം

ബ്രൗസർ ക്രമീകരണങ്ങളിൽ ഉപയോക്താവ് ചിത്രങ്ങളുടെ പ്രദർശനം അപ്രാപ്‌തമാക്കിയിട്ടുണ്ടെങ്കിൽ, ചിത്രത്തിന് പകരം, ഏത് തരത്തിലുള്ള ഗ്രാഫിക്‌സ് ഉണ്ടായിരിക്കണമെന്ന് വിശദീകരിക്കുന്ന ഇതര വാചകം പ്രദർശിപ്പിക്കാൻ കഴിയും. ആട്രിബ്യൂട്ട് ഉപയോഗിച്ചാണ് ഇത് നേടുന്നത് ALT:

ഈ സാഹചര്യത്തിൽ, ബ്രൗസർ ചിത്രത്തിനായി പേജിൽ ഇടം റിസർവ് ചെയ്യും, എന്നാൽ ചിത്രത്തിന് പകരം, ആട്രിബ്യൂട്ട് മൂല്യത്തിൽ നിങ്ങൾ എഴുതുന്ന വാചകം ഇത് കാണിക്കും. ALT:

ഞാൻ ആവർത്തിക്കുന്നു, ഉപയോക്താവ് ഗ്രാഫിക്സിൻ്റെ ഡിസ്പ്ലേ അപ്രാപ്തമാക്കിയാൽ ഇത് സംഭവിക്കും. ഇല്ലെങ്കിൽ, ചിത്രം ഇതര വാചകം മറയ്ക്കും.

§ 4. ചിത്രം വിന്യസിക്കുന്നു

നിങ്ങൾക്ക് ഇതിനകം അറിയാവുന്ന ഒരു ആട്രിബ്യൂട്ട് ഉപയോഗിക്കുന്നു വിന്യസിക്കുക html പേജിൻ്റെ മറ്റ് ഘടകങ്ങളുമായി ബന്ധപ്പെട്ട ചിത്രങ്ങളുടെ വിന്യാസം നിങ്ങൾക്ക് നിയന്ത്രിക്കാനാകും. ആട്രിബ്യൂട്ടിൽ വിന്യസിക്കുകനിരവധി അർത്ഥങ്ങളുണ്ട്, പക്ഷേ ഞങ്ങൾ തന്നെയാണ് ഏറ്റവും കൂടുതൽ ആ നിമിഷത്തിൽഎനിക്ക് രണ്ടിൽ താൽപ്പര്യമുണ്ട്:

• വിട്ടുപോയി- ചിത്രം പേജിൻ്റെ ഇടത് അറ്റത്ത് സ്ഥിതിചെയ്യുന്നു, കൂടാതെ വാചകം വലതുവശത്തുള്ള ചിത്രത്തിന് ചുറ്റും ഒഴുകുന്നു;


• ശരിയാണ്- ചിത്രം പേജിൻ്റെ വലത് അറ്റത്ത് സ്ഥിതിചെയ്യുന്നു, കൂടാതെ വാചകവും മറ്റ് ഘടകങ്ങളും ചിത്രത്തിന് ചുറ്റും ഇടതുവശത്ത് ഒഴുകുന്നു.

ഉദാഹരണത്തിന്, HTML കോഡ്

ബ്രൗസർ ഇതുപോലെ കാണിക്കും

ഈ HTML കോഡും:

ഇതുപോലെ കാണപ്പെടും:

ഒരു ചിത്രത്തിന് ചുറ്റും ടെക്സ്റ്റ് പൊതിയുന്നത് നിർത്താൻ, നിങ്ങൾക്ക് ടാഗ് ഉപയോഗിക്കാം BR(മുമ്പത്തെ വിഭാഗത്തിൽ നിന്ന് ഞങ്ങൾക്ക് പരിചിതമാണ്). ടാഗിൽ BRഒരു ആട്രിബ്യൂട്ട് ഉണ്ട് വ്യക്തമായ, അതിന് മൂന്ന് മൂല്യങ്ങൾ എടുക്കാം:

• വിട്ടുപോയി- ഇടത് വിന്യസിച്ച ചിത്രങ്ങൾക്ക് ചുറ്റും വാചകം പൊതിയുന്നത് നിർത്തുക;


• ശരിയാണ്- വലതുവശത്ത് വിന്യസിച്ചിരിക്കുന്ന ചിത്രങ്ങൾക്ക് ചുറ്റും വാചകം പൊതിയുന്നത് നിർത്തുക;


• എല്ലാം- ഇടത്തും വലത്തും വിന്യസിച്ചിരിക്കുന്ന ചിത്രങ്ങൾക്ക് ചുറ്റും വാചകം പൊതിയുന്നത് നിർത്തുക.

ഇൻ്റർനെറ്റിൽ യാത്ര ചെയ്യുമ്പോൾ, നിങ്ങൾ തീർച്ചയായും പല സൈറ്റുകളിലും കാണും വിവിധ ചിത്രങ്ങൾ, ബാനറുകൾ, ഫോട്ടോഗ്രാഫുകൾ, ഗ്രാഫിക്സ്. ഒരു HTML പേജിലേക്ക് ചിത്രങ്ങൾ എങ്ങനെ ചേർക്കാമെന്ന് ഇന്ന് നമ്മൾ പഠിക്കും.

ഒരു ചിത്രം ചേർക്കുന്നത് രണ്ട് ഘട്ടങ്ങളിലാണ് സംഭവിക്കുന്നത്: ആദ്യം, ഒരു ഗ്രാഫിക് ഫയൽ തയ്യാറാക്കപ്പെടുന്നു ശരിയായ വലിപ്പംഫോർമാറ്റ് ചെയ്യുക, തുടർന്ന് ഇത് ടാഗ് വഴി വെബ് പേജിലേക്ക് ചേർക്കുന്നു: . HTML പ്രമാണം തന്നെ ആവശ്യമുള്ള ചിത്രം പ്രദർശിപ്പിക്കാൻ ഉദ്ദേശിച്ചുള്ളതാണ്, അതേസമയം അത് ഒട്ടും മാറ്റാതെ.

നിങ്ങളുടെ ചിത്രങ്ങൾ തയ്യാറാക്കുമ്പോൾ ശ്രദ്ധിക്കേണ്ട ചില കാര്യങ്ങളുണ്ട്.

1. നെറ്റ്‌വർക്കിലൂടെ വെബ് പേജ് ലോഡ് ചെയ്തിരിക്കുന്നതിനാൽ, ഒരു പ്രധാന ഘടകം വലിപ്പം ("ഭാരം") ഗ്രാഫിക് ഫയൽ , ഒരു വെബ് ഡോക്യുമെൻ്റിൽ ഉൾച്ചേർത്തിരിക്കുന്നു. ഇത് ചെറുതാണെങ്കിൽ, ചിത്രം വേഗത്തിൽ പ്രദർശിപ്പിക്കും.

2. പലപ്പോഴും ഭൗതിക അളവുകൾഇമേജുകൾ (വീതിയും ഉയരവും) വീതിയിലും ഉയരത്തിലും പരിമിതപ്പെടുത്തിയിരിക്കണം (കുറച്ച്). ഉദാഹരണത്തിന്, വീതി 700-800 പിക്സലിൽ കൂടരുത്. അല്ലെങ്കിൽ, മുഴുവൻ ചിത്രവും ബ്രൗസർ വിൻഡോയിൽ ചേരില്ല, സ്ക്രോൾ ബാറുകൾ ദൃശ്യമാകും.

വെബ്‌സൈറ്റുകൾക്കായുള്ള ഗ്രാഫിക് ഫോർമാറ്റുകൾ

വെബ് ഗ്രാഫിക്സിനായി ഏറ്റവും വ്യാപകമായി ഉപയോഗിക്കുന്ന രണ്ട് പ്രധാന ഫോർമാറ്റുകൾ ഇവയാണ്: GIFഒപ്പം JPEG. അത്തരം ഗുണങ്ങൾ: മൾട്ടിഫങ്ഷണാലിറ്റി, ബഹുമുഖത, ചെറിയ വോളിയം ഉറവിട ഫയലുകൾമതിയായ കൂടെ നല്ല നിലവാരം, ഈ ഫോർമാറ്റുകൾ നൽകി നല്ല സേവനം, വെബ് ഇമേജുകൾക്കുള്ള ഒരു മാനദണ്ഡമായി അവയെ ഫലപ്രദമായി നിർവചിക്കുന്നു.

ഒരു ഫോർമാറ്റും ഉണ്ട്: PNG, ഇമേജുകൾ ചേർക്കുമ്പോൾ ബ്രൗസറുകൾ പിന്തുണയ്‌ക്കുന്നതും രണ്ട് ഫ്ലേവറുകളിൽ വരുന്നതുമാണ്: PNG-8ഒപ്പം PNG-24. എന്നിരുന്നാലും, ജനപ്രീതി PNG ഫോർമാറ്റ്അംഗീകാരത്തിൽ വളരെ താഴ്ന്ന GIF ഫോർമാറ്റുകൾകൂടാതെ JPEG.

സാധാരണയായി ചിത്രങ്ങൾ (ചിത്രങ്ങൾ) അവർ സൃഷ്ടിക്കുന്നു പ്രത്യേക ഫോൾഡർറൂട്ട് ഡയറക്ടറിയിൽ സൈറ്റിനായുള്ള എല്ലാ ചിത്രങ്ങളും അതിൽ സംഭരിച്ചിരിക്കുന്നു. ചിലപ്പോൾ അത്തരം നിരവധി ഫോൾഡറുകൾ ഉണ്ട് (സൈറ്റ് ഘടനയ്ക്ക് അത് ആവശ്യമാണെങ്കിൽ അല്ലെങ്കിൽ നിങ്ങൾക്ക് നാവിഗേറ്റ് ചെയ്യാൻ എളുപ്പമാണെങ്കിൽ). ഈ ഫോൾഡർ മിക്കപ്പോഴും വിളിക്കപ്പെടുന്നു: imgഅല്ലെങ്കിൽ ചിത്രങ്ങൾ (ചിത്രങ്ങൾ). വെബ് പേജ് കോഡിൽ അവർ എഴുതുന്നു മുഴുവൻ പാതഗ്രാഫിക് ഫയലിലേക്ക് (ചിത്രം സ്ഥിതി ചെയ്യുന്നിടത്ത്), അതുപോലെ പേര് ഈ ഫയൽ(ചിത്രങ്ങൾ) നിങ്ങൾ html ഡോക്യുമെൻ്റിൽ ചേർക്കാൻ ആഗ്രഹിക്കുന്നു.

ഒരു വെബ് പേജിലേക്ക് ഒരു ചിത്രം ചേർക്കാൻ ഞങ്ങൾ കോഡ് എഴുതുന്നു

ഒരു HTML ഡോക്യുമെൻ്റിലേക്ക് ചിത്രങ്ങൾ ചേർക്കുന്നതിന്, അതിൽ വ്യക്തമാക്കിയ നിർമ്മാണം ഉപയോഗിക്കുക ലിസ്റ്റിംഗ് 8.1.ഈ കോഡ് വെബ് പേജിൽ ആവശ്യമുള്ള സ്ഥലത്ത് (ചിത്രം കാണാൻ ആഗ്രഹിക്കുന്നിടത്ത്) ചേർത്തിരിക്കുന്നു.

കാറുകൾക്കായി സമർപ്പിച്ചിരിക്കുന്ന ഞങ്ങളുടെ പേജിൽ, ഞാൻ രണ്ട് ചിത്രങ്ങൾ തയ്യാറാക്കി ചേർത്തു. ലിസ്റ്റിംഗ് 8.1-ൽ നിങ്ങൾക്ക് ആദ്യ ചിത്രത്തിനുള്ള എംബെഡ് കോഡ് കാണാൻ കഴിയും.

ലിസ്റ്റിംഗ് 8.1.

സൈറ്റിൻ്റെ വെബ് പേജിൽ ആദ്യം ചേർത്ത ചിത്രം ഇങ്ങനെയായിരിക്കും:

ഇപ്പോൾ എന്താണ് എഴുതിയിരിക്കുന്നതെന്ന് കൂടുതൽ വിശദമായി ഞാൻ അഭിപ്രായമിടും ലിസ്റ്റിംഗ് 8.1.

ടാഗ് ഉപയോഗിച്ച് ചിത്രം തന്നെ "തിരുകിയിരിക്കുന്നു": img src. പൂർണ്ണമായ എൻട്രി ഇതുപോലെ കാണപ്പെടുന്നു: img src="img/mers1.jpg", എവിടെ "img/mers1.jpg"- ഞങ്ങളുടെ ചിത്രം ഫോൾഡറിലാണെന്ന് സൂചിപ്പിക്കുന്നു: img, കൂടാതെ ഗ്രാഫിക് ഫയലിൻ്റെ പേര് (ചിത്രം): mers1.jpg.

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

അധിക ഓപ്ഷനുകൾ നോക്കാം:

ബോർഡർ="0"- ചിത്രത്തിന് ചുറ്റും ഫ്രെയിം ഇല്ലെന്ന് സൂചിപ്പിക്കുന്നു, 0 മറ്റൊരു സംഖ്യയിലേക്ക് മാറ്റാൻ ശ്രമിക്കുക, ഉദാഹരണത്തിന് 1 , - ചിത്രത്തിന് ചുറ്റുമുള്ള ഫ്രെയിമിൻ്റെ കനവുമായി പൊരുത്തപ്പെടുന്നു 1 പിക്സൽ, 2 - രണ്ട് പിക്സലുകളുടെ ചിത്രത്തിന് ചുറ്റുമുള്ള ഫ്രെയിമിൻ്റെ കനം, മുതലായവയുമായി യോജിക്കുന്നു.

പ്രധാനം! ഒരു ഇമേജ് ലിങ്ക് ആക്കാൻ നിങ്ങൾ ആഗ്രഹിക്കുന്നുവെങ്കിൽ, മൂല്യം സൂചിപ്പിക്കുന്നത് ഉറപ്പാക്കുക: ബോർഡർ="0".

വീതി="400"- ചിത്രത്തിൻ്റെ വീതി ഇതാണെന്ന് സൂചിപ്പിക്കുന്നു: 400 പിക്സലുകൾ(ഇട്ടു യഥാർത്ഥ രൂപംനിങ്ങളുടെ ചിത്രങ്ങളുടെ വീതി).

ഉയരം="209"- ചിത്രത്തിൻ്റെ ഉയരം ഇതാണെന്ന് സൂചിപ്പിക്കുന്നു: 209 പിക്സലുകൾ(നിങ്ങളുടെ ചിത്രങ്ങളുടെ ഉയരത്തിന് ഒരു യഥാർത്ഥ നമ്പർ ഇടുക).

നിങ്ങൾ പാരാമീറ്ററുകൾ വ്യക്തമാക്കിയിട്ടില്ലെങ്കിൽ: വീതിഒപ്പം ഉയരം, അപ്പോൾ ചിത്രത്തിന് ജ്യാമിതീയ വികലങ്ങൾ ലഭിച്ചേക്കാം.

hspace="20"- ചിത്രത്തിന് ചുറ്റുമുള്ള വാചകത്തിൻ്റെ 20 പിക്സൽ ഇൻഡൻ്റേഷൻ സൂചിപ്പിക്കുന്നു.

വിന്യസിക്കുക = "ഇടത്"- ഇത് നിങ്ങൾക്ക് ഇതിനകം പരിചിതമായ ഒരു ടാഗ് ആണ്..... അത് ശരിയാണ്, അതിനർത്ഥം ഇടത് വിന്യാസം എന്നാണ്, ഇതിന് അർത്ഥവും എടുക്കാം: ശരിയാണ്- വലത് വിന്യാസം.

alt="കാറിൻ്റെ മുൻ കാഴ്ച" !}- ഇതര വാചകം ഇവിടെ എഴുതിയിരിക്കുന്നു, നിങ്ങൾ ചിത്രത്തിന് മുകളിൽ മൗസ് ഹോവർ ചെയ്യുമ്പോൾ അത് പ്രദർശിപ്പിക്കും.

അതേ രീതിയിൽ, ഞങ്ങൾ രണ്ടാമത്തെ ചിത്രം വെബ് പേജിലേക്ക് "തിരുകുക" ചെയ്യും, ഒരേയൊരു വ്യത്യാസം അത് വലതുവശത്തേക്ക് വിന്യസിക്കുമെന്നതാണ്.

ഈ ലേഖനത്തിലെ അഭിപ്രായങ്ങൾ (പാഠം):

img ഫോൾഡർ കൃത്യമായി എവിടെയാണ് സൃഷ്ടിക്കേണ്ടതെന്ന് ദയവായി എന്നോട് പറയൂ?

img ഫോൾഡർ ഒരു പരമ്പരാഗത നാമം മാത്രമാണ്, നിങ്ങൾ അത് പിന്നീട് മനസ്സിലാക്കുന്നിടത്തോളം കാലം നിങ്ങൾക്ക് ആവശ്യമുള്ളതെന്തും വിളിക്കാം. നിങ്ങൾക്ക് ഇത് എവിടെയും സൃഷ്ടിക്കാൻ കഴിയും, ലാളിത്യത്തിനായി, അത് റൂട്ട് ഡയറക്ടറിയിൽ സൃഷ്ടിച്ച് എല്ലാ ചിത്രങ്ങളും അവിടെ ഇടുക.

ചിത്രം പ്രദർശിപ്പിച്ചിട്ടില്ല, ലിഖിതം മാത്രമാണ്. എന്തായിരിക്കാം കാര്യം? നന്ദി.

മുകളിലെ ലിസ്റ്റിംഗ് 8.1 സൂക്ഷ്മമായി പരിശോധിക്കുക. എല്ലാം സ്വയം എടുക്കുക. റൂട്ട് ഡയറക്ടറിയിൽ (നിങ്ങളുടെ സൈറ്റിൻ്റെ എല്ലാ HTML ഫയലുകളും സ്ഥിതി ചെയ്യുന്നിടത്ത്), ഒരു img ഫോൾഡർ ഉണ്ടാക്കുക. നിങ്ങളുടെ എല്ലാ ചിത്രങ്ങളും ഈ ഫോൾഡറിൽ സ്ഥാപിക്കുക. ലിസ്റ്റിംഗിൽ, നിങ്ങളുടെ ഫയലിൻ്റെ പേരിലേക്ക് mers1.jpg മാറ്റുക. വീതിയും ഉയരവും മൂല്യങ്ങളും മാറ്റുക യഥാർത്ഥ വലുപ്പങ്ങൾനിങ്ങളുടെ ഫയൽ. നല്ലതുവരട്ടെ.

വളരെ നന്ദി, എല്ലാം പ്രവർത്തിച്ചു.

ഹലോ, എനിക്ക് മുമ്പത്തെ സ്പീക്കറിൻ്റെ അതേ സാഹചര്യമുണ്ട്: ഞാൻ നിങ്ങളുടേത് പോലെ കോഡ് എഴുതുന്നു, ഞാൻ ഫയലിൻ്റെ പേര് മാത്രം മാറ്റുന്നു: mers.1/jpeg എന്നതിന് പകരം ഞാൻ ലിങ്ക് ചേർക്കുക "കാറിൻ്റെ മുൻവശത്തെ കാഴ്ച" എന്ന ലിഖിതം, എൻ്റെ അഭിപ്രായത്തിൽ, ബ്രൗസറിന് ഫോട്ടോയിലേക്കുള്ള പാത കണ്ടെത്താൻ കഴിയില്ല അല്ലെങ്കിൽ എൻ്റെ കോഡ് ഇവിടെയുണ്ട്: ബി

നിങ്ങളുടെ img/mercedes/jpeg കോഡ് ശ്രദ്ധാപൂർവ്വം നോക്കുക. നിങ്ങൾ ശരിയായി മനസ്സിലാക്കുന്നു, ഗ്രാഫിക് ഫയലിലേക്കുള്ള പാത ബ്രൗസർ കണ്ടെത്തുന്നില്ല. 2. ഫയലിൻ്റെ പേര് തെറ്റാണ്, എനിക്ക് എങ്ങനെ mers1.jpg ഉണ്ടെന്ന് കാണുക

ശരി, ഞാൻ കോഡ് പകർത്തി ഒട്ടിച്ചു, എനിക്ക് ചിത്രമില്ലാത്ത ഒരു ഓവൽ ഉണ്ട്, ഓവലിൽ മുകളിൽ ഒരു ലിങ്ക് ഉണ്ട്!

ഹലോ, പ്രശ്നം ഒന്നുതന്നെയാണ്, സൈറ്റ് ഡോക്യുമെൻ്റുകൾ ഉള്ള അതേ സ്ഥലത്ത് ഞാൻ img എന്ന ഒരു ഫോൾഡർ സൃഷ്ടിച്ചു, 1.jpg എന്ന പേരിലുള്ള ചിത്രങ്ങൾ ഈ ഫോൾഡറിൽ സംരക്ഷിച്ചിരിക്കുന്നു, നിങ്ങളുടെ ഉദാഹരണത്തിലെന്നപോലെ ഞാൻ എല്ലാം എഴുതുന്നു.

എൻ്റെ ചിത്രം img ഫോൾഡറിൽ ഉണ്ടെന്ന് നിങ്ങൾ ശ്രദ്ധിച്ചെങ്കിൽ

തുടക്കക്കാരായ വെബ്‌മാസ്റ്റർമാർക്ക് വളരെ ഉപയോഗപ്രദമായ ഒരു ലേഖനം. "alt" ആട്രിബ്യൂട്ടിനുള്ള ഒരേയൊരു മുന്നറിയിപ്പ്. ചിത്രവുമായി ബന്ധപ്പെട്ട്, ലേഖനം ഇനിപ്പറയുന്ന വ്യാഖ്യാനം നൽകുന്നു: "alt="കാറിൻ്റെ മുൻ കാഴ്ച" – здесь прописывается альтернативный текст который высвечивается при наведении мыши на картинку." Не совсем точно: для рисунка - это прорегатива атрибута title. alt - альтернативный текст, который отобразится, если у пользователя графика отключена или картинка не загрузилась; title - атрибут, позволяющий отображать всплывающее пояснение к картинке при наведении на неё курсора.!}

ഇതാ എൻ്റെ കോഡ് അപ്പോൾ എന്തിനാണ് ചിത്രം അതിൻ്റെ വശത്ത് വയ്ക്കുന്നത്, അതിനുള്ള ചുമതല കേന്ദ്രം ആകുമ്പോൾ?

ഞാൻ മറ്റൊരാളുടെ സൈറ്റിൽ നിന്ന് ഒരു ചിത്രം എടുത്താൽ, അത് പകർപ്പവകാശ ലംഘനമാകില്ലേ?

കിടക്കുമ്പോൾ എന്തുകൊണ്ടെന്ന് വിശദീകരിക്കുക HTML പ്രമാണംസെർവറിലേക്ക്, ചിത്രങ്ങളുടെ സ്ഥാനത്ത് ഫ്രെയിമിൽ ശൂന്യമായ ഇടങ്ങളുണ്ട്. പ്രദർശനത്തിനുമുമ്പ്, ചിത്രങ്ങൾ എങ്ങനെയായിരിക്കണം.

ദിമിത്രി, അത്ഭുതങ്ങൾ സംഭവിക്കുന്നില്ല, നിങ്ങൾ എവിടെയോ ഒരു തെറ്റ് ചെയ്തു, ചിത്രങ്ങളിലേക്കുള്ള എല്ലാ പാതകളും പരിശോധിക്കുക, അതായത്. കോഡിൽ ചിത്രങ്ങൾ എങ്ങനെയാണ് എഴുതിയിരിക്കുന്നത്.

ഇതാണ് എൻ്റെ കോഡ്, ചിത്രം ഒഴികെ എല്ലാം പേജിൽ വെളിപ്പെടുത്തിയിരിക്കുന്നു, സാധ്യമായ എല്ലാ വഴികളിലും ഞാൻ ദിവസം മുഴുവൻ ശ്രമിച്ചു, പക്ഷേ ഒന്നുമില്ല. എന്താണ് ചെയ്യേണ്ടതെന്ന് ദയവായി എന്നോട് പറയൂ

AndreyK, ദയവായി എൻ്റെ കത്തിൽ എന്നെ ബന്ധപ്പെടുക, എനിക്ക് ഒരു ചിത്രം ഒരു തരത്തിലും ചേർക്കാൻ കഴിയില്ല, ഞാൻ എല്ലാം ശരിയായി നൽകില്ല, പക്ഷേ ഒന്നും തന്നെയില്ല, ഫ്രെയിമും ലിഖിതവും മാത്രമേ ദൃശ്യമാകൂ.

എൽവിറ, ഞാൻ നിങ്ങളുടെ കത്തും മറ്റ് എല്ലാ അഭിപ്രായങ്ങളും കത്തുകളും വായിച്ചു. പക്ഷെ ഞാൻ എവിടെ മറുപടി പറയണം... എൻ്റെ മുത്തച്ഛൻ്റെ ഗ്രാമത്തോട്???

എല്ലാവരും എന്തിനാണ് ഇത്ര വിഷമിക്കുന്നതെന്ന് എനിക്കറിയില്ല!? നിങ്ങൾ കോഡുകൾ പകർത്തി ഒട്ടിക്കുകയല്ല വേണ്ടത്, അവ സ്വയം എഴുതുക, എല്ലാം പ്രവർത്തിക്കും... എൻ്റെ ചിത്രത്തിൻ്റെ വാചകം ഇതാ

ഞാൻ നിങ്ങളുടെ ലിസ്‌റ്റിംഗ് പകർത്തി, എൻ്റെ മൂല്യങ്ങൾ ഒട്ടിച്ചു - ഒരു ചിത്രമുണ്ട്, അതേ കാര്യം ഞാൻ ചുവടെ ടൈപ്പ് ചെയ്യുന്നു (സ്വമേധയാ) ചിത്രമൊന്നുമില്ല - എന്തൊരു അത്ഭുതം?

AndreyK ദയവായി എന്നോട് പറയൂ എവിടെയാണ് പിശക്? എത്ര ശ്രമിച്ചിട്ടും നടന്നില്ല ((

ആൻഡ്രേ, എന്തുകൊണ്ടാണ് എനിക്ക് ചിത്രം കാണാൻ കഴിയാത്തതെന്ന് എന്നോട് പറയുക. എൻ്റെ കോഡ്: ഒരു ലിഖിതമുണ്ട്, പക്ഷേ ചിത്രമില്ല. എൻ്റെ വിലാസം: [ഇമെയിൽ പരിരക്ഷിതം]നന്ദി.

ഞാനും വളരെക്കാലം കഷ്ടപ്പെട്ടു, പക്ഷേ അത് പ്രവർത്തിച്ചു! തീർച്ചയായും, imj ഫോൾഡർ ഒരു HTML പ്രമാണത്തിൽ തുറക്കണം.

ഞാൻ തീർച്ചയായും ശ്രമിക്കും, നന്ദി

ഇ.ഇ.ഇ.ഇ.ഇ.ഇ.ഇ.

ഞാനും വളരെക്കാലം കഷ്ടപ്പെട്ടു, ചിത്രങ്ങളുള്ള ഫോൾഡർ index.html ൻ്റെ അതേ സ്ഥലത്തായിരിക്കണം, നന്ദി എലീന

ആൻഡ്രി ഞാൻ ചേർക്കുന്നു:

ആൻഡ്രി ഞാൻ ചേർക്കുന്നു: ഡോക്യുമെൻ്റിൽ എനിക്ക് ഒരു ചിത്രമില്ല, എൻ്റെ വിലാസം മാത്രം: [ഇമെയിൽ പരിരക്ഷിതം]

എൻ്റെ കോഡ്... ചിത്രവും ഇല്ല. img ഫോൾഡറും സൂചികയുടെ അതേ ഫോൾഡറിലാണ്... ദയവായി സഹായിക്കുക. [ഇമെയിൽ പരിരക്ഷിതം]നന്ദി!

ശരി, എനിക്കറിയില്ല. ഞാൻ എല്ലാ കമൻ്റുകളും വായിച്ചു. ഞാൻ എല്ലാം പരീക്ഷിച്ചു. ഞാൻ എൻ്റെ വിവരങ്ങൾ പകർത്തി ഒട്ടിച്ചു. ഒന്നും പ്രവർത്തിക്കുന്നില്ല. ചിത്രങ്ങളുള്ള ഫോൾഡർ (img) index.html-ൻ്റെ അതേ സ്ഥലത്താണ് സ്ഥിതി ചെയ്യുന്നത്. എന്നാൽ ചിത്രമില്ല. പകരം ഒരു ചുവന്ന കുരിശും ഒരു ലിഖിതവും ഞാൻ IE ബ്രൗസറിൽ പ്രവർത്തിക്കുന്നു. ഞാൻ നൽകിയത് ഇതാ:

പാഠത്തിലെ ഫോട്ടോയുടെ സ്ഥാനത്ത് ഞാൻ പേജിൻ്റെ HTML കോഡ് നോക്കി: പേജിലെ കോഡ് ലിസ്റ്റിംഗിലുള്ളതിൽ നിന്ന് വ്യത്യസ്തമാണ്. എന്തുകൊണ്ട്? കൂടാതെ, പേജിൽ "mers1.jpg" എന്ന കോഡ് അടിവരയിട്ടിരിക്കുന്നു. അടിവരയോടുകൂടിയ പകർത്തൽ പരാജയപ്പെട്ടു. ഞാൻ അത് അങ്ങനെ തിരുകാൻ ശ്രമിച്ചു. ഇപ്പോഴും ചിത്രമില്ല. എന്താണ് കാര്യം?

ഞങ്ങൾ സ്വയം ചോദിക്കുന്നു, ഞങ്ങൾ സ്വയം ഉത്തരം നൽകുന്നു. ഞാൻ വളരെക്കാലം കഷ്ടപ്പെട്ടു, ചിത്രം ഉൾപ്പെടുത്തിയില്ല. അത് മാറി: 1, src ടാഗിന് പകരം എനിക്ക് srk 2 ആയിരുന്നു. ചിത്രത്തിലേക്കുള്ള പാത രചിക്കുമ്പോൾ ഞാൻ ആശയക്കുഴപ്പത്തിലായി. ഞാൻ ഫോൾഡറിൻ്റെ പേര് IMG എന്നാക്കി മാറ്റി, എല്ലാം പ്രവർത്തിച്ചു.

സ്നേഹം, എന്നാൽ ഇപ്പോൾ നിങ്ങൾ ഇത് നിങ്ങളുടെ ജീവിതകാലം മുഴുവൻ ഓർക്കും :) ഞാൻ തമാശ പറയുകയാണ്, തീർച്ചയായും, അസ്വസ്ഥരാകരുത്. എന്നാൽ ഗൗരവമായി, ഒരു വ്യക്തി തിരികെ വിലാസം നൽകിയില്ലെങ്കിൽ, അവനെ സഹായിക്കാൻ എനിക്ക് മിക്കവാറും അസാധ്യമാണ്.

ഹലോ, ഒരു ചിത്രം മുകളിലും രണ്ടാമത്തേത് താഴെ ഇടതുവശത്തും മൂന്നാമത്തേത് താഴെ വലതുവശത്തും എങ്ങനെ സ്ഥാപിക്കാമെന്ന് എന്നോട് പറയൂ))))

..........ചിത്രം നഷ്‌ടമായതിൽ എൻ്റെ തെറ്റ് എന്താണ്?

കോഡിലെ എല്ലാം ശരിയാണ്, ഒന്നും കുഴപ്പമില്ലെങ്കിൽ, എല്ലാം പ്രവർത്തിക്കണം. എന്നാൽ ഫയലിൻ്റെ പേര് എഴുതുക (ചിത്രം) ഇംഗ്ലീഷ് അക്ഷരങ്ങളിൽ. പല സെർവറുകളും ലാറ്റിൻ അക്ഷരമാല സ്വീകരിക്കുന്നില്ല.

എന്നാൽ ഇവിടെ വിചിത്രമായത് ഇതാണ്... ഞാൻ ഫോൾഡറിന് വ്യത്യസ്ത പേരുകൾ വിളിക്കുമ്പോൾ, പാത ശരിയായി എഴുതിയിട്ടുണ്ടെങ്കിലും ചിത്രം ദൃശ്യമാകാൻ ആഗ്രഹിച്ചില്ല. ഞാൻ IMG ലേക്ക് വിളിച്ച ഉടൻ അവൾ പ്രത്യക്ഷപ്പെട്ടു. എന്താണ് ക്യാച്ച്?

മറീന, തന്ത്രമോ പ്രകോപനമോ ഇല്ല :). ലിസ്റ്റിംഗിൻ്റെ കോഡിൽ 8.1. ഈ ചിത്രം ഫോൾഡറിലാണെന്ന് സൂചിപ്പിച്ചിരിക്കുന്നു: img. നിങ്ങളുടെ ഹോസ്റ്റിലെ ചിത്രങ്ങളുടെ ഫോൾഡറിൻ്റെ പേര് നിങ്ങൾ മാറ്റുകയാണെങ്കിൽ, അത് ലിസ്റ്റിംഗിൽ മാറ്റുക, അതാണ് മുഴുവൻ തന്ത്രവും.

ഞാൻ ഒരു ചിത്രം ചേർക്കാൻ ശ്രമിക്കുന്നു!!! ഞാൻ എല്ലാം ഒരു നോട്ട്പാഡ് ഉപയോഗിച്ച് എഴുതുന്നു, ഞാൻ എല്ലാം ശരിയായി ചെയ്യുന്നു, ഒരുപക്ഷേ ഒരു നോട്ട്പാഡ് ഉപയോഗിക്കുന്നത് വിലമതിക്കുന്നില്ലേ??

ഫയർഫോക്സിൻ്റെ ഏറ്റവും പുതിയ മോസില്ലയിൽ ഞാൻ എല്ലാം തുറക്കുന്നു))

എൻ്റെ ചിത്രത്തിൻ്റെ പാത C:Documents and SettingsdenisDesktopkoffevinogradwwwImg ആണ്, ചിത്രത്തെ തന്നെ gif എന്ന് വിളിക്കുന്നു, പേരിൽ 1.gif ഉൾപ്പെടുന്നു...ഞാൻ ഇത് നോട്ട്പാഡിൽ ചെയ്യുന്നു

ഞാൻ അത് ചെയ്തു, മുഴുവൻ പാതയും പുറത്തുവരുന്നില്ല, മോസില്ല എക്സ്പ്ലോറർ ഫോട്ടോ കാണുന്നില്ല, ഒരു ചുവന്ന കുരിശ് ഉപയോഗിച്ച് അത് ഹൈലൈറ്റ് ചെയ്യുന്നു

ഡെനിസ്, പേരുമാറ്റുക Img ഫോൾഡർ img ൽ, അതായത്. എല്ലാം വലിയ അക്ഷരങ്ങളിൽ, അതിലേക്കുള്ള പാതയുടെ പേരുമാറ്റുക. പല സെർവറുകളും ക്യാപിറ്റൽ കേസ് ശരിയായി പ്രദർശിപ്പിക്കുന്നില്ല.

എനിക്ക് ഇപ്പോഴും അതേ ചോദ്യം ഉണ്ട്: എന്തുകൊണ്ട് ചിത്രങ്ങൾ അല്ല, ലിഖിതം മാത്രം. സൈറ്റിനായി ഞാൻ ഒരു പ്രത്യേക ഫോൾഡർ സൃഷ്ടിച്ചു: അതിൽ ഒരു വെബ് പേജും ഒരു ഡ്രോയിംഗും അടങ്ങിയിരിക്കുന്നു. ചേർത്തു: എൻ്റെ മെയിൽ പിശക് എന്താണെന്ന് സഹായിക്കുക: [ഇമെയിൽ പരിരക്ഷിതം]

ഒരു ചിത്രം എങ്ങനെ വലുതാക്കാം അല്ലെങ്കിൽ കുറയ്ക്കാം?

ചില കാരണങ്ങളാൽ ചിത്രം എന്നെ കേന്ദ്രീകരിക്കുന്നില്ല. എന്താണ് ക്യാച്ച്?.. കോഡ് ഇപ്രകാരമാണ്:

HTML-ലെ ചിത്രങ്ങളുമായി പ്രവർത്തിക്കുന്നു (ഒരു ചിത്രം എങ്ങനെ തിരുകാം, അതിൻ്റെ വലുപ്പം മാറ്റാം, ചിത്രം ഒരു ലിങ്ക് ആക്കുക).

ഒരു ചിത്രം ചേർക്കുന്നു

ഒരു HTML പ്രമാണത്തിലേക്ക് ഒരു ചിത്രം ചേർക്കുന്നതിന് ജോടിയാക്കാത്ത ടാഗ് ഉപയോഗിക്കുന്നു , ചിത്രം ചേർക്കേണ്ട ഡോക്യുമെൻ്റിലെ ലൊക്കേഷനിൽ ഇത് സ്ഥാപിച്ചിരിക്കുന്നു. ഈ ടാഗ് ഉണ്ട് ആവശ്യമായ പരാമീറ്റർ src, അതിൻ്റെ മൂല്യം പാതയെ സൂചിപ്പിക്കുന്നു ആവശ്യമുള്ള ചിത്രംനിങ്ങളുടെ വെബ്സൈറ്റ് ഡയറക്ടറിയിൽ.

ഉദാഹരണത്തിന്, ഒരു പേജിൽ ഒരു ചിത്രം സ്ഥാപിക്കാൻ:

പ്രമാണത്തിലെ ശരിയായ സ്ഥലത്ത് ഇനിപ്പറയുന്ന വരി സ്ഥാപിച്ചിരിക്കുന്നു:

ഇത് സൈറ്റിൻ്റെ റൂട്ട് ഡയറക്ടറിയാണെന്ന് ബ്രൗസറിനെ അറിയിക്കുന്നു www.mysite.comഒരു ഉപഡയറക്‌ടറി ഉണ്ട് img 1.png

ഇവിടെ ഞങ്ങൾ മുഴുവൻ പാതയും വ്യക്തമാക്കിയിട്ടുണ്ട് (അല്ലെങ്കിൽ സമ്പൂർണ്ണ വിലാസം) ചിത്രത്തിലേക്ക്. വ്യക്തമാക്കാമോ ബന്ധു വിലാസം ചിത്രങ്ങൾ:

ബ്രൗസർ ഈ വരിയെ ഇനിപ്പറയുന്ന രീതിയിൽ വ്യാഖ്യാനിക്കുന്നു: ഈ html പ്രമാണം സ്ഥിതിചെയ്യുന്ന ഡയറക്ടറിയിൽ, ഒരു ഉപഡയറക്‌ടറി ഉണ്ട് img, അതിൽ പേരുള്ള ഒരു ചിത്രം അടങ്ങിയിരിക്കുന്നു 1.png, അത് പേജിൽ സ്ഥാപിക്കണം.

നിങ്ങളുടെ സൈറ്റിൽ കൂടുതൽ ഉണ്ടെങ്കിൽ ഒരു ആപേക്ഷിക ഇമേജ് വിലാസം വ്യക്തമാക്കുന്നതിനുള്ള ഒരു ഉദാഹരണം ഇതാ സങ്കീർണ്ണമായ ഘടനമുമ്പത്തെ ഉദാഹരണം പ്രവർത്തിക്കുന്നില്ല:

ബ്രൗസർ ഈ വരിയെ ഇനിപ്പറയുന്ന രീതിയിൽ വ്യാഖ്യാനിക്കുന്നു: പ്രതീകങ്ങളുടെ സംയോജനം ../ ഈ html പ്രമാണം സ്ഥിതിചെയ്യുന്ന ഡയറക്ടറിയിൽ നിന്ന് നിങ്ങൾ ഒരു ലെവൽ മുകളിലേക്ക് പോകേണ്ടതുണ്ട് എന്നാണ് അർത്ഥമാക്കുന്നത്; തുടർന്ന് മുമ്പത്തെ ഉദാഹരണത്തിലെന്നപോലെ: നമ്മൾ സ്വയം കണ്ടെത്തുന്ന ഡയറക്ടറിയിൽ ഒരു ഉപഡയറക്‌ടറി ഉണ്ട് img, അതിൽ പേരുള്ള ഒരു ചിത്രം അടങ്ങിയിരിക്കുന്നു 1.png, അത് പേജിൽ സ്ഥാപിക്കണം.

സുരക്ഷാ കാരണങ്ങളാൽ, നിങ്ങളുടെ പേജിൽ മറ്റൊരു സൈറ്റിൽ ഒരു ചിത്രം സ്ഥാപിക്കുന്ന സന്ദർഭങ്ങളിലൊഴികെ, ചിത്രത്തിൻ്റെ ആപേക്ഷിക വിലാസം സൂചിപ്പിക്കുന്നതാണ് നല്ലത്.

ചിത്രത്തിൻ്റെ അളവുകൾ

ഓരോ ചിത്രത്തിൻ്റെയും വലുപ്പം രണ്ട് പാരാമീറ്ററുകൾ ഉപയോഗിച്ച് വ്യക്തമാക്കുന്നു: വീതിയും ഉയരവും. ടാഗിൽ അനുബന്ധ പാരാമീറ്ററുകൾ ഉണ്ട്: വീതിഒപ്പം ഉയരം. ഈ പരാമീറ്ററുകൾ പിക്സലുകളിൽ (px) മൂല്യങ്ങൾ എടുക്കുന്നു.

നിങ്ങൾക്ക് ചോദിക്കാം യഥാർത്ഥ അളവുകൾചിത്രങ്ങൾ:

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

അല്ലെങ്കിൽ നിങ്ങൾക്ക് പാരാമീറ്ററുകൾ നൽകി ചിത്രം വലുതാക്കുകയോ കുറയ്ക്കുകയോ ചെയ്യാം വീതിഒപ്പം ഉയരംമറ്റ് അർത്ഥങ്ങൾ. കൂടാതെ, നിങ്ങൾക്ക് രണ്ട് പാരാമീറ്ററുകളും ആനുപാതികമായി മാറ്റണമെങ്കിൽ, അവയിലൊന്നിന് മാത്രം ഒരു പുതിയ മൂല്യം സൂചിപ്പിച്ചാൽ മതി, രണ്ടാമത്തേത് ഒഴിവാക്കുക. ബ്രൗസർ അത് യാന്ത്രികമായി കണക്കാക്കും.

ഉദാഹരണത്തിന്, നമ്മുടെ ചിത്രം 1.5 മടങ്ങ് വലുതാക്കാൻ, നമുക്ക് എഴുതാം:

അല്ലെങ്കിൽ

ഫലം സമാനമായിരിക്കും:

കൂടുതൽ ഓപ്ഷനുകൾ വീതിഒപ്പം ഉയരംശതമാനത്തിൽ മൂല്യങ്ങൾ എടുക്കാം. പക്ഷേ! ഇത് ബ്രൗസർ വിൻഡോ വലുപ്പത്തിൻ്റെ ശതമാനങ്ങളാണെന്ന കാര്യം ശ്രദ്ധിക്കുക. ഈ സാഹചര്യത്തിൽ, നിങ്ങൾക്ക് ഒരു പരാമീറ്റർ മാത്രം വ്യക്തമാക്കാനും രണ്ടാമത്തേത് ഒഴിവാക്കാനും കഴിയും.

ഉദാഹരണത്തിന്, ചിത്രം നമ്മുടെ പേജിൻ്റെ പകുതി വീതിയിൽ ഉൾക്കൊള്ളാൻ ആഗ്രഹിക്കുന്നുവെങ്കിൽ, ഇനിപ്പറയുന്നവ എഴുതേണ്ടതുണ്ട്:

കൂടാതെ നമുക്ക് ലഭിക്കും:

ചിത്രത്തിന് ചുറ്റുമുള്ള ഫ്രെയിം

ടാഗിൽ ഒരു ഓപ്ഷണൽ പാരാമീറ്റർ കൂടി ഉണ്ട് അതിർത്തി. ചിത്രത്തിന് ചുറ്റുമുള്ള ഫ്രെയിമിൻ്റെ കനം സജ്ജമാക്കാൻ ഇത് ഉപയോഗിക്കുക. സ്ഥിരസ്ഥിതിയായി, ഇമേജ് ഫ്രെയിം കനം പൂജ്യമാണ്, അതായത്. ഫ്രെയിം ഇല്ല.

ഉദാഹരണത്തിന്, ഞങ്ങളുടെ ചിത്രത്തിലേക്ക് 3 പിക്സൽ കട്ടിയുള്ള ഒരു ഫ്രെയിം ചേർക്കുന്നത് ഇങ്ങനെയാണ്:

ബ്രൗസർ ഞങ്ങളെ കാണിക്കുന്നത് ഇതാണ്:

ബോർഡർ വർണ്ണം പാരാമീറ്റർ ഉപയോഗിച്ച് വ്യക്തമാക്കിയ പേജിലെ വാചക നിറവുമായി പൊരുത്തപ്പെടുന്നു വാചകംടാഗ് (പാഠം 6 കാണുക. പേജ് പ്രോപ്പർട്ടികൾ - ബോഡി ടാഗ് പാരാമീറ്ററുകൾ), സ്ഥിരസ്ഥിതി നിറം കറുപ്പാണ്.

നിങ്ങൾക്ക് ഫ്രെയിം കാണാൻ താൽപ്പര്യമില്ലെങ്കിൽ, പാരാമീറ്റർ നിർബന്ധിക്കുക അതിർത്തിശൂന്യ മൂല്യം:

ഇതര വാചകം

ഇതര വാചകംഅത് ലോഡ് ആകുന്നതുവരെ ചിത്രത്തിൻ്റെ സ്ഥാനത്ത് ബ്രൗസർ പ്രദർശിപ്പിക്കും. അല്ലെങ്കിൽ ഒരു ചിത്രത്തിന് പകരം, ചില കാരണങ്ങളാൽ അത് പ്രദർശിപ്പിക്കുന്നില്ലെങ്കിൽ.

ചിത്രം ലോഡ് ചെയ്യുമ്പോൾ, എപ്പോൾ, ഇതര വാചകംഈ ചിത്രത്തിൽ നിങ്ങളുടെ മൗസ് ഹോവർ ചെയ്യുമ്പോൾ കാണിക്കും.

ഇതര ടെക്സ്റ്റ് ചേർക്കാൻ, ഓപ്ഷൻ ഉപയോഗിക്കുക altടാഗ് , ഒരു സ്ട്രിംഗ് മൂല്യം നൽകിയിട്ടുണ്ട്, അത് ഉദ്ധരണികളിൽ ഉൾപ്പെടുത്തണം.

നിങ്ങൾക്ക് മൾട്ടി-ലൈൻ ഇതര ടെക്സ്റ്റ് സൃഷ്ടിക്കാൻ കഴിയും.

ഇത് ചെയ്യുന്നതിന്, HTML പ്രമാണത്തിൽ ഒരു ലൈൻ ബ്രേക്ക് ചേർക്കുക.

ടെക്സ്റ്റ്">

ഇമേജ് വിന്യാസം

ഒരു ചിത്രത്തിന്, ഒരു ഖണ്ഡികയെ സംബന്ധിച്ചിടത്തോളം, പേജിലെ വാചകവും മറ്റ് ചിത്രങ്ങളുമായി വിന്യാസം എന്ന ആശയം ഉണ്ട്. പാരാമീറ്റർ ഉപയോഗിച്ച് നിങ്ങൾക്ക് അലൈൻമെൻ്റ് തരം സജ്ജമാക്കാനും കഴിയും വിന്യസിക്കുകടാഗ് .

സാധ്യമായ പാരാമീറ്റർ മൂല്യങ്ങളുടെ ഒരു പട്ടിക ചുവടെയുണ്ട് വിന്യസിക്കുക:

ഓപ്ഷനുകൾ ടെക്സ്റ്റ്ടോപ്പ്, മുകളിൽ, മധ്യഭാഗം, അബ്മിഡിൽ, അടിസ്ഥാനരേഖ, താഴെചിത്രത്തിൻ്റെ ലംബ വിന്യാസം സജ്ജമാക്കുക. ഒപ്പം പാരാമീറ്ററുകളും വിട്ടുപോയിഒപ്പം ശരിയാണ്വാചകം ഏത് വശത്തായിരിക്കണമെന്ന് ബ്രൗസറിനെ അറിയിക്കുക ചുറ്റും ഒഴുകുന്നുചിത്രം.

ചിത്രത്തിന് ചുറ്റും പാഡിംഗ്

വാചകം ചിത്രത്തിന് സമീപം പൊതിയാതിരിക്കാൻ, നിങ്ങൾക്ക് ചിത്രത്തിന് ചുറ്റും പാഡിംഗ് സജ്ജീകരിക്കാം. പാരാമീറ്ററുകൾ ഉപയോഗിച്ച് നിങ്ങൾക്ക് ഇത് ചെയ്യാൻ കഴിയും hspace(ഇടത്, വലത് പാഡിംഗ്) കൂടാതെ vspaceടാഗിൻ്റെ (മുകളിലും താഴെയുമുള്ള ഇടങ്ങൾ). .

ഇനിപ്പറയുന്ന ഉദാഹരണം ഒരു ചിത്രത്തിന് ചുറ്റും വാചകം പൊതിയുന്നതും ചിത്രം ഇടതുവശത്ത് വിന്യസിച്ചിരിക്കുന്നതും അതിന് ചുറ്റും 5 പിക്സൽ പാഡിംഗും കാണിക്കുന്നു:

സ്റ്റോക്ക്ഹോം നഗരത്തിൽ, ഏറ്റവും സാധാരണമായ തെരുവിൽ, ഏറ്റവും സാധാരണമായ വീട്ടിൽ, സ്വാൻ്റേസൺ എന്ന ഒരു സാധാരണ സ്വീഡിഷ് കുടുംബം താമസിക്കുന്നു. ഈ കുടുംബത്തിൽ വളരെ സാധാരണക്കാരനായ അച്ഛനും വളരെ സാധാരണക്കാരനായ അമ്മയും മൂന്ന് സാധാരണ കുട്ടികളും ഉൾപ്പെടുന്നു - ബോസ്, ബെഥാൻ, ബേബി.

ബ്രൗസറിലെ ഫലം ഇതാ:

സ്റ്റോക്ക്ഹോം നഗരത്തിൽ, ഏറ്റവും സാധാരണമായ തെരുവിൽ, ഏറ്റവും സാധാരണമായ വീട്ടിൽ, സ്വാൻ്റേസൺ എന്ന ഒരു സാധാരണ സ്വീഡിഷ് കുടുംബം താമസിക്കുന്നു. ഈ കുടുംബത്തിൽ വളരെ സാധാരണക്കാരനായ അച്ഛനും വളരെ സാധാരണക്കാരനായ അമ്മയും മൂന്ന് സാധാരണ കുട്ടികളും ഉൾപ്പെടുന്നു - ബോസ്, ബെഥാൻ, ബേബി.

ഒരു ചിത്രം ഭാഗങ്ങളായി വിഭജിക്കുന്നു

ഒരു പേജിൽ സ്ഥാപിക്കാൻ ആവശ്യമായ സമയങ്ങളുണ്ട് വലിയ ചിത്രം. എന്നാൽ പിന്നീട് പേജ് ലോഡ് ആകാൻ ഒരുപാട് സമയമെടുക്കും. എന്തുചെയ്യും?

സാധ്യമായ ഒന്ന്ചിത്രം കഷണങ്ങളായി മുറിച്ച് ഒരു ടേബിൾ ഉപയോഗിച്ച് പേജിൽ സ്ഥാപിക്കുക എന്നതാണ് ഏറ്റവും നല്ല മാർഗം. ചിത്രം മൊത്തത്തിൽ കാണുന്നതിന്, പട്ടികയുടെ അതിർത്തിയും സെല്ലുകൾക്കിടയിലും അകത്തും ഉള്ള എല്ലാ പാഡിംഗുകളും നീക്കം ചെയ്യേണ്ടത് ആവശ്യമാണ്. ആ. അനുബന്ധ ടാഗ് പാരാമീറ്ററുകളിലേക്ക് അസൈൻ ചെയ്യുക

പൂജ്യം മൂല്യങ്ങൾ: ബോർഡർ="0", സെൽസ്പേസിംഗ്="0", cellpadding="0".

ഇനിപ്പറയുന്ന ഉദാഹരണത്തിൽ, ഞങ്ങൾ ചിത്രം 4 ഭാഗങ്ങളായി വിഭജിക്കുന്നു. പട്ടിക ഇതുപോലെയായിരിക്കും:

അതിൻ്റെ ഫലം ഇതാ: